crm 客户管理界面优化

src/api/crm/customer/index.ts

@@ -74,7 +74,7 @@ export const updateCustomer = async (data: CustomerVO) => {
 }
 
 // 更新客户的成交状态
-export const updateCustomerDealStatus = async (id: number, dealStatus: boolean) => {
+export const updateCustomerDealStatus = async (id: number, dealStatus: number) => {
   return await request.put({ url: `/crm/customer/update-deal-status`, params: { id, dealStatus } })
 }
 

src/views/crm/contact/ContactForm.vue

@@ -13,41 +13,6 @@
             <el-input v-model="formData.name" placeholder="请输入姓名" />
           </el-form-item>
         </el-col>
-        <el-col :span="12">
-          <el-form-item label="负责人" prop="ownerUserId">
-            <el-select
-              v-model="formData.ownerUserId"
-              :disabled="formType !== 'create'"
-              class="w-1/1"
-            >
-              <el-option
-                v-for="item in userOptions"
-                :key="item.id"
-                :label="item.nickname"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="12">
-          <el-form-item label="客户名称" prop="customerId">
-            <el-select
-              :disabled="formData.customerDefault"
-              v-model="formData.customerId"
-              placeholder="请选择客户"
-              class="w-1/1"
-            >
-              <el-option
-                v-for="item in customerList"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
         <el-col :span="12">
           <el-form-item label="手机" prop="mobile">
             <el-input v-model="formData.mobile" placeholder="请输入手机" />
@@ -85,7 +50,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="12">
-          <el-form-item label="关键决策人" prop="master" style="width: 400px">
+          <el-form-item label="主要联系人" prop="master" style="width: 400px">
             <el-radio-group v-model="formData.master">
               <el-radio
                 v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
@@ -111,7 +76,7 @@
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <!-- <el-col :span="12">
           <el-form-item label="直属上级" prop="parentId">
             <el-select v-model="formData.parentId" placeholder="请选择直属上级" class="w-1/1">
               <el-option
@@ -123,41 +88,10 @@
               />
             </el-select>
           </el-form-item>
-        </el-col>
+        </el-col> -->
       </el-row>
       <el-row>
-        <el-col :span="12">
+        <el-col :span="24">
-          <el-form-item label="地址" prop="areaId">
-            <el-cascader
-              v-model="formData.areaId"
-              :options="areaList"
-              :props="defaultProps"
-              class="w-1/1"
-              clearable
-              filterable
-              placeholder="请选择城市"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="详细地址" prop="detailAddress">
-            <el-input v-model="formData.detailAddress" placeholder="请输入详细地址" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="12">
-          <el-form-item label="下次联系时间" prop="contactNextTime">
-            <el-date-picker
-              v-model="formData.contactNextTime"
-              placeholder="选择下次联系时间"
-              type="datetime"
-              value-format="x"
-              class="!w-1/1"
-            />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
           <el-form-item label="备注" prop="remark">
             <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
           </el-form-item>

src/views/crm/contact/components/ContactList.vue

@@ -42,8 +42,8 @@
       </el-table-column>
       <el-table-column align="center" label="手机号" prop="mobile" />
       <el-table-column align="center" label="职位" prop="post" />
-      <el-table-column align="center" label="直属上级" prop="parentName" />
+      <!-- <el-table-column align="center" label="直属上级" prop="parentName" /> -->
-      <el-table-column align="center" label="是否关键决策人" min-width="100" prop="master">
+      <el-table-column align="center" label="是否主要联系人" min-width="100" prop="master">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.master" />
         </template>

src/views/crm/contract/components/ContractList.vue

@@ -1,12 +1,4 @@
 <template>
-  <!-- 操作栏 -->
-  <el-row justify="end">
-    <el-button @click="openForm">
-      <Icon class="mr-5px" icon="clarity:contract-line" />
-      创建合同
-    </el-button>
-  </el-row>
-
   <!-- 列表 -->
   <ContentWrap class="mt-10px">
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">

src/views/crm/customer/CustomerForm.vue

@@ -8,7 +8,7 @@
       label-width="120px"
     >
       <el-row>
-        <el-col :span="14">
+        <el-col :span="12">
           <el-form-item label="地区" prop="areaId">
             <el-cascader
               v-model="formData.areaId"
@@ -21,15 +21,6 @@
             />
           </el-form-item>
         </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="16">
-          <el-form-item label="客户名称" prop="name">
-            <el-input v-model="formData.name" placeholder="请输入客户名称" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row>
         <el-col :span="12">
           <el-form-item label="客户类别" prop="industryId">
             <el-select v-model="formData.industryId" placeholder="请选择客户类别" class="w-1/1">
@@ -43,6 +34,13 @@
           </el-form-item>
         </el-col>
       </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="客户名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入客户名称" />
+          </el-form-item>
+        </el-col>
+      </el-row>
 
       <el-row>
         <el-col :span="12">
@@ -56,6 +54,18 @@
             />
           </el-form-item>
         </el-col>
+        <el-col :span="12">
+          <el-form-item label="成交状态" prop="dealStatus">
+            <el-select v-model="formData.dealStatus" placeholder="请选择成交状态" class="w-1/1">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_DEAL_STATUS)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
       </el-row>
       <el-row>
         <el-col :span="24">
