From db97d414ec435f41d4eaa3576bfd9e289653983c Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 17 Jan 2026 12:09:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20[bpm][antd]=20todo=20=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E7=9B=91=E5=90=AC=E5=99=A8=E3=80=81=E6=B5=81=E7=A8=8B=E8=A1=A8?=
 =?UTF-8?q?=E8=BE=BE=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../penal/listeners/ElementListeners.vue      |  2 +-
 .../penal/listeners/UserTaskListeners.vue     |  2 +-
 .../penal/task/task-components/UserTask.vue   |  2 +-
 .../bpm/processExpression/components/index.ts |  1 +
 ...sion-select-modal.vue => select-modal.vue} | 83 ++++++++++++++-----
 .../bpm/processListener/components/data.ts    | 45 +++++++++-
 .../bpm/processListener/components/index.ts   |  1 +
 ...ener-select-modal.vue => select-modal.vue} | 24 +++---
 8 files changed, 118 insertions(+), 42 deletions(-)
 create mode 100644 apps/web-antd/src/views/bpm/processExpression/components/index.ts
 rename apps/web-antd/src/views/bpm/processExpression/components/{process-expression-select-modal.vue => select-modal.vue} (51%)
 create mode 100644 apps/web-antd/src/views/bpm/processListener/components/index.ts
 rename apps/web-antd/src/views/bpm/processListener/components/{process-listener-select-modal.vue => select-modal.vue} (81%)

diff --git 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
index eb7a1d1ec..94cf1c8eb 100644
--- 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';
diff --git 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
index ba5747d08..709bd2884 100644
--- 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';
diff --git 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
index e908fb198..8f8dd3fb1 100644
--- 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({
diff --git a/apps/web-antd/src/views/bpm/processExpression/components/index.ts b/apps/web-antd/src/views/bpm/processExpression/components/index.ts
new file mode 100644
index 000000000..4047767df
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/processExpression/components/index.ts
@@ -0,0 +1 @@
+export { default as ProcessExpressionSelectModal } from './select-modal.vue';
diff --git a/apps/web-antd/src/views/bpm/processExpression/components/process-expression-select-modal.vue b/apps/web-antd/src/views/bpm/processExpression/components/select-modal.vue
similarity index 51%
rename from apps/web-antd/src/views/bpm/processExpression/components/process-expression-select-modal.vue
rename to apps/web-antd/src/views/bpm/processExpression/components/select-modal.vue
index 8b8b66c09..ebecfe5a5 100644
--- a/apps/web-antd/src/views/bpm/processExpression/components/process-expression-select-modal.vue
+++ b/apps/web-antd/src/views/bpm/processExpression/components/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>
diff --git a/apps/web-antd/src/views/bpm/processListener/components/data.ts b/apps/web-antd/src/views/bpm/processListener/components/data.ts
index 37725d839..eb9c62e93 100644
--- 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,
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/bpm/processListener/components/index.ts b/apps/web-antd/src/views/bpm/processListener/components/index.ts
new file mode 100644
index 000000000..04dbccf3d
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/processListener/components/index.ts
@@ -0,0 +1 @@
+export { default as ProcessListenerSelectModal } from './select-modal.vue';
diff --git a/apps/web-antd/src/views/bpm/processListener/components/process-listener-select-modal.vue b/apps/web-antd/src/views/bpm/processListener/components/select-modal.vue
similarity index 81%
rename from apps/web-antd/src/views/bpm/processListener/components/process-listener-select-modal.vue
rename to apps/web-antd/src/views/bpm/processListener/components/select-modal.vue
index c93b79ef5..0b85d24e2 100644
--- a/apps/web-antd/src/views/bpm/processListener/components/process-listener-select-modal.vue
+++ b/apps/web-antd/src/views/bpm/processListener/components/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,