Merge pull request 'clay : 流程加外层业务' (#43) from master into pro

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

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/api/request.js

@@ -10,8 +10,8 @@ Vue.prototype.$axios = axios;
 // 字体图标
 
 export function getBaseUrl(){
-	return "http://gateway.mytwins.top"
+	// return "http://gateway.mytwins.top"
-	// return "http://192.168.101.7:8000"
+	return "http://192.168.101.7:8000"
 	// return "http://localhost:8000"
 }
 
@@ -51,7 +51,7 @@ service.interceptors.response.use(
 		console.log("请求", err);
 		switch (err.response.status) {
 			case 401:
-				MessageBox.alert("登陆已过期，请关闭当前窗口重新进入-能臣工作台");
+				MessageBox.alert("登陆已过期，请关闭当前窗口重新进入");
 				break;
 			case 403:
 				//Message.warning("抱歉，您无权访问！")

flowable-engine-web/src/views/common/form/FormRenderView.vue

@@ -63,8 +63,6 @@ export default {
   },
   methods: {
     validate(call) {
-      console.log("我被执行了")
-
       let success = true
       this.$refs.formView.validate(valid => {
         success = valid

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

@@ -11,8 +11,7 @@
           <div style="display: flex;">
             <div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name">
                 <el-avatar size="large" :src="user.avatar"></el-avatar>
-                <!--v-if="!$slots.dot && operation.userInfo.length > 1" -->
+                <div v-if="!$slots.dot && operation.userInfo.length > 1"
-                <div v-if="user.icon"
                      class="el-timeline-item__node" :style="{
                       backgroundColor: user.color
                     }">
@@ -127,7 +126,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 +149,7 @@ export default {
       }
       return result;
     },
-    initUser(user) {
+    initUser(user,type) {
       let state = user.state
       //创建节点
       if (state === 'CREATE') {
@@ -162,6 +161,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 +219,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/ApprovalNode.vue

@@ -1,5 +1,5 @@
 <template>
-  <node :title="config.name" :show-error="showError" :content="content"
+  <node :title="config.name" :show-error="showError" :content="content" :node-id="config.id"
         :show-avatar="config.props.assignedType === 'ASSIGN_USER'" :user-info="assignedUser"
         :error-info="errorInfo"
         :select-user="selectUser"

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

@@ -1,5 +1,5 @@
 <template>
-  <node :title="config.name" :show-error="showError" :select-user="selectUser" :content="content"
+  <node :title="config.name" :show-error="showError" :select-user="selectUser" :content="content" :node-id="config.id"
         :error-info="errorInfo" :show-avatar="true" :user-info="config.props.assignedUser"
         @selected="$emit('selected')" @delNode="$emit('delNode')" @insertNode="type => $emit('insertNode', type)"
         placeholder="请设置抄送人" :header-bgc="headerBgc" header-icon="el-icon-s-promotion"/>

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>
@@ -60,6 +61,12 @@ export default {
       type: Boolean,
       default: false
     },
+    nodeId:{
+      type:String,
+      default:()=>{
+        return "";
+      }
+    },
     //是否显示节点体
     show: {
       type: Boolean,
@@ -76,6 +83,13 @@ export default {
       default: ""
     },
     //节点内容区域文字
+    userInfo: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    //节点内容区域文字
     showAvatar: {
       type: Boolean,
       default: false
@@ -123,14 +137,36 @@ export default {
     },
   },
   data() {
-    return {
+    return {}
-      userInfo:[]
+  },
+  created() {
+    let userInfo = this.$store.state.selectUserMap.get(this.nodeId);
+    console.log(this.nodeId,"sadasdasd",userInfo,this._userInfo)
+    if (userInfo){
+      let userInfoList = []
+      for (let val of userInfo) {
+        let userInfo = {
+          id: val.id,
+          name: val.name,
+          avatar: val.avatar,
+        }
+        userInfoList.push(userInfo)
+      }
+      this._userInfo = userInfoList
     }
   },
   computed: {
     viewer() {
       return this.$store.state.diagramMode === 'viewer'
-    }
+    },
+    _userInfo: {
+      get() {
+        return this.userInfo
+      },
+      set(val) {
+        this.userInfo = val
+      }
+    },
   },
   methods: {
     selectedUser(select) {
@@ -143,7 +179,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

@@ -1,14 +1,14 @@
 <template>
   <div>
     <el-table :data="tableData"
-              @row-click="clickRow"
+              @cell-click="showDetails"
               style="width: 100%">
       <el-table-column
           prop="deploymentName"
           label="审批类型"
           width="180"/>
       <el-table-column
-          prop="approveName"
+          prop="initiator"
           label="发起人"
           width="180"/>
       <el-table-column
@@ -39,7 +39,15 @@
       <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.isSelf">
+            <template v-if="scope.row.state === '4'">
+              <el-button size="min" type="text" icon="el-icon-thumb" @click="resubmitHander(scope.row.taskId)">再次提交</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>
         </template>
       </el-table-column>
     </el-table>
@@ -52,17 +60,20 @@
         <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>
+            <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 === '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 === '4'" size="mini" type="success">审批通过
-              <el-tag class="state_tag" v-if="selectProcessInstance.state === '3'" size="mini" type="danger">审批驳回</el-tag>
+              </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-icon class="el-icon-view" style="float: right;font-size: 20px;cursor: pointer"
+                         @click.native="processDiagramViewer = true"></el-icon>
               </el-tooltip>
             </div>
             <div>
@@ -85,25 +96,32 @@
       <process-diagram-viewer v-if="processDiagramViewer"/>
       <div style="height: 70px;"></div>
     </el-dialog>
+
+
+    <re-process :code="selectInstanceId" v-if="openItemDl" @submit="resubmit"/>
   </div>
 </template>
 
 <script>
 import FormRenderView from '@/views/common/form/FormRenderView'
+import ReProcess from "./ReProcess";
 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},
+  components: {ReProcess, OperationRender, FormRenderView, ProcessDiagramViewer},
   data() {
     return {
       approveOpen: false,
       processDiagramViewer: false,
       selectProcessInstance: {},
+      selectInstanceId: null,
       tableData: [],
       loading: false,
+      openItemDl: false,
       processInstanceData: {
         userInfo: {},
         formData: {},
@@ -117,12 +135,20 @@ export default {
     this.getList();
   },
   methods: {
-    clickRow(row) {
+    showDetails(row, column) {
-      this.approveOpen = true;
+      if (column.label !== '操作') {
-      this.loadProcessInstance(row.processInstanceId)
+        this.approveOpen = true;
-      this.selectProcessInstance = row
+        this.loadProcessInstance(row.processInstanceId)
+        this.selectProcessInstance = row
+      }
+    },
+    resubmitHander(instanceId) {
+      this.selectInstanceId = instanceId;
+      this.openItemDl = false
+      this.$nextTick(() => {
+        this.openItemDl = true
+      })
     },
-
     loadProcessInstance(processInstanceId) {
       let that = this;
       this.init();
@@ -158,7 +184,11 @@ export default {
       this.$store.state.diagramMode = "viewer";
       this.$store.state.preview = false;
     },
-
+    resubmit(flag) {
+      if (flag) {
+        this.getList();
+      }
+    },
     getList() {
       getAboutInstanceList().then(res => {
         let data = res.data
@@ -168,7 +198,7 @@ export default {
     getTimeConsuming(instance) {
       if (instance.state != 1) {
         //dateFormat(开始时间,结束时间)
-        return timeLength(instance.submitTime,instance.endTime);
+        return timeLength(instance.submitTime, instance.endTime);
       }
     }
   }
@@ -180,24 +210,24 @@ export default {
   padding: 0 10px 10px 10px;
   display: flex;
 
-.top_left {
+  .top_left {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  width: 50px;
+    width: 50px;
-  align-items: center;
+    align-items: center;
+  }
+
+  .top_right {
+    width: 85%;
+    display: flex;
+    flex-direction: column;
+    //justify-content: space-between;
+    font-size: 13px;
+    margin-left: 10px;
+  }
 }
 
-.top_right {
+.state_tag {
-  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;
 }

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

@@ -2,17 +2,12 @@
   <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"/>
+      <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>
+      <span style="font-size: 18px;text-align: center;padding-top: 20px;">审批流程</span>
       <process-diagram-viewer ref="processDiagramViewer"/>
-      <!--渲染流程执行过程-->
-      <el-timeline :reverse="false">
-        <!--        <el-timeline-item v-for="(activity, index) in activities" :key="index">-->
-
-        <!--        </el-timeline-item>-->
-      </el-timeline>
     </div>
   </div>
 </template>

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,15 @@
       <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.isSelf">
+            <template v-if="scope.row.state === '4'">
+              <el-button size="min" type="text" icon="el-icon-thumb" @click="resubmitHander(scope.row.taskId)">再次提交</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>
         </template>
       </el-table-column>
     </el-table>
@@ -52,17 +60,20 @@
         <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>
+            <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;margin-right: 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 === '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 === '4'" size="mini" type="success">审批通过
-              <el-tag class="state_tag" v-if="selectProcessInstance.state === '3'" size="mini" type="danger">审批驳回</el-tag>
+              </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-icon class="el-icon-view" style="float: right;font-size: 20px;cursor: pointer"
+                         @click.native="processDiagramViewer = true"></el-icon>
               </el-tooltip>
             </div>
             <div>
@@ -85,18 +96,21 @@
       <process-diagram-viewer v-if="processDiagramViewer"/>
       <div style="height: 70px;"></div>
     </el-dialog>
+    <re-process :code="selectInstanceId" v-if="openItemDl" @submit="resubmit"/>
   </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 +118,8 @@ export default {
       selectProcessInstance: {},
       tableData: [],
       loading: false,
+      openItemDl: false,
+      selectInstanceId: null,
       processInstanceData: {
         userInfo: {},
         formData: {},
@@ -117,10 +133,12 @@ export default {
     this.getList();
   },
   methods: {
-    clickRow(row) {
+    showDetails(row, column) {
-      this.approveOpen = true;
+      if (column.label !== '操作') {
-      this.loadProcessInstance(row.processInstanceId)
+        this.approveOpen = true;
-      this.selectProcessInstance = row
+        this.loadProcessInstance(row.processInstanceId)
+        this.selectProcessInstance = row
+      }
     },
     loadProcessInstance(processInstanceId) {
       let that = this;
@@ -137,8 +155,11 @@ export default {
         this.loading = false;
       })
     },
-
+    resubmit(flag) {
-
+      if (flag) {
+        this.getList();
+      }
+    },
     init() {
       this.processInstanceData = {
         userInfo: {},
@@ -156,7 +177,13 @@ export default {
       this.$store.state.diagramMode = "viewer";
       this.$store.state.preview = false;
     },
-
+    resubmitHander(instanceId) {
+      this.selectInstanceId = instanceId;
+      this.openItemDl = false
+      this.$nextTick(() => {
+        this.openItemDl = true
+      })
+    },
     getList() {
       getInitiatedInstanceList().then(res => {
         let data = res.data
@@ -166,7 +193,7 @@ export default {
     getTimeConsuming(instance) {
       if (instance.state != 1) {
         //dateFormat(开始时间,结束时间)
-        return timeLength(instance.submitTime,instance.endTime);
+        return timeLength(instance.submitTime, instance.endTime);
       }
     }
   }
@@ -178,24 +205,24 @@ export default {
   padding: 0 10px 10px 10px;
   display: flex;
 
-.top_left {
+  .top_left {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  width: 50px;
+    width: 50px;
-  align-items: center;
+    align-items: center;
+  }
+
+  .top_right {
+    width: 85%;
+    display: flex;
+    flex-direction: column;
+    //justify-content: space-between;
+    font-size: 13px;
+    margin-left: 10px;
+  }
 }
 
-.top_right {
+.state_tag {
-  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;
 }

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

@@ -0,0 +1,150 @@
+<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
+        if (processDefinition.optionalUser){
+          this.$store.state.selectUserMap = new Map();
+          for (let key in processDefinition.optionalUser) {
+            this.$store.state.selectUserMap.set(key,processDefinition.optionalUser[key])
+          }
+        }
+        //构建表单及校验规则
+        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.$emit("submit", true)
+            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>
+