先提交一波

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

@@ -1,22 +1,102 @@
 <template>
-  <section class="dmAdd">
-
-  </section>
+  <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">
+        <ai-card title="基本信息">
+          <el-row type="flex">
+            <div class="fill">
+              <el-form-item label="模型名称" prop="name">
+                <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">
+            <div ref="DataModel" class="dataModel"/>
+          </el-form-item>
+        </ai-card>
+      </el-form>
+    </template>
+    <template #footer>
+      <el-button @click="back">返回</el-button>
+      <el-button type="primary" @click="submit">提交</el-button>
+    </template>
+  </ai-detail>
 </template>
 
 <script>
+import {mapActions} from "vuex";
+import {LogicFlow} from "@logicflow/core"
+import "@logicflow/core/dist/style/index.css"
+
 export default {
   name: "dmAdd",
   data() {
-    return {}
+    return {
+      form: {},
+      rules: {
+        name: {required: true, message: "请输入模型名称"},
+        alias: {required: true, message: "请输入模型别名"},
+      },
+      diagram: null
+    }
+  },
+  computed: {
+    pageTitle: v => v.isEdit ? "编辑数据模型" : "新增数据模型"
+  },
+  methods: {
+    ...mapActions(['closePage']),
+    back() {
+      this.closePage()
+      this.$router.push({})
+    },
+    getDetail() {
+      const {id} = this.$route.query
+      id && this.instance.post("", null, {params: {id}}).then(res => {
+        if (res?.data) {
+          this.form = res.data
+        }
+      })
+    },
+    submit() {
+      this.$refs.DataModelForm.validate()
+      .then(() => this.instance.post("", this.form))
+      .then(res => {
+        if (res?.code == 0) {
+          this.$message.success("提交成功")
+          this.back()
+        }
+      })
+    },
+    initLf() {
+      this.diagram = new LogicFlow({
+        container: this.$refs.DataModel,
+        animation: true,
+        grid: true
+      })
+      this.diagram.render()
+    }
   },
-  methods: {},
   created() {
+    this.getDetail()
+  },
+  mounted() {
+    this.initLf()
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .dmAdd {
+  .dataModel {
+    height: 400px;
+  }
 }
 </style>

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

@@ -4,7 +4,7 @@
     <template #content>
       <ai-search-bar>
         <template #left>
-          <el-button type="primary" icon="iconfont iconAdd" @click="handleAdd">添加</el-button>
+          <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()"/>
@@ -70,8 +70,6 @@ export default {
         }
       })
     }
-  },
-  created() {
   }
 }
 </script>