meta-kit/root/metadata/dataList.html

<style>
    .item {
        padding-top: 10px;
    }
</style>

<row class="data-list">
    <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">
                    <img src="../res/img/meta_flow.png">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>


    <h3>高级查询 - [测试用例]</h3>
    <div class="col-md-6">
        <select class="form-control" v-model="service" style="width: 300px;">
            <option v-for="t in services" :value="t.name">{{t.comment}}&nbsp;&nbsp;&nbsp;[{{t.name}}]</option>
        </select>
    </div>
    <div class="col-md-6">
        <div class="input-group pull-left">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">添加过滤条件</button>
            </span>
            <select class="form-control" v-model="addFilter" style="width: 130px;">
                <option v-for="f in cfg.filters" :value="f.name" :disabled="f.checked">{{f.label}}</option>
            </select>


            <span class="input-group-btn">
                <button @click="findList()" class="btn btn-primary" type="button"> 查询</button>
            </span>
            <span class="input-group-btn" style="padding-left: 10px">
                <button @click="exportExcel" class="btn" type="button"> 导出</button>
            </span>
        </div>
    </div>

    <div class="">
        <div class="col-lg-4 col-md-6 col-xs-12" v-for="(filter,index) in cfg.filters" v-if="filter.checked">
            <div class="input-group item">
                <span class="input-group-addon" style="width: 130px;">{{filter.label}}</span>
                <select class="form-control" v-model="filter['type']" style="width: 100px">
                    <option v-for="(t, index) in filter.filterType" :value="t.name" v-text="t.remark"></option>
                </select>
                <span class="input-group-addon fix-border fix-padding"></span>
                <input type="text" class="form-control" v-model="filter['value']">

                <span class="input-group-addon fix-border fix-padding" style="padding: 5px" title="删除过滤条件">
                    <a href="javascript:;" @click="filter.checked = false;"><i class="icon icon-trash"></i></a>
                </span>
            </div>
        </div>
    </div>

    <div class="col-md-12" style="padding-top: 10px;overflow:auto;">
        <table class="table table-bordered table-hover" style="width: 100%">
            <thead>
            <tr>
                <th v-for="field in cfg.shows"
                    v-text="getFieldLabel(field.col)"
                    :class="{'sort':field.order>0, 'sort-up':field.col==order.col && order.desc==1, 'sort-down':field.col==order.col && order.desc!=1}"
                    @click="sortEvent(field.col)"
                >

                </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="row in list.rows">
                <td v-for="field in cfg.shows" v-title="dealField(row, field.col)" v-text="dealField(row, field.col)"></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div>
        <ul class="pager pull-right" style="margin: 5px 10px">

            <li class="previous">
                <a style="border: 0;">共{{list.total}}条数据</a>
            </li>
            <li :class="['previous', {'disabled':limit.pn==1}]">
                <a @click="findList(-- limit.pn)" href="javascript:;">«上一页</a>
            </li>
            <li :class="['next', {'disabled':limit.pn >= limit.total}]">
                <a @click="findList(limit.pn = ++limit.pn )" href="javascript:;">»下一页</a>
            </li>

            <li class="previous">
                <a style="border-bottom: 0;border-right: 0;border-top: 0;">到第<input v-model="limit.pn" style="width: 30px;height: 21px;">/ {{limit.total}}页</a>
            </li>
            <li class="previous">
                <a @click="findList(limit.pn)" href="javascript:;">确定</a>
            </li>
        </ul>
    </div>
</row>

