feat: [bpm][ele] bpmn 设计器流程监听器选择弹窗组件

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] =
+const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
-//   useVbenModal({
+  useVbenModal({
-//     connectedComponent: ProcessListenerSelectModal,
+    connectedComponent: ProcessListenerSelectModal,
-//     destroyOnClose: true,
+    destroyOnClose: true,
-//   });
+  });
 
 // 打开监听器弹窗
 const openProcessListenerDialog = async () => {
-  // processListenerSelectModalApi.setData({ type: 'execution' }).open();
+  processListenerSelectModalApi.setData({ type: 'execution' }).open();
 };
 const selectProcessListener = (listener: any) => {
   const instances = bpmnInstances();

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] =
+const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
-//   useVbenModal({
+  useVbenModal({
-//     connectedComponent: ProcessListenerSelectModal,
+    connectedComponent: ProcessListenerSelectModal,
-//     destroyOnClose: true,
+    destroyOnClose: true,
-//   });
+  });
 
 const [FieldsGrid, fieldsGridApi] = useVbenVxeGrid({
   gridOptions: {

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] =
+const [ProcessExpressionSelectModalComp, ProcessExpressionSelectModalApi] =
-//   useVbenModal({
+  useVbenModal({
-//     connectedComponent: ProcessExpressionSelectModal,
+    connectedComponent: ProcessExpressionSelectModal,
-//     destroyOnClose: true,
+    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">

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',
+    },
+  ];
+}

apps/web-ele/src/views/bpm/processListener/components/index.ts

@@ -0,0 +1 @@
+export { default as ProcessListenerSelectModal } from './select-modal.vue';

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>