From 0b85ea59d957b504babf1366b1fa8195a03f1030 Mon Sep 17 00:00:00 2001
From: clay <209192278@qq.com>
Date: Mon, 16 Jan 2023 15:56:55 +0800
Subject: [PATCH] =?UTF-8?q?dengjie=20commit=20:=20=E5=AE=A1=E6=89=B9?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/assets/image/s-release.png            | Bin 275 -> 0 bytes
 .../src/components/common/Comment.vue         |   8 +-
 .../common/form/components/ImageUpload.vue    |   2 +-
 .../src/views/workspace/DisposalTask.vue      | 163 +++++++++++++-----
 .../src/views/workspace/InitiatedInstance.vue |   4 +-
 .../src/views/workspace/WorkSpace.vue         |   5 +-
 6 files changed, 133 insertions(+), 49 deletions(-)
 delete mode 100644 flowable-engine-web/src/assets/image/s-release.png

diff --git a/flowable-engine-web/src/assets/image/s-release.png b/flowable-engine-web/src/assets/image/s-release.png
deleted file mode 100644
index 4e30b632ada5d8f9c0481c3bca59e9037dc73b6d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 275
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|&U(5yhFJI?
zoutTj$U(sMe|)$Mr}}{+`I6v^EYZG99OoQ@E`}r*dZ-*s5|m-cGjNWIx-@MXpW}wK
z&DQ_-&;2X;==f2+{qilRvvhqQ-P*aPmMMez!m8R>F?~Iw;8{o3CfRd%zgYEVg=j*@
zQ~L()hQf=n{_ICg#I?5FbW;*K)%eKI%;8;?)0|7ePkl9adzl^Mk(yh>`GAKnTwQ`Q
zg`pssZAFsbRa=?<pZOvah2$Ex>M|ddJ+i@!|A=H)C+`J&&$)`<qPdUW)|fq)_aXC=
Xge*ZhuG+6ak1=?<`njxgN@xNATV!O+

diff --git a/flowable-engine-web/src/components/common/Comment.vue b/flowable-engine-web/src/components/common/Comment.vue
index 51896bd..a3cdbe5 100644
--- a/flowable-engine-web/src/components/common/Comment.vue
+++ b/flowable-engine-web/src/components/common/Comment.vue
@@ -22,13 +22,13 @@
                  :on-success="handleUploadSuccess"
                  :before-upload="beforeUpload">
         <i slot="default" class="el-icon-plus"></i>
-        <div slot="file" slot-scope="{file}" style="width: 65px;height: 65px">
+        <div slot="file" slot-scope="{file}" >
           <img style="width: 100%;height: 100%" :src="file.url" alt="">
           <label class="el-upload-list__item-status-label">
             <i class="el-icon-upload-success el-icon-check"></i>
           </label>
           <span class="el-upload-list__item-actions">
-              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                 <i class="el-icon-delete"></i>
               </span>
           </span>
@@ -69,7 +69,7 @@ export default {
     // },
     imageSize: {
       type: Number,
-      default: 10
+      default: 5
     },
     attachmentMaxSize: {
       type: Number,
@@ -194,7 +194,7 @@ export default {
 }
 
 /deep/ .el-upload-list--picture-card {
-  .is-ready {
+  .el-upload-list__item {
     width: 65px !important;
     height: 65px !important;
   }
diff --git a/flowable-engine-web/src/views/common/form/components/ImageUpload.vue b/flowable-engine-web/src/views/common/form/components/ImageUpload.vue
index 4e86269..97d679c 100644
--- a/flowable-engine-web/src/views/common/form/components/ImageUpload.vue
+++ b/flowable-engine-web/src/views/common/form/components/ImageUpload.vue
@@ -38,7 +38,7 @@
       </template>
       <template v-else-if="perm === 'R'">
         <div v-for="(item , index) in _value" :key="index">
-          <img :src="item.url">
+          <img :src="item.url" alt="" style="width: 65px;height: 65px">
         </div>
       </template>
     </template>
diff --git a/flowable-engine-web/src/views/workspace/DisposalTask.vue b/flowable-engine-web/src/views/workspace/DisposalTask.vue
index b16c978..8a71a6e 100644
--- a/flowable-engine-web/src/views/workspace/DisposalTask.vue
+++ b/flowable-engine-web/src/views/workspace/DisposalTask.vue
@@ -29,7 +29,7 @@
           prop="state"
           label="状态">
         <template slot-scope="scope">
-          <el-tag v-if="scope.row.state == 1" >待处理</el-tag>
+          <el-tag v-if="scope.row.state == 1">待处理</el-tag>
           <el-tag v-if="scope.row.state == 4" type="success">已同意</el-tag>
           <el-tag v-if="scope.row.state == 3" type="danger">已拒绝</el-tag>
           <el-tag v-if="scope.row.state == 2" type="warning">已退回</el-tag>
@@ -38,15 +38,53 @@
     </el-table>
     <el-drawer
         title="审批详情"
-        size="50%"
+        size="500px"
         :visible.sync="approveOpen"
         direction="rtl">
       <div v-loading="loading">
+        <div class="top">
+          <div class="top_left">
+            <el-avatar size="large" :src="avatar"></el-avatar>
+            <span style="text-align: center;color: #19191a;font-size: 14px;">Clay</span>
+          </div>
+          <div class="top_right">
+             <div style="margin-bottom: 12px">
+               <span style="font-size: 15px;margin-right: 15px">财务</span>
+               <el-tag style="font-size: 12px" size="mini">进行中</el-tag>
+             </div>
+            <div>
+              <span style="color: rgb(108, 108, 108);" >编号: d69e9582-873f-11ed-b0e7-fa28000d2c27</span>
+            </div>
+          </div>
+        </div>
+        <div style="height: 15px;background:#f5f5f5;"></div>
         <form-render-view ref="taskViewForm" :form-items="taskData.formItems"
                           v-model="taskData.formData"/>
-<!--        <process-diagram-viewer/>-->
-        <el-button type="success" @click="submitTask()">通过</el-button>
-        <el-button type="success" @click="$refs.comment.show()">评论</el-button>
+        <!--        <process-diagram-viewer/>-->
+        <div style="height: 15px;background:#f5f5f5;"></div>
+        <footer class="footer">
+          <div class="footer_comment" @click="$refs.comment.show()">
+            <i class="el-icon-chat-line-round" style="font-size: 18px;"></i>
+            <span style="font-size: 12px;">评论</span>
+          </div>
+          <div style="margin-right: 20px;">
+            <el-dropdown>
+              <span class="el-dropdown-link" style="color: #2a99ff">
+                更多<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item icon="el-icon-s-custom">转交</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-s-release">退回</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-s-check">加签</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-refresh-left">撤销</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+            <el-button type="danger" size="mini" plain round style="margin-left: 20px">拒绝</el-button>
+            <el-button type="primary" size="mini" round @click="submitTask()">同意</el-button>
+          </div>
+          <!--          <el-button type="success" @click="submitTask()">通过</el-button>-->
+          <!--          <el-button type="success" @click="$refs.comment.show()">评论</el-button>-->
+        </footer>
       </div>
     </el-drawer>
     <comment ref="comment" :max-size="5" :attachment-max-size="10" @ok="commentConfirm"/>
@@ -55,9 +93,9 @@
 
 <script>
 import Comment from "../../components/common/Comment";
-import FormRenderView from '@/views/common/form/FormRender'
+import FormRenderView from "@/views/common/form/FormRender";
 import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
-import {addComment, completeTask, getTaskInfo, getTaskList} from "../../api/task";
+import {addComment, completeTask, getTaskInfo, getTaskList} from "@/api/task";
 
 export default {
   name: "DisposalTask",
@@ -71,8 +109,9 @@ export default {
       taskData: {
         formData: {},
         formItems: [],
-        processList: [],
-      }
+        processList: []
+      },
+      avatar: require("@/assets/image/avatar.png")
     };
   },
   created() {
@@ -81,61 +120,105 @@ export default {
   methods: {
     clickRow(row) {
       this.approveOpen = true;
-      this.loadProcessTask(row.taskId)
-      this.selectTask = row
+      this.loadProcessTask(row.taskId);
+      this.selectTask = row;
     },
     getList() {
       getTaskList().then(res => {
-        let data = res.data
-        this.tableData = data.rows
-      })
+        let data = res.data;
+        this.tableData = data.rows;
+      });
     },
     init() {
       this.taskData = {
         formData: {},
         formItems: [],
-        processList: [],
-      }
-      this.loading = true
-      this.$store.state.design = this.taskData
-      this.$store.state.runningList = []
-      this.$store.state.endList = []
-      this.$store.state.noTakeList = []
-      this.$store.state.diagramMode = 'viewer'
+        processList: []
+      };
+      this.loading = true;
+      this.$store.state.design = this.taskData;
+      this.$store.state.runningList = [];
+      this.$store.state.endList = [];
+      this.$store.state.noTakeList = [];
+      this.$store.state.diagramMode = "viewer";
       this.$store.state.preview = false;
     },
     loadProcessTask(taskId) {
-      let that = this
-      this.init()
+      let that = this;
+      this.init();
       getTaskInfo(taskId).then(res => {
-        that.taskData = res.data
-        that.$store.state.design = that.taskData
-        that.$store.state.runningList = that.taskData.runningList
-        that.$store.state.endList = that.taskData.endList
-        that.$store.state.noTakeList = that.taskData.noTakeList
-        this.loading = false
-      })
+        that.taskData = res.data;
+        that.$store.state.design = that.taskData;
+        that.$store.state.runningList = that.taskData.runningList;
+        that.$store.state.endList = that.taskData.endList;
+        that.$store.state.noTakeList = that.taskData.noTakeList;
+        this.loading = false;
+      });
     },
     submitTask() {
       let params = {
         taskId: this.selectTask.taskId,
         formData: JSON.stringify(this.taskData.formData)
-      }
+      };
       completeTask(params).then(res => {
-        this.approveOpen = false
-        this.getList()
-        this.$message.success(res.msg)
-      })
+        this.approveOpen = false;
+        this.getList();
+        this.$message.success(res.msg);
+      });
     },
     commentConfirm(data) {
-      this.$set(data, "taskId", this.selectTask.taskId)
+      this.$set(data, "taskId", this.selectTask.taskId);
       addComment(data).then(res => {
-        this.$message.success(res.msg)
-      })
+        this.$message.success(res.msg);
+      });
     }
   }
 };
 </script>
