From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/SimpleProcessDesignerV2/src/nodes-config/TriggerNodeConfig.vue | 532 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 532 insertions(+), 0 deletions(-)
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/TriggerNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/TriggerNodeConfig.vue
new file mode 100644
index 0000000..c4fa63c
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/TriggerNodeConfig.vue
@@ -0,0 +1,532 @@
+<template>
+ <el-drawer
+ :append-to-body="true"
+ v-model="settingVisible"
+ :show-close="false"
+ :size="630"
+ :before-close="saveConfig"
+ >
+ <template #header>
+ <div class="config-header">
+ <input
+ v-if="showInput"
+ type="text"
+ class="config-editable-input"
+ @blur="blurEvent()"
+ v-mountedFocus
+ v-model="nodeName"
+ :placeholder="nodeName"
+ />
+ <div v-else class="node-name">
+ {{ nodeName }} <Icon class="ml-1" icon="ep:edit-pen" :size="16" @click="clickIcon()" />
+ </div>
+ <div class="divide-line"></div>
+ </div>
+ </template>
+ <div>
+ <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
+ <el-form-item label="瑙﹀彂鍣ㄧ被鍨�" prop="type">
+ <el-select v-model="configForm.type" @change="changeTriggerType">
+ <el-option
+ v-for="(item, index) in TRIGGER_TYPES"
+ :key="index"
+ :value="item.value"
+ :label="item.label"
+ />
+ </el-select>
+ </el-form-item>
+ <!-- HTTP 璇锋眰瑙﹀彂鍣� -->
+ <div
+ v-if="
+ [TriggerTypeEnum.HTTP_REQUEST, TriggerTypeEnum.HTTP_CALLBACK].includes(
+ configForm.type
+ ) && configForm.httpRequestSetting
+ "
+ >
+ <HttpRequestSetting
+ v-model:setting="configForm.httpRequestSetting"
+ :responseEnable="configForm.type === TriggerTypeEnum.HTTP_REQUEST"
+ :formItemPrefix="'httpRequestSetting'"
+ />
+ </div>
+
+ <!-- 琛ㄥ崟鏁版嵁淇敼瑙﹀彂鍣� -->
+ <div v-if="configForm.type === TriggerTypeEnum.FORM_UPDATE">
+ <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="success"
+ 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 items-center"
+ v-for="key in Object.keys(formSetting.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(formSetting, 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="`formSettings.${index}.updateFormFields.${key}`"
+ :rules="{
+ required: true,
+ message: '鍊间笉鑳戒负绌�',
+ trigger: 'blur'
+ }"
+ >
+ <el-input
+ class="w-160px"
+ v-model="formSetting.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(formSetting, key)"
+ />
+ </el-form-item>
+ </div>
+ </div>
+
+ <!-- 娣诲姞琛ㄥ崟瀛楁鎸夐挳 -->
+ <el-button type="primary" text @click="addFormFieldSetting(formSetting)">
+ <Icon icon="ep:memo" class="mr-5px" />娣诲姞淇敼瀛楁
+ </el-button>
+ </el-card>
+ </div>
+
+ <!-- 娣诲姞鏂扮殑璁剧疆 -->
+ <el-button class="mt-6" type="primary" text @click="addFormSetting">
+ <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>
+ <el-divider />
+ <div>
+ <el-button type="primary" @click="saveConfig">纭� 瀹�</el-button>
+ <el-button @click="cancelConfig">鍙� 娑�</el-button>
+ </div>
+ </template>
+ </el-drawer>
+</template>
+<script setup lang="ts">
+import {
+ SimpleFlowNode,
+ NodeType,
+ TriggerSetting,
+ TRIGGER_TYPES,
+ TriggerTypeEnum,
+ FormTriggerSetting,
+ DEFAULT_CONDITION_GROUP_VALUE
+} from '../consts'
+import { useWatchNode, useDrawer, useNodeName, useFormFields, getConditionShowText } from '../node'
+import HttpRequestSetting from './components/HttpRequestSetting.vue'
+import ConditionDialog from './components/ConditionDialog.vue'
+import { cloneDeep } from 'lodash-es'
+const { proxy } = getCurrentInstance() as any
+
+defineOptions({
+ name: 'TriggerNodeConfig'
+})
+const props = defineProps({
+ flowNode: {
+ type: Object as () => SimpleFlowNode,
+ required: true
+ }
+})
+const message = useMessage() // 娑堟伅寮圭獥
+// 鎶藉眽閰嶇疆
+const { settingVisible, closeDrawer, openDrawer } = useDrawer()
+// 褰撳墠鑺傜偣
+const currentNode = useWatchNode(props)
+// 鑺傜偣鍚嶇О
+const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.TRIGGER_NODE)
+// 瑙﹀彂鍣ㄨ〃鍗曢厤缃�
+const formRef = ref() // 琛ㄥ崟 Ref
+// 琛ㄥ崟鏍￠獙瑙勫垯
+const formRules = reactive({
+ type: [{ required: true, message: '瑙﹀彂鍣ㄧ被鍨嬩笉鑳戒负绌�', trigger: 'change' }],
+ 'httpRequestSetting.url': [{ required: true, message: '璇锋眰鍦板潃涓嶈兘涓虹┖', trigger: 'blur' }]
+})
+// 瑙﹀彂鍣ㄩ厤缃〃鍗曟暟鎹�
+const configForm = ref<TriggerSetting>({
+ type: TriggerTypeEnum.HTTP_REQUEST,
+ httpRequestSetting: {
+ url: '',
+ header: [],
+ body: [],
+ response: []
+ },
+ formSettings: [
+ {
+ conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+ updateFormFields: {},
+ deleteFields: []
+ }
+ ]
+})
+// 娴佺▼琛ㄥ崟瀛楁
+const formFields = useFormFields()
+
+// 鍙�夌殑淇敼鐨勮〃鍗曞瓧娈�
+const optionalUpdateFormFields = computed(() => {
+ return formFields.map((field) => ({
+ title: field.title,
+ field: field.field,
+ disabled: false
+ }))
+})
+
+let originalSetting: TriggerSetting | undefined
+
+/** 瑙﹀彂鍣ㄧ被鍨嬫敼鍙樹簡 */
+const changeTriggerType = () => {
+ if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
+ configForm.value.httpRequestSetting =
+ originalSetting?.type === TriggerTypeEnum.HTTP_REQUEST && originalSetting.httpRequestSetting
+ ? originalSetting.httpRequestSetting
+ : {
+ url: '',
+ header: [],
+ body: [],
+ response: []
+ }
+ configForm.value.formSettings = undefined
+ return
+ }
+
+ if (configForm.value.type === TriggerTypeEnum.HTTP_CALLBACK) {
+ configForm.value.httpRequestSetting =
+ originalSetting?.type === TriggerTypeEnum.HTTP_CALLBACK && originalSetting.httpRequestSetting
+ ? originalSetting.httpRequestSetting
+ : {
+ url: '',
+ header: [],
+ body: [],
+ response: []
+ }
+ configForm.value.formSettings = undefined
+ return
+ }
+
+ if (configForm.value.type === TriggerTypeEnum.FORM_UPDATE) {
+ configForm.value.formSettings =
+ originalSetting?.type === TriggerTypeEnum.FORM_UPDATE && originalSetting.formSettings
+ ? originalSetting.formSettings
+ : [
+ {
+ conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+ updateFormFields: {},
+ deleteFields: []
+ }
+ ]
+ configForm.value.httpRequestSetting = undefined
+ return
+ }
+
+ if (configForm.value.type === TriggerTypeEnum.FORM_DELETE) {
+ configForm.value.formSettings =
+ originalSetting?.type === TriggerTypeEnum.FORM_DELETE && originalSetting.formSettings
+ ? originalSetting.formSettings
+ : [
+ {
+ conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+ updateFormFields: undefined,
+ deleteFields: []
+ }
+ ]
+ configForm.value.httpRequestSetting = undefined
+ return
+ }
+}
+
+/** 娣诲姞鏂扮殑淇敼琛ㄥ崟璁剧疆 */
+const addFormSetting = () => {
+ configForm.value.formSettings!.push({
+ conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+ updateFormFields: {},
+ deleteFields: []
+ })
+}
+
+/** 鍒犻櫎淇敼琛ㄥ崟璁剧疆 */
+const deleteFormSetting = (index: number) => {
+ configForm.value.formSettings!.splice(index, 1)
+}
+
+/** 娣诲姞鏉′欢閰嶇疆 */
+const addFormSettingCondition = (index: number, formSetting: FormTriggerSetting) => {
+ const conditionDialog = proxy.$refs[`condition-${index}`][0]
+ conditionDialog.open(formSetting)
+}
+/** 鍒犻櫎鏉′欢閰嶇疆 */
+const deleteFormSettingCondition = (formSetting: FormTriggerSetting) => {
+ formSetting.conditionType = undefined
+}
+/** 鎵撳紑鏉′欢閰嶇疆寮圭獥 */
+const openFormSettingCondition = (index: number, formSetting: FormTriggerSetting) => {
+ const conditionDialog = proxy.$refs[`condition-${index}`][0]
+ conditionDialog.open(formSetting)
+}
+/** 澶勭悊鏉′欢閰嶇疆淇濆瓨 */
+const handleConditionUpdate = (index: number, condition: any) => {
+ configForm.value.formSettings![index].conditionType = condition.conditionType
+ configForm.value.formSettings![index].conditionExpression = condition.conditionExpression
+ configForm.value.formSettings![index].conditionGroups = condition.conditionGroups
+}
+/** 鏉′欢閰嶇疆灞曠ず */
+const showConditionText = (formSetting: FormTriggerSetting) => {
+ return getConditionShowText(
+ formSetting.conditionType,
+ formSetting.conditionExpression,
+ formSetting.conditionGroups,
+ formFields
+ )
+}
+
+/** 娣诲姞淇敼瀛楁璁剧疆椤� */
+const addFormFieldSetting = (formSetting: FormTriggerSetting) => {
+ if (!formSetting) return
+ if (!formSetting.updateFormFields) {
+ formSetting.updateFormFields = {}
+ }
+ formSetting.updateFormFields[''] = undefined
+}
+/** 鏇存柊瀛楁 KEY */
+const updateFormFieldKey = (formSetting: FormTriggerSetting, oldKey: string, newKey: string) => {
+ if (!formSetting?.updateFormFields) return
+ const value = formSetting.updateFormFields[oldKey]
+ delete formSetting.updateFormFields[oldKey]
+ formSetting.updateFormFields[newKey] = value
+}
+
+/** 鍒犻櫎淇敼瀛楁璁剧疆椤� */
+const deleteFormFieldSetting = (formSetting: FormTriggerSetting, key: string) => {
+ if (!formSetting?.updateFormFields) return
+ delete formSetting.updateFormFields[key]
+}
+
+/** 淇濆瓨閰嶇疆 */
+const saveConfig = async () => {
+ if (!formRef) return false
+ const valid = await formRef.value.validate()
+ if (!valid) return false
+ const showText = getShowText()
+ if (!showText) return false
+ currentNode.value.name = nodeName.value!
+ currentNode.value.showText = showText
+ if (configForm.value.type === TriggerTypeEnum.HTTP_REQUEST) {
+ configForm.value.formSettings = undefined
+ } 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
+ return true
+}
+
+/** 鍙栨秷閰嶇疆 */
+const cancelConfig = () => {
+ // 鎭㈠鍘熸潵鐨勯厤缃�
+ currentNode.value.triggerSetting = originalSetting
+ closeDrawer()
+}
+
+/** 鑾峰彇鑺傜偣灞曠ず鍐呭 */
+const getShowText = (): string => {
+ let showText = ''
+ if (
+ configForm.value.type === TriggerTypeEnum.HTTP_REQUEST ||
+ configForm.value.type === TriggerTypeEnum.HTTP_CALLBACK
+ ) {
+ showText = `${configForm.value.httpRequestSetting?.url}`
+ } else if (configForm.value.type === TriggerTypeEnum.FORM_UPDATE) {
+ for (const [index, setting] of configForm.value.formSettings!.entries()) {
+ if (!setting.updateFormFields || Object.keys(setting.updateFormFields).length === 0) {
+ message.warning(`璇锋坊鍔犺〃鍗曡缃�${index + 1}鐨勪慨鏀瑰瓧娈礰)
+ return ''
+ }
+ }
+ 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 = cloneDeep(node.triggerSetting)
+ if (node.triggerSetting) {
+ configForm.value = {
+ type: node.triggerSetting.type,
+ httpRequestSetting: node.triggerSetting.httpRequestSetting || {
+ url: '',
+ header: [],
+ body: [],
+ response: []
+ },
+ formSettings: node.triggerSetting.formSettings || [
+ {
+ conditionGroups: cloneDeep(DEFAULT_CONDITION_GROUP_VALUE),
+ updateFormFields: {},
+ deleteFields: []
+ }
+ ]
+ }
+ }
+}
+
+defineExpose({ openDrawer, showTriggerNodeConfig }) // 鏆撮湶鏂规硶缁欑埗缁勪欢
+</script>
+
+<style lang="scss" scoped></style>
--
Gitblit v1.8.0