✨ feat<报表管理>: 填写人自动补全；行宽调整

src/views/reportManage/dataCenter/combinedDisplay/components/DatePicker/index.vue

@@ -22,8 +22,8 @@ const dateRange = ref([
 
 const startWeek = ref(null);
 const endWeek = ref(null);
-const weekStartDate = ref<string | null>(dayjs().locale('en').subtract(5, 'week').startOf('week').format('YYYY-MM-DD'));
-const weekEndDate = ref<string | null>(dayjs().locale('en').subtract(1, 'week').endOf('week').format('YYYY-MM-DD'));
+const weekStartDate = ref<string | null>(dayjs().locale('en').subtract(1, 'week').startOf('week').format('YYYY-MM-DD'));
+const weekEndDate = ref<string | null>(dayjs().locale('en').endOf('week').format('YYYY-MM-DD'));
 const currentYear = new Date().getFullYear();
 const currentMonth = new Date().getMonth();
 const monthlyDataTime = ref([
@@ -135,9 +135,9 @@ function setDefaultDate() {
     dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD'),
     dayjs().subtract(1, 'day').endOf('day').format('YYYY-MM-DD')
   ];
-  startWeek.value = dayjs().locale('en').subtract(5, 'week').startOf('week').format('YYYY-MM-DD');
-  endWeek.value = dayjs().locale('en').subtract(1, 'week').endOf('week').format('YYYY-MM-DD');
-  const startOfMonth = new Date(new Date().getFullYear(), new Date().getMonth() - 5, 1);
+  startWeek.value = dayjs().locale('en').subtract(1, 'week').startOf('week').format('YYYY-MM-DD');
+  endWeek.value = dayjs().locale('en').endOf('week').format('YYYY-MM-DD');
+  const startOfMonth = new Date(new Date().getFullYear(), new Date().getMonth() - 2, 1);
   const endOfMonth = new Date(new Date().getFullYear(), new Date().getMonth(), 0); // 设置下个月的第一天减去1天，得到当前月的最后一天
   monthlyDataTime.value = [startOfMonth, endOfMonth];
   const formattedStartDate = dayjs(startOfMonth).format('YYYY-MM-DD');

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

@@ -343,10 +343,12 @@ const cellStyle = (row) => {
       zIndex: 30,
       fontSize: '12px',
       fontWeight: '600',
-    }}
+    };
+  }
   return {
     fontSize: '12px',
-    fontWeight: '500',
+    fontWeight: '600',
+    padding: '2px 0',
   };
 };
 
@@ -356,27 +358,30 @@ 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: '12px', backgroundColor: '#e0f2fe' };
+    return { fontSize: '12px', padding: '2px 0', backgroundColor: '#e0f2fe' };
   }
   if (monthFormat.test(columnName) && !dayDetailedFormat.test(columnName)) {
-    return { fontSize: '12px', backgroundColor: 'rgba(186,230,253,0.9)' };
+    return { fontSize: '12px', padding: '2px 0', backgroundColor: 'rgba(186,230,253,0.9)' };
   }
   if (dayFormat.test(columnName)) {
-    return { fontSize: '12px', backgroundColor: '#f0f9ff' };
+    return { fontSize: '12px', padding: '2px 0', backgroundColor: '#f0f9ff' };
   }