-<style scoped lang="scss">
 
+<style scoped lang="scss">
+.top{
+  padding: 0 10px 10px 10px;
+  display: flex;
+  .top_left {
+    display: flex;
+    flex-direction: column;
+    width: 50px;
+    align-items: center;
+  }
+  .top_right{
+    display: flex;
+    flex-direction: column;
+    //justify-content: space-between;
+    font-size: 13px;
+    margin-left: 10px;
+  }
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 30px;
+  padding: 15px 0;
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  background: #fff;
+  border-top: 1px solid #dcdfe6;
+  box-shadow: 0 0 15px 0 #dad8d8;
+
+  .footer_comment {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    margin-left: 20px;
+  }
+
+  /deep/ .el-dropdown-menu {
+    top: -5px !important;
+  }
+}
 </style>
diff --git a/flowable-engine-web/src/views/workspace/InitiatedInstance.vue b/flowable-engine-web/src/views/workspace/InitiatedInstance.vue
index 3ba0ff5..e271597 100644
--- a/flowable-engine-web/src/views/workspace/InitiatedInstance.vue
+++ b/flowable-engine-web/src/views/workspace/InitiatedInstance.vue
@@ -61,10 +61,10 @@
 </template>
 
 <script>
-import Comment from "../../components/common/Comment";
+import Comment from "@/components/common/Comment";
 import FormRenderView from '@/views/common/form/FormRender'
 import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
