feat: ConditionNodeConfig使用Condition组件

src/components/SimpleProcessDesignerV2/src/NodeHandler.vue

@@ -67,12 +67,13 @@ import {
   ApproveMethodType,
   AssignEmptyHandlerType,
   AssignStartUserHandlerType,
+  ConditionType,
   NODE_DEFAULT_NAME,
   NodeType,
   RejectHandlerType,
   SimpleFlowNode
 } from './consts'
-import { generateUUID } from '@/utils'
+import {generateUUID} from '@/utils'
 
 defineOptions({
   name: 'NodeHandler'
@@ -163,7 +164,7 @@ const addNode = (type: number) => {
           showText: '',
           type: NodeType.CONDITION_NODE,
           childNode: undefined,
-          conditionType: 1,
+          conditionType: ConditionType.RULE,
           defaultFlow: false
         },
         {

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

@@ -30,117 +30,7 @@
         >未满足其它条件时，将进入此分支（该分支不可编辑和删除）</div
       >
       <div v-else>
-        <el-form ref="formRef" :model="currentNode" :rules="formRules" label-position="top">
+        <Condition ref="conditionRef" v-model="condition" />
-          <el-form-item label="配置方式" prop="conditionType">
-            <el-radio-group v-model="currentNode.conditionType" @change="changeConditionType">
-              <el-radio
-                v-for="(dict, index) in conditionConfigTypes"
-                :key="index"
-                :value="dict.value"
-                :label="dict.value"
-              >
-                {{ dict.label }}
-              </el-radio>
-            </el-radio-group>
-          </el-form-item>
-
-          <el-form-item
-            v-if="currentNode.conditionType === 1"
-            label="条件表达式"
-            prop="conditionExpression"
-          >
-            <el-input
-              type="textarea"
-              v-model="currentNode.conditionExpression"
-              clearable
-              style="width: 100%"
-            />
-          </el-form-item>
-          <el-form-item v-if="currentNode.conditionType === 2" label="条件规则">
-            <div class="condition-group-tool">
-              <div class="flex items-center">
-                <div class="mr-4">条件组关系</div>
-                <el-switch
-                  v-model="conditionGroups.and"
-                  inline-prompt
-                  active-text="且"
-                  inactive-text="或"
-                />
-              </div>
-            </div>
-            <el-space direction="vertical" :spacer="conditionGroups.and ? '且' : '或'">
-              <el-card
-                class="condition-group"
-                style="width: 530px"
-                v-for="(condition, cIdx) in conditionGroups.conditions"
-                :key="cIdx"
-              >
-                <div class="condition-group-delete" v-if="conditionGroups.conditions.length > 1">
-                  <Icon
-                    color="#0089ff"
-                    icon="ep:circle-close-filled"
-                    :size="18"
-                    @click="deleteConditionGroup(cIdx)"
-                  />
-                </div>
-                <template #header>
-                  <div class="flex items-center justify-between">
-                    <div>条件组</div>
-                    <div class="flex">
-                      <div class="mr-4">规则关系</div>
-                      <el-switch
-                        v-model="condition.and"
-                        inline-prompt
-                        active-text="且"
-                        inactive-text="或"
-                      />
-                    </div>
-                  </div>
-                </template>
-
-                <div class="flex pt-2" v-for="(rule, rIdx) in condition.rules" :key="rIdx">
-                  <div class="mr-2">
-                    <el-select style="width: 160px" v-model="rule.leftSide">
-                      <el-option
-                        v-for="(item, index) in fieldOptions"
-                        :key="index"
-                        :label="item.title"
-                        :value="item.field"
-                        :disabled="!item.required"
-                      />
-                    </el-select>
-                  </div>
-                  <div class="mr-2">
-                    <el-select v-model="rule.opCode" style="width: 100px">
-                      <el-option
-                        v-for="item in COMPARISON_OPERATORS"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                      />
-                    </el-select>
-                  </div>
-                  <div class="mr-2">
-                    <el-input v-model="rule.rightSide" style="width: 160px" />
-                  </div>
-                  <div class="mr-1 flex items-center" v-if="condition.rules.length > 1">
-                    <Icon
-                      icon="ep:delete"
-                      :size="18"
-                      @click="deleteConditionRule(condition, rIdx)"
-                    />
-                  </div>
-                  <div class="flex items-center">
-                    <Icon icon="ep:plus" :size="18" @click="addConditionRule(condition, rIdx)" />
-                  </div>
-                </div>
-              </el-card>
-            </el-space>
-            <div title="添加条件组" class="mt-4 cursor-pointer">
-              <Icon color="#0089ff" icon="ep:plus" :size="24" @click="addConditionGroup" />
-            </div>
-          </el-form-item>
-        </el-form>
       </div>
     </div>
     <template #footer>
@@ -155,33 +45,17 @@
 <script setup lang="ts">
 import {
   SimpleFlowNode,
-  CONDITION_CONFIG_TYPES,
   ConditionType,
   COMPARISON_OPERATORS,
-  ConditionGroup,
-  Condition,
-  ConditionRule,
   ProcessVariableEnum
 } from '../consts'
 import { getDefaultConditionNodeName } from '../utils'
 import { useFormFields } from '../node'
-import { BpmModelFormType } from '@/utils/constants'
+import Condition from './components/Condition.vue'
 const message = useMessage() // 消息弹窗
 defineOptions({
   name: 'ConditionNodeConfig'
 })
-const formType = inject<Ref<number>>('formType') // 表单类型
-const conditionConfigTypes = computed(() => {
-  return CONDITION_CONFIG_TYPES.filter((item) => {
-    // 业务表单暂时去掉条件规则选项
-    if (formType?.value === BpmModelFormType.CUSTOM && item.value === ConditionType.RULE) {
-      return false
-    } else {
-      return true
-    }
-  })
-})
-
 const props = defineProps({
   conditionNode: {
     type: Object as () => SimpleFlowNode,
@@ -193,11 +67,26 @@ const props = defineProps({
   }
 })
 const settingVisible = ref(false)
+const condition = ref<any>()
 const open = () => {
-  if (currentNode.value.conditionType === ConditionType.RULE) {
+  condition.value = {
-    if (currentNode.value.conditionGroups) {
+    conditionType: currentNode.value.conditionType,
-      conditionGroups.value = currentNode.value.conditionGroups
+    conditionExpression: currentNode.value.conditionExpression ?? '',
-    }
+    conditionGroups: currentNode.value.conditionGroups ?? {
+      and: true,
+      conditions: [
+        {
+          and: true,
+          rules: [
+            {
+              opCode: '==',
+              leftSide: '',
+              rightSide: ''
+            }
+          ]
+        }
+      ]
+    },
   }
   settingVisible.value = true
 }
@@ -239,31 +128,27 @@ const handleClose = async (done: (cancel?: boolean) => void) => {
     done()
   }
 }
-// 表单校验规则
-const formRules = reactive({
-  conditionType: [{ required: true, message: '配置方式不能为空', trigger: 'blur' }],
-  conditionExpression: [{ required: true, message: '条件表达式不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
 
+const conditionRef = ref()
 // 保存配置
 const saveConfig = async () => {
   if (!currentNode.value.defaultFlow) {
     // 校验表单
-    if (!formRef) return false
+    const valid = await conditionRef.value.validate()
-    const valid = await formRef.value.validate()
     if (!valid) return false
     const showText = getShowText()
     if (!showText) {
       return false
     }
     currentNode.value.showText = showText
+    currentNode.value.conditionType = condition.value.conditionType
     if (currentNode.value.conditionType === ConditionType.EXPRESSION) {
       currentNode.value.conditionGroups = undefined
+      currentNode.value.conditionExpression = condition.value.conditionExpression
     }
     if (currentNode.value.conditionType === ConditionType.RULE) {
       currentNode.value.conditionExpression = undefined
-      currentNode.value.conditionGroups = conditionGroups.value
+      currentNode.value.conditionGroups = condition.value.conditionGroups
     }
   }
   settingVisible.value = false
@@ -271,16 +156,16 @@ const saveConfig = async () => {
 }
 const getShowText = (): string => {
   let showText = ''
-  if (currentNode.value.conditionType === ConditionType.EXPRESSION) {
+  if (condition.value.conditionType === ConditionType.EXPRESSION) {
-    if (currentNode.value.conditionExpression) {
+    if (condition.value.conditionExpression) {
-      showText = `表达式：${currentNode.value.conditionExpression}`
+      showText = `表达式：${condition.value.conditionExpression}`
     }
   }
-  if (currentNode.value.conditionType === ConditionType.RULE) {
+  if (condition.value.conditionType === ConditionType.RULE) {
     // 条件组是否为与关系
-    const groupAnd = conditionGroups.value.and
+    const groupAnd = condition.value.conditionGroups.and
     let warningMesg: undefined | string = undefined
-    const conditionGroup = conditionGroups.value.conditions.map((item) => {
+    const conditionGroup = condition.value.conditionGroups.conditions.map((item) => {
       return (
         '(' +
         item.rules
@@ -309,60 +194,7 @@ const getShowText = (): string => {
   return showText
 }
 
-// 改变条件配置方式
-const changeConditionType = () => {}
-
-const conditionGroups = ref<ConditionGroup>({
-  and: true,
-  conditions: [
-    {
-      and: true,
-      rules: [
-        {
-          opCode: '==',
-          leftSide: '',
-          rightSide: ''
-        }
-      ]
-    }
-  ]
-})
-// 添加条件组
-const addConditionGroup = () => {
-  const condition = {
-    and: true,
-    rules: [
-      {
-        type: 1,
-        opName: '等于',
-        opCode: '==',
-        leftSide: '',
-        rightSide: ''
-      }
-    ]
-  }
-  conditionGroups.value.conditions.push(condition)
-}
-// 删除条件组
-const deleteConditionGroup = (idx: number) => {
-  conditionGroups.value.conditions.splice(idx, 1)
-}
-
-// 添加条件规则
-const addConditionRule = (condition: Condition, idx: number) => {
-  const rule: ConditionRule = {
-    opCode: '==',
-    leftSide: '',
-    rightSide: ''
-  }
-  condition.rules.splice(idx + 1, 0, rule)
-}
-
-const deleteConditionRule = (condition: Condition, idx: number) => {
-  condition.rules.splice(idx, 1)
-}
 const fieldsInfo = useFormFields()
-
 /** 条件规则可选择的表单字段 */
 const fieldOptions = computed(() => {
   const fieldsCopy = fieldsInfo.slice()

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

@@ -1,4 +1,3 @@
-<!-- TODO @lesan：其它路由条件，可以使用这个哇？ -->
 <template>
   <el-form ref="formRef" :model="condition" :rules="formRules" label-position="top">
     <el-form-item label="配置方式" prop="conditionType">
@@ -118,13 +117,13 @@
 
 <script setup lang="ts">
 import {
-  CONDITION_CONFIG_TYPES,
   COMPARISON_OPERATORS,
+  CONDITION_CONFIG_TYPES,
   ConditionType,
   ProcessVariableEnum
 } from '../../consts'
-import { BpmModelFormType } from '@/utils/constants'
+import {BpmModelFormType} from '@/utils/constants'
-import { useFormFields } from '../../node'
+import {useFormFields} from '../../node'
 
 const props = defineProps({
   modelValue: {
@@ -200,6 +199,13 @@ const addConditionGroup = (conditions) => {
   }
   conditions.push(condition)
 }
+
+const validate = async () => {
+  if (!formRef) return false
+  return await formRef.value.validate();
+}
+
+defineExpose({validate})
 </script>
 
 <style lang="scss" scoped>