Compare commits

...

6 Commits

Author SHA1 Message Date
b2ce9d93db fix(导出): 修复客户数据导出功能并增强表单数据处理
- 更新导出API端点以匹配后端接口变更
- 重构表单数据解析逻辑,支持多种数据结构格式
- 动态生成Excel列宽,避免数据截断
- 添加客户姓名字段到导出数据
- 优化重复字段处理,确保导出数据完整性
2026-01-29 19:58:21 +08:00
8260b345dc feat(表单信息展示): 支持多表单数据展示和筛选功能
- 重构表单数据解析逻辑,支持从数组格式中提取多表单数据
- 添加表单筛选按钮,可按表单标题筛选显示内容
- 优化数据结构处理,支持问答列表和旧格式的兼容
- 改进UI布局,添加表单标题和分割线提升可读性
2026-01-23 18:56:46 +08:00
2cd59adfc9 feat(person): 在销售时间轴任务列表中增加已完成用户分组显示
- 将待操作用户列表重构为独立的任务区块,根据选定阶段动态显示标题
- 新增已完成用户区块,根据销售阶段自动计算已完成联系人
- 为不同区块添加视觉区分样式,包括标题颜色和背景
- 添加阶段排序逻辑和表单完成状态检查函数
- 改进联系人数据构建函数以支持多种数据源
2026-01-23 18:07:34 +08:00
baa89001c8 style(manager): 简化按钮文本并调整样式
移除按钮的内边距,统一字体大小,简化切换按钮文本为"原文"和"分析"
2026-01-12 14:55:05 +08:00
9b3c5da105 feat(manager): 添加优秀录音文件获取及展示功能
新增获取优秀录音文件的API接口,并在管理页面添加GoodMusic组件展示录音文件列表
支持录音文件的下载、转文字及分析功能,优化了页面布局和间距
2026-01-12 14:50:30 +08:00
a4c0aca1c2 refactor(CustomerDetail): 重构基础信息分析逻辑为调用API
将原有的本地处理表单、聊天记录和通话记录的逻辑替换为直接调用后端API获取客户基础信息
2025-12-19 11:48:00 +08:00
9 changed files with 1725 additions and 208 deletions

View File

@@ -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)
}

View File

@@ -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)
}

File diff suppressed because it is too large Load Diff

View File

@@ -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端保持一致布局

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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%); } }

View File

@@ -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) {
// 静默处理错误

View File

@@ -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
// 添加工作表到工作簿