From dcfad7a427394c1b72af3e15e44d58c0758ed2e8 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 5 Apr 2024 13:53:14 +0800
Subject: [PATCH] =?UTF-8?q?crm=EF=BC=9Acode=20review=20=E5=91=98=E5=B7=A5?=
 =?UTF-8?q?=E4=B8=9A=E7=BB=A9=E7=9A=84=E5=89=8D=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DictSelect/src/DictSelect.vue  |  1 +
 .../components/ContractCountPerformance.vue   | 94 +++++++++++--------
 .../components/ContractPricePerformance.vue   | 94 +++++++++++--------
 .../components/ReceivablePricePerformance.vue | 94 +++++++++++--------
 .../crm/statistics/performance/index.vue      | 11 +--
 5 files changed, 165 insertions(+), 129 deletions(-)

diff --git a/src/components/DictSelect/src/DictSelect.vue b/src/components/DictSelect/src/DictSelect.vue
index 0b4e258a..54279cec 100644
--- a/src/components/DictSelect/src/DictSelect.vue
+++ b/src/components/DictSelect/src/DictSelect.vue
@@ -1,3 +1,4 @@
+<!-- 数据字典 Select 选择器 -->
 <template>
   <el-select class="w-1/1" v-bind="attrs">
     <template v-if="valueType === 'int'">
diff --git a/src/views/crm/statistics/performance/components/ContractCountPerformance.vue b/src/views/crm/statistics/performance/components/ContractCountPerformance.vue
index 6519e557..71601af2 100644
--- a/src/views/crm/statistics/performance/components/ContractCountPerformance.vue
+++ b/src/views/crm/statistics/performance/components/ContractCountPerformance.vue
@@ -7,12 +7,18 @@
     </el-skeleton>
   </el-card>
 
-  <!-- 统计列表 -->
+  <!-- 统计列表 TODO @scholar：统计列表的展示不对 -->
   <el-card shadow="never" class="mt-16px">
     <el-table v-loading="loading" :data="tableData">
-      <el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
+      <el-table-column
+        v-for="item in columnsData"
+        :key="item.prop"
+        :label="item.label"
+        :prop="item.prop"
+        align="center"
+      >
         <template #default="scope">
-          {{scope.row[item.prop]}}
+          {{ scope.row[item.prop] }}
         </template>
       </el-table-column>
     </el-table>
@@ -23,7 +29,7 @@ import { EChartsOption } from 'echarts'
 import {
   StatisticsPerformanceApi,
   StatisticsPerformanceRespVO
-} from "@/api/crm/statistics/performance"
+} from '@/api/crm/statistics/performance'
 
 defineOptions({ name: 'ContractCountPerformance' })
 const props = defineProps<{ queryParams: any }>() // 搜索参数
@@ -86,29 +92,30 @@ const echartsOption = reactive<EChartsOption>({
       type: 'shadow'
     }
   },
