fix: 【bpm】bpmn 设计器：增加消息与信号的编辑、删除功能

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

@@ -6,8 +6,25 @@
     </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-column label="消息ID" prop="id" min-width="120px" show-overflow-tooltip />
+      <el-table-column label="消息名称" prop="name" min-width="120px" show-overflow-tooltip />
+      <el-table-column label="操作" width="110px">
+        <!-- 补充“编辑”、“移除”功能。相关 issue：https://github.com/YunaiV/yudao-cloud/issues/270 -->
+        <template #default="scope">
+          <el-button link @click="openEditModel('message', scope.row, scope.$index)" size="small">
+            编辑
+          </el-button>
+          <el-divider direction="vertical" />
+          <el-button
+            link
+            size="small"
+            style="color: #ff4d4f"
+            @click="removeObject('message', scope.row, scope.$index)"
+          >
+            移除
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
     <div
       class="panel-tab__content--title"
@@ -18,8 +35,24 @@
     </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-column label="信号ID" prop="id" min-width="120px" show-overflow-tooltip />
+      <el-table-column label="信号名称" prop="name" min-width="120px" show-overflow-tooltip />
+      <el-table-column label="操作" width="110px">
+        <template #default="scope">
+          <el-button link @click="openEditModel('signal', scope.row, scope.$index)" size="small">
+            编辑
+          </el-button>
+          <el-divider direction="vertical" />
+          <el-button
+            link
+            size="small"
+            style="color: #ff4d4f"
+            @click="removeObject('signal', scope.row, scope.$index)"
+          >
+            移除
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
 
     <el-dialog
@@ -46,6 +79,7 @@
   </div>
 </template>
 <script lang="ts" setup>
+import { ElMessageBox } from 'element-plus'
 defineOptions({ name: 'SignalAndMassage' })
 
 const message = useMessage()
@@ -57,11 +91,21 @@ const modelObjectForm = ref<any>({})
 const rootElements = ref()
 const messageIdMap = ref()
 const signalIdMap = ref()
+const editingIndex = ref(-1) // 正在编辑的索引，-1 表示新建
 const modelConfig = computed(() => {
+  const isEdit = editingIndex.value !== -1
   if (modelType.value === 'message') {
-    return { title: '创建消息', idLabel: '消息ID', nameLabel: '消息名称' }
+    return {
+      title: isEdit ? '编辑消息' : '创建消息',
+      idLabel: '消息ID',
+      nameLabel: '消息名称'
+    }
   } else {
-    return { title: '创建信号', idLabel: '信号ID', nameLabel: '信号名称' }
+    return {
+      title: isEdit ? '编辑信号' : '创建信号',
+      idLabel: '信号ID',
+      nameLabel: '信号名称'
+    }
   }
 })
 const bpmnInstances = () => (window as any)?.bpmnInstances
@@ -86,27 +130,86 @@ const initDataList = () => {
 }
 const openModel = (type) => {
   modelType.value = type
+  editingIndex.value = -1
   modelObjectForm.value = {}
   dialogVisible.value = true
 }
+
+const openEditModel = (type, row, index) => {
+  modelType.value = type
+  editingIndex.value = index
+  modelObjectForm.value = { ...row }
+  dialogVisible.value = true
+}
 const addNewObject = () => {
   if (modelType.value === 'message') {
-    if (messageIdMap.value[modelObjectForm.value.id]) {
-      message.error('该消息已存在，请修改id后重新保存')
+    // 编辑模式
+    if (editingIndex.value !== -1) {
+      const targetMessage = messageList.value[editingIndex.value]
+      // 查找 rootElements 中的原始对象
+      const rootMessage = rootElements.value.find(
+        (el) => el.$type === 'bpmn:Message' && el.id === targetMessage.id
+      )
+      if (rootMessage) {
+        rootMessage.id = modelObjectForm.value.id
+        rootMessage.name = modelObjectForm.value.name
+      }
+    } else {
+      // 新建模式
+      if (messageIdMap.value[modelObjectForm.value.id]) {
+        message.error('该消息已存在，请修改id后重新保存')
+        return
+      }
+      const messageRef = bpmnInstances().moddle.create('bpmn:Message', modelObjectForm.value)
+      rootElements.value.push(messageRef)
     }
-    const messageRef = bpmnInstances().moddle.create('bpmn:Message', modelObjectForm.value)
-    rootElements.value.push(messageRef)
   } else {
-    if (signalIdMap.value[modelObjectForm.value.id]) {
-      message.error('该信号已存在，请修改id后重新保存')
+    // 编辑模式
+    if (editingIndex.value !== -1) {
+      const targetSignal = signalList.value[editingIndex.value]
+      // 查找 rootElements 中的原始对象
+      const rootSignal = rootElements.value.find(
+        (el) => el.$type === 'bpmn:Signal' && el.id === targetSignal.id
+      )
+      if (rootSignal) {
+        rootSignal.id = modelObjectForm.value.id
+        rootSignal.name = modelObjectForm.value.name
+      }
+    } else {
+      // 新建模式
+      if (signalIdMap.value[modelObjectForm.value.id]) {
+        message.error('该信号已存在，请修改id后重新保存')
+        return
+      }
+      const signalRef = bpmnInstances().moddle.create('bpmn:Signal', modelObjectForm.value)
+      rootElements.value.push(signalRef)
     }
-    const signalRef = bpmnInstances().moddle.create('bpmn:Signal', modelObjectForm.value)
-    rootElements.value.push(signalRef)
   }
   dialogVisible.value = false
   initDataList()
 }
 
+const removeObject = (type, row, index) => {
+  ElMessageBox.confirm(`确认移除该${type === 'message' ? '消息' : '信号'}吗？`, '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      // 从 rootElements 中移除
+      const targetType = type === 'message' ? 'bpmn:Message' : 'bpmn:Signal'
+      const elementIndex = rootElements.value.findIndex(
+        (el) => el.$type === targetType && el.id === row.id
+      )
+      if (elementIndex !== -1) {
+        rootElements.value.splice(elementIndex, 1)
+      }
+      // 刷新列表
+      initDataList()
+      message.success('移除成功')
+    })
+    .catch(() => console.info('操作取消'))
+}
+
 onMounted(() => {
   initDataList()
 })