仿钉钉流程设计器, 条件节点修改

2025-06-19 06:42:00 +08:00 · 2024-09-21 11:01:56 +08:00 · 2024-09-21 11:01:56 +08:00 · 4680a7dcfd
commit 4680a7dcfd
parent 4a2a7b760a
5 changed files with 44 additions and 46 deletions
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@ -120,10 +120,9 @@ const addNode = (type: number) => {
          showText: '',
          type: NodeType.CONDITION_NODE,
          childNode: undefined,
-          attributes: {
-            conditionType: 1,
-            defaultFlow: false
-          }
+          conditionType: 1,
+          defaultFlow: false
+          
        },
        {
          id: 'Flow_' + generateUUID(),
@ -131,10 +130,8 @@ const addNode = (type: number) => {
          showText: '其它情况进入此流程',
          type: NodeType.CONDITION_NODE,
          childNode: undefined,
-          attributes: {
-            conditionType: undefined,
-            defaultFlow: true
-          }
+          conditionType: undefined,
+          defaultFlow: true
        }
      ]
    }
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@ -62,7 +62,6 @@ export interface SimpleFlowNode {
  type: NodeType
  name: string
  showText?: string
-  attributes?: any
  // 孩子节点
  childNode?: SimpleFlowNode
  // 条件节点
@ -89,6 +88,15 @@ export interface SimpleFlowNode {
  assignEmptyHandler?: AssignEmptyHandler
  // 审批节点的审批人与发起人相同时，对应的处理类型
  assignStartUserHandlerType?: number
+  // 条件类型
+  conditionType?: ConditionType
+  // 条件表达式
+  conditionExpression?: string
+  // 条件组
+  conditionGroups?: ConditionGroup
+  // 是否默认的条件
+  defaultFlow?: boolean
+
 }
 // 候选人策略枚举 （ 用于审批节点。抄送节点 )
 export enum CandidateStrategy {
@ -292,7 +300,7 @@ export enum TimeUnitType {
 }

 // 条件配置类型 （ 用于条件节点配置 ）
-export enum ConditionConfigType {
+export enum ConditionType {
  /**
   * 条件表达式
   */
@ -428,8 +436,8 @@ export const APPROVE_METHODS: DictDataVO[] = [
 ]

 export const CONDITION_CONFIG_TYPES: DictDataVO[] = [
-  { label: '条件表达式', value: 1 },
-  { label: '条件规则', value: 2 }
+  { label: '条件表达式', value: ConditionType.EXPRESSION },
+  { label: '条件规则', value: ConditionType.RULE }
 ]

 // 时间单位类型
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
@ -26,19 +26,17 @@
      </div>
    </template>
    <div>
-      <div class="mb-3 text-size-sm" v-if="currentNode.attributes.defaultFlow"
-        >其它条件不满足进入此分支（该分支不可编辑和删除）</div
-      >
+      <div class="mb-3 font-size-16px" v-if="currentNode.defaultFlow">其它条件不满足进入此分支（该分支不可编辑和删除）</div>
      <div v-else>
        <el-form
          ref="formRef"
-          :model="currentNode.attributes"
+          :model="currentNode"
          :rules="formRules"
          label-position="top"
        >
          <el-form-item label="配置方式" prop="conditionType">
            <el-radio-group
-              v-model="currentNode.attributes.conditionType"
+              v-model="currentNode.conditionType"
              @change="changeConditionType"
            >
              <el-radio
@ -53,18 +51,18 @@
          </el-form-item>

          <el-form-item
-            v-if="currentNode.attributes.conditionType === 1"
+            v-if="currentNode.conditionType === 1"
            label="条件表达式"
            prop="conditionExpression"
          >
            <el-input
              type="textarea"
-              v-model="currentNode.attributes.conditionExpression"
+              v-model="currentNode.conditionExpression"
              clearable
              style="width: 100%"
            />
          </el-form-item>
-          <el-form-item v-if="currentNode.attributes.conditionType === 2" label="条件规则">
+          <el-form-item v-if="currentNode.conditionType === 2" label="条件规则">
            <div class="condition-group-tool">
              <div class="flex items-center">
                <div class="mr-4">条件组关系</div>
@ -75,9 +73,6 @@
                  inactive-text="或"
                />
              </div>
-              <!-- <div class="flex items-center"> 
-                  <el-button size="small" type="primary">添加条件组</el-button>
-                </div>  -->
            </div>
            <el-space direction="vertical" :spacer="conditionGroups.and ? '且' : '或'">
              <el-card
@ -166,7 +161,7 @@
 import {
  SimpleFlowNode,
  CONDITION_CONFIG_TYPES,
-  ConditionConfigType,
+  ConditionType,
  COMPARISON_OPERATORS,
  ConditionGroup,
  Condition,
@ -183,7 +178,7 @@ const conditionConfigTypes = computed(() => {
  return CONDITION_CONFIG_TYPES.filter((item) => {
    // 业务表单暂时去掉条件规则选项
    if (formType?.value !== 10) {
-      return item.value === 1
+      return item.value === ConditionType.RULE
    } else {
      return true
    }
@ -202,9 +197,9 @@ const props = defineProps({
 })
 const settingVisible = ref(false)
 const open = () => {
-  if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE) {
-    if (currentNode.value.attributes.conditionGroups) {
-      conditionGroups.value = currentNode.value.attributes.conditionGroups
+  if (currentNode.value.conditionType === ConditionType.RULE) {
+    if (currentNode.value.conditionGroups) {
+      conditionGroups.value = currentNode.value.conditionGroups
    }
  }
  settingVisible.value = true
@ -227,7 +222,7 @@ const blurEvent = () => {
  showInput.value = false
  currentNode.value.name =
    currentNode.value.name ||
-    getDefaultConditionNodeName(props.nodeIndex, currentNode.value.attributes?.defaultFlow)
+    getDefaultConditionNodeName(props.nodeIndex, currentNode.value?.defaultFlow)
 }

 const currentNode = ref<SimpleFlowNode>(props.conditionNode)
@ -256,7 +251,7 @@ const formRef = ref() // 表单 Ref

 // 保存配置
 const saveConfig = async () => {
-  if (!currentNode.value.attributes.defaultFlow) {
+  if (!currentNode.value.defaultFlow) {
    // 校验表单
    if (!formRef) return false
    const valid = await formRef.value.validate()
@ -266,12 +261,12 @@ const saveConfig = async () => {
      return false
    }
    currentNode.value.showText = showText
-    if (currentNode.value.attributes.conditionType === ConditionConfigType.EXPRESSION) {
-      currentNode.value.attributes.conditionGroups = undefined
+    if (currentNode.value.conditionType === ConditionType.EXPRESSION) {
+      currentNode.value.conditionGroups = undefined
    }
-    if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE) {
-      currentNode.value.attributes.conditionExpression = undefined
-      currentNode.value.attributes.conditionGroups = conditionGroups.value
+    if (currentNode.value.conditionType === ConditionType.RULE) {
+      currentNode.value.conditionExpression = undefined
+      currentNode.value.conditionGroups = conditionGroups.value
    }
  }
  settingVisible.value = false
@ -279,12 +274,12 @@ const saveConfig = async () => {
 }
 const getShowText = (): string => {
  let showText = ''
-  if (currentNode.value.attributes.conditionType === ConditionConfigType.EXPRESSION) {
-    if (currentNode.value.attributes.conditionExpression) {
-      showText = `表达式：${currentNode.value.attributes.conditionExpression}`
+  if (currentNode.value.conditionType === ConditionType.EXPRESSION) {
+    if (currentNode.value.conditionExpression) {
+      showText = `表达式：${currentNode.value.conditionExpression}`
    }
  }
-  if (currentNode.value.attributes.conditionType === ConditionConfigType.RULE) {
+  if (currentNode.value.conditionType === ConditionType.RULE) {
    // 条件组是否为与关系
    const groupAnd = conditionGroups.value.and
    let warningMesg: undefined | string = undefined
@ -298,7 +293,7 @@ const getShowText = (): string => {
                getFieldTitle(rule.leftSide) + ' ' + getOpName(rule.opCode) + ' ' + rule.rightSide
              )
            } else {
-              // 又一条规则不完善。提示错误
+              // 有一条规则不完善。提示错误
              warningMesg = '请完善条件规则'
              return ''
            }
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
@ -130,7 +130,7 @@ const blurEvent = (index: number) => {
  showInputs.value[index] = false
  const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode
  conditionNode.name =
-    conditionNode.name || getDefaultConditionNodeName(index, conditionNode.attributes?.defaultFlow)
+    conditionNode.name || getDefaultConditionNodeName(index, conditionNode.defaultFlow)
 }

 // 点击条件名称
@ -156,10 +156,8 @@ const addCondition = () => {
      type: NodeType.CONDITION_NODE,
      childNode: undefined,
      conditionNodes: [],
-      attributes: {
-        conditionType: 1,
-        defaultFlow: false
-      }
+      conditionType: 1,
+      defaultFlow: false
    }
    conditionNodes.splice(lastIndex, 0, conditionData)
  }
--- a/src/components/SimpleProcessDesignerV2/src/utils.ts
+++ b/src/components/SimpleProcessDesignerV2/src/utils.ts
@ -1,7 +1,7 @@
 import { TimeUnitType, ApproveType, APPROVE_TYPE } from './consts'

 // 获取条件节点默认的名称
-export const getDefaultConditionNodeName = (index: number, defaultFlow: boolean): string => {
+export const getDefaultConditionNodeName = (index: number, defaultFlow: boolean | undefined): string => {
  if (defaultFlow) {
    return '其它情况'
  }