321 lines
12 KiB
HTML
321 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>高级查询</title>
|
|
<!-- zui -->
|
|
<link rel="stylesheet" href="res/zui/css/zui.min.css">
|
|
<link rel="stylesheet" href="res/css/zui-theme.css">
|
|
<link rel="stylesheet" href="res/css/red-kit.css">
|
|
<style>
|
|
.item {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.table > thead > tr > th.sort:after{
|
|
display: inline-block;
|
|
margin-left: 5px;
|
|
font-family: ZenIcon;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-variant: normal;
|
|
line-height: 1;
|
|
color: #808080;
|
|
text-transform: none;
|
|
content: '\e6bd';
|
|
speak: none;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
.table > thead > tr > th.sort-up:after {
|
|
color: #145ccd;
|
|
content: '\e6b9';
|
|
}
|
|
.table > thead > tr > th.sort-down:after {
|
|
color: #145ccd;
|
|
content: '\e6b8';
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fixed">
|
|
<h3>高级查询 - [测试用例]</h3>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<select class="form-control" v-model="table" style="width: 300px;">
|
|
<option v-for="t in tables" :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></option>
|
|
<option v-for="f in cfg.filters" :value="f.name" :disabled="f.add">{{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="col-md-12">
|
|
<div class="input-group item" v-for="(x,index) in formFilter">
|
|
<span class="input-group-addon" style="width: 130px">{{x.label}}</span>
|
|
<select class="form-control" :name="formFilter[index].name + '_cate'" style="width: 100px">
|
|
<option v-for="t in x.filterType" :value="t.name">{{t.remark}}</option>
|
|
</select>
|
|
<span class="input-group-addon fix-border fix-padding"></span>
|
|
<input type="text" class="form-control" v-model="para[formFilter[index].name]">
|
|
|
|
</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.cols"
|
|
v-text="field.label"
|
|
: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.cols" v-title="dealField(row, field.col)" v-text="dealField(row, field.col)"></td>
|
|
</tr>
|
|
</tbody>
|
|
<!--<tfoot>
|
|
<tr>
|
|
<td :colspan="meta.field_label.length">
|
|
<ul class="pager pull-right">
|
|
<li class="previous">
|
|
<a>{{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>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tfoot>-->
|
|
</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>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script src="res/zui/lib/jquery/jquery.js"></script>
|
|
<script src="res/zui/js/zui.js"></script>
|
|
<script src="res/zui/lib/sortable/zui.sortable.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
|
<script>
|
|
var vm = new Vue({
|
|
el:".row",
|
|
data: {
|
|
cfg:{
|
|
cols: [],
|
|
filters: []
|
|
},
|
|
tables: [],
|
|
table: "",
|
|
filters: [],
|
|
formFilter: [
|
|
|
|
],
|
|
addFilter: "recompany",
|
|
para: {},
|
|
list: {},
|
|
limit: {pn: 1, ps: 10, total: 0},
|
|
order:{col:"", desc:1}
|
|
},
|
|
watch: {
|
|
addFilter: function (v) {
|
|
vm.cfg.filters.forEach(function (f) {
|
|
if (f.name == v) {
|
|
f["add"] = 1;
|
|
vm.add = "";
|
|
vm.formFilter.push(f);
|
|
}
|
|
})
|
|
},
|
|
table: function (v) {
|
|
vm.loadCfg();
|
|
vm.formFilter = [];
|
|
vm.findList();
|
|
},
|
|
list: function () {
|
|
var limit = vm.limit;
|
|
var list = vm.list;
|
|
var total = parseInt(list.total/limit.ps) + (list.total%limit.ps > 0 ? 1 : 0);
|
|
vm.limit["total"] = total;
|
|
},
|
|
limit: {
|
|
handler(a, b) {
|
|
|
|
},
|
|
immediate: true,
|
|
deep: true
|
|
},
|
|
|
|
},
|
|
methods: {
|
|
findList: function (n) {
|
|
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 orders = [];
|
|
if (vm.order.col) {
|
|
orders.push(vm.order);
|
|
}
|
|
var fBean = {
|
|
keyService: vm.table,
|
|
filters: data,
|
|
orders: orders,
|
|
limit: vm.limit
|
|
}
|
|
$.post("/db/list", {fBean: JSON.stringify(fBean)}, function (json) {
|
|
vm.list = json.body;
|
|
});
|
|
},
|
|
exportExcel: function() {
|
|
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);
|
|
return;
|
|
},
|
|
loadTables: function() {
|
|
$.getJSON("/meta/alltable",function (json) {
|
|
vm.tables = json;
|
|
if (!vm.table) {
|
|
//vm.table = vm.tables[0].name;
|
|
vm.table = "basic_platform";
|
|
}
|
|
});
|
|
},
|
|
loadCfg: function () {
|
|
$.getJSON("/meta/listcfg", {key: vm.table}, function (json) {
|
|
vm.cfg = json;
|
|
});
|
|
},
|
|
dealField: function (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] || "";
|
|
}
|
|
|
|
return str;
|
|
},
|
|
sortEvent: function (col) {
|
|
if(vm.order.col == col){
|
|
vm.order.desc = - vm.order.desc
|
|
}else{
|
|
vm.order.col = col;
|
|
vm.order.desc = 1;
|
|
}
|
|
vm.findList();
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.loadTables();
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |