材料导入

public/pdf/模板.pdf

@@ -0,0 +1 @@
+

src/views/compilation/handbook/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <!-- 项目手册报告 -->
+        <!-- 手册管理 -->
         <!-- 表单查询项 -->
         <div v-if="!previewMode" class="headerbox">
             <el-form size="small" :inline="true" label-width="200">
@@ -83,7 +83,7 @@ export default {
             },
             // 所有数据（模拟从后端获取）
             allPostList: [
-                { id: 1, title: '苏州工业园区总体报告模板', unit: '经发委', author: '', createTime: '2024-08-20', fileUrl: 'docx/苏州工业园区总体报告模板.docx' },
+                { id: 1, title: 'xxxx项目单体材料模板', unit: '经发委', author: '', createTime: '2024-08-20', fileUrl: 'docx/单体材料模板.docx' },
             ],
             // 表格显示的数据
             postList: [],

src/views/compilation/knowledge/index.vue

@@ -36,6 +36,14 @@
             <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
           </el-col>
         </el-row>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" icon="el-icon-download" size="mini" @click="handleImport">导入</el-button>
+          </el-col>
+          <!-- <el-col :span="1.5">
+            <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
+          </el-col> -->
+        </el-row>
       </div>
       <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
         <el-table-column label="文件名称" align="center" prop="name" />
@@ -56,7 +64,7 @@
           </template>
         </el-table-column>
         <el-table-column label="上传用户" align="center" prop="scyh" />
-        <el-table-column label="上传时间" align="center" prop="scsj" />
+        <el-table-column label="上传时间" align="center" prop="scsj" :formatter="dateFormat" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
             <el-button size="mini" type="text" @click="getInfo(scope.row)">详情</el-button>
@@ -144,10 +152,30 @@
         <el-button @click="detailOpen = false">确定</el-button>
       </div>
     </el-dialog>
+
+    <!-- 导入对话框 -->
+    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
+        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip text-center" slot="tip">
+          <span>仅允许导入xls、xlsx格式文件。</span>
+          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
+            @click="importTemplate">下载模板</el-link>
+        </div>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="upload.open = false">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { getToken } from "@/utils/auth";
 import { getXmzskPage, addXmzsk, updateXmzsk, deleteXmzsk, getXmzskById } from "@/api/ManageApi/index";
 import fileload from "@/components/FileUpload/index.vue"
 
@@ -243,13 +271,39 @@ export default {
         3: "网络信息",
         4: "其他",
       },
-      select: 'http' // 默认协议类型
+      select: 'http', // 默认协议类型
+      // 用户导入参数
+      upload: {
+        // 是否显示弹出层（用户导入）
+        open: false,
+        // 弹出层标题（用户导入）
+        title: "目录导入",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的用户数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: { Authorization: "Bearer " + getToken() },
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "",
+      },
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    // 日期格式化函数
+    dateFormat(row, column, cellValue) {
+      if (cellValue) {
+        const date = new Date(cellValue);
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+      }
+      return '';
+    },
     // 获取文件名字
     getFileName(filePath) {
       if (filePath) {
@@ -412,7 +466,51 @@ export default {
       } else {
         this.setProtocolType(this.form.wz);
       }
-    }
+    },
+    /**导出 */
+    //     handleExport() {
+    //   this.download(
+    //     "/gysl/ml/exportMl",
+    //     {
+    //       ...this.form,
+    //     },
+    //     `管理${new Date().getTime()}.xlsx`
+    //   );
+    // },
+    // 导入操作
+    handleImport() {
+      this.upload.open = true;
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+      this.download(
+        "/gysl/ml/importTemplate",
+        {},
+        `知识库导入模板${new Date().getTime()}.xlsx`
+      );
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      this.upload.open = false;
+      this.upload.isUploading = false;
+      this.$refs.upload.clearFiles();
+      this.$alert(
+        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
+        response.msg +
+        "</div>",
+        "导入结果",
+        { dangerouslyUseHTMLString: true }
+      );
+      this.getList();
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit();
+    },
   }
 };
 </script>
@@ -447,5 +545,8 @@ export default {
 .tablebtntwo {
   margin-top: 1rem;
   margin-bottom: 1rem;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
 }
 </style>