先提交一波

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

@@ -11,7 +11,7 @@ import DmList from "./dmList";
 export default {
   name: "AppDataModel",
   components: {DmList, DmAdd},
-  label: "数据模型",
+  label: "数据关联模型",
   props: {
     instance: Function,
     dict: Object

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

@@ -2,54 +2,35 @@
   <ai-detail class="dmAdd">
     <ai-title slot="title" :title="pageTitle" isShowBottomBorder isShowBack @back="back"/>
     <template #content>
-      <el-form size="small" :model="form" label-width="120px" :rules="rules" ref="DataModelForm">
+      <el-form size="small" :model="form" label-width="60px" :rules="rules" ref="DataModelForm">
-        <ai-card title="基本信息">
+        <ai-card title="主表实体">
-          <el-row type="flex">
+          <el-form-item label="主表" prop="tableName">
-            <div class="fill">
+            <ai-select v-model="form.tableName" :selectList="entries" placeholder="指定主表实体模型,更换主表会清空设计模型" filterable @select="initMainModel" :disabled="isEdit"/>
-              <el-form-item label="模型名称" prop="name">
+          </el-form-item>
-                <el-input v-model="form.name" clearable placeholder="用来标识模型的用途"/>
-              </el-form-item>
-            </div>
-            <div class="fill">
-              <el-form-item label="模型别名" prop="alias">
-                <el-input v-model="form.alias" clearable placeholder="用来通过通用方法获取模型"/>
-              </el-form-item>
-            </div>
-          </el-row>
         </ai-card>
         <ai-card title="设计模型" panel>
           <el-form-item prop="model" 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"/>
+              <div class="iconfont iconxinxiguanli pad-h8" v-text="`表实体`" @mousedown="handleAddModel"/>
             </div>
           </el-form-item>
         </ai-card>
       </el-form>
       <el-drawer :visible.sync="drawer" @close="current={}">
         <div slot="title" v-text="`设置${current.name||'实体对象'}`"/>
-        <el-form class="pad-h16" :model="current.properties" ref="ModelSettingForm" size="small" label-position="top">
+        <el-form class="pad-h16" :model="current" ref="ModelSettingForm" size="small" label-position="top">
-          <el-form-item label="实体名称">
+          <template v-if="current.type=='model'">
-            <el-input v-model="current.name" clearable placeholder="实体对象名称"/>
+            <el-form-item label="实体名称">
-          </el-form-item>
+              <ai-select v-model="current.id" :selectList="entries" placeholder="请选择实体对象" filterable @select="changeModel"/>
-          <el-form-item>
+            </el-form-item>
-            <el-row type="flex" justify="space-between" slot="label">
+            <el-form-item label="实体属性">
-              <div v-text="`实体属性`"/>
+              <ai-table :tableData="current.props" :colConfigs="currentCols" :is-show-pagination="false" tableSize="small"/>
-              <el-button type="text" size="small" @click="curProps.push({name:'',prop:''})">添加属性</el-button>
+            </el-form-item>
-            </el-row>
+          </template>
-            <ai-table :tableData="curProps" :colConfigs="[{slot:'prop'}, {slot:'name'}]" :is-show-pagination="false" tableSize="small">
+          <template v-else-if="current.type=='polyline'">
-              <el-table-column slot="prop" label="属性名">
+
-                <template slot-scope="{row}">
+          </template>
-                  <el-input v-model="row.prop" clearable placeholder="属性名"/>
-                </template>
-              </el-table-column>
-              <el-table-column slot="name" label="属性名称">
-                <template slot-scope="{row}">
-                  <el-input v-model="row.name" clearable placeholder="属性名称"/>
-                </template>
-              </el-table-column>
-            </ai-table>
-          </el-form-item>
         </el-form>
         <div class="footBar">
           <el-button @click="drawer=false">取消</el-button>
@@ -72,28 +53,29 @@ import {ModelElement} from "./element";
 
 export default {
   name: "dmAdd",
+  props: {
+    instance: Function,
+    dict: Object
+  },
   data() {
     return {
+      entries: [],
       form: {},
       rules: {
-        name: {required: true, message: "请输入模型名称"},
+        tableName: {required: true, message: "请选择主表模型"},
-        alias: {required: true, message: "请输入模型别名"},
       },
       diagram: null,
       drawer: false,
       current: {},
+      currentCols: [
+        {label: "属性", prop: "columnName"},
+        {label: "属性名", prop: "columnComment"},
+      ]
     }
   },
   computed: {
-    pageTitle: v => v.isEdit ? "编辑数据模型" : "新增数据模型",
+    isEdit: v => !!v.$route.tableName,
-    curProps: {
+    pageTitle: v => v.isEdit ? "编辑数据关联模型" : "新增数据关联模型",
-      get() {
-        return this.current.properties?.props || [];
-      },
-      set(props) {
-        this.current.properties = {...this.current.properties, props};
-      }
-    }
   },
   methods: {
     ...mapActions(['closePage']),
@@ -102,18 +84,20 @@ export default {
       this.$router.push({})
     },
     getDetail() {
-      const {id} = this.$route.query
+      const {tableName} = this.$route.query
-      id && this.instance.post("", null, {params: {id}}).then(res => {
+      tableName && this.instance.post("/relation/list", null, {params: {tableName}}).then(res => {
         if (res?.data) {
           this.form = res.data
         }
       })
     },
     submit() {
+      const jsonData = this.diagram.getGraphData()
+      this.form.relationNodes = jsonData.edges.map(e => e.properties)
       this.$refs.DataModelForm.validate()
-      .then(() => this.instance.post("", this.form))
+      .then(() => this.instance.post("/relation/setting", {...this.form, jsonData: JSON.stringify(jsonData)}))
       .then(res => {
-        if (res?.code == 0) {
+        if (res?.code == 200) {
           this.$message.success("提交成功")
           this.back()
         }
@@ -123,32 +107,96 @@ export default {
       this.diagram = new LogicFlow({
         container: this.$refs.DataModel,
         plugins: [ModelElement],
+        edgeType: 'bezier',
         animation: true,
         grid: true,
         keyboard: {
           enabled: true
         },
+        style: {
+          bezier: {
+            stroke: "#666",
+            strokeWidth: 1
+          }
+        }
       })
       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})
+          }
+        })
+      })
       this.diagram.render()
     },
     handleAddModel() {
       this.diagram.dnd.startDrag({type: "model"})
     },
     onNodeClick({data}) {
-      this.current = this.$copy({...data, properties: {props: [], ...data.properties}})
+      if (data.id != this.form.tableName) {
-      this.drawer = true
+        const {id: oldId, type} = data
+        this.current = this.$copy({props: [], ...data.properties, oldId, type})
+        this.drawer = true
+      }
     },
     handleSaveModel() {
-      let {id, name, properties} = this.current
+      let {id, oldId, props} = this.current
-      properties.name = name
+      props = props?.filter(e => !!e.prop) || []
-      properties.props = properties.props?.filter(e => !!e.prop) || []
+      this.diagram.changeNodeId(oldId, id)
-      this.diagram.setProperties(id, properties)
+      this.diagram.setProperties(id, this.current)
       this.drawer = false
+    },
+    initMainModel(v) {
+      this.diagram.clearData()
+      if (!!v?.id) {
+        this.getTableFields(v.id).then(list => {
+          this.diagram.addNode({
+            type: 'main',
+            x: 200,
+            y: 60,
+            id: v.id,
+            properties: {id: v.id, props: list}
+          })
+          this.diagram.focusOn({id: v.id})
+        })
+
+      }
+    },
+    changeModel(v) {
+      if (!!v?.id) {
+        this.current.name = v.id
+        this.getTableFields(v.id).then((list = []) => this.current.props = list)
+      }
+    },
+    getEntries() {
+      this.instance.get("/relation/table").then(res => {
+        if (res?.data) {
+          this.entries = res.data.map(e => ({...e, id: e.name, label: [e.entityName, e.des].filter(Boolean).join(" | ") || e.name}))
+        }
+      })
+    },
+    getTableFields(tableName) {
+      return this.instance.get(`/relation/fields`, {params: {tableName}}).then(res => {
+        if (res?.data) {
+          return res.data
+        }
+      })
     }
   },
   created() {
     this.getDetail()
+    this.getEntries()
   },
   mounted() {
     this.initLf()
@@ -194,21 +242,55 @@ export default {
     :deep(.modelElement) {
       border-radius: 4px;
       font-size: 12px;
-      border: 1px solid #333;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
       background-color: #fff;
+      overflow: hidden;
+      min-width: 200px;
 
       & > b {
         display: block;
         width: 100%;
         text-align: center;
-        line-height: 20px;
+        line-height: 28px;
         font-size: 14px;
-        border-bottom: 1px solid #333;
+        background-color: #f5f5f5;
+
+        &:before {
+          content: " ";
+          display: block;
+          width: 100%;
+          height: 4px;
+          background-color: #82b366;
+        }
+      }
+
+      &.main > b:before {
+        background-color: #26f;
       }
 
       .content {
         min-height: 40px;
-        line-height: 14px;
+        line-height: 20px;
+      }
+    }
+
+    :deep(.custom-anchor) {
+      stroke: #999;
+      stroke-width: 1;
+      fill: #d9d9d9;
+      cursor: crosshair;
+
+      &:hover {
+        fill: #26f;
+        stroke: #26f;
+      }
+
+      &.incomming-anchor {
+        stroke: #d79b00;
+      }
+
+      & .outgoing-anchor {
+        stroke: #82b366;
       }
     }
   }

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

@@ -28,7 +28,7 @@ import {confirm} from "dui/lib/js/decorator";
 
 export default {
   name: "dmList",
-  label: "数据模型",
+  label: "数据关联模型",
   props: {
     instance: Function,
     dict: Object
@@ -47,7 +47,7 @@ export default {
   },
   methods: {
     getTableData() {
-      this.instance.post("/node/aicode/list", null, {
+      this.instance.get("/relation/list", null, {
         params: {...this.page, ...this.search}
       }).then(res => {
         if (res?.data) {
@@ -61,7 +61,7 @@ export default {
     },
     @confirm("是否要删除该模型?")
     handleDelete(ids) {
-      this.instance.post("/node/aicode/delete", null, {
+      this.instance.post("/relation/remove", null, {
         params: {ids}
       }).then(res => {
         if (res?.code == 0) {
@@ -70,6 +70,9 @@ export default {
         }
       })
     }
+  },
+  created() {
+    this.getTableData()
   }
 }
 </script>

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

@@ -1,26 +1,103 @@
-import {HtmlNode, HtmlNodeModel} from '@logicflow/core'
+import {h, HtmlNode, HtmlNodeModel} from '@logicflow/core'
 
 class DataView extends HtmlNode {
+  getAnchorShape(anchorData) {
+    const {x, y, type} = anchorData;
+    return h("rect", {
+      x: x - 5,
+      y: y - 5,
+      width: 10,
+      height: 10,
+      className: `custom-anchor ${type === "left" ? "incomming-anchor" : "outgoing-anchor"}`
+    });
+  }
+
   setHtml(rootEl) {
-    super.setHtml(rootEl);
+    const {type, properties: {id = "实体对象", props = []}} = this.props.model
-    const {properties: {name = "实体对象", props = []}} = this.props.model
     const el = document.createElement('div');
-    el.className = 'modelElement';
+    el.className = type == 'main' ? 'modelElement main' : 'modelElement';
     el.innerHTML = `
-    <b class="mar-b8">${name}</b>
+    <b>${id}</b>
-    <div class="content pad-h8">
+    <div class="content pad-8">
-      <div> ${props.map(e => `<div><b>${e.prop}</b>  ${e.name}</div>`).join('')}</div>
+      ${props.map(e => `<div flex><b class="fill sherk">${e.columnName}</b><span class="mar-l8">${e.columnComment}</span></div>`).join('')}
     </div>`;
+    rootEl.setAttribute('class', "pad-8")
+    rootEl.style.boxSizing = 'border-box'
     rootEl.innerHTML = ''
     rootEl.appendChild(el);
-    this.props.model.height = el.offsetHeight
+    this.props.model.height = el.offsetHeight + 16
+    this.props.model.width = el.offsetWidth + 16
   }
 }
 
 class DataModel extends HtmlNodeModel {
+  getAnchorStyle(anchorInfo) {
+    const style = super.getAnchorStyle();
+    if (anchorInfo.type === "left") {
+      style.fill = "red";
+      style.hover.fill = "transparent";
+      style.hover.stroke = "transpanrent";
+      style.className = "lf-hide-default";
+    } else {
+      style.fill = "green";
+    }
+    return style;
+  }
+
+  getDefaultAnchor() {
+    const {
+      id,
+      x,
+      y,
+      width,
+      height,
+      properties: {props, isConnection}
+    } = 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}`,
+          edgeAddable: false,
+          type: "left"
+        });
+      }
+    });
+    return anchors;
+  }
+
   setAttributes() {
     this.text.editable = false
-    this.width = 160
+  }
+}
+
+class MainModel extends DataModel {
+  initNodeData(data) {
+    super.initNodeData(data);
+  }
+
+  getDefaultAnchor() {
+    const {
+      id,
+      x,
+      y,
+      width,
+      height,
+      properties: {props}
+    } = this;
+    const anchors = [];
+    props?.forEach((field, index) => {
+      anchors.push({
+        x: x + width / 2 - 6,
+        y: y - height / 2 + 58 + index * 20,
+        id: `${id}_${index}_right`,
+        type: "right",
+        field
+      });
+    });
+    return anchors;
   }
 }
 
@@ -30,5 +107,6 @@ export class ModelElement {
   constructor({lf}) {
     this.lf = lf
     lf.register({type: "model", model: DataModel, view: DataView})
+    lf.register({type: "main", model: MainModel, view: DataView})
   }
 }