【功能新增】新增修改表单数据触发器

Author: cooling-jason

src/components/SimpleProcessDesignerV2/src/consts.ts

@@ -716,7 +716,8 @@ export type RouterSetting = {
  */
 export type TriggerSetting = {
   type: TriggerTypeEnum
-  httpRequestSetting: HttpRequestTriggerSetting
+  httpRequestSetting?: HttpRequestTriggerSetting
+  normalFormSetting?: NormalFormTriggerSetting
 }
 
 /**
@@ -726,7 +727,11 @@ export enum TriggerTypeEnum {
   /**
    * 发送 HTTP 请求触发器
    */
-  HTTP_REQUEST = 1
+  HTTP_REQUEST = 1,
+  /**
+   * 更新流程表单触发器
+   */
+  UPDATE_NORMAL_FORM = 2
 }
 
 /**
@@ -743,6 +748,15 @@ export type HttpRequestTriggerSetting = {
   response?: Record<string, string>[]
 }
 
+/**
+ * 流程表单触发器配置结构定义
+ */
+export type NormalFormTriggerSetting = {
+  // 更新表单字段
+  updateFormFields?: Record<string, any>
+}
+
 export const TRIGGER_TYPES: DictDataVO[] = [
-  { label: 'HTTP 请求', value: TriggerTypeEnum.HTTP_REQUEST }
+  { label: 'HTTP 请求', value: TriggerTypeEnum.HTTP_REQUEST },
+  { label: '修改表单数据', value: TriggerTypeEnum.UPDATE_NORMAL_FORM }
 ]

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

@@ -83,7 +83,7 @@
                 >
                   <el-select class="w-160px!" v-model="item.key" placeholder="请选择表单字段">
                     <el-option
-                      v-for="(field, fIdx) in formFieldOptions"
+                      v-for="(field, fIdx) in formFields"
                       :key="fIdx"
                       :label="field.title"
                       :value="field.field"
@@ -121,6 +121,64 @@
             </el-button>
           </el-form-item>
         </div>
+        <div
+          v-if="
+            configForm.type === TriggerTypeEnum.UPDATE_NORMAL_FORM && configForm.normalFormSetting
+          "
+        >
+          <el-divider content-position="left">修改表单设置</el-divider>
+          <div
+            class="flex items-center"
+            v-for="key in Object.keys(configForm.normalFormSetting.updateFormFields!)"
+            :key="key"
+          >
+            <div class="mr-2 flex items-center">
+              <el-form-item>
+                <el-select
+                  class="w-160px!"
+                  :model-value="key"
+                  @update:model-value="(newKey) => updateFormFieldKey(key, newKey)"
+                  placeholder="请选择表单字段"
+                  :disabled="key !== ''"
+                >
+                  <el-option
+                    v-for="(field, fIdx) in optionalUpdateFormFields"
+                    :key="fIdx"
+                    :label="field.title"
+                    :value="field.field"
+                    :disabled="field.disabled"
+                  />
+                </el-select>
+              </el-form-item>
+            </div>
+            <div class="mx-2"><el-form-item>的值设置为</el-form-item></div>
+            <div class="mr-2">
+              <el-form-item
+                :prop="`normalFormSetting.updateFormFields.${key}`"
+                :rules="{
+                  required: true,
+                  message: '值不能为空',
+                  trigger: 'blur'
+                }"
+              >
+                <el-input
+                  class="w-160px"
+                  v-model="configForm.normalFormSetting.updateFormFields![key]"
+                  placeholder="请输入"
+                  :disabled="!key"
+                />
+              </el-form-item>
+            </div>
+            <div class="mr-1 pt-1 cursor-pointer">
+              <el-form-item>
+                <Icon icon="ep:delete" :size="18" @click="deleteFormFieldSetting(key)" />
+              </el-form-item>
+            </div>
+          </div>
+          <el-button type="primary" text @click="addFormFieldSetting()">
+            <Icon icon="ep:plus" class="mr-5px" />添加修改字段
+          </el-button>
+        </div>
       </el-form>
     </div>
     <template #footer>