<script>
    let {getServiceList, getCfg, getDataList} = meta;
    var vm = new Vue({
        el:".data-list",
        data: {
            cfg:{
                items:[],
                shows: [],
                filters: []
            },
            services:[],
            service:"",
            //tables: [],
            //table: "",
            //filters: [],

            addFilter: "recompany",
            para: {},
            list: {rows:[{listSql:"", countSql:""}], total:0},
            limit: {pn: 1, ps: 10, total: 0},
            order:{col:"id", desc:1}
        },
        watch: {
            addFilter(v) {
                this.cfg.filters.forEach(function (f) {
                    if (f.name == v) {
                        f["checked"] = true;
                        vm.addFilter = "";
                    }
                })
            },
            service() {
                this.loadCfg();
                this.limit = {pn: 1, ps: 10, total: 0};
                this.order = {col:"", desc:1};
                this.findList();
            },
            list () {
                let limit = this.limit;
                let list = this.list;
                let total = parseInt(list.total/limit.ps) + (list.total%limit.ps > 0 ? 1 : 0);
                this.limit["total"] = total;
            }
        },
        methods: {
            findList() {
                // filters
                let filters = [];
                //filters.push({col: "status", value: 9, type: "NOTEQUAL"});
                for (i in  this.cfg.filters) {
                    let filter = this.cfg.filters[i];
                    if (filter.checked && filter['value']) {
                        let {name: col, value, type} = filter;
                        filters.push({col, value, type});
                    }
                }
                // orders
                let orders = [];
                //截取真实字段名，（考虑如果多表关联情况，是否需要加入真实字段名）
                if (vm.order.col) {
                    var end = vm.order.col.indexOf("\|");
                    if (end < 0) {
                        end = vm.order.col.indexOf("=")
                    }

                    var col = vm.order.col;
                    if (end > 0) {
                        col = vm.order.col.substring(0, end);
                    }

                    orders.push({col: col, desc: vm.order.desc});
                }

                // fbean
                let fbean = {
                    name: this.service,
                    filters: filters,
                    orders: orders,
                    limit: vm.limit,
                };

                getDataList(fbean, json => {
                    console.log(json)
                    vm.list = json;
                });
            },
            exportExcel() {
                var data = [];
                for (k in vm.para) {
                    if (vm.para[k] != '') {
                        var d = {};
                        d["col"] = k;
                        d["value"] = vm.para[k];
                        d["type"] = $("select[name=" + k + "_cate]").val();
                        data.push(d);
                    }
                }
                //data.push({col: "status", value: 9, type: "NOTEQUAL"});

                var fBean = {
                    keyService: vm.table,
                    filters: data,
                    orders: [{col: "status", desc: -1}],
                    limit: {ps: 5}
                }
                location.href = "/export/data?fBean=" + JSON.stringify(fBean) + "&platToken=" + red.getPlatToken() + "&cate=csv";
                return;
            },
            serviceList() {
                getServiceList(json => {
                    vm.services = json;
                    vm.service = json[0].name;
                });
            },
            loadCfg() {
                getCfg({name: this.service}, json => {
                    vm.cfg = json;
                });
            },
            dealField(bean, field) {
                var str = "";
                if (!bean || !field) {

                } else if (typeof(field) === 'function') {
                    str = field(bean);
                } else if (field.indexOf("||") > 0) {//处理字典数据
                    var dic_type = field.split("||")[1];
                    var v = bean[field.split("||")[0]];
                    str = kvExtDeal(dic_type, v);
                } else if (field.indexOf("|") > 0) {//处理字典数据
                    var dic_type = field.split("|")[1];
                    var v = bean[field.split("|")[0]];
                    str = v;//kvDeal(dic_type, v);
                }
                else if (field.indexOf("=") > 0) {//处理字典数据
                    var fun = field.split("=")[1];
                    var v = bean[field.split("=")[0]];
                    return v;
                    //eval("str =$funs."+ fun +"('"+ v +"')");
                }
                else if (field.indexOf("-") > 0) {
                    var name = field.split("-")[0];
                    var path = field.split("-")[1];
                    if (bean[name]) {
                        var href = config.services.issct + "/downLoadFdfs?fileId=" + encodeURI(bean[path]) + "&filename=" + encodeURI(bean[name]);
                        str = "<a href='" + href + "' target='_blank'>" + bean[name] + "</a>";
                    }
                } else if (bean[field] === 0) { //特殊值 "0" 处理
                    str = "0";
                } else if (bean[field] == "unknown") { //特殊值处理
                    str = "";
                } else {
                    str = bean[field.replace('$', '.')] || "";
                }

                return str;
            },
            sortEvent(col) {
                if (vm.order.col == col) {
                    vm.order.desc = -vm.order.desc
                } else {
                    vm.order.col = col;
                    vm.order.desc = 1;
                }
                vm.findList();
            },
            getFieldLabel: function (col) {
                if (!col) {
                    return "";
                }

                var items = this.cfg.items[col.split("$")[0]];
                if (items) {
                    return items[col.split("$")[1]]['label']
                    /*for (var i = 0; i < items.items.length; i++) {
                        if (tableInfo.items[i].name == col.split("$")[1]) {
                            return tableInfo.items[i].label;
                        }
                    }*/

                }
                return '';
            },
            showInfo() {
                $('#f-info').modal({moveable: true})
            }
        },
        mounted() {
            this.serviceList();
        }
    });
</script>