商品管理排序和增加自定义列字段

src/views/product-manage/Columns.ts

@@ -5,7 +5,7 @@ export const ProductColumns = [
     slots: { default: 'is_monitor' }
   },
   {
-    field: 'product_info', title: '商品信息', width: 280, align: 'center', fixed: 'left',
+    field: 'product_info', title: '商品信息',  width: 'auto', align: 'center', fixed: 'left',
     slots: { default: 'product_info' }
   },
   {

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

@@ -54,9 +54,12 @@ const gridOptions: any = reactive({
   customConfig: {
     storage: true
   },
+	sortConfig: {
+		remote: true,
+	},
   toolbarConfig: {
     size: 'large',
-    // custom: true,
+    custom: true,
     slots: {
       buttons: 'toolbar_buttons',
       tools: 'toolbar_tools'
@@ -78,7 +81,7 @@ const gridOptions: any = reactive({
     icon: 'vxe-icon-indicator roll',
     text: '正在拼命加载中...'
   },
-  columns: '',
+  columns: CompetitorMonitorColumns,
   data: ''
 });
 
@@ -87,7 +90,7 @@ const checkedList = ref<Set<number>>(new Set());
 const editOpen = ref(false);
 const createOpen = ref(false);
 const rowData = ref<any>({});
-
+const ordering = ref('');
 const templateType = ref('monitor');
 
 const isShowComment = ref(false);
@@ -101,7 +104,7 @@ onMounted(() => {
   fetchList();
 });
 
-// TODO: 删除goods
+
 async function fetchList(isQuery = false) {
   // 查询操作时，重置页码
   if (isQuery) {
@@ -110,7 +113,6 @@ async function fetchList(isQuery = false) {
 
   // 清空数据和列
   gridOptions.data = [];
-  gridOptions.columns = [];
 
   const query = {
     country_code: queryParameter?.country,
@@ -123,12 +125,11 @@ async function fetchList(isQuery = false) {
     platform_number: queryParameter?.platformId,
     goods__all_ratings: queryParameter?.scoreNumber,
     goods__all_reviews: queryParameter?.commentNumber,
-    goods__all_score: queryParameter?.displayScore
+    goods__all_score: queryParameter?.displayScore,
+		ordering: ordering.value,
   };
 
   await useTableData(api.getTableData, query, gridOptions);
-  if (gridOptions && gridOptions.data?.length) await gridRef.value.loadColumn(CompetitorMonitorColumns);
-
   gridOptions.showHeader = Boolean(gridOptions.data?.length);
 }
 
@@ -152,7 +153,8 @@ async function handleDownload() {
 				platform_number: queryParameter?.platformId,
 				goods__all_ratings: queryParameter?.scoreNumber,
 				goods__all_reviews: queryParameter?.commentNumber,
-				goods__all_score: queryParameter?.displayScore
+				goods__all_score: queryParameter?.displayScore,
+				ordering: ordering.value,
 			},
 			fileName: '竞品监控数据.xlsx',
 			successMessage: () => ElMessage.success('数据导出成功！'),
@@ -245,6 +247,12 @@ const gridEvents = {
   }
 };
 
+function handleSortChange({ field, order }) {
+	const prefix = order === 'desc' ? '-' : '';
+	ordering.value = ['reviews', 'ratings', 'score'].includes(field) ? `${prefix}${field}` : `${prefix}goods__${field}`;
+	fetchList(field, order);
+}
+
 defineExpose({ fetchList });
 
 </script>
@@ -252,6 +260,7 @@ defineExpose({ fetchList });
 <template>
   <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents"
             @checkbox-change="selectChangeEvent"
+						@sort-change="handleSortChange"
             @checkbox-all="selectAllChangeEvent">
     <template #toolbar_buttons>
       <div class="flex gap-2">
@@ -302,27 +311,11 @@ defineExpose({ fetchList });
           <Refresh />
         </el-icon>
       </el-button>
-      <!--<el-popconfirm-->
-      <!--    :icon="InfoFilled"-->
-      <!--    icon-color="#626AEF"-->
-      <!--    title="是否确认导出当前时间内所有数据项?"-->
-      <!--    width="220"-->
-      <!--    @confirm="handleDownload"-->
-      <!--&gt;-->
-      <!--  <template #reference>-->
-      <el-button circle class="toolbar-btn" @click="handleDownload">
+      <el-button circle class="toolbar-btn" @click="handleDownload" style="margin-right: 12px">
         <el-icon>
           <Download />
         </el-icon>
       </el-button>
-      <!--  </template>-->
-      <!--  <template #actions="{ confirm, cancel }">-->
-      <!--    <el-button size="small" @click="cancel">No!</el-button>-->
-      <!--    <el-button size="small" type="danger" @click="confirm">-->
-      <!--      Yes?-->
-      <!--    </el-button>-->
-      <!--  </template>-->
-      <!--</el-popconfirm>-->
     </template>
     <template #top>
       <div class="mb-2"></div>

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

@@ -52,9 +52,12 @@ const gridOptions: any = reactive({
   customConfig: {
     storage: true
   },
+	sortConfig: {
+		remote: true,
+	},
   toolbarConfig: {
     size: 'large',
-    // custom: true,
+    custom: true,
     slots: {
       buttons: 'toolbar_buttons',
       tools: 'toolbar_tools'
@@ -76,7 +79,7 @@ const gridOptions: any = reactive({
     icon: 'vxe-icon-indicator roll',
     text: '正在拼命加载中...'
   },
-  columns: '',
+  columns: ProductColumns,
   data: ''
 });
 
@@ -87,7 +90,7 @@ const editOpen = ref(false);
 const rowData = ref({});
 const showError = ref(false);
 const errorMsg = ref({});
-
+const ordering = ref('');
 const dialogVisible = ref(false);
 
 const templateType = ref('notice');
@@ -106,7 +109,6 @@ async function fetchList(isQuery = false) {
   }
 
   gridOptions.data = [];
-  gridOptions.columns = [];
 
   const query = {
     country_code: queryParameter?.country,
@@ -117,11 +119,10 @@ async function fetchList(isQuery = false) {
     sku: queryParameter?.sku,
     shop: queryParameter?.shop,
     is_competitors: queryParameter?.isCompetitors,
-    platform_number: queryParameter?.platformNumber
+    platform_number: queryParameter?.platformNumber,
+		ordering: ordering.value,
   };
-
   await useTableData(api.getTableData, query, gridOptions);
-  if (gridOptions && gridOptions.data?.length) await gridRef.value.loadColumn(ProductColumns);
   gridOptions.showHeader = Boolean(gridOptions.data?.length);
 }
 
@@ -143,7 +144,8 @@ async function handleDownload() {
 				sku: queryParameter?.sku,
 				shop: queryParameter?.shop,
 				is_competitors: queryParameter?.isCompetitors,
-				platform_number: queryParameter?.platformNumber
+				platform_number: queryParameter?.platformNumber,
+				ordering: ordering.value,
 			},
 			fileName: '商品列表数据.xlsx',
 			successMessage: () => ElMessage.success('数据导出成功！'),
@@ -261,6 +263,12 @@ const gridEvents = {
   }
 };
 
+function handleSortChange({ field, order }) {
+	const prefix = order === 'desc' ? '-' : '';
+	ordering.value = `${prefix}${field}`;
+	fetchList(field, order);
+}
+
 defineExpose({ fetchList });
 </script>
 
@@ -268,6 +276,7 @@ defineExpose({ fetchList });
   <vxe-grid ref="gridRef"
             v-bind="gridOptions"
             v-on="gridEvents"
+						@sort-change="handleSortChange"
             @checkbox-change="selectChangeEvent"
             @checkbox-all="selectAllChangeEvent">
     <!-- 工具栏左侧 -->
@@ -312,7 +321,7 @@ defineExpose({ fetchList });
           <Refresh />
         </el-icon>
       </el-button>
-      <el-button circle class="toolbar-btn" @click="handleDownload">
+      <el-button circle class="toolbar-btn" @click="handleDownload" style="margin-right: 12px">
         <el-icon>
           <Download />
         </el-icon>

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

@@ -54,9 +54,12 @@ const gridOptions: any = reactive({
   customConfig: {
     storage: true
   },
+	sortConfig: {
+		remote: true,
+	},
   toolbarConfig: {
     size: 'large',
-    // custom: true,
+    custom: true,
     slots: {
       buttons: 'toolbar_buttons',
       tools: 'toolbar_tools'
@@ -78,7 +81,7 @@ const gridOptions: any = reactive({
     icon: 'vxe-icon-indicator roll',
     text: '正在拼命加载中...'
   },
-  columns: '',
+  columns: ProductMonitorColumns,
   data: ''
 });
 
@@ -88,6 +91,8 @@ const editOpen = ref(false);
 const createOpen = ref(false);
 const rowData = ref<any>({});
 
+const ordering = ref('');
+
 const templateType = ref('monitor');
 
 const isShowComment = ref(false);
@@ -102,30 +107,27 @@ onMounted(() => {
 });
 
 async function fetchList(isQuery = false) {
-  if (isQuery) {
-    gridOptions.pagerConfig.page = 1;
-  }
-
-  gridOptions.data = [];
-  gridOptions.columns = [];
-
-  const query = {
-    country_code: queryParameter?.country,
-    brand: queryParameter?.brand,
-    tag: queryParameter?.group,
-    status: queryParameter?.status,
-    shop_id: queryParameter?.shop,
-    asin: queryParameter?.asin,
-    sku: queryParameter?.sku,
-    platform_number: queryParameter?.platformId,
-    scoreNumber: queryParameter?.scoreNumber,
-    commentNumber: queryParameter?.commentNumber,
-    displayScore: queryParameter?.displayScore
-  };
-
-  await useTableData(api.getTableData, query, gridOptions);
-  if (gridOptions && gridOptions.data?.length) await gridRef.value.loadColumn(ProductMonitorColumns);
-  gridOptions.showHeader = Boolean(gridOptions.data?.length);
+	if (isQuery) {
+		gridOptions.pagerConfig.page = 1;
+	}
+	gridOptions.data = [];
+
+	const query = {
+		country_code: queryParameter?.country,
+		brand: queryParameter?.brand,
+		tag: queryParameter?.group,
+		status: queryParameter?.status,
+		shop_id: queryParameter?.shop,
+		asin: queryParameter?.asin,
+		sku: queryParameter?.sku,
+		platform_number: queryParameter?.platformId,
+		scoreNumber: queryParameter?.scoreNumber,
+		commentNumber: queryParameter?.commentNumber,
+		displayScore: queryParameter?.displayScore,
+		ordering: ordering.value,
+	};
+	await useTableData(api.getTableData, query, gridOptions);
+	gridOptions.showHeader = Boolean(gridOptions.data?.length);
 }
 
 function handleRefresh() {
@@ -148,7 +150,8 @@ async function handleDownload() {
 				platform_number: queryParameter?.platformId,
 				scoreNumber: queryParameter?.scoreNumber,
 				commentNumber: queryParameter?.commentNumber,
-				displayScore: queryParameter?.displayScore
+				displayScore: queryParameter?.displayScore,
+				ordering: ordering.value,
 			},
 			fileName: '商品监控数据.xlsx',
 			successMessage: () => ElMessage.success('数据导出成功！'),
@@ -243,11 +246,17 @@ const gridEvents = {
 
 defineExpose({ fetchList });
 
+function handleSortChange({ field, order }) {
+	const prefix = order === 'desc' ? '-' : '';
+	ordering.value = ['reviews', 'ratings', 'score'].includes(field) ? `${prefix}${field}` : `${prefix}goods__${field}`;
+	fetchList(field, order);
+}
 </script>
 
 <template>
   <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents"
             @checkbox-change="selectChangeEvent"
+						@sort-change="handleSortChange"
             @checkbox-all="selectAllChangeEvent">
     <template #toolbar_buttons>
       <div class="flex gap-2">
@@ -298,7 +307,7 @@ defineExpose({ fetchList });
           <Refresh />
         </el-icon>
       </el-button>
-      <el-button circle class="toolbar-btn" @click="handleDownload">
+      <el-button circle class="toolbar-btn" @click="handleDownload" style="margin-right: 12px">
         <el-icon>
           <Download />
         </el-icon>