meta-kit/root/metadata/metatable/import.html

<style>
    .importDev {
        padding-top: 5px;
    }
    .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>
<!-- 对话框HTML -->
<div class="importDev">
    <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">
                    <p>
                        本地导入、从数据源导入流程相似，都是： 介质中读取可用业务实体 => 选择要导入的实体 => 保存实体到元数据MetaTable
                    </p>
                    <img src="../res/img/table_import_flow.png">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <ul class="nav nav-tabs">
        <li class="active"><a href="###" data-target="#tab2Content1" data-toggle="tab">从本地上传</a></li>
        <li><a href="###" data-target="#tab2Content2" data-toggle="tab">从数据源导入</a></li>
        <li><a href="###" data-target="#tab2Content3" data-toggle="tab">其他</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade active in" 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>
                        <th colspan="3">选择上传文件</th>
                        <!--<th style="width: 100px">大小</th>
                        <th style="width: 160px; text-align: center;">状态/操作</th>-->
                    </tr>
                    </thead>
                    <tbody class="uploader-files">
                    <tr class="file template">
                        <td style="width: 38px; padding: 3px"><div class="file-icon"></div></td>
                        <td style="padding: 0">
                            <div style="position: relative; padding: 8px;">
                                <strong class="file-field"></strong>
                                <div class="file-progress-bar"></div>
                            </div>
                        </td>
                        <td><span class="file-size text-muted"></span></td>
                        <!--<td class="actions text-right" style="padding: 0 4px;">
                            <div class="file-status" data-toggle="tooltip" style="margin: 8px;"><i class="icon"></i> <span class="text"></span></div>
                            <a data-toggle="tooltip" class="btn btn-link btn-download-file" target="_blank"><i class="icon icon-download-alt"></i></a>
                            <button type="button" data-toggle="tooltip" class="btn btn-link btn-reset-file" title="Repeat"><i class="icon icon-repeat"></i></button>
                            <button type="button" data-toggle="tooltip" class="btn btn-link btn-rename-file" title="Rename"><i class="icon icon-pencil"></i></button>
                            <button type="button" data-toggle="tooltip" title="Remove" class="btn btn-link btn-delete-file"><i class="icon icon-trash text-danger"></i></button>
                        </td>-->
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="4" style="padding: 4px 0">
                            <div style="position: relative;">
                                <div class="pull-right text-muted" style="margin-top: 5px;margin-right: 5px">
                                    <p v-show="sheet">数据文件已上传，下面<code class="text-danger">红色</code> 部分已经导入过的数据表</p>
                                </div>
                                <button type="button" class="btn btn-link uploader-btn-browse"><i class="icon icon-plus"></i> 选择数据文件</button>
                                <button type="button" class="btn btn-link uploader-btn-start"><i class="icon icon-cloud-upload"></i> 上传文件</button>
                            </div>
                        </td>
                    </tr>
                    </tfoot>
                </table>

                <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>
                        <ul class="nav nav-tabs nav-stacked tlist" style="height: 100%">
                            <li class="checkbox-inline clearfix" v-for="item in sheetArr" >
                                <input type="checkbox"
                                       v-model="ck"
                                       :value="sheetData[item]['field']"
                                       :disabled="item=='表说明' || item=='表名称' || sheetData[item]['hv']==1"
                                >
                                <a :class="[{hv: sheetData[item]['hv']==1 }]" href="javascript:;" @click="sheet=item" data-target="#tab3Content1" data-toggle="tab" v-text="item"></a>
                            </li>
                        </ul>
                        <p v-show="ck && ck.length">已选择 <code v-text="ck.length||0"></code> 个实体待导入</p>
                    </div>
                    <div class="col-xs-8">
                        <div style="padding-left: 10px;background-color: #ccc;width: 100%"> Sheet-Detail</div>
                        <div class="tab-content col-xs-9">
                            <div class="tab-pane fade active in" id="">
                                <table class="table-bordered" style="width: 100%">
                                    <caption class="" v-show="sheet && (sheet!='表说明' || sheet!='表名称')">
                                        表名称： <span v-text="metaTable.field"></span>，中文名：<span v-text="metaTable.comment"></span>
                                    </caption>
                                    <thead>
                                    <tr style="background-color: #f1f1f1" v-show="sheet && sheet!='表说明' && sheet!='表名称'">
                                        <th>字段名</th>
                                        <th>中文名</th>
                                        <th>数据类型</th>
                                        <th>输入类型</th>
                                        <th>附加属性</th>
                                        <th>备注</th>
                                    </tr>
                                    <tr style="background-color: #f1f1f1" v-show="sheet && (sheet=='表说明' || sheet=='表名称')">
                                        <th>A</th>
                                        <th>B</th>
                                        <th>C</th>
                                        <th>D</th>
                                        <th>E</th>
                                        <th>F</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item, index) in metaTable.items">
                                        <td v-text="item.field"></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 class="col-xs-2">
                        <div style="padding-left: 10px;background-color: #ccc;width: 100%"> Checked-Sheet</div>
                        <ul class="nav nav-tabs nav-stacked tlist" style="height: 100%">
                            <li class="checkbox-inline clearfix" v-for="item in ck" >
                                <a href="javascript:;" @click="sheet=getSheetName(item)" data-target="#tab3Content1" data-toggle="tab" v-text="getSheetName(item)"></a>
                            </li>
                        </ul>
                        <p v-show="ck && ck.length">已选择 <code v-text="ck.length||0"></code> 个实体待导入</p>
                    </div>-->
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="tab2Content2">

            <div class="form-group">
                <label class="col-sm-1">数据源</label>
                <div class="col-md-2 col-sm-10">
                    <select class="form-control">
                        <option v-for="item in dbPlats" :value="item" v-text="item.field"></option>
                    </select>
                </div>
            </div>

            <div class="clearfix"></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">
        <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>

