flowable-engine-web/src/api/processInstance.js

@@ -13,13 +13,6 @@ 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",
@@ -29,7 +22,7 @@ export function getInitiatedInstanceList() {
 
 export function getInitiatedInstanceInfo(processInstanceId) {
     return request({
-        url: "/flowable/process/instance/info/"+processInstanceId,
+        url: "/flowable/process/instance/self/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://gateway.mytwins.top"
-	return "http://localhost:8000"
+	// return "http://localhost:8000"
 }
 
 const service = axios.create({

flowable-engine-web/src/components/common/Test.vue

@@ -5,17 +5,13 @@
         <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="value" default-expand-all
+            <el-tree :data="deptList" ref="tree" :props="deptProps" empty-text="" node-key="deptId" default-expand-all
-                     :show-checkbox="showCheckbox" highlight-current :check-strictly="multiple===false"
+                     :show-checkbox="showCheckbox" check-strictly highlight-current
                      @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%">
@@ -24,6 +20,7 @@
             </el-tree>
           </el-scrollbar>
         </div>
+
         <div class="selected">
           <div class="count">
             <span>已选 {{ selectList.length }} 项</span>
@@ -105,7 +102,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);
       });
     },
     //通过关键字过滤树节点
@@ -114,7 +111,7 @@ export default {
       return data.deptName.indexOf(value) !== -1;
     },
     //用于弹开部门选择
-    showUserPicker() {
+    showDeptPicker() {
       this.visible = true;
     },
     /**
@@ -126,7 +123,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) {
@@ -135,9 +132,7 @@ export default {
             }
           }
           if (checked) {
-            if(data.children === undefined){
+            this.selectList.push(data);
-              this.selectList.push(data);
-            }
           } else if (data === '1') {
             this.$refs.tree.setCheckedKeys([]);
             this.selectList = [];
@@ -152,11 +147,10 @@ export default {
           }
           if (checked) {
             this.$refs.tree.setCheckedNodes([data]);
-            // this.$refs.tree.setCheckedKeys([]);
             this.selectList = [data];
           } else if (data === '1') {
-            this.selectList = [];
             this.$refs.tree.setCheckedKeys([]);
+            this.selectList = [];
           }
         }
       }
@@ -170,21 +164,19 @@ export default {
      * @param check checked(checkbox选择框)是否选中
      */
     handle(node, check) {
-      if (check.isLeaf !== false) {
+      if (this.multiple) {
-        if (this.multiple) {
+        //不添加重复的数据到右边
-          //不添加重复的数据到右边
+        for (let i = 0; i < this.selectList.length; i++) {
-          for (let i = 0; i < this.selectList.length; i++) {
+          if (this.selectList[i].value === node.value) {
-            if (this.selectList[i].value === node.value) {
+            this.selectList.splice(i, 1);
-              this.selectList.splice(i, 1);
+            break;
-              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
     },
@@ -211,10 +203,9 @@ export default {
         cancelButtonText: "取消",
         type: "warning"
       }).then(() => {
+        this.handleCheckChange("1");
         if (!this.showCheckbox) {
           this.selectList = []
-        }else {
-          this.handleCheckChange("1");
         }
       });
     },
@@ -230,15 +221,15 @@ export default {
 <style lang="less" scoped>
 @containWidth: 278px;
 
-///deep/ .el-tree-node {
+/deep/ .el-tree-node {
-//  .is-leaf + .el-checkbox .el-checkbox__inner {
+  .is-leaf + .el-checkbox .el-checkbox__inner {
-//    display: inline-block;
+    display: inline-block;
-//  }
+  }
-//
+
-//  .el-checkbox .el-checkbox__inner {
+  .el-checkbox .el-checkbox__inner {
-//    display: none;
+    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" :model="_value">
+  <el-form ref="form" class="process-form" label-position="top" :rules="rules" :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,6 +43,11 @@ export default {
       }
     }
   },
+  data() {
+    return {
+      rules: {},
+    }
+  },
   computed: {
     _value: {
       get() {
@@ -66,6 +71,13 @@ 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,17 +6,15 @@
     </template>
     <template v-else>
       <template v-if="perm === 'E'">
-        <el-button icon="el-icon-user" type="primary" size="mini" round @click="$refs.userPicker.showUserPicker()">选择人员</el-button>
+        <el-button icon="el-icon-user" type="primary" size="mini" round @click="$refs.orgPicker.show()">选择人员</el-button>
-        <org-picker type="user" :multiple="multiple" ref="userPicker" :selected="_value" @ok="selected"/>
+        <org-picker type="user" :multiple="multiple" ref="orgPicker" :selected="_value" @ok="selected"/>
         <span class="placeholder"> {{placeholder}}</span>
         <div style="margin-top: 5px">
-          <el-tag size="mini" style="margin: 5px" closable v-for="(user, i) in _value" :key="i" @close="delDept(i)">{{user.label}}</el-tag>
+          <el-tag size="mini" style="margin: 5px" closable v-for="(dept, i) in _value" :key="i" @close="delDept(i)">{{dept.name}}</el-tag>
         </div>
       </template>
       <template v-else-if="perm === 'R'">
-        <div v-for="(user, i) in _value" :key="i">
+        {{ _value }}
-          {{user.label}}
-        </div>
       </template>
     </template>
   </div>
@@ -31,7 +29,7 @@ import OrgPicker from "@/components/common/Test";
 
 export default {
   mixins: [componentMinxins],
-  name: "UserPicker",
+  name: "DeptPicker",
   components: {OrgPicker},
   props: {
     value:{

flowable-engine-web/src/views/common/operation/OperationRender.vue

@@ -1,155 +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 === '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

@@ -1,201 +0,0 @@
-<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>
@@ -44,18 +44,13 @@
       <div v-loading="loading">
         <div class="top">
           <div class="top_left">
-            <el-avatar size="large" :src="taskData.userInfo.avatar"></el-avatar>
+            <el-avatar size="large" :src="avatar"></el-avatar>
-            <span style="text-align: center;color: #19191a;font-size: 14px;">{{ taskData.userInfo.name }}</span>
+            <span style="text-align: center;color: #19191a;font-size: 14px;">{{ selectTask.initiatorName }}</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>
@@ -63,21 +58,15 @@
           </div>
         </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"/>
-                            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">
@@ -87,7 +76,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"
@@ -108,14 +97,13 @@
 
 <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: {FormRenderView, OperationRender, Comment, ProcessDiagramViewer},
+  components: { Comment, FormRender, ProcessDiagramViewer},
   data() {
     return {
       approveOpen: false,
@@ -127,11 +115,9 @@ export default {
       },
       loading: false,
       taskData: {
-        userInfo: {},
         formData: {},
         formItems: [],
-        processList: [],
+        processList: []
-        operationList: []
       },
       avatar: require("@/assets/image/avatar.png")
     };
@@ -154,11 +140,9 @@ export default {
     },
     init() {
       this.taskData = {
-        userInfo: {},
         formData: {},
         formItems: [],
-        processList: [],
+        processList: []
-        operationList: []
       };
       this.loading = true;
       this.$store.state.design = this.taskData;
@@ -169,10 +153,10 @@ export default {
       let that = this;
       this.init();
       getTaskInfo(taskId).then(res => {
-        let data = res.data
+        let data=res.data
-        data.formItems.map(item => {
+        data.formItems.map(item=>{
-          if (item.props.required) {
+          if(item.props.required){
-            item.props.required = !item.props.required
+            item.props.required=!item.props.required
           }
           return item
         })
@@ -239,28 +223,7 @@ 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) {
@@ -275,17 +238,32 @@ export default {
       })
     },
     /**
-     * 回退
+     * 评论回调
+     * @param data
+     * @param type
      */
-    submitRollBack(data) {
+    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,
         rollBackId: data.rollBackId,
         comment: data,
       };
-      rollBackTask(params).then(res => {
+      rollBackTask(params).then(res=>{
-        this.approveOpen = false;
-        this.getList();
         this.$message.success(res.msg);
       })
     },
@@ -296,7 +274,6 @@ export default {
     submitComment(data) {
       this.$set(data, "taskId", this.selectTask.taskId);
       addComment(data).then(res => {
-        this.approveOpen = false;
         this.$message.success(res.msg);
       });
     }
@@ -305,7 +282,6 @@ export default {
 </script>
 
 <style scoped lang="less">
-
 .top {
   padding: 0 10px 10px 10px;
   display: flex;

flowable-engine-web/src/views/workspace/InitiatedInstance.vue

@@ -1,4 +1,3 @@
-<script src="../../api/processInstance.js"></script>
 <template>
   <div>
     <el-table :data="tableData"
@@ -31,10 +30,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
@@ -52,32 +51,27 @@
       <div v-loading="loading">
         <div class="top">
           <div class="top_left">
-            <el-avatar size="large" :src="processInstanceData.userInfo.avatar"></el-avatar>
+            <el-avatar size="large" :src="avatar"></el-avatar>
-            <span style="text-align: center;color: #19191a;font-size: 14px;">{{ processInstanceData.userInfo.name }}</span>
+            <span style="text-align: center;color: #19191a;font-size: 14px;">{{ selectProcessInstance.approveName }}</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 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 === '4'" size="mini" type="success">审批通过</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 === '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>
+              <span style="color: rgb(108, 108, 108);">编号: {{ selectProcessInstance.taskId }}</span>
             </div>
           </div>
         </div>
         <div style="height: 15px;background:#f5f5f5;"></div>
-        <form-render-view v-if="!loading" ref="taskViewForm" :form-items="processInstanceData.formItems"
+        <form-render-view ref="taskViewForm" :form-items="processInstanceData.formItems"
                           v-model="processInstanceData.formData"/>
-        <div style="height: 15px;background:#f5f5f5;"></div>
+<!--        <process-diagram-viewer v-if="!loading"/>-->
-        <operation-render v-if="!loading"
-                          :operation-list="processInstanceData.operationList"
-                          :state="selectProcessInstance.state"/>
         <div style="height: 15px;background:#f5f5f5;"></div>
       </div>
     </el-drawer>
@@ -90,14 +84,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: {OperationRender, FormRenderView, ProcessDiagramViewer},
+  components: {Comment, FormRenderView, ProcessDiagramViewer},
   data() {
     return {
       approveOpen: false,
@@ -106,12 +100,11 @@ export default {
       tableData: [],
       loading: false,
       processInstanceData: {
-        userInfo: {},
         formData: {},
         formItems: [],
         processList: [],
-        operationList: [],
       },
+      avatar: require("@/assets/image/avatar.png")
     };
   },
   created() {
@@ -141,11 +134,9 @@ export default {
 
     init() {
       this.processInstanceData = {
-        userInfo: {},
         formData: {},
         formItems: [],
-        processList: [],
+        processList: []
-        operationList: [],
       };
       this.loading = true;
       this.$store.state.design = this.taskData;
@@ -194,9 +185,4 @@ 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">
-        <about-instance v-if="active === 'aboutMe'"  ref="AboutInstance"/>
+        <div class="no-data">暂无数据 😀</div>
       </el-tab-pane>
     </el-tabs>
 
@@ -67,11 +67,10 @@ 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: {AboutInstance, InitiateProcess,DisposalTask,InitiatedInstance},
+  components: {InitiateProcess,DisposalTask,InitiatedInstance},
   data() {
     return {
       active: 'disposalTask',