.

2019-04-11 23:04:13 +08:00
parent 6e7388ddf4
commit 14795814e3
24 changed files with 384 additions and 66 deletions
--- a/root/metadata/metatable/import.html
+++ b/root/metadata/metatable/import.html
@@ -56,17 +56,20 @@
    </div>

    <ul class="nav nav-tabs">
-        <li><a href="###" data-target="#tab2Content1" data-toggle="tab">从本地上传</a></li>
-        <li class="active"><a href="###" data-target="#tab2Content2" data-toggle="tab">从数据源导入</a></li>
-        <li><a href="###" data-target="#tab2Content3" data-toggle="tab">其他</a></li>
+        <li @click="cate = excel"><a href="###" data-target="#tab2Content1" data-toggle="tab">从本地上传</a></li>
+        <li @click="cate = mysql" class="active"><a href="###" data-target="#tab2Content2" data-toggle="tab">从数据源导入</a></li>
+        <li @click="cate = oth"><a href="###" data-target="#tab2Content3" data-toggle="tab">其他</a></li>
    </ul>
    <div class="tab-content">
+        <!-- 本地excel导入 -->
        <div class="tab-pane fade" id="tab2Content1">
            <div id="tableUploader" class="uploader">
                <!--<div class="uploader-message text-center">
                    <div class="content"></div>
                    <button type="button" class="close">×</button>
                </div>-->
+
+                <!-- 文件上传 -->
                <table class="table table-bordered">
                    <thead>
                    <tr>
@@ -109,6 +112,7 @@
                    </tfoot>
                </table>

+                <!-- excel sheets -->
                <div class="row" v-show="sheet">
                    <div class="col-xs-2 sheet-cell">
                        <div style="padding-left: 10px;background-color: #ccc;width: 100%"> Excel-Sheet</div>
@@ -176,8 +180,9 @@
                </div>
            </div>
        </div>
-        <div class="tab-pane fade active in" id="tab2Content2">

+        <!-- 从数据源导入 -->
+        <div class="tab-pane fade active in" id="tab2Content2">
            <div class="form-group">
                <label class="col-md-1 col-sm-1" style="padding-bottom: 10px;padding-top: 5px;">数据源选择</label>
                <div class="col-md-2 col-sm-10" style="padding-bottom: 10px">
@@ -187,36 +192,91 @@
                </div>
                <div class="col-md-2 col-sm-10" style="padding-bottom: 10px">
                    <select class="form-control" v-model="catalog">
-                        <option v-for="item in catalogs" :value="item" v-text="item"></option>
+                        <option v-for="item in dbPlat['catalogs']" :value="item" v-text="item"></option>
                    </select>
                </div>
            </div>

            <div class="clearfix"></div>
+            <div class="row" v-show="tableName">
+                <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="checkbox-inline clearfix" v-for="item in tableArr" >
+                            <input type="checkbox"
+                                   v-model="ckTable"
+                                   :value="tableData[item]['name']"
+                                   :disabled="item=='表说明' || item=='表名称' || tableData[item]['hv']==1"
+                            >
+                            <a :class="[{hv: tableData[item]['hv']==1 }]" href="javascript:;" @click="tableName=item" data-target="#tab3Content1" data-toggle="tab" v-text="item"></a>
+                        </li>
+                    </ul>
+                    <p v-show="ckTable && ckTable.length">已选择 <code v-text="ckTable.length||0"></code> 个实体待导入</p>
+                </div>
+                <div class="col-xs-8">
+                    <div style="padding-left: 10px;background-color: #ccc;width: 100%"> Table-Detail</div>
+                    <div class="tab-content col-xs-9">
+                        <div class="tab-pane fade active in">
+                            <table class="table-bordered" style="width: 100%">
+                                <caption class="" v-show="tableName && (sheet!='表说明' || sheet!='表名称')">
+                                    表名称： <span v-text="tableInfo.name"></span>，中文名：<span v-text="tableInfo.comment"></span>
+                                </caption>
+                                <thead>
+                                <tr style="background-color: #f1f1f1">
+                                    <th>字段名</th>
+                                    <th>中文名</th>
+                                    <th>数据类型</th>
+                                    <!--<th>输入类型</th>
+                                    <th>附加属性</th>
+                                    <th>备注</th>-->
+                                </tr>
+                                </thead>
+                                <tbody>
+                                <tr v-for="item in tableInfo.items">
+                                    <td v-text="item.name"></td>
+                                    <td v-text="item.label"></td>
+                                    <td v-text="item.type"></td>
+                                    <!--<td v-text="item.inType"></td>
+                                    <td v-text="item.inExt"></td>
+                                    <td v-text="item.remark"></td>-->
+                                </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>

-            <!--<p>1、选择数据源</p>
-            <p>2、选择查询到的数据源实体</p>
-            <p>3、导入选中的实体</p>-->
        </div>
+
+        <!-- 其他导入 -->
        <div class="tab-pane fade" id="tab2Content3">
            <p>其他一些定制的特殊格式的 实体数据形式</p>
        </div>
    </div>

