数据模型提交

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

@@ -18,11 +18,44 @@
           </el-row>
         </ai-card>
         <ai-card title="设计模型" panel>
-          <el-form-item prop="model" label-width="0">
+          <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>
           </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-item label="实体名称">
+            <el-input v-model="current.name" clearable placeholder="实体对象名称"/>
+          </el-form-item>
+          <el-form-item>
+            <el-row type="flex" justify="space-between" slot="label">
+              <div v-text="`实体属性`"/>
+              <el-button type="text" size="small" @click="curProps.push({name:'',prop:''})">添加属性</el-button>
+            </el-row>
+            <ai-table :tableData="curProps" :colConfigs="[{slot:'prop'}, {slot:'name'}]" :is-show-pagination="false" tableSize="small">
+              <el-table-column slot="prop" label="属性名">
+                <template slot-scope="{row}">
+                  <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>
+          <el-button type="primary" @click="handleSaveModel">保存</el-button>
+        </div>
+      </el-drawer>
     </template>
     <template #footer>
       <el-button @click="back">返回</el-button>
@@ -35,6 +68,7 @@
 import {mapActions} from "vuex";
 import {LogicFlow} from "@logicflow/core"
 import "@logicflow/core/dist/style/index.css"
+import {ModelElement} from "./element";
 
 export default {
   name: "dmAdd",
@@ -45,11 +79,21 @@ export default {
         name: {required: true, message: "请输入模型名称"},
         alias: {required: true, message: "请输入模型别名"},
       },
-      diagram: null
+      diagram: null,
+      drawer: false,
+      current: {},
     }
   },
   computed: {
-    pageTitle: v => v.isEdit ? "编辑数据模型" : "新增数据模型"
+    pageTitle: v => v.isEdit ? "编辑数据模型" : "新增数据模型",
+    curProps: {
+      get() {
+        return this.current.properties?.props || [];
+      },
+      set(props) {
+        this.current.properties = {...this.current.properties, props};
+      }
+    }
   },
   methods: {
     ...mapActions(['closePage']),
@@ -78,10 +122,29 @@ export default {
     initLf() {
       this.diagram = new LogicFlow({
         container: this.$refs.DataModel,
+        plugins: [ModelElement],
         animation: true,
-        grid: true
+        grid: true,
+        keyboard: {
+          enabled: true
+        },
       })
+      this.diagram.on('node:click', this.onNodeClick)
       this.diagram.render()
+    },
+    handleAddModel() {
+      this.diagram.dnd.startDrag({type: "model"})
+    },
+    onNodeClick({data}) {
+      this.current = this.$copy({...data, properties: {props: [], ...data.properties}})
+      this.drawer = true
+    },
+    handleSaveModel() {
+      let {id, name, properties} = this.current
+      properties.name = name
+      properties.props = properties.props?.filter(e => !!e.prop) || []
+      this.diagram.setProperties(id, properties)
+      this.drawer = false
     }
   },
   created() {
@@ -98,5 +161,98 @@ export default {
   .dataModel {
     height: 400px;
   }
+
+  .diagram {
+    position: relative;
+
+    .dndPanel {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: #fff;
+      border: 1px solid #eee;
+
+      .iconfont {
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        cursor: pointer;
+        user-select: none;
+
+        &:before {
+          font-size: 40px;
+        }
+
+        &:hover {
+          color: #26f;
+        }
+      }
+
+    }
+
+    :deep(.modelElement) {
+      border-radius: 4px;
+      font-size: 12px;
+      border: 1px solid #333;
+      background-color: #fff;
+
+      & > b {
+        display: block;
+        width: 100%;
+        text-align: center;
+        line-height: 20px;
+        font-size: 14px;
+        border-bottom: 1px solid #333;
+      }
+
+      .content {
+        min-height: 40px;
+        line-height: 14px;
+      }
+    }
+  }
+
+  :deep(.el-drawer) {
+    .el-drawer__header {
+      padding: 16px;
+      border-bottom: 1px solid #ddd;
+      margin-bottom: 16px;
+    }
+
+    .el-drawer__body {
+      position: relative;
+
+      .footBar {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+      }
+
+      .el-form-item {
+        margin-bottom: 0;
+
+        .el-form-item__label {
+          width: 100%;
+          font-weight: bold;
+          color: #333;
+          padding-bottom: 0;
+        }
+      }
+    }
+  }
+
+  .footBar {
+    padding: 16px 20px;
+    box-sizing: border-box;
+    background: #F3F6F9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .el-button {
+      width: 92px !important;
+    }
+  }
 }
 </style>

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

@@ -0,0 +1,34 @@
+import {HtmlNode, HtmlNodeModel} from '@logicflow/core'
+
+class DataView extends HtmlNode {
+  setHtml(rootEl) {
+    super.setHtml(rootEl);
+    const {properties: {name = "实体对象", props = []}} = this.props.model
+    const el = document.createElement('div');
+    el.className = 'modelElement';
+    el.innerHTML = `
+    <b class="mar-b8">${name}</b>
+    <div class="content pad-h8">
+      <div> ${props.map(e => `<div><b>${e.prop}</b>  ${e.name}</div>`).join('')}</div>
+    </div>`;
+    rootEl.innerHTML = ''
+    rootEl.appendChild(el);
+    this.props.model.height = el.offsetHeight
+  }
+}
+
+class DataModel extends HtmlNodeModel {
+  setAttributes() {
+    this.text.editable = false
+    this.width = 160
+  }
+}
+
+export class ModelElement {
+  static pluginName = "modelElement";
+
+  constructor({lf}) {
+    this.lf = lf
+    lf.register({type: "model", model: DataModel, view: DataView})
+  }
+}