ZF/yudao-ui-admin-vben
1
0
Fork 0
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git synced 2025-12-30 10:32:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: [bpm][ele] 仿钉钉流程设计器迁移问题修复

Browse Source
This commit is contained in:
jason
2025-11-23 10:56:59 +08:00
parent 0e6d92e328
commit fec9a768d9
8 changed files with 134 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
View File

@@ -41,7 +41,7 @@ defineOptions({
const props = defineProps({
modelValue: {
type: Object,
required: true,
required: false,
default: () => ({}),
},
});

4
apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/condition-node-config.vue
View File

@@ -158,7 +158,7 @@ function changeNodeName() {
defineExpose({ open }); // 提供 open 方法，用于打开弹窗
</script>
<template>
<Drawer class="w-1/3">
<Drawer class="w-2/5">
<template #title>
<div class="flex items-center">
<ElInput
@@ -190,7 +190,7 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
未满足其它条件时，将进入此分支（该分支不可编辑和删除）
</div>
<div v-else>
<Condition ref="conditionRef" v-model:model-value="condition" />
<Condition ref="conditionRef" v-model="condition" />
</div>
</div>
</Drawer>

73
apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/delay-timer-node-config.vue
View File

@@ -10,7 +10,6 @@ import { BpmNodeTypeEnum } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import {
ElCol,
ElDatePicker,
ElForm,
ElFormItem,
@@ -19,7 +18,6 @@ import {
ElOption,
ElRadio,
ElRadioGroup,
ElRow,
ElSelect,
} from 'element-plus';
@@ -77,7 +75,7 @@ function getShowText(): string {
showText = `延迟${configForm.value.timeDuration}${TIME_UNIT_TYPES?.find((item) => item.value === configForm.value.timeUnit)?.label}`;
}
if (configForm.value.delayType === DelayTypeEnum.FIXED_DATE_TIME) {
showText = `延迟<EFBFBD>?{configForm.value.dateTime.replace('T', ' ')}`;
showText = `延迟至${configForm.value.dateTime.replace('T', ' ')}`;
}
return showText;
}
@@ -196,51 +194,40 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
<ElFormItem
v-if="configForm.delayType === DelayTypeEnum.FIXED_TIME_DURATION"
>
<ElRow :gutter="8">
<ElCol>
<ElFormItem prop="timeDuration">
<ElInputNumber
class="w-28"
v-model="configForm.timeDuration"
:min="1"
/>
</ElFormItem>
</ElCol>
<ElCol>
<ElSelect v-model="configForm.timeUnit" class="w-28">
<ElOption
v-for="item in TIME_UNIT_TYPES"
:key="item.value"
:value="item.value"
:label="item.label"
>
{{ item.label }}
</ElOption>
</ElSelect>
</ElCol>
<ElCol>
<span class="inline-flex h-8 items-center">后进入下一节点</span>
</ElCol>
</ElRow>
<div class="flex items-center gap-2">
<ElInputNumber
v-model="configForm.timeDuration"
:min="1"
controls-position="right"
class="!w-48"
/>
<ElSelect v-model="configForm.timeUnit" class="w-24">
<ElOption
v-for="item in TIME_UNIT_TYPES"
:key="item.value"
:value="item.value"
:label="item.label"
>
{{ item.label }}
</ElOption>
</ElSelect>
<span class="whitespace-nowrap">后进入下一节点</span>
</div>
</ElFormItem>
<ElFormItem
v-if="configForm.delayType === DelayTypeEnum.FIXED_DATE_TIME"
prop="dateTime"
>
<ElRow :gutter="8">
<ElCol>
<ElDatePicker
class="mr-2"
v-model="configForm.dateTime"
type="datetime"
placeholder="请选择日期和时间"
value-format="YYYY-MM-DDTHH:mm:ss"
/>
</ElCol>
<ElCol>
<span class="inline-flex h-8 items-center">后进入下一节点</span>
</ElCol>
</ElRow>
<div class="flex items-center gap-2">
<ElDatePicker
v-model="configForm.dateTime"
type="datetime"
placeholder="请选择日期和时间"
value-format="YYYY-MM-DDTHH:mm:ss"
class="flex-1"
/>
<span class="whitespace-nowrap">后进入下一节点</span>
</div>
</ElFormItem>
</ElForm>
</div>

40
apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
View File

@@ -135,7 +135,7 @@ defineExpose({ validate });
</script>
<template>
<ElForm ref="formRef" :model="condition" :rules="formRules">
<ElFormItem label="配置方式" name="conditionType">
<ElFormItem label="配置方式" prop="conditionType">
<ElRadioGroup
v-model="condition.conditionType"
@change="changeConditionType"
@@ -170,6 +170,8 @@ defineExpose({ validate });
size="small"
:spacer="condition.conditionGroups.and ? '且' : '或'"
class="w-full"
fill
:fill-ratio="100"
>
<ElCard
class="group relative w-full hover:border-blue-500"
@@ -212,14 +214,7 @@ defineExpose({ validate });
>
<ElCol :span="7">
<ElFormItem
:name="[
'conditionGroups',
'conditions',
cIdx,
'rules',
rIdx,
'leftSide',
]"
:prop="`conditionGroups.conditions.${cIdx}.rules.${rIdx}.leftSide`"
:rules="{
required: true,
message: '左值不能为空',
@@ -250,7 +245,7 @@ defineExpose({ validate });
</ElSelect>
</ElFormItem>
</ElCol>
<ElCol :span="5">
<ElCol :span="6">
<ElFormItem>
<ElSelect v-model="rule.opCode" placeholder="请选择操作符">
<ElOption
@@ -264,16 +259,9 @@ defineExpose({ validate });
</ElSelect>
</ElFormItem>
</ElCol>
<ElCol :span="9">
<ElCol :span="8">
<ElFormItem
:name="[
'conditionGroups',
'conditions',
cIdx,
'rules',
rIdx,
'rightSide',
]"
:prop="`conditionGroups.conditions.${cIdx}.rules.${rIdx}.rightSide`"
:rules="{
required: true,
message: '右值不能为空',
@@ -285,15 +273,15 @@ defineExpose({ validate });
</ElCol>
<ElCol :span="3">
<div class="flex items-center">
<Trash2
v-if="equation.rules.length > 1"
class="mr-2 size-4 cursor-pointer text-red-500"
@click="deleteConditionRule(equation, rIdx)"
/>
<Plus
class="size-4 cursor-pointer text-blue-500"
class="mr-2 size-4 cursor-pointer text-blue-500"
@click="addConditionRule(equation, rIdx)"
/>
<Trash2
v-show="equation.rules.length > 1"
class="size-4 cursor-pointer text-red-500"
@click="deleteConditionRule(equation, rIdx)"
/>
</div>
</ElCol>
</ElRow>
@@ -310,7 +298,7 @@ defineExpose({ validate });
<ElFormItem
v-if="condition.conditionType === ConditionType.EXPRESSION"
label="条件表达式"
name="conditionExpression"
prop="conditionExpression"
>
<ElInput
v-model="condition.conditionExpression"

40
apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-param-setting.vue
View File

@@ -63,7 +63,7 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
<!-- 参数名 -->
<div class="w-[26%] min-w-32 shrink-0">
<ElFormItem
:name="[bind, 'header', index, 'key']"
:prop="`${bind}.header.${index}.key`"
:rules="{
required: true,
message: '参数名不能为空',
@@ -91,7 +91,7 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
<!-- 参数值 -->
<div class="w-[42%] flex-1">
<ElFormItem
:name="[bind, 'header', index, 'value']"
:prop="`${bind}.header.${index}.value`"
:rules="{
required: true,
message: '参数值不能为空',
@@ -102,7 +102,7 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
<ElInput placeholder="请求头" v-model="item.value" />
</ElFormItem>
<ElFormItem
:name="[bind, 'header', index, 'value']"
:prop="`${bind}.header.${index}.value`"
:rules="{
required: true,
message: '参数值不能为空',
@@ -121,9 +121,7 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
:label="field.title"
:value="field.field"
:disabled="!field.required"
>
{{ field.title }}
</ElOption>
/>
</ElSelect>
</ElFormItem>
</div>
@@ -137,17 +135,15 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
/>
</div>
</div>
<ElButton
link
@click="addHttpRequestParam(props.header)"
class="flex items-center"
>
</ElFormItem>
<div class="-mt-2.5 mb-2">
<ElButton link @click="addHttpRequestParam(props.header)">
<template #icon>
<IconifyIcon class="size-4" icon="lucide:plus" />
</template>
添加一行
</ElButton>
</ElFormItem>
</div>
<ElFormItem label="请求体">
<div
v-for="(item, index) in props.body"
@@ -157,7 +153,7 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
<!-- 参数名 -->
<div class="w-[26%] min-w-32 shrink-0">
<ElFormItem
:name="[bind, 'body', index, 'key']"
:prop="`${bind}.body.${index}.key`"
:rules="{
required: true,
message: '参数名不能为空',
@@ -185,7 +181,7 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
<!-- 参数值 -->
<div class="w-[42%] flex-1">
<ElFormItem
:name="[bind, 'body', index, 'value']"
:prop="`${bind}.body.${index}.value`"
:rules="{
required: true,
message: '参数值不能为空',
@@ -196,7 +192,7 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
<ElInput placeholder="参数值" v-model="item.value" />
</ElFormItem>
<ElFormItem
:name="[bind, 'body', index, 'value']"
:prop="`${bind}.body.${index}.value`"
:rules="{
required: true,
message: '参数值不能为空',
@@ -215,9 +211,7 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
:label="field.title"
:value="field.field"
:disabled="!field.required"
>
{{ field.title }}
</ElOption>
/>
</ElSelect>
</ElFormItem>
</div>
@@ -231,15 +225,13 @@ function deleteHttpRequestParam(arr: HttpRequestParam[], index: number) {
/>
</div>
</div>
<ElButton
link
@click="addHttpRequestParam(props.body)"
class="flex items-center"
>
</ElFormItem>
<div class="-mt-2.5 mb-2">
<ElButton link @click="addHttpRequestParam(props.body)">
<template #icon>
<IconifyIcon class="size-4" icon="lucide:plus" />
</template>
添加一行
</ElButton>
</ElFormItem>
</div>
</template>

109
apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/http-request-setting.vue
View File

@@ -67,7 +67,7 @@ function deleteHttpResponseSetting(
<template>
<ElFormItem>
<ElAlert
message="仅支持 POST 请求，以请求体方式接收参数"
title="仅支持 POST 请求，以请求体方式接收参数"
type="warning"
show-icon
:closable="false"
@@ -76,7 +76,7 @@ function deleteHttpResponseSetting(
<!-- 请求地址-->
<ElFormItem
label="请求地址"
:name="[formItemPrefix, 'url']"
:prop="`${formItemPrefix}.url`"
:rules="{
required: true,
message: '请求地址不能为空',
@@ -95,58 +95,55 @@ function deleteHttpResponseSetting(
<div v-if="responseEnable">
<ElFormItem label="返回值">
<ElAlert
message="通过请求返回值, 可以修改流程表单的值"
title="通过请求返回值, 可以修改流程表单的值"
type="warning"
show-icon
:closable="false"
/>
</ElFormItem>
<ElFormItem>
<ElRow
:gutter="8"
v-for="(item, index) in setting.response"
:key="index"
class="mb-2"
>
<ElCol :span="10">
<ElFormItem
:name="[formItemPrefix, 'response', index, 'key']"
:rules="{
required: true,
message: '表单字段不能为空',
trigger: ['blur', 'change'],
}"
>
<ElSelect
v-model="item.key"
placeholder="请选择表单字段"
allow-clear
>
<ElOption
v-for="(field, fIdx) in formFields"
:key="fIdx"
:label="field.title"
:value="field.field"
:disabled="!field.required"
>
{{ field.title }}
</ElOption>
</ElSelect>
</ElFormItem>
</ElCol>
<ElCol :span="12">
<ElFormItem
:name="[formItemPrefix, 'response', index, 'value']"
:rules="{
required: true,
message: '请求返回字段不能为空',
trigger: ['blur', 'change'],
}"
>
<ElInput v-model="item.value" placeholder="请求返回字段" />
</ElFormItem>
</ElCol>
<ElCol :span="2">
<ElRow
:gutter="8"
v-for="(item, index) in setting.response"
:key="index"
class="mb-2"
align="middle"
>
<ElCol :span="10">
<ElFormItem
class="!mb-0"
:prop="`${formItemPrefix}.response.${index}.key`"
:rules="{
required: true,
message: '表单字段不能为空',
trigger: ['blur', 'change'],
}"
>
<ElSelect v-model="item.key" placeholder="请选择表单字段" clearable>
<ElOption
v-for="(field, fIdx) in formFields"
:key="fIdx"
:label="field.title"
:value="field.field"
:disabled="!field.required"
/>
</ElSelect>
</ElFormItem>
</ElCol>
<ElCol :span="12">
<ElFormItem
class="!mb-0"
:prop="`${formItemPrefix}.response.${index}.value`"
:rules="{
required: true,
message: '请求返回字段不能为空',
trigger: ['blur', 'change'],
}"
>
<ElInput v-model="item.value" placeholder="请求返回字段" />
</ElFormItem>
</ElCol>
<ElCol :span="2">
<ElFormItem class="!mb-0">
<div class="flex h-8 items-center">
<IconifyIcon
class="size-4 cursor-pointer text-red-500"
@@ -154,18 +151,16 @@ function deleteHttpResponseSetting(
@click="deleteHttpResponseSetting(setting.response!, index)"
/>
</div>
</ElCol>
</ElRow>
<ElButton
link
@click="addHttpResponseSetting(setting.response!)"
class="flex items-center"
>
</ElFormItem>
</ElCol>
</ElRow>
<div>
<ElButton link @click="addHttpResponseSetting(setting.response!)">
<template #icon>
<IconifyIcon class="size-4" icon="lucide:plus" />
</template>
添加一行
</ElButton>
</ElFormItem>
</div>
</div>
</template>

17
apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/router-node-config.vue
View File

@@ -230,13 +230,13 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
v-for="(item, index) in routerGroups"
:key="index"
>
<template #title>
<div class="flex h-16 w-full items-center justify-between">
<div class="flex items-center font-normal">
<template #header>
<div class="flex w-full items-center justify-between py-2">
<div class="flex items-center gap-4">
<span class="font-medium">路由{{ index + 1 }}</span>
<ElFormItem
class="mb-0 ml-4 inline-block w-48"
:name="['routerGroups', index, 'nodeId']"
class="!mb-0 w-64"
:prop="`routerGroups.${index}.nodeId`"
:rules="{
required: true,
message: '路由目标节点不能为空',
@@ -251,17 +251,16 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
<ElOption
v-for="node in nodeOptions"
:key="node.value"
:label="node.label"
:value="node.value"
>
{{ node.label }}
</ElOption>
/>
</ElSelect>
</ElFormItem>
</div>
<ElButton
v-if="routerGroups.length > 1"
circle
class="flex items-center justify-center"
size="small"
@click="deleteRouterGroup(index)"
>
<template #icon>

26
apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue
View File

@@ -241,7 +241,7 @@ function showConditionText(formSetting: FormTriggerSetting) {
);
}
/** 添加修改字段设置<EFBFBD>?*/
/** 添加修改字段设置项 */
function addFormFieldSetting(formSetting: FormTriggerSetting) {
if (!formSetting) return;
if (!formSetting.updateFormFields) {
@@ -383,10 +383,10 @@ onMounted(() => {
});
</script>
<template>
<Drawer class="w-1/3">
<Drawer class="w-2/5">
<template #title>
<div class="config-header">
<AInput
<ElInput
ref="inputRef"
v-if="showInput"
type="text"
@@ -416,12 +416,10 @@ onMounted(() => {
:key="index"
:value="item.value"
:label="item.label"
>
{{ item.label }}
</ElOption>
/>
</ElSelect>
</ElFormItem>
<!-- HTTP 请求触发<EFBFBD>?-->
<!-- HTTP 请求触发器 -->
<div
v-if="
[
@@ -437,20 +435,19 @@ onMounted(() => {
/>
</div>
<!-- 表单数据修改触发<EFBFBD>?-->
<!-- 表单数据修改触发器 -->
<div v-if="configForm.type === TriggerTypeEnum.FORM_UPDATE">
<div
v-for="(formSetting, index) in configForm.formSettings"
:key="index"
>
<ElCard class="mt-4">
<template #title>
<template #header>
<div class="flex w-full items-center justify-between">
<span>修改表单设置 {{ index + 1 }}</span>
<ElButton
v-if="configForm.formSettings!.length > 1"
shape="circle"
class="flex items-center justify-center"
circle
@click="deleteFormSetting(index)"
>
<template #icon>
@@ -588,20 +585,19 @@ onMounted(() => {
</ElRow>
</div>
<!-- 表单数据删除触发<EFBFBD>?-->
<!-- 表单数据删除触发器 -->
<div v-if="configForm.type === TriggerTypeEnum.FORM_DELETE">
<div
v-for="(formSetting, index) in configForm.formSettings"
:key="index"
>
<ElCard class="mt-4">
<template #title>
<template #header>
<div class="flex w-full items-center justify-between">
<span>删除表单设置 {{ index + 1 }}</span>
<ElButton
v-if="configForm.formSettings!.length > 1"
shape="circle"
class="flex items-center justify-center"
circle
@click="deleteFormSetting(index)"
>
<template #icon>