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

- 在 shopDealerApply model 中新增 comments 字段用于存储最后跟进内容
- 重构编辑页面的跟进记录展示方式，分为历史记录和新增记录两部分
- 历史记录支持按时间倒序展示并可删除单条记录
- 新增独立的跟进内容输入框和保存按钮，提升用户体验
- 保存新的跟进记录时同步更新主表的 comments 字段
- 调整列表页展示逻辑，在备注列同时显示最后跟进内容和更新时间
- 将列表页的"跟进情况"标题更改为"最后跟进情况"以准确表达含义
- 移除原有的限制最多10条跟进信息的逻辑- 优化代码结构和组件交互逻辑，提高可维护性

src/api/shop/shopDealerApply/model/index.ts

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

src/views/sdy/shopDealerApply/components/shopDealerApplyEdit.vue

@@ -160,108 +160,101 @@
         <span style="color: #1890ff; font-weight: 600;">跟进情况</span>
       </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
-                  v-else
+              v-model:value="newFollowUpContent"
-                  v-model:value="item.content"
+              placeholder="请输入本次跟进内容"
-                  :disabled="!isUpdate"
+              :rows="4"
-                  placeholder="请输入跟进内容"
-                  :rows="2"
               :maxlength="500"
+              style="width: 80%"
               show-count
             />
-              </a-form-item>
+            <div class="btn">
-            </a-col>
-            <a-col :span="4" style="text-align: right;">
               <a-button
-                type="link"
+                type="primary"
-                danger
+                @click="saveFollowUpRecord"
-                @click="removeFollowUp(index)"
+                :loading="followUpLoading"
-                :disabled="followUpList.length <= 1"
+                :disabled="!newFollowUpContent.trim()"
               >
-                删除
+                保存跟进记录
               </a-button>
-            </a-col>
-          </a-row>
             </div>
           </div>
+        </a-form-item>
+      </div>
 
     </a-form>
   </ele-modal>
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive, watch} from 'vue';
+  import { ref, reactive, watch } from 'vue';
-import {Form, message} from 'ant-design-vue';
+  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 {hasRole} from "@/utils/permission";
+  import { messageLoading } from 'ele-admin-pro';
+  import {hasRole} from "@/utils/permission";
 
-// 是否是修改
+  // 是否是修改
-const isUpdate = ref(false);
+  const isUpdate = ref(false);
-const useForm = Form.useForm;
+  const useForm = Form.useForm;
 
-const props = defineProps<{
+  const props = defineProps<{
     // 弹窗是否打开
     visible: boolean;
     // 修改回显的数据
     data?: ShopDealerApply | null;
-}>();
+  }>();
 
-const emit = defineEmits<{
+  const emit = defineEmits<{
     (e: 'done'): void;
     (e: 'update:visible', visible: boolean): void;
-}>();
+  }>();
 
-// 提交状态
+  // 提交状态
-const loading = ref(false);
+  const loading = ref(false);
-// 是否显示最大化切换按钮
+  // 跟进记录保存状态
-const maxable = ref(true);
+  const followUpLoading = ref(false);
-// 表格选中数据
+  // 是否显示最大化切换按钮
-const formRef = ref<FormInstance | null>(null);
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
 
-// 跟进情况列表
+  // 历史跟进记录
-const followUpList = ref<ShopDealerRecord[]>([
+  const historyRecords = ref<ShopDealerRecord[]>([]);
-  {
-    content: '',
-    status: 0,
-    sortNumber: 0
-  }
-]);
 
