From 6bfd88fc73c8dbaa1db37f534e0fc70130884a47 Mon Sep 17 00:00:00 2001
From: clay <20932067@zju.edu.cn>
Date: Fri, 24 Feb 2023 16:35:51 +0800
Subject: [PATCH 1/3] =?UTF-8?q?clay=20:=20=E6=97=B6=E9=97=B4=E7=BA=BF?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=88=9D=E6=AD=A5=E5=BC=80=E5=8F=91=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 flowable-engine-web/src/api/request.js        |  4 +-
 .../src/views/workspace/DisposalTask.vue      | 92 +++++++++++++++----
 2 files changed, 78 insertions(+), 18 deletions(-)

diff --git a/flowable-engine-web/src/api/request.js b/flowable-engine-web/src/api/request.js
index f8cab19..cda274b 100644
--- a/flowable-engine-web/src/api/request.js
+++ b/flowable-engine-web/src/api/request.js
@@ -11,8 +11,8 @@ Vue.prototype.$axios = axios;
 // 字体图标
 
 export function getBaseUrl(){
-	return "http://gateway.mytwins.top"
-	// return "http://localhost:8000"
+	// return "http://gateway.mytwins.top"
+	return "http://localhost:8000"
 }
 
 const service = axios.create({
diff --git a/flowable-engine-web/src/views/workspace/DisposalTask.vue b/flowable-engine-web/src/views/workspace/DisposalTask.vue
index ed49d4d..49fe8d8 100644
--- a/flowable-engine-web/src/views/workspace/DisposalTask.vue
+++ b/flowable-engine-web/src/views/workspace/DisposalTask.vue
@@ -44,8 +44,8 @@
       <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;">{{ selectTask.initiatorName }}</span>
+            <el-avatar size="large" :src="taskData.userInfo.avatar"></el-avatar>
+            <span style="text-align: center;color: #19191a;font-size: 14px;">{{ taskData.userInfo.name }}</span>
           </div>
           <div class="top_right">
             <div style="margin-bottom: 12px">
@@ -58,15 +58,48 @@
           </div>
         </div>
         <div style="height: 15px;background:#f5f5f5;"></div>
-        <form-render v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
-                          v-model="taskData.formData"/>
+        <div>
+          <form-render v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
+                       v-model="taskData.formData"/>
+        </div>
+        <div style="margin: 10px">
+          <el-timeline>
+            <el-timeline-item  v-for="(operation,index) in taskData.operationList"
+                               :key="index" :timestamp="operation.startTime"
+                               :icon="operation.icon"
+                               :color="operation.color"
+                               size="large"
+                               placement="top">
+              <el-card>
+                <el-avatar size="large" :src="operation.userInfo.avatar"></el-avatar>
+                <p>{{operation.userInfo.name}}</p>
+                <template v-if="operation.operation == 'opinion'">
+                  <h4>{{operation.operationName}}</h4>
+                  <p>王小虎 提交于 2018/4/12 20:46</p>
+                </template>
+                <template v-if="operation.operation == 'comment'">
+                  {{operation.comment}}
+                </template>
+
+
+
+
+              </el-card>
+            </el-timeline-item>
+            <el-timeline-item icon="el-icon-more">
+              <h2>审批进行中</h2>
+            </el-timeline-item>
+
+
+          </el-timeline>
+        </div>
         <div style="height: 15px;background:#f5f5f5;"></div>
         <el-footer class="footer">
           <div class="footer_comment" @click="showCommentBox">
             <i class="el-icon-chat-line-round" style="font-size: 18px;"></i>
             <span style="font-size: 12px;">评论</span>
           </div>
-<!--          <process-diagram-viewer/>-->
+          <!--          <process-diagram-viewer/>-->
           <div style="margin-right: 20px;">
             <el-dropdown>
               <span class="el-dropdown-link" style="color: #2a99ff;cursor: pointer">
@@ -76,7 +109,7 @@
                 <el-dropdown-item icon="el-icon-s-custom" @click.native="showTransferBox()">转交</el-dropdown-item>
                 <el-dropdown-item icon="el-icon-s-release" @click.native="showBackNodeBox()">退回</el-dropdown-item>
                 <el-dropdown-item icon="el-icon-s-check" @click.native="showAddApprovalBox()">加签</el-dropdown-item>
-                <el-dropdown-item icon="el-icon-refresh-left"  @click.native="showRevocationBox()">撤销</el-dropdown-item>
+                <el-dropdown-item icon="el-icon-refresh-left" @click.native="showRevocationBox()">撤销</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
             <el-button type="danger" size="mini" plain round style="margin-left: 20px"
@@ -99,11 +132,11 @@
 import Comment from "../../components/common/Comment";
 import FormRender from "@/views/common/form/FormRender";
 import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
-import {addComment, completeTask, getTaskInfo, getTaskList, refuseTask,rollBackTask} from "@/api/task";
+import {addComment, completeTask, getTaskInfo, getTaskList, refuseTask, rollBackTask} from "@/api/task";
 
 export default {
   name: "DisposalTask",
-  components: { Comment, FormRender, ProcessDiagramViewer},
+  components: {Comment, FormRender, ProcessDiagramViewer},
   data() {
     return {
       approveOpen: false,
@@ -115,9 +148,11 @@ export default {
       },
       loading: false,
       taskData: {
+        userInfo: {},
         formData: {},
         formItems: [],
-        processList: []
+        processList: [],
+        operationList: []
       },
       avatar: require("@/assets/image/avatar.png")
     };
@@ -140,9 +175,11 @@ export default {
     },
     init() {
       this.taskData = {
+        userInfo: {},
         formData: {},
         formItems: [],
-        processList: []
+        processList: [],
+        operationList: []
       };
       this.loading = true;
       this.$store.state.design = this.taskData;
@@ -153,19 +190,42 @@ export default {
       let that = this;
       this.init();
       getTaskInfo(taskId).then(res => {
-        let data=res.data
-        data.formItems.map(item=>{
-          if(item.props.required){
-            item.props.required=!item.props.required
+        let data = res.data
+        data.formItems.map(item => {
+          if (item.props.required) {
+            item.props.required = !item.props.required
           }
           return item
         })
         that.taskData = res.data;
+        for (let operation of that.taskData.operationList) {
+          switch (operation.state) {
+            case 'agree' :
+              this.$set(operation,"icon","el-icon-check")
+              this.$set(operation,"color","#0bbd87")
+              break;
+            case 'process' :
+              this.$set(operation,"icon","el-icon-loading")
+              this.$set(operation,"color","#f78f5f")
+              break;
+            case 'comment' :
+              this.$set(operation,"icon","el-icon-chat-dot-round")
+              this.$set(operation,"color","#0bbd87")
+              break;
+
+            default: break;
+          }
+        }
         that.$store.state.design = that.taskData;
         that.$store.state.userTaskOption = that.taskData.userTaskOption;
         this.loading = false;
       });
     },
+    getTimeLineIcon(operation){
+      switch (operation.state) {
+        case 'agree' : return 'el-icon-check'
+      }
+    },
     submitTask() {
       let params = {
         taskId: this.selectTask.taskId,
@@ -257,13 +317,13 @@ export default {
           break;
       }
     },
-    submitRollBack(data){
+    submitRollBack(data) {
       let params = {
         taskId: this.selectTask.taskId,
         rollBackId: data.rollBackId,
         comment: data,
       };
-      rollBackTask(params).then(res=>{
+      rollBackTask(params).then(res => {
         this.$message.success(res.msg);
       })
     },
-- 
2.40.1


From 14b9e638e32c6d6bb1bf4b748927dc63483e92b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Fri, 24 Feb 2023 17:58:58 +0800
Subject: [PATCH 2/3] =?UTF-8?q?dengjie=20:=20=E8=A7=A3=E5=86=B3=E5=8F=91?=
 =?UTF-8?q?=E8=B5=B7=E5=AE=A1=E6=89=B9=E5=BC=B9=E6=A1=86timeline=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/Test.vue            |  71 +++++++-----
 .../common/form/components/UserPicker.vue     |  12 +-
 .../common/operation/operationRender.vue      | 106 ++++++++++++++++++
 .../src/views/workspace/DisposalTask.vue      |  59 +---------
 4 files changed, 157 insertions(+), 91 deletions(-)
 create mode 100644 flowable-engine-web/src/views/common/operation/operationRender.vue

diff --git a/flowable-engine-web/src/components/common/Test.vue b/flowable-engine-web/src/components/common/Test.vue
index c02c9fd..26d2ccf 100644
--- a/flowable-engine-web/src/components/common/Test.vue
+++ b/flowable-engine-web/src/components/common/Test.vue
@@ -5,13 +5,17 @@
         <div class="candidate" v-loading="loading">
           <div style="padding: 5px 8px;">
             <el-input v-model="filterText" style="width: 100%;" size="small"
-                      clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search"/>
+                      clearable placeholder="输入关键字进行过滤" prefix-icon="el-icon-search" />
+            <div style="margin-top: 5px">
+              <el-button size="mini" type="primary" plain  style="padding:4px 6px;">人员</el-button>
+              <el-button size="mini" type="primary"  plain  style="padding:4px 6px;">部门</el-button>
+            </div>
           </div>
-          <!-- 部门 -->
+          <!-- 人员选择 -->
           <el-empty :image-size="100" description="似乎没有数据" v-show="deptList.length === 0"/>
           <el-scrollbar style="height:350px">
-            <el-tree :data="deptList" ref="tree" :props="deptProps" empty-text="" node-key="deptId" default-expand-all
-                     :show-checkbox="showCheckbox" check-strictly highlight-current
+            <el-tree :data="deptList" ref="tree" :props="deptProps" empty-text="" node-key="value" default-expand-all
+                     :show-checkbox="showCheckbox" highlight-current :check-strictly="multiple===false"
                      @check-change="handleCheckChange" @node-click="(node,check)=>handle(node,check)"
                      :filter-node-method="filterNode">
               <div class="custom-tree-node" slot-scope="{ node }" style="width: 100%">
@@ -20,7 +24,6 @@
             </el-tree>
           </el-scrollbar>
         </div>
-
         <div class="selected">
           <div class="count">
             <span>已选 {{ selectList.length }} 项</span>
@@ -102,7 +105,7 @@ export default {
         // const jsonb = jsona.replace(/"value"/g, '"deptId"') // 修改成你要的字段
         // const jsonc = jsonb.replace(/"label"/g, '"deptName"')
         this.deptList = res.data
-        console.log("获取部门信息===========", this.deptList);
+        // console.log("获取部门信息===========", this.deptList);
       });
     },
     //通过关键字过滤树节点
@@ -111,7 +114,7 @@ export default {
       return data.deptName.indexOf(value) !== -1;
     },
     //用于弹开部门选择
-    showDeptPicker() {
+    showUserPicker() {
       this.visible = true;
     },
     /**
@@ -123,7 +126,7 @@ export default {
       // 左侧有选择框
       if (this.showCheckbox) {
         // 左侧有选择框 + 多选
-        if (this.multiple) {
+        if (this.multiple ) {
           //不添加重复的数据到右边
           for (let i = 0; i < this.selectList.length; i++) {
             if (this.selectList[i].value === data.value) {
@@ -132,7 +135,9 @@ export default {
             }
           }
           if (checked) {
-            this.selectList.push(data);
+            if(data.children === undefined){
+              this.selectList.push(data);
+            }
           } else if (data === '1') {
             this.$refs.tree.setCheckedKeys([]);
             this.selectList = [];
@@ -147,10 +152,11 @@ export default {
           }
           if (checked) {
             this.$refs.tree.setCheckedNodes([data]);
+            // this.$refs.tree.setCheckedKeys([]);
             this.selectList = [data];
           } else if (data === '1') {
-            this.$refs.tree.setCheckedKeys([]);
             this.selectList = [];
+            this.$refs.tree.setCheckedKeys([]);
           }
         }
       }
@@ -164,19 +170,21 @@ export default {
      * @param check checked(checkbox选择框)是否选中
      */
     handle(node, check) {
-      if (this.multiple) {
-        //不添加重复的数据到右边
-        for (let i = 0; i < this.selectList.length; i++) {
-          if (this.selectList[i].value === node.value) {
-            this.selectList.splice(i, 1);
-            break;
+      if (check.isLeaf !== false) {
+        if (this.multiple) {
+          //不添加重复的数据到右边
+          for (let i = 0; i < this.selectList.length; i++) {
+            if (this.selectList[i].value === node.value) {
+              this.selectList.splice(i, 1);
+              break;
+            }
           }
+          check.checked = true
+          this.selectList.push(node);
+        } else {
+          check.checked = true
+          this.selectList = [node];
         }
-        check.checked = true
-        this.selectList.push(node);
-      } else {
-        check.checked = true
-        this.selectList = [node];
       }
       this._value = this.selectList
     },
@@ -203,9 +211,10 @@ export default {
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
-        this.handleCheckChange("1");
         if (!this.showCheckbox) {
           this.selectList = []
+        }else {
+          this.handleCheckChange("1");
         }
       });
     },
@@ -221,15 +230,15 @@ export default {
 <style lang="less" scoped>
 @containWidth: 278px;
 
-/deep/ .el-tree-node {
-  .is-leaf + .el-checkbox .el-checkbox__inner {
-    display: inline-block;
-  }
-
-  .el-checkbox .el-checkbox__inner {
-    display: none;
-  }
-}
+///deep/ .el-tree-node {
+//  .is-leaf + .el-checkbox .el-checkbox__inner {
+//    display: inline-block;
+//  }
+//
+//  .el-checkbox .el-checkbox__inner {
+//    display: none;
+//  }
+//}
 
 /deep/ .el-dialog__body {
   padding: 10px 20px;
diff --git a/flowable-engine-web/src/views/common/form/components/UserPicker.vue b/flowable-engine-web/src/views/common/form/components/UserPicker.vue
index b5939d1..12dc42e 100644
--- a/flowable-engine-web/src/views/common/form/components/UserPicker.vue
+++ b/flowable-engine-web/src/views/common/form/components/UserPicker.vue
@@ -6,15 +6,17 @@
     </template>
     <template v-else>
       <template v-if="perm === 'E'">
-        <el-button icon="el-icon-user" type="primary" size="mini" round @click="$refs.orgPicker.show()">选择人员</el-button>
-        <org-picker type="user" :multiple="multiple" ref="orgPicker" :selected="_value" @ok="selected"/>
+        <el-button icon="el-icon-user" type="primary" size="mini" round @click="$refs.userPicker.showUserPicker()">选择人员</el-button>
+        <org-picker type="user" :multiple="multiple" ref="userPicker" :selected="_value" @ok="selected"/>
         <span class="placeholder"> {{placeholder}}</span>
         <div style="margin-top: 5px">
-          <el-tag size="mini" style="margin: 5px" closable v-for="(dept, i) in _value" :key="i" @close="delDept(i)">{{dept.name}}</el-tag>
+          <el-tag size="mini" style="margin: 5px" closable v-for="(user, i) in _value" :key="i" @close="delDept(i)">{{user.label}}</el-tag>
         </div>
       </template>
       <template v-else-if="perm === 'R'">
-        {{ _value }}
+        <div v-for="(user, i) in _value" :key="i">
+          {{user.label}}
+        </div>
       </template>
     </template>
   </div>
@@ -29,7 +31,7 @@ import OrgPicker from "@/components/common/Test";
 
 export default {
   mixins: [componentMinxins],
-  name: "DeptPicker",
+  name: "UserPicker",
   components: {OrgPicker},
   props: {
     value:{
diff --git a/flowable-engine-web/src/views/common/operation/operationRender.vue b/flowable-engine-web/src/views/common/operation/operationRender.vue
new file mode 100644
index 0000000..e51c87d
--- /dev/null
+++ b/flowable-engine-web/src/views/common/operation/operationRender.vue
@@ -0,0 +1,106 @@
+<template>
+  <div style="margin: 10px">
+    <el-timeline>
+      <el-timeline-item v-for="(operation,index) in operationList"
+                        :key="index" :timestamp="operation.startTime"
+                        :icon="operation.icon"
+                        :color="operation.color"
+                        size="large"
+                        placement="top">
+        <el-card>
+          <div style="display: flex;">
+            <div>
+              <el-avatar size="large" :src="operation.userInfo.avatar"></el-avatar>
+            </div>
+            <div style="margin-left: 10px;">
+              <div style="color: #c0bebe">{{ operation.userInfo.name }}</div>
+              <div style="font-size: 16px; font-weight: bold;">{{ operation.operationName }}</div>
+            </div>
+          </div>
+          <!--                <template v-if="operation.operation == 'opinion'">-->
+          <!--                  <h4>{{operation.operationName}}</h4>-->
+          <!--                  <p>王小虎 提交于 2018/4/12 20:46</p>-->
+          <!--                </template>-->
+          <template v-if="operation.operation == 'comment'">
+            <div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">
+              <div>
+                {{ operation.comment.context }}
+              </div>
+              <div style="margin-top: 10px;" v-if="operation.comment.attachments.length > 0">
+                <template v-for="(item) in getAttachmentList(operation.comment.attachments,true)">
+                    <el-image
+                        style="width: 100px; height: 100px"
+                        :src="item.url"
+                        :preview-src-list="[item.url]">
+                    </el-image>
+                </template>
+                <div  v-for="(file) in getAttachmentList(operation.comment.attachments,false)">
+                  <el-link style="color: #2a99ff" :href="file.url" icon="el-icon-document" >{{file.name}}</el-link>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-card>
+      </el-timeline-item>
+      <el-timeline-item icon="el-icon-more">
+        <h2>审批进行中</h2>
+      </el-timeline-item>
+
+
+    </el-timeline>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props:{
+    operationList:{
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  name: "operationRender",
+  created() {
+    for (let operation of this.operationList) {
+      switch (operation.state) {
+        case 'agree' :
+          this.$set(operation, "icon", "el-icon-check")
+          this.$set(operation, "color", "#0bbd87")
+          break;
+        case 'process' :
+          this.$set(operation, "icon", "el-icon-loading")
+          this.$set(operation, "color", "#f78f5f")
+          break;
+        case 'comment' :
+          this.$set(operation, "icon", "el-icon-chat-dot-round")
+          this.$set(operation, "color", "#0bbd87")
+          break;
+        default:
+          break;
+      }
+    }
+  },
+  methods: {
+    getAttachmentList(attachments,image){
+      let result = [];
+      for (let attachment of attachments) {
+        if (attachment.isImage === image){
+          result.push(attachment)
+        }
+      }
+      return result;
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+/deep/ .el-card__body, .el-main {
+  padding: 10px;
+}
+
+</style>
diff --git a/flowable-engine-web/src/views/workspace/DisposalTask.vue b/flowable-engine-web/src/views/workspace/DisposalTask.vue
index 49fe8d8..d3f4caf 100644
--- a/flowable-engine-web/src/views/workspace/DisposalTask.vue
+++ b/flowable-engine-web/src/views/workspace/DisposalTask.vue
@@ -62,37 +62,8 @@
           <form-render v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
                        v-model="taskData.formData"/>
         </div>
-        <div style="margin: 10px">
-          <el-timeline>
-            <el-timeline-item  v-for="(operation,index) in taskData.operationList"
-                               :key="index" :timestamp="operation.startTime"
-                               :icon="operation.icon"
-                               :color="operation.color"
-                               size="large"
-                               placement="top">
-              <el-card>
-                <el-avatar size="large" :src="operation.userInfo.avatar"></el-avatar>
-                <p>{{operation.userInfo.name}}</p>
-                <template v-if="operation.operation == 'opinion'">
-                  <h4>{{operation.operationName}}</h4>
-                  <p>王小虎 提交于 2018/4/12 20:46</p>
-                </template>
-                <template v-if="operation.operation == 'comment'">
-                  {{operation.comment}}
-                </template>
-
-
-
-
-              </el-card>
-            </el-timeline-item>
-            <el-timeline-item icon="el-icon-more">
-              <h2>审批进行中</h2>
-            </el-timeline-item>
-
-
-          </el-timeline>
-        </div>
+        <div style="height: 15px;background:#f5f5f5;"></div>
+        <operation-render v-if="!loading" :operation-list="taskData.operationList"/>
         <div style="height: 15px;background:#f5f5f5;"></div>
         <el-footer class="footer">
           <div class="footer_comment" @click="showCommentBox">
@@ -133,10 +104,11 @@ import Comment from "../../components/common/Comment";
 import FormRender from "@/views/common/form/FormRender";
 import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
 import {addComment, completeTask, getTaskInfo, getTaskList, refuseTask, rollBackTask} from "@/api/task";
+import OperationRender from "@/views/common/operation/operationRender";
 
 export default {
   name: "DisposalTask",
-  components: {Comment, FormRender, ProcessDiagramViewer},
+  components: {OperationRender, Comment, FormRender, ProcessDiagramViewer},
   data() {
     return {
       approveOpen: false,
@@ -198,34 +170,11 @@ export default {
           return item
         })
         that.taskData = res.data;
-        for (let operation of that.taskData.operationList) {
-          switch (operation.state) {
-            case 'agree' :
-              this.$set(operation,"icon","el-icon-check")
-              this.$set(operation,"color","#0bbd87")
-              break;
-            case 'process' :
-              this.$set(operation,"icon","el-icon-loading")
-              this.$set(operation,"color","#f78f5f")
-              break;
-            case 'comment' :
-              this.$set(operation,"icon","el-icon-chat-dot-round")
-              this.$set(operation,"color","#0bbd87")
-              break;
-
-            default: break;
-          }
-        }
         that.$store.state.design = that.taskData;
         that.$store.state.userTaskOption = that.taskData.userTaskOption;
         this.loading = false;
       });
     },
-    getTimeLineIcon(operation){
-      switch (operation.state) {
-        case 'agree' : return 'el-icon-check'
-      }
-    },
     submitTask() {
       let params = {
         taskId: this.selectTask.taskId,
-- 
2.40.1


From 6dc15b6ae07c87825b1e1942a1c3c27d42916f80 Mon Sep 17 00:00:00 2001
From: clay <20932067@zju.edu.cn>
Date: Fri, 24 Feb 2023 22:28:44 +0800
Subject: [PATCH 3/3] =?UTF-8?q?clay=20:=20=E5=85=B3=E4=BA=8E=E6=88=91?=
 =?UTF-8?q?=E7=9A=84=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/processInstance.js                |   9 +-
 .../src/views/common/form/FormRenderView.vue  |  14 +-
 .../common/operation/OperationRender.vue      | 155 ++++++++++++++
 .../common/operation/operationRender.vue      | 106 ---------
 .../src/views/workspace/AboutInstance.vue     | 201 ++++++++++++++++++
 .../src/views/workspace/DisposalTask.vue      |  75 ++++---
 .../src/views/workspace/InitiatedInstance.vue |  44 ++--
 .../src/views/workspace/WorkSpace.vue         |   9 +-
 8 files changed, 444 insertions(+), 169 deletions(-)
 create mode 100644 flowable-engine-web/src/views/common/operation/OperationRender.vue
 delete mode 100644 flowable-engine-web/src/views/common/operation/operationRender.vue
 create mode 100644 flowable-engine-web/src/views/workspace/AboutInstance.vue

diff --git a/flowable-engine-web/src/api/processInstance.js b/flowable-engine-web/src/api/processInstance.js
index 70468e2..1c9b07e 100644
--- a/flowable-engine-web/src/api/processInstance.js
+++ b/flowable-engine-web/src/api/processInstance.js
@@ -13,6 +13,13 @@ export function startProcessInstance(param) {
     })
 }
 
+export function getAboutInstanceList() {
+    return request({
+        url: "/flowable/process/instance/about",
+        method: "get",
+    })
+}
+
 export function getInitiatedInstanceList() {
     return request({
         url: "/flowable/process/instance/self",
@@ -22,7 +29,7 @@ export function getInitiatedInstanceList() {
 
 export function getInitiatedInstanceInfo(processInstanceId) {
     return request({
-        url: "/flowable/process/instance/self/info/"+processInstanceId,
+        url: "/flowable/process/instance/info/"+processInstanceId,
         method: "get",
     })
 }
diff --git a/flowable-engine-web/src/views/common/form/FormRenderView.vue b/flowable-engine-web/src/views/common/form/FormRenderView.vue
index 0f80e55..2d569fa 100644
--- a/flowable-engine-web/src/views/common/form/FormRenderView.vue
+++ b/flowable-engine-web/src/views/common/form/FormRenderView.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form ref="form" class="process-form" label-position="top" :rules="rules" :model="_value">
+  <el-form ref="form" class="process-form" label-position="top" :model="_value">
     <div v-for="(item, index) in formItems" :key="item.name + index">
       <el-form-item v-if="item.name !== 'SpanLayout' && item.name !== 'Description'"
                     :prop="item.id" :label="item.title">
@@ -43,11 +43,6 @@ export default {
       }
     }
   },
-  data() {
-    return {
-      rules: {},
-    }
-  },
   computed: {
     _value: {
       get() {
@@ -71,13 +66,6 @@ export default {
           if (this.isPreview){
             this.$set(item, 'perm', this.model)
           }
-          if (item.props.required && this.model === "E") {
-            this.$set(this.rules, item.id, [{
-              type: item.valueType === 'Array' ? 'array' : undefined,
-              required: true,
-              message: `请填写${item.title}`, trigger: 'blur'
-            }])
-          }
         }
       })
     }
diff --git a/flowable-engine-web/src/views/common/operation/OperationRender.vue b/flowable-engine-web/src/views/common/operation/OperationRender.vue
new file mode 100644
index 0000000..dfb0b75
--- /dev/null
+++ b/flowable-engine-web/src/views/common/operation/OperationRender.vue
@@ -0,0 +1,155 @@
+<template>
+  <div style="margin: 10px">
+    <el-timeline>
+      <el-timeline-item v-for="(operation,index) in operationList"
+                        :key="index" :timestamp="operation.startTime"
+                        :icon="operation.icon"
+                        :color="operation.color"
+                        size="large"
+                        placement="top">
+        <el-card>
+          <div style="display: flex;">
+            <div>
+              <el-avatar size="large" :src="operation.userInfo.avatar"></el-avatar>
+            </div>
+            <div style="margin-left: 10px;">
+              <div style="color: #c0bebe">{{ operation.userInfo.name }}</div>
+              <div style="font-size: 16px; font-weight: bold;">{{ operation.operationName }}</div>
+            </div>
+          </div>
+          <template v-if="operation.operation === 'comment' || operation.operation === 'refuse'">
+            <div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">
+              <div>
+                {{ operation.comment.context }}
+              </div>
+              <div style="margin-top: 10px;" v-if="operation.comment.attachments.length > 0">
+                <template v-for="(item) in getAttachmentList(operation.comment.attachments,true)">
+                  <el-image
+                      style="width: 100px; height: 100px"
+                      :src="item.url"
+                      :preview-src-list="[item.url]">
+                  </el-image>
+                </template>
+                <div v-for="(file) in getAttachmentList(operation.comment.attachments,false)">
+                  <el-link style="color: #2a99ff" :href="file.url" icon="el-icon-document">{{ file.name }}</el-link>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-card>
+      </el-timeline-item>
+      <el-timeline-item :color="timeline.color" :icon="timeline.icon" size="large">
+        <el-card style="font-size: 16px;font-weight: bold;">
+          {{ timeline.context }}
+        </el-card>
+      </el-timeline-item>
+    </el-timeline>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "OperationRender",
+  props: {
+    operationList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    state: {
+      type: String,
+      default: () => {
+        return '1'
+      }
+    }
+  },
+  data() {
+    return {
+      timeline: {}
+    }
+  },
+  created() {
+
+
+    switch (this.state) {
+      case '1':
+        this.timeline = {
+          color: '#f78f5f',
+          icon: 'el-icon-more',
+          context: '审批进行中'
+        }
+        break
+      case '2':
+        this.timeline = {
+          color: '#0bbd87',
+          icon: 'el-icon-check',
+          context: '审批通过'
+        }
+        break
+      case '3':
+        this.timeline = {
+          color: '#f56c6c',
+          icon: 'el-icon-close',
+          context: '审核已驳回'
+        }
+        break
+      case '4':
+        this.timeline = {
+          color: '#0bbd87',
+          icon: 'el-icon-check',
+          context: '审批通过'
+        }
+        break
+      default:
+        break
+    }
+
+    for (let operation of this.operationList) {
+      let state = operation.state
+      let type = operation.operation
+
+      if (state === 'agree') {
+        this.$set(operation, "icon", "el-icon-check")
+        this.$set(operation, "color", "#0bbd87")
+      }
+      if (state === 'process') {
+        this.$set(operation, "icon", "el-icon-loading")
+        this.$set(operation, "color", "#f78f5f")
+      }
+      if (state === 'comment') {
+        this.$set(operation, "icon", "el-icon-chat-dot-round")
+        this.$set(operation, "color", "#0bbd87")
+      }
+      if (state === 'refuse' && type === 'comment') {
+        this.$set(operation, "icon", "el-icon-chat-dot-round")
+        this.$set(operation, "color", "#f56c6c")
+      }
+      if (state === 'refuse' && type === 'opinion') {
+        this.$set(operation, "icon", "el-icon-close")
+        this.$set(operation, "color", "#f56c6c")
+      }
+    }
+  },
+  methods: {
+    getAttachmentList(attachments, image) {
+      let result = [];
+      for (let attachment of attachments) {
+        if (attachment.isImage === image) {
+          result.push(attachment)
+        }
+      }
+      return result;
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+/deep/ .el-card__body, .el-main {
+  padding: 10px;
+}
+
+</style>
diff --git a/flowable-engine-web/src/views/common/operation/operationRender.vue b/flowable-engine-web/src/views/common/operation/operationRender.vue
deleted file mode 100644
index e51c87d..0000000
--- a/flowable-engine-web/src/views/common/operation/operationRender.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-  <div style="margin: 10px">
-    <el-timeline>
-      <el-timeline-item v-for="(operation,index) in operationList"
-                        :key="index" :timestamp="operation.startTime"
-                        :icon="operation.icon"
-                        :color="operation.color"
-                        size="large"
-                        placement="top">
-        <el-card>
-          <div style="display: flex;">
-            <div>
-              <el-avatar size="large" :src="operation.userInfo.avatar"></el-avatar>
-            </div>
-            <div style="margin-left: 10px;">
-              <div style="color: #c0bebe">{{ operation.userInfo.name }}</div>
-              <div style="font-size: 16px; font-weight: bold;">{{ operation.operationName }}</div>
-            </div>
-          </div>
-          <!--                <template v-if="operation.operation == 'opinion'">-->
-          <!--                  <h4>{{operation.operationName}}</h4>-->
-          <!--                  <p>王小虎 提交于 2018/4/12 20:46</p>-->
-          <!--                </template>-->
-          <template v-if="operation.operation == 'comment'">
-            <div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">
-              <div>
-                {{ operation.comment.context }}
-              </div>
-              <div style="margin-top: 10px;" v-if="operation.comment.attachments.length > 0">
-                <template v-for="(item) in getAttachmentList(operation.comment.attachments,true)">
-                    <el-image
-                        style="width: 100px; height: 100px"
-                        :src="item.url"
-                        :preview-src-list="[item.url]">
-                    </el-image>
-                </template>
-                <div  v-for="(file) in getAttachmentList(operation.comment.attachments,false)">
-                  <el-link style="color: #2a99ff" :href="file.url" icon="el-icon-document" >{{file.name}}</el-link>
-                </div>
-              </div>
-            </div>
-          </template>
-        </el-card>
-      </el-timeline-item>
-      <el-timeline-item icon="el-icon-more">
-        <h2>审批进行中</h2>
-      </el-timeline-item>
-
-
-    </el-timeline>
-  </div>
-</template>
-
-<script>
-
-export default {
-  props:{
-    operationList:{
-      type: Array,
-      default: () => {
-        return []
-      }
-    }
-  },
-  name: "operationRender",
-  created() {
-    for (let operation of this.operationList) {
-      switch (operation.state) {
-        case 'agree' :
-          this.$set(operation, "icon", "el-icon-check")
-          this.$set(operation, "color", "#0bbd87")
-          break;
-        case 'process' :
-          this.$set(operation, "icon", "el-icon-loading")
-          this.$set(operation, "color", "#f78f5f")
-          break;
-        case 'comment' :
-          this.$set(operation, "icon", "el-icon-chat-dot-round")
-          this.$set(operation, "color", "#0bbd87")
-          break;
-        default:
-          break;
-      }
-    }
-  },
-  methods: {
-    getAttachmentList(attachments,image){
-      let result = [];
-      for (let attachment of attachments) {
-        if (attachment.isImage === image){
-          result.push(attachment)
-        }
-      }
-      return result;
-    },
-  }
-}
-</script>
-
-<style scoped>
-
-/deep/ .el-card__body, .el-main {
-  padding: 10px;
-}
-
-</style>
diff --git a/flowable-engine-web/src/views/workspace/AboutInstance.vue b/flowable-engine-web/src/views/workspace/AboutInstance.vue
new file mode 100644
index 0000000..7572285
--- /dev/null
+++ b/flowable-engine-web/src/views/workspace/AboutInstance.vue
@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <el-table :data="tableData"
+              @row-click="clickRow"
+              style="width: 100%">
+      <el-table-column
+          prop="deploymentName"
+          label="审批类型"
+          width="180"/>
+      <el-table-column
+          prop="approveName"
+          label="发起人"
+          width="180"/>
+      <el-table-column
+          prop="submitTime"
+          label="提交时间"/>
+      <el-table-column
+          prop="endTime"
+          label="结束时间"/>
+      <el-table-column
+          prop="taskName"
+          label="当前节点"/>
+      <el-table-column
+          label="处理耗时">
+        <template slot-scope="scope">
+          {{ getTimeConsuming(scope.row) }}
+        </template>
+      </el-table-column>
+      <el-table-column
+          prop="state"
+          label="状态">
+        <template slot-scope="scope">
+          <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="info">已撤销</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+          label="操作">
+        <template slot-scope="scope">
+          <el-button size="min" type="text" icon="el-icon-thumb">再次提交</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-drawer
+        title="审批详情"
+        size="500px"
+        :visible.sync="approveOpen"
+        direction="rtl">
+      <div v-loading="loading">
+        <div class="top">
+          <div class="top_left">
+            <el-avatar size="large" :src="processInstanceData.userInfo.avatar"></el-avatar>
+            <span style="text-align: center;color: #19191a;font-size: 14px;">{{ processInstanceData.userInfo.name }}</span>
+          </div>
+          <div class="top_right">
+            <div style="margin-bottom: 12px">
+              <span style="font-size: 15px;">{{ selectProcessInstance.deploymentName }}</span>
+              <el-tag class="state_tag" v-if="selectProcessInstance.state === '1'" size="mini" >进行中</el-tag>
+              <el-tag class="state_tag" v-if="selectProcessInstance.state === '4'" size="mini" type="success">审批通过</el-tag>
+              <el-tag class="state_tag" v-if="selectProcessInstance.state === '3'" size="mini" type="danger">审批驳回</el-tag>
+              <el-tag class="state_tag" v-if="selectProcessInstance.state === '2'" size="mini" type="info">已撤销</el-tag>
+              <el-tooltip class="item" effect="dark" content="查看详细流程" placement="top-start">
+                <el-icon class="el-icon-view" style="float: right;font-size: 20px;cursor: pointer" @click.native="processDiagramViewer = true"></el-icon>
+              </el-tooltip>
+            </div>
+            <div>
+              <span style="color: rgb(108, 108, 108);">编号: {{ selectProcessInstance.processInstanceId }}</span>
+            </div>
+          </div>
+        </div>
+        <div style="height: 15px;background:#f5f5f5;"></div>
+        <form-render-view v-if="!loading" ref="taskViewForm" :form-items="processInstanceData.formItems"
+                          v-model="processInstanceData.formData"/>
+        <div style="height: 15px;background:#f5f5f5;"></div>
+        <operation-render v-if="!loading"
+                          :operation-list="processInstanceData.operationList"
+                          :state="selectProcessInstance.state"/>
+        <div style="height: 15px;background:#f5f5f5;"></div>
+      </div>
+    </el-drawer>
+
+    <el-dialog title="流程详情" :visible.sync="processDiagramViewer" :close-on-click-modal="true">
+      <process-diagram-viewer v-if="processDiagramViewer"/>
+      <div style="height: 70px;"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import FormRenderView from '@/views/common/form/FormRender'
+import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
+import {getAboutInstanceList, getInitiatedInstanceInfo} from "@/api/processInstance";
+import {timeLength} from '@/utils/date'
+import OperationRender from "../common/operation/OperationRender";
+export default {
+  name: "AboutInstance",
+  components: {OperationRender, FormRenderView, ProcessDiagramViewer},
+  data() {
+    return {
+      approveOpen: false,
+      processDiagramViewer: false,
+      selectProcessInstance: {},
+      tableData: [],
+      loading: false,
+      processInstanceData: {
+        userInfo: {},
+        formData: {},
+        formItems: [],
+        processList: [],
+        operationList: [],
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    clickRow(row) {
+      this.approveOpen = true;
+      this.loadProcessInstance(row.processInstanceId)
+      this.selectProcessInstance = row
+    },
+    loadProcessInstance(processInstanceId) {
+      let that = this;
+      this.init();
+      getInitiatedInstanceInfo(processInstanceId).then(res => {
+        let data = res.data
+        that.processInstanceData = data
+        that.$store.state.design = data;
+        that.$store.state.runningList = data.runningList;
+        that.$store.state.endList = data.endList;
+        that.$store.state.noTakeList = data.noTakeList;
+        this.loading = false;
+        console.log(data, "获取到的结果数据")
+      })
+    },
+
+
+    init() {
+      this.processInstanceData = {
+        userInfo: {},
+        formData: {},
+        formItems: [],
+        processList: [],
+        operationList: [],
+      };
+      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;
+    },
+
+    getList() {
+      getAboutInstanceList().then(res => {
+        let data = res.data
+        this.tableData = data.rows
+      })
+    },
+    getTimeConsuming(instance) {
+      if (instance.state != 1) {
+        //dateFormat(开始时间,结束时间)
+        return timeLength(instance.submitTime,instance.endTime);
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.top {
+  padding: 0 10px 10px 10px;
+  display: flex;
+
+.top_left {
+  display: flex;
+  flex-direction: column;
+  width: 50px;
+  align-items: center;
+}
+
+.top_right {
+  width: 85%;
+  display: flex;
+  flex-direction: column;
+//justify-content: space-between;
+  font-size: 13px;
+  margin-left: 10px;
+}
+}
+
+.state_tag{
+  font-size: 12px;
+  //margin-right: 15px;
+}
+
+</style>
diff --git a/flowable-engine-web/src/views/workspace/DisposalTask.vue b/flowable-engine-web/src/views/workspace/DisposalTask.vue
index d3f4caf..4e7c534 100644
--- a/flowable-engine-web/src/views/workspace/DisposalTask.vue
+++ b/flowable-engine-web/src/views/workspace/DisposalTask.vue
@@ -29,10 +29,10 @@
           prop="state"
           label="状态">
         <template slot-scope="scope">
-          <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>
+          <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>
         </template>
       </el-table-column>
     </el-table>
@@ -50,7 +50,12 @@
           <div class="top_right">
             <div style="margin-bottom: 12px">
               <span style="font-size: 15px;margin-right: 15px">{{ selectTask.processName }}</span>
-              <el-tag style="font-size: 12px" size="mini">进行中</el-tag>
+
+              <el-tag class="state_tag" size="mini" v-if="selectTask.state === '1'">进行中</el-tag>
+              <el-tag class="state_tag" size="mini" v-if="selectTask.state === '4'" type="success">审批通过</el-tag>
+              <el-tag class="state_tag" size="mini" v-if="selectTask.state === '3'" type="danger">审批驳回</el-tag>
+              <el-tag class="state_tag" size="mini" v-if="selectTask.state === '2'" type="info">已撤销</el-tag>
+<!--              <el-tag style="font-size: 12px" size="mini">进行中</el-tag>-->
             </div>
             <div>
               <span style="color: rgb(108, 108, 108);">编号: {{ selectTask.taskId }}</span>
@@ -59,11 +64,13 @@
         </div>
         <div style="height: 15px;background:#f5f5f5;"></div>
         <div>
-          <form-render v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
-                       v-model="taskData.formData"/>
+          <form-render-view v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
+                            v-model="taskData.formData"/>
         </div>
         <div style="height: 15px;background:#f5f5f5;"></div>
-        <operation-render v-if="!loading" :operation-list="taskData.operationList"/>
+        <operation-render v-if="!loading"
+                          :operation-list="taskData.operationList"
+                          :state="selectTask.state"/>
         <div style="height: 15px;background:#f5f5f5;"></div>
         <el-footer class="footer">
           <div class="footer_comment" @click="showCommentBox">
@@ -101,14 +108,14 @@
 
 <script>
 import Comment from "../../components/common/Comment";
-import FormRender from "@/views/common/form/FormRender";
 import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
 import {addComment, completeTask, getTaskInfo, getTaskList, refuseTask, rollBackTask} from "@/api/task";
-import OperationRender from "@/views/common/operation/operationRender";
+import OperationRender from "@/views/common/operation/OperationRender";
+import FormRenderView from "../common/form/FormRenderView";
 
 export default {
   name: "DisposalTask",
-  components: {OperationRender, Comment, FormRender, ProcessDiagramViewer},
+  components: {FormRenderView, OperationRender, Comment, ProcessDiagramViewer},
   data() {
     return {
       approveOpen: false,
@@ -232,7 +239,28 @@ export default {
       this.$refs.comment.show()
     },
     /**
-     * 拒绝提交
+     * 评论回调
+     * @param data
+     * @param type
+     */
+    commentConfirm(data, type) {
+      switch (type) {
+        case 1:
+          this.submitComment(data);
+          break;
+        case 2:
+          this.submitRefuse(data);
+          break;
+        case 4:
+          this.submitRollBack(data);
+          break;
+        default :
+          break;
+      }
+    },
+
+    /**
+     * 拒绝任务
      * @param data
      */
     submitRefuse(data) {
@@ -247,25 +275,8 @@ export default {
       })
     },
     /**
-     * 评论回调
-     * @param data
-     * @param type
+     * 回退
      */
-    commentConfirm(data, type) {
-      switch (type) {
-        case 1:
-          this.submitComment(data);
-          break;
-        case 2:
-          this.submitRollBack(data);
-          break;
-        case 3:
-          this.submitRefuse(data);
-          break;
-        default :
-          break;
-      }
-    },
     submitRollBack(data) {
       let params = {
         taskId: this.selectTask.taskId,
@@ -273,6 +284,8 @@ export default {
         comment: data,
       };
       rollBackTask(params).then(res => {
+        this.approveOpen = false;
+        this.getList();
         this.$message.success(res.msg);
       })
     },
@@ -283,6 +296,7 @@ export default {
     submitComment(data) {
       this.$set(data, "taskId", this.selectTask.taskId);
       addComment(data).then(res => {
+        this.approveOpen = false;
         this.$message.success(res.msg);
       });
     }
@@ -291,6 +305,7 @@ export default {
 </script>
 
 <style scoped lang="less">
+
 .top {
   padding: 0 10px 10px 10px;
   display: flex;
diff --git a/flowable-engine-web/src/views/workspace/InitiatedInstance.vue b/flowable-engine-web/src/views/workspace/InitiatedInstance.vue
index 1f29a27..afefc55 100644
--- a/flowable-engine-web/src/views/workspace/InitiatedInstance.vue
+++ b/flowable-engine-web/src/views/workspace/InitiatedInstance.vue
@@ -1,3 +1,4 @@
+<script src="../../api/processInstance.js"></script>
 <template>
   <div>
     <el-table :data="tableData"
@@ -30,10 +31,10 @@
           prop="state"
           label="状态">
         <template slot-scope="scope">
-          <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="info">已撤销</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="info">已撤销</el-tag>
         </template>
       </el-table-column>
       <el-table-column
@@ -51,27 +52,32 @@
       <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;">{{ selectProcessInstance.approveName }}</span>
+            <el-avatar size="large" :src="processInstanceData.userInfo.avatar"></el-avatar>
+            <span style="text-align: center;color: #19191a;font-size: 14px;">{{ processInstanceData.userInfo.name }}</span>
           </div>
           <div class="top_right">
             <div style="margin-bottom: 12px">
               <span style="font-size: 15px;">{{ selectProcessInstance.deploymentName }}</span>
-              <el-tag style="font-size: 12px;margin:0 15px;" size="mini" type="success" v-if="selectProcessInstance.state==4">审批通过</el-tag>
-              <el-tag style="font-size: 12px;margin:0 15px;" size="mini" v-else >进行中</el-tag>
+              <el-tag class="state_tag" v-if="selectProcessInstance.state === '1'" size="mini" >进行中</el-tag>
+              <el-tag class="state_tag" v-if="selectProcessInstance.state === '4'" size="mini" type="success">审批通过</el-tag>
+              <el-tag class="state_tag" v-if="selectProcessInstance.state === '3'" size="mini" type="danger">审批驳回</el-tag>
+              <el-tag class="state_tag" v-if="selectProcessInstance.state === '2'" size="mini" type="info">已撤销</el-tag>
               <el-tooltip class="item" effect="dark" content="查看详细流程" placement="top-start">
                 <el-icon class="el-icon-view" style="float: right;font-size: 20px;cursor: pointer" @click.native="processDiagramViewer = true"></el-icon>
               </el-tooltip>
             </div>
             <div>
-              <span style="color: rgb(108, 108, 108);">编号: {{ selectProcessInstance.taskId }}</span>
+              <span style="color: rgb(108, 108, 108);">编号: {{ selectProcessInstance.processInstanceId }}</span>
             </div>
           </div>
         </div>
         <div style="height: 15px;background:#f5f5f5;"></div>
-        <form-render-view ref="taskViewForm" :form-items="processInstanceData.formItems"
+        <form-render-view v-if="!loading" ref="taskViewForm" :form-items="processInstanceData.formItems"
                           v-model="processInstanceData.formData"/>
-<!--        <process-diagram-viewer v-if="!loading"/>-->
+        <div style="height: 15px;background:#f5f5f5;"></div>
+        <operation-render v-if="!loading"
+                          :operation-list="processInstanceData.operationList"
+                          :state="selectProcessInstance.state"/>
         <div style="height: 15px;background:#f5f5f5;"></div>
       </div>
     </el-drawer>
@@ -84,14 +90,14 @@
 </template>
 
 <script>
-import Comment from "@/components/common/Comment";
 import FormRenderView from '@/views/common/form/FormRender'
 import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
 import {getInitiatedInstanceList, getInitiatedInstanceInfo} from "@/api/processInstance";
 import {timeLength} from '@/utils/date'
+import OperationRender from "../common/operation/OperationRender";
 export default {
   name: "InitiatedInstance",
-  components: {Comment, FormRenderView, ProcessDiagramViewer},
+  components: {OperationRender, FormRenderView, ProcessDiagramViewer},
   data() {
     return {
       approveOpen: false,
@@ -100,11 +106,12 @@ export default {
       tableData: [],
       loading: false,
       processInstanceData: {
+        userInfo: {},
         formData: {},
         formItems: [],
         processList: [],
+        operationList: [],
       },
-      avatar: require("@/assets/image/avatar.png")
     };
   },
   created() {
@@ -134,9 +141,11 @@ export default {
 
     init() {
       this.processInstanceData = {
+        userInfo: {},
         formData: {},
         formItems: [],
-        processList: []
+        processList: [],
+        operationList: [],
       };
       this.loading = true;
       this.$store.state.design = this.taskData;
@@ -185,4 +194,9 @@ export default {
 }
 }
 
+.state_tag{
+  font-size: 12px;
+  //margin-right: 15px;
+}
+
 </style>
diff --git a/flowable-engine-web/src/views/workspace/WorkSpace.vue b/flowable-engine-web/src/views/workspace/WorkSpace.vue
index e7c6ebf..a6872e0 100644
--- a/flowable-engine-web/src/views/workspace/WorkSpace.vue
+++ b/flowable-engine-web/src/views/workspace/WorkSpace.vue
@@ -41,13 +41,13 @@
         </div>
       </el-tab-pane>
       <el-tab-pane label="待我处理(3)" name="disposalTask">
-        <disposal-task v-if="active == 'disposalTask'" ref="disposalTask"/>
+        <disposal-task v-if="active === 'disposalTask'" ref="disposalTask"/>
       </el-tab-pane>
       <el-tab-pane label="我发起的" name="initiated">
-        <initiated-instance v-if="active == 'initiated'"  ref="InitiatedInstance"/>
+        <initiated-instance v-if="active === 'initiated'"  ref="InitiatedInstance"/>
       </el-tab-pane>
       <el-tab-pane label="关于我的"  name="aboutMe">
-        <div class="no-data">暂无数据 😀</div>
+        <about-instance v-if="active === 'aboutMe'"  ref="AboutInstance"/>
       </el-tab-pane>
     </el-tabs>
 
@@ -67,10 +67,11 @@ import InitiatedInstance from "./InitiatedInstance";
 import DisposalTask from "./DisposalTask";
 import {getProcessDefinitionList} from "@/api/processDefinition";
 import {startProcessInstance} from "@/api/processInstance";
+import AboutInstance from "./AboutInstance";
 
 export default {
   name: "workSpace",
-  components: {InitiateProcess,DisposalTask,InitiatedInstance},
+  components: {AboutInstance, InitiateProcess,DisposalTask,InitiatedInstance},
   data() {
     return {
       active: 'disposalTask',
-- 
2.40.1