仿钉钉流程设计器- 通过只需一人,拒绝需要全员

src/components/SimpleProcessDesignerV2/src/NodeHandler.vue

@@ -84,7 +84,7 @@ const addNode = (type: number) => {
           enable: false
         },
         rejectHandler: {
-          type: RejectHandlerType.TERMINATION
+          type: RejectHandlerType.FINISH_PROCESS
         }
       },
       childNode: props.childNode

src/components/SimpleProcessDesignerV2/src/consts.ts

@@ -66,11 +66,20 @@ export enum RejectHandlerType {
   /**
    * 结束流程
    */
-  TERMINATION = 1,
+  FINISH_PROCESS = 1,
   /**
    * 驳回到指定节点
    */
-  RETURN_PRE_USER_TASK = 2
+  RETURN_PRE_USER_TASK = 2,
+  /**
+   * 按拒绝人数比例终止流程
+   */
+  FINISH_PROCESS_BY_REJECT_RATIO = 3,
+   /**
+   * 结束任务
+   */
+  FINISH_TASK = 4
+  
 }
 
 // 条件配置类型 （ 用于条件节点配置 ）
@@ -99,13 +108,22 @@ export enum ApproveMethodType  {
   */
   ALL_APPROVE = 2,
   /**
-  * 多人或签(一名审批人同意即可)
+  * 多人会签(按比例投票)
+  */
+  APPROVE_BY_RATIO = 3,
+  /**
+  * 多人会签(通过只需一人，拒绝需要全员)
+  */
+  ANY_APPROVE_ALL_REJECT = 4,
+
+  /**
+  * 多人或签(一名审批人通过即可)
   */
-  ANY_OF_APPROVE = 3,
+  ANY_APPROVE = 5,
    /**
   * 多人依次审批
   */
-  SEQUENTIAL_APPROVE = 4
+  SEQUENTIAL_APPROVE = 6
 
 }
 
@@ -198,10 +216,12 @@ NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人')
 NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
 
 export const APPROVE_METHODS: DictDataVO [] = [
-  { label: '单人审批', value: 1 },
-  { label: '多人会签(需所有审批人同意)', value: 2 },
-  { label: '多人或签(一名审批人同意即可)', value: 3 },
-  { label: '依次审批(按顺序依次审批)', value: 4 }
+  { label: '单人审批', value: ApproveMethodType.SINGLE_PERSON_APPROVE },
+  { label: '多人会签(需所有审批人同意)', value: ApproveMethodType.ALL_APPROVE },
+  // { label: '多人会签(按比例投票)', value: ApproveMethodType.APPROVE_BY_RATIO },
+  { label: '多人会签(通过只需一人,拒绝需要全员)', value: ApproveMethodType.ANY_APPROVE_ALL_REJECT },
+  { label: '多人或签(一名审批人通过即可)', value: ApproveMethodType.ANY_APPROVE },
+  { label: '依次审批(按顺序依次审批)', value: ApproveMethodType.SEQUENTIAL_APPROVE }
 ]
 
 export const CONDITION_CONFIG_TYPES: DictDataVO [] = [
@@ -222,8 +242,10 @@ export const TIMEOUT_HANDLER_ACTION_TYPES: DictDataVO [] = [
   { label: '自动拒绝', value: 3 },
 ]
 export const REJECT_HANDLER_TYPES: DictDataVO [] = [
-  { label: '结束流程', value: RejectHandlerType.TERMINATION },
-  { label: '驳回到指定节点', value: RejectHandlerType.RETURN_PRE_USER_TASK }
+  { label: '终止流程', value: RejectHandlerType.FINISH_PROCESS },
+  { label: '驳回到指定节点', value: RejectHandlerType.RETURN_PRE_USER_TASK },
+  { label: '按拒绝人数终止流程(用于会签)', value: RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO }
+  // { label: '结束任务', value: RejectHandlerType.FINISH_TASK }
 ]
 
 // 比较运算符

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

@@ -144,7 +144,10 @@
               />
             </el-form-item>
             <el-form-item label="审批方式" prop="approveMethod">
-              <el-radio-group v-model="currentNode.attributes.approveMethod">
+              <el-radio-group
+                v-model="currentNode.attributes.approveMethod"
+                @change="approveMethodChanged"
+              >
                 <div class="flex-col">
                   <div v-for="(item, index) in APPROVE_METHODS" :key="index">
                     <el-radio
@@ -162,24 +165,33 @@
               </el-radio-group>
             </el-form-item>
             <el-divider content-position="left">审批人拒绝时</el-divider>
-            <el-form-item label="处理方式" prop="rejectHandler">
-              <el-radio-group v-model="currentNode.attributes.rejectHandler.type" @change="rejectHandlerTypeChange">
+            <el-form-item prop="rejectHandler">
+              <el-radio-group v-model="currentNode.attributes.rejectHandler.type">
+                <div class="flex-col">
+                  <div v-for="(item, index) in REJECT_HANDLER_TYPES" :key="index">
                     <el-radio
-                  :border="true"
-                  v-for="item in REJECT_HANDLER_TYPES"
                       :key="item.value"
                       :value="item.value"
                       :label="item.label"
+                      :disabled="rejectHandlerOptionDisabled(item.value)"
                     />
+                  </div>
+                </div>
               </el-radio-group>
             </el-form-item>
 
             <el-form-item
-              v-if="currentNode.attributes.rejectHandler.type == RejectHandlerType.RETURN_PRE_USER_TASK"
+              v-if="
+                currentNode.attributes.rejectHandler.type == RejectHandlerType.RETURN_PRE_USER_TASK
+              "
               label="驳回节点"
               prop="rejectHandlerNode"
             >
-              <el-select v-model="currentNode.attributes.rejectHandler.returnNodeId" clearable style="width: 100%">
+              <el-select
+                v-model="currentNode.attributes.rejectHandler.returnNodeId"
+                clearable
+                style="width: 100%"
+              >
                 <el-option
                   v-for="item in returnTaskList"
                   :key="item.id"
@@ -474,9 +486,9 @@ const setCurrentNode = (node: SimpleFlowNode) => {
     timeUnit.value = convertTimeUnit(parseTimeUnit)
   }
   // 查找可以驳回的用户节点
-  const matchNodeList = [];
-  emits('find:returnTaskNodes', matchNodeList);
-  returnTaskList.value = matchNodeList;
+  const matchNodeList = []
+  emits('find:returnTaskNodes', matchNodeList)
+  returnTaskList.value = matchNodeList
 }
 
 defineExpose({ open, setCurrentNode }) // 暴露方法给父组件
