Skip to content

phsl / admin

Go to a project
Commit bfe43369 by jason
Options

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

parent b2ddefe4
Showing with 158 additions and 18 deletions
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,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: []
}
]
}
......
src/components/SimpleProcessDesignerV2/src/nodes-config/components/ConditionDialog.vue
<!-- TODO @jason：有可能，它里面套 Condition 么？ -->
<!-- TODO @jason：有可能，它里面套 Condition 么？ -->
<!-- TODO 怕影响其它节点功能，后面看看如何如何复用 Condtion -->
<template>
<Dialog v-model="dialogVisible" title="条件配置" width="600px" :fullscreen="false">
<div class="h-410px">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment