feat(table): 优化表格配置并添加自定义事件处理

- 为表格设置唯一 id 和 keepSource 属性
- 添加自定义配置以启用数据存储功能
- 定义 gridEvents 以处理自定义事件
- 调整表格样式和布局
- 更新相关页面的查询条件区域样式

src/views/product-manage/competitor-monitor/component/DataTable.vue

@@ -39,6 +39,8 @@ const { tableOptions, handlePageChange } = usePagination(fetchList);
 
 const gridRef = ref();
 const gridOptions: any = reactive({
+  id: 'competitor-monitor-table',
+  keepSource: true,
   size: 'mini',
   border: false,
   round: true,
@@ -46,6 +48,9 @@ const gridOptions: any = reactive({
   showHeader: true,
   currentRowHighLight: true,
   height: '100%',
+  customConfig: {
+    storage: true,
+  },
   toolbarConfig: {
     size: 'large',
     custom: true,
@@ -202,12 +207,20 @@ function downloadTemplate() {
   // console.log('111=> ');
 }
 
+const gridEvents = {
+  custom ({ type }: any) {
+    if (type == 'confirm') {
+      fetchList();
+    }
+  }
+}
+
 defineExpose({ fetchList });
 
 </script>
 
 <template>
-  <vxe-grid ref="gridRef" v-bind="gridOptions"
+  <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents"
             @checkbox-change="selectChangeEvent"
             @checkbox-all="selectAllChangeEvent">
     <template #toolbar_buttons>

src/views/product-manage/product-list/component/DataTable.vue

@@ -35,12 +35,17 @@ const { tableOptions, handlePageChange } = usePagination(fetchList);
 
 const gridRef = ref();
 const gridOptions: any = reactive({
+  id: 'product-list-table',
+  keepSource: true,
   size: 'mini',
   border: false,
   round: true,
   stripe: true,
   currentRowHighLight: true,
   height: '100%',
+  customConfig: {
+    storage: true,
+  },
   toolbarConfig: {
     size: 'large',
     custom: true,
@@ -204,12 +209,21 @@ function downloadTemplate() {
   }
 }
 
+const gridEvents = {
+  custom ({ type }: any) {
+    if (type == 'confirm') {
+      fetchList();
+    }
+  }
+}
+
 defineExpose({ fetchList });
 </script>
 
 <template>
   <vxe-grid ref="gridRef"
             v-bind="gridOptions"
+            v-on="gridEvents"
             @checkbox-change="selectChangeEvent"
             @checkbox-all="selectAllChangeEvent">
     <!-- 工具栏左侧 -->

src/views/product-manage/product-monitor/component/DataTable.vue

@@ -39,6 +39,8 @@ const { tableOptions, handlePageChange } = usePagination(fetchList);
 
 const gridRef = ref();
 const gridOptions: any = reactive({
+  id: 'product-monitor-table',
+  keepSource: true,
   size: 'mini',
   border: false,
   round: true,
@@ -46,6 +48,9 @@ const gridOptions: any = reactive({
   showHeader: true,
   currentRowHighLight: true,
   height: '100%',
+  customConfig: {
+    storage: true,
+  },
   toolbarConfig: {
     size: 'large',
     custom: true,
@@ -198,12 +203,20 @@ function downloadTemplate() {
   // console.log('111=> ');
 }
 
+const gridEvents = {
+  custom ({ type }: any) {
+    if (type == 'confirm') {
+      fetchList();
+    }
+  }
+}
+
 defineExpose({ fetchList });
 
 </script>
 
 <template>
-  <vxe-grid ref="gridRef" v-bind="gridOptions"
+  <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents"
             @checkbox-change="selectChangeEvent"
             @checkbox-all="selectAllChangeEvent">
     <template #toolbar_buttons>

src/views/sku-manage/product-attribute/component/DataTable.vue

@@ -33,12 +33,19 @@ const { tableOptions, handlePageChange } = usePagination(fetchList);
 
 const gridRef = ref();
 const gridOptions: any = reactive({
+  id: 'product-attribute-table',
+  keepSource: true,
   size: 'small',
   border: false,
   round: true,
   stripe: true,
   currentRowHighLight: true,
   height: '100%',
+  customConfig: {
+    // mode: 'drawer',
+    // immediate: true,
+    storage: true,
+  },
   toolbarConfig: {
     size: 'large',
     custom: true,
@@ -115,11 +122,20 @@ async function singleDelete(row: any) {
 async function handleDownload() {
 }
 
+const gridEvents = {
+  custom ({ type }: any) {
+    // console.log(`点击 ${type}`)
+    if (type == 'confirm') {
+      fetchList();
+    }
+  }
+}
+
 defineExpose({ fetchList });
 </script>
 
 <template>
-  <vxe-grid ref="gridRef" v-bind="gridOptions">
+  <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents">
     <template #toolbar_buttons>
       <PermissionButton type="primary" :icon="Plus" plain round>新 增</PermissionButton>
     </template>

src/views/sku-manage/product-attribute/index.vue

@@ -41,12 +41,12 @@ function resetParameter() {
 <template>
   <div class="p-5 flex-grow">
     <el-card class="h-full" style="color: rgba(0, 0, 0, 0.88);">
-      <div ref="titleContainer" class="text-xl font-semibold pb-5">市场店铺</div>
+      <div ref="titleContainer" class="text-xl font-semibold pb-5">产品属性</div>
       <!-- 查询条件 -->
       <div ref="queryContainer" class="flex justify-between">
         <div class="flex flex-1">
           <div class="w-full whitespace-nowrap">
-            <el-row :gutter="20" style="margin-bottom: 16px;">
+            <el-row :gutter="20" style="margin-bottom: 5px;">
               <el-col :span="5">
                 <div class="flex items-center">
                   <span class="mr-2">属性名称</span>
@@ -64,7 +64,7 @@ function resetParameter() {
         </div>
         <VerticalDivider />
         <div class="flex gap-1.5 ml-5">
-          <el-button :icon="Search" :loading="btnLoading" class="mb-4" type="primary" @click="handleQuery">
+          <el-button :icon="Search" :loading="btnLoading" type="primary" @click="handleQuery">
             查 询
           </el-button>
           <el-button :icon="RefreshRight" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" @click="resetParameter">

src/views/store-manage/Columns.ts

@@ -1,7 +1,7 @@
 export const MarketStoreColumns = [
   { type: 'seq', title: 'No.', width: 60, align: 'center', fixed: 'left' },
   {
-    field: 'platform_number', title: '平台编号', minWidth: 'auto', align: 'center',fixed: 'left',
+    field: 'platform_number', title: '平台编号', minWidth: 'auto', align: 'center',
     slots: { default: 'platform_number' }
   },
   {
@@ -13,11 +13,11 @@ export const MarketStoreColumns = [
     slots: { default: 'seller' }
   },
   {
-    field: 'region', title: '站 点', minWidth: 'auto', align: 'center',
+    field: 'region', title: '站 点', width: 'auto', align: 'center',
     slots: { default: 'region' }
   },
   {
-    field: 'country_code', title: '国 家', minWidth: 'auto', align: 'center',
+    field: 'country_code', title: '国 家', width: 'auto', align: 'center',
     slots: { default: 'country_code' }
   },
   {
@@ -32,7 +32,7 @@ export const MarketStoreColumns = [
 
 export const OnlineMerchandiseColumns = [
   { type: 'seq', title: 'No.', width: 60, align: 'center', fixed: 'left', },
-  { field: 'asin', title: 'ASIN', minWidth: 'auto', align: 'center', slots: { default: 'asin' }, fixed: 'left', },
+  { field: 'asin', title: 'ASIN', minWidth: 'auto', align: 'center', slots: { default: 'asin' } },
   { field: 'sku', title: 'SKU', minWidth: 'auto', align: 'center', slots: { default: 'sku' } },
   { field: 'platform_number', title: '平台编号', minWidth: 'auto', align: 'center',
     slots: { default: 'platform_number' }

src/views/store-manage/market-store/component/DataTable.vue

@@ -24,12 +24,19 @@ const { tableOptions, handlePageChange } = usePagination(fetchList);
 
 const gridRef = ref();
 const gridOptions: any = reactive({
+  id: 'market-store-table',
+  keepSource: true,
   size: 'small',
   border: false,
   round: true,
   stripe: true,
   currentRowHighLight: true,
   height: '100%',
+  customConfig: {
+    storage: {
+      visible: true,
+    }
+  },
   toolbarConfig: {
     size: 'large',
     custom: true,

src/views/store-manage/market-store/index.vue

@@ -53,7 +53,7 @@ function resetParameter() {
       <div ref="queryContainer" class="flex justify-between">
         <div class="flex flex-1">
           <div class="w-full whitespace-nowrap">
-            <el-row :gutter="20" style="margin-bottom: 16px;">
+            <el-row :gutter="20" style="margin-bottom: 5px;">
               <el-col :span="6">
                 <div class="flex items-center">
                   <span class="mr-2">国 家</span>
@@ -82,7 +82,7 @@ function resetParameter() {
         </div>
         <VerticalDivider />
         <div class="flex gap-1.5 ml-5">
-          <el-button :icon="Search" :loading="btnLoading" class="mb-4" type="primary" @click="handleQuery">
+          <el-button :icon="Search" :loading="btnLoading" type="primary" @click="handleQuery">
             查 询
           </el-button>
           <el-button :icon="RefreshRight" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;" @click="resetParameter">

src/views/store-manage/online-merchandise/component/DataTable.vue

@@ -29,12 +29,19 @@ const { tableOptions, handlePageChange } = usePagination(fetchList);
 
 const gridRef = ref();
 const gridOptions: any = reactive({
+  id: 'online-merchandise-table',
+  keepSource: true,
   size: 'small',
   border: false,
   round: true,
   stripe: true,
   currentRowHighLight: true,
   height: '100%',
+  customConfig: {
+    storage: {
+      visible: true,
+    }
+  },
   toolbarConfig: {
     size: 'large',
     custom: true,

src/views/store-manage/online-merchandise/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 /**
  * @Name: index.vue
- * @Description: 市场店铺
+ * @Description: 在线商品
  * @Author: Cheney
  */
 
@@ -65,7 +65,7 @@ function resetParameter() {
 <template>
   <div class="p-5 flex-grow">
     <el-card class="h-full" style="color: rgba(0, 0, 0, 0.88);">
-      <div ref="titleContainer" class="text-xl font-semibold pb-5">市场店铺</div>
+      <div ref="titleContainer" class="text-xl font-semibold pb-5">在线商品</div>
       <!-- 查询条件 -->
       <div ref="queryContainer" class="flex justify-between">
         <div class="flex flex-1">
@@ -117,7 +117,7 @@ function resetParameter() {
                 </div>
               </el-col>
             </el-row>
-            <el-row :gutter="20" style="margin-bottom: 16px;">
+            <el-row :gutter="20">
               <el-col :span="6">
                 <div class="flex items-center">
                   <span class="mr-2">ASIN</span>