✨ CRM：优化客户的详情、更新成交状态

src/api/crm/customer/index.ts

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

src/views/crm/clue/ClueForm.vue

@@ -102,12 +102,14 @@
       <el-row>
         <el-col :span="12">
           <el-form-item label="地址" prop="areaId">
-            <el-tree-select
+            <el-cascader
               v-model="formData.areaId"
-              :data="areaList"
+              :options="areaList"
               :props="defaultProps"
-              :render-after-expand="true"
               class="w-1/1"
+              clearable
+              filterable
+              placeholder="请选择城市"
             />
           </el-form-item>
         </el-col>

src/views/crm/clue/detail/ClueDetailsHeader.vue

@@ -35,7 +35,7 @@ import { DICT_TYPE } from '@/utils/dict'
 import * as ClueApi from '@/api/crm/clue'
 import { formatDate } from '@/utils/formatTime'
 
-defineOptions({ name: 'ClueDetailsHeader' })
+defineOptions({ name: 'CrmClueDetailsHeader' })
 defineProps<{
   clue: ClueApi.ClueVO // 线索信息
   loading: boolean // 加载中

src/views/crm/clue/detail/ClueDetailsInfo.vue

@@ -62,7 +62,7 @@ import * as ClueApi from '@/api/crm/clue'
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 
-defineOptions({ name: 'ClueDetailsInfo' })
+defineOptions({ name: 'CrmClueDetailsInfo' })
 const { clue } = defineProps<{
   clue: ClueApi.ClueVO // 线索明细
 }>()

src/views/crm/customer/CustomerForm.vue

@@ -102,12 +102,14 @@
       <el-row>
         <el-col :span="12">
           <el-form-item label="地址" prop="areaId">
-            <el-tree-select
+            <el-cascader
               v-model="formData.areaId"
-              :data="areaList"
+              :options="areaList"
               :props="defaultProps"
-              :render-after-expand="true"
               class="w-1/1"
+              clearable
+              filterable
+              placeholder="请选择城市"
             />
           </el-form-item>
         </el-col>
@@ -117,7 +119,6 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <!-- TODO 芋艿：待整理 -->
       <el-row>
         <el-col :span="12">
           <el-form-item label="下次联系时间" prop="contactNextTime">

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

@@ -24,18 +24,18 @@
         {{ customer.dealStatus ? '已成交' : '未成交' }}
       </el-descriptions-item>
       <el-descriptions-item label="负责人">{{ customer.ownerUserName }}</el-descriptions-item>
-      <!-- TODO wanwan 首要联系人? -->
-      <el-descriptions-item label="首要联系人" />
-      <!-- TODO wanwan 首要联系人电话? -->
-      <el-descriptions-item label="首要联系人电话">{{ customer.mobile }}</el-descriptions-item>
+      <el-descriptions-item label="创建时间">
+        {{ formatDate(customer.createTime) }}
+      </el-descriptions-item>
     </el-descriptions>
   </ContentWrap>
 </template>
 <script lang="ts" setup>
 import { DICT_TYPE } from '@/utils/dict'
 import * as CustomerApi from '@/api/crm/customer'
+import { formatDate } from '@/utils/formatTime'
 
-defineOptions({ name: 'CustomerDetailsHeader' })
+defineOptions({ name: 'CrmCustomerDetailsHeader' })
 defineProps<{
   customer: CustomerApi.CustomerVO // 客户信息
   loading: boolean // 加载中

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

@@ -9,36 +9,26 @@
           <el-descriptions-item label="客户名称">
             {{ customer.name }}
           </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="客户来源">
             <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="customer.source" />
           </el-descriptions-item>
-          <el-descriptions-item label="客户级别">
-            <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="customer.level" />
-          </el-descriptions-item>
           <el-descriptions-item label="手机">{{ customer.mobile }}</el-descriptions-item>
           <el-descriptions-item label="电话">{{ customer.telephone }}</el-descriptions-item>
           <el-descriptions-item label="邮箱">{{ customer.email }}</el-descriptions-item>
+          <el-descriptions-item label="地址">
+            {{ customer.areaName }} {{ customer.detailAddress }}
+          </el-descriptions-item>
           <el-descriptions-item label="QQ">{{ customer.qq }}</el-descriptions-item>
           <el-descriptions-item label="微信">{{ customer.wechat }}</el-descriptions-item>
-          <el-descriptions-item label="网址">{{ customer.website }}</el-descriptions-item>
-          <el-descriptions-item label="所在地">{{ customer.areaName }}</el-descriptions-item>
-          <el-descriptions-item label="详细地址"
-            >{{ customer.detailAddress }}
+          <el-descriptions-item label="客户行业">
+            <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="customer.industryId" />
+          </el-descriptions-item>
+          <el-descriptions-item label="客户级别">
+            <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="customer.level" />
           </el-descriptions-item>
           <el-descriptions-item label="下次联系时间">
-            {{
-              customer.contactNextTime ? formatDate(customer.contactNextTime, 'YYYY-MM-DD') : '空'
-            }}
+            {{ formatDate(customer.contactNextTime) }}
           </el-descriptions-item>
-          <el-descriptions-item label="最后跟进时间">
-            {{ customer.contactLastTime ? formatDate(customer.contactLastTime) : '空' }}
-          </el-descriptions-item>
-        </el-descriptions>
-        <el-descriptions :column="1">
-          <el-descriptions-item label="客户描述">{{ customer.description }}</el-descriptions-item>
           <el-descriptions-item label="备注">{{ customer.remark }}</el-descriptions-item>
         </el-descriptions>
       </el-collapse-item>
@@ -46,14 +36,21 @@
         <template #title>
           <span class="text-base font-bold">系统信息</span>
         </template>
-        <el-descriptions :column="2">
+        <el-descriptions :column="4">
           <el-descriptions-item label="负责人">{{ customer.ownerUserName }}</el-descriptions-item>
+          <el-descriptions-item label="最后跟进记录">
+            {{ customer.contactLastContent }}
+          </el-descriptions-item>
+          <el-descriptions-item label="最后跟进时间">
+            {{ formatDate(customer.contactLastTime) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="">&nbsp;</el-descriptions-item>
           <el-descriptions-item label="创建人">{{ customer.creatorName }}</el-descriptions-item>
           <el-descriptions-item label="创建时间">
-            {{ customer.createTime ? formatDate(customer.createTime) : '空' }}
+            {{ formatDate(customer.createTime) }}
           </el-descriptions-item>
           <el-descriptions-item label="更新时间">
-            {{ customer.updateTime ? formatDate(customer.updateTime) : '空' }}
+            {{ formatDate(customer.updateTime) }}
           </el-descriptions-item>
         </el-descriptions>
       </el-collapse-item>
@@ -65,7 +62,7 @@ import * as CustomerApi from '@/api/crm/customer'
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 
-defineOptions({ name: 'CustomerDetailsInfo' })
+defineOptions({ name: 'CrmCustomerDetailsInfo' })
 const { customer } = defineProps<{
   customer: CustomerApi.CustomerVO // 客户明细
 }>()

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

@@ -11,7 +11,9 @@
     <el-button v-if="permissionListRef?.validateOwnerUser" type="primary" @click="transfer">
       转移
     </el-button>
-    <el-button v-if="permissionListRef?.validateWrite">更改成交状态</el-button>
+    <el-button v-if="permissionListRef?.validateWrite" @click="handleUpdateDealStatus">
+      更改成交状态
+    </el-button>
     <el-button
       v-if="customer.lockStatus && permissionListRef?.validateOwnerUser"
       @click="handleUnlock"
@@ -72,7 +74,7 @@
 
   <!-- 表单弹窗：添加/修改 -->
   <CustomerForm ref="formRef" @success="getCustomer" />
-  <CrmTransferForm ref="crmTransferFormRef" @success="close" />
+  <CrmTransferForm ref="transferFormRef" @success="close" />
 </template>
 <script lang="ts" setup>
 import { useTagsViewStore } from '@/store/modules/tagsView'
@@ -120,10 +122,24 @@ const openForm = () => {
   formRef.value?.open('update', customerId.value)
 }
 
+/** 更新成交状态操作 */
+const handleUpdateDealStatus = async () => {
+  const dealStatus = !customer.value.dealStatus
+  try {
+    // 更新状态的二次确认
+    await message.confirm(`确定更新成交状态为【${dealStatus ? '已成交' : '未成交'}】吗？`)
+    // 发起更新
+    await CustomerApi.updateCustomerDealStatus(customerId.value, dealStatus)
+    message.success(`更新成交状态成功`)
+    // 刷新数据
+    await getCustomer()
+  } catch {}
+}
+
 /** 客户转移 */
-const crmTransferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 客户转移表单 ref
+const transferFormRef = ref<InstanceType<typeof CrmTransferForm>>() // 客户转移表单 ref
 const transfer = () => {
-  crmTransferFormRef.value?.open('客户转移', customerId.value, CustomerApi.transferCustomer)
+  transferFormRef.value?.open('客户转移', customerId.value, CustomerApi.transferCustomer)
 }
 
 /** 锁定客户 */