282 lines
10 KiB
HTML
282 lines
10 KiB
HTML
|
|
<style>
|
|
.item {
|
|
padding-top: 10px;
|
|
}
|
|
</style>
|
|
|
|
<row class="data-list">
|
|
<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}} [{{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 '';
|
|
},
|
|
},
|
|
mounted() {
|
|
this.serviceList();
|
|
}
|
|
});
|
|
</script> |