<script>
    let {dbList} = plat

    var vm = new Vue({
        el: ".importDev",
        data: {
            filePath: '',
            importStatus: false,
            sheetData: {}, // {name1: {}}
            sheetArr: [], // [name1,name2,]
            sheet: '',
            ck: [],
            metaTable: {items: []},

            // 从数据源导入实体
            dbPlats: red.getData('dbPlats'),
            dbPlatId: '',


            cache: {
                local: {
                    sheetData: {},
                    sheetArr: [],
                    sheet: '',
                    ck: [],
                    metaTable: {items: []},
                },
                dbPlat: {}
            },

        },
        watch: {
            sheetData: function (v) {
                var arr = [];
                var ck = [];
                for (k in v) {
                    let field = v[k]['field'];
                    if (k!='表说明' && k!='表名称' && v[k]['hv'] != 1) {
                        ck.push(field);
                    }
                    arr.push(k);
                }
                this.sheetArr = arr;
                this.ck = ck;
                if (arr.length > 0) {
                    this.sheet = arr[0]
                } else {
                    this.sheet = "";
                }
            },
            sheet: function (v) {
                this.metaTable = this.sheetData[v];
                console.log(this.metaTable)
                if (this.metaTable['load'] != 1) {
                    this.loadSheetData();
                }
            }
        },
        methods: {
            loadSheets: function(filePath) {
                if(!filePath) {
                    return false;
                }
                red.post("/file/data",{filePath: filePath}, function (json) {
                    console.log(json)
                    vm.sheetData = json;
                })
            },
            loadSheetData: function() {
                let sheetName = this.sheet;
                red.post("/file/sheet_data",{filePath: this.filePath, sheetName: sheetName}, function (json) {
                    json["hv"] = vm.sheetData[sheetName]["hv"];
                    json["load"] = 1;
                    vm.sheetData[sheetName] = json;
                    if (vm.sheet == sheetName) {
                        vm.metaTable = json;
                    }

                })
            },
            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) {
                        return k;
                    }
                }
                //return "";
            },
            back() {
                $("#main").load('/metadata/metatable/metaTable.html')
            },
            showInfo() {
                $('#f-info').modal({moveable: true})
            }
        },
        mounted: function () {
            // 初始化文件上传组件
            $('#tableUploader').uploader({
                url: '/upload/x',
                responseHandler: function (res, file) {
                    var file = JSON.parse(res.response)["body"][0];
                    vm.loadSheets(file["filePath"]);
                    vm.importStatus = true;
                    vm.filePath = file["filePath"];
                },
                filters: {
                    mime_types: [
                        {title: 'Excel文件', extensions: 'xls,xlsx'},
                    ],
                    prevent_duplicates: true
                }
            });

            dbList().then(res => this.dbPlats = res.rows)


            var h = document.documentElement.clientHeight || document.body.clientHeight;
            $(".sheet-cell").attr("style", "height:" + (h - 265) + "px;margin-bottom:20px;");
        }
    });

</script>