From 9504fa3980cbe7737980531e3a78c1768092f7f1 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Thu, 18 Dec 2025 23:27:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20[bpm][ele]=20bpmn=20=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E5=99=A8=E6=B5=81=E7=A8=8B=E7=9B=91=E5=90=AC=E5=99=A8=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=BC=B9=E7=AA=97=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../penal/listeners/ElementListeners.vue      | 14 +--
 .../penal/listeners/UserTaskListeners.vue     | 14 +--
 .../penal/task/task-components/UserTask.vue   | 33 +++----
 .../bpm/processListener/components/data.ts    | 36 +++++++
 .../bpm/processListener/components/index.ts   |  1 +
 .../components/select-modal.vue               | 96 +++++++++++++++++++
 6 files changed, 164 insertions(+), 30 deletions(-)
 create mode 100644 apps/web-ele/src/views/bpm/processListener/components/data.ts
 create mode 100644 apps/web-ele/src/views/bpm/processListener/components/index.ts
 create mode 100644 apps/web-ele/src/views/bpm/processListener/components/select-modal.vue

diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
index bc5e98df0..e4cb2fe0b 100644
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
@@ -16,7 +16,7 @@ import {
 } from 'element-plus';
 
 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';
@@ -268,15 +268,15 @@ const [FieldModal, fieldModalApi] = useVbenModal({
 });
 
 // 配置选择监听器 Modal