-import {getInitiatedInstanceList} from "../../api/processInstance";
+import {getInitiatedInstanceList} from "@/api/processInstance";
 
 export default {
   name: "InitiatedInstance",
diff --git a/flowable-engine-web/src/views/workspace/WorkSpace.vue b/flowable-engine-web/src/views/workspace/WorkSpace.vue
index 33cbdba..2f06819 100644
--- a/flowable-engine-web/src/views/workspace/WorkSpace.vue
+++ b/flowable-engine-web/src/views/workspace/WorkSpace.vue
@@ -51,7 +51,7 @@
       </el-tab-pane>
     </el-tabs>
 
-    <el-dialog title="发起审批" :visible.sync="openItemDl" :close-on-click-modal="false">
+    <el-dialog title="发起审批" :visible.sync="openItemDl" :close-on-click-modal="true">
       <initiate-process ref="processInstance" :code="selectForm.processDefinitionKey" v-if="openItemDl"></initiate-process>
       <span slot="footer" class="dialog-footer">
 				<el-button size="mini" @click="openItemDl = false">取 消</el-button>
@@ -126,9 +126,10 @@ export default {
       processInstance.validate(valid => {
         if (valid) {
           startProcessInstance(paramsData).then(res=>{
+            this.openItemDl = false
             this.$message.success(res.msg)
             this.$refs.disposalTask.getList()
-            this.openItemDl = false
+
           })
         } else {
           this.$message.warning("请完善表单😥")
-- 
2.40.1