Vue3 重构：去除 modelEditor.vue 冗余代码

src/api/bpm/model/index.ts

@@ -29,7 +29,7 @@ export const getModelPageApi = async (params) => {
   return await request.get({ url: '/bpm/model/page', params })
 }
 
-export const getModelApi = async (id: number) => {
+export const getModel = async (id: number) => {
   return await request.get({ url: '/bpm/model/get?id=' + id })
 }
 

src/views/bpm/model/index.vue

@@ -389,7 +389,7 @@ const handleFormDetail = async (row) => {
 const handleBpmnDetail = (row) => {
   // TODO 芋艿：流程组件开发中
   console.log(row)
-  ModelApi.getModelApi(row).then((response) => {
+  ModelApi.getModel(row).then((response) => {
     console.log(response, 'response')
     bpmnXML.value = response.bpmnXml
     // 弹窗打开
@@ -432,7 +432,7 @@ const handleUpdate = async (rowId: number) => {
   resetForm()
   await setDialogTile('edit')
   // 设置数据
-  saveForm.value = await ModelApi.getModelApi(rowId)
+  saveForm.value = await ModelApi.getModel(rowId)
   if (saveForm.value.category == null) {
     saveForm.value.category = 1
   } else {

src/views/bpm/model/modelEditor.vue

@@ -1,53 +1,40 @@
 <template>
-  <div class="app-container">
-    <!-- 流程设计器，负责绘制流程等 -->
-    <!-- <myProcessDesigner -->
-    <my-process-designer
-      :key="`designer-${reloadIndex}`"
-      v-if="xmlString !== undefined"
-      v-model="xmlString"
-      :value="xmlString"
-      v-bind="controlForm"
-      keyboard
-      ref="processDesigner"
-      @init-finished="initModeler"
-      :additionalModel="controlForm.additionalModel"
-      @save="save"
-    />
-    <!-- 流程属性器，负责编辑每个流程节点的属性 -->
-    <!-- <MyProcessPalette -->
-    <my-properties-panel
-      :key="`penal-${reloadIndex}`"
-      :bpmnModeler="modeler"
-      :prefix="controlForm.prefix"
-      class="process-panel"
-      :model="model"
-    />
-  </div>
+  <!-- 流程设计器，负责绘制流程等 -->
+  <my-process-designer
+    key="designer"
+    v-if="xmlString !== undefined"
+    v-model="xmlString"
+    :value="xmlString"
+    v-bind="controlForm"
+    keyboard
+    ref="processDesigner"
+    @init-finished="initModeler"
+    :additionalModel="controlForm.additionalModel"
+    @save="save"
+  />
+  <!-- 流程属性器，负责编辑每个流程节点的属性 -->
+  <my-properties-panel
+    key="penal"
+    :bpmnModeler="modeler"
+    :prefix="controlForm.prefix"
+    class="process-panel"
+    :model="model"
+  />
 </template>
 
 <script setup lang="ts">
-// import { translations } from '@/components/bpmnProcessDesigner/src/translations'
 // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
 import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
 // 自定义左侧菜单（修改 默认任务 为 用户任务）
 import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
-// import xmlObj2json from "./utils/xml2json";
-// import myProcessDesigner from '@/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue'
-// import MyProcessPalette from '@/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue'
-import { createModelApi, getModelApi, updateModelApi, ModelVO } from '@/api/bpm/model'
+import * as ModelApi from '@/api/bpm/model'
 
-const router = useRouter()
-const message = useMessage()
-
-// 自定义侧边栏
-// import MyProcessPanel from "../package/process-panel/ProcessPanel";
+const router = useRouter() // 路由
+const { query } = useRoute() // 路由的查询
+const message = useMessage() // 国际化
 
 const xmlString = ref(undefined) // BPMN XML
 const modeler = ref(null)
-const reloadIndex = ref(0)
-// const controlDrawerVisible = ref(false)
-// const translationsSelf = translations
 const controlForm = ref({
   simulation: true,
   labelEditing: false,
@@ -56,128 +43,55 @@ const controlForm = ref({
   headerButtonSize: 'mini',
   additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
 })
-// const addis = ref({
-//   CustomContentPadProvider,
-//   CustomPaletteProvider
-// })
-// 流程模型的信息
-const model = ref<ModelVO>()
-onMounted(() => {
-  // 如果 modelId 非空，说明是修改流程模型
-  const modelId = router.currentRoute.value.query && router.currentRoute.value.query.modelId
-  console.log(modelId, 'modelId')
-  if (modelId) {
-    // let data = '4b4909d8-97e7-11ec-8e20-862bc1a4a054'
-    getModelApi(modelId as unknown as number).then((data) => {
-      console.log(data, 'response')
-      xmlString.value = data.bpmnXml
-      model.value = {
-        ...data,
-        bpmnXml: undefined // 清空 bpmnXml 属性
-      }
-      // this.controlForm.processId = data.key
+const model = ref<ModelApi.ModelVO>() // 流程模型的信息
 
-      // xmlString.value =
-      //   '<?xml version="1.0" encoding="UTF-8"?>\n<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="diagram_Process_1645980650311" targetNamespace="http://activiti.org/bpmn"><bpmn2:process id="flowable_01" name="flowable测试" isExecutable="true"><bpmn2:startEvent id="Event_1iruxim"><bpmn2:outgoing>Flow_0804gmo</bpmn2:outgoing></bpmn2:startEvent><bpmn2:userTask id="task01" name="task01"><bpmn2:incoming>Flow_0804gmo</bpmn2:incoming><bpmn2:outgoing>Flow_0cx479x</bpmn2:outgoing></bpmn2:userTask><bpmn2:sequenceFlow id="Flow_0804gmo" sourceRef="Event_1iruxim" targetRef="task01" /><bpmn2:endEvent id="Event_1mdsccz"><bpmn2:incoming>Flow_0cx479x</bpmn2:incoming></bpmn2:endEvent><bpmn2:sequenceFlow id="Flow_0cx479x" sourceRef="task01" targetRef="Event_1mdsccz" /></bpmn2:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="flowable_01_di" bpmnElement="flowable_01"><bpmndi:BPMNEdge id="Flow_0cx479x_di" bpmnElement="Flow_0cx479x"><di:waypoint x="440" y="350" /><di:waypoint x="492" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_0804gmo_di" bpmnElement="Flow_0804gmo"><di:waypoint x="288" y="350" /><di:waypoint x="340" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNShape id="Event_1iruxim_di" bpmnElement="Event_1iruxim"><dc:Bounds x="252" y="332" width="36" height="36" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="task01_di" bpmnElement="task01"><dc:Bounds x="340" y="310" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Event_1mdsccz_di" bpmnElement="Event_1mdsccz"><dc:Bounds x="492" y="332" width="36" height="36" /></bpmndi:BPMNShape></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn2:definitions>'
-
-      // model.value = {
-      //   key: 'flowable_01',
-      //   name: 'flowable测试',
-      //   description: 'ooxx',
-      //   category: '1',
-      //   formType: 10,
-      //   formId: 11,
-      //   formCustomCreatePath: null,
-      //   formCustomViewPath: null,
-      //   id: '4b4909d8-97e7-11ec-8e20-862bc1a4a054',
-      //   createTime: 1645978019795,
-      //   bpmnXml: undefined // 清空 bpmnXml 属性
-      // }
-      // console.log(modeler.value, 'modeler11111111')
-    })
-  }
-})
+/** 初始化 modeler */
 const initModeler = (item) => {
   setTimeout(() => {
     modeler.value = item
-    console.log(item, 'initModeler方法modeler')
-    console.log(modeler.value, 'initModeler方法modeler')
-    // controlForm.value.prefix = '2222'
   }, 10)
 }
 
-const save = (bpmnXml) => {
-  const data: ModelVO = {
-    ...(model.value ?? ({} as ModelVO)),
+/** 添加/修改模型 */
+const save = async (bpmnXml) => {
+  const data = {
+    ...model.value,
     bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
-  }
-  console.log(data, 'data')
-
-  // 修改的提交
+  } as unknown as ModelApi.ModelVO
+  // 提交
   if (data.id) {
-    updateModelApi(data).then((response) => {
-      console.log(response, 'response')
-      message.success('修改成功')
-      // 跳转回去
-      close()
-    })
-    return
+    await ModelApi.updateModelApi(data)
+    message.success('修改成功')
+  } else {
+    await ModelApi.createModelApi(data)
+    message.success('新增成功')
   }
-  // 添加的提交
-  createModelApi(data).then((response) => {
-    console.log(response, 'response1')
-    message.success('保存成功')
-    // 跳转回去
-    close()
-  })
+  // 跳转回去
+  close()
 }
+
 /** 关闭按钮 */
 const close = () => {
   router.push({ path: '/bpm/manager/model' })
 }
-</script>
 
-<style lang="scss">
-//body {
-//  overflow: hidden;
-//  margin: 0;
-//  box-sizing: border-box;
-//}
-//.app {
-//  width: 100%;
-//  height: 100%;
-//  box-sizing: border-box;
-//  display: inline-grid;
-//  grid-template-columns: 100px auto max-content;
-//}
-.demo-control-bar {
-  position: fixed;
-  right: 8px;
-  bottom: 8px;
-  z-index: 1;
-  .open-control-dialog {
-    width: 48px;
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    font-size: 32px;
-    background: rgba(64, 158, 255, 1);
-    color: #ffffff;
-    cursor: pointer;
+/** 初始化 */
+onMounted(async () => {
+  const modelId = query.modelId as unknown as number
+  if (!modelId) {
+    message.error('缺少模型 modelId 编号')
+    return
   }
-}
-
-// TODO 芋艿：去掉多余的 faq
-//.info-tip {
-//  position: fixed;
-//  top: 40px;
-//  right: 500px;
-//  z-index: 10;
-//  color: #999999;
-//}
-
+  // 查询模型
+  const data = await ModelApi.getModel(modelId)
+  xmlString.value = data.bpmnXml
+  model.value = {
+    ...data,
+    bpmnXml: undefined // 清空 bpmnXml 属性
+  }
+})
+</script>
+<style lang="scss">
 .control-form {
   .el-radio {
     width: 100%;