@@ -146,6 +204,7 @@ const props = defineProps({
     required: true
   }
 })
+const message = useMessage() // 消息弹窗
 // 抽屉配置
 const { settingVisible, closeDrawer, openDrawer } = useDrawer()
 // 当前节点
@@ -167,10 +226,28 @@ const configForm = ref<TriggerSetting>({
     header: [],
     body: [],
     response: []
-  }
+  },
+  normalFormSetting: { updateFormFields: {} }
 })
 // 流程表单字段
-const formFieldOptions = useFormFields()
+const formFields = useFormFields()
+
+// 可选的修改的表单字段
+const optionalUpdateFormFields = computed(() => {
+  const usedFields = Object.keys(configForm.value.normalFormSetting?.updateFormFields || {})
+  return formFields.map((field) => ({
+    title: field.title,
+    field: field.field,
+    disabled: usedFields.includes(field.field)
+  }))
+})
+
+const updateFormFieldKey = (oldKey: string, newKey: string) => {
+  if (!configForm.value.normalFormSetting?.updateFormFields) return
+  const value = configForm.value.normalFormSetting.updateFormFields[oldKey]
+  delete configForm.value.normalFormSetting.updateFormFields[oldKey]
+  configForm.value.normalFormSetting.updateFormFields[newKey] = value
+}
 
 /** 添加 HTTP 请求返回值设置项*/
 const addHttpResponseSetting = (responseSetting: Record<string, string>[]) => {
@@ -185,6 +262,19 @@ const deleteHttpResponseSetting = (responseSetting: Record<string, string>[], in
   responseSetting.splice(index, 1)
 }
 
+/** 添加修改表单设置项 */
+const addFormFieldSetting = () => {
+  if (configForm.value.normalFormSetting!.updateFormFields === undefined) {
+    configForm.value.normalFormSetting!.updateFormFields = {}
+  }
+  configForm.value.normalFormSetting!.updateFormFields[''] = undefined
+}
+/** 删除修改表单设置项 */
+const deleteFormFieldSetting = (key: string) => {
+  if (!configForm.value.normalFormSetting?.updateFormFields) return
+  delete configForm.value.normalFormSetting.updateFormFields[key]
+}
+
 /** 保存配置 */
 const saveConfig = async () => {
   if (!formRef) return false
@@ -194,15 +284,29 @@ const saveConfig = async () => {
   if (!showText) return false
   currentNode.value.name = nodeName.value!
   currentNode.value.showText = showText
+  if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
+    configForm.value.normalFormSetting = undefined
+  }
+  if (configForm.value.type === TriggerTypeEnum.UPDATE_NORMAL_FORM) {
+    configForm.value.httpRequestSetting = undefined
+  }
   currentNode.value.triggerSetting = configForm.value
   settingVisible.value = false
   return true
 }
+
 /** 获取节点展示内容 */
 const getShowText = (): string => {
   let showText = ''
   if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
-    showText = `${configForm.value.httpRequestSetting.url}`
+    showText = `${configForm.value.httpRequestSetting?.url}`
+  } else if (configForm.value.type === TriggerTypeEnum.UPDATE_NORMAL_FORM) {
+    const updatefields = Object.keys(configForm.value.normalFormSetting?.updateFormFields || {})
+    if (updatefields.length === 0) {
+      message.warning('请设置修改表单字段')
+    } else {
+      showText = '修改表单数据'
+    }
   }
   return showText
 }
@@ -211,8 +315,16 @@ const getShowText = (): string => {
 const showTriggerNodeConfig = (node: SimpleFlowNode) => {
   nodeName.value = node.name
   if (node.triggerSetting) {
-    configForm.value.type = node.triggerSetting.type
-    configForm.value.httpRequestSetting = node.triggerSetting.httpRequestSetting
+    configForm.value = {
+      type: node.triggerSetting.type,
+      httpRequestSetting: node.triggerSetting.httpRequestSetting || {
+        url: '',
+        header: [],
+        body: [],
+        response: []
+      },
+      normalFormSetting: node.triggerSetting.normalFormSetting || { updateFormFields: {} }
+    }
   }
 }