feat(oaProject) fileUpload

ruoyi-ui/src/views/flowable/oa-project-flow.vue

@@ -29,22 +29,12 @@
         <el-form-item label="图片上传" prop="remark">
           <el-upload
             class="upload-demo"
-            action="https://jsonplaceholder.typicode.com/posts/"
+            :action="uploadFileUrl"
+            :on-error="handleUploadError"
             :on-preview="handlePreview"
+            :on-success="handleSuccess"
             :on-remove="handleRemove"
-            :file-list="fileList">
-            <el-button size="small" type="primary">点击上传</el-button>
-            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
-          </el-upload>
-        </el-form-item>
-        <el-form-item label="文件上传" prop="remark">
-          <el-upload
-            class="upload-demo"
-            action="https://jsonplaceholder.typicode.com/posts/"
-            :on-preview="handlePreview"
-            :on-remove="handleRemove"
-            multiple
-            :limit="3"
+            :headers="headers"
             :file-list="fileList">
             <el-button size="small" type="primary">点击上传</el-button>
             <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
@@ -75,6 +65,7 @@ import Editor from '@/components/Editor';
 import Parser from '@/components/parser/Parser'
 import {optionProject} from "@/api/system/project";
 import {definitionStart, getLatestIdByKey} from "@/api/flowable/definition";
+import {getToken} from "@/utils/auth";
 
 export default {
   name: "Form",
@@ -98,6 +89,7 @@ export default {
       total: 0,
       // 流程表单表格数据
       formList: [],
+      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/attachment/upload", // 上传的图片服务器地址
       // 弹出层标题
       title: "",
       formConf: {}, // 默认表单数据
@@ -112,18 +104,17 @@ export default {
         formName: null,
         formContent: null,
       },
-      fileList: [{
-        name: 'food.jpeg',
-        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-      }, {
-        name: 'food2.jpeg',
-        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
-      }],
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      fileList: [],
+      fileIdList: [],
       // 表单参数
       form: {
         projectId: undefined,
         workRecord: '',
         submitDate: '',
+        attachmentIds: [],
         issue: '',
         solution: '',
       },
@@ -136,16 +127,22 @@ export default {
   },
   methods: {
     init() {
+      this.fileList = []
+      this.fileIdList = []
       this.open = true
       this.optionList()
       this.getLatestIdByKey()
     },
     /** 启动流程 */
     startFlow(){
+      if (this.fileIdList.length > 0) {
+        this.form.attachmentIds=this.fileIdList.map(e => e.id).join(',')
+        console.log("this.form.attachmentIds", this.form.attachmentIds);
+      }
       definitionStart(this.oaProjectFlowId, JSON.stringify(this.form)).then(res => {
         this.msgSuccess(res.msg);
         this.$router.push('/task/process')
-      })
+      });
     },    /** 获取最新流程id */
     getLatestIdByKey(){
       getLatestIdByKey(this.oaProjectFlowKey).then(res => {
@@ -242,6 +239,7 @@ export default {
         this.msgSuccess("删除成功");
       })
     },
+
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
@@ -256,7 +254,29 @@ export default {
       })
     },
     handleRemove(file, fileList) {
+      // 删除对应id
       console.log(file, fileList);
+      for(var i = this.fileIdList.length -1; i >= 0 ; i--){
+        if(this.fileIdList[i].uid == file.uid){
+          // 删除 fileIdList中已删除文件的id
+          this.fileIdList.splice(i, 1);
+        }
+      }
+    },
+    handleUploadError(err, file, fileList) {
+      this.$message.error("上传失败, 请重试");
+
+    },
+    handleSuccess(res, file, fileList) {
+      if (res.code !== 200) {
+        this.$message.error("上传失败, 请重试");
+        return
+      }
+      this.fileIdList.push({
+        id:res.data.id,
+        uid:file.uid // 上传文件，唯一id
+      })
+      // 存入id
     },
     handlePreview(file) {
       console.log(file);

ruoyi-ui/vue.config.js

@@ -117,31 +117,32 @@ module.exports = {
   },
   // vue 兼容h5样式配置
   css: {
-    loaderOptions: {
-      sass: {
-        additionalData: `@import "~@/base.scss";`
-      },
-      postcss: {
-        plugins: [
-          require('autoprefixer')({ overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] }),
-          require('postcss-px-to-viewport')({
-            unitToConvert: 'px',
-            viewportWidth: 7500,
-            unitPrecision: 5,
-            propList: ['*', '!max-width'],
-            viewportUnit: 'rem',
-            fontViewportUnit: 'rem',
-            selectorBlackList: ['html'],
-            minPixelValue: 1,
-            mediaQuery: false,
-            replace: true,
-            exclude: [/node_modules/],
-            landscape: false,
-            landscapeUnit: 'vw',
-            landscapeWidth: 568
-          })
-        ]
-      }
-    }
+    // loaderOptions: {
+    //   sass: {
+    //     additionalData: `@import "~@/base.scss";`
+    //   },
+    //   postcss: {
+    //     plugins: [
+    //       require('autoprefixer')({ overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] }),
+    //       require('postcss-px-to-viewport')({
+    //         unitToConvert: 'px',
+    //         viewportWidth: 7500,
+    //         unitPrecision: 5,
+    //         propList: ['*', '!max-width'],
+    //         viewportUnit: 'rem',
+    //         fontViewportUnit: 'rem',
+    //         selectorBlackList: ['html'],
+    //         minPixelValue: 1,
+    //         mediaQuery: false,
+    //         replace: true,
+    //         // exclude: [/node_modules/],
+    //         include: [''],
+    //         landscape: false,
+    //         landscapeUnit: 'vw',
+    //         landscapeWidth: 568
+    //       })
+    //     ]
+    //   }
+    // }
   }
 }