crm：code review 公海客户分析

e8a3745b · YunaiV · 091ce903 · e8a3745b · e8a3745b · e8a3745b
Commit e8a3745b authored Apr 07, 2024 by YunaiV
7 changed files
--- a/src/views/crm/statistics/customer/components/CustomerConversionStat.vue
+++ b/src/views/crm/statistics/customer/components/CustomerConversionStat.vue
@@ -84,7 +84,7 @@ const list = ref<CrmStatisticsCustomerSummaryByDateRespVO[]>([]) // 列表的数
 const echartsOption = reactive<EChartsOption>({
  grid: {
    left: 20,
-    right: 40, // 让X轴右侧显示完整
+    right: 40, // 让 X 轴右侧显示完整
    bottom: 20,
    containLabel: true
  },
@@ -155,9 +155,8 @@ const fetchAndFill = async () => {
 const loadData = async () => {
  loading.value = true
  try {
-    fetchAndFill()
+    await fetchAndFill()
-  }
+  } finally {
-  finally {
    loading.value = false
  }
 }

--- a/src/views/crm/statistics/customer/components/CustomerDealCycle.vue
+++ b/src/views/crm/statistics/customer/components/CustomerDealCycle.vue
@@ -26,7 +26,7 @@
 import {
  StatisticsCustomerApi,
  CrmStatisticsCustomerDealCycleByDateRespVO,
-  CrmStatisticsCustomerSummaryByDateRespVO,
+  CrmStatisticsCustomerSummaryByDateRespVO
 } from '@/api/crm/statistics/customer'
 import { EChartsOption } from 'echarts'
@@ -41,7 +41,7 @@ const list = ref<CrmStatisticsCustomerDealCycleByDateRespVO[]>([]) // 列表的
 const echartsOption = reactive<EChartsOption>({
  grid: {
    left: 20,
-    right: 40, // 让X轴右侧显示完整
+    right: 40, // 让 X 轴右侧显示完整
    bottom: 20,
    containLabel: true
  },
@@ -51,13 +51,13 @@ const echartsOption = reactive<EChartsOption>({
      name: '成交周期(天)',
      type: 'bar',
      data: [],
-      yAxisIndex: 0,
+      yAxisIndex: 0
    },
    {
      name: '成交客户数',
      type: 'bar',
      data: [],
-      yAxisIndex: 1,
+      yAxisIndex: 1
    }
  ],
  toolbox: {
@@ -82,7 +82,7 @@ const echartsOption = reactive<EChartsOption>({
      type: 'value',
      name: '成交周期(天)',
      min: 0,
-      minInterval: 1, // 显示整数刻度
+      minInterval: 1 // 显示整数刻度
    },
    {
      type: 'value',
@@ -92,10 +92,10 @@ const echartsOption = reactive<EChartsOption>({
      splitLine: {
        lineStyle: {
          type: 'dotted', // 右侧网格线虚化, 减少混乱
-          opacity: 0.7,
+          opacity: 0.7
        }
      }
-    },
+    }
  ],
  xAxis: {
    type: 'category',
@@ -110,7 +110,7 @@ const fetchAndFill = async () => {
  const customerDealCycleByDate = await StatisticsCustomerApi.getCustomerDealCycleByDate(
    props.queryParams
  )
-    const customerSummaryByDate = await StatisticsCustomerApi.getCustomerSummaryByDate(
+  const customerSummaryByDate = await StatisticsCustomerApi.getCustomerSummaryByDate(
    props.queryParams
  )
  const customerDealCycleByUser = await StatisticsCustomerApi.getCustomerDealCycleByUser(
@@ -140,9 +140,8 @@ const fetchAndFill = async () => {
 const loadData = async () => {
  loading.value = true
  try {
-    fetchAndFill()
+    await fetchAndFill()
-  }
+  } finally {
-  finally {
    loading.value = false
  }
 }

--- a/src/views/crm/statistics/customer/components/CustomerFollowUpSummary.vue
+++ b/src/views/crm/statistics/customer/components/CustomerFollowUpSummary.vue
 <!-- 客户跟进次数分析 -->
 <template>
  <!-- Echarts图 -->
-  <el-card shadow="never" >
+  <el-card shadow="never">
    <el-skeleton :loading="loading" animated>
      <Echart :height="500" :options="echartsOption" />
    </el-skeleton>
@@ -28,7 +28,7 @@ import {
  CrmStatisticsFollowUpSummaryByDateRespVO,
  CrmStatisticsFollowUpSummaryByUserRespVO
 } from '@/api/crm/statistics/customer'
-import Echart from '@/components/Echart/src/Echart.vue';
+import Echart from '@/components/Echart/src/Echart.vue'
 import { EChartsOption } from 'echarts'
 defineOptions({ name: 'CustomerFollowupSummary' })
@@ -42,7 +42,7 @@ const list = ref<CrmStatisticsFollowUpSummaryByUserRespVO[]>([]) // 列表的数
 const echartsOption = reactive<EChartsOption>({
  grid: {
    left: 20,
-    right: 30, // 让X轴右侧显示完整
+    right: 30, // 让 X 轴右侧显示完整
    bottom: 20,
    containLabel: true
  },
@@ -83,7 +83,7 @@ const echartsOption = reactive<EChartsOption>({
      type: 'value',
      name: '跟进客户数',
      min: 0,
-      minInterval: 1, // 显示整数刻度
+      minInterval: 1 // 显示整数刻度
    },
    {
      type: 'value',
@@ -93,7 +93,7 @@ const echartsOption = reactive<EChartsOption>({
      splitLine: {
        lineStyle: {
          type: 'dotted', // 右侧网格线虚化, 减少混乱
-          opacity: 0.7,
+          opacity: 0.7
        }
      }
    }
@@ -142,9 +142,8 @@ const fetchAndFill = async () => {
 const loadData = async () => {
  loading.value = true
  try {
-    fetchAndFill()
+    await fetchAndFill()
-  }
+  } finally {
-  finally {
    loading.value = false
  }
 }

--- a/src/views/crm/statistics/customer/components/CustomerFollowUpType.vue
+++ b/src/views/crm/statistics/customer/components/CustomerFollowUpType.vue
@@ -105,9 +105,8 @@ const fetchAndFill = async () => {
 const loadData = async () => {
  loading.value = true
  try {
-    fetchAndFill()
+    await fetchAndFill()
-  }
+  } finally {
-  finally {
    loading.value = false
  }
 }

--- a/src/views/crm/statistics/customer/components/PoolSummary.vue
+++ b/src/views/crm/statistics/customer/components/PoolSummary.vue
@@ -12,8 +12,18 @@
    <el-table v-loading="loading" :data="list">
      <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" prop="customerPutCount" min-width="200" />
+      <el-table-column
-      <el-table-column label="公海领取客户数" align="right" prop="customerTakeCount" min-width="200" />
+        label="进入公海客户数"
+        align="right"
+        prop="customerPutCount"
+        min-width="200"
+      />
+      <el-table-column
+        label="公海领取客户数"
+        align="right"
+        prop="customerTakeCount"
+        min-width="200"
+      />
    </el-table>
  </el-card>
 </template>
@@ -25,7 +35,7 @@ import {
 } from '@/api/crm/statistics/customer'
 import { EChartsOption } from 'echarts'
-defineOptions({ name: 'CustomerSummary' })
+defineOptions({ name: 'CustomerPoolSummary' })
 const props = defineProps<{ queryParams: any }>() // 搜索参数
@@ -36,7 +46,7 @@ const list = ref<CrmStatisticsPoolSummaryByUserRespVO[]>([]) // 列表的数据
 const echartsOption = reactive<EChartsOption>({
  grid: {
    left: 20,
-    right: 40, // 让X轴右侧显示完整
+    right: 40, // 让 X 轴右侧显示完整
    bottom: 20,
    containLabel: true
  },
@@ -77,7 +87,7 @@ const echartsOption = reactive<EChartsOption>({
      type: 'value',
      name: '进入公海客户数',
      min: 0,
-      minInterval: 1, // 显示整数刻度
+      minInterval: 1 // 显示整数刻度
    },
    {
      type: 'value',
@@ -87,7 +97,7 @@ const echartsOption = reactive<EChartsOption>({
      splitLine: {
        lineStyle: {
          type: 'dotted', // 右侧网格线虚化, 减少混乱
-          opacity: 0.7,
+          opacity: 0.7
        }
      }
    }
@@ -95,19 +105,15 @@ const echartsOption = reactive<EChartsOption>({
  xAxis: {
    type: 'category',
    name: '日期',
-    data: [],
+    data: []
  }
 }) as EChartsOption
 /** 获取数据并填充图表 */
 const fetchAndFill = async () => {
  // 1. 加载统计数据
-  const poolSummaryByDate = await StatisticsCustomerApi.getPoolSummaryByDate(
+  const poolSummaryByDate = await StatisticsCustomerApi.getPoolSummaryByDate(props.queryParams)
-    props.queryParams
+  const poolSummaryByUser = await StatisticsCustomerApi.getPoolSummaryByUser(props.queryParams)
-  )
-  const poolSummaryByUser = await StatisticsCustomerApi.getPoolSummaryByUser(
-    props.queryParams
-  )
  // 2.1 更新 Echarts 数据
  if (echartsOption.xAxis && echartsOption.xAxis['data']) {
    echartsOption.xAxis['data'] = poolSummaryByDate.map(
@@ -133,7 +139,7 @@ const fetchAndFill = async () => {
 const loadData = async () => {
  loading.value = true
  try {
-    fetchAndFill()
+    await fetchAndFill()
  } finally {
    loading.value = false
  }

--- a/src/views/crm/statistics/customer/components/CustomerSummary.vue
+++ b/src/views/crm/statistics/customer/components/CustomerSummary.vue
@@ -71,7 +71,7 @@ const list = ref<CrmStatisticsCustomerSummaryByUserRespVO[]>([]) // 列表的数
 const echartsOption = reactive<EChartsOption>({
  grid: {
    left: 20,
-    right: 30, // 让X轴右侧显示完整
+    right: 30, // 让 X 轴右侧显示完整
    bottom: 20,
    containLabel: true
  },
@@ -112,7 +112,7 @@ const echartsOption = reactive<EChartsOption>({
      type: 'value',
      name: '新增客户数',
      min: 0,
-      minInterval: 1, // 显示整数刻度
+      minInterval: 1 // 显示整数刻度
    },
    {
      type: 'value',
@@ -122,7 +122,7 @@ const echartsOption = reactive<EChartsOption>({
      splitLine: {
        lineStyle: {
          type: 'dotted', // 右侧网格线虚化, 减少混乱
-          opacity: 0.7,
+          opacity: 0.7
        }
      }
    }
@@ -130,7 +130,7 @@ const echartsOption = reactive<EChartsOption>({
  xAxis: {
    type: 'category',
    name: '日期',
-    data: [],
+    data: []
  }
 }) as EChartsOption
@@ -168,7 +168,7 @@ const fetchAndFill = async () => {
 const loadData = async () => {
  loading.value = true
  try {
-    fetchAndFill()
+    await fetchAndFill()
  } finally {
    loading.value = false
  }

--- a/src/views/crm/statistics/customer/index.vue
+++ b/src/views/crm/statistics/customer/index.vue
@@ -46,8 +46,7 @@
          class="!w-240px"
          node-key="id"
          placeholder="请选择归属部门"
-          @change="queryParams.userId = undefined;handleQuery()
+          @change="(queryParams.userId = undefined), handleQuery()"
-          "
        />
      </el-form-item>
      <el-form-item label="员工" prop="userId">
@@ -100,7 +99,7 @@
      </el-tab-pane>
      <!-- 公海客户分析 -->
      <el-tab-pane label="公海客户分析" lazy name="poolSummary">
-        <PoolSummary ref="poolSummaryRef" :query-params="queryParams" />
+        <CustomerPoolSummary ref="customerPoolSummaryRef" :query-params="queryParams" />
      </el-tab-pane>
      <!-- 成交周期分析 -->
      <el-tab-pane label="成交周期分析" lazy name="dealCycle">
@@ -122,7 +121,7 @@ import CustomerDealCycle from './components/CustomerDealCycle.vue'
 import CustomerFollowUpSummary from './components/CustomerFollowUpSummary.vue'
 import CustomerFollowUpType from './components/CustomerFollowUpType.vue'
 import CustomerSummary from './components/CustomerSummary.vue'
-import PoolSummary from './components/PoolSummary.vue'
+import CustomerPoolSummary from './components/CustomerPoolSummary.vue'
 defineOptions({ name: 'CrmStatisticsCustomer' })
@@ -153,7 +152,7 @@ const customerSummaryRef = ref() // 1. 客户总量分析
 const followUpSummaryRef = ref() // 2. 客户跟进次数分析
 const followUpTypeRef = ref() // 3. 客户跟进方式分析
 const conversionStatRef = ref() // 4. 客户转化率分析
-const poolSummaryRef = ref() // 5. 客户公海分析
+const customerPoolSummaryRef = ref() // 5. 客户公海分析
 const dealCycleRef = ref() // 6. 成交周期分析
 /** 搜索按钮操作 */
@@ -172,7 +171,7 @@ const handleQuery = () => {
      conversionStatRef.value?.loadData?.()
      break
    case 'poolSummary': // 公海客户分析
-      poolSummaryRef.value?.loadData?.()
+      customerPoolSummaryRef.value?.loadData?.()
      break
    case 'dealCycle': // 成交周期分析
      dealCycleRef.value?.loadData?.()