305 lines
12 KiB
HTML
305 lines
12 KiB
HTML
<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="col-xs-2 sheet-cell">
|
||
<div style="padding-left: 10px;background-color: #ccc;width: 100%"> 实体表(Meta-Table)</div>
|
||
<ul class="nav nav-tabs nav-stacked tlist" style="height: 100%">
|
||
<li :class="[{'active': aliasA == item.alias}]" 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-10">
|
||
<div style="padding-left: 10px;background-color: #ccc;width: 100%"> 已关联的表 </div>
|
||
<!-- 关联表列表 -->
|
||
<button v-for="link in linkInfos" @click="aliasB=link.alias" :class="['btn', {'btn-primary' :aliasB==link.alias}]" style="margin: 5px">
|
||
<i class="icon icon-table"></i>
|
||
<span v-text="link.comment"></span>
|
||
</button>
|
||
|
||
<div class="pull-right" style="margin: 5px;">
|
||
<button @click="status=1" v-show="status==0 && aliasB" class="btn">修改关联关系</button>
|
||
<button @click="status=0" v-show="status==1" class="btn">取消修改</button>
|
||
<button @click="addLinkDia()" class="btn">+ 添加关联表</button>
|
||
<button @click="saveLink()" v-show="status==1" class="btn btn-primary" style="margin-left: 15px">保存</button>
|
||
</div>
|
||
<!--<div class="clearfix"></div>-->
|
||
<table v-show="linkInfos && linkInfos.length != 0" class="table-bordered" style="width: 100%;">
|
||
<tr>
|
||
<th v-text="tableInfo[aliasA] && tableInfo[aliasA]['comment']"></th>
|
||
<th v-text="tableInfo[aliasB] && tableInfo[aliasB]['comment']"></th>
|
||
<th v-show="status==1">操作</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, index) 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="aliasA + '.' +item.name + ' --- '+ item.label"></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 + ' --- '+ item.label">
|
||
</option>
|
||
</select>
|
||
</td>
|
||
<td style="text-align: center;">
|
||
<a @click="delLinkField(index)" href="javascript:;">删除</a>
|
||
</td>
|
||
</tr>
|
||
<tr v-show="status==1">
|
||
<td colspan="3" style="text-align: center"> <a @click="addLinkField()" href="javascript:;">+添加更多</a> </td>
|
||
</tr>
|
||
|
||
</table>
|
||
|
||
<div v-show="!linkInfos || linkInfos.length == 0" style="text-align: center">
|
||
<img src="../res/img/none.png">
|
||
<p>暂无关联表</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 选择关联表 -->
|
||
<div class="modal fade" id="choseTable">
|
||
<div class="modal-dialog modal-sm">
|
||
<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">
|
||
<select class="form-control" v-model="newLinkTable">
|
||
<option v-for="x in tables" :value="x" v-text="x.name + ' --- ' + x.comment" v-show="!isDisable(x)"></option>
|
||
</select>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<!--<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>-->
|
||
<button @click="addLink()" type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</row>
|
||
|
||
<script>
|
||
/**
|
||
* 1、加载所有表 tables
|
||
* 2、点击某一实体表后，展示表的关联列表
|
||
* 3、点击某一关联表后，展示关联信息
|
||
*
|
||
* 4、点击点击关联后选择，关联表和关联字段 保持建立关联信息
|
||
* 5、已经建立的关联，点击编辑后，进入关联字段编辑状态
|
||
*/
|
||
let {tableLinkList,linkList, linkInfoList, tableInfo, linkSave} = meta
|
||
let vm = new Vue({
|
||
el: ".meta-link",
|
||
data: {
|
||
status: 0,
|
||
tables: [], //所有的表数据{name,comment, alias, linkCount}
|
||
aliasA: '', //选中的主体表别名
|
||
tableInfo:{items:{}},
|
||
|
||
links: [], //
|
||
linkInfos: [],
|
||
linkInfo: {},
|
||
link2: [],
|
||
newLinkTable: {},
|
||
|
||
aliasB: '',
|
||
|
||
tableInfoA: {items:[]},
|
||
tableInfoB: {items:[]},
|
||
},
|
||
watch: {
|
||
aliasA(v) {
|
||
//red.setData('aliasA', v)
|
||
this.links = []
|
||
this.linkInfoA = {}
|
||
this.aliasB = '' // 如果不置空，存在变更主体表，但数据不刷新的异常
|
||
|
||
tableInfo({alias: v}).then(res => {
|
||
this.tableInfoA = res
|
||
linkList({alias: v}).then(res => {
|
||
this.links = res
|
||
})
|
||
linkInfoList({alias: v}).then(res => {
|
||
this.linkInfos = res
|
||
if (res && res.length > 0) {
|
||
this.aliasB = res[0]['alias']
|
||
}
|
||
})
|
||
})
|
||
},
|
||
aliasB(v) {
|
||
this.tableInfoB = {items:[]}
|
||
this.linkInfo = {}
|
||
this.link2 = []
|
||
|
||
if (!v) return
|
||
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})`
|
||
},
|
||
addLinkDia() {
|
||
this.newLinkTable = ""
|
||
$('#choseTable').modal()
|
||
},
|
||
addLink() {
|
||
if (!this.newLinkTable) {
|
||
return
|
||
}
|
||
|
||
// 设置当前选中展示的关联表为新增表
|
||
this.aliasB = this.newLinkTable.alias
|
||
|
||
// 给关联表列表中添加 新加的表
|
||
let linkInfos = this.linkInfos || []
|
||
linkInfos.push(this.newLinkTable)
|
||
this.linkInfos = linkInfos
|
||
this.status = 1
|
||
|
||
//打开弹出层
|
||
//选择一个 未选中的表
|
||
//改变 alias 的值，构建linkInfo
|
||
// 添加关联（同修改）
|
||
// 保存（同修改）
|
||
},
|
||
addLinkField() {
|
||
let link2 = this.link2
|
||
link2.push({f1: "", f2: ""})
|
||
this.link2 = link2
|
||
},
|
||
delLinkField(index) {
|
||
let link2 = []
|
||
for (let i in this.link2) {
|
||
if (i != index) {
|
||
link2.push(this.link2[i])
|
||
}
|
||
}
|
||
this.link2 = link2
|
||
},
|
||
saveLink() {
|
||
let link = {}
|
||
for(let i in this.link2) {
|
||
let item = this.link2[i]
|
||
if (item['f1'] && item['f2']) {
|
||
link[item['f1']] = item['f2']
|
||
}
|
||
}
|
||
if (link.size == 0) {
|
||
red.showError("请填写完整的关联字段信息")
|
||
return false
|
||
}
|
||
|
||
let linkInfo = this.linkInfo
|
||
|
||
if (!linkInfo['tables']) {
|
||
linkInfo['tables'] = [this.aliasA, this.aliasB]
|
||
}
|
||
linkInfo["link"] = link
|
||
linkSave({link: linkInfo}).then(res => {
|
||
red.showOk()
|
||
})
|
||
},
|
||
isDisable(table) { // 是否不可选择的关联表
|
||
for (let i in this.linkInfos) {
|
||
if (this.linkInfos[i].alias == table.alias) {
|
||
return true
|
||
}
|
||
}
|
||
|
||
return table.alias == this.aliasA
|
||
},
|
||
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> |