-    <div class="modal-footer">
+    <div class="modal-footer" v-show="cate=='excel'">
        <button @click="ck=[]" type="button" class="btn btn-default" data-dismiss="modal">取消选择</button>
        <button @click="back()" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button @click="saveSheet()" type="button" class="btn btn-primary">确定</button>
    </div>
+    <div class="modal-footer" v-show="cate=='mysql'">
+        <button @click="ckTable=[]" type="button" class="btn btn-default" data-dismiss="modal">取消选择</button>
+        <button @click="back()" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
+        <button @click="saveTable()" type="button" class="btn btn-primary">确定</button>
+    </div>
 </div>

 <script>
    let {dbList} = plat
    let {catalogList, tableList, tableInfo} = db
+    let {sheetMySql, saveTable} = table

    var vm = new Vue({
        el: ".importDev",
        data: {
+            cate: 'mysql',
+
            filePath: '',
            importStatus: false,
            sheetData: {}, // 所有的完整数据 {name1: {}}
@@ -228,23 +288,14 @@
            // 从数据源导入实体
            dbPlats: red.getData('dbPlats'),
            catalogs: [],
-            dbPlat: {},
-            dbPlatId: '',
+            tableData: {},
+            tableArr:[],
+            dbPlat: red.getData("dbPlat",{}),
+            dbPlatId: red.getData("dbPlatId",''),
            catalog: '',
-            table: '',
+            tableName: '',
+            ckTable: [],
            tableInfo: {},
-
-            cache: {
-                local: {
-                    sheetData: {},
-                    sheetArr: [],
-                    sheet: '',
-                    ck: [],
-                    metaTable: {items: []},
-                },
-                dbPlat: {}
-            },
-
        },
        watch: {
            sheetData: function (v) { // 查询sheet列表数据
@@ -278,9 +329,14 @@
            },
            catalog() {
                this.loadTables();
+
+                //cache
+                red.setData("dbPlat", this.dbPlat)
+                red.setData("dbPlatId", this.dbPlatId)
+                red.setData("catalog", this.catalog)
            },
-            table() {
-                this.loadTableData();
+            tableName() {
+                this.loadTableInfo();
            }
        },
        methods: {
@@ -305,13 +361,6 @@

                })
            },
-            saveSheet: function () {
-                if (!this.ck || this.ck.length == 0) {
-                    red.showMsg({msg: "请选择导入数据", type:"danger", placement: "top"});
-                    return false;
-                }
-                red.post("/file/import_metatable", {sheetArr: JSON.stringify(this.ck), filePath: this.filePath});
-            },
            getSheetName: function (tableName) {
                for(k in this.sheetData) {
                    if (this.sheetData[k]['field'] == tableName) {
@@ -326,19 +375,57 @@
            showInfo() {
                $('#f-info').modal({moveable: true})
            },
-
+            saveSheet: function () {
+                if (!this.ck || this.ck.length == 0) {
+                    red.showMsg({msg: "请选择导入数据", type:"danger", placement: "top"});
+                    return false;
+                }
+                red.post("/file/import_metatable", {sheetArr: JSON.stringify(this.ck), filePath: this.filePath});
+            },
            //------从mysql导入使用的相关方法-------
            loadTables() { // 查询table列表
-
+                sheetMySql({dbPlatId: this.dbPlatId, catalogs: [this.catalog]}).then(res => { // 数据转换
+                    this.tableData = res
+                    let tableArr = []
+                    let ckTable = []
+                    for (k in res) {
+                        tableArr.push(k)
+                        if (res[k]['hv'] != 1) {
+                            ckTable.push(k)
+                        }
+                    }
+                    this.tableArr = tableArr
+                    this.ckTable = ckTable
+                    if(tableArr.length > 0) {
+                        this.tableName = tableArr[0];
+                    }
+                })
            },
-            loadTableData() { // 查询表信息
+            loadTableInfo() { // 查询表信息
+                this.tableInfo = this.tableData[this.tableName]

+                if (!this.tableInfo['load']) {
+                    tableInfo({dbPlatId: this.dbPlatId, catalog: this.catalog, tableName: this.tableName}).then(res => {
+                        res['hv'] = this.tableData[this.tableName]['hv']
+                        res['load'] = 1
+
+                        this.tableInfo = res
+                        this.tableData[this.tableName] = res
+                    })
+                }
            },
            saveTable() { // 保存数据
+                let [dbPlatId, catalog, tableArr] = [this.dbPlatId, this.catalog, this.ckTable]

+                saveTable({dbPlatId, catalog, tableArr}).then(res => {
+                    red.showOk()
+                    this.loadTables()
+                })
            }
        },
        mounted: function () {
+            setTimeout(() => this.catalog =  red.getData("catalog",''), 100)
+
            // 初始化文件上传组件
            $('#tableUploader').uploader({
                url: '/upload/x',
@@ -356,7 +443,13 @@
                }
            });

-            dbList().then(res => this.dbPlats = res.rows)
+            dbList().then(res => {
+                this.dbPlats = res.rows
+                /*setTimeout(() => {
+                    this.dbPlat = res.rows[3]
+                    this.tableName = 'db_redbbs'
+                }, 1000)*/
+            })


            var h = document.documentElement.clientHeight || document.body.clientHeight;