refactor: 重构 bpmnProcessDesigner 组件 ele => antd

apps/web-antd/src/components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue

@@ -1,94 +1,20 @@
-<template>
-  <div class="panel-tab__content">
-    <div class="panel-tab__content--title">
-      <span
-        ><Icon
-          icon="ep:menu"
-          style="margin-right: 8px; color: #555"
-        />消息列表</span
-      >
-      <XButton
-        type="primary"
-        title="创建新消息"
-        preIcon="ep:plus"
-        @click="openModel('message')"
-      />
-    </div>
-    <el-table :data="messageList" border>
-      <el-table-column type="index" label="序号" width="60px" />
-      <el-table-column
-        label="消息ID"
-        prop="id"
-        max-width="300px"
-        show-overflow-tooltip
-      />
-      <el-table-column
-        label="消息名称"
-        prop="name"
-        max-width="300px"
-        show-overflow-tooltip
-      />
-    </el-table>
-    <div
-      class="panel-tab__content--title"
-      style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eee"
-    >
-      <span
-        ><Icon
-          icon="ep:menu"
-          style="margin-right: 8px; color: #555"
-        />信号列表</span
-      >
-      <XButton
-        type="primary"
-        title="创建新信号"
-        preIcon="ep:plus"
-        @click="openModel('signal')"
-      />
-    </div>
-    <el-table :data="signalList" border>
-      <el-table-column type="index" label="序号" width="60px" />
-      <el-table-column
-        label="信号ID"
-        prop="id"
-        max-width="300px"
-        show-overflow-tooltip
-      />
-      <el-table-column
-        label="信号名称"
-        prop="name"
-        max-width="300px"
-        show-overflow-tooltip
-      />
-    </el-table>
-
-    <el-dialog
-      v-model="dialogVisible"
-      :title="modelConfig.title"
-      :close-on-click-modal="false"
-      width="400px"
-      append-to-body
-      destroy-on-close
-    >
-      <el-form :model="modelObjectForm" label-width="90px">
-        <el-form-item :label="modelConfig.idLabel">
-          <el-input v-model="modelObjectForm.id" clearable />
-        </el-form-item>
-        <el-form-item :label="modelConfig.nameLabel">
-          <el-input v-model="modelObjectForm.name" clearable />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="addNewObject">保 存</el-button>
-      </template>
-    </el-dialog>
-  </div>
-</template>
 <script lang="ts" setup>
-defineOptions({ name: 'SignalAndMassage' });
+import { computed, onMounted, ref } from 'vue';
 
-const message = useMessage();
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Form,
+  FormItem,
+  Input,
+  message,
+  Modal,
+  Table,
+  TableColumn,
+} from 'ant-design-vue';
+
+defineOptions({ name: 'SignalAndMassage' });
 const signalList = ref<any[]>([]);
 const messageList = ref<any[]>([]);
 const dialogVisible = ref(false);
@@ -98,22 +24,20 @@ const rootElements = ref();
 const messageIdMap = ref();
 const signalIdMap = ref();
 const modelConfig = computed(() => {
-  if (modelType.value === 'message') {
-    return { title: '创建消息', idLabel: '消息ID', nameLabel: '消息名称' };
-  } else {
-    return { title: '创建信号', idLabel: '信号ID', nameLabel: '信号名称' };
-  }
+  return modelType.value === 'message'
+    ? { title: '创建消息', idLabel: '消息ID', nameLabel: '消息名称' }
+    : { title: '创建信号', idLabel: '信号ID', nameLabel: '信号名称' };
 });
 const bpmnInstances = () => (window as any)?.bpmnInstances;
 
 const initDataList = () => {
-  console.log(window, 'window');
+  // console.log(window, 'window');
   rootElements.value = bpmnInstances().modeler.getDefinitions().rootElements;
   messageIdMap.value = {};
   signalIdMap.value = {};
   messageList.value = [];
   signalList.value = [];
-  rootElements.value.forEach((el) => {
+  rootElements.value.forEach((el: any) => {
     if (el.$type === 'bpmn:Message') {
       messageIdMap.value[el.id] = true;
       messageList.value.push({ ...el });
@@ -124,7 +48,7 @@ const initDataList = () => {
     }
   });
 };
-const openModel = (type) => {
+const openModel = (type: any) => {
   modelType.value = type;
   modelObjectForm.value = {};
   dialogVisible.value = true;
@@ -157,3 +81,98 @@ onMounted(() => {
   initDataList();
 });
 </script>
+<template>
+  <div class="panel-tab__content">
+    <div class="panel-tab__content--title">
+      <span>
+        <IconifyIcon icon="ep:menu" style="margin-right: 8px; color: #555" />
+        消息列表
+      </span>
+      <Button type="primary" title="创建新消息" @click="openModel('message')">
+        <template #icon>
+          <IconifyIcon icon="ep:plus" />
+        </template>
+        创建新消息
+      </Button>
+    </div>
+    <Table :data-source="messageList" :bordered="true" :pagination="false">
+      <TableColumn title="序号" width="60px">
+        <template #default="{ index }">
+          {{ index + 1 }}
+        </template>
+      </TableColumn>
+      <TableColumn
+        title="消息ID"
+        data-index="id"
+        :width="300"
+        :ellipsis="{ showTitle: true }"
+      />
+      <TableColumn
+        title="消息名称"
+        data-index="name"
+        :width="300"
+        :ellipsis="{ showTitle: true }"
+      />
+    </Table>
+    <div
+      class="panel-tab__content--title"
+      style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eee"
+    >
+      <span>
+        <IconifyIcon icon="ep:menu" style="margin-right: 8px; color: #555">
+          信号列表
+        </IconifyIcon>
+      </span>
+      <Button type="primary" title="创建新信号" @click="openModel('signal')">
+        <template #icon>
+          <IconifyIcon icon="ep:plus" />
+        </template>
+        创建新信号
+      </Button>
+    </div>
+    <Table :data-source="signalList" :bordered="true" :pagination="false">
+      <TableColumn title="序号" width="60px">
+        <template #default="{ index }">
+          {{ index + 1 }}
+        </template>
+      </TableColumn>
+      <TableColumn
+        title="信号ID"
+        data-index="id"
+        :width="300"
+        :ellipsis="{ showTitle: true }"
+      />
+      <TableColumn
+        title="信号名称"
+        data-index="name"
+        :width="300"
+        :ellipsis="{ showTitle: true }"
+      />
+    </Table>
+
+    <Modal
+      v-model:open="dialogVisible"
+      :title="modelConfig.title"
+      :mask-closable="false"
+      width="400px"
+      :destroy-on-close="true"
+    >
+      <Form
+        :model="modelObjectForm"
+        :label-col="{ span: 9 }"
+        :wrapper-col="{ span: 15 }"
+      >
+        <FormItem :label="modelConfig.idLabel">
+          <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>
+  </div>
+</template>