-// 表单数据
+  // 新的跟进内容
-const form = reactive<ShopDealerApply>({
+  const newFollowUpContent = ref('');
+
+  // 表单数据
+  const form = reactive<ShopDealerApply>({
     applyId: undefined,
     userId: undefined,
     nickName: undefined,
@@ -279,15 +272,15 @@ const form = reactive<ShopDealerApply>({
     tenantId: undefined,
     createTime: undefined,
     updateTime: undefined
-});
+  });
 
-/* 更新visible */
+  /* 更新visible */
-const updateVisible = (value: boolean) => {
+  const updateVisible = (value: boolean) => {
     emit('update:visible', value);
-};
+  };
 
-// 表单验证规则
+  // 表单验证规则
-const rules = reactive({
+  const rules = reactive({
     userId: [
       {
         required: true,
@@ -355,103 +348,79 @@ const rules = reactive({
         trigger: 'change'
       } as RuleObject
     ]
-});
-
-/* 添加跟进 */
-const addFollowUp = () => {
-  if (followUpList.value.length >= 10) {
-    message.warning('最多只能添加10条跟进信息');
-    return;
-  }
-
-  followUpList.value.push({
-    content: '',
-    status: 0,
-    sortNumber: followUpList.value.length
   });
-};
 
-/* 删除跟进 */
+  /* 获取历史跟进记录 */
-const removeFollowUp = (index: number) => {
+  const fetchHistoryRecords = async (dealerId: number) => {
-  if (followUpList.value.length <= 1) {
-    message.warning('至少保留一条跟进信息');
-    return;
-  }
-
-  followUpList.value.splice(index, 1);
-};
-
-/* 获取跟进记录 */
-const fetchFollowUpRecords = async (dealerId: number) => {
     try {
       // 先通过list接口获取所有记录，然后过滤
       const allRecords = await listShopDealerRecord({});
       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) {
-    console.error('获取跟进记录失败:', error);
+      console.error('获取历史跟进记录失败:', error);
-    message.error('获取跟进记录失败');
+      message.error('获取历史跟进记录失败');
-    // 初始化一条空记录
+      historyRecords.value = [];
-    followUpList.value = [
-      {
-        content: '',
-        status: 0,
-        sortNumber: 0
     }
-    ];
-  }
-};
-
-/* 保存跟进记录 */
-const saveFollowUpRecords = async (dealerId: number) => {
-  try {
-    // 保存每条跟进记录
-    for (const record of followUpList.value) {
-      const recordData: any = {
-        ...record,
-        dealerId: dealerId,
-        userId: form.userId,
-        status: 1
   };
 
-      // 如果有ID则更新，否则新增
+  /* 保存新的跟进记录 */
-      if (record.id) {
+  const saveFollowUpRecord = async () => {
-        // 更新逻辑（如果API支持）
+    // 检查是否有客户ID
-        await addShopDealerRecord(recordData);
+    if (!form.applyId) {
-      } else {
+      message.warning('请先保存客户信息');
-        // 新增逻辑
+      return;
-        await addShopDealerRecord(recordData);
-      }
     }
 
-    // message.success('跟进记录保存成功');
+    // 检查是否有跟进内容
+    if (!newFollowUpContent.value.trim()) {
+      message.warning('请输入跟进内容');
+      return;
+    }
+
+    try {
+      followUpLoading.value = true;
+      const recordData: any = {
+        content: newFollowUpContent.value.trim(),
+        dealerId: form.applyId,
+        userId: form.userId,
+        status: 1, // 默认设置为已完成
+        sortNumber: 0
+      };
+
+      // 新增逻辑
+      await addShopDealerRecord(recordData);
+      message.success('跟进记录保存成功');
+      // 保存最后跟进内容到主表
+      await updateShopDealerApply({
+        ...form,
+        comments: newFollowUpContent.value.trim()
+      })
+
+      // 清空输入框
+      newFollowUpContent.value = '';
+
+      // 重新加载历史记录
+      await fetchHistoryRecords(form.applyId);
     } catch (error) {
       console.error('保存跟进记录失败:', error);
       message.error('保存跟进记录失败');
-    throw error;
+    } finally {
+      followUpLoading.value = false;
     }
-};
+  };
 
-const {resetFields} = useForm(form, rules);
+  const { resetFields } = useForm(form, rules);
 
-/* 处理审核状态变化 */
+  /* 处理审核状态变化 */
-const handleStatusChange = (value: number) => {
+  const handleStatusChange = (value: number) => {
     // 当状态改为审核通过或驳回时，自动设置审核时间为当前时间
     if ((value === 20 || value === 30) && !form.auditTime) {
       form.auditTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
@@ -461,10 +430,28 @@ const handleStatusChange = (value: number) => {
       form.auditTime = undefined;
       form.rejectReason = '';
     }
-};
+  };
 
-/* 保存编辑 */
+  /* 删除单个 */
-const save = () => {
+  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 = () => {
     if (!formRef.value) {
       return;
     }
@@ -482,16 +469,6 @@ const save = () => {
       validateFields.push('auditTime');
     }
 
-  // 如果是跟进中状态，需要验证跟进内容
-  if (form.applyStatus === 10) {
-    // 构造跟进内容的验证字段
-    const followUpFields: string[] = [];
-    followUpList.value.forEach((_, index) => {
-      followUpFields.push(`followUpList.${index}.content`);
-    });
-    validateFields.push(...followUpFields);
-  }
-
     formRef.value
       .validate(validateFields)
       .then(async () => {
@@ -532,11 +509,6 @@ const save = () => {
           const msg = await saveOrUpdate(formData);
           message.success(msg);
 
-        // 如果是跟进中状态，保存跟进记录
-        if (formData.applyStatus === 10 && formData.applyId) {
-          await saveFollowUpRecords(formData.applyId);
-        }
-
           updateVisible(false);
           emit('done');
         } catch (e: any) {
@@ -548,9 +520,9 @@ const save = () => {
       .catch(() => {
         loading.value = false;
       });
-};
+  };
 
-watch(
+  watch(
     () => props.visible,
     async (visible) => {
       if (visible) {
@@ -558,9 +530,9 @@ watch(
           assignObject(form, props.data);
           isUpdate.value = true;
 
-        // 如果是修改且状态为跟进中，获取跟进记录
+          // 如果是修改且状态为跟进中，获取历史跟进记录
           if (props.data.applyId && props.data.applyStatus === 10) {
-          await fetchFollowUpRecords(props.data.applyId);
+            await fetchHistoryRecords(props.data.applyId);
           }
         } else {
           // 重置为默认值
@@ -581,21 +553,16 @@ watch(
           });
           isUpdate.value = false;
 
-        // 重置跟进列表
+          // 重置历史记录和新内容
-        followUpList.value = [
+          historyRecords.value = [];
-          {
+          newFollowUpContent.value = '';
-            content: '',
-            status: 0,
-            sortNumber: 0
-          }
-        ];
         }
       } else {
         resetFields();
       }
     },
-  {immediate: true}
+    { immediate: true }
-);
+  );
 </script>
 
 <style lang="less" scoped>

src/views/sdy/shopDealerApply/index.vue

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