-  return { fontSize: '12px' };
+  return { fontSize: '12px', padding: '2px 0',};
 };
 
 const rowStyle = (row) => {
   if (row.$rowIndex === 0) {
-    return{
+    return {
       background: '#ffffff',
-      position:'sticky',
+      position: 'sticky',
       top: 0,
       zIndex: 1,
-    }
+    };
   }
-}
+  return {
+    height: '48px',
+  };
+};
 
 function formatEmptyCell({ cellValue }) {
   if (cellValue === null || cellValue === undefined || cellValue === '') {

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

@@ -155,7 +155,8 @@ function formatEmptyCell({ cellValue }) {
 const cellStyle = () => {
   return {
     fontSize: '12px',
-    fontWeight: '500',
+    fontWeight: '600',
+    padding:0,
   };
 };
 
@@ -165,6 +166,13 @@ const headerCellStyle = () => {
   };
 };
 
+const rowStyle = () => {
+  return{
+    padding:0,
+    height: '50px',
+  }
+}
+
 </script>
 
 <template>
@@ -188,7 +196,7 @@ const headerCellStyle = () => {
     </el-card>
     <el-card class="mt-3">
       <slot name="table-header"></slot>
-      <vxe-grid :cell-style="cellStyle" :header-cell-style="headerCellStyle" v-bind="gridOptions" v-on="gridEvents">
+      <vxe-grid :cell-style="cellStyle" :header-cell-style="headerCellStyle" v-bind="gridOptions" v-on="gridEvents" :row-style="rowStyle">
         <template #platformNumber_default="{ row }">
           <div class="font-semibold">{{ row.platformNumber }}</div>
         </template>

src/views/reportManage/dataCenter/normalDisplay/components/Selector/index.vue

@@ -134,28 +134,6 @@ const selectCommonGroup2 = () => {
   emitChange(); // 更新选择后的数据
 };
 
-const clearAll = () => {
-  countryList.value = [];
-  emitChange(); // 更新选择后的数据
-};
-
-//// 搜索用户
-//const searchUsers = async (query) => {
-//  if (query) {
-//    // 当输入有值时，进行过滤
-//    usersOptions.value = usersOptions.value.filter(option =>
-//        option.label.toLowerCase().includes(query.toLowerCase())
-//    );
-//  } else {
-//    await loadUsers();
-//  }
-//};
-//
-//// 加载用户选项
-//const loadUsers = async () => {
-//  await fetchUsersSelect();
-//};
-
 watch([countryList, brandNameList, usersList, platformList], () => {
   emitChange();
 });
@@ -176,44 +154,35 @@ defineExpose({ fetchFilteredData, filteredData, updateData });
     <el-input v-model="platformNameList" class="flex-item" clearable placeholder="平台名称"
               @change="emitChange"></el-input>
     <el-input v-model="operationList" class="flex-item" clearable placeholder="运营" @change="emitChange"></el-input>
-    <el-select v-model="usersList" class="flex-item" collapse-tags
-               collapse-tags-tooltip
-               multiple placeholder="填写人">
-      <el-option v-for="item in usersOptions" :key="item.value" :label="item.label" :value="item.value" />
+    <el-select
+        v-model="usersList"
+        class="flex-item"
+        multiple
+        filterable
+        clearable
+        collapse-tags
+        placeholder="填写人"
+        style="width: 300px;"
+    >
+      <el-option
+          v-for="item in usersOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+      />
     </el-select>
-    <!--<el-select-->
-    <!--    v-model="usersList"-->
-    <!--    class="flex-item"-->
-    <!--    multiple-->
-    <!--    filterable-->
-    <!--    clearable-->
-    <!--    collapse-tags-->
-    <!--    placeholder="填写人"-->
-    <!--    :filter-method="searchUsers"-->
-
-    <!--    @change="emitChange"-->
-    <!--    style="width: 300px;"-->
-    <!--&gt;-->
-    <!--  <el-option-->
-    <!--      v-for="item in usersOptions"-->
-    <!--      :key="item.value"-->
-    <!--      :label="item.label"-->
-    <!--      :value="item.value"-->
-    <!--  />-->
-    <!--</el-select>-->
-    <el-select v-model="countryList" class="flex-item" collapse-tags collapse-tags-tooltip multiple placeholder="国家">
+    <el-select v-model="countryList" class="flex-item" clearable collapse-tags collapse-tags-tooltip multiple placeholder="国家">
       <el-option v-for="item in countryOptions" :key="item" :label="item" :value="item" />
       <template #footer>
         <el-button text size="small" @click="selectCommonGroup1">美洲区</el-button>
         <el-button text size="small" @click="selectCommonGroup2">欧洲+英国</el-button>
-        <el-button text icon="Delete" type="danger" @click="clearAll"></el-button>
       </template>
     </el-select>
-    <el-select v-model="brandNameList" class="flex-item" collapse-tags collapse-tags-tooltip multiple
+    <el-select v-model="brandNameList" class="flex-item" clearable collapse-tags collapse-tags-tooltip multiple
                placeholder="品牌">
       <el-option v-for="item in brandNameOptions" :key="item" :label="item" :value="item" />
     </el-select>
-    <el-select v-model="platformList" class="flex-item" collapse-tags collapse-tags-tooltip multiple
+    <el-select v-model="platformList" class="flex-item" clearable collapse-tags collapse-tags-tooltip multiple
                placeholder="平台">
       <el-option v-for="item in platformOptions" :key="item" :label="item" :value="item" />
     </el-select>

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

@@ -40,6 +40,7 @@ const sortStatus = ref(true);
 
 const gridOptions = reactive({
   border: 'inner',
+  keepSource: true,
   height: 900,
   align: null,
   round: true,
@@ -56,6 +57,7 @@ const gridOptions = reactive({
   },
   rowConfig: {
     isHover: true,
+    height: 48
   },
   pagerConfig: {
     enabled: true,
@@ -341,6 +343,7 @@ const cellStyle = (row) => {
   return {
     fontSize: '12px',
     fontWeight: '600',
+    padding:0,
   };
 };
 
@@ -359,6 +362,10 @@ const rowStyle = (row) => {
       zIndex: 1,
     }
   }
+  return{
+    padding:0,
+    height: '50px',
+  }
 }
 
 watch([() => props.taskIds, currentDate], async ([newTaskIds, newCurrentDate]) => {
@@ -399,14 +406,11 @@ onMounted(() => {
         <el-button icon="plus" target="_blank" type="primary" @click="handleImport">数据录入</el-button>
       </template>
       <template #platformNumber_default="{ row }">
-        <div class="font-semibold">{{ row.platformNumber }}</div>
+        <div class="font-semibold" style="padding: 0">{{ row.platformNumber }}</div>
       </template>
       <template #platformName_default="{ row }">
         <div class="font-semibold" style="color: #164285">{{ row.platformName }}</div>
       </template>
-      <template #brandName_default="{ row }">
-        {{ row.brandName }}
-      </template>
     </vxe-grid>
   </div>
 </template>
@@ -422,14 +426,4 @@ onMounted(() => {
   padding-right: 0 !important;
 }
 
-.custom-btn {
-  border: 1px solid #0085ff;
-  padding: 8px
-}
-
-.custom-btn:hover {
-  background-color: #0085ff;
-  color: #a6d8fc;
-  border: 1px solid #0085ff;
-}
 </style>

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

@@ -248,7 +248,7 @@ export const universal = [
     field: 'platformName',
     title: '平台名称',
     fixed: 'left',
-    minWidth: 93,
+    minWidth: 100,
     slots: { default: 'platformName_default' },
     align: 'center',
     titlePrefix: { icon: 'vxe-icon-goods-fill' },
@@ -276,7 +276,6 @@ export const universal = [
     minWidth: 80,
     align: 'center',
     titlePrefix: { icon: 'vxe-icon-brand' },
-    slots:{default: 'brandName_default'}
   },
   //{
   //  field: 'currencyCode',