@@ -517,12 +529,30 @@ const blurEvent = () => {
   currentNode.value.name =
     currentNode.value.name || (NODE_DEFAULT_NAME.get(NodeType.USER_TASK_NODE) as string)
 }
-const rejectHandlerTypeChange = () => {
-  if (currentNode.value.attributes?.rejectHandler.type === RejectHandlerType.RETURN_PRE_USER_TASK) {
-    
-    console.log('nodeList is {}', returnTaskList.value);
+const approveMethodChanged = () => {
+  const approveMethod =  currentNode.value.attributes?.approveMethod
+  if (approveMethod === ApproveMethodType.ANY_APPROVE_ALL_REJECT || approveMethod === ApproveMethodType.APPROVE_BY_RATIO) {
+    currentNode.value.attributes.rejectHandler.type =RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO
+  } else {
+    currentNode.value.attributes.rejectHandler.type = RejectHandlerType.FINISH_PROCESS
   }
 }
+const rejectHandlerOptionDisabled = computed(() => {
+  return (val: number) => {
+    const approveMethod =  currentNode.value.attributes?.approveMethod
+    if (val === RejectHandlerType.FINISH_PROCESS_BY_REJECT_RATIO && approveMethod !== ApproveMethodType.APPROVE_BY_RATIO
+        && approveMethod !== ApproveMethodType.ANY_APPROVE_ALL_REJECT) {
+      return true
+    }
+    if ( approveMethod === ApproveMethodType.ANY_APPROVE_ALL_REJECT && 
+        val === RejectHandlerType.FINISH_PROCESS
+    ) {
+      return true
+    }
+  
+    return false
+  }
+})
 // 默认 6小时
 const timeDuration = ref(6)
 const timeUnit = ref(TimeUnitType.HOUR)
@@ -540,6 +570,7 @@ const isoTimeDuration = computed(() => {
   }
   return strTimeDuration
 })
+
 // 超时开关改变
 const timeoutHandlerChange = () => {
   if (currentNode.value.attributes.timeoutHandler.enable) {