meta-kit/root/metadata/metaService.html

<style>
    .panel-body {
        padding: 0;
    }
</style>
<row class="meta-service">
    <div class="col-md-12" style="padding-top: 10px;">
        <div class="input-group list-head">

            <span class="input-group-btn">
                <button class="btn btn-default" type="button">选择业务类型</button>
            </span>
            <select class="form-control" v-model="table" style="width: 180px;">
                <option v-for="item in services" :value="item.name"> {{item.name}}&nbsp;&nbsp;&nbsp;[{{item.comment}}]</option>
            </select>

            <span class="input-group-btn" style="padding-left: 20px">
                <button @click="status=5" :class="['btn',{'btn-primary':status==5}]" type="button"> 列表配置</button>
            </span>
            <span class="input-group-btn">
                <button @click="status=6" :class="['btn',{'btn-primary':status==6}]" type="button"> 查询配置</button>
            </span>

            <span class="input-group-btn" style="padding-left: 20px">
                <button @click="status=3" :class="['btn',{'btn-primary':status==3}]" type="button"> 导出配置</button>
            </span>
            <span class="input-group-btn">
                <button @click="status=4" :class="['btn',{'btn-primary':status==4}]" type="button"> 导入配置</button>
            </span>

            <span class="input-group-btn" style="padding-left: 30px">
                <button @click="save()" :class="['btn',{'btn-primary':status!=0},{'disabled':status==0}]" type="button"> 保存</button>
            </span>
        </div>
    </div>

    <div class="col-md-7">
        <table class="table-bordered" style="width: 100%">
            <thead>
            <tr style="background-color: #f1f1f1">
                <td v-show="status==3 || status==4 || status==5 || status==6"><input type="checkbox"></td>
                <th v-show="status==1"></th>
                <th>字段名</th>
                <th>中文名</th>
                <th>数据类型</th>
                <th>输入类型</th>
                <th>附加属性</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in meta.items">
                <td v-show="status==3"><input type="checkbox" v-model="meta.exports" :value="item.name" class="form-control"></td>
                <td v-show="status==4"><input type="checkbox" v-model="meta.imports" :value="item.name" class="form-control"></td>
                <td v-show="status==5"><input type="checkbox" v-model="meta.shows" :value="item.name" class="form-control"></td>
                <td v-show="status==6"><input type="checkbox" v-model="filterArr" :value="item.name" class="form-control"></td>
                <td v-show="status==1" class="icon icon-move"></td>
                <td v-show="status!=2" v-text="item.name" style="background-color: rgb(235, 235, 228);"></td>
                <td v-show="status!=2" v-text="item.label"></td>
                <td v-show="status!=2" v-text="item.type"></td>
                <td v-show="status!=2" v-text="item.inType"></td>
                <td v-show="status!=2" v-text="item.inExt"></td>
                <td v-show="status!=2" v-text="item.remark"></td>

                <td v-show="status==2">
                    <input v-model="item" type="hidden">
                    <input :value="item.name" disabled class="form-control">
                    <input v-model="item.name" type="hidden">
                    <input name="name" type="hidden" :value="item.name">
                </td>
                <td v-show="status==2"><input v-model="item.label" class="form-control"></td>
                <td v-show="status==2"><input v-model="item.type" class="form-control"></td>
                <td v-show="status==2"><!--<input v-model="item.inType">-->
                    <select v-model="item.inType" class="form-control" style="width: 130px">
                        <option></option>
                        <option v-for="x in inTypes" :value="x">{{x}}</option>
                    </select>
                </td>
                <td v-show="status==2"><input v-model="item.inExt" class="form-control"></td>
                <td v-show="status==2"><input v-model="item.remark" class="form-control"></td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- sort -->
    <!--<div class="col-md-5" v-show="false">
        <table class="table-bordered table-auto">
            <thead>
            <tr style="background-color: #f1f1f1">
                <th></th>
                <th>字段名</th>
                <th>中文名</th>
                <th>展示名</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in meta.items">
                <td v-show="status!=2" class="icon icon-move"></td>
                <td v-show="status!=2" v-text="item.name" style="background-color: rgb(235, 235, 228);"></td>
                <td v-show="status!=2" v-text="item.label"></td>
                <td v-show="status!=2"><input v-model="item.label" style="width: 100px;"></td>
            </tr>
            </tbody>
        </table>
    </div>-->

    <!-- shows -->
    <div class="col-md-5" v-show="status==5">
        <div class="panel">
            <div class="panel-heading">列表展示的属性</div>
            <div id="show" class="panel-body">
                <table class="table-bordered table-auto" style="width: 100%">
                    <thead>
                    <tr style="background-color: #f1f1f1">
                        <th></th>
                        <th>字段名</th>
                        <th>中文名</th>
                        <!--<th>支持排序</th>-->
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in meta.shows">
                        <td class="icon icon-move">
                            <input name="name" :value="item" type="hidden">
                        </td>
                        <td v-text="item" style="background-color: rgb(235, 235, 228);"></td>
                        <td v-text="">{{getFieldLabel(item)}}</td>
                        <td v-show="false"><input v-model="item.label" style="width: 100px;"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- exports -->
    <div class="col-md-5" v-show="status==3">
        <div class="panel">
            <div class="panel-heading">导出的属性配置</div>
            <div id="export" class="panel-body">
                <table class="table-bordered table-auto" style="width: 100%">
                    <thead>
                    <tr style="background-color: #f1f1f1">
                        <th></th>
                        <th>字段名</th>
                        <th>中文名</th>
                        <!--<th>展示名</th>-->
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in meta.exports">
                        <td class="icon icon-move">
                            <input name="name" :value="item" type="hidden">
                        </td>
                        <td v-text="item" style="background-color: rgb(235, 235, 228);"></td>
                        <td v-text="">{{getFieldLabel(item)}}</td>
                        <td v-show="false"><input v-model="item.label" style="width: 100px;"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- imports -->
    <div class="col-md-5" v-show="status==4">
        <div class="panel">
            <div class="panel-heading">
                导入的属性配置
            </div>
            <div id="import" class="panel-body" style="/*padding-top: 10px;*/overflow:auto;">
                <table class="table-bordered table-auto" style="width: 100%;height: 100%">
                    <thead>
                    <tr style="background-color: #f1f1f1">
                        <th></th>
                        <th>字段名</th>
                        <th>中文名</th>
                        <!--<th>展示名</th>-->
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in meta.imports">
                        <td class="icon icon-move">
                            <input name="name" :value="item" type="hidden">
                        </td>
                        <td v-text="item" style="background-color: rgb(235, 235, 228);"></td>
                        <td v-text="">{{getFieldLabel(item)}}</td>
                        <td v-show="false"><input v-model="item.label" style="width: 100px;"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- filters -->
    <div class="col-md-5" v-show="status==6">
        <div class="panel">
            <div class="panel-heading">查询配置</div>
            <div id="filter" class="panel-body" style="overflow:auto;">
                <table class="table-bordered table-auto" style="width: 100%">
                    <thead>
                    <tr style="background-color: #f1f1f1">
                        <th></th>
                        <th style="width: 30px">字段名</th>
                        <th style="width: 30px">中文名</th>
                        <th style="width: 30px">默认展示</th>
                        <th>支持查询类型</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, index) in filters">
                        <td class="icon icon-move">
                            <input name="name" :value="item.name" type="hidden">
                        </td>
                        <td v-text="item.name" style="background-color: rgb(235, 235, 228);"></td>
                        <td v-text="">{{getFieldLabel(item.name)}}</td>
                        <td>
                            <label>
                                <input type="checkbox" v-model="item.checked" value="1"> 展示
                            </label>
                        </td>
                        <td>
                            <label class="checkbox-inline" v-for="c in filterCate">
                                <input type="checkbox" v-model="item.filterType" :value="c"> {{c}}
                            </label>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- dbPlat -->
    <div class="col-lg-5" v-show="status==7 ">
        <div class="panel">
            <div class="panel-heading">数据平台配置</div>
            <div class="panel-body" style="overflow:auto;">
                <form>
                    <div class="form-group">
                        <label class="col-sm-2">数据平台</label>
                        <div class="col-md-6">
                            <input type="hidden" v-model="row.key">
                            <select v-model="row.dbPlatId" class="form-control">
                                <option></option>
                                <option v-for="item in dbPlats" :value="item.key" v-text="item.name"></option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <select v-model="row.catalog" class="form-control">
                                <option></option>
                                <option v-for="item in catalogs()" :value="item" v-text="item"></option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</row>

