meta-kit/root/metadata/metaLink.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;
    }
    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="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>
        <button  class="btn btn-primary" style="margin-right: 15px">+ 添加关联表</button>

        <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-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>
        </table>
    </div>
</row>

<script>
    /**
     * 1、加载所有表 tables
     * 2、点击某一实体表后，展示表的关联列表
     * 3、点击某一关联表后，展示关联信息
     *
     * 4、点击点击关联后选择，关联表和关联字段 保持建立关联信息
     * 5、已经建立的关联，点击编辑后，进入关联字段编辑状态
     */
    let {tableLinkList,linkList, linkInfoList} = meta
    var vm = new Vue({
        el: ".meta-link",
        data: {
            tables: [], //所有的表数据{name,comment, alias, linkCount}
            aliasA: '', //选中的主体表别名
            tableInfo:{a:{}},

            links: [], //
            linkInfos: [],
            linkInfo: {},

            aliasB: ''

        },
        watch: {
            aliasA(v) {
                //tableInfo({alias: v}).then(res => this.tableInfo = res)
                linkList({alias: v}).then(res => {
                    this.links = res
                    this.aliasB = '' // 如果不置空，存在变更主体表，但数据不刷新的异常
                })
                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']
                })
            },
            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>