feat(processDocument): 替换文件上传组件并添加上传功能

- 将file-upload组件替换为el-upload组件
- 添加文件上传相关的状态变量fileList、uploadUrl、uploadHeaders
- 实现文件上传成功、失败、移除等回调处理函数
- 添加文件大小限制和上传前验证逻辑
- 实现文件列表显示和文件名提取功能
- 添加上传进度提示和错误处理机制

src/views/base/processDocument/index.vue

@@ -95,7 +95,20 @@
           <el-input v-model="form.docVersion" placeholder="请输入文档版本"/>
         </el-form-item>
         <el-form-item label="文件上传" prop="filePath">
-          <file-upload v-model="form.filePath"/>
+          <el-upload
+            :action="uploadUrl"
+            :headers="uploadHeaders"
+            :file-list="fileList"
+            :limit="1"
+            :on-success="handleUploadSuccess"
+            :on-error="handleUploadError"
+            :on-remove="handleFileRemove"
+            :on-exceed="handleExceed"
+            :before-upload="beforeUpload"
+          >
+            <el-button size="small" type="primary">选取文件</el-button>
+            <div slot="tip" class="el-upload__tip">只能上传一个文件，大小不超过10MB</div>
+          </el-upload>
         </el-form-item>
         <el-form-item label="文档状态" prop="docStatus">
           <el-radio-group v-model="form.docStatus">
@@ -118,6 +131,7 @@
 
 <script>
 import { listProcessDocument, getProcessDocument, delProcessDocument, addProcessDocument, updateProcessDocument } from "@/api/base/processDocument";
+import { getToken } from "@/utils/auth";
 
 export default {
   name: "ProcessDocument",
@@ -132,6 +146,9 @@ export default {
       documentList: [],
       title: "",
       open: false,
+      fileList: [],
+      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
+      uploadHeaders: { Authorization: "Bearer " + getToken() },
       queryParams: {
         pageNum: 1,
         pageSize: 10,
@@ -183,6 +200,7 @@ export default {
         isFlag: "1",
         remark: null,
       };
+      this.fileList = [];
       this.resetForm("form");
     },
     handleQuery() {
@@ -208,6 +226,9 @@ export default {
       const docId = row.docId || this.ids;
       getProcessDocument(docId).then(response => {
         this.form = response.data;
+        if (this.form.filePath) {
+          this.fileList = [{ name: this.getFileName(this.form.filePath), url: this.form.filePath }];
+        }
         this.open = true;
         this.title = "修改工艺文档";
       });
@@ -249,6 +270,39 @@ export default {
     },
     handleExport() {
       this.download('base/processDocument/export', { ...this.queryParams }, `processDocument_${new Date().getTime()}.xlsx`);
+    },
+    handleUploadSuccess(res, file) {
+      if (res.code === 200) {
+        this.form.filePath = res.fileName;
+        this.form.fileName = this.getFileName(res.fileName);
+        this.$modal.msgSuccess("上传成功");
+      } else {
+        this.$modal.msgError(res.msg || "上传失败");
+        this.fileList = [];
+      }
+    },
+    handleUploadError() {
+      this.$modal.msgError("上传失败");
+      this.fileList = [];
+    },
+    handleFileRemove() {
+      this.form.filePath = null;
+      this.form.fileName = null;
+      this.fileList = [];
+    },
+    handleExceed() {
+      this.$modal.msgWarning("只能上传一个文件");
+    },
+    beforeUpload(file) {
+      const isLt10M = file.size / 1024 / 1024 < 10;
+      if (!isLt10M) {
+        this.$modal.msgError("上传文件大小不能超过 10MB!");
+      }
+      return isLt10M;
+    },
+    getFileName(path) {
+      if (!path) return "";
+      return path.lastIndexOf("/") > -1 ? path.slice(path.lastIndexOf("/") + 1) : path;
     }
   }
 };