🎨 perf<数据中心>: 表格修改

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

@@ -155,15 +155,15 @@ const cellStyleHandler = ({column}) => {
   const dayDetailedFormat = /\d{4}-\d{2}-\d{2}/;
   const monthFormat = /\d{4}-\d{2}/;
   if (columnName.includes('~') || columnName.includes('截止') || columnName.includes('近90天平台退货率') || columnName.includes('余额')) {
-    return {fontSize: '13px', backgroundColor: '#b3ced7'};
+    return {fontSize: '12px', backgroundColor: '#b3ced7'};
   }
   if (monthFormat.test(columnName) && !dayDetailedFormat.test(columnName)) {
-    return {fontSize: '13px', backgroundColor: '#8cbacc'};
+    return {fontSize: '12px', backgroundColor: '#8cbacc'};
   }
   if (dayFormat.test(columnName)) {
-    return {fontSize: '13px', backgroundColor: '#d0dadf'};
+    return {fontSize: '12px', backgroundColor: '#d0dadf'};
   }
-  return {fontSize: '13px'};
+  return {fontSize: '12px'};
 };
 
 // 加载数据
@@ -216,6 +216,15 @@ function formatEmptyCell({cellValue}) {
         <vxe-button circle icon="vxe-icon-download" @click="handleExport"></vxe-button>
       </div>
     </template>
+    <template #platformNumber_default="{ row }">
+      <div class="font-semibold">{{ row.platformNumber}}</div>
+    </template>
+    <template #platformName_default="{ row }">
+      <div class="font-semibold" style="color: #0097f8">{{ row.platformName}}</div>
+    </template>
+    <template #currencyCode_default="{ row }">
+      <el-tag color="#fef9c3" style="color: #f59e0b; border-color: #fbbf24;">{{ row.currencyCode}}</el-tag>
+    </template>
   </vxe-grid>
 </template>
 

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

@@ -85,7 +85,9 @@ async function fetchMonthlyData(taskIds) {
           dynamicColumns.push({
             field: key,
             title: key,
-            minWidth: 90,
+            minWidth: 97,
+            align: 'center',
+            formatter: formatEmptyCell,
           });
         }
       }
@@ -109,6 +111,22 @@ watch(() => props.taskIds, (newTaskIds) => {
   fetchMonthlyData(newTaskIds);
 });
 
