feat: [BPM 工作流] Simple 模型 - 触发器节点条件设置

apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition-dialog.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { ConditionGroup } from '../../../consts';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ConditionType, DEFAULT_CONDITION_GROUP_VALUE } from '../../../consts';
+import Condition from './condition.vue';
+
+defineOptions({ name: 'ConditionDialog' });
+
+const emit = defineEmits<{
+  updateCondition: [condition: object];
+}>();
+
+const conditionData = ref<{
+  conditionExpression?: string;
+  conditionGroups?: ConditionGroup;
+  conditionType: ConditionType;
+}>({
+  conditionType: ConditionType.RULE,
+  conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+});
+
+// 条件组件的引用
+const conditionRef = ref();
+
+const [Modal, modalApi] = useVbenModal({
+  title: '条件配置',
+  destroyOnClose: true,
+  draggable: true,
+  async onConfirm() {
+    // 校验表单
+    if (!conditionRef.value) return;
+    const valid = await conditionRef.value.validate().catch(() => false);
+    if (!valid) {
+      message.warning('请完善条件规则');
+      return;
+    }
+    // 设置完的条件传递给父组件
+    emit('updateCondition', conditionData.value);
+    modalApi.close();
+  },
+  onCancel() {
+    modalApi.close();
+  },
+});
+
+const open = (conditionObj: any | undefined) => {
+  if (conditionObj) {
+    conditionData.value.conditionType = conditionObj.conditionType;
+    conditionData.value.conditionExpression = conditionObj.conditionExpression;
+    conditionData.value.conditionGroups = conditionObj.conditionGroups;
+  }
+  modalApi.open();
+};
+
+defineExpose({ open });
+</script>
+<template>
+  <Modal class="w-1/2">
+    <Condition ref="conditionRef" v-model="conditionData" />
+  </Modal>
+</template>
+
+<style lang="scss" scoped></style>

apps/web-antd/src/components/simple-process-design/components/nodes-config/modules/condition.vue

