数据模型初步接入接口

project/oms/apps/develop/AppDataModel/dmAdd.vue

@@ -9,7 +9,7 @@
           </el-form-item>
         </ai-card>
         <ai-card title="设计模型" panel>
-          <el-form-item prop="model" label-width="0" class="diagram">
+          <el-form-item prop="json" label-width="0" class="diagram">
             <div ref="DataModel" class="dataModel"/>
             <div class="dndPanel pad-8">
               <div class="iconfont iconxinxiguanli pad-h8" v-text="`表实体`" @mousedown="handleAddModel"/>
@@ -74,7 +74,7 @@ export default {
     }
   },
   computed: {
-    isEdit: v => !!v.$route.tableName,
+    isEdit: v => !!v.$route.query.tableName,
     pageTitle: v => v.isEdit ? "编辑数据关联模型" : "新增数据关联模型",
   },
   methods: {
@@ -85,9 +85,14 @@ export default {
     },
     getDetail() {
       const {tableName} = this.$route.query
-      tableName && this.instance.post("/relation/list", null, {params: {tableName}}).then(res => {
+      tableName && this.instance.get("/relation/list", {params: {tableName}}).then(res => {
         if (res?.data) {
-          this.form = res.data
+          const json = JSON.parse(res.data.json)
+          this.form = {...res.data, json, tableName}
+          this.$load(this.diagram).then(() => {
+            this.diagram.render(json)
+            this.diagram.focusOn({id: tableName})
+          })
         }
       })
     },
@@ -122,21 +127,9 @@ export default {
       })
       this.diagram.on('node:click', this.onNodeClick)
       this.diagram.on('node:dnd-add', this.onNodeClick)
-      this.diagram.on('anchor:dragstart', () => {
-        this.diagram.graphModel.nodes.map(e => {
-          if (e.type == 'model') {
-            e.setProperties({isConnection: true})
-          }
-        })
-      })
       this.diagram.on('anchor:drop', ({edgeModel}) => {
         const {sourceAnchorId, targetAnchorId, targetNodeId} = edgeModel
-        edgeModel.setProperties({joinField: targetAnchorId.replace(`${targetNodeId}_`, ''), mainField: sourceAnchorId, tableName: targetNodeId})
-        this.diagram.graphModel.nodes.map(e => {
-          if (e.type == 'model') {
-            e.setProperties({isConnection: false})
-          }
-        })
+        edgeModel.setProperties({joinField: targetAnchorId.split("@").at(-1), mainField: sourceAnchorId.split("@").at(-1), tableName: targetNodeId})
       })
       this.diagram.render()
     },
@@ -195,8 +188,8 @@ export default {
     }
   },
   created() {
-    this.getDetail()
     this.getEntries()
+    this.getDetail()
   },
   mounted() {
     this.initLf()