添加节点执行类型字段绑定/ 修改正常节点/异常节点类型判定 /测试自定义动态表单组件

ruoyi-ui/src/views/bussiness/dialogCompments/GY1.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="form-wrap">
+    <el-form
+      :model="form"
+      ref="form"
+      :rules="rules"
+      label-width="80px"
+      :inline="false"
+      size="normal"
+    >
+      <el-form-item label="name:">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GY1",
+  props: [],
+  components: {},
+  data() {
+    return {
+      form: {
+        name: "",
+      },
+      rules: {},
+    };
+  },
+  computed: {},
+  methods: {
+    getFormData() {
+      return this.form;
+    },
+  },
+};
+</script>
+
+<style scoped></style>

ruoyi-ui/src/views/bussiness/processMange.vue

@@ -50,7 +50,7 @@
               <el-button
                 slot="append"
                 icon="el-icon-search"
-                @click="searchList"
+                @click="getList"
               ></el-button>
             </el-input>
           </div>
@@ -59,24 +59,25 @@
       <div class="show-body">
         <!--    流程任务列表    -->
         <el-table :data="tableData" border stripe>
-          <el-table-column type="selection" width="55" align="center"/>
-          <el-table-column type="index" width="50" align="center"/>
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column type="index" width="50" align="center" />
           <el-table-column
             v-for="col in columns"
             :prop="col.prop"
             :key="col.prop"
             :label="col.label"
-            align="center">
+            align="center"
+          >
             <template slot-scope="scope">
               <span v-if="col.prop == 'benCreateTime'">{{
-                  scope.row.benCreateTime.replace("T", " ")
-                }}</span>
+                scope.row.benCreateTime.replace("T", " ")
+              }}</span>
               <span v-else-if="col.prop == 'bepTaskProcessType'">{{
-                  getDictLabel(scope.row.bepTaskProcessType, dict.type.bpm_type)
-                }}</span>
+                getDictLabel(scope.row.bepTaskProcessType, dict.type.bpm_type)
+              }}</span>
               <span v-else-if="col.prop == 'benTaskNodeState'">{{
-                  scope.row.benTaskNodeState == "0" ? "已执行" : "未执行"
-                }}</span>
+                scope.row.benTaskNodeState == "0" ? "已执行" : "未执行"
+              }}</span>
               <span v-else>{{ scope.row[col.prop] }}</span>
             </template>
           </el-table-column>
@@ -88,7 +89,8 @@
                   plain
                   size="small"
                   class="mr10 mb5"
-                  @click="opneExecuteNode(scope.row)">
+                  @click="opneExecuteNode(scope.row)"
+                >
                   运行
                 </el-button>
                 <el-dropdown>
@@ -96,7 +98,7 @@
                     处理<i class="el-icon-arrow-down el-icon--right"></i>
                   </el-button>
                   <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item>
+                    <!-- <el-dropdown-item>
                       <el-button
                         size="mini"
                         type="text"
@@ -105,18 +107,21 @@
                         v-hasPermi="['system:user:edit']"
                       >处理
                       </el-button>
-                    </el-dropdown-item>
+                    </el-dropdown-item> -->
                     <el-dropdown-item>
-                      <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
+                      <el-dropdown
+                        size="mini"
+                        @command="
+                          (command) => handleCommand(command, scope.row)
+                        "
+                      >
                         <el-button
                           size="mini"
                           type="text"
                           icon="el-icon-d-arrow-right"
-                        >触发异常
-                        </el-button
-                        >
-                        <el-dropdown-menu slot="dropdown">
-                        </el-dropdown-menu>
+                          >触发异常
+                        </el-button>
+                        <el-dropdown-menu slot="dropdown"> </el-dropdown-menu>
                       </el-dropdown>
                     </el-dropdown-item>
                   </el-dropdown-menu>
@@ -135,38 +140,39 @@
         />
       </div>
       <div class="show-window">
-
         <!-- 运行节点弹窗 -->
         <el-dialog :title="nodeTitle" :visible.sync="open" width="50%">
-          <el-form label-width="100px" :model="commonData">
-            <h1> 这里会引入当前节点需要处理的表单 </h1>
-          </el-form>
+          <!-- <el-form label-width="100px" :model="commonData">
+            <h1>这里会引入当前节点需要处理的表单</h1>
+          </el-form> -->
+          <component v-if="myForm" :is="myForm" ref="myFormRef"></component>
           <span slot="footer" class="dialog-footer">
