优化

src/views/design/received/index.vue

@@ -49,7 +49,32 @@
         <!-- 资料文件区域 -->
         <div class="mb-8">
           <div class="flex items-center justify-between mb-5">
-            <h3 class="text-lg font-semibold text-blue-700">资料文件清单</h3>
+            <div style="display: flex; align-items: center">
+              <h3 class="text-lg font-semibold text-blue-700" style="margin-right: 20px">资料文件清单</h3>
+              <el-upload
+                class="upload-excel"
+                action="#"
+                v-if="!form.id || form.status == 'draft'"
+                ref="uploadRef"
+                :auto-upload="false"
+                :on-change="importTemplate"
+                :show-file-list="false"
+                :accept="'.xlsx,.xls'"
+                :limit="1"
+              >
+                <el-button type="primary" icon="Upload">导入文件</el-button>
+              </el-upload>
+              <el-button
+                v-if="!form.id || form.status == 'draft'"
+                type="primary"
+                style="margin-left: 20px"
+                icon="Download"
+                @click="exportTemplate"
+                class="transition-all hover:bg-blue-600"
+              >
+                导出模版
+              </el-button>
+            </div>
             <el-button type="primary" size="small" @click="addDocumentItem" v-if="!disabledAll" icon="Plus" class="transition-all hover:bg-blue-600">
               添加资料
             </el-button>
@@ -180,11 +205,11 @@ import { ref, reactive, computed, onMounted, onUnmounted, watch, getCurrentInsta
 import { useUserStoreHook } from '@/store/modules/user';
 import { ElMessage, ElLoading, FormRules } from 'element-plus';
 import { systemUserList } from '@/api/design/appointment';
-import { collectBatch, byProjectId, exportWord } from '@/api/design/received';
+import { collectBatch, byProjectId, exportWord, exportExcel } from '@/api/design/received';
 import { getUser } from '@/api/system/user';
 import type { ComponentInternalInstance, ElFormInstance } from 'element-plus';
 import { getInfo } from '@/api/login';
-
+import * as XLSX from 'xlsx';
 // 全局实例与状态管理
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const userStore = useUserStoreHook();
@@ -200,7 +225,7 @@ const documentsFormRef = ref<ElFormInstance>();
 const userList = ref<any[]>([]);
 const userMap = new Map<string, string>(); // 存储用户ID与昵称映射
 const disabledAll = ref(false); // 表单是否全部禁用
-
+const uploadRef = ref<any>();
 // 表单核心数据
 const form = reactive({
   projectId: currentProject.value?.id,
@@ -445,7 +470,67 @@ const onLoad = async () => {
     console.error('文件导出错误：', error);
   }
 };
+const exportTemplate = async () => {
+  // 导出模版
+  proxy?.download(
+    'design/collect/exportExcel',
+    {
+      deptId: userStore.deptId
+    },
+    `收资清单表格.xlsx`
+  );
+};
+const importTemplate = async (files, fileList) => {
+  // 导入表格数据
+  console.log(fileList);
 
+  const file = fileList[0].raw; // 获取原始文件对象
+  const reader = new FileReader();
+  let obj = {
+    id: '编码',
+    name: '人员',
+    fliename: '目录名',
+    remark: '备注'
+  };
+  reader.onload = (e) => {
+    try {
+      // 读取文件内容
+      const data = new Uint8Array(e.target.result);
+      // 解析Excel
+      const workbook = XLSX.read(data, { type: 'array' });
+
+      // 获取第一个工作表名称
+      const firstSheetName = workbook.SheetNames[0];
+      // 获取第一个工作表内容
+      const worksheet = workbook.Sheets[firstSheetName];
+
+      // 转换为JSON格式
+      const jsonData = XLSX.utils.sheet_to_json(worksheet);
+
+      if (jsonData.length === 0) {
+        ElMessage.info('Excel文件中没有数据');
+        return;
+      }
+      let arr = [];
+      jsonData.forEach((item, index) => {
+        if (item[obj.id]) {
+          arr.push({
+            id: Date.now() + index,
+            catalogueName: item[obj.name],
+            remark: item[obj.remark],
+            userId: item[obj.id]
+          });
+        }
+      });
+      form.documents = form.documents.concat(arr);
+      uploadRef.value.clearFiles();
+      console.log(arr);
+    } catch (err) {}
+  };
+
+  // 以ArrayBuffer方式读取文件
+  reader.readAsArrayBuffer(file);
+};
 /** 页面挂载初始化 */
 onMounted(() => {
   // 先获取当前用户信息，再获取部门用户列表，最后回显表单数据