221 lines
8.1 KiB
HTML
221 lines
8.1 KiB
HTML
<style>
|
||
.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;
|
||
}
|
||
</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="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 v-for="link in linkInfos" @click="aliasB=link.alias" :class="['btn', {'primary' :aliasB==link.alias}]" v-text="link.comment" style="margin-right: 5px"> </button>
|
||
|
||
<div class="pull-right">
|
||
<button @click="status=1" class="btn">修改关联关系</button>
|
||
<button class="btn">+ 添加关联表</button>
|
||
<button class="btn btn-primary" style="margin-right: 15px">保存</button>
|
||
</div>
|
||
<div class="clearfix"></div>
|
||
|
||
<table class="table-bordered" style="width: 100%; margin-top: 10px">
|
||
<tr>
|
||
<th v-text="tableInfo[aliasA] && tableInfo[aliasA]['comment']"></th>
|
||
<th v-text="tableInfo[aliasB] && tableInfo[aliasB]['comment']"></th>
|
||
<th>操作</th>
|
||
</tr>
|
||
|
||
<tr v-show="status==0" 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>
|
||
</tr>
|
||
|
||
<tr v-show="status==1" v-for="linkItem in link2">
|
||
<td>
|
||
<select class="form-control" v-model="linkItem.f1">
|
||
<option></option>
|
||
<option v-for="item in tableInfoA.items"
|
||
:value="aliasA + '.' +item.name" v-text="item.name"></option>
|
||
</select>
|
||
</td>
|
||
<td>
|
||
<select class="form-control" v-model="linkItem.f2">
|
||
<option></option>
|
||
<option v-for="item in tableInfoB.items"
|
||
|
||
:value="aliasB + '.' +item.name" v-text="aliasB + '.' +item.name">
|
||
</option>
|
||
</select>
|
||
</td>
|
||
<td style="text-align: center;">
|
||
<a href="javascript:;">删除</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="3" style="text-align: center"> <a href="javascript:;">+添加更多</a> </td>
|
||
</tr>
|
||
|
||
</table>
|
||
</div>
|
||
</row>
|
||
|
||
<script>
|
||
/**
|
||
* 1、加载所有表 tables
|
||
* 2、点击某一实体表后，展示表的关联列表
|
||
* 3、点击某一关联表后，展示关联信息
|
||
*
|
||
* 4、点击点击关联后选择，关联表和关联字段 保持建立关联信息
|
||
* 5、已经建立的关联，点击编辑后，进入关联字段编辑状态
|
||
*/
|
||
let {tableLinkList,linkList, linkInfoList, tableInfo} = meta
|
||
let vm = new Vue({
|
||
el: ".meta-link",
|
||
data: {
|
||
status: 1,
|
||
tables: [], //所有的表数据{name,comment, alias, linkCount}
|
||
aliasA: '', //选中的主体表别名
|
||
tableInfo:{a:{}},
|
||
|
||
links: [], //
|
||
linkInfos: [],
|
||
linkInfo: {},
|
||
link2: [],
|
||
|
||
aliasB: '',
|
||
|
||
tableInfoA: {},
|
||
tableInfoB: {},
|
||
},
|
||
watch: {
|
||
aliasA(v) {
|
||
tableInfo({alias: v}).then(res => this.tableInfoA = res)
|
||
linkList({alias: v}).then(res => {
|
||
this.links = res
|
||
this.aliasB = '' // 如果不置空，存在变更主体表，但数据不刷新的异常
|
||
})
|
||
linkInfoList({alias: v}).then(res => {
|
||
this.linkInfos = res
|
||
if (res && res.length > 0) {
|
||
this.aliasB = res[0]['alias']
|
||
}
|
||
})
|
||
},
|
||
aliasB(v) {
|
||
tableInfo({alias: v}).then(res => {
|
||
this.tableInfoB = res
|
||
|
||
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]
|
||
let link = {}
|
||
let link2 = [] // [{f1:"", f2:""}]
|
||
for(k in linkInfo["link"]) {
|
||
let [_k, _v] = [k, linkInfo["link"][k]]
|
||
if (k.startsWith(this.aliasA + '.')) {
|
||
link[_k] = _v
|
||
link2.push({f1: _k, f2: _v})
|
||
} else {
|
||
link[_v] = _k
|
||
link2.push({f1: _v, f2: _k})
|
||
}
|
||
}
|
||
linkInfo['link'] = link
|
||
this.link2 = link2
|
||
}
|
||
}
|
||
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']
|
||
})
|
||
},
|
||
dealTableLabel(table) {
|
||
return `${table.name} [${table.comment}] (${table.linkCount})`
|
||
},
|
||
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> |