-            <el-button @click="closeExecuteNode">Cancel</el-button>
-            <el-button type="primary" @click="executeNode">Execute</el-button>
+            <el-button @click="closeExecuteNode">取消</el-button>
+            <el-button type="primary" @click="executeNode">运行</el-button>
           </span>
         </el-dialog>
-
-
-<!--     手：qweere
-        拖拽：123123
-   -->
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import {processList, runProcessNodeExecution} from "@/api/bpmprocess/run/executeProcess";
+import {
+  processList,
+  runProcessNodeExecution,
+} from "@/api/bpmprocess/run/executeProcess";
 import getNodeSequence from "@/utils/bpmn/getNodeSequence";
+import GY1 from "./dialogCompments/GY1.vue";
 
 export default {
   name: "processMange",
   props: [],
-  components: {},
+  components: { GY1 },
   dicts: ["bpm_type"],
   data() {
     return {
+      row: {}, //当前操作行数据
+      myForm: "", //自定义表单组件名
       // 节点弹窗title
       nodeTitle: "节点弹窗",
       open: false,
@@ -243,22 +249,32 @@ export default {
     // 打开运行节点弹窗
     opneExecuteNode(row) {
       console.log(row);
-      this.open = true;  // 打开弹窗
+      this.myForm = row.benTaskNodeName.split("-")[0];
+      this.row = row; //记录当前行数据
+      this.open = true; // 打开弹窗
       // 根据当前节点绑定的表单信息查询对应的表单进行展示
-
     },
     // 运行节点按钮
-    executeNode(row) {
-      console.log(row);
-      let {benTaskNodeKey, bepTaskProcessXmlContent, implementationName} = row;
-      let {nodeId, nextNodeId} = this.getNextNodeKey(benTaskNodeKey, bepTaskProcessXmlContent);
+    executeNode() {
+      console.log(this.row);
+      let { benTaskNodeKey, bepTaskProcessXmlContent, implementationName } =
+        this.row;
+      let { nodeId, nextNodeId } = this.getNextNodeKey(
+        benTaskNodeKey,
+        bepTaskProcessXmlContent
+      );
+      if (this.$refs.myFormRef) {
+        //获取自定义表单组件内容
+        let formData = this.$refs.myFormRef.getFormData();
+        console.log(formData);
+      }
       let payLoad = {
         basicMap: {
           taskNodeKey: nodeId,
           nextNodeKey: nextNodeId,
           // tableName: "",
-          implementationName: row.benmTaskAutomaticScriptTriggerType,
-          taskProcessKey: row.bepTaskKey,
+          implementationName: this.row.benmTaskAutomaticScriptTriggerType,
+          taskProcessKey: this.row.bepTaskKey,
         },
         commMap: {
           //formData
@@ -302,7 +318,7 @@ export default {
         return item.value == value;
       })?.label;
     },
-  }
+  },
 };
 </script>
 

ruoyi-ui/src/views/system/bpmnPro/components/Panel/components/ElementExcuteType.vue

@@ -0,0 +1,80 @@
+<template>
+  <el-collapse-item name="element-execute-type">
+    <template #title>
+      <collapse-title title="执行方式">
+        <lucide-icon name="FileSpreadsheet" />
+      </collapse-title>
+    </template>
+    <div class="element-execute-type">
+      <edit-item label="执行类型" :label-width="100">
+        <el-select
+          v-model="nodeExecuteType"
+          value-key="value"
+          placeholder="请选择节点执行类型"
+          clearable
+          filterable
+          @change="updateNodeExcuteType"
+        >
+          <el-option
+            v-for="item in excuteTypeList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </edit-item>
+    </div>
+  </el-collapse-item>
+</template>
+
+<script>
+import EventEmitter from "@utils/EventEmitter";
+import {
+  getNodeExecuteType,
+  setNodeExecuteType,
+} from "@packages/bo-utils/myFieldUtil";
+import { getActive } from "@packages/bpmn-utils/BpmnDesignerUtils";
+
+export default {
+  name: "ElementExecuteType",
+  data() {
+    return {
+      nodeExecuteType: "",
+      excuteTypeList: [
+        {
+          value: "true",
+          label: "自动执行",
+        },
+        {
+          value: "false",
+          label: "手动执行",
+        },
+      ],
+    };
+  },
+
+  mounted() {
+    this.initFormData();
+    EventEmitter.on("element-update", () => {
+      this.initFormData();
+    });
+  },
+  methods: {
+    async initFormData() {
+      if (!getNodeExecuteType(getActive())) {
+        this.updateNodeExcuteType("true");
+      }
+      this.nodeExecuteType = getNodeExecuteType(getActive());
+    },
+    updateNodeExcuteType(value) {
+      setNodeExecuteType(getActive(), value);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+::v-deep .edit-item_label {
+  width: 80px !important;
+}
+</style>

ruoyi-ui/src/views/system/bpmnPro/components/Panel/components/ElementExecuteUser.vue

@@ -130,6 +130,10 @@ export default {
   },
   methods: {
     initFormData() {
+      if (!getExecuteUserType(getActive())) {
+        //初始化数据时给流程绑定用户类型
+        this.updateExeUserType("1");
+      }
       this.exeUserType = getExecuteUserType(getActive()) || "1";
       if (this.exeUserType == 2) {
         let temp = getExecuteUser(getActive()) || "";

ruoyi-ui/src/views/system/bpmnPro/components/Panel/components/ElementNormalTask.vue

@@ -46,7 +46,7 @@
           </el-option>
         </el-select>
       </edit-item>
-      <edit-item label="触发方式" :label-width="100">
+      <edit-item v-if="false" label="触发方式" :label-width="100">
         <!-- <el-input
           v-model="industryType"
           maxlength="32"
@@ -93,7 +93,7 @@ export default {
       scriptList: [],
       industryType: "",
       normalScriptKey: "",
-      scriptTriggerType: "0",
+      scriptTriggerType: "1",
     };
   },
 
@@ -108,7 +108,7 @@ export default {
       this.industryType = getIndustryType(getActive());
       await this.getScriptList(this.industryType);
       this.normalScriptKey = getNormalScriptKey(getActive());
-      this.scriptTriggerType = getNormalScriptTriggerType(getActive());
+      // this.scriptTriggerType = getNormalScriptTriggerType(getActive());
     },
     updateIndustryType(value) {
       setIndustryType(getActive(), value);
@@ -128,6 +128,7 @@ export default {
     },
     updateScriptKey(value) {
       setNormalScriptKey(getActive(), value);
+      setNormalScriptTriggerType(getActive(), this.scriptTriggerType);
     },
     updateScriptTriggerType(value) {
       setNormalScriptTriggerType(getActive(), value);

ruoyi-ui/src/views/system/bpmnPro/components/Panel/components/ElementUnusualTasks.vue

@@ -6,7 +6,7 @@
       </collapse-title>
       <number-tag :value="listeners.length" margin-left="12px" />
     </template>
-    <el-form label-width="110px" :model="scriptForm">
+    <el-form v-if="false" label-width="110px" :model="scriptForm">
       <el-form-item label="脚本执行时机:">
         <el-switch
           active-text="节点后"
@@ -23,6 +23,7 @@
           label="执行脚本"
           prop="scriptName"
           show-overflow-tooltip
+          align="center"
         >
           <!-- <template slot-scope="scope">
             {{ getDictLabel(scope.row.scriptType, dict.type.bpm_script_type) }}
@@ -31,6 +32,7 @@
         <el-table-column
           label="触发方式"
           prop="scriptTriggerType"
+          v-if="false"
           show-overflow-tooltip
         >
           <template slot-scope="scope">
@@ -105,7 +107,11 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item prop="scriptTriggerType" label="事件触发机制">
+        <el-form-item
+          v-if="false"
+          prop="scriptTriggerType"
+          label="事件触发机制"
+        >
           <el-select v-model="newUnusualTask.scriptTriggerType">
             <el-option
               v-for="item in dict.type.script_trigger_type"
@@ -157,11 +163,11 @@ export default {
           trigger: ["blur", "change"],
           message: "任务脚本不能为空",
         },
-        scriptTriggerType: {
-          required: true,
-          trigger: ["blur", "change"],
-          message: "事件触发机制不能为空",
-        },
+        // scriptTriggerType: {
+        //   required: true,
+        //   trigger: ["blur", "change"],
+        //   message: "事件触发机制不能为空",
+        // },
       },
       scriptKeyList: [],
       scriptTriggerTypeList: [

ruoyi-ui/src/views/system/bpmnPro/components/Panel/index.vue

@@ -46,6 +46,7 @@ import ElementBeforeNode from "@packages/Panel/components/ElementBeforeNode";
 import ElementAfterNode from "@packages/Panel/components/ElementAfterNode";
 import ElementUnusualTasks from "@packages/Panel/components/ElementUnusualTasks";
 import ElementNormalTask from "@packages/Panel/components/ElementNormalTask";
+import ElementExcuteType from "@packages/Panel/components/ElementExcuteType";
 
 export default {
   name: "BpmnPanel",
@@ -65,6 +66,7 @@ export default {
     ElementBeforeNode,
     ElementAfterNode,
     ElementUnusualTasks,
+    ElementExcuteType,
   },
   data() {
     return {
@@ -161,9 +163,11 @@ export default {
       // 添加执行表单
       isTaskOrUserTask(element) &&
         this.renderComponents.push(ElementExecuteForm);
-      this.renderComponents.push(ElementNormalTask); //正常节点
+      !isProcess(element) && this.renderComponents.push(ElementNormalTask); //正常节点
       !isProcess(element) && this.renderComponents.push(ElementUnusualTasks); //可处理异常
       isUserTask(element) && this.renderComponents.push(ElementExecuteUser);
+      !isProcess(element) && this.renderComponents.push(ElementExcuteType);
+
       // !isProcess(element) && this.renderComponents.push(ElementBeforeNode);
       // !isProcess(element) && this.renderComponents.push(ElementAfterNode);
     },

ruoyi-ui/src/views/system/bpmnPro/components/bo-utils/getNodeMsg.js

@@ -38,7 +38,7 @@ export function getNodeMsg(xmlObj) {
   let prefix = getProcessEngine();
   let { attributes, childNodes } = xmlObj
     .getElementsByTagName("bpmn:process")[0];
-  let bpmProcessConfigurationList = [], bpmNodeHandleUserList = [], bpmNodeScriptRelevanceList = [], attributeArray = ['nodeKey', 'nodeFormKey', 'nodeProcessKey', 'nodeRolePremission', 'spare1', 'spare2', 'spare3', 'createBy', 'updateBy', 'remark'];
+  let bpmProcessConfigurationList = [], bpmNodeHandleUserList = [], bpmNodeScriptRelevanceList = [], attributeArray = ['nodeKey', 'nodeFormKey', 'nodeProcessKey', 'nodeRolePremission', 'spare1', 'spare2', 'spare3', 'createBy', 'updateBy', 'remark', 'nodeExecuteType'];
   childNodes.forEach((node) => {
     // let uuid = uuidv4();
 
@@ -57,9 +57,8 @@ export function getNodeMsg(xmlObj) {
       createBy: '',  //创建者
       updateBy: '',  //修改者
       remark: '',    //节点描述
+      nodeExecuteType: '', //节点执行类型
     }
-    console.dir(node);
-    console.log(node.localName);
     nodeObj.nodeType = node.localName;
     if (nodeObj.nodeType == "sequenceFlow") return;
     let nodeExceptionList = getNodeException(node, nodeObj)
@@ -144,7 +143,6 @@ function getBpmNodeHandleUser(node, nodeObj) {
     default:
       break;
   }
-
   return [res]
 }
 

ruoyi-ui/src/views/system/bpmnPro/components/bo-utils/myFieldUtil.js

@@ -335,3 +335,21 @@ export function getNormalScriptTriggerType(element) {
 
   return businessObject.get(`${prefix}:NormalScriptTriggerType`);
 }
+
+/*          节点执行类型            */
+export function getNodeExecuteType(element) {
+  const prefix = getProcessEngine();
+  const businessObject = getBusinessObject(element);
+  console.log(businessObject.id, businessObject.get(`${prefix}:nodeExecuteType`));
+  return businessObject.get(`${prefix}:nodeExecuteType`);
+}
+
+export function setNodeExecuteType(element, value) {
+  const prefix = getProcessEngine();
+  const modeling = getModeler.getModeling();
+  const businessObject = getBusinessObject(element);
+  modeling.updateModdleProperties(element, businessObject, {
+    [`${prefix}:nodeExecuteType`]: value
+  });
+}
+