Merge pull request 'clay : 关于我的基本完成' (#21) from master into pro

Reviewed-on: http://git.hchyun.com/clay/workflow-engine-web/pulls/21

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",
     })
 }

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({

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) {
+            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,6 +170,7 @@ export default {
      * @param check checked(checkbox选择框)是否选中
      */
     handle(node, check) {
+      if (check.isLeaf !== false) {
         if (this.multiple) {
           //不添加重复的数据到右边
           for (let i = 0; i < this.selectList.length; i++) {
@@ -178,6 +185,7 @@ export default {
           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;

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'
-            }])
-          }
         }
       })
     }

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:{

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>

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>

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>
@@ -44,13 +44,18 @@
       <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">
               <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>
@@ -58,15 +63,21 @@
           </div>
         </div>
         <div style="height: 15px;background:#f5f5f5;"></div>
-        <form-render v-if="!loading" ref="taskViewForm" :form-items="taskData.formItems"
+        <div>
+          <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"
+                          :state="selectTask.state"/>
         <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">
@@ -97,13 +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 {addComment, completeTask, getTaskInfo, getTaskList, refuseTask, rollBackTask} from "@/api/task";
+import OperationRender from "@/views/common/operation/OperationRender";
+import FormRenderView from "../common/form/FormRenderView";
 
 export default {
   name: "DisposalTask",
-  components: { Comment, FormRender, ProcessDiagramViewer},
+  components: {FormRenderView, OperationRender, Comment, ProcessDiagramViewer},
   data() {
     return {
       approveOpen: false,
@@ -115,9 +127,11 @@ export default {
       },
       loading: false,
       taskData: {
+        userInfo: {},
         formData: {},
         formItems: [],
-        processList: []
+        processList: [],
+        operationList: []
       },
       avatar: require("@/assets/image/avatar.png")
     };
@@ -140,9 +154,11 @@ export default {
     },
     init() {
       this.taskData = {
+        userInfo: {},
         formData: {},
         formItems: [],
-        processList: []
+        processList: [],
+        operationList: []
       };
       this.loading = true;
       this.$store.state.design = this.taskData;
@@ -153,10 +169,10 @@ 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
         })
@@ -223,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) {
@@ -238,32 +275,17 @@ 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){
+    submitRollBack(data) {
       let params = {
         taskId: this.selectTask.taskId,
         rollBackId: data.rollBackId,
         comment: data,
       };
-      rollBackTask(params).then(res=>{
+      rollBackTask(params).then(res => {
+        this.approveOpen = false;
+        this.getList();
         this.$message.success(res.msg);
       })
     },
@@ -274,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);
       });
     }
@@ -282,6 +305,7 @@ export default {
 </script>
 
 <style scoped lang="less">
+
 .top {
   padding: 0 10px 10px 10px;
   display: flex;

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>

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',