feat(product-category):删除产品种类下载按钮

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

@@ -6,7 +6,7 @@
  */
 
 import { ElMessage } from 'element-plus';
-import { Download, InfoFilled, Refresh, Plus } from '@element-plus/icons-vue';
+import { Download, InfoFilled, Plus, Refresh } from '@element-plus/icons-vue';
 import { usePagination } from '/@/utils/usePagination';
 import { useTableData } from '/@/utils/useTableData';
 import { useResponse } from '/@/utils/useResponse';
@@ -18,9 +18,8 @@ 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');
@@ -28,43 +27,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);
@@ -74,29 +73,29 @@ 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() {
@@ -104,94 +103,65 @@ function handleCreate() {
 }
 
 async function singleDelete(row: any) {
-  const res = await useResponse(api.deleteRow, row);
-  if (res.code === 2000) {
-    ElMessage.success({ message: '删除成功', plain: true });
-    handleRefresh();
-  }
-}
-
-async function handleDownload() {
+	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 type="primary" :icon="Plus" plain round @click="handleCreate">新 增</PermissionButton>
-    </template>
-    <!-- 工具栏右侧 -->
-    <template #toolbar_tools>
-      <el-button circle class="toolbar-btn" @click="handleRefresh">
-        <el-icon>
-          <Refresh />
-        </el-icon>
-      </el-button>
-      <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 #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" />
+	<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" />
-
 </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/sku-manage/product-category/index.vue

@@ -40,7 +40,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">