数据模型初步接入接口

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

@@ -21,9 +21,6 @@ export default {
       let {hash} = this.$route
       return hash == "#add" ? DmAdd : DmList
     }
-  },
-  created() {
-    this.dict.load("detailType")
   }
 }
 </script>

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})
+        edgeModel.setProperties({joinField: targetAnchorId.split("@").at(-1), mainField: sourceAnchorId.split("@").at(-1), tableName: targetNodeId})
-        this.diagram.graphModel.nodes.map(e => {
-          if (e.type == 'model') {
-            e.setProperties({isConnection: false})
-          }
-        })
       })
       this.diagram.render()
     },
@@ -195,8 +188,8 @@ export default {
     }
   },
   created() {
-    this.getDetail()
     this.getEntries()
+    this.getDetail()
   },
   mounted() {
     this.initLf()

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

@@ -7,15 +7,14 @@
           <el-button type="primary" icon="iconfont iconAdd" @click="handleAdd()">添加</el-button>
         </template>
         <template #right>
-          <el-input size="small" placeholder="搜索应用" v-model="search.name" clearable @change="page.current=1,getTableData()"/>
+          <el-input size="small" placeholder="搜索应用" v-model="search.name" clearable @change="getTableData()"/>
         </template>
       </ai-search-bar>
-      <ai-table :tableData="tableData" :total="total" :current.sync="page.current" :size.sync="page.size"
+      <ai-table :tableData="tableData" :isShowPagination="false" :col-configs="colConfigs" :dict="dict">
-                @getList="getTableData" :col-configs="colConfigs" :dict="dict">
         <el-table-column slot="options" label="操作" fixed="right" align="center" width="200">
           <template slot-scope="{row}">
-            <el-button type="text" @click="handleAdd(row.id)">编辑</el-button>
+            <el-button type="text" @click="handleAdd(row.tableName)">编辑</el-button>
-            <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
+            <el-button type="text" @click="handleDelete(row.tableName)">删除</el-button>
           </template>
         </el-table-column>
       </ai-table>
@@ -40,29 +39,30 @@ export default {
       total: 0,
       tableData: [],
       colConfigs: [
-        {label: "数据模型", prop: "name"},
+        {label: "数据模型主表", prop: "tableName"},
-        {label: "模型别名", prop: "alias"},
+        {label: "关联表单", prop: "relationTables"},
       ]
     }
   },
   methods: {
     getTableData() {
-      this.instance.get("/relation/list", null, {
+      this.instance.post("/app/appdatamodelconfig/list", null, {
         params: {...this.page, ...this.search}
       }).then(res => {
         if (res?.data) {
-          this.tableData = res.data.records
+          this.tableData = res.data.records.map(e => ({...e, relationTables: e.relations.map(r => r.tableName)?.toString()}))
           this.total = res.data.total
         }
       })
     },
-    handleAdd(id) {
+    handleAdd(tableName) {
-      this.$router.push({hash: "#add", query: {id}})
+      tableName = tableName.split(":").at(-1)
+      this.$router.push({hash: "#add", query: {tableName}})
     },
     @confirm("是否要删除该模型?")
-    handleDelete(ids) {
+    handleDelete(tableName) {
       this.instance.post("/relation/remove", null, {
-        params: {ids}
+        params: {tableName}
       }).then(res => {
         if (res?.code == 0) {
           this.$message.success("删除成功")

project/oms/apps/develop/AppDataModel/element.js

@@ -51,19 +51,17 @@ class DataModel extends HtmlNodeModel {
       y,
       width,
       height,
-      properties: {props, isConnection}
+      properties: {props}
     } = this;
     const anchors = [];
     props?.forEach((field, index) => {
-      if (isConnection) {
       anchors.push({
         x: x - width / 2 + 6,
         y: y - height / 2 + 58 + index * 20,
-          id: `${id}_${field.columnName}`,
+        id: `${id}@${field.columnName}`,
         edgeAddable: false,
         type: "left"
       });
-      }
     });
     return anchors;
   }
@@ -92,7 +90,7 @@ class MainModel extends DataModel {
       anchors.push({
         x: x + width / 2 - 6,
         y: y - height / 2 + 58 + index * 20,
-        id: `${id}_${index}_right`,
+        id: `${id}@${field.columnName}`,
         type: "right",
         field
       });