refactor(product-manage): 优化商品管理页面样式和功能, 修复商品列表表格滚动条错位问题

- 优化表格数据加载逻辑，添加查询时重置页码功能
- 统一表格组件的 fetchList 函数签名
- 优化导出数据功能，使用 useResponse 处理请求
- 调整图表布局参数
- 商品信息组件添加 ASIN 复制功能

src/views/product-manage/Columns.ts

@@ -1,15 +1,15 @@
 export const ProductColumns = [
-  { type: 'checkbox', minWidth: 50, align: 'center', fixed: 'left' },
+  { type: 'checkbox', width: 50, align: 'center', fixed: 'left' },
   {
-    field: 'is_monitor', title: '监控管理', minWidth: 90, align: 'center', fixed: 'left',
+    field: 'is_monitor', title: '监控管理', width: 90, align: 'center', fixed: 'left',
     slots: { default: 'is_monitor' }
   },
   {
-    field: 'product_info', title: '商品信息', minWidth: 240, align: 'center', fixed: 'left',
+    field: 'product_info', title: '商品信息', width: 240, align: 'center', fixed: 'left',
     slots: { default: 'product_info' }
   },
   {
-    field: 'sku', title: 'SKU', minWidth: 'auto', align: 'center', showOverflow: true,
+    field: 'sku', title: 'SKU', width: 'auto', align: 'center',
     slots: { default: 'sku' }
   },
   {
@@ -25,11 +25,11 @@ export const ProductColumns = [
     slots: { default: 'brand' }
   },
   {
-    field: 'shop_name', title: '店 铺', width: 'auto', align: 'center',
+    field: 'shop_name', title: '店 铺', minWidth: 'auto', align: 'center',
     slots: { default: 'shop_name' }
   },
   {
-    field: 'tag', title: '分 组', width: 'auto', align: 'center',
+    field: 'tag', title: '分 组', minWidth: 'auto', align: 'center',
     slots: { default: 'tag' }
   },
   {
@@ -45,19 +45,19 @@ export const ProductColumns = [
     slots: { default: 'launch_date' }
   },
   {
-    field: 'category', title: '类 目', width: 'auto', align: 'center', showOverflow: true,
+    field: 'category', title: '类 目', width: 'auto', align: 'center',
     slots: { default: 'category' }
   },
   {
-    field: 'status', title: '状 态', width: 80, align: 'center',
+    field: 'status', title: '状 态', width: 'auto', align: 'center',
     slots: { default: 'status' }
   },
   {
-    field: 'update_datetime', title: '更新时间', width: 160, align: 'center',
+    field: 'update_datetime', title: '更新时间', width: 'auto', align: 'center',
     slots: { default: 'update_datetime' }
   },
   {
-    field: 'create_datetime', title: '创建时间', width: 160, align: 'center',
+    field: 'create_datetime', title: '创建时间', width: 'auto', align: 'center',
     slots: { default: 'create_datetime' }
   },
   {
@@ -72,10 +72,6 @@ export const ProductMonitorColumns = [
     field: 'product_info', title: '商品信息', minWidth: 240, align: 'center', fixed: 'left',
     slots: { default: 'product_info' }
   },
-  // {
-  //   field: 'sku', title: 'SKU', width: 'auto', align: 'center', showOverflow: true,
-  //   slots: { default: 'sku' }
-  // },
   {
     field: 'platform_number', title: '平台编号', width: 'auto', align: 'center',
     slots: { default: 'platform_number' }
@@ -136,7 +132,6 @@ export const ProductMonitorColumns = [
     field: 'all_reviews', title: '亚马逊显示评论人数', width: 'auto', align: 'center', sortable: true,
     slots: { default: 'all_reviews' }
   },
-
   {
     field: 'launch_date', title: '上架日期', width: 'auto', align: 'center', sortable: true,
     slots: { default: 'launch_date' }
@@ -150,11 +145,11 @@ export const ProductMonitorColumns = [
     slots: { default: 'status' }
   },
   {
-    field: 'update_datetime', title: '更新时间', width: 'auto', align: 'center', showOverflow: true,
+    field: 'update_datetime', title: '更新时间', width: 'auto', align: 'center',
     slots: { default: 'update_datetime' }
   },
   {
-    field: 'create_datetime', title: '创建时间', width: 'auto', align: 'center', showOverflow: true,
+    field: 'create_datetime', title: '创建时间', width: 'auto', align: 'center',
     slots: { default: 'create_datetime' }
   },
   {

src/views/product-manage/comment-detail/component/DataTable.vue

@@ -91,7 +91,11 @@ onMounted(() => {
 });
 
 // TODO: 删除goods
-async function fetchList() {
+async function fetchList(isQuery = false) {
+  if (isQuery) {
+    gridOptions.pagerConfig.page = 1;
+  }
+  
   gridOptions.data = [];
   gridOptions.columns = [];
 
@@ -146,7 +150,7 @@ function showLabel(row: any) {
 
 async function handleQuery() {
   btnLoading.value = true;
-  await fetchList();
+  await fetchList(true);
   btnLoading.value = false;
 }
 

src/views/product-manage/comment-detail/component/NegativeClassification.vue

@@ -53,9 +53,9 @@ function updateChart() {
       trigger: 'axis'
     },
     grid: {
-      top: '12%',
+      top: '15%',
       left: '20%',
-      right: '10%',
+      right: '5%',
       bottom: '10%'
     },
     dataset: {
@@ -108,7 +108,7 @@ function updateLineChart() {
     },
     grid: {
       top: '12%',
-      left: '5%',
+      left: '10%',
       right: '10%',
       bottom: '10%'
     },

src/views/product-manage/comment-detail/component/NegativeLabel.vue

@@ -15,18 +15,15 @@ import EditLabelDialog from '/@/views/product-manage/comment-detail/component/Ed
 import { useResponse } from '/@/utils/useResponse';
 import { ElMessage } from 'element-plus';
 import { handleCopy } from '/@/utils/useCopyText';
-import * as echarts from 'echarts';
 import 'echarts-wordcloud';
 
 
 const isShowLabel = defineModel({ default: false });
 
-
 const props = defineProps({
-  rowData: <any>Object,
+  rowData: <any>Object
 });
 
-
 const { rowData } = props;
 const { tableOptions, handlePageChange } = usePagination(fetchList);
 
@@ -200,7 +197,7 @@ onMounted(() => {
     <EditLabelDialog v-if="editOpen" v-model="editOpen" :editData="editData" :rowData="rowData"
                      @refresh="fetchList"></EditLabelDialog>
   </div>
-  
+
 </template>
 
 <style scoped>

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

@@ -19,7 +19,6 @@ import EditDrawer from './EditDrawer.vue';
 import CreateDialog from '/src/views/product-manage/competitor-monitor/component/CreateDialog.vue';
 import * as api from '../api';
 import { downloadFile } from '/@/utils/service';
-import CommentDetail from '/@/views/product-manage/comment-detail/index.vue';
 import HistoricalDetail from '/@/views/product-manage/historical-detail/index.vue';
 
 
@@ -93,15 +92,25 @@ const templateType = ref('monitor');
 const isShowComment = ref(false);
 const isShowHistory = ref(false);
 
+onBeforeMount(() => {
+  gridOptions.pagerConfig.limit = 10;
+})
+
 onMounted(() => {
   fetchList();
 });
 
 // TODO: 删除goods
-async function fetchList() {
+async function fetchList(isQuery = false) {
+  // 查询操作时，重置页码
+  if (isQuery) {
+    gridOptions.pagerConfig.page = 1;
+  }
+
+  // 清空数据和列
   gridOptions.data = [];
   gridOptions.columns = [];
-
+  
   const query = {
     country_code: queryParameter?.country,
     goods__brand: queryParameter?.brand,
@@ -113,13 +122,13 @@ async function fetchList() {
     platform_number: queryParameter?.platformId,
     goods__all_ratings: queryParameter?.scoreNumber,
     goods__all_reviews: queryParameter?.commentNumber,
-    goods__all_score: queryParameter?.displayScore
+    goods__all_score: queryParameter?.displayScore,
   };
-
+  
   await useTableData(api.getTableData, query, gridOptions);
   await gridRef.value.loadColumn(CompetitorMonitorColumns);
-  gridOptions.showHeader = Boolean(gridOptions.data?.length);
 
+  gridOptions.showHeader = Boolean(gridOptions.data?.length);
 }
 
 function handleRefresh() {
@@ -207,8 +216,7 @@ function handleCreate() {
   createOpen.value = true;
 }
 
-function showComment(row: any) 
-{
+function showComment(row: any) {
   isShowComment.value = true;
   rowData.value = row;
 }
@@ -341,7 +349,6 @@ defineExpose({ fetchList });
   </vxe-grid>
   <EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" @refresh="handleRefresh" />
   <CreateDialog v-if="createOpen" v-model="createOpen" @refresh="fetchList" />
-  <!--<CommentDetail v-if="isShowComment" v-model="isShowComment" :row-data="rowData.goods" title="竞品监控" />-->
   <HistoricalDetail v-if="isShowHistory" v-model="isShowHistory" :row-data="rowData.goods" title="竞品监控" />
 </template>
 

src/views/product-manage/competitor-monitor/index.vue

@@ -69,7 +69,7 @@ const btnLoading = ref(false);
 
 async function handleQuery() {
   btnLoading.value = true;
-  await tableRef.value?.fetchList();
+  await tableRef.value?.fetchList(true);
   btnLoading.value = false;
 }
 

src/views/product-manage/component/ProductInfo.vue

@@ -1,9 +1,12 @@
-<script lang="ts" setup>
-/**
+<script lang="ts" setup>/**
  * @Name: ProductInfo.vue
  * @Description: 商品列表-商品信息插槽
  * @Author: Cheney
  */
+import { DocumentCopy } from '@element-plus/icons-vue';
+import { handleCopy } from '/@/utils/useCopyText';
+import VerticalDivider from '/@/components/VerticalDivider/index.vue';
+
 
 const props = defineProps({
   item: {
@@ -56,12 +59,16 @@ const props = defineProps({
         </el-link>
       </el-tooltip>
       <div>
-        <p>
+        <div class="flex">
           ASIN:
-          <span style="color: #1d2129;">
+          <span class="font-semibold italic" style="color: #1d2129;">
             {{ item.asin || '--' }}
           </span>
-        </p>
+          <el-button :icon="DocumentCopy" link class="ml-1 cursor-pointer" :disabled="!item.asin" @click="handleCopy(item.asin || '')">
+          </el-button>
+        </div>
+        
+        
         <el-tooltip :content="item.sku" effect="light" show-after="300" :disabled="!item.sku">
           <p class="m-0 p-0 line-clamp-1 text-ellipsis">
             SKU:

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

@@ -18,6 +18,7 @@ import VerticalDivider from '/src/components/VerticalDivider/index.vue';
 import EditDrawer from '/src/views/product-manage/product-list/component/EditDrawer.vue';
 import NoticeDialog from '/src/views/product-manage/product-list/component/NoticeDialog.vue';
 import * as api from '../api';
+import { useResponse } from '/@/utils/useResponse';
 
 
 interface Parameter {
@@ -44,7 +45,7 @@ const gridOptions: any = reactive({
   currentRowHighLight: true,
   height: '100%',
   customConfig: {
-    storage: true,
+    storage: true
   },
   toolbarConfig: {
     size: 'large',
@@ -58,7 +59,7 @@ const gridOptions: any = reactive({
     isHover: true
   },
   columnConfig: {
-    resizable: true,
+    resizable: true
   },
   pagerConfig: {
     total: tableOptions.value.total,
@@ -84,11 +85,19 @@ const dialogVisible = ref(false);
 
 const templateType = ref('notice');
 
+onBeforeMount(() => {
+  gridOptions.pagerConfig.limit = 10;
+});
+
 onMounted(() => {
   fetchList();
 });
 
-async function fetchList() {
+async function fetchList(isQuery = false) {
+  if (isQuery) {
+    gridOptions.pagerConfig.page = 1;
+  }
+
   gridOptions.data = [];
   gridOptions.columns = [];
 
@@ -112,31 +121,31 @@ function handleRefresh() {
 }
 
 async function handleDownload() {
-		gridOptions.loading = true;
-		try {
-			const query = {
-				country_code: queryParameter?.country,
-				brand: queryParameter?.brand,
-				tag: queryParameter?.group,
-				status: queryParameter?.status,
-				asin: queryParameter?.asin,
-				sku: queryParameter?.sku,
-				shop_id: queryParameter?.shop
-			};
-			const response = await api.exportData(query);
-			const url = window.URL.createObjectURL(new Blob([response.data]));
-			const link = document.createElement('a');
-			link.href = url;
-			link.setAttribute('download', '商品列表数据.xlsx');
-			document.body.appendChild(link);
-			link.click();
-			ElMessage.success('数据导出成功！');
-		} catch (error) {
-			ElMessage.error('数据导出失败，请重试！');
-			console.error(error);
-		} finally {
-			gridOptions.loading = false; // 结束加载状态
-	}
+  gridOptions.loading = true;
+  try {
+    const query = {
+      country_code: queryParameter?.country,
+      brand: queryParameter?.brand,
+      tag: queryParameter?.group,
+      status: queryParameter?.status,
+      asin: queryParameter?.asin,
+      sku: queryParameter?.sku,
+      shop_id: queryParameter?.shop
+    };
+    const response = await api.exportData(query);
+    const url = window.URL.createObjectURL(new Blob([ response.data ]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', '商品列表数据.xlsx');
+    document.body.appendChild(link);
+    link.click();
+    ElMessage.success('数据导出成功！');
+  } catch (error) {
+    ElMessage.error('数据导出失败，请重试！');
+    console.error(error);
+  } finally {
+    gridOptions.loading = false; // 结束加载状态
+  }
 }
 
 function selectChangeEvent({ checked, row }: any) {
@@ -174,10 +183,10 @@ function handleNotice(row: any) {
 async function switchMonitor(row: any) {
   const res = await useResponse(api.postMonitor, { ids: [ row.id ], status: row.is_monitor ? 1 : 0 });
   if (res && res.code === 2000) {
-    ElMessage.success('操作成功!');
+    ElMessage.success({ message: '操作成功!', plain: true });
   } else {
     row.is_monitor = !row.is_monitor;
-    ElMessage.error('操作失败!');
+    ElMessage.error({ message: '操作失败!', plain: true });
   }
 }
 
@@ -198,20 +207,20 @@ function downloadTemplate() {
     price: '/api/choice/goods/GuidancePrice/import_data/'
   };
 
-	const fileNameMap: { [key: string]: string } = {
-		notice: '商品通知模板.xlsx',
-		product: '商品模板.xlsx',
-		price: '指导价格模板.xlsx'
-	};
+  const fileNameMap: { [key: string]: string } = {
+    notice: '商品通知模板.xlsx',
+    product: '商品模板.xlsx',
+    price: '指导价格模板.xlsx'
+  };
 
   const url = urlMap[templateType.value];
-	const fileName = fileNameMap[templateType.value];
+  const fileName = fileNameMap[templateType.value];
 
   if (url) {
     downloadFile({
       url,
       method: 'GET',
-      filename: fileName,
+      filename: fileName
     });
   } else {
     console.error('未知的模板类型:', templateType.value);
@@ -219,12 +228,12 @@ function downloadTemplate() {
 }
 
 const gridEvents = {
-  custom ({ type }: any) {
+  custom({ type }: any) {
     if (type == 'confirm') {
       fetchList();
     }
   }
-}
+};
 
 defineExpose({ fetchList });
 </script>
@@ -246,8 +255,8 @@ defineExpose({ fetchList });
           <el-select v-model="templateType" style="width: 190px">
             <template #prefix>
               <div class="flex items-center">
-                <el-button size="small" text type="success"
-                           style="margin-left: -7px; font-size: 14px; border-radius: 29px;"
+                <el-button size="small" style="margin-left: -7px; font-size: 14px; border-radius: 29px;" text
+                           type="success"
                            @click.stop="downloadTemplate">下载
                 </el-button>
                 <VerticalDivider style="margin-left: 7px" />
@@ -275,32 +284,32 @@ defineExpose({ fetchList });
           <Refresh />
         </el-icon>
       </el-button>
-			<el-popconfirm
-				width="220"
-				:icon="InfoFilled"
-				icon-color="#626AEF"
-				title="是否确认导出当前时间内所有数据项?"
-				@confirm="handleDownload"
-			>
-				<template #reference>
-					<el-button circle class="mr-3 toolbar-btn">
-						<el-icon>
-							<Download />
-						</el-icon>
-					</el-button>
-				</template>
-				<template #actions="{ confirm, cancel }">
-					<el-button size="small" @click="cancel">No!</el-button>
-					<el-button
-						type="danger"
-						size="small"
-						@click="confirm"
-					>
-						Yes?
-					</el-button>
-				</template>
-			</el-popconfirm>
-		</template>
+      <el-popconfirm
+          :icon="InfoFilled"
+          icon-color="#626AEF"
+          title="是否确认导出当前时间内所有数据项?"
+          width="220"
+          @confirm="handleDownload"
+      >
+        <template #reference>
+          <el-button circle class="mr-3 toolbar-btn">
+            <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>
     </template>

src/views/product-manage/product-list/index.vue

@@ -56,7 +56,7 @@ async function fetchOptions() {
 
 async function handleQuery() {
   btnLoading.value = true;
-  await tableRef.value?.fetchList();
+  await tableRef.value?.fetchList(true);
   btnLoading.value = false;
 }
 

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

@@ -92,11 +92,19 @@ const templateType = ref('monitor');
 const isShowComment = ref(false);
 const isShowHistory = ref(false);
 
+onBeforeMount(() => {
+  gridOptions.pagerConfig.limit = 10;
+})
+
 onMounted(() => {
   fetchList();
 });
 
-async function fetchList() {
+async function fetchList(isQuery = false) {
+  if (isQuery) {
+    gridOptions.pagerConfig.page = 1;
+  }
+  
   gridOptions.data = [];
   gridOptions.columns = [];
 

src/views/product-manage/product-monitor/index.vue

@@ -60,7 +60,7 @@ const btnLoading = ref(false);
 
 async function handleQuery() {
   btnLoading.value = true;
-  await tableRef.value?.fetchList();
+  await tableRef.value?.fetchList(true);
   btnLoading.value = false;
 }
 

src/views/sku-manage/company-sku/component/DataTable.vue

@@ -77,11 +77,19 @@ const rowData = ref({});
 
 const dialogVisible = ref(false);
 
+onBeforeMount(() => {
+  gridOptions.pagerConfig.limit = 20;
+})
+
 onMounted(() => {
   fetchList();
 });
 
-async function fetchList() {
+async function fetchList(isQuery = false) {
+  if (isQuery) {
+    gridOptions.pagerConfig.page = 1;
+  }
+  
   gridOptions.data = [];
   gridOptions.columns = [];
 

src/views/sku-manage/company-sku/index.vue

@@ -46,7 +46,7 @@ async function fetchOptions() {
 
 async function handleQuery() {
   btnLoading.value = true;
-  await tableRef.value?.fetchList();
+  await tableRef.value?.fetchList(true);
   btnLoading.value = false;
 }
 

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

@@ -81,11 +81,19 @@ const rowData = ref({});
 
 const dialogVisible = ref(false);
 
+onBeforeMount(() => {
+  gridOptions.pagerConfig.limit = 20;
+})
+
 onMounted(() => {
   fetchList();
 });
 
-async function fetchList() {
+async function fetchList(isQuery = false) {
+  if (isQuery) {
+    gridOptions.pagerConfig.page = 1;
+  }
+  
   gridOptions.data = [];
   gridOptions.columns = [];
 

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

@@ -27,7 +27,7 @@ provide('query-parameter', formInline);
 
 async function handleQuery() {
   btnLoading.value = true;
-  await tableRef.value?.fetchList();
+  await tableRef.value?.fetchList(true);
   btnLoading.value = false;
 }
 

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

@@ -73,11 +73,19 @@ const rowData = ref({});
 
 const dialogVisible = ref(false);
 
+onBeforeMount(() => {
+  gridOptions.pagerConfig.limit = 20;
+})
+
 onMounted(() => {
   fetchList();
 });
 
-async function fetchList() {
+async function fetchList(isQuery = false) {
+  if (isQuery) {
+    gridOptions.pagerConfig.page = 1;
+  }
+  
   gridOptions.data = [];
   gridOptions.columns = [];
 

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

@@ -26,7 +26,7 @@ provide('query-parameter', formInline);
 
 async function handleQuery() {
   btnLoading.value = true;
-  await tableRef.value?.fetchList();
+  await tableRef.value?.fetchList(true);
   btnLoading.value = false;
 }
 

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

@@ -73,11 +73,19 @@ const rowData = ref({});
 
 const dialogVisible = ref(false);
 
+onBeforeMount(() => {
+  gridOptions.pagerConfig.limit = 20;
+})
+
 onMounted(() => {
   fetchList();
 });
 
-async function fetchList() {
+async function fetchList(isQuery = false) {
+  if (isQuery) {
+    gridOptions.pagerConfig.page = 1;
+  }
+  
   gridOptions.data = [];
   gridOptions.columns = [];
 

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

@@ -26,7 +26,7 @@ provide('query-parameter', formInline);
 
 async function handleQuery() {
   btnLoading.value = true;
-  await tableRef.value?.fetchList();
+  await tableRef.value?.fetchList(true);
   btnLoading.value = false;
 }
 

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

@@ -64,11 +64,19 @@ const gridOptions: any = reactive({
   data: ''
 });
 
+onBeforeMount(() => {
+  gridOptions.pagerConfig.limit = 20;
+})
+
 onMounted(() => {
   fetchList();
 });
 
-async function fetchList() {
+async function fetchList(isQuery = false) {
+  if (isQuery) {
+    gridOptions.pagerConfig.page = 1;
+  }
+  
   gridOptions.data = [];
   gridOptions.columns = [];
 

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

@@ -34,7 +34,7 @@ provide('query-parameter', formInline);
 
 async function handleQuery() {
   btnLoading.value = true;
-  await tableRef.value?.fetchList();
+  await tableRef.value?.fetchList(true);
   btnLoading.value = false;
 }
 

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

@@ -69,11 +69,19 @@ const gridOptions: any = reactive({
   data: ''
 });
 
+onBeforeMount(() => {
+  gridOptions.pagerConfig.limit = 20;
+})
+
 onMounted(() => {
   fetchList();
 });
 
-async function fetchList() {
+async function fetchList(isQuery = false) {
+  if (isQuery) {
+    gridOptions.pagerConfig.page = 1;
+  }
+  
   gridOptions.data = [];
   gridOptions.columns = [];
 

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

@@ -51,7 +51,7 @@ async function fetchShopOptions() {
 
 async function handleQuery() {
   btnLoading.value = true;
-  await tableRef.value?.fetchList();
+  await tableRef.value?.fetchList(true);
   btnLoading.value = false;
 }