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

Author: cooling-jason

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 } 
 ]

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,13 +541,22 @@ 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
 }
 
 /** 显示触发器节点配置， 由父组件传过来 */
 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: []
         }
       ]
     }

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">