From 012412ec22cf55ab556b5b03bfa7aa0096fe7d9d Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 17 Jan 2026 15:31:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20[bpm][antd]=20todo=20=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../child-process-node-config.vue | 8 +---
.../nodes-config/user-task-node-config.vue | 38 ++++++++++++++--
.../simple-process-design/helpers.ts | 45 +------------------
.../components/simple-process-design/index.ts | 2 -
.../model/form/modules/bpm-model-editor.vue | 4 +-
.../bpm/processInstance/report/index.vue | 3 +-
6 files changed, 40 insertions(+), 60 deletions(-)
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
index a89375397..1ac758a6d 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
@@ -29,6 +29,7 @@ import {
import { getForm } from '#/api/bpm/form';
import { getModelList } from '#/api/bpm/model';
+import { parseFormFields } from '#/components/form-create';
import {
CHILD_PROCESS_MULTI_INSTANCE_SOURCE_TYPE,
@@ -42,12 +43,7 @@ import {
TIME_UNIT_TYPES,
TimeUnitType,
} from '../../consts';
-import {
- parseFormFields,
- useFormFields,
- useNodeName,
- useWatchNode,
-} from '../../helpers';
+import { useFormFields, useNodeName, useWatchNode } from '../../helpers';
import { convertTimeUnit } from './utils';
defineOptions({ name: 'ChildProcessNodeConfig' });
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
index 80e6b0e07..2afdd6f97 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
@@ -6,9 +6,9 @@ import type { ComponentPublicInstance, Ref } from 'vue';
import type { ButtonSetting, SimpleFlowNode } from '../../consts';
import type { UserTaskFormType } from '../../helpers';
-import { computed, nextTick, onMounted, reactive, ref } from 'vue';
+import { computed, nextTick, onMounted, reactive, ref, watchEffect } from 'vue';
-import { useVbenDrawer } from '@vben/common-ui';
+import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
import {
BpmModelFormType,
BpmNodeTypeEnum,
@@ -39,6 +39,8 @@ import {
TypographyText,
} from 'ant-design-vue';
+import { ProcessExpressionSelectModal } from '#/views/bpm/processExpression/components';
+
import {
APPROVE_METHODS,
APPROVE_TYPE,
@@ -112,10 +114,20 @@ const [Drawer, drawerApi] = useVbenDrawer({
},
});
+const [ExpressionSelectModal, expressionSelectModalApi] = useVbenModal({
+ connectedComponent: ProcessExpressionSelectModal,
+ destroyOnClose: true,
+ showConfirmButton: false,
+});
+
// 节点名称配置
const { nodeName, showInput, clickIcon, changeNodeName, inputRef } =
useNodeName(BpmNodeTypeEnum.USER_TASK_NODE);
+watchEffect(() => {
+ void inputRef.value;
+});
+
// 激活的 Tab 标签页
const activeTabName = ref('user');
@@ -218,9 +230,18 @@ function changeCandidateStrategy() {
configForm.value.deptLevel = 1;
configForm.value.formUser = '';
configForm.value.formDept = '';
+ configForm.value.expression = '';
configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE;
}
+function openExpressionSelect() {
+ expressionSelectModalApi.open();
+}
+
+function handleExpressionSelected(row: any) {
+ configForm.value.expression = row?.expression ?? '';
+}
+
/** 审批方式改变 */
function approveMethodChanged() {
configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS;
@@ -843,7 +864,6 @@ onMounted(() => {
-
-
+
@@ -1266,4 +1294,6 @@ onMounted(() => {
+
+
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/helpers.ts b/apps/web-antd/src/views/bpm/components/simple-process-design/helpers.ts
index 3ffc2a303..a873ec664 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/helpers.ts
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/helpers.ts
@@ -20,6 +20,8 @@ import {
ProcessVariableEnum,
} from '@vben/constants';
+import { parseFormFields } from '#/components/form-create';
+
import {
ApproveMethodType,
AssignEmptyHandlerType,
@@ -56,49 +58,6 @@ function parseFormCreateFields(formFields?: string[]) {
return result;
}
-/**
- * 解析表单组件的 field, title 等字段（递归，如果组件包含子组件）
- *
- * @param rule 组件的生成规则 https://www.form-create.com/v3/guide/rule
- * @param fields 解析后表单组件字段
- * @param parentTitle 如果是子表单，子表单的标题，默认为空
- */
-export const parseFormFields = (
- rule: Record,
- fields: Array> = [],
- parentTitle: string = '',
-) => {
- const { type, field, $required, title: tempTitle, children } = rule;
- if (field && tempTitle) {
- let title = tempTitle;
- if (parentTitle) {
- title = `${parentTitle}.${tempTitle}`;
- }
- let required = false;
- if ($required) {
- required = true;
- }
- fields.push({
- field,
- title,
- type,
- required,
- });
- // TODO 子表单 需要处理子表单字段
- // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
- // // 解析子表单的字段
- // rule.props.rule.forEach((item) => {
- // parseFields(item, fieldsPermission, title)
- // })
- // }
- }
- if (children && Array.isArray(children)) {
- children.forEach((rule) => {
- parseFormFields(rule, fields);
- });
- }
-};
-
/**
* @description 表单数据权限配置，用于发起人节点 、审批节点、抄送节点
*/
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/index.ts b/apps/web-antd/src/views/bpm/components/simple-process-design/index.ts
index 41269eae8..5300fa0d9 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/index.ts
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/index.ts
@@ -7,5 +7,3 @@ export { default as SimpleProcessDesigner } from './components/simple-process-de
export { default as SimpleProcessViewer } from './components/simple-process-viewer.vue';
export type { SimpleFlowNode } from './consts';
-
-export { parseFormFields } from './helpers';
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue b/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue
index 782c8974d..de34e0334 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue
@@ -32,7 +32,7 @@ defineProps<{
const emit = defineEmits(['success', 'init-finished']);
const formFields = ref([]); // 表单信息
-const formType = ref(BpmModelFormType.NORMAL); // 表单类型，暂仅限流程表单 TODO @jason：是不是已经支持 业务表单 了？
+const formType = ref(BpmModelFormType.NORMAL); // 表单类型
provide('formFields', formFields);
provide('formType', formType);
@@ -40,7 +40,6 @@ const xmlString = inject('processData') as Ref; // 注入流程数据
const modelData = inject('modelData') as Ref; // 注入模型数据
const modeler = shallowRef(); // BPMN Modeler
-const processDesigner = ref();
const controlForm = ref({
simulation: true,
labelEditing: false,
@@ -102,7 +101,6 @@ onBeforeUnmount(() => {
:value="xmlString"
v-bind="controlForm"
keyboard
- ref="processDesigner"
@init-finished="initModeler"
:additional-model="controlForm.additionalModel"
:model="model"
diff --git a/apps/web-antd/src/views/bpm/processInstance/report/index.vue b/apps/web-antd/src/views/bpm/processInstance/report/index.vue
index b744eca0b..0792fdf07 100644
--- a/apps/web-antd/src/views/bpm/processInstance/report/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/report/index.vue
@@ -15,8 +15,7 @@ import {
cancelProcessInstanceByAdmin,
getProcessInstanceManagerPage,
} from '#/api/bpm/processInstance';
-// TODO @jason：现在 ele 和 antd 使用的 parseFormFields 路径不同；看看以哪个为主。ele 是 import { parseFormFields } from '#/components/form-create';
-import { parseFormFields } from '#/views/bpm/components/simple-process-design';
+import { parseFormFields } from '#/components/form-create';
import { useGridColumns, useGridFormSchema } from './data';