clay : 节点渲染细节处理

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

@@ -12,6 +12,13 @@ export function startProcessInstance(param) {
         data: param
     })
 }
+export function restartProcessInstance(param) {
+    return request({
+        url: "/flowable/process/instance/restart",
+        method: "post",
+        data: param
+    })
+}
 
 export function getAboutInstanceList() {
     return request({
@@ -33,3 +40,11 @@ export function getInitiatedInstanceInfo(processInstanceId) {
         method: "get",
     })
 }
+
+
+export function getInitiatedInstanceReInfo(instanceId) {
+    return request({
+        url: "/flowable/process/instance/re/info/"+instanceId,
+        method: "get",
+    })
+}

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

@@ -127,7 +127,7 @@ export default {
         let userList = []
         if (operationNew.userInfo){
           for (let user of operationNew.userInfo) {
-            let userNew = this.initUser(user)
+            let userNew = this.initUser(user,operationNew.operation)
             userList.push(userNew)
           }
           operationNew.userInfo = userList
@@ -150,7 +150,7 @@ export default {
       }
       return result;
     },
-    initUser(user) {
+    initUser(user,type) {
       let state = user.state
       //创建节点
       if (state === 'CREATE') {
@@ -162,6 +162,10 @@ export default {
         this.$set(user, "icon", "el-icon-check")
         this.$set(user, "color", "#0bbd87")
       }
+      if (type === "CC"){
+        this.$set(user, "icon", "el-icon-s-promotion")
+        this.$set(user, "color", "#3395f8")
+      }
       //审批处理中
       if (state === 'RUNNING') {
         this.$set(user, "icon", "el-icon-loading")
@@ -216,6 +220,12 @@ export default {
           this.$set(operation, "remark", '  (拒绝)')
         }
       }
+      //抄送
+      if (type === 'CC') {
+        this.$set(operation, "icon", "el-icon-s-promotion")
+        this.$set(operation, "color", "#3395f8")
+        this.$set(operation, "remark", '  (抄送成功)')
+      }
       //评论
       if (type === 'COMMENT') {
         //评论

flowable-engine-web/src/views/common/process/nodes/Node.vue

@@ -43,6 +43,7 @@
       </div>
     </div>
     <user-picker v-if="selectUser.show" title="请选择系统用户" :multiple="selectUser.multiple" ref="userPicker"
+                 :selected="_userInfo"
                  @ok="selectedUser"/>
   </div>
 </template>
@@ -76,6 +77,13 @@ export default {
       default: ""
     },
     //节点内容区域文字
+    userInfo: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    //节点内容区域文字
     showAvatar: {
       type: Boolean,
       default: false
@@ -123,14 +131,20 @@ export default {
     },
   },
   data() {
-    return {
-      userInfo:[]
-    }
+    return {}
   },
   computed: {
     viewer() {
       return this.$store.state.diagramMode === 'viewer'
-    }
+    },
+    _userInfo: {
+      get() {
+        return this.userInfo
+      },
+      set(val) {
+        this.userInfo = val
+      }
+    },
   },
   methods: {
     selectedUser(select) {
@@ -143,7 +157,8 @@ export default {
         }
         userInfoList.push(userInfo)
       }
-      this.userInfo = userInfoList
+      //todo 确认是会包错,邓洁处理
+      this._userInfo = userInfoList
       this.$store.state.selectUserMap.set(this.$store.state.selectedNode.id, userInfoList)
     },
   }

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

@@ -8,7 +8,7 @@
           label="审批类型"
           width="180"/>
       <el-table-column
-          prop="approveName"
+          prop="initiator"
           label="发起人"
           width="180"/>
       <el-table-column

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-table :data="tableData"
-              @row-click="clickRow"
+              @cell-click="showDetails"
               style="width: 100%">
       <el-table-column
           prop="deploymentName"
@@ -39,7 +39,12 @@
       <el-table-column
           label="操作">
         <template slot-scope="scope">
-          <el-button size="min" type="text" icon="el-icon-thumb">再次提交</el-button>
+          <template v-if="scope.row.state === '4'">
+            <el-button size="min" type="text" icon="el-icon-thumb">再次提交</el-button>
+          </template>
+          <template v-if="scope.row.state === '2' || scope.row.state === '3'">
+            <el-button size="min" type="text" icon="el-icon-thumb" @click="resubmitHander(scope.row.taskId)">重新提交</el-button>
+          </template>
         </template>
       </el-table-column>
     </el-table>
@@ -85,18 +90,28 @@
       <process-diagram-viewer v-if="processDiagramViewer"/>
       <div style="height: 70px;"></div>
     </el-dialog>
+
+    <re-process :code="selectInstanceId" v-if="openItemDl"/>
+<!--    <el-dialog title="发起审批" :visible.sync="openItemDl" :close-on-click-modal="true">-->
+<!--      <re-initiate-process ref="processInstance" :code="selectInstanceId" v-if="openItemDl"></re-initiate-process>-->
+<!--      <span slot="footer" class="dialog-footer">-->
+<!--				<el-button size="mini" @click="openItemDl = false">取 消</el-button>-->
+<!--				<el-button size="mini" type="primary" @click="submitForm">提 交</el-button>-->
+<!--			</span>-->
+<!--    </el-dialog>-->
   </div>
 </template>
 
 <script>
 import FormRenderView from '@/views/common/form/FormRenderView'
 import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
+import ReProcess from "./ReProcess";
 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: {ReProcess, OperationRender, FormRenderView, ProcessDiagramViewer},
   data() {
     return {
       approveOpen: false,
@@ -104,6 +119,8 @@ export default {
       selectProcessInstance: {},
       tableData: [],
       loading: false,
+      openItemDl:false,
+      selectInstanceId:null,
       processInstanceData: {
         userInfo: {},
         formData: {},
@@ -117,10 +134,12 @@ export default {
     this.getList();
   },
   methods: {
-    clickRow(row) {
-      this.approveOpen = true;
-      this.loadProcessInstance(row.processInstanceId)
-      this.selectProcessInstance = row
+    showDetails(row,column) {
+      if (column.label !== '操作'){
+        this.approveOpen = true;
+        this.loadProcessInstance(row.processInstanceId)
+        this.selectProcessInstance = row
+      }
     },
     loadProcessInstance(processInstanceId) {
       let that = this;
@@ -156,7 +175,16 @@ export default {
       this.$store.state.diagramMode = "viewer";
       this.$store.state.preview = false;
     },
-
+    resubmitHander(instanceId){
+      this.selectInstanceId = instanceId;
+      this.openItemDl = false
+      // 在组件移除后，重新渲染组件
+      // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
+      this.$nextTick(() => {
+        this.openItemDl = true
+      })
+      console.log("书剑")
+    },
     getList() {
       getInitiatedInstanceList().then(res => {
         let data = res.data

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

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <el-dialog title="发起审批" :visible.sync="openItemDl" :close-on-click-modal="true">
+      <div v-loading="loading" class="initiate_process">
+        <div v-if="!loading" style="min-width: 338px;">
+          <!--渲染表单-->
+          <form-render class="process-form" ref="initiateForm" :form-items="processDefinition.formItems"
+                       v-model="formData"/>
+        </div>
+        <div style="display: flex;justify-content: center;flex-direction: column;min-width: 1036px;">
+          <span style="font-size: 18px;text-align: center;padding-top: 20px;">审批流程</span>
+          <process-diagram-viewer ref="processDiagramViewer"/>
+          <!--渲染流程执行过程-->
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+				<el-button size="mini" @click="openItemDl = false">取 消</el-button>
+				<el-button size="mini" type="primary" @click="resubmitForm">提 交</el-button>
+			</span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import FormRender from "@/views/common/form/FormRender";
+import ProcessDiagramViewer from "../admin/layout/ProcessDiagramViewer";
+import {getInitiatedInstanceReInfo,restartProcessInstance} from "@/api/processInstance";
+
+export default {
+  name: "ReProcess",
+  components: {FormRender, ProcessDiagramViewer},
+  props: {
+    code: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      openItemDl: false,
+      scale: 100,
+      loading: true,
+      formData: {},
+      processDefinition: {
+        processDefinitionKey: "",
+        deploymentName: "",
+        logo: {},
+        formItems: [],
+        process: {},
+        remark: ""
+      }
+    }
+  },
+  mounted() {
+    this.$store.state.preview = true;
+    this.loadProcessDefinitionReInfo(this.code);
+  },
+  created() {
+    this.$store.state.preview = true;
+  },
+  computed: {
+    forms() {
+      return this.$store.state.design.formItems;
+    }
+  },
+  destroyed() {
+    this.$store.state.preview = false;
+  },
+  methods: {
+    loadProcessDefinitionReInfo(instanceId) {
+      this.openItemDl = true;
+          getInitiatedInstanceReInfo(instanceId).then(res => {
+        let processDefinition = res.data;
+        this.processDefinition = processDefinition;
+        this.formData = processDefinition.formData
+        //构建表单及校验规则
+        this.$store.state.design = processDefinition;
+        this.loading = false;
+      }).catch(err => {
+        this.$message.error(err);
+      });
+    },
+
+    resubmitForm(){
+      let selectUserMap = {}
+      this.$store.state.selectUserMap.forEach(((value, key) => {selectUserMap[key]=value}))
+      let paramsData = {
+        processDefinitionId: this.code,
+        formData: JSON.stringify(this.formData),
+        optionalUser: selectUserMap
+      }
+      this.validate(valid => {
+        if (valid) {
+          restartProcessInstance(paramsData).then(res=>{
+            this.openItemDl = false
+            this.$message.success(res.msg)
+          })
+        } else {
+          this.$message.warning("请完善表单😥")
+        }
+      })
+    },
+    validate(call) {
+      this.$refs.initiateForm.validate(call);
+      this.$refs.processDiagramViewer.validate(call);
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@media screen and (max-width: 1545px) {
+  .initiate_process {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+}
+
+.initiate_process {
+  display: flex;
+  flex: 1;
+  justify-content: space-around;
+}
+
+.process-form {
+  /deep/ .el-form-item__label {
+    padding: 0 0;
+  }
+
+  /deep/ .el-divider--horizontal {
+    margin: 0;
+  }
+}
+
+/deep/ .el-divider__text {
+  font-size: 16px;
+}
+
+</style>
+