103 lines
2.6 KiB
Vue
103 lines
2.6 KiB
Vue
<template>
|
|
<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 {
|
|
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()
|
|
}
|
|
},
|
|
created() {
|
|
this.getDetail()
|
|
},
|
|
mounted() {
|
|
this.initLf()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dmAdd {
|
|
.dataModel {
|
|
height: 400px;
|
|
}
|
|
}
|
|
</style>
|