feat(shopDealerApply):优化客户跟进记录功能

- 在 shopDealerApply model 中新增 comments 字段用于存储最后跟进内容
- 重构编辑页面的跟进记录展示方式,分为历史记录和新增记录两部分
- 历史记录支持按时间倒序展示并可删除单条记录
- 新增独立的跟进内容输入框和保存按钮,提升用户体验
- 保存新的跟进记录时同步更新主表的 comments 字段
- 调整列表页展示逻辑,在备注列同时显示最后跟进内容和更新时间
- 将列表页的"跟进情况"标题更改为"最后跟进情况"以准确表达含义
- 移除原有的限制最多10条跟进信息的逻辑- 优化代码结构和组件交互逻辑,提高可维护性
This commit is contained in:
2025-10-02 14:15:37 +08:00
parent 645d987f3b
commit 398737d46d
3 changed files with 371 additions and 400 deletions

View File

@@ -34,6 +34,7 @@ export interface ShopDealerApply {
auditTime?: string | number | Date; auditTime?: string | number | Date;
// 驳回原因 // 驳回原因
rejectReason?: string; rejectReason?: string;
comments?: string;
// 商城ID // 商城ID
tenantId?: number; tenantId?: number;
// 创建时间 // 创建时间

View File

@@ -160,57 +160,50 @@
<span style="color: #1890ff; font-weight: 600;">跟进情况</span> <span style="color: #1890ff; font-weight: 600;">跟进情况</span>
</a-divider> </a-divider>
<!-- 跟进情况列表 --> <!-- 历史跟进记录 -->
<div v-if="form.applyStatus == 10"> <div v-if="form.applyStatus == 10 && historyRecords.length > 0">
<a-row :gutter="16" style="margin-bottom: 16px;"> <a-divider orientation="left" style="font-size: 14px; color: #666;">
<a-col :span="24"> 历史跟进记录
<a-button </a-divider>
type="primary" <div v-for="(record, index) in historyRecords" :key="record.id" style="margin-bottom: 16px; padding: 12px; background-color: #f5f5f5; border-radius: 4px;">
@click="addFollowUp" <div class="flex justify-between" style="font-weight: 500; margin-bottom: 8px;">
:disabled="followUpList.length >= 10" <div>跟进 #{{ historyRecords.length - index }} <span class="text-gray-400 px-4">{{ record.createTime }}</span></div>
size="small" <a-tag color="#f50" class="cursor-pointer" @click="remove(record)">删除</a-tag>
> </div>
新增 <div style="white-space: pre-wrap;">
</a-button> {{ record.content }}
<span style="margin-left: 12px; color: #999; font-size: 12px;"> </div>
最多可添加10条跟进信息当前已添加{{ followUpList.length }} </div>
</span> </div>
</a-col>
</a-row>
<div v-for="(item, index) in followUpList" :key="index" <!-- 新增跟进记录 -->
style="margin-bottom: 16px; border: 1px solid #f0f0f0; padding: 12px; border-radius: 4px;"> <div v-if="form.applyStatus == 10">
<a-row :gutter="16"> <a-divider orientation="left" style="font-size: 14px; color: #666;">
<a-col :span="20"> 新增跟进记录
<a-form-item </a-divider>
:label="`跟进内容${index + 1}`" <a-form-item :wrapper-col="{ span: 24 }">
:name="['followUpList', index, 'content']" <div class="flex flex-col gap-2">
>
<div v-if="item.status == 1" v-html="item.content"></div>
<a-textarea <a-textarea
v-else v-model:value="newFollowUpContent"
v-model:value="item.content" placeholder="请输入本次跟进内容"
:disabled="!isUpdate" :rows="4"
placeholder="请输入跟进内容"
:rows="2"
:maxlength="500" :maxlength="500"
style="width: 80%"
show-count show-count
/> />
</a-form-item> <div class="btn">
</a-col>
<a-col :span="4" style="text-align: right;">
<a-button <a-button
type="link" type="primary"
danger @click="saveFollowUpRecord"
@click="removeFollowUp(index)" :loading="followUpLoading"
:disabled="followUpList.length <= 1" :disabled="!newFollowUpContent.trim()"
> >
删除 保存跟进记录
</a-button> </a-button>
</a-col>
</a-row>
</div> </div>
</div> </div>
</a-form-item>
</div>
</a-form> </a-form>
</ele-modal> </ele-modal>
@@ -222,10 +215,11 @@ import {Form, message} from 'ant-design-vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { assignObject } from 'ele-admin-pro'; import { assignObject } from 'ele-admin-pro';
import { addShopDealerApply, updateShopDealerApply } from '@/api/shop/shopDealerApply'; import { addShopDealerApply, updateShopDealerApply } from '@/api/shop/shopDealerApply';
import {listShopDealerRecord, addShopDealerRecord} from '@/api/shop/shopDealerRecord'; import {listShopDealerRecord, addShopDealerRecord, removeShopDealerRecord} from '@/api/shop/shopDealerRecord';
import { ShopDealerApply } from '@/api/shop/shopDealerApply/model'; import { ShopDealerApply } from '@/api/shop/shopDealerApply/model';
import { ShopDealerRecord } from '@/api/shop/shopDealerRecord/model'; import { ShopDealerRecord } from '@/api/shop/shopDealerRecord/model';
import { FormInstance, RuleObject } from 'ant-design-vue/es/form'; import { FormInstance, RuleObject } from 'ant-design-vue/es/form';
import { messageLoading } from 'ele-admin-pro';
import {hasRole} from "@/utils/permission"; import {hasRole} from "@/utils/permission";
// 是否是修改 // 是否是修改
@@ -246,19 +240,18 @@ const emit = defineEmits<{
// 提交状态 // 提交状态
const loading = ref(false); const loading = ref(false);
// 跟进记录保存状态
const followUpLoading = ref(false);
// 是否显示最大化切换按钮 // 是否显示最大化切换按钮
const maxable = ref(true); const maxable = ref(true);
// 表格选中数据 // 表格选中数据
const formRef = ref<FormInstance | null>(null); const formRef = ref<FormInstance | null>(null);
// 跟进情况列表 // 历史跟进记录
const followUpList = ref<ShopDealerRecord[]>([ const historyRecords = ref<ShopDealerRecord[]>([]);
{
content: '', // 新的跟进内容
status: 0, const newFollowUpContent = ref('');
sortNumber: 0
}
]);
// 表单数据 // 表单数据
const form = reactive<ShopDealerApply>({ const form = reactive<ShopDealerApply>({
@@ -357,94 +350,70 @@ const rules = reactive({
] ]
}); });
/* 添加跟进 */ /* 获取历史跟进记录 */
const addFollowUp = () => { const fetchHistoryRecords = async (dealerId: number) => {
if (followUpList.value.length >= 10) {
message.warning('最多只能添加10条跟进信息');
return;
}
followUpList.value.push({
content: '',
status: 0,
sortNumber: followUpList.value.length
});
};
/* 删除跟进 */
const removeFollowUp = (index: number) => {
if (followUpList.value.length <= 1) {
message.warning('至少保留一条跟进信息');
return;
}
followUpList.value.splice(index, 1);
};
/* 获取跟进记录 */
const fetchFollowUpRecords = async (dealerId: number) => {
try { try {
// 先通过list接口获取所有记录然后过滤 // 先通过list接口获取所有记录然后过滤
const allRecords = await listShopDealerRecord({}); const allRecords = await listShopDealerRecord({});
const records = allRecords.filter(record => record.dealerId === dealerId); const records = allRecords.filter(record => record.dealerId === dealerId);
if (records && records.length > 0) { // 按创建时间倒序排列(最新的在前面)
followUpList.value = records.map(record => ({ historyRecords.value = records.sort((a, b) => {
...record, if (a.createTime && b.createTime) {
status: record.status || 0, return new Date(b.createTime).getTime() - new Date(a.createTime).getTime();
sortNumber: record.sortNumber || 0
}));
} else {
// 如果没有记录,初始化一条空记录
followUpList.value = [
{
content: '',
status: 0,
sortNumber: 0
}
];
} }
return 0;
});
} catch (error) { } catch (error) {
console.error('获取跟进记录失败:', error); console.error('获取历史跟进记录失败:', error);
message.error('获取跟进记录失败'); message.error('获取历史跟进记录失败');
// 初始化一条空记录 historyRecords.value = [];
followUpList.value = [
{
content: '',
status: 0,
sortNumber: 0
}
];
} }
}; };
/* 保存跟进记录 */ /* 保存新的跟进记录 */
const saveFollowUpRecords = async (dealerId: number) => { const saveFollowUpRecord = async () => {
// 检查是否有客户ID
if (!form.applyId) {
message.warning('请先保存客户信息');
return;
}
// 检查是否有跟进内容
if (!newFollowUpContent.value.trim()) {
message.warning('请输入跟进内容');
return;
}
try { try {
// 保存每条跟进记录 followUpLoading.value = true;
for (const record of followUpList.value) {
const recordData: any = { const recordData: any = {
...record, content: newFollowUpContent.value.trim(),
dealerId: dealerId, dealerId: form.applyId,
userId: form.userId, userId: form.userId,
status: 1 status: 1, // 默认设置为已完成
sortNumber: 0
}; };
// 如果有ID则更新否则新增
if (record.id) {
// 更新逻辑如果API支持
await addShopDealerRecord(recordData);
} else {
// 新增逻辑 // 新增逻辑
await addShopDealerRecord(recordData); await addShopDealerRecord(recordData);
} message.success('跟进记录保存成功');
} // 保存最后跟进内容到主表
await updateShopDealerApply({
...form,
comments: newFollowUpContent.value.trim()
})
// message.success('跟进记录保存成功'); // 清空输入框
newFollowUpContent.value = '';
// 重新加载历史记录
await fetchHistoryRecords(form.applyId);
} catch (error) { } catch (error) {
console.error('保存跟进记录失败:', error); console.error('保存跟进记录失败:', error);
message.error('保存跟进记录失败'); message.error('保存跟进记录失败');
throw error; } finally {
followUpLoading.value = false;
} }
}; };
@@ -463,6 +432,24 @@ const handleStatusChange = (value: number) => {
} }
}; };
/* 删除单个 */
const remove = (row: ShopDealerRecord) => {
const hide = messageLoading('请求中..', 0);
removeShopDealerRecord(row.id)
.then((msg) => {
hide();
message.success(msg);
// 重新加载历史记录
if(props.data?.applyId){
fetchHistoryRecords(props.data?.applyId);
}
})
.catch((e) => {
hide();
message.error(e.message);
});
};
/* 保存编辑 */ /* 保存编辑 */
const save = () => { const save = () => {
if (!formRef.value) { if (!formRef.value) {
@@ -482,16 +469,6 @@ const save = () => {
validateFields.push('auditTime'); validateFields.push('auditTime');
} }
// 如果是跟进中状态,需要验证跟进内容
if (form.applyStatus === 10) {
// 构造跟进内容的验证字段
const followUpFields: string[] = [];
followUpList.value.forEach((_, index) => {
followUpFields.push(`followUpList.${index}.content`);
});
validateFields.push(...followUpFields);
}
formRef.value formRef.value
.validate(validateFields) .validate(validateFields)
.then(async () => { .then(async () => {
@@ -532,11 +509,6 @@ const save = () => {
const msg = await saveOrUpdate(formData); const msg = await saveOrUpdate(formData);
message.success(msg); message.success(msg);
// 如果是跟进中状态,保存跟进记录
if (formData.applyStatus === 10 && formData.applyId) {
await saveFollowUpRecords(formData.applyId);
}
updateVisible(false); updateVisible(false);
emit('done'); emit('done');
} catch (e: any) { } catch (e: any) {
@@ -558,9 +530,9 @@ watch(
assignObject(form, props.data); assignObject(form, props.data);
isUpdate.value = true; isUpdate.value = true;
// 如果是修改且状态为跟进中,获取跟进记录 // 如果是修改且状态为跟进中,获取历史跟进记录
if (props.data.applyId && props.data.applyStatus === 10) { if (props.data.applyId && props.data.applyStatus === 10) {
await fetchFollowUpRecords(props.data.applyId); await fetchHistoryRecords(props.data.applyId);
} }
} else { } else {
// 重置为默认值 // 重置为默认值
@@ -581,14 +553,9 @@ watch(
}); });
isUpdate.value = false; isUpdate.value = false;
// 重置跟进列表 // 重置历史记录和新内容
followUpList.value = [ historyRecords.value = [];
{ newFollowUpContent.value = '';
content: '',
status: 0,
sortNumber: 0
}
];
} }
} else { } else {
resetFields(); resetFields();

View File

@@ -37,7 +37,10 @@
<div class="text-gray-600">{{ record.nickName }}</div> <div class="text-gray-600">{{ record.nickName }}</div>
<div class="text-gray-400">{{ record.phone }}</div> <div class="text-gray-400">{{ record.phone }}</div>
<div class="text-gray-400">{{ record.rate }}</div> <div class="text-gray-400">{{ record.rate }}</div>
</template>
<template v-if="column.key === 'comments'">
<div class="text-gray-400">{{ record.comments }}</div>
<div class="text-gray-400" v-if="record.comments">{{ record.updateTime }}</div>
</template> </template>
<template v-if="column.key === 'createTime'"> <template v-if="column.key === 'createTime'">
<div class="flex flex-col"> <div class="flex flex-col">
@@ -159,7 +162,7 @@ const columns = ref<ColumnItem[]>([
key: 'customer' key: 'customer'
}, },
{ {
title: '跟进情况', title: '最后跟进情况',
dataIndex: 'comments', dataIndex: 'comments',
key: 'comments', key: 'comments',
align: 'left' align: 'left'