+function formatEmptyCell({ cellValue }) {
+  return cellValue === null || cellValue === undefined || cellValue === '' ? '--' : cellValue;
+}
+
+const cellStyle =() => {
+  return {
+    fontSize: '12px',
+    fontWeight: '500',
+  };
+}
+
+const headerCellStyle =() => {
+  return {
+    fontSize: '12px', // 调整为你想要的字体大小
+  };
+}
 
 onMounted(() => {
 
@@ -116,7 +134,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <vxe-grid v-bind="gridOptions" v-on="gridEvents">
+  <vxe-grid v-bind="gridOptions" v-on="gridEvents" :header-cell-style="headerCellStyle" :cell-style="cellStyle">
     <template #platformNumber_default="{ row }">
       <div class="font-semibold">{{ row.platformNumber}}</div>
     </template>
@@ -124,16 +142,15 @@ onMounted(() => {
       <div class="font-semibold" style="color: #0097f8">{{ row.platformName}}</div>
     </template>
     <template #currencyCode_default="{ row }">
-      <!--<div style="color: #f3cd9a">{{ row.currencyCode}}</div>-->
       <el-tag color="#fef9c3" style="color: #f59e0b; border-color: #fbbf24;">{{ row.currencyCode}}</el-tag>
     </template>
   </vxe-grid>
 </template>
 
 <style scoped>
-:deep(.vxe-table--header .vxe-header--row th .vxe-cell,
-.vxe-table--body .vxe-body--row td .vxe-cell) {
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-}
+/* :deep(.vxe-table--header .vxe-header--row th .vxe-cell, */
+/* .vxe-table--body .vxe-body--row td .vxe-cell) { */
+/*   padding-left: 0 !important; */
+/*   padding-right: 0 !important; */
+/* } */
 </style>

src/views/reportManage/dataCenter/normalDisplay/components/TableDataDisplay.vue

@@ -123,7 +123,7 @@ async function fetchData(taskIds, apiFunc, startDate, endDate, dataColumns, date
           dynamicColumns.push({
             field: key,
             title: key,
-            width: key.includes('~') ? 101 : /\d{4}-\d{2}-\d{2}的/.test(key) ? 88 : 78,
+            minWidth: key.includes('~') ? 101 : /\d{4}-\d{2}-\d{2}的/.test(key) ? 88 : 78,
             align: 'center',
             formatter: formatEmptyCell,
           });
@@ -213,7 +213,6 @@ onMounted(() => {
         <div class="font-semibold" style="color: #0097f8">{{ row.platformName}}</div>
       </template>
       <template #currencyCode_default="{ row }">
-        <!--<div style="color: #f3cd9a">{{ row.currencyCode}}</div>-->
         <el-tag color="#fef9c3" style="color: #f59e0b; border-color: #fbbf24;">{{ row.currencyCode}}</el-tag>
       </template>
     </vxe-grid>

src/views/reportManage/dataCenter/normalDisplay/components/TableDataEntry.vue

@@ -28,8 +28,8 @@ const taskIds = ref({});
 const dailySalesTime = ref(dayjs().subtract(1, 'day').format('YYYY-MM-DD'));
 
 const weeklyEntryTime = ref(null);
-// const weeklySalesTime = ref(null);
 const weeklyAdTime = ref(null);
+let initialLoad = true;
 
 const entryStartDate = ref('');
 const entryEndDate = ref('');
@@ -76,13 +76,13 @@ const handleWeekChange = () => {
     adStartDate.value = adDate.startOf('week').format('YYYY-MM-DD');
     adEndDate.value = adDate.endOf('week').format('YYYY-MM-DD');
   }
+  if (initialLoad) {
+    initialLoad = false; // 只在初次加载时避免多次调用
+  } else {
+    fetchCurrentTaskData();
+  }
 };
 
-watch(() => weeklyEntryTime.value, () => {
-  handleWeekChange();
-  fetchCurrentTaskData();
-});
-
 const handleMonthChange = (value) => {
   if (value) {
     const date = new Date(value);
@@ -229,7 +229,7 @@ const gridOptions = reactive({
   round: true,
   loading: false,
   showHeaderOverflow: true,
-  showOverflow: true,
+  //showOverflow: true,
   columnConfig: {
     resizable: true
   },
@@ -764,7 +764,7 @@ onMounted(() => {
   </div>
   <el-card class="mx-8">
     <div style="position: relative">
-      <vxe-grid ref="xGrid" v-bind="currentGridOptions" v-on="gridEvents" stripe>
+      <vxe-grid ref="xGrid" stripe v-bind="currentGridOptions" v-on="gridEvents">
         <template #operate="{ row }">
           <template v-if="hasActiveEditRow(row)">
             <el-button link size="small" @click="clearRowEvent(row)">取消</el-button>
@@ -823,7 +823,7 @@ onMounted(() => {
       </vxe-grid>
     </div>
   </el-card>
-  <el-dialog v-model="dayFormVisible" title="创建任务" width="600">
+  <el-dialog v-model="dayFormVisible" style="border-radius: 10px;" title="创建任务" width="600">
     <el-form
         ref="taskDataFormRef"
         :model="taskDataForm"
@@ -832,7 +832,7 @@ onMounted(() => {
         label-position="top"
         label-width="auto"
         status-icon
-        style="max-width: 600px;border-radius: 10px;">
+        style="max-width: 600px;">
       <div v-if="dateType === 'day'">
         <el-form-item v-for="item in filteredDayColumns" :key="item.field" :label="item.title" :prop="item.field">
           <el-input v-model="taskDataForm[item.field]" :placeholder="`请输入${item.title}`" />

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

@@ -15,7 +15,7 @@ export const dayColumns = ref([
         title: '销售额(本币)',
         editRender: {},
         slots: {edit: 'sales_original_edit'},
-        width: 122,
+        width: 123,
         align: 'center'
       },
     ]
@@ -51,12 +51,12 @@ export const dayColumns = ref([
 ]);
 
 export const weekColumns = ref([
-  {field: 'platformNumber', title: '平台编号', fixed: 'left', width: 90},
-  {field: 'platformName', title: '平台名称', fixed: 'left', width: 90},
-  {field: 'country', title: '国家', fixed: 'left', width: 90},
-  {field: 'brandName', title: '品牌', fixed: 'left', width: 90},
-  {field: 'user_name', title: '运营', fixed: 'left', width: 90},
-  {field: 'currencyCode', title: '回款币种', fixed: 'left', width: 111},
+  {field: 'platformNumber', title: '平台编号', fixed: 'left', width: 81,align: 'center'},
+  {field: 'platformName', title: '平台名称', fixed: 'left', width: 142,align: 'center'},
+  {field: 'country', title: '国家', fixed: 'left', width: 80,align: 'center'},
+  {field: 'brandName', title: '品牌', fixed: 'left', width: 60},
+  {field: 'user_name', title: '运营', fixed: 'left', width: 80,align: 'center'},
+  {field: 'currencyCode', title: '回款币种', fixed: 'left', width: 80,align: 'center'},
 
   {
     title: '销售额', align: 'center', children: [
@@ -66,7 +66,7 @@ export const weekColumns = ref([
         title: '销售额(本币)',
         editRender: {},
         slots: {edit: 'sales_original_edit'},
-        width: 122,
+        width: 123,
       },
     ]
   },
@@ -162,7 +162,7 @@ export const monthColumns = ref([
         title: '销售额(本币)',
         editRender: {},
         slots: {edit: 'sales_original_edit'},
-        width: 122,
+        width: 123,
       },
     ]
   },