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

4362251b · YunaiV · ac9a77e6 · 4362251b · 4362251b · 4362251b
Commit 4362251b authored Feb 20, 2024 by YunaiV
8 changed files
--- a/src/api/crm/customer/index.ts
+++ b/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 })

--- a/src/views/crm/clue/ClueForm.vue
+++ b/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>

--- a/src/views/crm/clue/detail/ClueDetailsHeader.vue
+++ b/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 // 加载中

--- a/src/views/crm/clue/detail/ClueDetailsInfo.vue
+++ b/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 // 线索明细
 }>()

--- a/src/views/crm/customer/CustomerForm.vue
+++ b/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">

--- a/src/views/crm/customer/detail/CustomerDetailsHeader.vue
+++ b/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="创建时间">
-      <el-descriptions-item label="首要联系人" />
+        {{ formatDate(customer.createTime) }}
-      <!-- TODO wanwan 首要联系人电话? -->
+      </el-descriptions-item>
-      <el-descriptions-item label="首要联系人电话">{{ customer.mobile }}</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 // 加载中

--- a/src/views/crm/customer/detail/CustomerDetailsInfo.vue
+++ b/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="客户行业">
-          <el-descriptions-item label="所在地">{{ customer.areaName }}</el-descriptions-item>
+            <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="customer.industryId" />
-          <el-descriptions-item label="详细地址"
-            >{{ customer.detailAddress }}
          </el-descriptions-item>
-          <el-descriptions-item label="下次联系时间">
+          <el-descriptions-item label="客户级别">
-            {{
+            <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="customer.level" />
-              customer.contactNextTime ? formatDate(customer.contactNextTime, 'YYYY-MM-DD') : '空'
-            }}
          </el-descriptions-item>
-          <el-descriptions-item label="最后跟进时间">
+          <el-descriptions-item label="下次联系时间">
-            {{ customer.contactLastTime ? formatDate(customer.contactLastTime) : '空' }}
+            {{ formatDate(customer.contactNextTime) }}
          </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 // 客户明细
 }>()

--- a/src/views/crm/customer/detail/index.vue
+++ b/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)
 }
 /** 锁定客户 */