@@ -100,6 +110,7 @@ const formData = ref({
   email: undefined,
   areaId: undefined,
   detailAddress: undefined,
+  dealStatus: undefined,
   industryId: undefined,
   level: undefined,
   source: undefined,
@@ -111,6 +122,7 @@ const formRules = reactive({
   areaId: [{ required: true, message: '地区不能为空', trigger: 'change' }],
   detailAddress: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
   industryId: [{ required: true, message: '客户类别不能为空', trigger: 'change' }],
+  dealStatus: [{ required: true, message: '成交状态不能为空', trigger: 'change' }],
 })
 const formRef = ref() // 表单 Ref
 

src/views/crm/customer/detail/CustomerDetailsHeader.vue

@@ -17,9 +17,6 @@
   </div>
   <ContentWrap class="mt-10px">
     <el-descriptions :column="5" direction="vertical">
-      <el-descriptions-item label="客户级别">
-        <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="customer.level" />
-      </el-descriptions-item>
       <el-descriptions-item label="成交状态">
         {{ customer.dealStatus ? '已成交' : '未成交' }}
       </el-descriptions-item>
@@ -27,6 +24,19 @@
       <el-descriptions-item label="创建时间">
         {{ formatDate(customer.createTime) }}
       </el-descriptions-item>
+      <el-descriptions-item label="客户名称">
+        {{ customer.name }}
+      </el-descriptions-item>
+      <el-descriptions-item label="地址">
+        {{ customer.areaName }} {{ customer.detailAddress }}
+      </el-descriptions-item>
+      <el-descriptions-item label="客户类别">
+        <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="customer.industryId" />
+      </el-descriptions-item>
+      <el-descriptions-item label="下次联系时间">
+        {{ formatDate(customer.contactNextTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="备注">{{ customer.remark }}</el-descriptions-item>
     </el-descriptions>
   </ContentWrap>
 </template>

src/views/crm/customer/detail/CustomerDetailsInfo.vue

@@ -33,9 +33,9 @@
         </template>
         <el-descriptions :column="4">
           <el-descriptions-item label="负责人">{{ customer.ownerUserName }}</el-descriptions-item>
-          <el-descriptions-item label="最后跟进记录">
+          <!-- <el-descriptions-item label="最后跟进记录">
             {{ customer.contactLastContent }}
-          </el-descriptions-item>
+          </el-descriptions-item> -->
           <el-descriptions-item label="最后跟进时间">
             {{ formatDate(customer.contactLastTime) }}
           </el-descriptions-item>

src/views/crm/customer/detail/index.vue

@@ -11,9 +11,9 @@
     <el-button v-if="permissionListRef?.validateOwnerUser" type="primary" @click="transfer">
       转移
     </el-button>
-    <el-button v-if="permissionListRef?.validateWrite" @click="handleUpdateDealStatus">
+    <!-- <el-button v-if="permissionListRef?.validateWrite" @click="handleUpdateDealStatus">
       更改成交状态
-    </el-button>
+    </el-button> -->
     <el-button
       v-if="customer.lockStatus && permissionListRef?.validateOwnerUser"
       @click="handleUnlock"
@@ -40,7 +40,7 @@
         <CustomerDetailsInfo :customer="customer" />
       </el-tab-pane>
       <el-tab-pane label="联系人" lazy>
-        <ContactList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" />
+        <ContactList :biz-id="customer.id!" :biz-type="BizTypeEnum.CRM_CUSTOMER" :customer-id="customerId"/>
       </el-tab-pane>
       <el-tab-pane label="团队成员">
         <PermissionList
@@ -118,13 +118,13 @@ const openForm = () => {
 
 /** 更新成交状态操作 */
 const handleUpdateDealStatus = async () => {
-  const dealStatus = !customer.value.dealStatus
+  const dealStatus = customer.value.dealStatus
   try {
-    // 更新状态的二次确认
+    // // 更新状态的二次确认
-    await message.confirm(`确定更新成交状态为【${dealStatus ? '已成交' : '未成交'}】吗？`)
+    // await message.confirm(`确定更新成交状态为【${dealStatus ? '已成交' : '未成交'}】吗？`)
     // 发起更新
     await CustomerApi.updateCustomerDealStatus(customerId.value, dealStatus)
-    message.success(`更新成交状态成功`)
+    // message.success(`更新成交状态成功`)
     // 刷新数据
     await getCustomer()
   } catch {}

src/views/crm/customer/index.vue

@@ -116,8 +116,12 @@
 
       <el-table-column align="center" label="主要联系人" prop="primaryContactName" width="150">
         <template #default="scope">
-          <el-link :underline="false" type="primary" @click="openPrimaryContactDetail(scope.row.primaryContactId)">
+          <el-link
-            {{ scope.row.primaryContactName }}
+            :underline="false"
+            :type="scope.row.primaryContactName ? 'primary' : 'danger'"
+            @click="scopeRowIdForCustomerDetail = scope.row.id; openPrimaryContactDetail(scope.row.primaryContactId)"
+          >
+            {{ scope.row.primaryContactName || '暂无' }}
           </el-link>
         </template>
       </el-table-column>
@@ -260,8 +264,15 @@ const openDetail = (id: number) => {
 
 /** 打开主要联系人详情 */
 const openPrimaryContactDetail = (id: number) => {
-  push({ name: 'CrmContactDetail', params: { id } })
+  if (!id) {
+    // id 为空跳转客户详情
+    push({ name: 'CrmCustomerDetail', params: { id: scopeRowIdForCustomerDetail.value } })
+  } else {
+    push({ name: 'CrmContactDetail', params: { id } })
+  }
 }
+// 用于存储当前行客户id
+const scopeRowIdForCustomerDetail = ref<number | null>(null)
 
 /** 添加/修改操作 */
 const formRef = ref()

src/views/crm/followup/FollowUpRecordForm.vue

@@ -1,4 +1,4 @@
-<!-- 跟进记录的添加表单弹窗 -->
+<!-- 跟进记录的添加表单 -->
 <template>
   <Dialog v-model="dialogVisible" title="添加跟进记录" width="50%">
     <el-form
@@ -10,8 +10,8 @@
     >
       <el-row>
         <el-col :span="12">
-          <el-form-item label="跟进类型" prop="type">
+          <el-form-item label="跟进方式" prop="type">
-            <el-select v-model="formData.type" placeholder="请选择跟进类型">
+            <el-select v-model="formData.type" placeholder="请选择跟进">
               <el-option
                 v-for="dict in getIntDictOptions(DICT_TYPE.CRM_FOLLOW_UP_TYPE)"
                 :key="dict.value"
@@ -31,30 +31,28 @@
             />
           </el-form-item>
         </el-col>
-        <el-col :span="24">
+        <el-col :span="12" v-if="formData.bizType == BizTypeEnum.CRM_CUSTOMER">
-          <el-form-item label="跟进内容" prop="content">
+          <el-form-item label="关联联系人" prop="contactIds">
-            <el-input v-model="formData.content" :rows="3" type="textarea" />
+            <el-select v-model="formData.contactIds" filterable placeholder="请选择联系人">
+              <el-option v-for="item in contactOptions" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="24">
+          <el-form-item label="跟进内容" prop="content">
+            <Editor v-model="formData.content" height="150px" />
+          </el-form-item>
+        </el-col>
+        <!-- <el-col :span="12">
           <el-form-item label="图片" prop="picUrls">
             <UploadImgs v-model="formData.picUrls" class="min-w-80px" />
           </el-form-item>
-        </el-col>
+        </el-col> -->
         <el-col :span="12">
           <el-form-item label="附件" prop="fileUrls">
             <UploadFile v-model="formData.fileUrls" class="min-w-80px" />
           </el-form-item>
         </el-col>
-        <el-col :span="24" v-if="formData.bizType == BizTypeEnum.CRM_CUSTOMER">
-          <el-form-item label="关联联系人" prop="contactIds">
-            <el-button @click="handleOpenContact">
-              <Icon class="mr-5px" icon="ep:plus" />
-              关联联系人
-            </el-button>
-            <FollowUpRecordContactForm :contacts="formData.contacts" />
-          </el-form-item>
-        </el-col>
       </el-row>
     </el-form>
     <template #footer>
@@ -62,18 +60,6 @@
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
-
-  <!-- 弹窗 -->
-  <ContactListModal
-    ref="contactTableSelectRef"
-    :customer-id="formData.bizId"
-    @success="handleAddContact"
-  />
-  <BusinessListModal
-    ref="businessTableSelectRef"
-    :customer-id="formData.bizId"
-    @success="handleAddBusiness"
-  />
 </template>
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
@@ -94,19 +80,55 @@ const message = useMessage() // 消息弹窗
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formData = ref({
+// 修正表单数据类型声明，允许动态赋值
+interface FollowUpFormData {
+  bizType?: number;
+  bizId?: number;
+  type?: number;
+  content?: string;
+  nextTime?: any;
+  picUrls?: string[];
+  fileUrls?: string[];
+  businesses?: any[];
+  contacts?: any[];
+  contactIds?: number[];
+}
+const formData = ref<FollowUpFormData>({
   bizType: undefined,
   bizId: undefined,
+  type: undefined,
+  content: '',
+  nextTime: undefined,
+  picUrls: [],
+  fileUrls: [],
   businesses: [],
-  contacts: []
+  contacts: [],
+  contactIds: []
 })
 const formRules = reactive({
   type: [{ required: true, message: '跟进类型不能为空', trigger: 'change' }],
   content: [{ required: true, message: '跟进内容不能为空', trigger: 'blur' }],
-  nextTime: [{ required: true, message: '下次联系时间不能为空', trigger: 'blur' }]
+  nextTime: [{ required: true, message: '下次联系时间不能为空', trigger: 'blur' }],
+  contactIds: [{ required: true, message: '联系人不能为空', trigger: 'change' }]
+  
 })
 
 const formRef = ref() // 表单 Ref
+const contactOptions = ref<ContactApi.ContactVO[]>([])
+
+watch(
+  () => formData.value.bizId,
+  async (val) => {
+    if (formData.value.bizType === BizTypeEnum.CRM_CUSTOMER && val) {
+      // 获取客户下联系人
+      const res = await ContactApi.getContactPageByCustomer({ customerId: val, pageSize: 100 })
+      contactOptions.value = res.list || []
+    } else {
+      contactOptions.value = []
+    }
+  },
+  { immediate: true }
+)
 
 /** 打开弹窗 */
 const open = async (bizType: number, bizId: number) => {
@@ -119,39 +141,30 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+// 提交时contactIds直接提交
 const submitForm = async () => {
-  // 校验表单
   await formRef.value.validate()
-  // 提交请求
   formLoading.value = true
   try {
+    // 保证contactIds始终为数组
+    let contactIds = formData.value.contactIds
+    if (!Array.isArray(contactIds)) {
+      contactIds = contactIds !== undefined && contactIds !== null ? [contactIds] : []
+    }
     const data = {
       ...formData.value,
-      contactIds: formData.value.contacts.map((item) => item.id),
+      contactIds,
-      businessIds: formData.value.businesses.map((item) => item.id)
+      businessIds: (formData.value.businesses || []).map((item: any) => item.id)
     } as unknown as FollowUpRecordVO
     await FollowUpRecordApi.createFollowUpRecord(data)
     message.success(t('common.createSuccess'))
     dialogVisible.value = false
-    // 发送操作成功的事件
     emit('success')
   } finally {
     formLoading.value = false
   }
 }
 
-/** 关联联系人 */
-const contactTableSelectRef = ref<InstanceType<typeof ContactListModal>>()
-const handleOpenContact = () => {
-  contactTableSelectRef.value?.open()
-}
-const handleAddContact = (contactId: [], newContacts: ContactApi.ContactVO[]) => {
-  if (newContacts.length > 0) {
-    // 只保留最新选择的一个联系人
-    formData.value.contacts = [newContacts[0]]
-  }
-}
-
 /** 关联商机 */
 const businessTableSelectRef = ref<InstanceType<typeof BusinessListModal>>()
 const handleOpenBusiness = () => {
@@ -171,8 +184,14 @@ const resetForm = () => {
   formData.value = {
     bizId: undefined,
     bizType: undefined,
+    type: undefined,
+    content: '',
+    nextTime: undefined,
+    picUrls: [],
+    fileUrls: [],
     businesses: [],
-    contacts: []
+    contacts: [],
+    contactIds: []
   }
 }
 </script>

src/views/crm/followup/index.vue

@@ -15,13 +15,17 @@
       :timestamp="formatDate(item.createTime)"
       placement="top"
     >
+      <template #timestamp>
+        <div style="color:#999;font-size:13px;margin-bottom:2px;">跟进时间</div>
+        <span>{{ formatDate(item.createTime) }}</span>
+      </template>
       <div class="el-timeline-right-content">
         <div class="followup-meta  mb-5px">
           <span class="meta-label">跟进人：</span><el-tag class="mr-10px" type="success">{{ item.creatorName }}</el-tag>
-          <span class="meta-label">跟进类型：</span><dict-tag :type="DICT_TYPE.CRM_FOLLOW_UP_TYPE" :value="item.type" class="mr-10px" />
+          <span class="meta-label">跟进方式：</span><dict-tag :type="DICT_TYPE.CRM_FOLLOW_UP_TYPE" :value="item.type" class="mr-10px" />
         </div>
-        <span class="follow-row">跟进内容：{{ item.content }}</span>
+        <span class="follow-row" v-if="!/<[a-z][\s\S]*>/i.test(item.content)">跟进内容：{{ item.content }}</span>
-        <span v-if="item.nextTime" class="mb-5px follow-row text-gray-500">下次联系：{{ formatDate(item.nextTime) }}</span>
+        <div class="follow-row" v-else v-html="'跟进内容：' + item.content"></div>
         <!-- <span v-if="bizType === BizTypeEnum.CRM_CUSTOMER && item.contacts && item.contacts.length" class="ml-10px">
           关联联系人：
           <el-link