<script src="res/zui/lib/sortable/zui.sortable.js"></script>
<script>
    var vm = new Vue({
        el: ".meta-service",
        data: {
            inTypes: ["INPUT", "SELECT_EXT", "INPUT_DT"],
            dataTypes: ["bigint(20)", "varchar(255)", "varchar(64)", "varchar(32)", "varchar(16)", "int(11)", "int(3)", "int(2)", "datetime"],
            filterCate: ["EQUAL", "NOTEQUAL", "LIKE", "IN"],
            tables: [],//所有的业务类型，【测试用】
            meta: {
                name:"",
                table:"",
                items: [],
                shows: [],
                exports: [],
                imports: [],
                filters: [{name:"", filterType:[""]}]
            },//完整的元数据数据，
            move: false,
            status: 0, //页面默认状态
            table: "", //页面选择的业务类型
            itemSort: [], //待保存的业务属性

            oldItems: [], //不被修改的字段属性
            itemEdit: {}, //待修改的字段属性

            dbPlats:[],
            row: {key: "", platId: "", catalog: ""},
            filter: {db: "", catalog: "", name: ""},//tableList 过滤条件

            filters:[],//查询配置
            filterArr:[],
            services: []
        },
        watch: {
            status: function (v) {
                this.setMove(v)
            },
            table: function (table) {
                this.loadDetail(table);
            },
            "meta.items": {
                handler: function (nv, ov) {
                    var itemNv = nv || [];
                    var itemOv = vm.oldItems || [];
                    if (itemOv.length == 0) return;

                    var itemEdit = [];
                    a:for (var i = 0; i < itemOv.length; i++) {
                        var attr = ["label", "name", "remark", "type", "inType"];
                        for (var j = 0; j < attr.length; j++) {
                            var k = attr[j];
                            if (itemOv[i][k] != itemNv[i][k]) {
                                itemEdit.push(itemNv[i]);
                                continue a;
                            }
                        }
                    }

                    vm.itemEdit = itemEdit;
                },
                deep: true
            },
            "meta.shows": function (v) {
                //console.log(v.length)
            },
            tables: function (v) {
                if(v.length > 0) {
                    vm.table = v[0]["name"];
                }
            },
            meta: function (v) {
                vm.row = {key:v.key, dbPlatId: v.dbPlatId, catalog: v.catalog};
                vm.filters = v.filters;
                var filterArr = [];
                /*vm.filters.forEach(function (item) {
                    filterArr.push(item.name);
                })*/
                vm.filterArr = filterArr;
            },
            filterArr: function (v) {
                var filters = [];
                vm.filterArr.forEach(function (item) {
                    var filter;
                    for (i in vm.filters) {
                        if (item  == vm.filters[i].name) {
                            filter = vm.filters[i];
                        }
                    }
                    /*vm.meta.filters.forEach(function (x) {
                        if (item  == x.name) {
                            //filters.push(x);
                            filter = x;
                        }
                    })*/
                    if (!filter) {
                        filter = {name: item, filterType:[], checked: 0};
                    }
                    filters.push(filter);
                });

                vm.filters = filters;
            }

        },
        methods: {
            loadDetail: function (cate) {
                //this.status = 0;
                red.getJSON("/meta/tableinfo",{name: cate}, function (json) {
                    var row = json;
                    row.shows = row.shows || [];
                    row.exports = row.exports || [];
                    row.imports = row.imports || [];
                    row.filters = row.filters || [];

                    vm.meta = row;

                    var oldItems = [];
                    row.items.forEach(function (item) {
                        var d = {};
                        ["label", "name", "remark", "type", "inType"].forEach(function (k) {
                            d[k] = item[k];
                        });
                        oldItems.push(d);
                    });
                    vm.oldItems = oldItems;
                });

            },
            tableList: function () {
                red.getJSON("/meta/tablelist",{}, function (json) {
                    vm.tables = json;
                });
            },
            catalogs: function() {
                var dbPlats = this.dbPlats;
                for (i in dbPlats) {
                    if (dbPlats[i].key == this.row.dbPlatId) {
                        return dbPlats[i]["catalogs"]
                    }
                }
            },
            setMove: function () {
                if (this.status == 1) {
                    $('#sortableList,table>tbody').sortable({
                        selector: '.list-group-item, tr',
                        finish: function (e) {
                            var rows = e.list;
                            vm.itemSort = [];
                            for (var i = 0; i < rows.length; i++) {
                                var item = $(rows[i]).find("input[name='name']").val();
                                vm.itemSort.push(item);
                            }
                        },
                        // 设置更多选项...
                    });
                }
                else if (this.status == 5) {
                    $('#show>table>tbody').sortable({
                        selector: 'tr',
                        finish: function (e) {
                            var rows = e.list;
                            var shows = [];
                            for (var i = 0; i < rows.length; i++) {
                                var item = $(rows[i]).find("input[name='name']").val();
                                shows.push(item);
                            }
                            vm.meta.shows = shows;
                        }
                    });
                } else if (this.status == 4) {
                    $('#import>table>tbody').sortable({
                        selector: 'tr',
                        finish: function (e) {
                            var rows = e.list;
                            var shows = [];
                            for (var i = 0; i < rows.length; i++) {
                                var item = $(rows[i]).find("input[name='name']").val();
                                shows.push(item);
                            }
                            vm.meta.imports = shows;
                        }
                    });
                } else if (this.status == 3) {
                    $('#export>table>tbody').sortable({
                        selector: 'tr',
                        finish: function (e) {
                            var rows = e.list;
                            var shows = [];
                            for (var i = 0; i < rows.length; i++) {
                                var item = $(rows[i]).find("input[name='name']").val();
                                shows.push(item);
                            }
                            vm.meta.exports = shows;
                        }
                    });
                }
                else if (this.status == 6) {
                    $('#filter>table>tbody').sortable({
                        selector: 'tr',
                        finish: function (e) {
                            var rows = e.list;
                            var filterArr = [];
                            for (var i = 0; i < rows.length; i++) {
                                var item = $(rows[i]).find("input[name='name']").val();
                                filterArr.push(item);
                            }
                            vm.filterArr = filterArr;
                        }
                    });
                }

                else {
                    $('table>tbody').sortable('destroy');
                }
            },
            /**
             * 保存元数据变更：
             * 1、基础数据排序
             *     --> 传递元素的顺序，后台对元素顺序重排
             * 2、基础数据属性修改
             *    --> 只提交被修改过的元素及属性数据，后端通过属性名称对应修改，
             * 3、导出
             *  导出排序
             *    --> 传递元素的顺序，后台对元素的顺利重排，（同基础元素排序）
             *  导出元素加减
             *    --> 将元素完整传递到后台，进行覆盖保存
             * 4、导入
             *  导入排序
             *  导入元素加减
             * 5、
             *
             * 7、数据平台
             *  记录元数据，存贮的数据平台
             *
             */
            save: function () {
                if (vm.status == 1 && vm.itemSort.length > 0) {
                    red.post("/meta/itemsort", {
                        serviceKey: vm.table,
                        items: JSON.stringify(vm.itemSort)
                    });
                }

                else if (vm.status == 2 && vm.itemEdit.length > 0) {
                    red.post("/meta/itemupdate", {
                        serviceKey: vm.table,
                        items: JSON.stringify(vm.itemEdit)
                    });
                }
                else if (vm.status == 3 || vm.status == 4 || vm.status == 5) {
                    var urls = {3: "/meta/exportsort", 4: "/meta/importsort", 5: "/meta/showsort"};
                    var items = {3: vm.meta.exports, 4: vm.meta.imports, 5: vm.meta.shows};

                    red.post(urls[vm.status], {
                        serviceKey: vm.table,
                        items: JSON.stringify(items[vm.status])
                    });
                }

                else if (vm.status == 5) {
                    red.post("/meta/showsort", {
                        serviceKey: vm.table,
                        items: JSON.stringify(vm.meta.shows)
                    });
                }

                else if (vm.status == 6) {
                    console.log(vm.filters);
                    red.post("/meta/filter_update", {
                        serviceKey: vm.table,
                        filters: JSON.stringify(vm.filters)
                    });

                }

                else if (vm.status == 7) {
                    console.log(vm.row);
                    red.post("/meta/dbplatupdate", vm.row)
                }

                else {
                    red.showMsg();
                }
            },
            getFieldLabel: function (col) {
                if (!col) {
                    return "";
                }
                for (var i = 0; i < vm.oldItems.length; i++) {
                    if (vm.oldItems[i].name == col) {
                        return vm.oldItems[i].label;
                    }
                }
            }

        },
        mounted: function (){
            //dbPlats 列表初始化
            red.dbPlats(function (json) {
                vm.dbPlats = json;
            });

            this.tableList();

            /*$(window).keydown(function (event) {
                // 监听 Ctrl + Enter 可全屏查看
                if (event.ctrlKey && event.keyCode == 13) {
                    vm.save();
                }
            });*/
        }
    });

</script>

<!--
<row class="">


</row>

<script>
    var vm = new Vue({
        el: ".meta-service",
        data: {
            
        },
        watch: {
            
        },
        methods: {
            
        },
        mounted: function () {
            var m = {"a.name": "lxyer", "a.`age`": 11}

            console.log(m["a.name"])

            console.log("-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;")
            for (var k in m) {
                console.log(k)
            }
        }
    });
</script>-->