CRM：code review【客户统计】的代码实现

src/views/crm/statistics/customer/components/CustomerFollowUpType.vue

@@ -27,8 +27,9 @@ import {
   CrmStatisticsFollowUpSummaryByTypeRespVO
 } from '@/api/crm/statistics/customer'
 import { EChartsOption } from 'echarts'
-import { round, sumBy } from 'lodash-es'
+import { sumBy } from 'lodash-es'
 import { DICT_TYPE, getDictLabel } from '@/utils/dict'
+import { erpCalculatePercentage } from '@/utils'
 
 defineOptions({ name: 'CustomerFollowupType' })
 const props = defineProps<{ queryParams: any }>() // 搜索参数
@@ -95,7 +96,7 @@ const loadData = async () => {
   list.value = followUpSummaryByType.map((row: CrmStatisticsFollowUpSummaryByTypeRespVO) => {
     return {
       ...row,
-      portion: round((row.followUpRecordCount / totalCount) * 100, 2)
+      portion: erpCalculatePercentage(row.followUpRecordCount, totalCount)
     }
   })
   loading.value = false

src/views/crm/statistics/customer/components/CustomerSummary.vue

@@ -10,8 +10,8 @@
   <!-- 统计列表 -->
   <el-card shadow="never" class="mt-16px">
     <el-table v-loading="loading" :data="list">
-      <el-table-column label="序号" align="center" type="index" width="80" />
-      <el-table-column label="员工姓名" prop="ownerUserName" min-width="100" />
+      <el-table-column label="序号" align="center" type="index" width="80" fixed="left" />
+      <el-table-column label="员工姓名" prop="ownerUserName" min-width="100" fixed="left" />
       <el-table-column
         label="新增客户数"
         align="right"
@@ -21,28 +21,31 @@
       <el-table-column label="成交客户数" align="right" prop="customerDealCount" min-width="200" />
       <el-table-column label="客户成交率(%)" align="right" min-width="200">
         <template #default="scope">
-          {{
-            scope.row.customerCreateCount !== 0
-              ? round((scope.row.customerDealCount / scope.row.customerCreateCount) * 100, 2)
-              : 0
-          }}
+          {{ erpCalculatePercentage(scope.row.customerDealCount, scope.row.customerCreateCount) }}
         </template>
       </el-table-column>
-      <el-table-column label="合同总金额" align="right" prop="contractPrice" min-width="200" />
-      <el-table-column label="回款金额" align="right" prop="receivablePrice" min-width="200" />
+      <el-table-column
+        label="合同总金额"
+        align="right"
+        prop="contractPrice"
+        min-width="200"
+        :formatter="erpPriceTableColumnFormatter"
+      />
+      <el-table-column
+        label="回款金额"
+        align="right"
+        prop="receivablePrice"
+        min-width="200"
+        :formatter="erpPriceTableColumnFormatter"
+      />
       <el-table-column label="未回款金额" align="right" min-width="200">
-        <!-- TODO @dhb52：参考 util/index.ts 的 // ========== ERP 专属方法 ========== 部分，搞个两个方法，一个格式化百分比，一个计算百分比  -->
         <template #default="scope">
-          {{ round(scope.row.contractPrice - scope.row.receivablePrice, 2) }}
+          {{ erpCalculatePercentage(scope.row.receivablePrice, scope.row.contractPrice) }}
         </template>
       </el-table-column>
-      <el-table-column label="回款完成率(%)" align="right" min-width="200">
+      <el-table-column label="回款完成率(%)" align="right" min-width="200" fixed="right">
         <template #default="scope">
-          {{
-            scope.row.contractPrice !== 0
-              ? round((scope.row.receivablePrice / scope.row.contractPrice) * 100, 2)
-              : 0
-          }}
+          {{ erpCalculatePercentage(scope.row.receivablePrice, scope.row.contractPrice) }}
         </template>
       </el-table-column>
     </el-table>
@@ -55,7 +58,7 @@ import {
   CrmStatisticsCustomerSummaryByUserRespVO
 } from '@/api/crm/statistics/customer'
 import { EChartsOption } from 'echarts'
-import { round } from 'lodash-es'
+import { erpCalculatePercentage, erpPriceTableColumnFormatter } from '@/utils'
 
 defineOptions({ name: 'CustomerSummary' })
 const props = defineProps<{ queryParams: any }>() // 搜索参数

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

@@ -124,32 +124,31 @@ const userListByDeptId = computed(() =>
     : []
 )
 
-//
 const activeTab = ref('customerSummary') // 活跃标签
 const customerSummaryRef = ref() // 1. 客户总量分析
 const followUpSummaryRef = ref() // 2. 客户跟进次数分析
 const followUpTypeRef = ref() // 3. 客户跟进方式分析
 const conversionStatRef = ref() // 4. 客户转化率分析
 // 5. TODO 公海客户分析
-// 缺 crm_owner_record 表
+// 缺 crm_owner_record 表 TODO @dhb52：可以先做界面 + 接口，接口数据直接写死返回，相当于 mock 出来
 const dealCycleRef = ref() // 6. 成交周期分析
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
   switch (activeTab.value) {
-    case 'customerSummary':
+    case 'customerSummary': // 客户总量分析
       customerSummaryRef.value?.loadData?.()
       break
-    case 'followUpSummary':
+    case 'followUpSummary': // 客户跟进次数分析
       followUpSummaryRef.value?.loadData?.()
       break
-    case 'followUpType':
+    case 'followUpType': // 客户跟进方式分析
       followUpTypeRef.value?.loadData?.()
       break
-    case 'conversionStat':
+    case 'conversionStat': // 客户转化率分析
       conversionStatRef.value?.loadData?.()
       break
-    case 'dealCycle':
+    case 'dealCycle': // 成交周期分析
       dealCycleRef.value?.loadData?.()
       break
   }