315 lines
12 KiB
HTML
315 lines
12 KiB
HTML
|
||
|
||
<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}} [{{t.name}}]</option>
|
||
</select>
|
||
</div>-->
|
||
|
||
<!-- 业务列表 -->
|
||
<div class="col-md-2">
|
||
<div style="padding-left: 10px;background-color: #ccc;width: 100%"> 业务列表(Meta-Service)</div>
|
||
<ul class="nav nav-tabs nav-stacked tlist" style="height: 100%">
|
||
<li :class="['clearfix',{'active':service==item.alias}]" v-for="item in services" >
|
||
<a @click="service=item.name" :title="`${item.name}`" v-text="`${item.name} [${item.comment}]`" href="javascript:;"></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 预览功能 -->
|
||
<div class="col-md-10">
|
||
<div class="col-md-4 pull-right">
|
||
<div class="input-group">
|
||
<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="clearfix"></div>
|
||
|
||
<!-- 过滤条件 -->
|
||
<div class="col-lg-4 col-md-6" 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 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="field.label || 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 v-show="!list || list.rows == 0" style="text-align: center">
|
||
<img src="../res/img/none.png">
|
||
<p>暂无数据</p>
|
||
</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>
|
||
|
||
|
||
</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:[], 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() {
|
||
vm.list = {rows:[], total:0};
|
||
// 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}).then(res => this.cfg = res);
|
||
},
|
||
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 "";
|
||
}
|
||
|
||
let items = this.cfg.items[col.split(".")[0]];
|
||
if (items) {
|
||
return items[col.split(".")[1]]['label']
|
||
}
|
||
return '';
|
||
},
|
||
showInfo() {
|
||
$('#f-info').modal({moveable: true})
|
||
}
|
||
},
|
||
mounted() {
|
||
this.serviceList();
|
||
}
|
||
});
|
||
</script> |