【代码评审】BPM：子流程的多实例配置

Author: YunaiV

src/components/SimpleProcessDesignerV2/src/consts.ts

@@ -815,13 +815,13 @@ export const TRIGGER_TYPES: DictDataVO[] = [
 export type ChildProcessSetting = {
   calledProcessDefinitionKey: string
   calledProcessDefinitionName: string
-  async: boolean,
-  inVariables?: IOParameter[],
-  outVariables?: IOParameter[],
-  skipStartUserNode: boolean,
-  startUserSetting: StartUserSetting,
-  timeoutSetting: TimeoutSetting,
-  multiInstanceSetting: MultiInstanceSetting,
+  async: boolean
+  inVariables?: IOParameter[]
+  outVariables?: IOParameter[]
+  skipStartUserNode: boolean
+  startUserSetting: StartUserSetting
+  timeoutSetting: TimeoutSetting
+  multiInstanceSetting: MultiInstanceSetting
 }
 export type IOParameter = {
   source: string
@@ -833,16 +833,16 @@ export type StartUserSetting = {
   emptyType?: ChildProcessStartUserEmptyTypeEnum
 }
 export type TimeoutSetting = {
-  enable: boolean,
-  type?: DelayTypeEnum,
-  timeExpression?: string,
+  enable: boolean
+  type?: DelayTypeEnum
+  timeExpression?: string
 }
 export type MultiInstanceSetting = {
-  enable: boolean,
-  sequential?: boolean,
-  completeRatio?: number,
-  sourceType?: ChildProcessMultiInstanceSourceTypeEnum,
-  source?: string,
+  enable: boolean
+  sequential?: boolean
+  completeRatio?: number
+  sourceType?: ChildProcessMultiInstanceSourceTypeEnum
+  source?: string
 }
 export enum ChildProcessStartUserTypeEnum {
   /**
@@ -852,7 +852,7 @@ export enum ChildProcessStartUserTypeEnum {
   /**
    * 表单
    */
-  FROM_FORM = 2,
+  FROM_FORM = 2
 }
 export const CHILD_PROCESS_START_USER_TYPE = [
   { label: '同主流程发起人', value: ChildProcessStartUserTypeEnum.MAIN_PROCESS_START_USER },
@@ -870,7 +870,7 @@ export enum ChildProcessStartUserEmptyTypeEnum {
   /**
    * 主流程管理员
    */
-  MAIN_PROCESS_ADMIN = 3,
+  MAIN_PROCESS_ADMIN = 3
 }
 export const CHILD_PROCESS_START_USER_EMPTY_TYPE = [
   { label: '同主流程发起人', value: ChildProcessStartUserEmptyTypeEnum.MAIN_PROCESS_START_USER },
@@ -889,10 +889,10 @@ export enum ChildProcessMultiInstanceSourceTypeEnum {
   /**
    * 多项表单
    */
-  MULTI_FORM = 3,
+  MULTI_FORM = 3
 }
 export const CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE = [
   { label: '固定数量', value: ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY },
-  { label: '数字表单', value: ChildProcessMultiInstanceSourceTypeEnum.DIGITAL_FORM },
-  { label: '多项表单', value: ChildProcessMultiInstanceSourceTypeEnum.MULTI_FORM }
+  { label: '数字表单', value: ChildProcessMultiInstanceSourceTypeEnum.DIGITAL_FORM }, // TODO @lesan：DIGITAL 改成 NUMBER，和 Element plus 更接近？
+  { label: '多项表单', value: ChildProcessMultiInstanceSourceTypeEnum.MULTI_FORM } // TODO @lesan：多选表单？multiple 是这个解释。另外 MULTI => MULTIPLE
 ]

src/components/SimpleProcessDesignerV2/src/nodes-config/ChildProcessNodeConfig.vue

@@ -166,12 +166,12 @@
                   :key="item.value"
                   :value="item.value"
                 >
-                  {{ item.label }}</el-radio
-                >
+                  {{ item.label }}
+                </el-radio>
               </el-radio-group>
             </el-form-item>
             <el-form-item
-              v-if="configForm.startUserType === 2"
+              v-if="configForm.startUserType === ChildProcessStartUserTypeEnum.FROM_FORM"
               label="当子流程发起人为空时"
               prop="startUserType"
             >
@@ -181,8 +181,8 @@
                   :key="item.value"
                   :value="item.value"
                 >
-                  {{ item.label }}</el-radio
-                >
+                  {{ item.label }}
+                </el-radio>
               </el-radio-group>
             </el-form-item>
             <el-form-item
@@ -282,7 +282,11 @@
               </el-form-item>
               <el-form-item prop="multiInstanceSourceType">
                 <el-text>多实例来源</el-text>
-                <el-select class="ml-10px w-200px!" v-model="configForm.multiInstanceSourceType" @change="handleMultiInstanceSourceTypeChange">
+                <el-select
+                  class="ml-10px w-200px!"
+                  v-model="configForm.multiInstanceSourceType"
+                  @change="handleMultiInstanceSourceTypeChange"
+                >
                   <el-option
                     v-for="item in CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE"
                     :key="item.value"
@@ -291,6 +295,7 @@
                   />
                 </el-select>
               </el-form-item>
+              <!-- TODO @lesan：枚举 -->
               <el-form-item v-if="configForm.multiInstanceSourceType === 1">
                 <el-input-number v-model="configForm.multiInstanceSource" :min="1" />
               </el-form-item>
@@ -483,7 +488,8 @@ const saveConfig = async () => {
       enable: configForm.value.multiInstanceEnable
     }
     if (configForm.value.multiInstanceEnable) {
-      currentNode.value.childProcessSetting.multiInstanceSetting.sequential = configForm.value.sequential
+      currentNode.value.childProcessSetting.multiInstanceSetting.sequential =
+        configForm.value.sequential
       currentNode.value.childProcessSetting.multiInstanceSetting.completeRatio =
         configForm.value.completeRatio
       currentNode.value.childProcessSetting.multiInstanceSetting.sourceType =
@@ -538,11 +544,15 @@ const showChildProcessNodeConfig = (node: SimpleFlowNode) => {
     configForm.value.multiInstanceEnable =
       node.childProcessSetting.multiInstanceSetting.enable ?? false
     if (configForm.value.multiInstanceEnable) {
-      configForm.value.sequential = node.childProcessSetting.multiInstanceSetting.sequential ?? false
-      configForm.value.completeRatio = node.childProcessSetting.multiInstanceSetting.completeRatio ?? 100
+      configForm.value.sequential =
+        node.childProcessSetting.multiInstanceSetting.sequential ?? false
+      configForm.value.completeRatio =
+        node.childProcessSetting.multiInstanceSetting.completeRatio ?? 100
       configForm.value.multiInstanceSourceType =
-        node.childProcessSetting.multiInstanceSetting.sourceType ?? ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY
-      configForm.value.multiInstanceSource = node.childProcessSetting.multiInstanceSetting.source ?? ''
+        node.childProcessSetting.multiInstanceSetting.sourceType ??
+        ChildProcessMultiInstanceSourceTypeEnum.FIXED_QUANTITY
+      configForm.value.multiInstanceSource =
+        node.childProcessSetting.multiInstanceSetting.source ?? ''
     }
   }
   loadFormInfo()

src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue

@@ -48,7 +48,7 @@ import { getDefaultConditionNodeName } from '../utils'
 import { useFormFieldsAndStartUser, getConditionShowText } from '../node'
 import Condition from './components/Condition.vue'
 import { cloneDeep } from 'lodash-es'
-const message = useMessage() // 消息弹窗
+
 defineOptions({
   name: 'ConditionNodeConfig'
 })
@@ -69,14 +69,18 @@ const condition = ref<any>({
   conditionExpression: '',
   conditionGroups: {
     and: true,
-    conditions: [{
-      and: true,
-      rules: [{
-        opCode: '==',
-        leftSide: '',
-        rightSide: ''
-      }]
-    }]
+    conditions: [
+      {
+        and: true,
+        rules: [
+          {
+            opCode: '==',
+            leftSide: '',
+            rightSide: ''
+          }
+        ]
+      }
+    ]
   }
 })
 const open = () => {
@@ -90,14 +94,18 @@ const open = () => {
       conditionExpression: '',
       conditionGroups: {
         and: true,
-        conditions: [{
-          and: true,
-          rules: [{
-            opCode: '==',
-            leftSide: '',
-            rightSide: ''
-          }]
-        }]
+        conditions: [
+          {
+            and: true,
+            rules: [
+              {
+                opCode: '==',
+                leftSide: '',
+                rightSide: ''
+              }
+            ]
+          }
+        ]
       }
     }
   }
@@ -162,8 +170,14 @@ const saveConfig = async () => {
     currentNode.value.conditionSetting = cloneDeep({
       ...currentNode.value.conditionSetting,
       conditionType: condition.value?.conditionType,
-      conditionExpression: condition.value?.conditionType === ConditionType.EXPRESSION ? condition.value?.conditionExpression : undefined,
-      conditionGroups: condition.value?.conditionType === ConditionType.RULE ? condition.value?.conditionGroups : undefined
+      conditionExpression:
+        condition.value?.conditionType === ConditionType.EXPRESSION
+          ? condition.value?.conditionExpression
+          : undefined,
+      conditionGroups:
+        condition.value?.conditionType === ConditionType.RULE
+          ? condition.value?.conditionGroups
+          : undefined
     })
   }
   settingVisible.value = false

src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue

@@ -157,25 +157,24 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
 }
 
 /** 预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次 */
-// TODO @芋艿：这里我执行填写表单的时候不知道为啥一直报错，先注释了 @lesan：可以和群里的小北说下
-// watch(
-//   detailForm.value,
-//   (newValue) => {
-//     if (newValue && Object.keys(newValue.value).length > 0) {
-//       // 记录之前的节点审批人
-//       tempStartUserSelectAssignees.value = startUserSelectAssignees.value
-//       startUserSelectAssignees.value = {}
-//       // 加载最新的审批详情
-//       getApprovalDetail({
-//         id: props.selectProcessDefinition.id,
-//         processVariablesStr: JSON.stringify(newValue.value) // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
-//       })
-//     }
-//   },
-//   {
-//     immediate: true
-//   }
-// )
+watch(
+  detailForm.value,
+  (newValue) => {
+    if (newValue && Object.keys(newValue.value).length > 0) {
+      // 记录之前的节点审批人
+      tempStartUserSelectAssignees.value = startUserSelectAssignees.value
+      startUserSelectAssignees.value = {}
+      // 加载最新的审批详情
+      getApprovalDetail({
+        id: props.selectProcessDefinition.id,
+        processVariablesStr: JSON.stringify(newValue.value) // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
+      })
+    }
+  },
+  {
+    immediate: true
+  }
+)
 
 /** 获取审批详情 */
 const getApprovalDetail = async (row: any) => {