【功能新增】新增删除表单数据触发器

2025-08-08 08:22:41 +08:00 · 2025-02-21 22:46:27 +08:00 · 2025-02-21 22:46:27 +08:00 · bfe43369ef
commit bfe43369ef
parent b2ddefe4a0
3 changed files with 158 additions and 18 deletions
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@ -748,9 +748,13 @@ export enum TriggerTypeEnum {
   */
  HTTP_REQUEST = 1,
  /**
-   * 流程表单更新触发器
+   * 表单数据更新触发器
   */
-  FORM_UPDATE = 2 
+  FORM_UPDATE = 2,
+  /**
+   * 表单数据删除触发器
+   */
+  FORM_DELETE = 3
 }

 /**
@ -777,11 +781,14 @@ export type FormTriggerSetting = {
  conditionExpression?: string
  // 条件组
  conditionGroups?: ConditionGroup
-  // 更新表单字段
-  updateFormFields?: Record<string, any>
+  // 更新表单字段配置
+  updateFormFields?: Record<string, any>,
+  // 删除表单字段配置
+  deleteFields?: string[] 
 }

 export const TRIGGER_TYPES: DictDataVO[] = [
  { label: 'HTTP 请求', value: TriggerTypeEnum.HTTP_REQUEST },
-  { label: '修改表单数据', value: TriggerTypeEnum.FORM_UPDATE }
+  { label: '修改表单数据', value: TriggerTypeEnum.FORM_UPDATE },
+  { label: '删除表单数据', value: TriggerTypeEnum.FORM_DELETE } 
 ]
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/TriggerNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/TriggerNodeConfig.vue
@ -26,7 +26,7 @@
    <div>
      <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
        <el-form-item label="触发器类型" prop="type">
-          <el-select v-model="configForm.type">
+          <el-select v-model="configForm.type" @change="changeTriggerType">
            <el-option
              v-for="(item, index) in TRIGGER_TYPES"
              :key="index"
@ -121,6 +121,7 @@
            </el-button>
          </el-form-item>
        </div>
+
        <!-- 表单数据修改触发器 -->
        <div v-if="configForm.type === TriggerTypeEnum.FORM_UPDATE">
          <div v-for="(formSetting, index) in configForm.formSettings" :key="index">
@ -150,8 +151,8 @@
                  type="success"
                  effect="light"
                  closable
-                  @close="deleteFormUpdateCondition(formSetting)"
-                  @click="openFormUpdateCondition(index, formSetting)"
+                  @close="deleteFormSettingCondition(formSetting)"
+                  @click="openFormSettingCondition(index, formSetting)"
                >
                  {{ showConditionText(formSetting) }}
                </el-tag>
@ -160,7 +161,7 @@
                v-else
                type="primary"
                text
-                @click="addFormUpdateCondition(index, formSetting)"
+                @click="addFormSettingCondition(index, formSetting)"
              >
                <Icon icon="ep:link" class="mr-5px" />添加条件
              </el-button>
@ -231,6 +232,76 @@
            <Icon icon="ep:setting" class="mr-5px" />添加设置
          </el-button>
        </div>
+
+        <!-- 表单数据删除触发器 -->
+        <div v-if="configForm.type === TriggerTypeEnum.FORM_DELETE">
+          <div v-for="(formSetting, index) in configForm.formSettings" :key="index">
+            <el-card class="w-580px mt-4">
+              <template #header>
+                <div class="flex items-center justify-between">
+                  <div>删除表单设置 {{ index + 1 }}</div>
+                  <el-button
+                    type="primary"
+                    plain
+                    circle
+                    v-if="configForm.formSettings!.length > 1"
+                    @click="deleteFormSetting(index)"
+                  >
+                    <Icon icon="ep:close" />
+                  </el-button>
+                </div>
+              </template>
+
+              <!-- 条件设置 -->
+              <ConditionDialog
+                :ref="`condition-${index}`"
+                @update-condition="(val) => handleConditionUpdate(index, val)"
+              />
+              <div class="cursor-pointer" v-if="formSetting.conditionType">
+                <el-tag
+                  type="warning"
+                  effect="light"
+                  closable
+                  @close="deleteFormSettingCondition(formSetting)"
+                  @click="openFormSettingCondition(index, formSetting)"
+                >
+                  {{ showConditionText(formSetting) }}
+                </el-tag>
+              </div>
+              <el-button
+                v-else
+                type="primary"
+                text
+                @click="addFormSettingCondition(index, formSetting)"
+              >
+                <Icon icon="ep:link" class="mr-5px" />添加条件
+              </el-button>
+
+              <el-divider content-position="left">删除表单字段设置</el-divider>
+              <!-- 表单字段删除设置 -->
+              <div class="flex flex-wrap gap-2">
+                <el-select
+                  v-model="formSetting.deleteFields"
+                  multiple
+                  placeholder="请选择要删除的字段"
+                  class="w-full"
+                >
+                  <el-option
+                    v-for="field in formFields"
+                    :key="field.field"
+                    :label="field.title"
+                    :value="field.field"
+                  />
+                </el-select>
+              </div>
+            </el-card>
+          </div>
+
+          <!-- 添加新的设置 -->
+          <el-button class="mt-6" type="primary" text @click="addFormSetting">
+            <Icon icon="ep:setting" class="mr-5px" />添加设置
+          </el-button>
+        </div>
      </el-form>
    </div>
    <template #footer>
@ -292,7 +363,8 @@ const configForm = ref<TriggerSetting>({
  formSettings: [
    {
      conditionGroups: DEFAULT_CONDITION_GROUP_VALUE,
-      updateFormFields: {}
+      updateFormFields: {},
+      deleteFields: []
    }
  ]
 })
@ -308,6 +380,46 @@ const optionalUpdateFormFields = computed(() => {
  }))
 })

+let originalSetting: TriggerSetting | undefined
+
+/** 触发器类型改变了 */
+const changeTriggerType = () => {
+  if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
+    configForm.value.httpRequestSetting = originalSetting?.httpRequestSetting || {
+      url: '',
+      header: [],
+      body: [],
+      response: []
+    }
+    configForm.value.formSettings = undefined
+  } else if (configForm.value.type === TriggerTypeEnum.FORM_UPDATE) {
+    configForm.value.formSettings =
+      originalSetting?.type === TriggerTypeEnum.FORM_UPDATE && originalSetting.formSettings
+        ? originalSetting.formSettings
+        : [
+            {
+              conditionGroups: DEFAULT_CONDITION_GROUP_VALUE,
+              updateFormFields: {},
+              deleteFields: []
+            }
+          ]
+    configForm.value.httpRequestSetting = undefined
+  } else if (configForm.value.type === TriggerTypeEnum.FORM_DELETE) {
+    console.log('originalSetting?.type', originalSetting?.type)
+    configForm.value.formSettings =
+      originalSetting?.type === TriggerTypeEnum.FORM_DELETE && originalSetting.formSettings
+        ? originalSetting.formSettings
+        : [
+            {
+              conditionGroups: DEFAULT_CONDITION_GROUP_VALUE,
+              updateFormFields: undefined,
+              deleteFields: []
+            }
+          ]
+    configForm.value.httpRequestSetting = undefined
+  }
+}
+
 /** 添加 HTTP 请求返回值设置项 */
 const addHttpResponseSetting = (responseSetting: Record<string, string>[]) => {
  responseSetting.push({
@ -325,7 +437,8 @@ const deleteHttpResponseSetting = (responseSetting: Record<string, string>[], in
 const addFormSetting = () => {
  configForm.value.formSettings!.push({
    conditionGroups: DEFAULT_CONDITION_GROUP_VALUE,
-    updateFormFields: {}
+    updateFormFields: {},
+    deleteFields: []
  })
 }

@ -335,16 +448,16 @@ const deleteFormSetting = (index: number) => {
 }

 /** 添加条件配置 */
-const addFormUpdateCondition = (index: number, formSetting: FormTriggerSetting) => {
+const addFormSettingCondition = (index: number, formSetting: FormTriggerSetting) => {
  const conditionDialog = proxy.$refs[`condition-${index}`][0]
  conditionDialog.open(formSetting)
 }
 /** 删除条件配置 */
-const deleteFormUpdateCondition = (formSetting: FormTriggerSetting) => {
+const deleteFormSettingCondition = (formSetting: FormTriggerSetting) => {
  formSetting.conditionType = undefined
 }
 /** 打开条件配置弹窗 */
-const openFormUpdateCondition = (index: number, formSetting: FormTriggerSetting) => {
+const openFormSettingCondition = (index: number, formSetting: FormTriggerSetting) => {
  const conditionDialog = proxy.$refs[`condition-${index}`][0]
  conditionDialog.open(formSetting)
 }
@ -397,9 +510,18 @@ const saveConfig = async () => {
  currentNode.value.showText = showText
  if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
    configForm.value.formSettings = undefined
-  }
-  if (configForm.value.type === TriggerTypeEnum.FORM_UPDATE) {
+  } else if (configForm.value.type === TriggerTypeEnum.FORM_UPDATE) {
    configForm.value.httpRequestSetting = undefined
+    // 清理删除字段相关的数据
+    configForm.value.formSettings?.forEach((setting) => {
+      setting.deleteFields = undefined
+    })
+  } else if (configForm.value.type === TriggerTypeEnum.FORM_DELETE) {
+    configForm.value.httpRequestSetting = undefined
+    // 清理修改字段相关的数据
+    configForm.value.formSettings?.forEach((setting) => {
+      setting.updateFormFields = undefined
+    })
  }
  currentNode.value.triggerSetting = configForm.value
  settingVisible.value = false
@ -419,6 +541,14 @@ const getShowText = (): string => {
      }
    }
    showText = '修改表单数据'
+  } else if (configForm.value.type === TriggerTypeEnum.FORM_DELETE) {
+    for (const [index, setting] of configForm.value.formSettings!.entries()) {
+      if (!setting.deleteFields || setting.deleteFields.length === 0) {
+        message.warning(`请选择表单设置${index + 1}要删除的字段`)
+        return ''
+      }
+    }
+    showText = '删除表单数据'
  }
  return showText
 }
@ -426,6 +556,7 @@ const getShowText = (): string => {
 /** 显示触发器节点配置， 由父组件传过来 */
 const showTriggerNodeConfig = (node: SimpleFlowNode) => {
  nodeName.value = node.name
+  originalSetting = node.triggerSetting
  if (node.triggerSetting) {
    configForm.value = {
      type: node.triggerSetting.type,
@ -438,7 +569,8 @@ const showTriggerNodeConfig = (node: SimpleFlowNode) => {
      formSettings: node.triggerSetting.formSettings || [
        {
          conditionGroups: DEFAULT_CONDITION_GROUP_VALUE,
-          updateFormFields: {}
+          updateFormFields: {},
+          deleteFields: []
        }
      ]
    }
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/components/ConditionDialog.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/components/ConditionDialog.vue
@ -1,4 +1,5 @@
-<!-- TODO @jason：有可能，它里面套 Condition 么？ -->
+<!-- TODO @jason：有可能，它里面套 Condition 么？  -->
+<!-- TODO 怕影响其它节点功能，后面看看如何如何复用 Condtion --> 
 <template>
  <Dialog v-model="dialogVisible" title="条件配置" width="600px" :fullscreen="false">
    <div class="h-410px">