-// const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
-//   useVbenModal({
-//     connectedComponent: ProcessListenerSelectModal,
-//     destroyOnClose: true,
-//   });
+const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
+  useVbenModal({
+    connectedComponent: ProcessListenerSelectModal,
+    destroyOnClose: true,
+  });
 
 // 打开监听器弹窗
 const openProcessListenerDialog = async () => {
-  // processListenerSelectModalApi.setData({ type: 'execution' }).open();
+  processListenerSelectModalApi.setData({ type: 'execution' }).open();
 };
 const selectProcessListener = (listener: any) => {
   const instances = bpmnInstances();
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
index c35b1926d..af7a1c6e4 100644
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
@@ -16,7 +16,7 @@ import {
 } from 'element-plus';
 
 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';
@@ -220,7 +220,7 @@ const removeListenerField = (_: any, index: number) => {
 };
 
 const openProcessListenerDialog = async () => {
-  // processListenerSelectModalApi.setData({ type: 'task' }).open();
+  processListenerSelectModalApi.setData({ type: 'task' }).open();
 };
 const selectProcessListener = (listener: any) => {
   const instances = bpmnInstances();
@@ -253,11 +253,11 @@ const [FieldModal, fieldModalApi] = useVbenModal({
   connectedComponent: ListenerFieldModal,
 });
 
-// const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
-//   useVbenModal({
-//     connectedComponent: ProcessListenerSelectModal,
-//     destroyOnClose: true,
-//   });
+const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
+  useVbenModal({
+    connectedComponent: ProcessListenerSelectModal,
+    destroyOnClose: true,
+  });
 
 const [FieldsGrid, fieldsGridApi] = useVbenVxeGrid({
   gridOptions: {
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
index 4d9436723..632505a83 100644
--- a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { BpmProcessExpressionApi } from '#/api/bpm/processExpression';
 import type { BpmUserGroupApi } from '#/api/bpm/userGroup';
 import type { SystemPostApi } from '#/api/system/post';
 import type { SystemRoleApi } from '#/api/system/role';
@@ -16,6 +17,7 @@ import {
   watch,
 } from 'vue';
 
+import { useVbenModal } from '@vben/common-ui';
 import { SelectOutlined } from '@vben/icons';
 import { handleTree } from '@vben/utils';
 
@@ -41,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({
@@ -290,21 +292,21 @@ const updateSkipExpression = () => {
 };
 
 // 打开监听器弹窗
-// const [ProcessExpressionSelectModalComp, ProcessExpressionSelectModalApi] =
-//   useVbenModal({
-//     connectedComponent: ProcessExpressionSelectModal,
-//     destroyOnClose: true,
-//   });
+const [ProcessExpressionSelectModalComp, ProcessExpressionSelectModalApi] =
+  useVbenModal({
+    connectedComponent: ProcessExpressionSelectModal,
+    destroyOnClose: true,
+  });
 const openProcessExpressionDialog = async () => {
-  // ProcessExpressionSelectModalApi.open();
+  ProcessExpressionSelectModalApi.open();
+};
+const selectProcessExpression = (
+  expression: BpmProcessExpressionApi.ProcessExpression,
+) => {
+  // @ts-ignore
+  userTaskForm.value.candidateParam = [expression.expression];
+  updateElementTask();
 };
-// const selectProcessExpression = (
-//   expression: BpmProcessExpressionApi.ProcessExpression,
-// ) => {
-//   // @ts-ignore
-//   userTaskForm.value.candidateParam = [expression.expression];
-//   updateElementTask();
-// };
 
 const handleFormUserChange = (e: any) => {
   if (e === 'PROCESS_START_USER_ID') {
@@ -551,9 +553,8 @@ onBeforeUnmount(() => {
           选择表达式
         </ElButton>
       </div>
-      <!-- 选择弹窗
+      <!-- 选择弹窗 -->
       <ProcessExpressionSelectModalComp @select="selectProcessExpression" />
-      -->
     </ElFormItem>
 
     <ElFormItem label="跳过表达式" prop="skipExpression">
diff --git a/apps/web-ele/src/views/bpm/processListener/components/data.ts b/apps/web-ele/src/views/bpm/processListener/components/data.ts
new file mode 100644
index 000000000..37725d839
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processListener/components/data.ts
@@ -0,0 +1,36 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 选择监听器弹窗的列表字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { field: 'name', title: '名字', minWidth: 120 },
+    {
+      field: 'type',
+      title: '类型',
+      minWidth: 200,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_PROCESS_LISTENER_TYPE },
+      },
+    },
+    { field: 'event', title: '事件', minWidth: 200 },
+    {
+      field: 'valueType',
+      title: '值类型',
+      minWidth: 200,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE },
+      },
+    },
+    { field: 'value', title: '值', minWidth: 150 },
+    {
+      title: '操作',
+      width: 100,
+      slots: { default: 'action' },
+      fixed: 'right',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/bpm/processListener/components/index.ts b/apps/web-ele/src/views/bpm/processListener/components/index.ts
new file mode 100644
index 000000000..04dbccf3d
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processListener/components/index.ts
@@ -0,0 +1 @@
+export { default as ProcessListenerSelectModal } from './select-modal.vue';
diff --git a/apps/web-ele/src/views/bpm/processListener/components/select-modal.vue b/apps/web-ele/src/views/bpm/processListener/components/select-modal.vue
new file mode 100644
index 000000000..ef1237eca
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processListener/components/select-modal.vue
@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+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';
+
+defineOptions({ name: 'ProcessListenerSelectModal' });
+
+const emit = defineEmits<{
+  select: [listener: BpmProcessListenerApi.ProcessListener];
+}>();
+
+// 查询参数
+const queryParams = ref({
+  type: '',
+  status: CommonStatusEnum.ENABLE,
+});
+
+// 配置 VxeGrid
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    showOverflow: true,
+    minHeight: 300,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getProcessListenerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: queryParams.value.type,
+            status: queryParams.value.status,
+          });
+        },
+      },
+    } as VxeGridPropTypes.ProxyConfig,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+// 配置 Modal
+const [Modal, modalApi] = useVbenModal({
+  showConfirmButton: false,
+  onOpenChange: async (isOpen: boolean) => {
+    if (!isOpen) {
+      queryParams.value.type = '';
+      return;
+    }
+    const data = modalApi.getData<{ type: string }>();
+    if (data?.type) {
+      queryParams.value.type = data.type;
+    }
+  },
+  destroyOnClose: true,
+});
+
+// 选择监听器
+function handleSelect(row: BpmProcessListenerApi.ProcessListener) {
+  emit('select', row);
+  modalApi.close();
+}
+</script>
+
+<template>
+  <Modal class="w-4/5" title="请选择监听器">
+    <Grid>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '选择',
+              type: 'primary',
+              link: true,
+              icon: 'lucide:pointer',
+              onClick: handleSelect.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Modal>
+</template>