feat：【antd】【crm】优化 statistics 的整体代码

apps/web-antd/src/views/crm/statistics/customer/data.ts

@@ -100,9 +100,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleUserList,
-        allowClear: true,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择员工',
+        allowClear: true,
       },
     },
   ];

apps/web-antd/src/views/crm/statistics/customer/index.vue

@@ -36,8 +36,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
       ajax: {
         query: async (_, formValues) => {
           const res = await getChartDatas(activeTabName.value, formValues);
-          renderEcharts(getChartOptions(activeTabName.value, res));
+          await renderEcharts(getChartOptions(activeTabName.value, res));
-          return await getDatas(activeTabName.value, formValues);
+          return getDatas(activeTabName.value, formValues);
         },
       },
     },
@@ -51,12 +51,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUser>,
 });
 
+/** tab 切换 */
 async function handleTabChange(key: any) {
   activeTabName.value = key;
   gridApi.setGridOptions({
     columns: useGridColumns(key),
   });
-  gridApi.reload();
+  await gridApi.reload();
 }
 </script>
 

apps/web-antd/src/views/crm/statistics/funnel/index.vue

@@ -38,10 +38,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       ajax: {
         query: async ({ page }, formValues) => {
           const res = await getChartDatas(activeTabName.value, formValues);
-          renderEcharts(
+          await renderEcharts(
             getChartOptions(activeTabName.value, active.value, res),
           );
-          return await getDatas(activeTabName.value, {
+          return getDatas(activeTabName.value, {
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
@@ -59,6 +59,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<CrmStatisticsFunnelApi.BusinessSummaryByDate>,
 });
 
+/** tab 切换 */
 async function handleTabChange(key: any) {
   activeTabName.value = key;
   gridApi.setGridOptions({
@@ -67,9 +68,10 @@ async function handleTabChange(key: any) {
       enabled: activeTabName.value !== 'funnelRef',
     },
   });
-  gridApi.reload();
+  await gridApi.reload();
 }
 
+/** 视角切换 */
 function handleActive(value: boolean) {
   active.value = value;
   renderEcharts(

apps/web-antd/src/views/crm/statistics/performance/data.ts

@@ -65,9 +65,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleUserList,
-        allowClear: true,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择员工',
+        allowClear: true,
       },
     },
   ];

apps/web-antd/src/views/crm/statistics/performance/index.vue

@@ -53,6 +53,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUser>,
 });
 
+/** tab 切换 */
 async function handleTabChange(key: any) {
   activeTabName.value = key;
   const params = (await gridApi.formApi.getValues()) as any;
@@ -128,10 +129,12 @@ async function handleTabChange(key: any) {
             100
           ).toFixed(2);
   });
-  renderEcharts(getChartOptions(key, data), true);
+  await renderEcharts(getChartOptions(key, data), true);
-  gridApi.grid.reloadColumn(columnsData);
+  await gridApi.grid.reloadColumn(columnsData);
-  gridApi.grid.reloadData(tableData);
+  await gridApi.grid.reloadData(tableData);
 }
+
+/** 初始化加载 */
 onMounted(() => {
   handleTabChange(activeTabName.value);
 });

apps/web-antd/src/views/crm/statistics/portrait/data.ts

@@ -69,9 +69,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'ApiSelect',
       componentProps: {
         api: getSimpleUserList,
-        allowClear: true,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择员工',
+        allowClear: true,
       },
     },
   ];

apps/web-antd/src/views/crm/statistics/portrait/index.vue

@@ -38,8 +38,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
       ajax: {
         query: async (_, formValues) => {
           const res = await getDatas(activeTabName.value, formValues);
-          renderLeftEcharts(getChartOptions(activeTabName.value, res).left);
+          await renderLeftEcharts(getChartOptions(activeTabName.value, res).left);
-          renderRightEcharts(getChartOptions(activeTabName.value, res).right);
+          await renderRightEcharts(getChartOptions(activeTabName.value, res).right);
           return res;
         },
       },
@@ -54,12 +54,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUser>,
 });
 
+/** tab 切换 */
 async function handleTabChange(key: any) {
   activeTabName.value = key;
   gridApi.setGridOptions({
     columns: useGridColumns(key),
   });
-  gridApi.reload();
+  await gridApi.reload();
 }
 </script>
 

apps/web-antd/src/views/crm/statistics/rank/index.vue

@@ -36,7 +36,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       ajax: {
         query: async (_, formValues) => {
           const res = await getDatas(activeTabName.value, formValues);
-          renderEcharts(getChartOptions(activeTabName.value, res));
+          await renderEcharts(getChartOptions(activeTabName.value, res));
           return res;
         },
       },
@@ -51,12 +51,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<CrmStatisticsCustomerApi.CustomerSummaryByUser>,
 });
 
+/** tab 切换 */
 async function handleTabChange(key: any) {
   activeTabName.value = key;
   gridApi.setGridOptions({
     columns: useGridColumns(key),
   });
-  gridApi.reload();
+  await gridApi.reload();
 }
 </script>