feat: [bpm][antd] BPM 设计器选择监听器

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 ProcessListenerDialog from '#/views/bpm/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue';
+import ProcessListenerSelectModal from '#/views/bpm/processListener/components/process-listener-select-modal.vue';
 
 import { createListenerObject, updateElementExtensions } from '../../utils';
 import {
@@ -224,12 +224,12 @@ const removeListenerField = (_: any, index: number) => {
   });
 };
 
-const processListenerDialogRef = ref<any>();
 const openProcessListenerDialog = async () => {
-  processListenerDialogRef.value.open('task');
+  processListenerSelectModalApi.setData({ type: 'task' }).open();
 };
 const selectProcessListener = (listener: any) => {
   const listenerForm = initListenerForm2(listener);
+  listenerForm.id = listener.id;
   const listenerObject = createListenerObject(listenerForm, true, prefix);
   bpmnElementListeners.value.push(listenerObject);
   elementListenersList.value.push(listenerForm);
@@ -255,6 +255,12 @@ const [FieldModal, fieldModalApi] = useVbenModal({
   onConfirm: saveListenerField,
 });
 
+const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
+  useVbenModal({
+    connectedComponent: ProcessListenerSelectModal,
+    destroyOnClose: true,
+  });
+
 const [FieldsGrid, fieldsGridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: [
@@ -602,8 +608,5 @@ watch(
   </div>
 
   <!-- 选择弹窗 -->
-  <ProcessListenerDialog
-    ref="processListenerDialogRef"
-    @select="selectProcessListener"
-  />
+  <ProcessListenerSelectModalComp @select="selectProcessListener" />
 </template>

apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts

@@ -53,6 +53,7 @@ export function initListenerForm2(processListener: any) {
         class: processListener.value,
         event: processListener.event,
         fields: [],
+        id: undefined,
       };
     }
     case 'delegateExpression': {
@@ -61,6 +62,7 @@ export function initListenerForm2(processListener: any) {
         delegateExpression: processListener.value,
         event: processListener.event,
         fields: [],
+        id: undefined,
       };
     }
     case 'expression': {
@@ -69,6 +71,7 @@ export function initListenerForm2(processListener: any) {
         expression: processListener.value,
         event: processListener.event,
         fields: [],
+        id: undefined,
       };
     }
     // No default

apps/web-antd/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-antd/src/views/bpm/processListener/components/process-listener-select-modal.vue

@@ -0,0 +1,95 @@
+<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: 'link',
+              icon: 'lucide:pointer',
+              onClick: handleSelect.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Modal>
+</template>