feat: [bpm][antd] bpm 设计器接收任务优化

apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue

@@ -1,44 +1,23 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 
 import { confirm, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
-import {
+import { Button, Divider, message } from 'ant-design-vue';
-  Button,
-  Divider,
-  Form,
-  FormItem,
-  Input,
-  message,
-} from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 
+import SignalMessageModal from './SignalMessageModal.vue';
+
 defineOptions({ name: 'SignalAndMassage' });
 const signalList = ref<any[]>([]);
 const messageList = ref<any[]>([]);
-const modelType = ref('');
+const modelType = ref<'message' | 'signal'>('message');
-const modelObjectForm = ref<any>({});
-const formRef = ref();
 const rootElements = ref();
 const messageIdMap = ref();
 const signalIdMap = ref();
 const editingIndex = ref(-1); // 正在编辑的索引，-1 表示新建
-const modelConfig = computed(() => {
-  const isEdit = editingIndex.value !== -1;
-  return modelType.value === 'message'
-    ? {
-        title: isEdit ? '编辑消息' : '创建消息',
-        idLabel: '消息ID',
-        nameLabel: '消息名称',
-      }
-    : {
-        title: isEdit ? '编辑信号' : '创建信号',
-        idLabel: '信号ID',
-        nameLabel: '信号名称',
-      };
-});
 const bpmnInstances = () => (window as any)?.bpmnInstances;
 
 // 生成规范化的ID
@@ -67,82 +46,78 @@ const initDataList = () => {
   });
 };
 
