.
This commit is contained in:
@@ -48,16 +48,18 @@ const meta = {
|
||||
callback(json)
|
||||
})
|
||||
},
|
||||
tableLinkList() {
|
||||
tableLinkList() { // metaLink 管理的表列表使用
|
||||
return red.postX('/meta/table_link_list')
|
||||
},
|
||||
linkSave({link}) {
|
||||
linkSave({link}) { //
|
||||
return red.postX('/meta/link_save', {link: JSON.stringify(link)})
|
||||
},
|
||||
linkInfo({alias}) {
|
||||
return red.postX('/meta/link_info', {alias})
|
||||
linkList({alias}) {
|
||||
return red.postX('/meta/link_list', {alias})
|
||||
},
|
||||
linkInfoList({alias}) {
|
||||
return red.postX('/meta/link_info_list', {alias})
|
||||
},
|
||||
|
||||
tableInfo({name, alias}) {
|
||||
return red.postX('/meta/tableinfo', {name, alias})
|
||||
}
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
<style>
|
||||
.meta-link {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.checkbox-inline:first-child{
|
||||
left: 10px;
|
||||
margin-right: 10px!important;
|
||||
@@ -61,146 +58,95 @@
|
||||
<div style="padding-left: 10px;background-color: #ccc;width: 100%"> DB-Table</div>
|
||||
<ul class="nav nav-tabs nav-stacked tlist" style="height: 100%">
|
||||
<li class="clearfix" v-for="item in tables" >
|
||||
<a href="javascript:;" @click="tableAlias=item.alias" data-target="#tab3Content1" data-toggle="tab" v-text="tableItem(item)"></a>
|
||||
<a href="javascript:;" @click="aliasA=item.alias" data-target="#tab3Content1" data-toggle="tab" v-text="dealTableLabel(item)"></a>
|
||||
</li>
|
||||
</ul>
|
||||
<!--<p v-show="ckTable && ckTable.length">已选择 <code v-text="ckTable.length||0"></code> 个实体待导入</p>-->
|
||||
</div>
|
||||
|
||||
<div class="col-xs-8">
|
||||
|
||||
<button @click="aliasB=link.alias" :class="['btn', {'primary' :aliasB==link.alias}]" v-for="link in linkInfo" v-text="link.comment" style="margin-right: 5px"> </button>
|
||||
|
||||
<button v-for="link in linkInfos" @click="aliasB=link.alias" :class="['btn', {'primary' :aliasB==link.alias}]" v-text="link.comment" style="margin-right: 5px"> </button>
|
||||
<button class="btn btn-primary" style="margin-right: 15px">+ 添加关联表</button>
|
||||
|
||||
<table class="table-bordered" style="width: 100%; margin-top: 10px">
|
||||
<tr>
|
||||
<th width="120px">关联的表</th>
|
||||
<th colspan="2">关联字段</th>
|
||||
<th v-text="tableInfo[aliasA] && tableInfo[aliasA]['comment']"></th>
|
||||
<th v-text="tableInfo[aliasB] && tableInfo[aliasB]['comment']"></th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
|
||||
|
||||
<tbody v-html="buildTable(linkInfo)">
|
||||
|
||||
</tbody>
|
||||
|
||||
<!--<tr v-for="item in linkInfo">
|
||||
<td rowspan="2" v-text="xx"></td>
|
||||
|
||||
<td>deptId</td>
|
||||
<td>id</td>
|
||||
<td rowspan="2">修改</td>
|
||||
<tr v-for="(k, v) in linkInfo.link">
|
||||
<td v-text="k.startsWith(aliasA + '\.') ? k : v"></td>
|
||||
<td v-text="v.startsWith(aliasB + '\.') ? v : k"></td>
|
||||
<td>修改</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>deptId</td>
|
||||
<td>id</td>
|
||||
</tr>-->
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!--<div class="modal fade" id="edit">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
|
||||
<h4 class="modal-title">功能概览</h4>
|
||||
</div>
|
||||
<div class="modal-body" style="text-align: center">
|
||||
<table class="table-bordered" style="width: 100%">
|
||||
<tr>
|
||||
<th v-text="tableA.comment"></th>
|
||||
<th v-text="tableB.comment"></th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
<tr v-for="key in linkInfo.link">
|
||||
<td>
|
||||
<span v-text="key"></span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-text="linkInfo.link[key]"></span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</row>
|
||||
</row>
|
||||
|
||||
<script>
|
||||
let {tableLinkList, linkSave, linkInfo, tableInfo} = meta
|
||||
/**
|
||||
* 1、加载所有表 tables
|
||||
* 2、点击某一实体表后，展示表的关联列表
|
||||
* 3、点击某一关联表后，展示关联信息
|
||||
*
|
||||
* 4、点击点击关联后选择，关联表和关联字段 保持建立关联信息
|
||||
* 5、已经建立的关联，点击编辑后，进入关联字段编辑状态
|
||||
*/
|
||||
let {tableLinkList,linkList, linkInfoList} = meta
|
||||
var vm = new Vue({
|
||||
el: ".meta-link",
|
||||
data: {
|
||||
tables: [],
|
||||
tableName: '',
|
||||
tableAlias: '',
|
||||
aliasB: '',
|
||||
tableA: {},
|
||||
tableB: {},
|
||||
tables: [], //所有的表数据{name,comment, alias, linkCount}
|
||||
aliasA: '', //选中的主体表别名
|
||||
tableInfo:{a:{}},
|
||||
|
||||
links: [], //
|
||||
linkInfos: [],
|
||||
linkInfo: {},
|
||||
link: {},
|
||||
|
||||
aliasB: ''
|
||||
|
||||
},
|
||||
watch: {
|
||||
tableAlias(v) {
|
||||
let alias = v
|
||||
linkInfo({alias}).then(res => {
|
||||
this.linkInfo = res
|
||||
aliasA(v) {
|
||||
//tableInfo({alias: v}).then(res => this.tableInfo = res)
|
||||
linkList({alias: v}).then(res => {
|
||||
this.links = res
|
||||
this.aliasB = '' // 如果不置空，存在变更主体表，但数据不刷新的异常
|
||||
})
|
||||
tableInfo({alias}).then(res => this.tableA = res)
|
||||
linkInfoList({alias: v}).then(res => {
|
||||
this.linkInfos = res
|
||||
this.aliasB = res[0]['alias']
|
||||
})
|
||||
},
|
||||
aliasB(v) {
|
||||
let linkInfo = {}
|
||||
for (let i in this.links) { // 数据转换
|
||||
if (this.links[i]['tables'][0] == v || this.links[i]['tables'][1] == v) {
|
||||
linkInfo = this.links[i]
|
||||
}
|
||||
}
|
||||
this.linkInfo = linkInfo
|
||||
},
|
||||
linkInfo(v) {
|
||||
console.log(v)
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
loadLinkList() {
|
||||
tableLinkList().then(res => {
|
||||
this.tables = res
|
||||
let tableInfo = {}
|
||||
for (let i in res) {
|
||||
tableInfo[res[i]['alias']] = res[i]
|
||||
}
|
||||
this.tableInfo = tableInfo
|
||||
this.aliasA = res[0]['alias']
|
||||
})
|
||||
},
|
||||
tableItem(table) {
|
||||
dealTableLabel(table) {
|
||||
return `${table.name} [${table.comment}] (${table.linkCount})`
|
||||
},
|
||||
buildTable(linkInfo) {
|
||||
let html = ''
|
||||
|
||||
for (let i = 0; i < linkInfo.length; i++) {
|
||||
let link = linkInfo[i].link
|
||||
|
||||
html += `<tr>`
|
||||
html += `<td rowspan='${linkInfo[i].linkSize}'>${linkInfo[i].name} [${linkInfo[i].comment}]</td>`
|
||||
for (let k in link) {
|
||||
html += `<td>${k}</td><td>${link[k]}</td>`
|
||||
break
|
||||
}
|
||||
|
||||
html += `<td rowspan='${linkInfo[i].linkSize}'><a href="javascript:vm.edit('${linkInfo[i]['alias']}');">修改</a></td>`
|
||||
html += '</tr>'
|
||||
|
||||
let t = 0
|
||||
for (let k in link) {
|
||||
if (++t == 1) continue
|
||||
html += '<tr>'
|
||||
html += `<td>${k}</td><td>${link[k]}</td>`
|
||||
html += '</tr>'
|
||||
}
|
||||
}
|
||||
return html
|
||||
},
|
||||
edit(alias) {
|
||||
this.linkAlias = alias
|
||||
|
||||
// 查询关联表的信息
|
||||
tableInfo({alias}).then(res => {
|
||||
this.tableB = res
|
||||
$('#edit').modal()
|
||||
})
|
||||
},
|
||||
showInfo() {
|
||||
$('#f-info').modal({moveable: true})
|
||||
}
|
||||
@@ -208,10 +154,10 @@
|
||||
mounted: function () {
|
||||
this.loadLinkList()
|
||||
|
||||
/*
|
||||
/* var m = {"a.field": "lxyer", "a.`age`": 11}
|
||||
|
||||
var m = {"a.field": "lxyer", "a.`age`": 11}
|
||||
console.log(m["a.field"])
|
||||
|
||||
console.log("---------")
|
||||
for (var k in m) {
|
||||
console.log(k)
|
||||
|
||||
221
root/metadata/tmp.html
Normal file
221
root/metadata/tmp.html
Normal file
@@ -0,0 +1,221 @@
|
||||
<style>
|
||||
.meta-link {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.checkbox-inline:first-child{
|
||||
left: 10px;
|
||||
margin-right: 10px!important;
|
||||
}
|
||||
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
|
||||
margin-top: 12px;
|
||||
}
|
||||
.hv {
|
||||
color: #ea644a!important;
|
||||
}
|
||||
.hv:focus,.hv:hover {
|
||||
color: #8b8a15!important;
|
||||
}
|
||||
.active>.hv{
|
||||
color: #8b8a15!important;
|
||||
}
|
||||
.tlist{
|
||||
height:100%; overflow: auto;
|
||||
}
|
||||
.tlist>li.active>a,
|
||||
.tlist>li.active>a:focus,
|
||||
.tlist>li.active>a:hover,
|
||||
.tlist>li>a:hover {
|
||||
background-color: #92b0cb;
|
||||
}
|
||||
th,td {
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
<row class="meta-link">
|
||||
<div class="info">
|
||||
<a @click="showInfo()" href="javascript:;"><i class="icon icon-info"></i></a>
|
||||
</div>
|
||||
<!-- info -->
|
||||
<div class="modal fade" id="f-info">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
|
||||
<h4 class="modal-title">功能概览</h4>
|
||||
</div>
|
||||
<div class="modal-body" style="text-align: center">
|
||||
<p> 数据结构：<br>
|
||||
系统中每个业务实体表都有唯一别名如：用户表-a,部门表-b,角色表-c，
|
||||
</p>
|
||||
<img src="../res/img/meta_link.png">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clearfix" style="padding-top: 5px"></div>
|
||||
<div class="col-xs-2 sheet-cell">
|
||||
<div style="padding-left: 10px;background-color: #ccc;width: 100%"> DB-Table</div>
|
||||
<ul class="nav nav-tabs nav-stacked tlist" style="height: 100%">
|
||||
<li class="clearfix" v-for="item in tables" >
|
||||
<a href="javascript:;" @click="tableAlias=item.alias" data-target="#tab3Content1" data-toggle="tab" v-text="tableItem(item)"></a>
|
||||
</li>
|
||||
</ul>
|
||||
<!--<p v-show="ckTable && ckTable.length">已选择 <code v-text="ckTable.length||0"></code> 个实体待导入</p>-->
|
||||
</div>
|
||||
|
||||
<div class="col-xs-8">
|
||||
|
||||
<button @click="aliasB=link.alias" :class="['btn', {'primary' :aliasB==link.alias}]" v-for="link in linkInfo" v-text="link.comment" style="margin-right: 5px"> </button>
|
||||
|
||||
|
||||
<table class="table-bordered" style="width: 100%; margin-top: 10px">
|
||||
<tr>
|
||||
<th width="120px">关联的表</th>
|
||||
<th colspan="2">关联字段</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
|
||||
|
||||
<tbody v-html="buildTable(linkInfo)">
|
||||
|
||||
</tbody>
|
||||
|
||||
<!--<tr v-for="item in linkInfo">
|
||||
<td rowspan="2" v-text="xx"></td>
|
||||
|
||||
<td>deptId</td>
|
||||
<td>id</td>
|
||||
<td rowspan="2">修改</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>deptId</td>
|
||||
<td>id</td>
|
||||
</tr>-->
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!--<div class="modal fade" id="edit">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
|
||||
<h4 class="modal-title">功能概览</h4>
|
||||
</div>
|
||||
<div class="modal-body" style="text-align: center">
|
||||
<table class="table-bordered" style="width: 100%">
|
||||
<tr>
|
||||
<th v-text="tableA.comment"></th>
|
||||
<th v-text="tableB.comment"></th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
<tr v-for="key in linkInfo.link">
|
||||
<td>
|
||||
<span v-text="key"></span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-text="linkInfo.link[key]"></span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</row>
|
||||
|
||||
<script>
|
||||
let {tableLinkList, linkSave, linkInfo, tableInfo} = meta
|
||||
var vm = new Vue({
|
||||
el: ".meta-link",
|
||||
data: {
|
||||
tables: [],
|
||||
tableName: '',
|
||||
tableAlias: '',
|
||||
aliasB: '',
|
||||
tableA: {},
|
||||
tableB: {},
|
||||
linkInfo: {},
|
||||
link: {},
|
||||
|
||||
},
|
||||
watch: {
|
||||
tableAlias(v) {
|
||||
let alias = v
|
||||
linkInfo({alias}).then(res => {
|
||||
this.linkInfo = res
|
||||
})
|
||||
tableInfo({alias}).then(res => this.tableA = res)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadLinkList() {
|
||||
tableLinkList().then(res => {
|
||||
this.tables = res
|
||||
})
|
||||
},
|
||||
tableItem(table) {
|
||||
return `${table.name} [${table.comment}] (${table.linkCount})`
|
||||
},
|
||||
buildTable(linkInfo) {
|
||||
let html = ''
|
||||
|
||||
for (let i = 0; i < linkInfo.length; i++) {
|
||||
let link = linkInfo[i].link
|
||||
|
||||
html += `<tr>`
|
||||
html += `<td rowspan='${linkInfo[i].linkSize}'>${linkInfo[i].name} [${linkInfo[i].comment}]</td>`
|
||||
for (let k in link) {
|
||||
html += `<td>${k}</td><td>${link[k]}</td>`
|
||||
break
|
||||
}
|
||||
|
||||
html += `<td rowspan='${linkInfo[i].linkSize}'><a href="javascript:vm.edit('${linkInfo[i]['alias']}');">修改</a></td>`
|
||||
html += '</tr>'
|
||||
|
||||
let t = 0
|
||||
for (let k in link) {
|
||||
if (++t == 1) continue
|
||||
html += '<tr>'
|
||||
html += `<td>${k}</td><td>${link[k]}</td>`
|
||||
html += '</tr>'
|
||||
}
|
||||
}
|
||||
return html
|
||||
},
|
||||
edit(alias) {
|
||||
this.linkAlias = alias
|
||||
|
||||
// 查询关联表的信息
|
||||
tableInfo({alias}).then(res => {
|
||||
this.tableB = res
|
||||
$('#edit').modal()
|
||||
})
|
||||
},
|
||||
showInfo() {
|
||||
$('#f-info').modal({moveable: true})
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
this.loadLinkList()
|
||||
|
||||
/*
|
||||
|
||||
var m = {"a.field": "lxyer", "a.`age`": 11}
|
||||
console.log(m["a.field"])
|
||||
console.log("---------")
|
||||
for (var k in m) {
|
||||
console.log(k)
|
||||
}*/
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user