feat: [bpm][antd] bpm 设计器消息与信号,文档描述优化

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
 
-import { Input } from 'ant-design-vue';
+import { Textarea } from 'ant-design-vue';
 
 defineOptions({ name: 'ElementOtherConfig' });
 
@@ -12,8 +12,6 @@ const props = defineProps({
   },
 });
 
-const { Textarea } = Input;
-
 const documentation = ref('');
 const bpmnElement = ref();
 
@@ -58,10 +56,10 @@ watch(
 </script>
 
 <template>
-  <div class="panel-tab__content">
-    <div class="element-property input-property">
-      <div class="element-property__label">元素文档：</div>
-      <div class="element-property__value">
+  <div class="px-2 py-1">
+    <div class="flex items-start gap-2">
+      <div class="w-20 pt-1 text-sm text-gray-700">元素文档：</div>
+      <div class="flex-1">
         <Textarea
           v-model:value="documentation"
           :auto-size="{ minRows: 2, maxRows: 4 }"

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
 import {
@@ -10,17 +11,16 @@ import {
   FormItem,
   Input,
   message,
-  Modal,
-  Table,
-  TableColumn,
 } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
 defineOptions({ name: 'SignalAndMassage' });
 const signalList = ref<any[]>([]);
 const messageList = ref<any[]>([]);
-const dialogVisible = ref(false);
 const modelType = ref('');
 const modelObjectForm = ref<any>({});
+const formRef = ref();
 const rootElements = ref();
 const messageIdMap = ref();
 const signalIdMap = ref();
@@ -75,17 +75,24 @@ const openModel = (type: any) => {
     id: generateStandardId(type),
     name: '',
   };
-  dialogVisible.value = true;
+  modelModalApi.open();
 };
 
 const openEditModel = (type: any, row: any, index: number) => {
   modelType.value = type;
   editingIndex.value = index;
   modelObjectForm.value = { ...row };
-  dialogVisible.value = true;
+  modelModalApi.open();
 };
 
-const addNewObject = () => {
+const addNewObject = async () => {
+  try {
+    await formRef.value?.validate();
+  } catch {
+    // 校验未通过，直接返回
+    return;
+  }
+
   if (modelType.value === 'message') {
     // 编辑模式
     if (editingIndex.value === -1) {
@@ -135,144 +142,202 @@ const addNewObject = () => {
       }
     }
   }
-  dialogVisible.value = false;
+  modelModalApi.close();
   initDataList();
 };
 
 // 补充"编辑"、"移除"功能。相关 issue：https://github.com/YunaiV/yudao-cloud/issues/270
 const removeObject = (type: any, row: any) => {
-  Modal.confirm({
+  confirm({
     title: '提示',
     content: `确认移除该${type === 'message' ? '消息' : '信号'}吗？`,
-    okText: '确 认',
-    cancelText: '取 消',
-    onOk() {
-      // 从 rootElements 中移除
-      const targetType = type === 'message' ? 'bpmn:Message' : 'bpmn:Signal';
-      const elementIndex = rootElements.value.findIndex(
-        (el: any) => el.$type === targetType && el.id === row.id,
-      );
-      if (elementIndex !== -1) {
-        rootElements.value.splice(elementIndex, 1);
-      }
-      // 刷新列表
-      initDataList();
-      message.success('移除成功');
-    },
-    onCancel() {
-      // console.info('操作取消');
-    },
+  }).then(() => {
+    // 从 rootElements 中移除
+    const targetType = type === 'message' ? 'bpmn:Message' : 'bpmn:Signal';
+    const elementIndex = rootElements.value.findIndex(
+      (el: any) => el.$type === targetType && el.id === row.id,
+    );
+    if (elementIndex !== -1) {
+      rootElements.value.splice(elementIndex, 1);
+    }
+    // 刷新列表
+    initDataList();
+    message.success('移除成功');
   });
 };
 
+const [MessageGrid, messageGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'id', title: '消息ID', minWidth: 120 },
+      { field: 'name', title: '消息名称', minWidth: 100 },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    height: 'auto',
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+const [SignalGrid, signalGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'id', title: '信号ID', minWidth: 120 },
+      { field: 'name', title: '信号名称', minWidth: 100 },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    height: 'auto',
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+const [ModelModal, modelModalApi] = useVbenModal({
+  destroyOnClose: true,
+  onConfirm: addNewObject,
+});
+
 onMounted(() => {
   initDataList();
 });
+
+watch(
+  messageList,
+  (val) => {
+    messageGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  signalList,
+  (val) => {
+    signalGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
 </script>
 <template>
-  <div class="panel-tab__content">
-    <div class="panel-tab__content--title">
+  <div class="-mx-2">
+    <div class="mb-2 flex items-center justify-between">
       <span class="flex items-center">
         <IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
         消息列表
       </span>
-      <Button type="primary" title="创建新消息" @click="openModel('message')">
+      <Button
+        class="flex items-center"
+        size="small"
+        type="link"
+        @click="openModel('message')"
+      >
         <template #icon>
           <IconifyIcon icon="ep:plus" />
         </template>
         创建新消息
       </Button>
     </div>
-    <Table :data-source="messageList" size="small" bordered>
-      <TableColumn title="序号" width="60px">
-        <template #default="{ index }">
-          {{ index + 1 }}
-        </template>
-      </TableColumn>
-      <TableColumn title="消息ID" data-index="id" />
-      <TableColumn title="消息名称" data-index="name" />
-      <TableColumn title="操作" width="110px">
-        <template #default="{ record, index }">
-          <Button
-            size="small"
-            type="link"
-            @click="openEditModel('message', record, index)"
-          >
-            编辑
-          </Button>
-          <Divider type="vertical" />
-          <Button
-            size="small"
-            type="link"
-            danger
-            @click="removeObject('message', record)"
-          >
-            移除
-          </Button>
-        </template>
-      </TableColumn>
-    </Table>
-    <div class="panel-tab__content--title mt-2 border-t border-gray-200 pt-2">
+    <MessageGrid :data="messageList">
+      <template #action="{ row, rowIndex }">
+        <Button
+          size="small"
+          type="link"
+          @click="openEditModel('message', row, rowIndex)"
+        >
+          编辑
+        </Button>
+        <Divider type="vertical" />
+        <Button
+          size="small"
+          type="link"
+          danger
+          @click="removeObject('message', row)"
+        >
+          移除
+        </Button>
+      </template>
+    </MessageGrid>
+    <div
+      class="mb-2 mt-2 flex items-center justify-between border-t border-gray-200 pt-2"
+    >
       <span class="flex items-center">
         <IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
         信号列表
       </span>
-      <Button type="primary" title="创建新信号" @click="openModel('signal')">
+      <Button
+        class="flex items-center"
+        size="small"
+        type="link"
+        @click="openModel('signal')"
+      >
         <template #icon>
           <IconifyIcon icon="ep:plus" />
         </template>
         创建新信号
       </Button>
     </div>
-    <Table :data-source="signalList" size="small" bordered>
-      <TableColumn title="序号" width="60px">
-        <template #default="{ index }">
-          {{ index + 1 }}
-        </template>
-      </TableColumn>
-      <TableColumn title="信号ID" data-index="id" />
-      <TableColumn title="信号名称" data-index="name" />
-      <TableColumn title="操作" width="110px">
-        <template #default="{ record, index }">
-          <Button
-            size="small"
-            type="link"
-            @click="openEditModel('signal', record, index)"
-          >
-            编辑
-          </Button>
-          <Divider type="vertical" />
-          <Button
-            size="small"
-            type="link"
-            danger
-            @click="removeObject('signal', record)"
-          >
-            移除
-          </Button>
-        </template>
-      </TableColumn>
-    </Table>
+    <SignalGrid :data="signalList">
+      <template #action="{ row, rowIndex }">
+        <Button
+          size="small"
+          type="link"
+          @click="openEditModel('signal', row, rowIndex)"
+        >
+          编辑
+        </Button>
+        <Divider type="vertical" />
+        <Button
+          size="small"
+          type="link"
+          danger
+          @click="removeObject('signal', row)"
+        >
+          移除
+        </Button>
+      </template>
+    </SignalGrid>
 
-    <Modal
-      v-model:open="dialogVisible"
-      :title="modelConfig.title"
-      :mask-closable="false"
-      width="400px"
-      :destroy-on-close="true"
-    >
-      <Form :model="modelObjectForm">
-        <FormItem :label="modelConfig.idLabel">
+    <ModelModal :title="modelConfig.title" class="w-3/5">
+      <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>
-      <template #footer>
-        <Button @click="dialogVisible = false">取 消</Button>
-        <Button type="primary" @click="addNewObject">保 存</Button>
-      </template>
-    </Modal>
+    </ModelModal>
   </div>
 </template>