-const openModel = (type: any) => {
+const openModel = (type: 'message' | 'signal') => {
   modelType.value = type;
   editingIndex.value = -1;
-  modelObjectForm.value = {
+  modalApi
-    id: generateStandardId(type),
+    .setData({
-    name: '',
+      id: generateStandardId(type),
-  };
+      isEdit: false,
-  modelModalApi.open();
+      name: '',
+      type,
+    })
+    .open();
 };
 
-const openEditModel = (type: any, row: any, index: number) => {
+const openEditModel = (type: 'message' | 'signal', row: any, index: number) => {
   modelType.value = type;
   editingIndex.value = index;
-  modelObjectForm.value = { ...row };
+  modalApi
-  modelModalApi.open();
+    .setData({
+      id: row.id,
+      isEdit: true,
+      name: row.name,
+      type,
+    })
+    .open();
 };
 
-const addNewObject = async () => {
+const handleConfirm = (formData: { id: string; name: string }) => {
-  try {
-    await formRef.value?.validate();
-  } catch {
-    // 校验未通过，直接返回
-    return;
-  }
-
   if (modelType.value === 'message') {
-    // 编辑模式
     if (editingIndex.value === -1) {
       // 新建模式
-      if (messageIdMap.value[modelObjectForm.value.id]) {
+      if (messageIdMap.value[formData.id]) {
         message.error('该消息已存在，请修改id后重新保存');
         return;
       }
       const messageRef = bpmnInstances().moddle.create(
         'bpmn:Message',
-        modelObjectForm.value,
+        formData,
       );
       rootElements.value.push(messageRef);
     } else {
+      // 编辑模式
       const targetMessage = messageList.value[editingIndex.value];
-      // 查找 rootElements 中的原始对象
       const rootMessage = rootElements.value.find(
         (el: any) => el.$type === 'bpmn:Message' && el.id === targetMessage.id,
       );
       if (rootMessage) {
-        rootMessage.id = modelObjectForm.value.id;
+        rootMessage.id = formData.id;
-        rootMessage.name = modelObjectForm.value.name;
+        rootMessage.name = formData.name;
       }
     }
   } else {
-    // 编辑模式
     if (editingIndex.value === -1) {
       // 新建模式
-      if (signalIdMap.value[modelObjectForm.value.id]) {
+      if (signalIdMap.value[formData.id]) {
         message.error('该信号已存在，请修改id后重新保存');
         return;
       }
-      const signalRef = bpmnInstances().moddle.create(
+      const signalRef = bpmnInstances().moddle.create('bpmn:Signal', formData);
-        'bpmn:Signal',
-        modelObjectForm.value,
-      );
       rootElements.value.push(signalRef);
     } else {
+      // 编辑模式
       const targetSignal = signalList.value[editingIndex.value];
-      // 查找 rootElements 中的原始对象
       const rootSignal = rootElements.value.find(
         (el: any) => el.$type === 'bpmn:Signal' && el.id === targetSignal.id,
       );
       if (rootSignal) {
-        rootSignal.id = modelObjectForm.value.id;
+        rootSignal.id = formData.id;
-        rootSignal.name = modelObjectForm.value.name;
+        rootSignal.name = formData.name;
       }
     }
   }
-  modelModalApi.close();
+  // 触发建模器更新以保存更改
-  // 触发建模器更新以保存更改。
   saveChanges();
   initDataList();
 };
@@ -250,9 +225,8 @@ const [SignalGrid, signalGridApi] = useVbenVxeGrid({
   },
 });
 
-const [ModelModal, modelModalApi] = useVbenModal({
+const [Modal, modalApi] = useVbenModal({
-  destroyOnClose: true,
+  connectedComponent: SignalMessageModal,
-  onConfirm: addNewObject,
 });
 
 onMounted(() => {
@@ -354,24 +328,6 @@ watch(
       </template>
     </SignalGrid>
 
-    <ModelModal :title="modelConfig.title" class="w-3/5">
+    <Modal @confirm="handleConfirm" />
-      <Form
-        :model="modelObjectForm"
-        ref="formRef"
-        :label-col="{ span: 4 }"
-        :wrapper-col="{ span: 18 }"
-      >
-        <FormItem
-          :label="modelConfig.idLabel"
-          name="id"
-          :rules="[{ required: true, message: '请输入 ID' }]"
-        >
-          <Input v-model:value="modelObjectForm.id" allow-clear />
-        </FormItem>
-        <FormItem :label="modelConfig.nameLabel">
-          <Input v-model:value="modelObjectForm.name" allow-clear />
-        </FormItem>
-      </Form>
-    </ModelModal>
   </div>
 </template>

apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalMessageModal.vue

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Form, FormItem, Input } from 'ant-design-vue';
+
+defineOptions({ name: 'SignalMessageModal' });
+
+const emit = defineEmits<{
+  confirm: [data: { id: string; name: string }];
+}>();
+
+const formRef = ref();
+const form = ref<{ id: string; name: string }>({ id: '', name: '' });
+const modelType = ref<'message' | 'signal'>('message');
+const isEdit = ref(false);
+
+const config = computed(() => {
+  return modelType.value === 'message'
+    ? {
+        title: isEdit.value ? '编辑消息' : '创建消息',
+        idLabel: '消息 ID',
+        nameLabel: '消息名称',
+      }
+    : {
+        title: isEdit.value ? '编辑信号' : '创建信号',
+        idLabel: '信号 ID',
+        nameLabel: '信号名称',
+      };
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = modalApi.getData<{
+        id?: string;
+        isEdit?: boolean;
+        name?: string;
+        type: 'message' | 'signal';
+      }>();
+      modelType.value = data?.type || 'message';
+      isEdit.value = data?.isEdit || false;
+      form.value = {
+        id: data?.id || '',
+        name: data?.name || '',
+      };
+      // 清除校验
+      setTimeout(() => {
+        formRef.value?.clearValidate();
+      }, 50);
+    }
+  },
+  async onConfirm() {
+    try {
+      await formRef.value?.validate();
+      emit('confirm', { ...form.value });
+      modalApi.close();
+    } catch {
+      // 校验未通过
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="config.title" class="w-3/5">
+    <Form
+      ref="formRef"
+      :model="form"
+      :label-col="{ span: 4 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <FormItem
+        :label="config.idLabel"
+        name="id"
+        :rules="[{ required: true, message: '请输入 ID' }]"
+      >
+        <Input v-model:value="form.id" allow-clear />
+      </FormItem>
+      <FormItem
+        :label="config.nameLabel"
+        name="name"
+        :rules="[{ required: true, message: '请输入名称' }]"
+      >
+        <Input v-model:value="form.name" allow-clear />
+      </FormItem>
+    </Form>
+  </Modal>
+</template>

apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue

@@ -1,25 +1,12 @@
 <script lang="ts" setup>
-import {
+import { nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue';
-  h,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  toRaw,
-  watch,
-} from 'vue';
 
-import { PlusOutlined } from '@vben/icons';
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
 
-import {
+import { Button, message, Select, SelectOption } from 'ant-design-vue';
-  Button,
+
-  Form,
+import SignalMessageModal from '../../signal-message/SignalMessageModal.vue';
-  Input,
-  message,
-  Modal,
-  Select,
-  SelectOption,
-} from 'ant-design-vue';
 
 defineOptions({ name: 'ReceiveTask' });
 const props = defineProps({
@@ -28,40 +15,54 @@ const props = defineProps({
 });
 
 const bindMessageId = ref('');
-const newMessageForm = ref<Record<string, any>>({});
 const messageMap = ref<Record<string, any>>({});
-const messageModelVisible = ref(false);
 const bpmnElement = ref<any>();
 const bpmnMessageRefsMap = ref<Record<string, any>>();
 const bpmnRootElements = ref<any>();
 
 const bpmnInstances = () => (window as any).bpmnInstances;
+
 const getBindMessage = () => {
   bpmnElement.value = bpmnInstances().bpmnElement;
   bindMessageId.value =
     bpmnElement.value.businessObject?.messageRef?.id || '-1';
 };
-const openMessageModel = () => {
+
-  messageModelVisible.value = true;
+/** 生成消息 ID */
-  newMessageForm.value = {};
+const generateMessageId = (): string => {
+  const timestamp = Date.now();
+  const random = Math.random().toString(36).slice(2, 6).toUpperCase();
+  return `Message_${timestamp}_${random}`;
 };
-const createNewMessage = () => {
+
-  if (messageMap.value[newMessageForm.value.id]) {
+/** 打开创建消息弹窗 */
-    message.error('该消息已存在，请修改id后重新保存');
+const openCreateModal = () => {
+  modalApi
+    .setData({
+      id: generateMessageId(),
+      isEdit: false,
+      name: '',
+      type: 'message',
+    })
+    .open();
+};
+
+const handleConfirm = (formData: { id: string; name: string }) => {
+  if (messageMap.value[formData.id]) {
+    message.error('该消息已存在, 请修改id后重新保存');
     return;
   }
-  const newMessage = bpmnInstances().moddle.create(
+  const newMessage = bpmnInstances().moddle.create('bpmn:Message', formData);
-    'bpmn:Message',
-    newMessageForm.value,
-  );
   bpmnRootElements.value.push(newMessage);
-  messageMap.value[newMessageForm.value.id] = newMessageForm.value.name;
+  messageMap.value[formData.id] = formData.name;
-  // @ts-ignore
   if (bpmnMessageRefsMap.value) {
-    bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage;
+    bpmnMessageRefsMap.value[formData.id] = newMessage;
   }
-  messageModelVisible.value = false;
 };
+
+const [Modal, modalApi] = useVbenModal({
+  connectedComponent: SignalMessageModal,
+});
 const updateTaskMessage = (messageId: string) => {
   if (messageId === '-1') {
     bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
@@ -96,7 +97,6 @@ onBeforeUnmount(() => {
 watch(
   () => props.id,
   () => {
-    // bpmnElement.value = bpmnInstances().bpmnElement
     nextTick(() => {
       getBindMessage();
     });
@@ -106,56 +106,31 @@ watch(
 </script>
 
 <template>
-  <div style="margin-top: 16px">
+  <div class="mt-2">
-    <Form.Item label="消息实例">
+    <div class="mb-2 flex justify-end">
-      <div
+      <Button type="link" size="small" class="p-0" @click="openCreateModal">
-        style="
+        <template #icon>
-          display: flex;
+          <IconifyIcon class="size-4" icon="lucide:plus" />
-          flex-wrap: nowrap;
+        </template>
-          align-items: center;
+        创建新消息
-          justify-content: space-between;
+      </Button>
-        "
+    </div>
+    <div class="mb-1 flex items-center">
+      <span class="w-20 text-foreground">消息实例:</span>
+      <Select
+        v-model:value="bindMessageId"
+        class="w-full"
+        @change="(value: any) => updateTaskMessage(value)"
       >
-        <Select
+        <SelectOption
-          v-model:value="bindMessageId"
+          v-for="key in Object.keys(messageMap)"
-          @change="(value: any) => updateTaskMessage(value)"
+          :key="key"
+          :value="key"
         >
-          <SelectOption
+          {{ messageMap[key] }}
-            v-for="key in Object.keys(messageMap)"
+        </SelectOption>
-            :value="key"
+      </Select>
-            :key="key"
+    </div>
-          >
+    <Modal @confirm="handleConfirm" />
-            {{ messageMap[key] }}
-          </SelectOption>
-        </Select>
-        <Button
-          type="primary"
-          :icon="h(PlusOutlined)"
-          style="margin-left: 8px"
-          @click="openMessageModel"
-        />
-      </div>
-    </Form.Item>
-    <Modal
-      v-model:open="messageModelVisible"
-      :mask-closable="false"
-      title="创建新消息"
-      width="400px"
-      :destroy-on-close="true"
-    >
-      <Form :model="newMessageForm" size="small">
-        <Form.Item label="消息ID">
-          <Input v-model:value="newMessageForm.id" allow-clear />
-        </Form.Item>
-        <Form.Item label="消息名称">
-          <Input v-model:value="newMessageForm.name" allow-clear />
-        </Form.Item>
-      </Form>
-      <template #footer>
-        <Button size="small" type="primary" @click="createNewMessage">
-          确 认
-        </Button>
-      </template>
-    </Modal>
   </div>
 </template>