!319 feat: [bpm][antd] todo 修改

Merge pull request !319 from Jason/dev
2026-01-17 09:09:11 +00:00
parent 91119eac8e db1dfae481
commit ce34e6e1a0
16 changed files with 162 additions and 104 deletions
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
@@ -16,7 +16,7 @@ import {
 } from 'ant-design-vue';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import ProcessListenerSelectModal from '#/views/bpm/processListener/components/process-listener-select-modal.vue';
+import { ProcessListenerSelectModal } from '#/views/bpm/processListener/components';

 import { createListenerObject, updateElementExtensions } from '../../utils';
 import ListenerFieldModal from './ListenerFieldModal.vue';
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
@@ -16,7 +16,7 @@ import {
 } from 'ant-design-vue';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import ProcessListenerSelectModal from '#/views/bpm/processListener/components/process-listener-select-modal.vue';
+import { ProcessListenerSelectModal } from '#/views/bpm/processListener/components';

 import { createListenerObject, updateElementExtensions } from '../../utils';
 import ListenerFieldModal from './ListenerFieldModal.vue';
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
@@ -43,7 +43,7 @@ import {
  MULTI_LEVEL_DEPT,
 } from '#/views/bpm/components/simple-process-design/consts';
 import { useFormFieldsPermission } from '#/views/bpm/components/simple-process-design/helpers';
