更新

src/views/purchase/purchasingcategory/index.vue

@@ -17,6 +17,31 @@
                 @click="formDialogRef.openDialog('add')">
                 新增
               </el-button>
+              <el-button 
+                icon="Download" 
+                type="success"
+                v-auth="'purchase_purchasingcategory_import'"
+                @click="handleDownloadTemplate">
+                下载模板
+              </el-button>
+              <el-upload
+                ref="uploadRef"
+                :show-file-list="false"
+                :before-upload="handleBeforeUpload"
+                :http-request="handleImport"
+                accept=".xlsx,.xls"
+                v-auth="'purchase_purchasingcategory_import'">
+                <el-button icon="Upload" type="warning" :loading="importLoading">
+                  导入
+                </el-button>
+              </el-upload>
+              <el-button
+                icon="Download" 
+                type="info"
+                v-auth="'purchase_purchasingcategory_export'"
+                @click="handleExport">
+                导出
+              </el-button>
               <right-toolbar class="ml10" />
             </div>
           </div>
@@ -93,20 +118,17 @@
 <script setup lang="ts" name="PurchasingCategory">
 import { ref, reactive, defineAsyncComponent } from 'vue'
 import { BasicTableProps, useTable } from "/@/hooks/table";
-import { getTreeRoots, getTreeChildren, delObj } from "/@/api/purchase/purchasingcategory";
+import { getTreeRoots, getTreeChildren, delObj, downloadTemplate, importData, exportData } from "/@/api/purchase/purchasingcategory";
 import { useMessage, useMessageBox } from "/@/hooks/message";
 import { List, Document, DocumentCopy, EditPen } from '@element-plus/icons-vue'
 
-// 引入组件
 const FormDialog = defineAsyncComponent(() => import('./form.vue'));
 
-// 定义变量内容
 const tableRef = ref()
 const formDialogRef = ref()
+const uploadRef = ref()
+const importLoading = ref(false)
 
-/**
- * 查询树根节点（懒加载：首屏只加载根节点）
- */
 const queryTreeRoots = () => {
   return getTreeRoots().then((res: any) => {
     const list = res?.data ?? [];
@@ -114,12 +136,6 @@ const queryTreeRoots = () => {
   });
 };
 
-/**
- * 懒加载子节点：展开某行时按需请求子节点
- * @param row 当前行
- * @param treeNode 树节点信息
- * @param resolve 回调，传入子节点数组
- */
 const loadTreeNode = (row: any, treeNode: any, resolve: (data: any[]) => void) => {
   const parentCode = row?.code;
   if (!parentCode) {
@@ -134,33 +150,18 @@ const loadTreeNode = (row: any, treeNode: any, resolve: (data: any[]) => void) =
     .catch(() => resolve([]));
 };
 
-/**
- * 定义响应式表格数据
- */
 const state: BasicTableProps = reactive<BasicTableProps>({
   pageList: queryTreeRoots,
   queryForm: {},
-  isPage: false, // 树形表格不分页
+  isPage: false,
 });
 
-/**
- * 使用 useTable 定义表格相关操作
- */
 const { getDataList, tableStyle } = useTable(state);
 
-/**
- * 计算行序号（考虑树形结构）
- */
 const getRowIndex = (index: number, row: any) => {
-  // 对于树形表格，序号需要根据实际显示的行来计算
-  // 这里简化处理，直接返回 index + 1
   return index + 1;
 };
 
-/**
- * 删除当前行
- * @param row - 当前行数据
- */
 const handleDelete = async (row: any) => {
   try {
     await useMessageBox().confirm('确定要删除该记录吗？', '提示', {
@@ -173,7 +174,6 @@ const handleDelete = async (row: any) => {
   }
 
   try {
-    // 使用 id 或 code 作为删除参数（根据后端接口决定）
     const deleteId = row.id || row.code;
     await delObj(deleteId);
     useMessage().success('删除成功');
@@ -182,6 +182,57 @@ const handleDelete = async (row: any) => {
     useMessage().error(err.msg || '删除失败');
   }
 };
+
+const handleDownloadTemplate = async () => {
+  try {
+    const res: any = await downloadTemplate();
+    downloadFile(res, '采购品目导入模板.xlsx');
+  } catch (err: any) {
+    useMessage().error(err.msg || '下载模板失败');
+  }
+};
+
+const handleBeforeUpload = (file: File) => {
+  const isExcel = file.name.endsWith('.xlsx') || file.name.endsWith('.xls');
+  if (!isExcel) {
+    useMessage().error('请上传Excel文件');
+    return false;
+  }
+  return true;
+};
+
+const handleImport = async (options: any) => {
+  importLoading.value = true;
+  try {
+    const res: any = await importData(options.file);
+    useMessage().success(res.msg || '导入成功');
+    getDataList();
+  } catch (err: any) {
+    useMessage().error(err.msg || '导入失败');
+  } finally {
+    importLoading.value = false;
+  }
+};
+
+const handleExport = async () => {
+  try {
+    const res: any = await exportData();
+    downloadFile(res, '采购品目数据.xlsx');
+  } catch (err: any) {
+    useMessage().error(err.msg || '导出失败');
+  }
+};
+
+const downloadFile = (blob: Blob, fileName: string) => {
+  const url = window.URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = fileName;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  window.URL.revokeObjectURL(url);
+};
 </script>
 
 <style scoped lang="scss">