@@ -0,0 +1,323 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+
+import type { Ref } from 'vue';
+
+import { computed, inject, reactive, ref } from 'vue';
+
+import { IconifyIcon, Plus, Trash2 } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import {
+  Card,
+  Col,
+  Form,
+  FormItem,
+  Input,
+  Radio,
+  RadioGroup,
+  Row,
+  Select,
+  SelectOption,
+  Space,
+  Switch,
+  Textarea,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { BpmModelFormType } from '#/utils/constants';
+
+import {
+  COMPARISON_OPERATORS,
+  CONDITION_CONFIG_TYPES,
+  ConditionType,
+  DEFAULT_CONDITION_GROUP_VALUE,
+} from '../../../consts';
+import { useFormFieldsAndStartUser } from '../../../helpers';
+
+defineOptions({
+  name: 'Condition',
+});
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  },
+});
+const emit = defineEmits(['update:modelValue']);
+const condition = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(newValue) {
+    emit('update:modelValue', newValue);
+  },
+});
+
+const formType = inject<Ref<number>>('formType'); // 表单类型
+const conditionConfigTypes = computed(() => {
+  return CONDITION_CONFIG_TYPES.filter((item) => {
+    // 业务表单暂时去掉条件规则选项
+    return !(
+      formType?.value === BpmModelFormType.CUSTOM &&
+      item.value === ConditionType.RULE
+    );
+  });
+});
+
+/** 条件规则可选择的表单字段 */
+const fieldOptions = useFormFieldsAndStartUser();
+
+// 表单校验规则
+const formRules: Record<string, Rule[]> = reactive({
+  conditionType: [
+    { required: true, message: '配置方式不能为空', trigger: 'change' },
+  ],
+  conditionExpression: [
+    {
+      required: true,
+      message: '条件表达式不能为空',
+      trigger: ['blur', 'change'],
+    },
+  ],
+});
+const formRef = ref(); // 表单 Ref
+
+/** 切换条件配置方式 */
+const changeConditionType = () => {
+  if (
+    condition.value.conditionType === ConditionType.RULE &&
+    !condition.value.conditionGroups
+  ) {
+    condition.value.conditionGroups = cloneDeep(DEFAULT_CONDITION_GROUP_VALUE);
+  }
+};
+const deleteConditionGroup = (conditions: any, index: number) => {
+  conditions.splice(index, 1);
+};
+
+const deleteConditionRule = (condition: any, index: number) => {
+  condition.rules.splice(index, 1);
+};
+
+const addConditionRule = (condition: any, index: number) => {
+  const rule = {
+    opCode: '==',
+    leftSide: undefined,
+    rightSide: '',
+  };
+  condition.rules.splice(index + 1, 0, rule);
+};
+
+const addConditionGroup = (conditions: any) => {
+  const condition = {
+    and: true,
+    rules: [
+      {
+        opCode: '==',
+        leftSide: undefined,
+        rightSide: '',
+      },
+    ],
+  };
+  conditions.push(condition);
+};
+
+const validate = async () => {
+  if (!formRef.value) return false;
+  return await formRef.value.validate();
+};
+
+defineExpose({ validate });
+</script>
+<template>
+  <Form
+    ref="formRef"
+    :model="condition"
+    :rules="formRules"
+    :label-col="{ span: 24 }"
+    :wrapper-col="{ span: 24 }"
+  >
+    <FormItem label="配置方式" name="conditionType">
+      <RadioGroup
+        v-model:value="condition.conditionType"
+        @change="changeConditionType"
+      >
+        <Radio
+          v-for="(dict, indexConditionType) in conditionConfigTypes"
+          :key="indexConditionType"
+          :value="dict.value"
+        >
+          {{ dict.label }}
+        </Radio>
+      </RadioGroup>
+    </FormItem>
+    <FormItem
+      v-if="
+        condition.conditionType === ConditionType.RULE &&
+        condition.conditionGroups
+      "
+    >
+      <div class="mb-5 flex w-full justify-between">
+        <div class="flex items-center">
+          <div class="mr-4">条件组关系</div>
+          <Switch
+            v-model:checked="condition.conditionGroups.and"
+            checked-children="且"
+            un-checked-children="或"
+          />
+        </div>
+      </div>
+      <Space direction="vertical" size="small" class="w-11/12 pl-1">
+        <template #split>
+          {{ condition.conditionGroups.and ? '且' : '或' }}
+        </template>
+        <Card
+          class="group relative w-full hover:border-[#1890ff]"
+          v-for="(equation, cIdx) in condition.conditionGroups.conditions"
+          :key="cIdx"
+        >
+          <div
+            class="absolute left-0 top-0 z-[1] flex cursor-pointer opacity-0 group-hover:opacity-100"
+            v-if="condition.conditionGroups.conditions.length > 1"
+          >
+            <IconifyIcon
+              color="#0089ff"
+              icon="ep:circle-close-filled"
+              class="size-4"
+              @click="
+                deleteConditionGroup(condition.conditionGroups.conditions, cIdx)
+              "
+            />
+          </div>
+          <template #extra>
+            <div class="flex items-center justify-between">
+              <div>条件组</div>
+              <div class="flex">
+                <div class="mr-4">规则关系</div>
+                <Switch
+                  v-model:checked="equation.and"
+                  checked-children="且"
+                  un-checked-children="或"
+                />
+              </div>
+            </div>
+          </template>
+
+          <Row
+            :gutter="8"
+            class="mb-2"
+            v-for="(rule, rIdx) in equation.rules"
+            :key="rIdx"
+          >
+            <Col :span="8">
+              <FormItem
+                :name="[
+                  'conditionGroups',
+                  'conditions',
+                  cIdx,
+                  'rules',
+                  rIdx,
+                  'leftSide',
+                ]"
+                :rules="{
+                  required: true,
+                  message: '左值不能为空',
+                  trigger: 'change',
+                }"
+              >
+                <Select
+                  v-model:value="rule.leftSide"
+                  allow-clear
+                  placeholder="请选择表单字段"
+                >
+                  <SelectOption
+                    v-for="(field, fIdx) in fieldOptions"
+                    :key="fIdx"
+                    :label="field.title"
+                    :value="field.field"
+                    :disabled="!field.required"
+                  >
+                    <Tooltip
+                      title="表单字段非必填时不能作为流程分支条件"
+                      placement="right"
+                      v-if="!field.required"
+                    >
+                      <span>{{ field.title }}</span>
+                    </Tooltip>
+                    <template v-else>{{ field.title }}</template>
+                  </SelectOption>
+                </Select>
+              </FormItem>
+            </Col>
+            <Col :span="6">
+              <Select v-model:value="rule.opCode" placeholder="请选择操作符">
+                <SelectOption
+                  v-for="operator in COMPARISON_OPERATORS"
+                  :key="operator.value"
+                  :label="operator.label"
+                  :value="operator.value"
+                >
+                  {{ operator.label }}
+                </SelectOption>
+              </Select>
+            </Col>
+            <Col :span="7">
+              <FormItem
+                :name="[
+                  'conditionGroups',
+                  'conditions',
+                  cIdx,
+                  'rules',
+                  rIdx,
+                  'rightSide',
+                ]"
+                :rules="{
+                  required: true,
+                  message: '右值不能为空',
+                  trigger: ['blur', 'change'],
+                }"
+              >
+                <Input
+                  v-model:value="rule.rightSide"
+                  placeholder="请输入右值"
+                />
+              </FormItem>
+            </Col>
+            <Col :span="3">
+              <div class="flex h-[32px] items-center">
+                <Trash2
+                  v-if="equation.rules.length > 1"
+                  class="mr-2 size-4 cursor-pointer text-red-500"
+                  @click="deleteConditionRule(equation, rIdx)"
+                />
+                <Plus
+                  class="size-4 cursor-pointer text-blue-500"
+                  @click="addConditionRule(equation, rIdx)"
+                />
+              </div>
+            </Col>
+          </Row>
+        </Card>
+      </Space>
+      <div title="添加条件组" class="mt-4 cursor-pointer">
+        <Plus
+          class="size-[24px] text-blue-500"
+          @click="addConditionGroup(condition.conditionGroups?.conditions)"
+        />
+      </div>
+    </FormItem>
+    <FormItem
+      v-if="condition.conditionType === ConditionType.EXPRESSION"
+      label="条件表达式"
+      name="conditionExpression"
+    >
+      <Textarea
+        v-model:value="condition.conditionExpression"
+        placeholder="请输入条件表达式"
+        allow-clear
+        :auto-size="{ minRows: 3, maxRows: 6 }"
+      />
+    </FormItem>
+  </Form>
+</template>

