feat: [bpm][antd] bpm 设计器执行监听器优化

2025-12-30 02:22:25 +00:00 · 2025-12-05 22:52:42 +08:00
parent d3cfc67bd7
commit 604517b2ab
4 changed files with 336 additions and 456 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
@@ -1,25 +1,25 @@
 <script lang="ts" setup>
 import { inject, nextTick, ref, watch } from 'vue';

+import { confirm, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';

 import {
  Button,
  Divider,
-  Drawer,
  Form,
  FormItem,
  Input,
-  Modal,
  Select,
  SelectOption,
-  Table,
-  TableColumn,
 } from 'ant-design-vue';

+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import ProcessListenerSelectModal from '#/views/bpm/processListener/components/process-listener-select-modal.vue';
+
 import { createListenerObject, updateElementExtensions } from '../../utils';
-import ProcessListenerDialog from './ProcessListenerDialog.vue';
+import ListenerFieldModal from './ListenerFieldModal.vue';
 import {
  fieldType,
  initListenerForm,
@@ -41,13 +41,9 @@ const props = defineProps({
  },
 });
 const prefix = inject('prefix');
-const width = inject('width');
 const elementListenersList = ref<any[]>([]); // 监听器列表
 const listenerForm = ref<any>({}); // 监听器详情表单
-const listenerFormModelVisible = ref(false); // 监听器 编辑 侧边栏显示状态
 const fieldsListOfListener = ref<any[]>([]);
-const listenerFieldForm = ref<any>({}); // 监听器 注入字段 详情表单
-const listenerFieldFormModelVisible = ref(false); // 监听器 注入字段表单弹窗 显示状态
 const editingListenerIndex = ref(-1); // 监听器所在下标，-1 为新增
 const editingListenerFieldIndex = ref(-1); // 字段所在下标，-1 为新增
 const listenerTypeObject = ref(listenerType);
@@ -56,7 +52,6 @@ const bpmnElement = ref();
 const otherExtensionList = ref();
 const bpmnElementListeners = ref();
 const listenerFormRef = ref();
-const listenerFieldFormRef = ref();
 const bpmnInstances = () => (window as any)?.bpmnInstances;

 const resetListenersList = () => {
@@ -75,13 +70,12 @@ const resetListenersList = () => {
 };
 // 打开 监听器详情 侧边栏
 const openListenerForm = (listener: any, index: number) => {
-  // debugger
  if (listener) {
    listenerForm.value = initListenerForm(listener);
    editingListenerIndex.value = index;
  } else {
    listenerForm.value = {};
-    editingListenerIndex.value = -1; // 标记为新增
+    editingListenerIndex.value = -1;
  }
  if (listener && listener.fields) {
    fieldsListOfListener.value = listener.fields.map((field: any) => ({
@@ -92,8 +86,7 @@ const openListenerForm = (listener: any, index: number) => {
    fieldsListOfListener.value = [];
    listenerForm.value.fields = [];
  }
-  // 打开侧边栏并清楚验证状态
-  listenerFormModelVisible.value = true;
+  listenerDrawerApi.open();
  nextTick(() => {
    if (listenerFormRef.value) {
      listenerFormRef.value.clearValidate();
@@ -103,82 +96,51 @@ const openListenerForm = (listener: any, index: number) => {

 // 打开监听器字段编辑弹窗
 const openListenerFieldForm = (field: any, index: number) => {
-  listenerFieldForm.value = field ? cloneDeep(field) : {};
+  const data = field ? cloneDeep(field) : {};
  editingListenerFieldIndex.value = field ? index : -1;
-  listenerFieldFormModelVisible.value = true;
-  nextTick(() => {
-    if (listenerFieldFormRef.value) {
-      listenerFieldFormRef.value.clearValidate();
-    }
-  });
+  fieldModalApi.setData(data).open();
 };
 // 保存监听器注入字段
-const saveListenerFiled = async () => {
-  // debugger
-  const validateStatus = await listenerFieldFormRef.value.validate();
-  if (!validateStatus) return; // 验证不通过直接返回
+const saveListenerFiled = async (data: any) => {
  if (editingListenerFieldIndex.value === -1) {
-    fieldsListOfListener.value.push(listenerFieldForm.value);
-    listenerForm.value.fields.push(listenerFieldForm.value);
+    fieldsListOfListener.value.push(data);
+    listenerForm.value.fields.push(data);
  } else {
-    fieldsListOfListener.value.splice(
-      editingListenerFieldIndex.value,
-      1,
-      listenerFieldForm.value,
-    );
-    listenerForm.value.fields.splice(
-      editingListenerFieldIndex.value,
-      1,
-      listenerFieldForm.value,
-    );
+    fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, data);
+    listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, data);
  }
-  listenerFieldFormModelVisible.value = false;
-  nextTick(() => {
-    listenerFieldForm.value = {};
-  });
 };
 // 移除监听器字段
 const removeListenerField = (index: number) => {
-  // debugger
-  Modal.confirm({
-    title: '确认移除该字段吗？',
-    content: '此操作不可撤销',
-    okText: '确 认',
-    cancelText: '取 消',
-    onOk() {
-      fieldsListOfListener.value.splice(index, 1);
-      listenerForm.value.fields.splice(index, 1);
-    },
-    onCancel() {
-      console.warn('操作取消');
-    },
+  confirm({
+    title: '提示',
+    content: '确认移除该字段吗？',
+  }).then(() => {
+    fieldsListOfListener.value.splice(index, 1);
+    listenerForm.value.fields.splice(index, 1);
  });
 };
 // 移除监听器
 const removeListener = (index: number) => {
-  Modal.confirm({
-    title: '确认移除该监听器吗？',
-    content: '此操作不可撤销',
-    okText: '确 认',
-    cancelText: '取 消',
-    onOk() {
-      bpmnElementListeners.value.splice(index, 1);
-      elementListenersList.value.splice(index, 1);
-      updateElementExtensions(bpmnElement.value, [
-        ...otherExtensionList.value,
-        ...bpmnElementListeners.value,
-      ]);
-    },
-    onCancel() {
-      console.warn('操作取消');
-    },
+  confirm({
+    title: '提示',
+    content: '确认移除该监听器吗？',
+  }).then(() => {
+    bpmnElementListeners.value.splice(index, 1);
+    elementListenersList.value.splice(index, 1);
+    updateElementExtensions(bpmnElement.value, [
+      ...otherExtensionList.value,
+      ...bpmnElementListeners.value,
+    ]);
  });
 };
 // 保存监听器配置
 const saveListenerConfig = async () => {
-  // debugger
-  const validateStatus = await listenerFormRef.value.validate();
-  if (!validateStatus) return; // 验证不通过直接返回
+  try {
+    await listenerFormRef.value.validate();
+  } catch {
+    return;
+  }
  const listenerObject = createListenerObject(
    listenerForm.value,
    false,
@@ -199,7 +161,6 @@ const saveListenerConfig = async () => {
      listenerForm.value,
    );
  }
-  // 保存其他配置
  otherExtensionList.value =
    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
      (ex: any) => ex.$type !== `${prefix}:ExecutionListener`,
@@ -208,15 +169,101 @@ const saveListenerConfig = async () => {
    ...otherExtensionList.value,
    ...bpmnElementListeners.value,
  ]);
-  // 4. 隐藏侧边栏
-  listenerFormModelVisible.value = false;
+  listenerDrawerApi.close();
  listenerForm.value = {};
 };

+// 配置主列表 Grid
+const [ListenerGrid, listenerGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'event', title: '事件类型', minWidth: 100 },
+      {
+        field: 'listenerType',
+        title: '监听器类型',
+        minWidth: 100,
+        formatter: ({ cellValue }: { cellValue: string }) =>
+          (listenerTypeObject.value as Record<string, any>)[cellValue],
+      },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    height: 'auto',
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+// 配置字段列表 Grid
+const [FieldsGrid, fieldsGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'name', title: '字段名称', minWidth: 100 },
+      {
+        field: 'fieldType',
+        title: '字段类型',
+        minWidth: 80,
+        formatter: ({ cellValue }: { cellValue: string }) =>
+          (fieldTypeObject.value as Record<string, any>)[cellValue],
+      },
+      {
+        title: '字段值/表达式',
+        minWidth: 100,
+        formatter: ({ row }: { row: any }) => row.string || row.expression,
+      },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    maxHeight: 200,
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+// 配置 Drawer
+const [ListenerDrawer, listenerDrawerApi] = useVbenDrawer({
+  title: '执行监听器',
+  destroyOnClose: true,
+  onConfirm: saveListenerConfig,
+});
+
+// 配置字段 Modal
+const [FieldModal, fieldModalApi] = useVbenModal({
+  connectedComponent: ListenerFieldModal,
+});
+
+// 配置选择监听器 Modal
+const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
+  useVbenModal({
+    connectedComponent: ProcessListenerSelectModal,
+    destroyOnClose: true,
+  });
+
 // 打开监听器弹窗
-const processListenerDialogRef = ref();
 const openProcessListenerDialog = async () => {
-  processListenerDialogRef.value.open('execution');
+  processListenerSelectModalApi.setData({ type: 'execution' }).open();
 };
 const selectProcessListener = (listener: any) => {
  const listenerForm = initListenerForm2(listener);
@@ -235,6 +282,22 @@ const selectProcessListener = (listener: any) => {
  ]);
 };

+watch(
+  elementListenersList,
+  (val) => {
+    listenerGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  fieldsListOfListener,
+  (val) => {
+    fieldsGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
 watch(
  () => props.id,
  (val: string) => {
@@ -248,56 +311,44 @@ watch(
 );
 </script>
 <template>
-  <div class="panel-tab__content">
-    <Table
-      :data-source="elementListenersList"
-      size="small"
-      bordered
-      :pagination="false"
-    >
-      <TableColumn title="序号" width="50px">
-        <template #default="{ index }">
-          {{ index + 1 }}
-        </template>
-      </TableColumn>
-      <TableColumn title="事件类型" width="100px" data-index="event" />
-      <TableColumn
-        title="监听器类型"
-        width="100px"
-        :custom-render="
-          ({ record }: any) =>
-            listenerTypeObject[record.listenerType as keyof typeof listenerType]
-        "
-      />
-      <TableColumn title="操作" width="100px">
-        <template #default="{ record, index }">
-          <Button
-            size="small"
-            type="link"
-            @click="openListenerForm(record, index)"
-          >
-            编辑
-          </Button>
-          <Divider type="vertical" />
-          <Button
-            size="small"
-            type="link"
-            danger
-            @click="removeListener(index)"
-          >
-            移除
-          </Button>
-        </template>
-      </TableColumn>
-    </Table>
-    <div class="element-drawer__button">
-      <Button type="primary" size="small" @click="openListenerForm(null, -1)">
+  <div class="-mx-2">
+    <ListenerGrid :data="elementListenersList">
+      <template #action="{ row, rowIndex }">
+        <Button
+          size="small"
+          type="link"
+          @click="openListenerForm(row, rowIndex)"
+        >
+          编辑
+        </Button>
+        <Divider type="vertical" />
+        <Button
+          size="small"
+          type="link"
+          danger
+          @click="removeListener(rowIndex)"
+        >
+          移除
+        </Button>
+      </template>
+    </ListenerGrid>
+    <div class="mt-1 flex w-full items-center justify-center gap-2 px-2">
+      <Button
+        class="flex flex-1 items-center justify-center"
+        type="primary"
+        size="small"
+        @click="openListenerForm(null, -1)"
+      >
        <template #icon>
          <IconifyIcon icon="ep:plus" />
        </template>
        添加监听器
      </Button>
-      <Button size="small" @click="openProcessListenerDialog">
+      <Button
+        class="flex flex-1 items-center justify-center"
+        size="small"
+        @click="openProcessListenerDialog"
+      >
        <template #icon>
          <IconifyIcon icon="ep:select" />
        </template>
@@ -306,13 +357,13 @@ watch(
    </div>

    <!-- 监听器 编辑/创建 部分 -->
-    <Drawer
-      v-model:open="listenerFormModelVisible"
-      title="执行监听器"
-      :width="width as any"
-      :destroy-on-close="true"
-    >
-      <Form :model="listenerForm" ref="listenerFormRef">
+    <ListenerDrawer>
+      <Form
+        :model="listenerForm"
+        ref="listenerFormRef"
+        :label-col="{ span: 5 }"
+        :wrapper-col="{ span: 19 }"
+      >
        <FormItem
          label="事件类型"
          name="event"
@@ -466,8 +517,9 @@ watch(
          注入字段
        </span>
        <Button
-          type="primary"
-          title="添加字段"
+          class="flex items-center"
+          size="small"
+          type="link"
          @click="openListenerFieldForm(null, -1)"
        >
          <template #icon>
@@ -476,143 +528,32 @@ watch(
          添加字段
        </Button>
      </div>
-      <Table :data-source="fieldsListOfListener" size="small" bordered>
-        <TableColumn title="序号" width="50px">
-          <template #default="{ index }">
-            {{ index + 1 }}
-          </template>
-        </TableColumn>
-        <TableColumn title="字段名称" width="100px" data-index="name" />
-        <TableColumn
-          title="字段类型"
-          width="80px"
-          :custom-render="
-            ({ record }: any) =>
-              fieldTypeObject[record.fieldType as keyof typeof fieldType]
-          "
-        />
-        <TableColumn
-          title="字段值/表达式"
-          width="120px"
-          :custom-render="
-            ({ record }: any) => record.string || record.expression
-          "
-        />
-        <TableColumn title="操作" width="80px" fixed="right">
-          <template #default="{ record, index }">
-            <Button
-              size="small"
-              type="link"
-              @click="openListenerFieldForm(record, index)"
-            >
-              编辑
-            </Button>
-            <Divider type="vertical" />
-            <Button
-              size="small"
-              type="link"
-              danger
-              @click="removeListenerField(index)"
-            >
-              移除
-            </Button>
-          </template>
-        </TableColumn>
-      </Table>
-
-      <div class="element-drawer__button">
-        <Button @click="listenerFormModelVisible = false">取 消</Button>
-        <Button type="primary" @click="saveListenerConfig">保 存</Button>
-      </div>
-    </Drawer>
+      <FieldsGrid :data="fieldsListOfListener">
+        <template #action="{ row, rowIndex }">
+          <Button
+            size="small"
+            type="link"
+            @click="openListenerFieldForm(row, rowIndex)"
+          >
+            编辑
+          </Button>
+          <Divider type="vertical" />
+          <Button
+            size="small"
+            type="link"
+            danger
+            @click="removeListenerField(rowIndex)"
+          >
+            移除
+          </Button>
+        </template>
+      </FieldsGrid>
+    </ListenerDrawer>

    <!-- 注入字段 编辑/创建 部分 -->
-    <Modal
-      title="字段配置"
-      v-model:open="listenerFieldFormModelVisible"
-      width="600px"
-      :destroy-on-close="true"
-    >
-      <Form :model="listenerFieldForm" ref="listenerFieldFormRef">
-        <FormItem
-          label="字段名称："
-          name="name"
-          :rules="[
-            {
-              required: true,
-              message: '请填写字段名称',
-              trigger: ['blur', 'change'],
-            },
-          ]"
-        >
-          <Input v-model:value="listenerFieldForm.name" allow-clear />
-        </FormItem>
-        <FormItem
-          label="字段类型："
-          name="fieldType"
-          :rules="[
-            {
-              required: true,
-              message: '请选择字段类型',
-              trigger: ['blur', 'change'],
-            },
-          ]"
-        >
-          <Select v-model:value="listenerFieldForm.fieldType">
-            <SelectOption
-              v-for="i in Object.keys(fieldTypeObject)"
-              :key="i"
-              :value="i"
-            >
-              {{ fieldTypeObject[i as keyof typeof fieldType] }}
-            </SelectOption>
-          </Select>
-        </FormItem>
-        <FormItem
-          v-if="listenerFieldForm.fieldType === 'string'"
-          label="字段值："
-          name="string"
-          key="field-string"
-          :rules="[
-            {
-              required: true,
-              message: '请填写字段值',
-              trigger: ['blur', 'change'],
-            },
-          ]"
-        >
-          <Input v-model:value="listenerFieldForm.string" allow-clear />
-        </FormItem>
-        <FormItem
-          v-if="listenerFieldForm.fieldType === 'expression'"
-          label="表达式："
-          name="expression"
-          key="field-expression"
-          :rules="[
-            {
-              required: true,
-              message: '请填写表达式',
-              trigger: ['blur', 'change'],
-            },
-          ]"
-        >
-          <Input v-model:value="listenerFieldForm.expression" allow-clear />
-        </FormItem>
-      </Form>
-      <template #footer>
-        <Button size="small" @click="listenerFieldFormModelVisible = false">
-          取 消
-        </Button>
-        <Button size="small" type="primary" @click="saveListenerFiled">
-          确 定
-        </Button>
-      </template>
-    </Modal>
+    <FieldModal @confirm="saveListenerFiled" />
  </div>

  <!-- 选择弹窗 -->
-  <ProcessListenerDialog
-    ref="processListenerDialogRef"
-    @select="selectProcessListener"
-  />
+  <ProcessListenerSelectModalComp @select="selectProcessListener" />
 </template>
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Form, FormItem, Input, Select, SelectOption } from 'ant-design-vue';
+
+import { fieldType } from './utilSelf';
+
+defineOptions({ name: 'ListenerFieldModal' });
+
+const emit = defineEmits<{
+  confirm: [data: any];
+}>();
+
+const fieldTypeObject = ref(fieldType);
+const form = ref<any>({});
+const formRef = ref();
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = modalApi.getData<any>();
+      form.value = data || {};
+      // clear validate
+      setTimeout(() => {
+        formRef.value?.clearValidate();
+      }, 50);
+    }
+  },
+  onConfirm: async () => {
+    try {
+      await formRef.value?.validate();
+      emit('confirm', { ...form.value });
+      modalApi.close();
+    } catch {
+      // validate failed
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="字段配置" class="w-3/5">
+    <Form
+      ref="formRef"
+      :model="form"
+      :label-col="{ span: 4 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <FormItem
+        label="字段名称："
+        name="name"
+        :rules="[
+          {
+            required: true,
+            message: '请填写字段名称',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <Input v-model:value="form.name" allow-clear />
+      </FormItem>
+      <FormItem
+        label="字段类型："
+        name="fieldType"
+        :rules="[
+          {
+            required: true,
+            message: '请选择字段类型',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <Select v-model:value="form.fieldType">
+          <SelectOption
+            v-for="i in Object.keys(fieldTypeObject)"
+            :key="i"
+            :value="i"
+          >
+            {{ fieldTypeObject[i as keyof typeof fieldType] }}
+          </SelectOption>
+        </Select>
+      </FormItem>
+      <FormItem
+        v-if="form.fieldType === 'string'"
+        label="字段值："
+        name="string"
+        key="field-string"
+        :rules="[
+          {
+            required: true,
+            message: '请填写字段值',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <Input v-model:value="form.string" allow-clear />
+      </FormItem>
+      <FormItem
+        v-if="form.fieldType === 'expression'"
+        label="表达式："
+        name="expression"
+        key="field-expression"
+        :rules="[
+          {
+            required: true,
+            message: '请填写表达式',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <Input v-model:value="form.expression" allow-clear />
+      </FormItem>
+    </Form>
+  </Modal>
+</template>
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue
@@ -1,110 +0,0 @@
-<!-- 执行器选择 -->
-<script setup lang="ts">
-import type { BpmProcessListenerApi } from '#/api/bpm/processListener';
-
-import { reactive, ref } from 'vue';
-
-import { ContentWrap } from '@vben/common-ui';
-import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
-
-import { Button, Modal, Pagination, Table } from 'ant-design-vue';
-
-import { getProcessListenerPage } from '#/api/bpm/processListener';
-import { DictTag } from '#/components/dict-tag';
-
-/** BPM 流程 表单 */
-defineOptions({ name: 'ProcessListenerDialog' });
-
-/** 提交表单 */
-const emit = defineEmits(['success', 'select']);
-const dialogVisible = ref(false); // 弹窗的是否展示
-const loading = ref(true); // 列表的加载中
-const list = ref<BpmProcessListenerApi.ProcessListener[]>([]); // 列表的数据
-const total = ref(0); // 列表的总页数
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  type: '',
-  status: CommonStatusEnum.ENABLE,
-});
-
-/** 打开弹窗 */
-const open = async (type: string) => {
-  queryParams.pageNo = 1;
-  queryParams.type = type;
-  await getList();
-  dialogVisible.value = true;
-};
-defineExpose({ open }); // 提供 open 方法，用于打开弹窗
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true;
-  try {
-    const data = await getProcessListenerPage(queryParams);
-    list.value = data.list;
-    total.value = data.total;
-  } finally {
-    loading.value = false;
-  }
-};
-
-// 定义 success 事件，用于操作成功后的回调
-const select = async (row: BpmProcessListenerApi.ProcessListener) => {
-  dialogVisible.value = false;
-  // 发送操作成功的事件
-  emit('select', row);
-};
-</script>
-<template>
-  <Modal
-    title="请选择监听器"
-    v-model:open="dialogVisible"
-    width="1024px"
-    :footer="null"
-  >
-    <ContentWrap>
-      <Table
-        :loading="loading"
-        :data-source="list"
-        :pagination="false"
-        :scroll="{ x: 'max-content' }"
-      >
-        <Table.Column title="名字" align="center" data-index="name" />
-        <Table.Column title="类型" align="center" data-index="type">
-          <template #default="{ record }">
-            <DictTag
-              :type="DICT_TYPE.BPM_PROCESS_LISTENER_TYPE"
-              :value="record.type"
-            />
-          </template>
-        </Table.Column>
-        <Table.Column title="事件" align="center" data-index="event" />
-        <Table.Column title="值类型" align="center" data-index="valueType">
-          <template #default="{ record }">
-            <DictTag
-              :type="DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE"
-              :value="record.valueType"
-            />
-          </template>
-        </Table.Column>
-        <Table.Column title="值" align="center" data-index="value" />
-        <Table.Column title="操作" align="center" fixed="right">
-          <template #default="{ record }">
-            <Button type="primary" @click="select(record)"> 选择 </Button>
-          </template>
-        </Table.Column>
-      </Table>
-      <!-- 分页 -->
-      <div class="mt-4 flex justify-end">
-        <Pagination
-          :total="total"
-          v-model:current="queryParams.pageNo"
-          v-model:page-size="queryParams.pageSize"
-          show-size-changer
-          @change="getList"
-        />
-      </div>
-    </ContentWrap>
-  </Modal>
-</template>
--- 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
@@ -19,6 +19,7 @@ import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import ProcessListenerSelectModal from '#/views/bpm/processListener/components/process-listener-select-modal.vue';

 import { createListenerObject, updateElementExtensions } from '../../utils';
+import ListenerFieldModal from './ListenerFieldModal.vue';
 import {
  eventType,
  fieldType,
@@ -47,12 +48,10 @@ const fieldTypeObject = ref(fieldType);
 const fieldsListOfListener = ref<any[]>([]);
 const editingListenerIndex = ref(-1);
 const editingListenerFieldIndex = ref<any>(-1);
-const listenerFieldForm = ref<any>({});
 const bpmnElement = ref<any>();
 const bpmnElementListeners = ref<any[]>([]);
 const otherExtensionList = ref<any[]>([]);
 const listenerFormRef = ref<any>({});
-const listenerFieldFormRef = ref<any>({});

 const bpmnInstances = () => (window as any)?.bpmnInstances;

@@ -143,12 +142,9 @@ async function saveListenerConfig() {
 }

 const openListenerFieldForm = (field: any, index?: number) => {
-  listenerFieldForm.value = field ? cloneDeep(field) : {};
+  const data = field ? cloneDeep(field) : {};
  editingListenerFieldIndex.value = field ? index : -1;
-  fieldModalApi.open();
-  nextTick(() => {
-    if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate();
-  });
+  fieldModalApi.setData(data).open();
 };

 const [ListenerGrid, listenerGridApi] = useVbenVxeGrid({
@@ -189,28 +185,13 @@ const [ListenerGrid, listenerGridApi] = useVbenVxeGrid({
  },
 });

-async function saveListenerField() {
-  try {
-    await listenerFieldFormRef.value.validate();
-    if (editingListenerFieldIndex.value === -1) {
-      fieldsListOfListener.value.push(cloneDeep(listenerFieldForm.value));
-      listenerForm.value.fields.push(cloneDeep(listenerFieldForm.value));
-    } else {
-      fieldsListOfListener.value.splice(
-        editingListenerFieldIndex.value,
-        1,
-        cloneDeep(listenerFieldForm.value),
-      );
-      listenerForm.value.fields.splice(
-        editingListenerFieldIndex.value,
-        1,
-        cloneDeep(listenerFieldForm.value),
-      );
-    }
-    fieldModalApi.close();
-    listenerFieldForm.value = {};
-  } catch (error) {
-    console.error(error);
+async function saveListenerField(data: any) {
+  if (editingListenerFieldIndex.value === -1) {
+    fieldsListOfListener.value.push(data);
+    listenerForm.value.fields.push(data);
+  } else {
+    fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, data);
+    listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, data);
  }
 }

@@ -251,8 +232,7 @@ const [ListenerDrawer, listenerDrawerApi] = useVbenDrawer({
 });

 const [FieldModal, fieldModalApi] = useVbenModal({
-  title: '字段配置',
-  onConfirm: saveListenerField,
+  connectedComponent: ListenerFieldModal,
 });

 const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
@@ -556,55 +536,7 @@ watch(
    </ListenerDrawer>

    <!-- 注入字段 编辑/创建 部分 -->
-    <FieldModal class="w-3/5">
-      <Form
-        :label-col="{ span: 4 }"
-        :wrapper-col="{ span: 18 }"
-        :model="listenerFieldForm"
-        ref="listenerFieldFormRef"
-      >
-        <FormItem
-          label="字段名称："
-          name="name"
-          :rules="[{ required: true, message: '请输入字段名称' }]"
-        >
-          <Input v-model:value="listenerFieldForm.name" allow-clear />
-        </FormItem>
-        <FormItem
-          label="字段类型："
-          name="fieldType"
-          :rules="[{ required: true, message: '请选择字段类型' }]"
-        >
-          <Select v-model:value="listenerFieldForm.fieldType">
-            <SelectOption
-              v-for="i in Object.keys(fieldTypeObject)"
-              :key="i"
-              :value="i"
-            >
-              {{ fieldTypeObject[i as keyof typeof fieldType] }}
-            </SelectOption>
-          </Select>
-        </FormItem>
-        <FormItem
-          v-if="listenerFieldForm.fieldType === 'string'"
-          label="字段值："
-          name="string"
-          key="field-string"
-          :rules="[{ required: true, message: '请输入字段值' }]"
-        >
-          <Input v-model:value="listenerFieldForm.string" allow-clear />
-        </FormItem>
-        <FormItem
-          v-if="listenerFieldForm.fieldType === 'expression'"
-          label="表达式："
-          name="expression"
-          key="field-expression"
-          :rules="[{ required: true, message: '请输入表达式' }]"
-        >
-          <Input v-model:value="listenerFieldForm.expression" allow-clear />
-        </FormItem>
-      </Form>
-    </FieldModal>
+    <FieldModal @confirm="saveListenerField" />
  </div>

  <!-- 选择弹窗 -->