-  yAxis: [{
-    type: 'value',
-    name: '数量（个）',
-    axisTick: {
-      show: false
-    },
-    axisLabel: {
-      color: '#BDBDBD',
-      formatter: '{value}'
-    },
-    /** 坐标轴轴线相关设置 */
-    axisLine: {
-      lineStyle: {
-        color: '#BDBDBD'
+  yAxis: [
+    {
+      type: 'value',
+      name: '数量（个）',
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#BDBDBD',
+        formatter: '{value}'
+      },
+      /** 坐标轴轴线相关设置 */
+      axisLine: {
+        lineStyle: {
+          color: '#BDBDBD'
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#e6e6e6'
+        }
       }
     },
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: '#e6e6e6'
-      }
-    }
-  },
     {
       type: 'value',
       name: '',
@@ -134,7 +141,8 @@ const echartsOption = reactive<EChartsOption>({
           color: '#e6e6e6'
         }
       }
-    }],
+    }
+  ],
   xAxis: {
     type: 'category',
     name: '日期',
@@ -152,9 +160,7 @@ const loadData = async () => {
 
   // 2.1 更新 Echarts 数据
   if (echartsOption.xAxis && echartsOption.xAxis['data']) {
-    echartsOption.xAxis['data'] = performanceList.map(
-      (s: StatisticsPerformanceRespVO) => s.time
-    )
+    echartsOption.xAxis['data'] = performanceList.map((s: StatisticsPerformanceRespVO) => s.time)
   }
   if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
     echartsOption.series[0]['data'] = performanceList.map(
@@ -165,43 +171,49 @@ const loadData = async () => {
     echartsOption.series[1]['data'] = performanceList.map(
       (s: StatisticsPerformanceRespVO) => s.lastMonthCount
     )
-    echartsOption.series[3]['data'] = performanceList.map(
-      (s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? (s.currentMonthCount / s.lastMonthCount*100).toFixed(2) : 'NULL'
+    echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
+      s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
     )
   }
   if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
     echartsOption.series[2]['data'] = performanceList.map(
       (s: StatisticsPerformanceRespVO) => s.lastYearCount
     )
-    echartsOption.series[4]['data'] = performanceList.map(
-      (s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? (s.currentMonthCount / s.lastYearCount*100).toFixed(2) : 'NULL'
+    echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
+      s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
     )
   }
 
   // 2.2 更新列表数据
   list.value = performanceList
   loading.value = false
-
 }
 
 // 初始化数据
-const columnsData = reactive([]);
-const tableData = reactive([{title: '当月合同数量统计（个）'}, {title: '上月合同数量统计（个）'},
-  {title: '去年当月合同数量统计（个）'}, {title: '同比增长率（%）'}, {title: '环比增长率（%）'}])
+const columnsData = reactive([])
+const tableData = reactive([
+  { title: '当月合同数量统计（个）' },
+  { title: '上月合同数量统计（个）' },
+  { title: '去年当月合同数量统计（个）' },
+  { title: '同比增长率（%）' },
+  { title: '环比增长率（%）' }
+])
 
 // 定义 init 方法
 const init = () => {
-  const columnObj = {label: '日期', prop: 'title'}
+  const columnObj = { label: '日期', prop: 'title' }
   columnsData.push(columnObj)
 
   list.value.forEach((item, index) => {
-    const columnObj = {label: item.time, prop: 'prop' + index}
+    const columnObj = { label: item.time, prop: 'prop' + index }
     columnsData.push(columnObj)
     tableData[0]['prop' + index] = item.currentMonthCount
     tableData[1]['prop' + index] = item.lastMonthCount
     tableData[2]['prop' + index] = item.lastYearCount
-    tableData[3]['prop' + index] = item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
-    tableData[4]['prop' + index] = item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
+    tableData[3]['prop' + index] =
+      item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
+    tableData[4]['prop' + index] =
+      item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
   })
 }
 
diff --git a/src/views/crm/statistics/performance/components/ContractPricePerformance.vue b/src/views/crm/statistics/performance/components/ContractPricePerformance.vue
index ae3c50df..7ed642b0 100644
--- a/src/views/crm/statistics/performance/components/ContractPricePerformance.vue
+++ b/src/views/crm/statistics/performance/components/ContractPricePerformance.vue
@@ -7,12 +7,18 @@
     </el-skeleton>
   </el-card>
 
-  <!-- 统计列表 -->
+  <!-- 统计列表 TODO @scholar：统计列表的展示不对 -->
   <el-card shadow="never" class="mt-16px">
     <el-table v-loading="loading" :data="tableData">
-      <el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
+      <el-table-column
+        v-for="item in columnsData"
+        :key="item.prop"
+        :label="item.label"
+        :prop="item.prop"
+        align="center"
+      >
         <template #default="scope">
-          {{scope.row[item.prop]}}
+          {{ scope.row[item.prop] }}
         </template>
       </el-table-column>
     </el-table>
@@ -23,7 +29,7 @@ import { EChartsOption } from 'echarts'
 import {
   StatisticsPerformanceApi,
   StatisticsPerformanceRespVO
-} from "@/api/crm/statistics/performance"
+} from '@/api/crm/statistics/performance'
 
 defineOptions({ name: 'ContractPricePerformance' })
 const props = defineProps<{ queryParams: any }>() // 搜索参数
@@ -86,29 +92,30 @@ const echartsOption = reactive<EChartsOption>({
       type: 'shadow'
     }
   },
-  yAxis: [{
-    type: 'value',
-    name: '金额（元）',
-    axisTick: {
-      show: false
-    },
-    axisLabel: {
-      color: '#BDBDBD',
-      formatter: '{value}'
-    },
-    /** 坐标轴轴线相关设置 */
-    axisLine: {
-      lineStyle: {
-        color: '#BDBDBD'
+  yAxis: [
+    {
+      type: 'value',
+      name: '金额（元）',
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#BDBDBD',
+        formatter: '{value}'
+      },
+      /** 坐标轴轴线相关设置 */
+      axisLine: {
+        lineStyle: {
+          color: '#BDBDBD'
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#e6e6e6'
+        }
       }
     },
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: '#e6e6e6'
-      }
-    }
-  },
     {
       type: 'value',
       name: '',
@@ -134,7 +141,8 @@ const echartsOption = reactive<EChartsOption>({
           color: '#e6e6e6'
         }
       }
-    }],
+    }
+  ],
   xAxis: {
     type: 'category',
     name: '日期',
@@ -152,9 +160,7 @@ const loadData = async () => {
 
   // 2.1 更新 Echarts 数据
   if (echartsOption.xAxis && echartsOption.xAxis['data']) {
-    echartsOption.xAxis['data'] = performanceList.map(
-      (s: StatisticsPerformanceRespVO) => s.time
-    )
+    echartsOption.xAxis['data'] = performanceList.map((s: StatisticsPerformanceRespVO) => s.time)
   }
   if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
     echartsOption.series[0]['data'] = performanceList.map(
@@ -165,43 +171,49 @@ const loadData = async () => {
     echartsOption.series[1]['data'] = performanceList.map(
       (s: StatisticsPerformanceRespVO) => s.lastMonthCount
     )
-    echartsOption.series[3]['data'] = performanceList.map(
-      (s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? (s.currentMonthCount / s.lastMonthCount*100).toFixed(2) : 'NULL'
+    echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
+      s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
     )
   }
   if (echartsOption.series && echartsOption.series[2] && echartsOption.series[2]['data']) {
     echartsOption.series[2]['data'] = performanceList.map(
       (s: StatisticsPerformanceRespVO) => s.lastYearCount
     )
-    echartsOption.series[4]['data'] = performanceList.map(
-      (s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? (s.currentMonthCount / s.lastYearCount*100).toFixed(2) : 'NULL'
+    echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
+      s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
     )
   }
 
   // 2.2 更新列表数据
   list.value = performanceList
   loading.value = false
-
 }
 
 // 初始化数据
-const columnsData = reactive([]);
-const tableData = reactive([{title: '当月合同金额统计（元）'}, {title: '上月合同金额统计（元）'}, {title: '去年当月合同金额统计（元）'},
-  {title: '同比增长率（%）'}, {title: '环比增长率（%）'}])
+const columnsData = reactive([])
+const tableData = reactive([
+  { title: '当月合同金额统计（元）' },
+  { title: '上月合同金额统计（元）' },
+  { title: '去年当月合同金额统计（元）' },
+  { title: '同比增长率（%）' },
+  { title: '环比增长率（%）' }
+])
 
 // 定义 init 方法
 const init = () => {
-  const columnObj = {label: '日期', prop: 'title'}
+  const columnObj = { label: '日期', prop: 'title' }
   columnsData.push(columnObj)
 
   list.value.forEach((item, index) => {
-    const columnObj = {label: item.time, prop: 'prop' + index}
+    const columnObj = { label: item.time, prop: 'prop' + index }
     columnsData.push(columnObj)
     tableData[0]['prop' + index] = item.currentMonthCount
     tableData[1]['prop' + index] = item.lastMonthCount
     tableData[2]['prop' + index] = item.lastYearCount
-    tableData[3]['prop' + index] = item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
-    tableData[4]['prop' + index] = item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
+    tableData[3]['prop' + index] =
+      item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
+    tableData[4]['prop' + index] =
+      item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
   })
 }
 
diff --git a/src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue b/src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue
index b4dcaa80..64d9aaa7 100644
--- a/src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue
+++ b/src/views/crm/statistics/performance/components/ReceivablePricePerformance.vue
@@ -7,12 +7,18 @@
     </el-skeleton>
   </el-card>
 
-  <!-- 统计列表 -->
+  <!-- 统计列表 TODO @scholar：统计列表的展示不对 -->
   <el-card shadow="never" class="mt-16px">
     <el-table v-loading="loading" :data="tableData">
-      <el-table-column v-for="item in columnsData" :key="item.prop" :label="item.label" :prop="item.prop" align="center">
+      <el-table-column
+        v-for="item in columnsData"
+        :key="item.prop"
+        :label="item.label"
+        :prop="item.prop"
+        align="center"
+      >
         <template #default="scope">
-          {{scope.row[item.prop]}}
+          {{ scope.row[item.prop] }}
         </template>
       </el-table-column>
     </el-table>
@@ -23,7 +29,7 @@ import { EChartsOption } from 'echarts'
 import {
   StatisticsPerformanceApi,
   StatisticsPerformanceRespVO
-} from "@/api/crm/statistics/performance"
+} from '@/api/crm/statistics/performance'
 
 defineOptions({ name: 'ContractPricePerformance' })
 const props = defineProps<{ queryParams: any }>() // 搜索参数
@@ -86,29 +92,30 @@ const echartsOption = reactive<EChartsOption>({
       type: 'shadow'
     }
   },
-  yAxis: [{
-    type: 'value',
-    name: '金额（元）',
-    axisTick: {
-      show: false
-    },
-    axisLabel: {
-      color: '#BDBDBD',
-      formatter: '{value}'
-    },
-    /** 坐标轴轴线相关设置 */
-    axisLine: {
-      lineStyle: {
-        color: '#BDBDBD'
+  yAxis: [
+    {
+      type: 'value',
+      name: '金额（元）',
+      axisTick: {
+        show: false
+      },
+      axisLabel: {
+        color: '#BDBDBD',
+        formatter: '{value}'
+      },
+      /** 坐标轴轴线相关设置 */
+      axisLine: {
+        lineStyle: {
+          color: '#BDBDBD'
+        }
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#e6e6e6'
+        }
       }
     },
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: '#e6e6e6'
-      }
-    }
-  },
     {
       type: 'value',
       name: '',
@@ -134,7 +141,8 @@ const echartsOption = reactive<EChartsOption>({
           color: '#e6e6e6'
         }
       }
-    }],
+    }
+  ],
   xAxis: {
     type: 'category',
     name: '日期',
@@ -152,9 +160,7 @@ const loadData = async () => {
 
   // 2.1 更新 Echarts 数据
   if (echartsOption.xAxis && echartsOption.xAxis['data']) {
-    echartsOption.xAxis['data'] = performanceList.map(
-      (s: StatisticsPerformanceRespVO) => s.time
-    )
+    echartsOption.xAxis['data'] = performanceList.map((s: StatisticsPerformanceRespVO) => s.time)
   }
   if (echartsOption.series && echartsOption.series[0] && echartsOption.series[0]['data']) {
     echartsOption.series[0]['data'] = performanceList.map(
@@ -165,43 +171,49 @@ const loadData = async () => {
     echartsOption.series[1]['data'] = performanceList.map(
       (s: StatisticsPerformanceRespVO) => s.lastMonthCount
     )
-    echartsOption.series[3]['data'] = performanceList.map(
-      (s: StatisticsPerformanceRespVO) => s.lastMonthCount !== 0 ? (s.currentMonthCount / s.lastMonthCount*100).toFixed(2) : 'NULL'
+    echartsOption.series[3]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
+      s.lastMonthCount !== 0 ? ((s.currentMonthCount / s.lastMonthCount) * 100).toFixed(2) : 'NULL'
     )
   }
   if (echartsOption.series && echartsOption.series[2] && echartsOption.series[1]['data']) {
     echartsOption.series[2]['data'] = performanceList.map(
       (s: StatisticsPerformanceRespVO) => s.lastYearCount
     )
-    echartsOption.series[4]['data'] = performanceList.map(
-      (s: StatisticsPerformanceRespVO) => s.lastYearCount !== 0 ? (s.currentMonthCount / s.lastYearCount*100).toFixed(2) : 'NULL'
+    echartsOption.series[4]['data'] = performanceList.map((s: StatisticsPerformanceRespVO) =>
+      s.lastYearCount !== 0 ? ((s.currentMonthCount / s.lastYearCount) * 100).toFixed(2) : 'NULL'
     )
   }
 
   // 2.2 更新列表数据
   list.value = performanceList
   loading.value = false
-
 }
 
 // 初始化数据
-const columnsData = reactive([]);
-const tableData = reactive([{title: '当月回款金额统计（元）'}, {title: '上月回款金额统计（元）'},
-  {title: '去年当月回款金额统计（元）'}, {title: '同比增长率（%）'}, {title: '环比增长率（%）'}]);
+const columnsData = reactive([])
+const tableData = reactive([
+  { title: '当月回款金额统计（元）' },
+  { title: '上月回款金额统计（元）' },
+  { title: '去年当月回款金额统计（元）' },
+  { title: '同比增长率（%）' },
+  { title: '环比增长率（%）' }
+])
 
 // 定义 init 方法
 const init = () => {
-  const columnObj = {label: '日期', prop: 'title'}
+  const columnObj = { label: '日期', prop: 'title' }
   columnsData.push(columnObj)
 
   list.value.forEach((item, index) => {
-    const columnObj = {label: item.time, prop: 'prop' + index}
+    const columnObj = { label: item.time, prop: 'prop' + index }
     columnsData.push(columnObj)
     tableData[0]['prop' + index] = item.currentMonthCount
     tableData[1]['prop' + index] = item.lastMonthCount
     tableData[2]['prop' + index] = item.lastYearCount
-    tableData[3]['prop' + index] = item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
-    tableData[4]['prop' + index] = item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
+    tableData[3]['prop' + index] =
+      item.lastYearCount !== 0 ? (item.currentMonthCount / item.lastYearCount).toFixed(2) : 'NULL'
+    tableData[4]['prop' + index] =
+      item.lastMonthCount !== 0 ? (item.currentMonthCount / item.lastMonthCount).toFixed(2) : 'NULL'
   })
 }
 
diff --git a/src/views/crm/statistics/performance/index.vue b/src/views/crm/statistics/performance/index.vue
index 8997a50c..da75aec1 100644
--- a/src/views/crm/statistics/performance/index.vue
+++ b/src/views/crm/statistics/performance/index.vue
@@ -63,7 +63,10 @@
       </el-tab-pane>
       <!-- 员工回款金额统计 -->
       <el-tab-pane label="员工回款金额统计" name="followupType" lazy>
-        <ReceivablePricePerformance :query-params="queryParams" ref="ReceivablePricePerformanceRef" />
+        <ReceivablePricePerformance
+          :query-params="queryParams"
+          ref="ReceivablePricePerformanceRef"
+        />
       </el-tab-pane>
     </el-tabs>
   </el-col>
@@ -78,11 +81,8 @@ import { defaultProps, handleTree } from '@/utils/tree'
 import ContractCountPerformance from './components/ContractCountPerformance.vue'
 import ContractPricePerformance from './components/ContractPricePerformance.vue'
 import ReceivablePricePerformance from './components/ReceivablePricePerformance.vue'
-import CustomerFollowupType from './components/CustomerFollowupType.vue'
-import CustomerConversionStat from './components/CustomerConversionStat.vue'
-import CustomerDealCycle from './components/CustomerDealCycle.vue'
 
-defineOptions({ name: 'CrmStatisticsCustomer' })
+defineOptions({ name: 'CrmStatisticsPerformance' })
 
 const queryParams = reactive({
   deptId: useUserStore().getUser.deptId,
@@ -113,7 +113,6 @@ const ContractPricePerformanceRef = ref()
 // 3.员工回款金额统计
 const ReceivablePricePerformanceRef = ref()
 
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
   switch (activeTab.value) {