安全生产上传文件

src/views/safetyManage/safeProduction/sluice/index.vue

@@ -253,7 +253,7 @@
             style="width: 100%"
             v-model="form.processingTime"
             type="date"
-            value-format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd HH:mm:ss"
             placeholder="选择处理时间"
           >
           </el-date-picker>
@@ -298,11 +298,31 @@
         </el-form-item>
 
         <el-form-item label="图片" prop="photo">
-          <el-input
+          <!-- <el-input
             v-model="form.photo"
             type="textarea"
             placeholder="请输入内容"
-          />
+          /> -->
+          <el-upload
+            class="upload-demo"
+            action="thinking/common/upload"
+            :headers="headers"
+            :on-preview="handlePreview"
+            :on-remove="(file) => handleRemove(file, 'fileList')"
+            :before-remove="beforeRemove"
+            multiple
+            :on-exceed="handleExceed"
+            :on-success="(_, fileList) => submitUpload(fileList, 'fileList')"
+            :file-list="fileList"
+          >
+            <el-button size="small" type="primary" plain>
+              <i class="el-icon-upload el-icon--right"></i>
+              点击上传
+            </el-button>
+            <div slot="tip" class="el-upload__tip">
+              支持jpg/png文件等，不超过100M
+            </div>
+          </el-upload>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -323,6 +343,8 @@ import {
   exportYhxx,
 } from "@/api/yg/yhxx";
 import { listJbxx, getJbxx } from "@/api/yg/jbxx";
+import { getToken } from "@/utils/auth";
+import { getFileStream } from "@/api/system/upload";
 
 export default {
   name: "Yhxx",
@@ -390,6 +412,11 @@ export default {
       // 表单校验
       rules: {},
       isResolve: false,
+      // 请求头
+      headers: {
+        shuili: "water " + getToken(),
+      },
+      fileList: [],
     };
   },
   created() {
@@ -403,10 +430,15 @@ export default {
   },
   methods: {
     handleResolve(row) {
+      this.reset();
       this.isResolve = true;
       const id = row.id || this.ids;
       getYhxx(id).then((response) => {
         this.form = response.data;
+        if (this.form.photo) {
+          this.fileList = JSON.parse(this.form.photo);
+          // console.log(11111, this.fileList);
+        }
         this.open = true;
         this.title = "解决水闸隐患信息";
       });
@@ -439,6 +471,7 @@ export default {
     },
     // 表单重置
     reset() {
+      this.fileList = [];
       this.form = {
         id: null,
         wagaId: null,
@@ -536,6 +569,10 @@ export default {
       const id = row.id || this.ids;
       getYhxx(id).then((response) => {
         this.form = response.data;
+        if (this.form.photo) {
+          this.fileList = JSON.parse(this.form.photo);
+          // console.log(11111, this.fileList);
+        }
         this.open = true;
         this.title = "修改水闸隐患信息";
       });
@@ -544,7 +581,9 @@ export default {
     submitForm() {
       this.$refs["form"].validate((valid) => {
         if (valid) {
+          this.form.photo = JSON.stringify(this.fileList);
           if (this.form.id != null) {
+            if (this.isResolve) this.form.status = "1";
             updateYhxx(this.form).then((response) => {
               if (response.code === 200) {
                 this.msgSuccess("修改成功");
@@ -585,27 +624,54 @@ export default {
         this.$message.warning("请选择要删除的数据！！");
       }
     },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      let message = "是否确认导出所有的数据项?";
-      if (this.ids) {
-        message = "是否确认导出选中的数据项?";
-        queryParams.ids = this.ids;
-      }
-      this.$confirm(message, "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(function () {
-          return exportYhxx(queryParams);
-        })
-        .then((response) => {
-          this.downloadFile(response, true, response.msg);
-          // this.download(response.msg);
-        })
-        .catch(function () {});
+    // 上传意见附件
+    submitUpload(fileList, name) {
+      console.log(name, fileList);
+      this[name].push({
+        name: fileList.name,
+        fileName: fileList.response.fileName,
+        url: fileList.response.url,
+        uid: fileList.uid,
+      });
+      console.log(name, this[name]);
+    },
+    handleRemove(file, name) {
+      // console.log(file, fileList1);
+      let index = this[name].findIndex((item) => item.uid === file.uid);
+      // 删除文件
+      this[name].splice(index, 1);
+    },
+    downloadFile2(info, index) {
+      console.log(info);
+      this.handlePreview(info);
+    },
+    // 点击预览的文件进行下载
+    handlePreview(file) {
+      // console.log(file);
+      getFileStream({ fileName: file.fileName }).then((res) => {
+        const blob = new Blob([res], {
+          // type类型后端返回来的数据中会有，根据自己实际进行修改
+          // 表格下载为 application/xlsx，压缩包为 application/zip等，
+          type: "application/xlsx",
+        }); //excel,pdf等
+        const href = URL.createObjectURL(blob); //创建新的URL表示指定的blob对象
+        const a = document.createElement("a"); //创建a标签
+        a.style.display = "none";
+        a.href = href; // 指定下载链接
+        a.download = file.name; //指定下载文件名
+        a.click(); //触发下载
+        URL.revokeObjectURL(a.href); //释放URL对象
+      });
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`
+      );
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
     },
   },
 };