From 2bf6e04be40c06d0aaaa96b191ab7f77dce3c58b Mon Sep 17 00:00:00 2001
From: bob <bob.liu@happyelements.net>
Date: Thu, 16 Feb 2023 15:58:48 +0800
Subject: [PATCH] fix(attachment) review

---
 .../src/views/flowable/oa-project-flow.vue    |   3 +-
 .../src/views/flowable/task/record/index.vue  | 122 ++++++++++++------
 .../src/views/flowable/task/todo/index.vue    |   4 +-
 3 files changed, 87 insertions(+), 42 deletions(-)

diff --git a/ruoyi-ui/src/views/flowable/oa-project-flow.vue b/ruoyi-ui/src/views/flowable/oa-project-flow.vue
index c71dbe3..9be244b 100644
--- a/ruoyi-ui/src/views/flowable/oa-project-flow.vue
+++ b/ruoyi-ui/src/views/flowable/oa-project-flow.vue
@@ -26,7 +26,7 @@
         <el-form-item label="工作记录">
           <el-input type="textarea" v-model="form.workRecord"/>
         </el-form-item>
-        <el-form-item label="图片上传" prop="remark">
+        <el-form-item label="附件上传" prop="remark">
           <el-upload
             class="upload-demo"
             :action="uploadFileUrl"
@@ -37,7 +37,6 @@
             :headers="headers"
             :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="申请提交时间">
diff --git a/ruoyi-ui/src/views/flowable/task/record/index.vue b/ruoyi-ui/src/views/flowable/task/record/index.vue
index cf3ddee..f22e2be 100644
--- a/ruoyi-ui/src/views/flowable/task/record/index.vue
+++ b/ruoyi-ui/src/views/flowable/task/record/index.vue
@@ -32,29 +32,25 @@
               <el-form-item label="工作记录">
                 <el-input type="textarea" v-model="form.workRecord"/>
               </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"
-                  :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"
-                  :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 label="附件">
+
+                <div  v-for="(item,index) in uploadedImgs" class="demo-image__preview">
+                  <el-row :span="24">
+                    <el-col :span="6">
+                      <el-image
+                        style="width: 100px; height: 100px"
+                        :src="'data:image/png;base64,'+item.base64"
+                        :preview-src-list="['data:image/png;base64,'+item.base64]">
+                      </el-image>
+                    </el-col>
+                    <el-col :span="2">
+                      <span>{{item.name}}</span>
+                    </el-col>
+                  </el-row>
+                </div>
+                <div  v-for="(item,index) in uploadedFiles" class="demo-image__preview">
+                  <span>{{item.name}}</span>
+                </div>
               </el-form-item>
             </el-form>
           </div>
@@ -94,29 +90,39 @@
             <el-form-item label="工作记录">
               <el-input type="textarea" v-model="form.workRecord"/>
             </el-form-item>
-            <el-form-item label="图片上传" prop="remark">
+            <el-form-item v-if="applyIsRevoked" 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"
+                :headers="headers"
                 :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"
-                :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 v-if="!applyIsRevoked" label="附件">
+
+              <div  v-for="(item,index) in uploadedImgs" class="demo-image__preview">
+                <el-row :span="24">
+                  <el-col :span="6">
+                    <el-image
+                      style="width: 100px; height: 100px"
+                      :src="'data:image/png;base64,'+item.base64"
+                      :preview-src-list="['data:image/png;base64,'+item.base64]">
+                    </el-image>
+                  </el-col>
+                  <el-col :span="2">
+                    <span>{{item.name}}</span>
+                  </el-col>
+                </el-row>
+
+              </div>
+              <div  v-for="(item,index) in uploadedFiles" class="demo-image__preview">
+                <span>{{item.name}}</span>
+              </div>
             </el-form-item>
           </el-form>
         </div>
@@ -304,6 +310,7 @@ import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import Treeselect from "@riophae/vue-treeselect";
 import {listUser} from "@/api/system/user";
 import {optionProject} from "@/api/system/project";
+import {getToken} from "@/utils/auth";
 
 export default {
   name: "Record",
@@ -369,8 +376,16 @@ export default {
         issue: '',
         submitDate: '',
         solution: '',
+        attachmentIds:''
       },
+      fileIdList: [],
       fileList: [],
+      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/attachment/upload", // 上传的图片服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      uploadedImgs: [],
+      uploadedFiles: [],
       projectList: [],
       returnTaskList: [],  // 回退列表数据
       finished: 'false',
@@ -404,6 +419,9 @@ export default {
     this.optionList();
     this.getFlowRecordList( this.taskForm.procInsId, this.taskForm.deployId);
     this.finished =  this.$route.query && this.$route.query.finished
+    this.fileIdList = []
+    this.uploadedFiles = []
+    this.uploadedImgs = []
   },
   methods: {
     /** 查询部门下拉树结构 */
@@ -502,6 +520,8 @@ export default {
       const params = {procInsId: procInsId, deployId: deployId}
       flowRecord(params).then(res => {
         this.flowRecordList = res.data.flowList;
+        this.uploadedImgs = res.data.imgs;
+        this.uploadedFiles = res.data.files;
         // 流程过程中不存在初始化表单 直接读取的流程变量中存储的表单值
         // if (res.data.formData) {
           this.form = res.data.form;
@@ -583,6 +603,10 @@ export default {
       this.getTreeselect();
     },    /** 确认并提交任务选择 */
     handleClaimAndComplete() {
+      if (this.fileIdList.length > 0) {
+        this.form.attachmentIds=this.fileIdList.map(e => e.id).join(',')
+        console.log("this.form.attachmentIds", this.form.attachmentIds);
+      }
       this.taskForm.comment = '提交任务';
       this.taskForm.vars= JSON.stringify(this.form)
       this.taskForm.taskId= this.flowRecordList[0].taskId
@@ -721,7 +745,29 @@ export default {
       this.returnTaskList = [];
     },
     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);
diff --git a/ruoyi-ui/src/views/flowable/task/todo/index.vue b/ruoyi-ui/src/views/flowable/task/todo/index.vue
index 52a7eb3..61a2213 100644
--- a/ruoyi-ui/src/views/flowable/task/todo/index.vue
+++ b/ruoyi-ui/src/views/flowable/task/todo/index.vue
@@ -42,8 +42,8 @@
 
     <el-table v-loading="loading" :data="todoList" border @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true"/>
-      <el-table-column label="流程名称" align="center" prop="procDefName"/>
+      <el-table-column label="项目名称" align="center" prop="projectName" :show-overflow-tooltip="true"/>
+      <el-table-column label="工作问题" align="center" prop="workIssue" :show-overflow-tooltip="true"/>
       <el-table-column label="任务节点" align="center" prop="taskName"/>
       <el-table-column label="流程版本" align="center">
         <template slot-scope="scope">