262 lines
10 KiB
HTML
262 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="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 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="(x,index) in cfg.filters" v-if="x.checked">
|
|
<div class="input-group item">
|
|
<span class="input-group-addon" style="width: 130px;">{{x.label}}</span>
|
|
<select class="form-control" :name="cfg.filters[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[cfg.filters[index].name]">
|
|
|
|
<span class="input-group-addon fix-border fix-padding" style="padding: 5px" title="删除过滤条件">
|
|
<a href="javascript:;" @click="x.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.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>
|
|
</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>
|
|
var vm = new Vue({
|
|
el:".data-list",
|
|
data: {
|
|
cfg:{
|
|
cols: [],
|
|
filters: []
|
|
},
|
|
tables: [],
|
|
table: "",
|
|
//filters: [],
|
|
|
|
addFilter: "recompany",
|
|
para: {},
|
|
list: {rows:[], total:0},
|
|
limit: {pn: 1, ps: 10, total: 0},
|
|
order:{col:"id", desc:1}
|
|
},
|
|
watch: {
|
|
addFilter: function (v) {
|
|
vm.cfg.filters.forEach(function (f) {
|
|
if (f.name == v) {
|
|
f["checked"] = true;
|
|
vm.addFilter = "";
|
|
}
|
|
})
|
|
},
|
|
table: function () {
|
|
vm.loadCfg();
|
|
vm.limit = {pn: 1, ps: 10, total: 0};
|
|
vm.order = {col:"id", desc:1};
|
|
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;
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
findList: function () {
|
|
var filters = [];
|
|
for (i in vm.cfg.filters) {
|
|
var f = vm.cfg.filters[i]
|
|
if (f.checked && vm.para[f.name] != '') {
|
|
var d = {};
|
|
d["col"] = f.name;
|
|
d["value"] = vm.para[f.name];
|
|
d["type"] = $("select[name=" + f.name + "_cate]").val();
|
|
filters.push(d);
|
|
}
|
|
}
|
|
|
|
filters.push({col: "status", value: 9, type: "NOTEQUAL"});
|
|
|
|
var 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});
|
|
}
|
|
var fbean = {
|
|
keyService: vm.table,
|
|
filters: filters,
|
|
orders: orders,
|
|
limit: vm.limit
|
|
}
|
|
red.getJSON("/db/list",{fBean: JSON.stringify(fbean)}, function (json) {
|
|
json = json || {rows:[], total:0};
|
|
vm.list = json;
|
|
})
|
|
},
|
|
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) + "&platToken=" + red.getPlatToken() + "&cate=csv";
|
|
return;
|
|
},
|
|
tableList: function () {
|
|
red.getJSON("/meta/tablelist",{}, function (json) {
|
|
vm.tables = json;
|
|
vm.table = vm.tables[0].name;
|
|
});
|
|
},
|
|
loadCfg: function () {
|
|
red.getJSON("/meta/listcfg", {key: vm.table, platToken: red.getPlatToken()}, 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.tableList();
|
|
}
|
|
});
|
|
</script> |