feat(table): 为表格组件添加空数据占位符

- 在多个表格组件中添加了 #empty 插槽，用于显示空数据时的占位符
- 使用 Element Plus 的 ElEmpty 组件来展示"暂无数据"的提示
- 优化了表格组件的结构，提高了用户体验

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

@@ -255,6 +255,9 @@ defineExpose({ fetchList });
           @page-change="handlePageChange"
       />
     </template>
+    <template #empty>
+      <el-empty description="暂无数据" />
+    </template>
     <!-- 自定义列插槽 -->
     <template v-for="col in CompetitorMonitorCommentColumns" #[`${col.field}`]="{ row }">
       <DataTableSlot :key="row.id" :field="col.field" :row="row" @open-negativeLabel="showLabel" />

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

@@ -330,6 +330,9 @@ defineExpose({ fetchList });
           @page-change="handlePageChange"
       />
     </template>
+    <template #empty>
+      <el-empty description="暂无数据" />
+    </template>
     <!-- 自定义列插槽 -->
     <template v-for="col in CompetitorMonitorColumns" #[`${col.field}`]="{ row }">
       <DataTableSlot :key="row.id" :field="col.field" :row="row" @edit-row="handleEdit" @handle-delete="singleDelete"

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

@@ -71,7 +71,7 @@ onMounted(() => {
   setTimeout(() => {
     
   fetchList();
-  }, 500)
+  }, 300)
 })
 
 async function fetchList() {
@@ -87,10 +87,6 @@ async function fetchList() {
   await gridRef.value.loadColumn(HistoricalColumns);
   gridOptions.showHeader = Boolean(gridOptions.data?.length);
 }
-
-function handleRefresh() {
-  fetchList();
-}
 </script>
 
 <template>
@@ -100,6 +96,9 @@ function handleRefresh() {
       <template #top>
         <div class="mb-2"></div>
       </template>
+      <template #empty>
+        <el-empty description="暂无数据" />
+      </template>
       <!-- 分页 -->
       <template #pager>
         <vxe-pager

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

@@ -314,6 +314,9 @@ defineExpose({ fetchList });
           @page-change="handlePageChange"
       />
     </template>
+    <template #empty>
+      <el-empty description="暂无数据" />
+    </template>
     <!-- 自定义列插槽 -->
     <template v-for="col in ProductColumns" #[`${col.field}`]="{ row }">
       <DataTableSlot :key="row.id" :field="col.field" :row="row" @edit-row="handleEdit" @handle-notice="handleNotice"

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

@@ -18,7 +18,6 @@ import VerticalDivider from '/src/components/VerticalDivider/index.vue';
 import ImportButton from '/src/components/ImportButton/index.vue';
 import EditDrawer from './EditDrawer.vue';
 import CreateDialog from '/src/views/product-manage/product-monitor/component/CreateDialog.vue';
-import CommentDetail from '/src/views/product-manage/comment-detail/index.vue';
 import * as api from '../api';
 import HistoricalDetail from '/@/views/product-manage/historical-detail/index.vue';
 
@@ -331,6 +330,9 @@ defineExpose({ fetchList });
           @page-change="handlePageChange"
       />
     </template>
+    <template #empty>
+      <el-empty description="暂无数据" />
+    </template>
     <!-- 自定义列插槽 -->
     <template v-for="col in ProductMonitorColumns" #[`${col.field}`]="{ row }">
       <DataTableSlot :key="row.id" :field="col.field" :row="row" @edit-row="handleEdit" @handle-delete="singleDelete"
@@ -339,7 +341,7 @@ 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" />
-  <HistoricalDetail v-if="isShowHistory" v-model="isShowHistory" :row-data="rowData.goods" title="商品监控"  />
+  <HistoricalDetail v-if="isShowHistory" v-model="isShowHistory" :row-data="rowData.goods" title="商品监控" />
 </template>
 
 <style scoped>

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

@@ -89,7 +89,7 @@ async function fetchList() {
     brand: queryParameter?.brandName,
     kind: queryParameter?.kind,
     status: queryParameter?.status,
-    sku__contains: queryParameter?.sku,
+    sku__contains: queryParameter?.sku
   };
 
   await useTableData(api.getTableData, query, gridOptions);
@@ -151,6 +151,9 @@ defineExpose({ fetchList });
           class="mt-1.5"
           @page-change="handlePageChange"
       />
+      <template #empty>
+        <el-empty description="暂无数据" />
+      </template>
     </template>
     <!-- 自定义列插槽 -->
     <template v-for="col in CompanySkuColumns" #[`${col.field}`]="{ row }">

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

@@ -6,7 +6,7 @@
  */
 
 import { ElMessage } from 'element-plus';
-import { Download, InfoFilled, Refresh, Plus } from '@element-plus/icons-vue';
+import { Plus, Refresh } from '@element-plus/icons-vue';
 import { usePagination } from '/@/utils/usePagination';
 import { useTableData } from '/@/utils/useTableData';
 import { useResponse } from '/@/utils/useResponse';
@@ -45,7 +45,7 @@ const gridOptions: any = reactive({
   customConfig: {
     // mode: 'drawer',
     // immediate: true,
-    storage: true,
+    storage: true
   },
   toolbarConfig: {
     size: 'large',
@@ -114,7 +114,7 @@ function handleEdit(row: any) {
 }
 
 function handleCreate() {
-	createOpen.value = true;
+  createOpen.value = true;
 }
 
 async function singleDelete(row: any) {
@@ -126,13 +126,13 @@ async function singleDelete(row: any) {
 }
 
 const gridEvents = {
-  custom ({ type }: any) {
+  custom({ type }: any) {
     // console.log(`点击 ${type}`)
     if (type == 'confirm') {
       fetchList();
     }
   }
-}
+};
 
 defineExpose({ fetchList });
 </script>
@@ -140,7 +140,7 @@ defineExpose({ fetchList });
 <template>
   <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents">
     <template #toolbar_buttons>
-      <PermissionButton type="primary" :icon="Plus" plain round @click="handleCreate">新 增</PermissionButton>
+      <PermissionButton :icon="Plus" plain round type="primary" @click="handleCreate">新 增</PermissionButton>
     </template>
     <!-- 工具栏右侧 -->
     <template #toolbar_tools>
@@ -159,6 +159,9 @@ defineExpose({ fetchList });
           @page-change="handlePageChange"
       />
     </template>
+    <template #empty>
+      <el-empty description="暂无数据" />
+    </template>
     <!-- 自定义列插槽 -->
     <template v-for="col in AttributeColumns" #[`${col.field}`]="{ row }">
       <DataTableSlot :key="row.id" :field="col.field" :row="row" @edit-row="handleEdit" @handle-delete="singleDelete" />
@@ -166,7 +169,7 @@ defineExpose({ fetchList });
   </vxe-grid>
   <EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" @refresh="handleRefresh" />
   <NoticeDialog v-if="dialogVisible" v-model="dialogVisible" :row-data="rowData" />
-	<CreateDialog v-if="createOpen" v-model="createOpen" @refresh="fetchList" />
+  <CreateDialog v-if="createOpen" v-model="createOpen" @refresh="fetchList" />
 </template>
 
 <style scoped>

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

@@ -6,7 +6,7 @@
  */
 
 import { ElMessage } from 'element-plus';
-import { Download, InfoFilled, Refresh, Plus } from '@element-plus/icons-vue';
+import { Plus, Refresh } from '@element-plus/icons-vue';
 import { usePagination } from '/@/utils/usePagination';
 import { useTableData } from '/@/utils/useTableData';
 import { useResponse } from '/@/utils/useResponse';
@@ -37,7 +37,7 @@ const gridOptions: any = reactive({
   currentRowHighLight: true,
   height: '100%',
   customConfig: {
-    storage: true,
+    storage: true
   },
   toolbarConfig: {
     size: 'large',
@@ -82,7 +82,7 @@ async function fetchList() {
   gridOptions.columns = [];
 
   const query = {
-    brand_name: queryParameter?.name,
+    brand_name: queryParameter?.name
   };
 
   await useTableData(api.getTableData, query, gridOptions);
@@ -100,7 +100,7 @@ function handleEdit(row: any) {
 }
 
 function handleCreate() {
-	createOpen.value = true;
+  createOpen.value = true;
 }
 
 async function singleDelete(row: any) {
@@ -112,13 +112,13 @@ async function singleDelete(row: any) {
 }
 
 const gridEvents = {
-  custom ({ type }: any) {
+  custom({ type }: any) {
     // console.log(`点击 ${type}`)
     if (type == 'confirm') {
       fetchList();
     }
   }
-}
+};
 
 defineExpose({ fetchList });
 </script>
@@ -126,7 +126,7 @@ defineExpose({ fetchList });
 <template>
   <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents">
     <template #toolbar_buttons>
-      <PermissionButton type="primary" :icon="Plus" plain round @click="handleCreate">新 增</PermissionButton>
+      <PermissionButton :icon="Plus" plain round type="primary" @click="handleCreate">新 增</PermissionButton>
     </template>
     <!-- 工具栏右侧 -->
     <template #toolbar_tools>
@@ -145,6 +145,9 @@ defineExpose({ fetchList });
           @page-change="handlePageChange"
       />
     </template>
+    <template #empty>
+      <el-empty description="暂无数据" />
+    </template>
     <!-- 自定义列插槽 -->
     <template v-for="col in ProductBrandColumns" #[`${col.field}`]="{ row }">
       <DataTableSlot :key="row.id" :field="col.field" :row="row" @edit-row="handleEdit" @handle-delete="singleDelete" />
@@ -152,7 +155,7 @@ defineExpose({ fetchList });
   </vxe-grid>
   <EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" @refresh="handleRefresh" />
   <NoticeDialog v-if="dialogVisible" v-model="dialogVisible" :row-data="rowData" />
-	<CreateDialog v-if="createOpen" v-model="createOpen" @refresh="fetchList" />
+  <CreateDialog v-if="createOpen" v-model="createOpen" @refresh="fetchList" />
 </template>
 
 <style scoped>

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

@@ -6,7 +6,7 @@
  */
 
 import { ElMessage } from 'element-plus';
-import { Download, InfoFilled, Plus, Refresh } from '@element-plus/icons-vue';
+import { Plus, Refresh } from '@element-plus/icons-vue';
 import { usePagination } from '/@/utils/usePagination';
 import { useTableData } from '/@/utils/useTableData';
 import { useResponse } from '/@/utils/useResponse';
@@ -18,8 +18,9 @@ import NoticeDialog from '/src/views/product-manage/product-list/component/Notic
 import * as api from '../api';
 import CreateDialog from '/@/views/sku-manage/product-category/component/CreateDialog.vue';
 
+
 interface Parameter {
-	name: string;
+  name: string;
 }
 
 const queryParameter: Parameter | undefined = inject('query-parameter');
@@ -27,43 +28,43 @@ 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: {
-		storage: true,
-	},
-	toolbarConfig: {
-		size: 'large',
-		custom: true,
-		slots: {
-			tools: 'toolbar_tools',
-			buttons: 'toolbar_buttons',
-		},
-	},
-	rowConfig: {
-		isHover: true,
-	},
-	columnConfig: {
-		resizable: true,
-	},
-	pagerConfig: {
-		total: tableOptions.value.total,
-		page: tableOptions.value.page,
-		limit: tableOptions.value.limit,
-	},
-	loading: false,
-	loadingConfig: {
-		icon: 'vxe-icon-indicator roll',
-		text: '正在拼命加载中...',
-	},
-	columns: '',
-	data: '',
+  id: 'product-attribute-table',
+  keepSource: true,
+  size: 'small',
+  border: false,
+  round: true,
+  stripe: true,
+  currentRowHighLight: true,
+  height: '100%',
+  customConfig: {
+    storage: true
+  },
+  toolbarConfig: {
+    size: 'large',
+    custom: true,
+    slots: {
+      tools: 'toolbar_tools',
+      buttons: 'toolbar_buttons'
+    }
+  },
+  rowConfig: {
+    isHover: true
+  },
+  columnConfig: {
+    resizable: true
+  },
+  pagerConfig: {
+    total: tableOptions.value.total,
+    page: tableOptions.value.page,
+    limit: tableOptions.value.limit
+  },
+  loading: false,
+  loadingConfig: {
+    icon: 'vxe-icon-indicator roll',
+    text: '正在拼命加载中...'
+  },
+  columns: '',
+  data: ''
 });
 
 const editOpen = ref(false);
@@ -73,95 +74,98 @@ const rowData = ref({});
 const dialogVisible = ref(false);
 
 onMounted(() => {
-	fetchList();
+  fetchList();
 });
 
 async function fetchList() {
-	gridOptions.data = [];
-	gridOptions.columns = [];
+  gridOptions.data = [];
+  gridOptions.columns = [];
 
-	const query = {
-		brand_name: queryParameter?.name,
-	};
+  const query = {
+    brand_name: queryParameter?.name
+  };
 
-	await useTableData(api.getTableData, query, gridOptions);
-	await gridRef.value.loadColumn(ProductCategoryColumns);
-	gridOptions.showHeader = Boolean(gridOptions.data?.length);
+  await useTableData(api.getTableData, query, gridOptions);
+  await gridRef.value.loadColumn(ProductCategoryColumns);
+  gridOptions.showHeader = Boolean(gridOptions.data?.length);
 }
 
 function handleRefresh() {
-	fetchList();
+  fetchList();
 }
 
 function handleEdit(row: any) {
-	editOpen.value = true;
-	rowData.value = row;
+  editOpen.value = true;
+  rowData.value = row;
 }
 
 function handleCreate() {
-	createOpen.value = true;
+  createOpen.value = true;
 }
 
 async function singleDelete(row: any) {
-	const res = await useResponse(api.deleteRow, row);
-	if (res.code === 2000) {
-		ElMessage.success({ message: '删除成功', plain: true });
-		handleRefresh();
-	}
+  const res = await useResponse(api.deleteRow, row);
+  if (res.code === 2000) {
+    ElMessage.success({ message: '删除成功', plain: true });
+    handleRefresh();
+  }
 }
 
 const gridEvents = {
-	custom({ type }: any) {
-		// console.log(`点击 ${type}`)
-		if (type == 'confirm') {
-			fetchList();
-		}
-	},
+  custom({ type }: any) {
+    // console.log(`点击 ${type}`)
+    if (type == 'confirm') {
+      fetchList();
+    }
+  }
 };
 
 defineExpose({ fetchList });
 </script>
 
 <template>
-	<vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents">
-		<template #toolbar_buttons>
-			<PermissionButton :icon="Plus" plain round type="primary" @click="handleCreate">新 增</PermissionButton>
-		</template>
-		<!-- 工具栏右侧 -->
-		<template #toolbar_tools>
-			<el-button circle class="toolbar-btn" @click="handleRefresh">
-				<el-icon>
-					<Refresh />
-				</el-icon>
-			</el-button>
-		</template>
-		<template #pager>
-			<vxe-pager
-				v-model:currentPage="gridOptions.pagerConfig.page"
-				v-model:pageSize="gridOptions.pagerConfig.limit"
-				:total="gridOptions.pagerConfig.total"
-				class="mt-1.5"
-				@page-change="handlePageChange"
-			/>
-		</template>
-		<!-- 自定义列插槽 -->
-		<template v-for="col in ProductCategoryColumns" #[`${col.field}`]="{ row }">
-			<DataTableSlot :key="row.id" :field="col.field" :row="row" @edit-row="handleEdit" @handle-delete="singleDelete" />
-		</template>
-	</vxe-grid>
-	<EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" @refresh="handleRefresh" />
-	<NoticeDialog v-if="dialogVisible" v-model="dialogVisible" :row-data="rowData" />
-	<CreateDialog v-if="createOpen" v-model="createOpen" @refresh="fetchList" />
+  <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents">
+    <template #toolbar_buttons>
+      <PermissionButton :icon="Plus" plain round type="primary" @click="handleCreate">新 增</PermissionButton>
+    </template>
+    <!-- 工具栏右侧 -->
+    <template #toolbar_tools>
+      <el-button circle class="toolbar-btn" @click="handleRefresh">
+        <el-icon>
+          <Refresh />
+        </el-icon>
+      </el-button>
+    </template>
+    <template #pager>
+      <vxe-pager
+          v-model:currentPage="gridOptions.pagerConfig.page"
+          v-model:pageSize="gridOptions.pagerConfig.limit"
+          :total="gridOptions.pagerConfig.total"
+          class="mt-1.5"
+          @page-change="handlePageChange"
+      />
+    </template>
+    <template #empty>
+      <el-empty description="暂无数据" />
+    </template>
+    <!-- 自定义列插槽 -->
+    <template v-for="col in ProductCategoryColumns" #[`${col.field}`]="{ row }">
+      <DataTableSlot :key="row.id" :field="col.field" :row="row" @edit-row="handleEdit" @handle-delete="singleDelete" />
+    </template>
+  </vxe-grid>
+  <EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" @refresh="handleRefresh" />
+  <NoticeDialog v-if="dialogVisible" v-model="dialogVisible" :row-data="rowData" />
+  <CreateDialog v-if="createOpen" v-model="createOpen" @refresh="fetchList" />
 </template>
 
 <style scoped>
 .toolbar-btn {
-	width: 34px;
-	height: 34px;
-	font-size: 18px;
+  width: 34px;
+  height: 34px;
+  font-size: 18px;
 }
 
 :deep(.custom-el-input .el-select__wrapper) {
-	border-radius: 20px;
+  border-radius: 20px;
 }
 </style>

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

@@ -34,7 +34,7 @@ const gridOptions: any = reactive({
   height: '100%',
   customConfig: {
     storage: {
-      visible: true,
+      visible: true
     }
   },
   toolbarConfig: {
@@ -109,6 +109,9 @@ defineExpose({ fetchList });
           @page-change="handlePageChange"
       />
     </template>
+    <template #empty>
+      <el-empty description="暂无数据" />
+    </template>
     <!-- 自定义列插槽 -->
     <template v-for="col in MarketStoreColumns" #[`${col.field}`]="{ row }">
       <DataTableSlot :key="row.id" :field="col.field" :row="row" />

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

@@ -39,14 +39,14 @@ const gridOptions: any = reactive({
   height: '100%',
   customConfig: {
     storage: {
-      visible: true,
+      visible: true
     }
   },
   toolbarConfig: {
     size: 'large',
     custom: true,
     slots: {
-      tools: 'toolbar_tools',
+      tools: 'toolbar_tools'
     }
   },
   rowConfig: {
@@ -84,7 +84,7 @@ async function fetchList() {
     shop_id: queryParameter?.shop,
     region: queryParameter?.region,
     delivery: queryParameter?.delivery,
-    status: queryParameter?.status,
+    status: queryParameter?.status
   };
 
   await useTableData(api.getTableData, query, gridOptions);
@@ -97,31 +97,31 @@ function handleRefresh() {
 }
 
 async function handleDownload() {
-	gridOptions.loading = true;
-	try {
-		const query = {
-			asin: queryParameter?.asin,
-			sku__startswith: queryParameter?.sku,
-			country_code: queryParameter?.country,
-			shop_id: queryParameter?.shop,
-			shop__region: queryParameter?.region,
-			fulfillment_channel: queryParameter?.delivery,
-			status: queryParameter?.status,
-		};
-		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 = {
+      asin: queryParameter?.asin,
+      sku__startswith: queryParameter?.sku,
+      country_code: queryParameter?.country,
+      shop_id: queryParameter?.shop,
+      shop__region: queryParameter?.region,
+      fulfillment_channel: queryParameter?.delivery,
+      status: queryParameter?.status
+    };
+    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;
+  }
 }
 
 defineExpose({ fetchList });
@@ -129,7 +129,7 @@ defineExpose({ fetchList });
 
 <template>
   <vxe-grid ref="gridRef" v-bind="gridOptions">
-    
+
     <!-- 工具栏右侧 -->
     <template #toolbar_tools>
       <el-button circle class="toolbar-btn" @click="handleRefresh">
@@ -138,10 +138,10 @@ defineExpose({ fetchList });
         </el-icon>
       </el-button>
       <el-popconfirm
-          width="220"
           :icon="InfoFilled"
           icon-color="#626AEF"
           title="是否确认导出当前时间内所有数据项?"
+          width="220"
           @confirm="handleDownload"
       >
         <template #reference>
@@ -154,8 +154,8 @@ defineExpose({ fetchList });
         <template #actions="{ confirm, cancel }">
           <el-button size="small" @click="cancel">No!</el-button>
           <el-button
-              type="danger"
               size="small"
+              type="danger"
               @click="confirm"
           >
             Yes?
@@ -172,6 +172,9 @@ defineExpose({ fetchList });
           @page-change="handlePageChange"
       />
     </template>
+    <template #empty>
+      <el-empty description="暂无数据" />
+    </template>
     <!-- 自定义列插槽 -->
     <template v-for="col in OnlineMerchandiseColumns" #[`${col.field}`]="{ row }">
       <DataTableSlot :key="row.id" :field="col.field" :row="row" />