✨ feat<任务管理>:合并展示-计划销售额添加列

--每月添加销售额、销售额完成率
--数据样式美化

src/views/reportManage/dataCenter/combinedDisplay/components/tableData/planInfo.vue

@@ -5,20 +5,12 @@
  * @Author: xinyan
  */
 
-import {
-  exportPlanSalesData,
-  getPlanSalesData,
-  postCreatePlanSalesData,
-  postUpdatePlanSalesData
-} from '/src/views/reportManage/dataCenter/api';
-import { planColumns } from '/src/views/reportManage/TaskManage/utils/columns';
+import { exportPlanSalesData } from '/src/views/reportManage/dataCenter/api';
 import { reactive, ref } from 'vue';
-import { VxeGridInstance } from 'vxe-table';
 import dayjs from 'dayjs';
 import Selector from '/src/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue';
-import { ElMessage, FormInstance, FormRules } from 'element-plus';
-import { dateType } from '/src/views/reportManage/TaskManage/utils/enum';
-import { exportTaskData, getPlanList } from '/src/views/reportManage/TaskManage/api';
+import { ElMessage } from 'element-plus';
+import { getPlanList } from '/src/views/reportManage/TaskManage/api';
 import { planSalesColumns } from '/@/views/reportManage/dataCenter/utils/columns';
 
 // 年份选择器
@@ -74,7 +66,6 @@ const disabledDate = (time: Date) => {
   return selectedYear > currentYear + 1;
 };
 
-
 const gridEvents = {
   pageChange({ currentPage, pageSize }) {
     if (gridOptions.pagerConfig) {
@@ -109,6 +100,7 @@ async function handleExport() {
     const response = await exportPlanSalesData({
       year_date: currentYear.value,
       task_ids: taskIds.value,
+      include_sales: 1,
     });
     const url = window.URL.createObjectURL(new Blob([response.data]));
     const link = document.createElement('a');
@@ -143,7 +135,7 @@ const cellStyle = () => {
   return {
     fontSize: '12px',
     fontWeight: '600',
-    padding:0,
+    padding: 0,
   };
 };
 
@@ -154,11 +146,11 @@ const headerCellStyle = () => {
 };
 
 const rowStyle = () => {
-  return{
-    padding:0,
+  return {
+    padding: 0,
     height: '50px',
-  }
-}
+  };
+};
 
 onMounted(() => {
   setDefaultDate();
@@ -187,7 +179,8 @@ onMounted(() => {
   </el-card>
   <el-card class="mx-8">
     <slot name="table-header"></slot>
-    <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" :row-style="rowStyle" v-bind="gridOptions"
+    <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" :row-style="rowStyle"
+              v-bind="gridOptions"
               v-on="gridEvents">
       <template #toolbar_tools>
         <div class="pr-2.5">

src/views/reportManage/dataCenter/utils/columns.ts

@@ -301,18 +301,24 @@ export const monthDataColumns = ref([
 
 // 计划销售额
 function formatEmptyCell(cellValue) {
-  if (cellValue === null || cellValue === undefined || cellValue === '') {
+  if (cellValue === null || cellValue === undefined || cellValue === '' || cellValue === 'nan') {
     return '--';
   }
-
   else {
     const formatter = new Intl.NumberFormat('en-US', {
       minimumFractionDigits: 2,
     });
     return formatter.format(cellValue);
   }
+}
 
-  // return cellValue; // 如果不是数字，返回原值
+function formatRateCell(cellValue) {
+  if (cellValue ==='nan%'){
+    return '--';
+  }
+  else {
+    return cellValue;
+  }
 }
 
 export const planSalesColumns = ref([
@@ -322,16 +328,64 @@ export const planSalesColumns = ref([
   // { field: 'brandName', title: '品牌', fixed: 'left', width: 90 ,align: 'center'},
   // { field: 'operater', title: '运营', fixed: 'left', width: 80, align: 'center' },
   ...universal,
-  { field: '1月', title: '1月计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
-  { field: '2月', title: '2月计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
-  { field: '3月', title: '3月计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
-  { field: '4月', title: '4月计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
-  { field: '5月', title: '5月计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
-  { field: '6月', title: '6月计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
-  { field: '7月', title: '7月计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
-  { field: '8月', title: '8月计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
-  { field: '9月', title: '9月计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
-  { field: '10月', title: '10月计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
-  { field: '11月', title: '11月计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
-  { field: '12月', title: '12月计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
+  {title:'1月', align: 'center', children: [
+      { field: '1月', title: '计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
+      { field: '1月', title: '销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.sales) },
+      { field: '1月', title: '销售额完成率', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatRateCell(cellValue?.sales_completion_rate) },
+    ]},
+    {title:'2月', align: 'center', children: [
+      { field: '2月', title: '计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
+      { field: '2月', title: '销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.sales) },
+      { field: '2月', title: '销售额完成率', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatRateCell(cellValue?.sales_completion_rate) },
+    ]},
+    {title:'3月', align: 'center', children: [
+      { field: '3月', title: '计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
+      { field: '3月', title: '销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.sales) },
+      { field: '3月', title: '销售额完成率', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatRateCell(cellValue?.sales_completion_rate) },
+    ]},
+    {title:'4月', align: 'center', children: [
+      { field: '4月', title: '计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
+      { field: '4月', title: '销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.sales) },
+      { field: '4月', title: '销售额完成率', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatRateCell(cellValue?.sales_completion_rate) },
+    ]},
+    {title:'5月', align: 'center', children: [
+      { field: '5月', title: '计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
+      { field: '5月', title: '销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.sales) },
+      { field: '5月', title: '销售额完成率', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatRateCell(cellValue?.sales_completion_rate) },
+    ]},
+    {title:'6月', align: 'center', children: [
+      { field: '6月', title: '计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
+      { field: '6月', title: '销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.sales) },
+      { field: '6月', title: '销售额完成率', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatRateCell(cellValue?.sales_completion_rate) },
+    ]},
+    {title:'7月', align: 'center', children: [
+      { field: '7月', title: '计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
+      { field: '7月', title: '销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.sales) },
+      { field: '7月', title: '销售额完成率', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatRateCell(cellValue?.sales_completion_rate) },
+    ]},
+    {title:'8月', align: 'center', children: [
+      { field: '8月', title: '计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
+      { field: '8月', title: '销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.sales) },
+      { field: '8月', title: '销售额完成率', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatRateCell(cellValue?.sales_completion_rate) },
+    ]},
+    {title:'9月', align: 'center', children: [
+      { field: '9月', title: '计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
+      { field: '9月', title: '销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.sales) },
+      { field: '9月', title: '销售额完成率', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatRateCell(cellValue?.sales_completion_rate) },
+    ]},
+    {title:'10月', align: 'center', children: [
+      { field: '10月', title: '计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
+      { field: '10月', title: '销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.sales) },
+      { field: '10月', title: '销售额完成率', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatRateCell(cellValue?.sales_completion_rate) },
+    ]},
+    {title:'11月', align: 'center', children: [
+      { field: '11月', title: '计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
+      { field: '11月', title: '销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.sales) },
+      { field: '11月', title: '销售额完成率', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatRateCell(cellValue?.sales_completion_rate) },
+    ]},
+    {title:'12月', align: 'center', children: [
+      { field: '12月', title: '计划销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.planSales) },
+      { field: '12月', title: '销售额', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatEmptyCell(cellValue?.sales) },
+      { field: '12月', title: '销售额完成率', minWidth: 105, align: 'center', formatter: ({ cellValue }) => formatRateCell(cellValue?.sales_completion_rate) },
+    ]}
 ])