apps/web-antd/src/components/simple-process-design/components/nodes-config/trigger-node-config.vue

@@ -38,10 +38,11 @@ import {
 import {
   getConditionShowText,
   useFormFields,
+  useFormFieldsAndStartUser,
   useNodeName,
   useWatchNode,
 } from '../../helpers';
-// TODO import ConditionDialog from './modules/condition-dialog.vue';
+import ConditionDialog from './modules/condition-dialog.vue';
 import HttpRequestSetting from './modules/http-request-setting.vue';
 
 defineOptions({
@@ -215,8 +216,7 @@ const openFormSettingCondition = (
   conditionDialog.open(formSetting);
 };
 /** 处理条件配置保存 */
-/* 暂时注释掉未使用的函数
+const handleConditionUpdate = (index: number, condition: any) => {
-const _handleConditionUpdate = (index: number, condition: any) => {
   if (configForm.value.formSettings![index]) {
     configForm.value.formSettings![index].conditionType =
       condition.conditionType;
@@ -226,14 +226,15 @@ const _handleConditionUpdate = (index: number, condition: any) => {
       condition.conditionGroups;
   }
 };
-*/
+// 包含发起人字段的表单字段
+const includeStartUserFormFields = useFormFieldsAndStartUser();
 /** 条件配置展示 */
 const showConditionText = (formSetting: FormTriggerSetting) => {
   return getConditionShowText(
     formSetting.conditionType,
     formSetting.conditionExpression,
     formSetting.conditionGroups,
-    formFields,
+    includeStartUserFormFields,
   );
 };
 
@@ -457,17 +458,17 @@ onMounted(() => {
                 </div>
               </template>
 
-              <!-- TODO 条件设置 -->
+              <ConditionDialog
-              <!-- <ConditionDialog
                 :ref="`condition-${index}`"
                 @update-condition="(val) => handleConditionUpdate(index, val)"
-              /> -->
+              />
               <Row>
                 <Col :span="24">
                   <div class="cursor-pointer" v-if="formSetting.conditionType">
                     <Tag
                       color="success"
                       closable
+                      class="text-sm"
                       @close="deleteFormSettingCondition(formSetting)"
                       @click="openFormSettingCondition(index, formSetting)"
                     >
@@ -605,17 +606,18 @@ onMounted(() => {
                 </div>
               </template>
 
-              <!-- TODO 条件设置 -->
+              <!-- 条件设置 -->
-              <!-- <ConditionDialog
+              <ConditionDialog
                 :ref="`condition-${index}`"
                 @update-condition="(val) => handleConditionUpdate(index, val)"
-              /> -->
+              />
               <Row>
                 <Col :span="24">
                   <div class="cursor-pointer" v-if="formSetting.conditionType">
                     <Tag
-                      color="warning"
+                      color="success"
                       closable
+                      class="text-sm"
                       @close="deleteFormSettingCondition(formSetting)"
                       @click="openFormSettingCondition(index, formSetting)"
                     >

apps/web-antd/src/components/simple-process-design/consts.ts

@@ -475,9 +475,9 @@ export type ListenerHandler = {
  * 条件规则结构定义
  */
 export type ConditionRule = {
-  leftSide: string;
+  leftSide: string | undefined;
   opCode: string;
-  rightSide: string;
+  rightSide: string | undefined;
 };
 
 /**
@@ -725,7 +725,7 @@ export const DEFAULT_CONDITION_GROUP_VALUE = {
       rules: [
         {
           opCode: '==',
-          leftSide: '',
+          leftSide: undefined,
           rightSide: '',
         },
       ],