-import ProcessExpressionSelectModal from '#/views/bpm/processExpression/components/process-expression-select-modal.vue';
+import { ProcessExpressionSelectModal } from '#/views/bpm/processExpression/components';

 defineOptions({ name: 'UserTask' });
 const props = defineProps({
--- 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' });
--- 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(() => {
                </SelectOption>
              </Select>
            </FormItem>
-            <!-- TODO @jason：后续要支持选择已经存好的表达式 -->
            <FormItem
              v-if="
                configForm.candidateStrategy === CandidateStrategy.EXPRESSION
@@ -851,7 +871,15 @@ onMounted(() => {
              label="流程表达式"
              name="expression"
            >
-              <Textarea v-model:value="configForm.expression" allow-clear />
+              <div class="flex gap-2">
+                <Textarea v-model:value="configForm.expression" :rows="2" />
+                <div class="flex flex-col gap-2">
+                  <Button type="primary" @click="openExpressionSelect">
+                    选择
+                  </Button>
+                  <Button @click="configForm.expression = ''">清空</Button>
+                </div>
+              </div>
            </FormItem>
            <!-- 多人审批/办理 方式 -->
            <FormItem :label="`多人${nodeTypeName}方式`" name="approveMethod">
@@ -1266,4 +1294,6 @@ onMounted(() => {
      </TabPane>
    </Tabs>
  </Drawer>
+
+  <ExpressionSelectModal @select="handleExpressionSelected" />
 </template>
--- 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<string, any>,
-  fields: Array<Record<string, any>> = [],
-  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 表单数据权限配置，用于发起人节点 、审批节点、抄送节点
 */
--- 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';
--- 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<string[]>([]); // 表单信息
-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"
--- a/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
+++ b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
@@ -464,7 +464,8 @@ function handleRenameSuccess() {
    >
      <div class="flex h-12 items-center">
        <!-- 头部：分类名 -->
-        <!-- TODO @jason：2）拖动后，直接请求排序，不用有个【保存】；排序模型分类，和排序分类里的模型，交互有点不同哈。@芋艿 好像 yudao-ui-admin-vue3 交互也是这样的，需要改吗? -->
+        <!-- 2）拖动后，直接请求排序，不用有个【保存】；排序模型分类，和排序分类里的模型，交互有点不同哈。
+            @芋艿 好像 yudao-ui-admin-vue3 交互也是这样的，需要改吗? -->
        <div class="flex items-center">
          <Tooltip v-if="isCategorySorting" title="拖动排序">
            <!-- drag-handle 标识可以拖动，不能删掉 -->
--- a/apps/web-antd/src/views/bpm/processExpression/components/index.ts
+++ b/apps/web-antd/src/views/bpm/processExpression/components/index.ts
@@ -0,0 +1 @@
+export { default as ProcessExpressionSelectModal } from './select-modal.vue';
--- a/apps/web-antd/src/views/bpm/processExpression/components/process-expression-select-modal.vue
+++ b/apps/web-antd/src/views/bpm/processExpression/components/process-expression-select-modal.vue
@@ -1,11 +1,14 @@
 <script lang="ts" setup>
-import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { VbenFormSchema } from '#/adapter/form';
+import type {
+  VxeGridPropTypes,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
 import type { BpmProcessExpressionApi } from '#/api/bpm/processExpression';

-import { ref } from 'vue';
-
 import { useVbenModal } from '@vben/common-ui';
-import { CommonStatusEnum } from '@vben/constants';
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';

 import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getProcessExpressionPage } from '#/api/bpm/processExpression';
@@ -16,35 +19,23 @@ const emit = defineEmits<{
  select: [expression: BpmProcessExpressionApi.ProcessExpression];
 }>();

-// TODO @jason：这里是不是要迁移下？
-// 查询参数
-const queryParams = ref({
-  status: CommonStatusEnum.ENABLE,
-});
-
 // 配置 VxeGrid
 const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
  gridOptions: {
-    columns: [
-      { field: 'name', title: '名字', minWidth: 160 },
-      { field: 'expression', title: '表达式', minWidth: 260 },
-      {
-        field: 'action',
-        title: '操作',
-        width: 120,
-        slots: { default: 'action' },
-      },
-    ],
+    columns: useGridColumns(),
    showOverflow: true,
    minHeight: 300,
    proxyConfig: {
      ajax: {
        // 查询表达式列表
-        query: async ({ page }) => {
+        query: async ({ page }, formValues) => {
          return await getProcessExpressionPage({
            pageNo: page.currentPage,
            pageSize: page.pageSize,
-            status: queryParams.value.status,
+            ...formValues,
          });
        },
      },
@@ -62,6 +53,7 @@ const [Grid] = useVbenVxeGrid({
 // 配置 Modal
 const [Modal, modalApi] = useVbenModal({
  showConfirmButton: false,
+  contentClass: 'bg-background-deep p-3',
  destroyOnClose: true,
 });

@@ -70,6 +62,53 @@ function handleSelect(row: BpmProcessExpressionApi.ProcessExpression) {
  emit('select', row);
  modalApi.close();
 }
+
+/** 列表的搜索表单 */
+function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      defaultValue: CommonStatusEnum.ENABLE,
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        disabled: true,
+      },
+    },
+  ];
+}
+function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { field: 'name', title: '名字', minWidth: 160 },
+    { field: 'expression', title: '表达式', minWidth: 260 },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'action',
+      title: '操作',
+      width: 120,
+      slots: { default: 'action' },
+    },
+  ];
+}
 </script>

 <template>
--- a/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
@@ -169,7 +169,8 @@ async function initProcessInfo(row: any, formVariables?: any) {
      path: row.formCustomCreatePath,
    });
    // 返回选择流程
-    // TODO @jason：这里为啥要有个 cancel 事件哈？目前看 vue3 + element-plus 貌似不需要呀；
+    // 这里为啥要有个 cancel 事件哈？目前看 vue3 + element-plus 貌似不需要呀；
+    // @芋艿 不加貌似会有点问题。
    emit('cancel');
  }
 }
--- 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';

--- a/apps/web-antd/src/views/bpm/processListener/components/data.ts
+++ b/apps/web-antd/src/views/bpm/processListener/components/data.ts
@@ -1,21 +1,32 @@
+import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';

-import { DICT_TYPE } from '@vben/constants';
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';

 /** 选择监听器弹窗的列表字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
  return [
-    { field: 'name', title: '名字', minWidth: 120 },
+    { field: 'name', title: '名字', minWidth: 160 },
    {
      field: 'type',
      title: '类型',
-      minWidth: 200,
+      minWidth: 120,
      cellRender: {
        name: 'CellDict',
        props: { type: DICT_TYPE.BPM_PROCESS_LISTENER_TYPE },
      },
    },
-    { field: 'event', title: '事件', minWidth: 200 },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    { field: 'event', title: '事件', minWidth: 120 },
    {
      field: 'valueType',
      title: '值类型',
@@ -34,3 +45,29 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    },
  ];
 }
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      defaultValue: CommonStatusEnum.ENABLE,
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        disabled: true,
+      },
+    },
+  ];
+}
--- a/apps/web-antd/src/views/bpm/processListener/components/index.ts
+++ b/apps/web-antd/src/views/bpm/processListener/components/index.ts
@@ -0,0 +1 @@
+export { default as ProcessListenerSelectModal } from './select-modal.vue';
--- a/apps/web-antd/src/views/bpm/processListener/components/process-listener-select-modal.vue
+++ b/apps/web-antd/src/views/bpm/processListener/components/process-listener-select-modal.vue
@@ -5,12 +5,11 @@ import type { BpmProcessListenerApi } from '#/api/bpm/processListener';
 import { ref } from 'vue';

 import { useVbenModal } from '@vben/common-ui';
-import { CommonStatusEnum } from '@vben/constants';

 import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getProcessListenerPage } from '#/api/bpm/processListener';

-import { useGridColumns } from './data';
+import { useGridColumns, useGridFormSchema } from './data';

 defineOptions({ name: 'ProcessListenerSelectModal' });

@@ -18,27 +17,25 @@ const emit = defineEmits<{
  select: [listener: BpmProcessListenerApi.ProcessListener];
 }>();

-// TODO @jason：这里是不是要迁移下？
-// 查询参数
-const queryParams = ref({
-  type: '',
-  status: CommonStatusEnum.ENABLE,
-});
+const listenerType = ref('');

 // 配置 VxeGrid
 const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
  gridOptions: {
    columns: useGridColumns(),
    showOverflow: true,
    minHeight: 300,
    proxyConfig: {
      ajax: {
-        query: async ({ page }) => {
+        query: async ({ page }, formValues) => {
          return await getProcessListenerPage({
            pageNo: page.currentPage,
            pageSize: page.pageSize,
-            type: queryParams.value.type,
-            status: queryParams.value.status,
+            type: listenerType.value,
+            ...formValues,
          });
        },
      },
@@ -56,14 +53,15 @@ const [Grid] = useVbenVxeGrid({
 // 配置 Modal
 const [Modal, modalApi] = useVbenModal({
  showConfirmButton: false,
+  contentClass: 'bg-background-deep p-3',
  onOpenChange: async (isOpen: boolean) => {
    if (!isOpen) {
-      queryParams.value.type = '';
+      listenerType.value = '';
      return;
    }
    const data = modalApi.getData<{ type: string }>();
    if (data?.type) {
-      queryParams.value.type = data.type;
+      listenerType.value = data.type;
    }
  },
  destroyOnClose: true,
				`@@ -0,0 +1 @@`
				`export { default as ProcessExpressionSelectModal } from './select-modal.vue';`
				`@@ -0,0 +1 @@`
				`export { default as ProcessListenerSelectModal } from './select-modal.vue';`