Compare commits
6 Commits
9f19b8fb66
...
Breach
| Author | SHA1 | Date | |
|---|---|---|---|
| b2ce9d93db | |||
| 8260b345dc | |||
| 2cd59adfc9 | |||
| baa89001c8 | |||
| 9b3c5da105 | |||
| a4c0aca1c2 |
@@ -59,3 +59,7 @@ export const getGroupEntiretyThirdReport = (params) => {
|
||||
return https.post('/api/v1/manager/group_entirety_third_report', params)
|
||||
}
|
||||
|
||||
// 获取优秀录音文件 /api/v1/level_five/overview/get_excellent_record_file
|
||||
export const getExcellentRecordFile = (params) => {
|
||||
return https.post('/api/v1/level_five/overview/get_excellent_record_file', params)
|
||||
}
|
||||
@@ -87,7 +87,7 @@ export const cancelSwitchHistoryCampPeriod = (params) => {
|
||||
|
||||
// 一键导出 api/v1/level_four/overview/export_customers
|
||||
export const exportCustomers = (params) => {
|
||||
return https.post('/api/v1/level_four/overview/export_customers', params)
|
||||
return https.post('/api/v1/level_four/overview/export_all_customers_under_sales', params)
|
||||
}
|
||||
|
||||
|
||||
|
||||
1144
my-vue-app/src/views/maneger/components/GoodMusic.vue
Normal file
1144
my-vue-app/src/views/maneger/components/GoodMusic.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -37,7 +37,9 @@
|
||||
<!-- Top Section - Team Alerts and Today's Report -->
|
||||
<div class="top-section">
|
||||
<!-- Team Alerts -->
|
||||
<TeamAlerts :abnormalData="groupAbnormalResponse" />
|
||||
<!-- <TeamAlerts :abnormalData="groupAbnormalResponse" /> -->
|
||||
<GoodMusic :quality-calls="excellentRecord"
|
||||
/>
|
||||
<!-- Today's Team Report -->
|
||||
<TeamReport :weekTotalData="weekTotalData" @show-team-analysis="fetchTeamAnalysis" />
|
||||
|
||||
@@ -88,6 +90,7 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import TeamAlerts from "./components/TeamAlerts.vue";
|
||||
import GoodMusic from "./components/GoodMusic.vue";
|
||||
import TeamReport from "./components/TeamReport.vue";
|
||||
import SalesFunnel from "./components/SalesFunnel.vue";
|
||||
import PerformanceRanking from "./components/PerformanceRanking.vue";
|
||||
@@ -99,7 +102,7 @@ import CustomerDetail from "../person/components/CustomerDetail.vue";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { useRouter } from "vue-router";
|
||||
import {getGroupAbnormalResponse, getWeekTotalCall, getWeekAddCustomerTotal, getWeekAddDealTotal,
|
||||
getWeekAddFeeTotal, getGroupFunnel,getPayDepositToMoneyRate,getGroupRanking, getGroupCallDuration,getGroupDetail, getGroupEntiretyThirdReport} from "@/api/manager.js";
|
||||
getWeekAddFeeTotal, getGroupFunnel,getPayDepositToMoneyRate,getGroupRanking, getGroupCallDuration,getGroupDetail, getGroupEntiretyThirdReport,getExcellentRecordFile} from "@/api/manager.js";
|
||||
|
||||
// 团队成员数据
|
||||
const teamMembers = [
|
||||
@@ -261,7 +264,48 @@ async function TeamGetWeekAddDealTotal() {
|
||||
weekTotalData.value.week_add_deal_total = res.data
|
||||
}
|
||||
}
|
||||
// 月度总业绩
|
||||
// 优秀录音
|
||||
// 获取优秀录音
|
||||
const excellentRecord = ref([]);
|
||||
// 获取优秀录音文件
|
||||
async function CentergetGoodRecord() {
|
||||
console.log('CentergetGoodRecord 开始执行')
|
||||
try {
|
||||
const params = getRequestParams()
|
||||
const params1 = {
|
||||
user_level: userStore.userInfo?.user_level?.toString() || '',
|
||||
user_name: userStore.userInfo?.username || ''
|
||||
}
|
||||
|
||||
// 检查参数是否有效
|
||||
const hasParams = params.user_name && params.user_level
|
||||
const requestParams = hasParams ? {
|
||||
...params,
|
||||
} : params1
|
||||
|
||||
console.log('CentergetGoodRecord request params:', requestParams)
|
||||
|
||||
// 验证必要参数是否存在
|
||||
if (!requestParams.user_name || !requestParams.user_level) {
|
||||
console.error("缺少必要的请求参数:", requestParams);
|
||||
return;
|
||||
}
|
||||
|
||||
// 直接发送请求,不使用缓存
|
||||
const res = await getExcellentRecordFile(requestParams)
|
||||
console.log(972872132,res)
|
||||
if (res && res.code === 200 && res.data) {
|
||||
excellentRecord.value = res.data || []
|
||||
console.log('获取优秀录音成功:', res.data)
|
||||
} else {
|
||||
console.error("获取优秀录音失败,响应数据不完整:", res);
|
||||
excellentRecord.value = []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("获取优秀录音失败:", error);
|
||||
excellentRecord.value = []
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 定金转化
|
||||
@@ -419,6 +463,7 @@ const formatReportContent = (content) => {
|
||||
// 团队异常预警
|
||||
|
||||
onMounted(async () => {
|
||||
CentergetGoodRecord()
|
||||
TeamGetGroupAbnormalResponse()
|
||||
TeamGetWeekTotalCall()
|
||||
TeamGetGroupCallDuration()
|
||||
@@ -743,12 +788,12 @@ onMounted(async () => {
|
||||
.top-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 3fr;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
|
||||
// PC端保持一致布局
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: 1fr 3fr;
|
||||
gap: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
// 平板端适配
|
||||
@@ -773,7 +818,7 @@ onMounted(async () => {
|
||||
.analytics-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
// PC端保持一致布局
|
||||
|
||||
@@ -186,87 +186,100 @@ watch(() => props.selectedContact, (newContact) => {
|
||||
}, { immediate: true });
|
||||
|
||||
// 基础信息分析
|
||||
const startBasicAnalysis = async () => {
|
||||
if (!props.selectedContact) return;
|
||||
// const startBasicAnalysis = async () => {
|
||||
// if (!props.selectedContact) return;
|
||||
|
||||
isBasicAnalysisLoading.value = true;
|
||||
basicAnalysisResult.value = '';
|
||||
// isBasicAnalysisLoading.value = true;
|
||||
// basicAnalysisResult.value = '';
|
||||
|
||||
// 构建表单信息
|
||||
const formData = props.formInfo || [];
|
||||
let formInfoText = '暂无表单信息';
|
||||
// // 构建表单信息
|
||||
// const formData = props.formInfo || [];
|
||||
// let formInfoText = '暂无表单信息';
|
||||
|
||||
// ** 适配新的 formInfo 数组格式 **
|
||||
if (Array.isArray(formData) && formData.length > 0) {
|
||||
const allInfo = [];
|
||||
// // ** 适配新的 formInfo 数组格式 **
|
||||
// if (Array.isArray(formData) && formData.length > 0) {
|
||||
// const allInfo = [];
|
||||
|
||||
// 遍历新格式: [{ question_label: "...", answer: "..." }, ...]
|
||||
formData.forEach(item => {
|
||||
// 检查字段是否存在且答案有效
|
||||
if (
|
||||
item.question_label &&
|
||||
item.answer &&
|
||||
item.answer !== '暂无' &&
|
||||
item.answer !== ''
|
||||
) {
|
||||
// 格式化为 "问题标签: 答案"
|
||||
allInfo.push(`${item.question_label.trim()}: ${item.answer.trim()}`);
|
||||
// // 遍历新格式: [{ question_label: "...", answer: "..." }, ...]
|
||||
// formData.forEach(item => {
|
||||
// // 检查字段是否存在且答案有效
|
||||
// if (
|
||||
// item.question_label &&
|
||||
// item.answer &&
|
||||
// item.answer !== '暂无' &&
|
||||
// item.answer !== ''
|
||||
// ) {
|
||||
// // 格式化为 "问题标签: 答案"
|
||||
// allInfo.push(`${item.question_label.trim()}: ${item.answer.trim()}`);
|
||||
// }
|
||||
// });
|
||||
|
||||
// // 格式化表单信息文本
|
||||
// formInfoText = allInfo.length > 0
|
||||
// ? `=== 问卷/表单信息 ===\n${allInfo.join('\n')}`
|
||||
// : '暂无有效问卷/表单信息';
|
||||
// }
|
||||
// // ** 适配结束 **
|
||||
|
||||
// // 构建聊天记录信息
|
||||
// const chatData = props.chatRecords || [];
|
||||
// const chatInfoText = chatData.messages && chatData.messages.length > 0 ?
|
||||
// `聊天记录数量: ${chatData.messages.length}条\n最近聊天内容: ${JSON.stringify(chatData.messages.slice(-3), null, 2)}` :
|
||||
// '暂无聊天记录';
|
||||
|
||||
// // 构建通话记录信息
|
||||
// const callData = props.callRecords || [];
|
||||
// const callInfoText = callData.length > 0 ?
|
||||
// `通话记录数量: ${callData.length}次\n通话记录详情: ${JSON.stringify(callData, null, 2)}` :
|
||||
// '暂无通话记录';
|
||||
|
||||
// const query = `请对客户进行基础信息分析:
|
||||
// 客户姓名:${props.selectedContact.name}
|
||||
// 联系电话:${props.selectedContact.phone || '未提供'}
|
||||
// 销售阶段:${props.selectedContact.salesStage || '未知'}
|
||||
|
||||
// === 表单信息 ===
|
||||
// ${formInfoText}
|
||||
|
||||
// === 聊天记录 ===
|
||||
// ${chatInfoText}
|
||||
|
||||
// === 通话记录 ===
|
||||
// ${callData.length > 0 && callData[0].record_context ? callData[0].record_context : callInfoText}
|
||||
|
||||
// 请基于以上客户的表单信息、聊天记录和通话记录,分析客户的基本情况、背景信息和初步画像。`;
|
||||
|
||||
// try {
|
||||
// await chatService_01.sendMessage(
|
||||
// query,
|
||||
// (update) => {
|
||||
// basicAnalysisResult.value = update.content;
|
||||
// },
|
||||
// () => {
|
||||
// isBasicAnalysisLoading.value = false;
|
||||
// console.log('基础信息分析完成');
|
||||
// }
|
||||
// );
|
||||
// } catch (error) {
|
||||
// console.error('基础信息分析失败:', error);
|
||||
// basicAnalysisResult.value = `分析失败: ${error.message}`;
|
||||
// isBasicAnalysisLoading.value = false;
|
||||
// }
|
||||
// };
|
||||
const startBasicAnalysis=async ()=>{
|
||||
console.log("客户基础信息:", props.selectedContact);
|
||||
const res=await https.post('api/v1/sales_timeline/get_customer_basic_info',{
|
||||
user_name:props.selectedContact.name,
|
||||
phone:props.selectedContact.phone
|
||||
})
|
||||
if(res.data){
|
||||
basicAnalysisResult.value = res.data;
|
||||
console.log("客户基础信息分析结果:", res);
|
||||
}else{
|
||||
basicAnalysisResult.value = '基础信息暂无数据'
|
||||
}
|
||||
});
|
||||
|
||||
// 格式化表单信息文本
|
||||
formInfoText = allInfo.length > 0
|
||||
? `=== 问卷/表单信息 ===\n${allInfo.join('\n')}`
|
||||
: '暂无有效问卷/表单信息';
|
||||
}
|
||||
// ** 适配结束 **
|
||||
|
||||
// 构建聊天记录信息
|
||||
const chatData = props.chatRecords || [];
|
||||
const chatInfoText = chatData.messages && chatData.messages.length > 0 ?
|
||||
`聊天记录数量: ${chatData.messages.length}条\n最近聊天内容: ${JSON.stringify(chatData.messages.slice(-3), null, 2)}` :
|
||||
'暂无聊天记录';
|
||||
|
||||
// 构建通话记录信息
|
||||
const callData = props.callRecords || [];
|
||||
const callInfoText = callData.length > 0 ?
|
||||
`通话记录数量: ${callData.length}次\n通话记录详情: ${JSON.stringify(callData, null, 2)}` :
|
||||
'暂无通话记录';
|
||||
|
||||
const query = `请对客户进行基础信息分析:
|
||||
客户姓名:${props.selectedContact.name}
|
||||
联系电话:${props.selectedContact.phone || '未提供'}
|
||||
销售阶段:${props.selectedContact.salesStage || '未知'}
|
||||
|
||||
=== 表单信息 ===
|
||||
${formInfoText}
|
||||
|
||||
=== 聊天记录 ===
|
||||
${chatInfoText}
|
||||
|
||||
=== 通话记录 ===
|
||||
${callData.length > 0 && callData[0].record_context ? callData[0].record_context : callInfoText}
|
||||
|
||||
请基于以上客户的表单信息、聊天记录和通话记录,分析客户的基本情况、背景信息和初步画像。`;
|
||||
|
||||
try {
|
||||
await chatService_01.sendMessage(
|
||||
query,
|
||||
(update) => {
|
||||
basicAnalysisResult.value = update.content;
|
||||
},
|
||||
() => {
|
||||
isBasicAnalysisLoading.value = false;
|
||||
console.log('基础信息分析完成');
|
||||
}
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('基础信息分析失败:', error);
|
||||
basicAnalysisResult.value = `分析失败: ${error.message}`;
|
||||
isBasicAnalysisLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
// SOP通话分析
|
||||
const startSopAnalysis = async () => {
|
||||
if (!props.selectedContact) return;
|
||||
|
||||
@@ -14,16 +14,30 @@
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="card-title">表单信息</h3>
|
||||
<div class="form-filter">
|
||||
<button
|
||||
v-for="option in formFilterOptions"
|
||||
:key="option"
|
||||
class="form-filter-btn"
|
||||
:class="{ active: formFilter === option }"
|
||||
@click="formFilter = option"
|
||||
>
|
||||
{{ option }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div v-for="(section, sectionIndex) in displayedFormSections" :key="sectionIndex" class="form-section">
|
||||
<div v-if="section.title" class="form-section-title">{{ section.title }}</div>
|
||||
<div class="form-data-list">
|
||||
<div v-for="(field, index) in formFields" :key="index" class="form-field">
|
||||
<div v-for="(field, index) in section.fields" :key="index" class="form-field">
|
||||
<span class="field-label">{{ field.label }}:</span>
|
||||
<span class="field-value">{{ field.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 聊天记录和通话录音卡片 -->
|
||||
<div class="data-card communication-card">
|
||||
@@ -132,7 +146,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import axios from 'axios'
|
||||
|
||||
// Props
|
||||
@@ -166,37 +180,50 @@ const chatMessages = computed(() => {
|
||||
return props.chatInfo?.messages || []
|
||||
})
|
||||
|
||||
// 表单字段数据 (已更新)
|
||||
const formFields = computed(() => {
|
||||
const formData = props.formInfo
|
||||
console.log(8888888,formData)
|
||||
// --- NEW LOGIC: 处理新的数组格式(问答列表) ---
|
||||
if (Array.isArray(formData) && formData.length > 0) {
|
||||
// 检查数组项结构,确保是新的问答格式
|
||||
if (formData[0].question_label && formData[0].answer) {
|
||||
// 直接将问答列表映射为 { label: question_label, value: answer } 格式
|
||||
return formData.map(item => ({
|
||||
label: item.question_label,
|
||||
value: item.answer || '暂无回答'
|
||||
}))
|
||||
}
|
||||
}
|
||||
// --------------------------------------------------
|
||||
const formFilter = ref('全部')
|
||||
|
||||
// Fallback: 如果数据为空、null 或旧的空对象格式
|
||||
if (!formData || (typeof formData === 'object' && Object.keys(formData).length === 0)) {
|
||||
return [
|
||||
const formSections = computed(() => {
|
||||
const formData = props.formInfo
|
||||
const emptyFields = [
|
||||
{ label: '姓名', value: '暂无数据' },
|
||||
{ label: '联系方式', value: '暂无数据' },
|
||||
{ label: '孩子信息', value: '暂无数据' },
|
||||
{ label: '地区', value: '暂无数据' }
|
||||
]
|
||||
|
||||
const makeSection = (fields, title = '表单信息') => [{ title, fields }]
|
||||
|
||||
const buildFieldsFromAnswers = (answers = []) => {
|
||||
return answers.map(item => ({
|
||||
label: item.question_label,
|
||||
value: item.answer || '暂无回答'
|
||||
}))
|
||||
}
|
||||
|
||||
// --- OLD LOGIC: 处理旧的对象格式(保持兼容性) ---
|
||||
let fields = []
|
||||
let dataArray = null
|
||||
if (Array.isArray(formData)) {
|
||||
dataArray = formData
|
||||
} else if (formData && Array.isArray(formData.data)) {
|
||||
dataArray = formData.data
|
||||
}
|
||||
|
||||
// 检查是否为第一种格式(包含name, mobile等字段)
|
||||
if (Array.isArray(dataArray) && dataArray.length > 0) {
|
||||
if (dataArray[0].form_title && Array.isArray(dataArray[0].answers)) {
|
||||
return dataArray.map(form => ({
|
||||
title: form.form_title || '表单信息',
|
||||
fields: buildFieldsFromAnswers(form.answers || [])
|
||||
}))
|
||||
}
|
||||
if (dataArray[0].question_label && Object.prototype.hasOwnProperty.call(dataArray[0], 'answer')) {
|
||||
return makeSection(buildFieldsFromAnswers(dataArray))
|
||||
}
|
||||
}
|
||||
|
||||
if (!formData || (typeof formData === 'object' && Object.keys(formData).length === 0)) {
|
||||
return makeSection(emptyFields)
|
||||
}
|
||||
|
||||
let fields = []
|
||||
if (formData.name || formData.mobile || formData.child_name) {
|
||||
const customerInfo = [formData.name, formData.mobile, formData.child_relation, formData.occupation].filter(item => item && item !== '暂无').join(' | ')
|
||||
const childInfo = [formData.child_name, formData.child_gender, formData.child_education].filter(item => item && item !== '暂无').join(' | ')
|
||||
@@ -207,7 +234,6 @@ console.log(8888888,formData)
|
||||
{ label: '地区', value: formData.territory || '暂无' }
|
||||
]
|
||||
|
||||
// 如果有additional_info,添加所有问题
|
||||
if (formData.additional_info && Array.isArray(formData.additional_info)) {
|
||||
formData.additional_info.forEach((item) => {
|
||||
fields.push({
|
||||
@@ -217,7 +243,6 @@ console.log(8888888,formData)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// 第二种格式(expandXXX字段)
|
||||
const customerInfo = [formData.expandTwentyOne, formData.expandOne].filter(item => item && item !== '暂无').join(' | ')
|
||||
const childInfo = [formData.expandTwentyNine, formData.expandTwentyFive, formData.expandTwo].filter(item => item && item !== '暂无').join(' | ')
|
||||
|
||||
@@ -233,12 +258,29 @@ console.log(8888888,formData)
|
||||
{ label: '预期时间', value: formData.expandThirty || '暂无' }
|
||||
]
|
||||
}
|
||||
// 合并表单数据和聊天数据
|
||||
const allFields = [...fields]
|
||||
|
||||
return allFields
|
||||
return makeSection(fields)
|
||||
})
|
||||
|
||||
const formFilterOptions = computed(() => {
|
||||
const titles = formSections.value.map(section => section.title).filter(Boolean)
|
||||
const uniqueTitles = Array.from(new Set(titles))
|
||||
if (uniqueTitles.length <= 1) return ['全部']
|
||||
return ['全部', ...uniqueTitles]
|
||||
})
|
||||
|
||||
const displayedFormSections = computed(() => {
|
||||
if (formFilter.value === '全部') return formSections.value
|
||||
const filtered = formSections.value.filter(section => section.title === formFilter.value)
|
||||
return filtered.length > 0 ? filtered : formSections.value
|
||||
})
|
||||
|
||||
watch(formFilterOptions, (options) => {
|
||||
if (!options.includes(formFilter.value)) {
|
||||
formFilter.value = options[0] || '全部'
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
|
||||
// 聊天数据
|
||||
const chatData = computed(() => ({
|
||||
@@ -507,6 +549,58 @@ const formatDateTime = (dateTimeString) => {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-filter {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.form-filter-btn {
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #e5e7eb;
|
||||
background: #ffffff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.form-filter-btn.active {
|
||||
border-color: #10b981;
|
||||
color: #059669;
|
||||
background: #ecfdf5;
|
||||
}
|
||||
|
||||
.form-filter-btn:hover {
|
||||
color: #059669;
|
||||
border-color: #a7f3d0;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-section + .form-section {
|
||||
margin-top: 16px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px dashed #e5e7eb;
|
||||
}
|
||||
|
||||
.form-section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
background: #f0fdf4;
|
||||
border: 1px solid #dcfce7;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
// 表单字段样式
|
||||
.form-data-list {
|
||||
.form-field {
|
||||
|
||||
@@ -205,6 +205,11 @@
|
||||
|
||||
<div class="task-body">
|
||||
<div class="actionable-list">
|
||||
<div class="task-section">
|
||||
<div class="task-section-header">
|
||||
<span class="task-section-title task-section-title-pending">{{ pendingTitle }}</span>
|
||||
<span class="task-section-count">{{ contacts.length }}位</span>
|
||||
</div>
|
||||
<div class="items-grid">
|
||||
<div
|
||||
v-for="item in contacts"
|
||||
@@ -214,14 +219,12 @@
|
||||
:class="[getHealthClass(item.health), { 'active': item.id === selectedContactId }]"
|
||||
@click="selectContact(item.id)">
|
||||
<div class="item-content">
|
||||
<!-- 头像区域 -->
|
||||
<div class="avatar-section">
|
||||
<div class="avatar">
|
||||
<img :src="item.avatar || '/default-avatar.svg'" :alt="item.name" class="avatar-img" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 信息区域 -->
|
||||
<div class="info-section">
|
||||
<div class="item-header">
|
||||
<div class="item-name-group">
|
||||
@@ -244,6 +247,49 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="completedContacts.length > 0" class="task-section">
|
||||
<div class="task-section-header">
|
||||
<span class="task-section-title task-section-title-completed">已完成用户</span>
|
||||
<span class="task-section-count">{{ completedContacts.length }}位</span>
|
||||
</div>
|
||||
<div class="items-grid">
|
||||
<div
|
||||
v-for="item in completedContacts"
|
||||
:key="item.id"
|
||||
:id="`completed-contact-item-${item.id}`"
|
||||
class="action-item"
|
||||
:class="[getHealthClass(item.health), { 'active': item.id === selectedContactId }]"
|
||||
@click="selectContact(item.id)">
|
||||
<div class="item-content">
|
||||
<div class="avatar-section">
|
||||
<div class="avatar">
|
||||
<img :src="item.avatar || '/default-avatar.svg'" :alt="item.name" class="avatar-img" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-section">
|
||||
<div class="item-header">
|
||||
<div class="item-name-group">
|
||||
<span class="item-name" :title="item.name">{{ item.name }}</span>
|
||||
</div>
|
||||
<span class="item-time">{{ item.time }}</span>
|
||||
</div>
|
||||
<div class="item-footer">
|
||||
<div class="profession-education">
|
||||
<span class="profession">{{ item.profession||'未知' }}</span>
|
||||
<span class="education">{{ item.education||'未知' }}</span>
|
||||
<span class="course-attendance">
|
||||
{{ getAttendedLessons(item.class_situation,item.class_num) }}
|
||||
</span>
|
||||
<span class="course-type" v-if="item.type">{{ item.type }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 到课详情区域 -->
|
||||
@@ -649,6 +695,11 @@ const totalCustomers = computed(() => {
|
||||
return Math.max(...baseStages, 1);
|
||||
});
|
||||
|
||||
const pendingTitle = computed(() => {
|
||||
if (props.selectedStage === '全部' || props.selectedStage === 'all') return '全部用户';
|
||||
return '待操作用户';
|
||||
});
|
||||
|
||||
const getAttendedLessons = (classSituation, classNum) => {
|
||||
if (classNum && Array.isArray(classNum) && classNum.length > 0) {
|
||||
const filtered = classNum.filter(n => n !== -1);
|
||||
@@ -666,6 +717,84 @@ const getAttendedLessons = (classSituation, classNum) => {
|
||||
return '未到课';
|
||||
};
|
||||
|
||||
const stageOrder = {
|
||||
'待加微': 1,
|
||||
'待填表单': 2,
|
||||
'待入群': 3,
|
||||
'待联系': 4,
|
||||
'待到课': 5,
|
||||
'课1-4': 6,
|
||||
'点击未支付': 7,
|
||||
'付定金': 8,
|
||||
'定金转化': 9,
|
||||
'成交': 10
|
||||
};
|
||||
|
||||
const getStageIndex = (type) => stageOrder[type] || 0;
|
||||
|
||||
const isFormIncomplete = (customer) => {
|
||||
const occupationMissing = customer.customer_occupation === '未知' || !customer.customer_occupation;
|
||||
const educationMissing = customer.customer_child_education === '未知' || !customer.customer_child_education;
|
||||
return occupationMissing || educationMissing;
|
||||
};
|
||||
|
||||
const buildContacts = (customers, stageFallback) => {
|
||||
return (customers || []).map(customer => ({
|
||||
id: customer.customer_name || customer.id || customer.name,
|
||||
name: customer.customer_name || customer.name,
|
||||
phone: customer.phone,
|
||||
profession: customer.customer_occupation || customer.profession,
|
||||
education: customer.customer_child_education || customer.education,
|
||||
lastMessageTime: customer.latest_message_time || customer.time,
|
||||
avatarUrl: customer.customer_avatar_url || customer.avatar || customer.weChat_avatar,
|
||||
avatar: customer.customer_avatar_url || customer.avatar || customer.weChat_avatar || '/default-avatar.svg',
|
||||
type: customer.type || stageFallback,
|
||||
classNum: customer.class_num,
|
||||
class_num: customer.class_num,
|
||||
salesStage: customer.type || stageFallback,
|
||||
priority: customer.type === '待联系' ? 'high' : 'normal',
|
||||
time: customer.latest_message_time || customer.time || '未知',
|
||||
health: customer.health || 75,
|
||||
customer_name: customer.customer_name,
|
||||
customer_occupation: customer.customer_occupation,
|
||||
customer_child_education: customer.customer_child_education,
|
||||
scrm_user_main_code: customer.scrm_user_main_code,
|
||||
weChat_avatar: customer.weChat_avatar,
|
||||
class_situation: customer.class_situation,
|
||||
records: customer.records,
|
||||
time_and_camp_stage: customer.time_and_camp_stage || []
|
||||
})).filter(customer => customer.id);
|
||||
};
|
||||
|
||||
const completedContacts = computed(() => {
|
||||
const stage = props.selectedStage;
|
||||
if (!stage || stage === '全部' || stage === 'all' || stage === '课1-4' || stage === '成交') {
|
||||
return [];
|
||||
}
|
||||
if (stage === '待填表单') {
|
||||
const baseCustomers = (props.customersList || []).filter(c => c.type !== '待加微');
|
||||
const completed = baseCustomers.filter(c => !isFormIncomplete(c));
|
||||
return buildContacts(completed, stage);
|
||||
}
|
||||
if (stage === '待到课') {
|
||||
const baseCustomers = (props.customersList || []).filter(c => c.type !== '待加微');
|
||||
const completed = baseCustomers.filter(c => getAttendedLessons(c.class_situation, c.class_num) !== '未到课');
|
||||
return buildContacts(completed, stage);
|
||||
}
|
||||
if (['点击未支付', '付定金', '定金转化'].includes(stage)) {
|
||||
const courseCustomers = props.courseCustomers?.['课1-4'] || [];
|
||||
let completed = courseCustomers.filter(c => getStageIndex(c.type) > getStageIndex(stage));
|
||||
if (stage === '定金转化') {
|
||||
const payList = (props.payMoneyCustomersList || []).map(c => ({ ...c, type: '成交' }));
|
||||
completed = completed.concat(payList);
|
||||
}
|
||||
return buildContacts(completed, stage);
|
||||
}
|
||||
const baseCustomers = props.customersList || [];
|
||||
const completed = baseCustomers.filter(c => getStageIndex(c.type) > getStageIndex(stage));
|
||||
return buildContacts(completed, stage);
|
||||
});
|
||||
|
||||
// **修改 getStageCount 函数**
|
||||
const getStageCount = (stageType) => {
|
||||
|
||||
@@ -861,7 +990,13 @@ $indigo: #4f46e5;
|
||||
.stage-content { text-align: center; width: 100%; .stage-title { font-size: 1rem; font-weight: 500; color: $slate-700; margin: 0 0 0.75rem 0; } .stage-stats { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem; .stage-count { font-size: 1.5rem; font-weight: 700; color: $slate-600; line-height: 1; } .stage-label { font-size: 0.75rem; color: $slate-500; } } .stage-percentage { font-size: 0.75rem; color: $slate-400; background: $slate-100; padding: 0.25rem 0.75rem; border-radius: 1rem; display: inline-block; } }
|
||||
.course-details { background: $white; border-radius: 0.75rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); margin-top: 1rem; .course-details-header { background: linear-gradient(135deg, #f8fafc, #e2e8f0); padding: 0.75rem 1rem; border-bottom: 1px solid $slate-200; h4 { margin: 0; font-size: 0.875rem; font-weight: 600; color: $slate-700; } } .course-details-content { padding: 1rem; max-height: 200px; overflow-y: auto; .no-data { text-align: center; color: $slate-500; padding: 1rem 0; } .course-lessons { display: flex; flex-direction: row; gap: 0.75rem; .lesson-item { background: $slate-50; border-radius: 0.5rem; padding: 0.75rem; .lesson-header .lesson-number { font-weight: 600; } .lesson-details { display: flex; flex-wrap: wrap; gap: 1rem; .detail-item .detail-label { color: $slate-500; } .detail-item .detail-value { font-weight: 600; } } } } } }
|
||||
.task-body { padding: 1rem; max-height: 50vh; background: $white; border-radius: 1rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); overflow-y: auto; }
|
||||
.actionable-list { display: flex; flex-direction: column; }
|
||||
.actionable-list { display: flex; flex-direction: column; gap: 1rem; }
|
||||
.task-section { display: flex; flex-direction: column; gap: 0.5rem; }
|
||||
.task-section-header { display: flex; align-items: center; gap: 0.5rem; }
|
||||
.task-section-title { font-size: 0.85rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; }
|
||||
.task-section-title-pending { color: #16a34a; background: #dcfce7; }
|
||||
.task-section-title-completed { color: #2563eb; background: #dbeafe; }
|
||||
.task-section-count { font-size: 0.75rem; color: $slate-500; }
|
||||
.items-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 250px)); gap: 0.45rem; justify-content: center; }
|
||||
.action-item { background-color: $white; padding: 0.25rem; border-radius: 0.5rem; border: 1px solid $slate-200; cursor: pointer; transition: all 0.2s ease-in-out; display: flex; &:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.05); } &.active { background-color: #eef2ff; border-color: $indigo; } .item-content { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; } .avatar-section .avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; overflow: hidden; background-color: $slate-200; .avatar-img { width: 100%; height: 100%; object-fit: cover; } } .info-section { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; } .item-header { display: flex; justify-content: space-between; align-items: flex-start; } .item-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-time { font-size: 0.75rem; color: $slate-500; flex-shrink: 0; } .profession-education { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; .profession, .education, .course-type, .course-attendance { font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 0.3rem; font-weight: 500; } .profession { background-color: #e0f2fe; color: #0277bd; } .education { background-color: #f3e5f5; color: #7b1fa2; } .course-type { background-color: #e8f5e8; color: #2e7d32; } .course-attendance { background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1565c0; border: 1px solid #90caf9; } } }
|
||||
.unassigned-recordings-btn { background-color: $primary; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; &:hover { background-color: darken($primary, 10%); } }
|
||||
|
||||
@@ -605,7 +605,7 @@ async function getCustomerForm() {
|
||||
const res = await getCustomerFormInfo(params)
|
||||
console.log('获取客户表单数据:', res)
|
||||
if(res.code === 200) {
|
||||
formInfo.value = res.data[0].answers || []
|
||||
formInfo.value = res.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
// 静默处理错误
|
||||
|
||||
@@ -90,12 +90,14 @@ async function exportData() {
|
||||
try {
|
||||
ElMessage.info('正在导出数据,请稍候...')
|
||||
console.log('导出参数:', params)
|
||||
const res = await exportCustomers(params)
|
||||
const res = await exportCustomers()
|
||||
if (res.code === 200 && res.data && res.data.length > 0) {
|
||||
ElMessage.success('数据导出成功')
|
||||
// 处理数据,将复杂的嵌套对象展平
|
||||
const exportData = res.data.map(customer => {
|
||||
const flatData = {
|
||||
'昵称': customer.nickname || '',
|
||||
'客户姓名': customer.customer_name || '',
|
||||
'性别': customer.gender || '',
|
||||
'跟进人': customer.follow_up_name || '',
|
||||
'手机号': customer.phone || '',
|
||||
@@ -103,18 +105,104 @@ async function exportData() {
|
||||
'用户ID': customer.mantis_user_id || '',
|
||||
}
|
||||
|
||||
// 处理微信表单信息
|
||||
if (customer.wechat_form) {
|
||||
flatData['家长姓名'] = customer.wechat_form.name || ''
|
||||
flatData['孩子姓名'] = customer.wechat_form.child_name || ''
|
||||
flatData['孩子性别'] = customer.wechat_form.child_gender || ''
|
||||
flatData['职业'] = customer.wechat_form.occupation || ''
|
||||
flatData['孩子教育阶段'] = customer.wechat_form.child_education || ''
|
||||
flatData['与孩子关系'] = customer.wechat_form.child_relation || ''
|
||||
flatData['联系电话'] = customer.wechat_form.mobile || ''
|
||||
flatData['地区'] = customer.wechat_form.territory || ''
|
||||
flatData['创建时间'] = customer.wechat_form.created_at ? new Date(customer.wechat_form.created_at).toLocaleString() : ''
|
||||
flatData['更新时间'] = customer.wechat_form.updated_at ? new Date(customer.wechat_form.updated_at).toLocaleString() : ''
|
||||
const parseFormData = (formData) => {
|
||||
if (typeof formData === 'string') {
|
||||
try {
|
||||
return JSON.parse(formData)
|
||||
} catch (e) {
|
||||
return null
|
||||
}
|
||||
}
|
||||
return formData || null
|
||||
}
|
||||
|
||||
const normalizeFormArray = (formData) => {
|
||||
const data = parseFormData(formData)
|
||||
console.log('解析后的表单数据:', data)
|
||||
if (Array.isArray(data)) return data
|
||||
if (data && Array.isArray(data.data)) return data.data
|
||||
if (data && typeof data === 'object' && !data.answers) {
|
||||
const numericKeys = Object.keys(data).filter(key => String(Number(key)) === key)
|
||||
if (numericKeys.length > 0) {
|
||||
return numericKeys
|
||||
.sort((a, b) => Number(a) - Number(b))
|
||||
.map(key => data[key])
|
||||
.filter(Boolean)
|
||||
}
|
||||
}
|
||||
if (data && data.answers) return [data]
|
||||
return data ? [data] : []
|
||||
}
|
||||
|
||||
const ensureUniqueKey = (key) => {
|
||||
if (!flatData[key]) return key
|
||||
let index = 2
|
||||
while (flatData[`${key}(${index})`]) {
|
||||
index += 1
|
||||
}
|
||||
return `${key}(${index})`
|
||||
}
|
||||
|
||||
const parsedFormData = parseFormData(customer.wechat_form)
|
||||
const formArray = normalizeFormArray(parsedFormData)
|
||||
if (formArray.length > 0) {
|
||||
console.log('表单数组:', formArray)
|
||||
const isAnswerList = formArray.every(item => item && item.question_label && Object.prototype.hasOwnProperty.call(item, 'answer'))
|
||||
const isFormWithAnswers = formArray.every(item => item && Array.isArray(item.answers))
|
||||
console.log('是否为答案列表:', isAnswerList)
|
||||
console.log('是否为表单含 answers:', isFormWithAnswers)
|
||||
if (isAnswerList) {
|
||||
let formAnswerCount = 0
|
||||
formArray.forEach((answerItem) => {
|
||||
const label = String(answerItem.question_label || '').trim()
|
||||
if (!label) return
|
||||
const key = ensureUniqueKey(label)
|
||||
flatData[key] = answerItem.answer ?? ''
|
||||
formAnswerCount += 1
|
||||
})
|
||||
if (formAnswerCount === 0 && formArray.length > 0) {
|
||||
const fallbackKey = ensureUniqueKey('表单答案')
|
||||
flatData[fallbackKey] = formArray.map(item => `${item.question_label || ''}: ${item.answer || ''}`).join(' | ')
|
||||
}
|
||||
} else if (isFormWithAnswers) {
|
||||
console.log('表单含 answers:', formArray)
|
||||
formArray.forEach((formItem) => {
|
||||
const formTitle = formItem.form_title || '表单'
|
||||
if (Array.isArray(formItem.answers)) {
|
||||
let formAnswerCount = 0
|
||||
formItem.answers.forEach((answerItem) => {
|
||||
const label = String(answerItem.question_label || '').trim()
|
||||
if (!label) return
|
||||
const key = ensureUniqueKey(`${formTitle}-${label}`)
|
||||
flatData[key] = answerItem.answer ?? ''
|
||||
formAnswerCount += 1
|
||||
})
|
||||
if (formAnswerCount === 0 && formItem.answers.length > 0) {
|
||||
const fallbackKey = ensureUniqueKey(`${formTitle}-表单答案`)
|
||||
flatData[fallbackKey] = formItem.answers.map(item => `${item.question_label || ''}: ${item.answer || ''}`).join(' | ')
|
||||
}
|
||||
}
|
||||
if (formItem.created_at) {
|
||||
const key = ensureUniqueKey(`${formTitle}-创建时间`)
|
||||
flatData[key] = new Date(formItem.created_at).toLocaleString()
|
||||
}
|
||||
if (formItem.updated_at) {
|
||||
const key = ensureUniqueKey(`${formTitle}-更新时间`)
|
||||
flatData[key] = new Date(formItem.updated_at).toLocaleString()
|
||||
}
|
||||
})
|
||||
}
|
||||
} else if (parsedFormData && typeof parsedFormData === 'object') {
|
||||
flatData['家长姓名'] = parsedFormData.name || ''
|
||||
flatData['孩子姓名'] = parsedFormData.child_name || ''
|
||||
flatData['孩子性别'] = parsedFormData.child_gender || ''
|
||||
flatData['职业'] = parsedFormData.occupation || ''
|
||||
flatData['孩子教育阶段'] = parsedFormData.child_education || ''
|
||||
flatData['与孩子关系'] = parsedFormData.child_relation || ''
|
||||
flatData['联系电话'] = parsedFormData.mobile || ''
|
||||
flatData['地区'] = parsedFormData.territory || ''
|
||||
flatData['创建时间'] = parsedFormData.created_at ? new Date(parsedFormData.created_at).toLocaleString() : ''
|
||||
flatData['更新时间'] = parsedFormData.updated_at ? new Date(parsedFormData.updated_at).toLocaleString() : ''
|
||||
}
|
||||
|
||||
// 处理到课情况
|
||||
@@ -126,9 +214,12 @@ async function exportData() {
|
||||
}
|
||||
|
||||
// 处理问卷调查信息
|
||||
if (customer.wechat_form && customer.wechat_form.additional_info) {
|
||||
customer.wechat_form.additional_info.forEach((item) => {
|
||||
flatData[item.topic || ''] = item.answer || ''
|
||||
if (parsedFormData && parsedFormData.additional_info) {
|
||||
parsedFormData.additional_info.forEach((item) => {
|
||||
const key = ensureUniqueKey(item.topic || '')
|
||||
if (key) {
|
||||
flatData[key] = item.answer || ''
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -137,27 +228,18 @@ async function exportData() {
|
||||
|
||||
// 创建工作簿
|
||||
const wb = XLSX.utils.book_new()
|
||||
const ws = XLSX.utils.json_to_sheet(exportData)
|
||||
const allKeys = Array.from(new Set(exportData.flatMap(item => Object.keys(item))))
|
||||
const ws = XLSX.utils.json_to_sheet(exportData, { header: allKeys })
|
||||
|
||||
// 设置列宽
|
||||
const colWidths = [
|
||||
{ wch: 10 }, // 昵称
|
||||
{ wch: 6 }, // 性别
|
||||
{ wch: 12 }, // 跟进人
|
||||
{ wch: 15 }, // 手机号
|
||||
{ wch: 10 }, // 是否入群
|
||||
{ wch: 20 }, // 用户ID
|
||||
{ wch: 12 }, // 家长姓名
|
||||
{ wch: 12 }, // 孩子姓名
|
||||
{ wch: 8 }, // 孩子性别
|
||||
{ wch: 12 }, // 职业
|
||||
{ wch: 12 }, // 孩子教育阶段
|
||||
{ wch: 15 }, // 与孩子关系
|
||||
{ wch: 15 }, // 联系电话
|
||||
{ wch: 20 }, // 地区
|
||||
{ wch: 20 }, // 创建时间
|
||||
{ wch: 20 }, // 更新时间
|
||||
]
|
||||
const colWidths = allKeys.map(key => {
|
||||
const maxCellLength = exportData.reduce((max, row) => {
|
||||
const value = row[key]
|
||||
const length = value === null || value === undefined ? 0 : String(value).length
|
||||
return Math.max(max, length)
|
||||
}, 0)
|
||||
return { wch: Math.min(50, Math.max(10, key.length, maxCellLength)) }
|
||||
})
|
||||
ws['!cols'] = colWidths
|
||||
|
||||
// 添加工作表到工作簿
|
||||
|
||||
Reference in New Issue
Block a user