.

root/metadata/metaLink.html

@@ -27,6 +27,9 @@
     .tlist>li>a:hover {
         background-color: #92b0cb;
     }
+    th,td {
+        padding: 5px;
+    }
 </style>
 <row class="meta-link">
     <div class="info">
@@ -65,33 +68,139 @@
     </div>
 
     <div class="col-xs-8">
-        {{ tableAlias }}
+
+        <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>
-</row>
+
+
+    <!--<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} = meta
+    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
-                    console.log(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})
             }