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/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/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/common/operation/operationRender.vue

@@ -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>

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 === '1'">待处理</el-tag>
-          <el-tag v-if="scope.row.state == 4" type="success">已同意</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 === '3'" type="danger">已拒绝</el-tag>
-          <el-tag v-if="scope.row.state == 2" type="warning">已退回</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"
+          <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;

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 === '1'">进行中</el-tag>
-          <el-tag v-if="scope.row.state == 4" type="success">审批通过</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 === '3'" type="danger">审批驳回</el-tag>
-          <el-tag v-if="scope.row.state == 2" type="info">已撤销</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>
+            <el-avatar size="large" :src="processInstanceData.userInfo.avatar"></el-avatar>
-            <span style="text-align: center;color: #19191a;font-size: 14px;">{{ selectProcessInstance.approveName }}</span>
+            <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 class="state_tag" v-if="selectProcessInstance.state === '1'" size="mini" >进行中</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 === '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',