470 lines
19 KiB
HTML
470 lines
19 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>
|
||
|
||
<!-- 业务列表 -->
|
||
<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.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" v-show="!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" style="padding-top: 3px">
|
||
<span class="input-group-addon" style="max-width: 130px;">{{filter.label}}</span>
|
||
<select class="form-control" v-model="filter['type']" style="width: 95px;">
|
||
<option v-for="(t, i) in filter.filterType" :value="t.name" v-text="t.remark"></option>
|
||
</select>
|
||
<span class="input-group-addon fix-border fix-padding"></span>
|
||
<input v-if="!filter.inType || filter.inType == 'INPUT'" type="text" class="form-control" v-model="filter['value']">
|
||
<select v-if="filter.inType == 'DICT'" class="form-control" v-model="filter['value']" style="width: 100px">
|
||
<!-- option v-for="(t, index) in filter.filterType" :value="t.name" v-text="t.remark"></option -->
|
||
<option value=""> 字典值一</option>
|
||
<option value=""> 字典值二</option>
|
||
</select>
|
||
|
||
<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>
|
||
<!-- 'sort':field.order>0 -->
|
||
<th v-for="field in cfg.shows"
|
||
v-if="field.inType != 'HIDDEN'"
|
||
v-text="field.label || getFieldLabel(field.col)"
|
||
:class="{'sort':1, 'sort-up':field.col==order.col && order.desc==1, 'sort-down':field.col==order.col && order.desc!=1}"
|
||
@click="sortEvent(field.col)"></th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="row in list.rows">
|
||
<!--
|
||
<td v-for="field in cfg.shows" v-title="dealFieldFmt(row, field.col)" v-text="dealFieldFmt(row, field.col)"></td>
|
||
-->
|
||
<td v-for="field in cfg.shows"
|
||
v-if="field.inType != 'HIDDEN'"
|
||
v-title="dealFieldFmt(row, field)"
|
||
v-html="dealFieldFmt(row, field)"></td>
|
||
<td>
|
||
<a href="javascript:;" @click="detailData=row; detail()">详情</a>
|
||
<a href="javascript:;" @click="detailData=row; edit()">编辑</a>
|
||
<a href="javascript:;" @click="detailData=row; del()">删除</a>
|
||
</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>
|
||
|
||
<!-- detail -->
|
||
<div class="modal fade" id="detail">
|
||
<div class="modal-dialog">
|
||
<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" v-text="cfg.title + ' - [详情]'"> </h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<table class="table table-bordered table-hover">
|
||
<tr v-for="i in parseInt(cfg.details.length/2)">
|
||
|
||
<th v-text="cfg.details[(i-1)*2]['label']"></th>
|
||
<td v-html="dealFieldFmt(detailData, cfg.details[(i-1)*2])">
|
||
|
||
</td>
|
||
|
||
<th v-text="cfg.details[(i-1)*2+1]['label']"></th>
|
||
<td v-html="dealFieldFmt(detailData, cfg.details[(i-1)*2+1])">
|
||
|
||
</td>
|
||
|
||
</tr>
|
||
|
||
|
||
<tr v-for="i in (cfg.details.length%2)">
|
||
<th v-text="cfg.details[cfg.details.length -1]['label']"></th>
|
||
<td v-html="dealFieldFmt(detailData, cfg.details[cfg.details.length -1])">
|
||
|
||
</td>
|
||
<th>
|
||
|
||
</th>
|
||
<td></td>
|
||
</tr>
|
||
|
||
</table>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- edit -->
|
||
<div class="modal fade" id="edit">
|
||
<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" v-text="cfg.title + ' - [编辑]'"> </h4>
|
||
</div>
|
||
<div class="modal-body" style="padding-right: 50px">
|
||
<form class="form-horizontal">
|
||
<div class="col-sm-6" v-for="item in cfg.edits">
|
||
<div v-show="item.inType != 'HIDDEN'" class="form-group">
|
||
<label class="col-sm-5" v-text="item.label"></label>
|
||
<div class="col-sm-7">
|
||
<input v-if="!item.inType || item.inType == 'INPUT' || item.inType == '' || !item.inType" v-model="detailData[item.col]" class="form-control" :placeholder="`请输入 ${item.label}`">
|
||
<input v-if="item.inType == 'INPUT_DT'" v-model="detailData[item.col]" class="form-control" :placeholder="`请输入 ${item.label}`">
|
||
<select v-if="item.inType == 'DICT'" v-model="detailData[item.col]" class="form-control">
|
||
<option value="1">选项一</option>
|
||
<option value="2">选项二</option>
|
||
<option value="3">山东省</option>
|
||
<!--
|
||
<option v-for="x in inTypes" :value="x">{{x}}</option>
|
||
-->
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12" style="height: 5px"></div>
|
||
</form>
|
||
</div>
|
||
<div class="clearfix"></div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
|
||
<button @click="save()" type="button" class="btn btn-primary">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</row>
|
||
|
||
<script>
|
||
|
||
// 一些提前定义好的 格式化函数（实际系统中，可按照此规测定义更多）
|
||
eval('function abx(bean, x) {\n' +
|
||
' return x + " - by fun:abx";\n' +
|
||
' }')
|
||
function abc (bean, v) {
|
||
return `<a class="btn btn-primary" href="javascript:console.log('${v} 我是一个自定义<btn>事件');">${v} (自定义按钮)</a>`
|
||
}
|
||
function funDept (bean, v) {
|
||
return `<a href="javascript:console.log('${v} 我是一个自定义<a>标准事件');">${v} (点我)</a>`
|
||
}
|
||
function sexFun(bean, v) {
|
||
return {1:"男",2:"女"}[v] || "未知性别"
|
||
}
|
||
|
||
let {getServiceList, getCfg, getDataList, exportData, dataDel, dataSave} = meta
|
||
let {showOk} = red
|
||
let vm = new Vue({
|
||
el:".data-list",
|
||
data: {
|
||
cfg: {
|
||
title: "",
|
||
items: [],
|
||
shows: [],
|
||
filters: [],
|
||
details: [],
|
||
},
|
||
services: [],
|
||
service: "",
|
||
|
||
addFilter: "",
|
||
para: {},
|
||
list: {rows: [], total: 0},
|
||
limit: {pn: 1, ps: 20, total: 0},
|
||
order: {col: "id", desc: 1},
|
||
pk: "",
|
||
detailData: {}
|
||
},
|
||
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: 20, 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() {
|
||
this.list = {rows:[], total:0};
|
||
let fbean = this.buildFBean();
|
||
getDataList(fbean, json => {
|
||
vm.list = json;
|
||
});
|
||
},
|
||
exportExcel() {
|
||
let fbean = this.buildFBean();
|
||
fbean['limit'] = {pn:1, ps: 1000}
|
||
exportData({fbean, cate:'excel'})
|
||
return;
|
||
},
|
||
serviceList() {
|
||
getServiceList(json => {
|
||
vm.services = json;
|
||
vm.service = json[0].name;
|
||
});
|
||
},
|
||
loadCfg() {
|
||
getCfg({name: this.service}).then(res => {
|
||
// res['type'] = res.filters[0]['name']
|
||
|
||
for (i in res["filters"]) {
|
||
res["filters"][i]['type'] = res["filters"][i]['filterType'][0]['name']
|
||
}
|
||
this.cfg = res
|
||
});
|
||
},
|
||
dealFieldFmt(bean, colFmt) { //处理字典数据 及 自定义函数处理数据
|
||
|
||
let v = bean[colFmt["col"]]
|
||
if (colFmt.inType == "DICT") {
|
||
// 取字典值返回
|
||
}
|
||
else if (colFmt.inType == "INPUT_DAY") {
|
||
|
||
}
|
||
else if (colFmt.inType == "INPUT_TIME") {
|
||
// 时间戳格式化
|
||
return red.timeFmt(new Date(v))
|
||
}
|
||
else if (colFmt.inType == "INPUT_FUNC") {
|
||
|
||
}
|
||
else if (colFmt.inType == "FILE" && v) {
|
||
return '<a href="{0}" target="_blank">查看</a>'.format(v)
|
||
}
|
||
else {
|
||
|
||
}
|
||
|
||
return v
|
||
},
|
||
dealField(bean, field) {
|
||
let str = "";
|
||
if (!bean || !field) {
|
||
|
||
} else if (typeof(field) === 'function') {
|
||
str = field(bean);
|
||
} else if (field.indexOf("||") > 0) {//处理字典数据
|
||
let dic_type = field.split("||")[1];
|
||
let v = bean[field.split("||")[0]];
|
||
str = kvExtDeal(dic_type, v);
|
||
} else if (field.indexOf("|") > 0) {//处理字典数据
|
||
let dic_type = field.split("|")[1];
|
||
let v = bean[field.split("|")[0]];
|
||
str = v;//kvDeal(dic_type, v);
|
||
}
|
||
else if (field.indexOf("=") > 0) {//处理字典数据
|
||
let fun = field.split("=")[1];
|
||
let v = bean[field.split("=")[0]];
|
||
return v;
|
||
//eval("str =$funs."+ fun +"('"+ v +"')");
|
||
}
|
||
else if (field.indexOf("-") > 0) {
|
||
let name = field.split("-")[0];
|
||
let path = field.split("-")[1];
|
||
if (bean[name]) {
|
||
let 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 '';
|
||
},
|
||
buildFBean() {
|
||
// 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) {
|
||
let end = vm.order.col.indexOf("\|");
|
||
if (end < 0) {
|
||
end = vm.order.col.indexOf("=")
|
||
}
|
||
|
||
let 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: this.limit,
|
||
};
|
||
|
||
return fbean
|
||
},
|
||
detail() {
|
||
$('#detail').modal({moveable: true});
|
||
},
|
||
edit() {
|
||
$('#edit').modal({moveable: true});
|
||
},
|
||
del() {
|
||
let name = this.service
|
||
let pk = this.detailData[this.cfg.pk]
|
||
|
||
dataDel({name, id: pk}).then(res => showOk())
|
||
},
|
||
save() {
|
||
// 表单保存
|
||
let row = this.detailData
|
||
let edits = this.cfg.edits
|
||
|
||
let name = this.service
|
||
let data = {}
|
||
for (let i in edits) {
|
||
data[edits[i].col] = row[edits[i].col]
|
||
}
|
||
|
||
dataSave({name, data}).then(res => {
|
||
showOk()
|
||
$('#edit').modal('hide')
|
||
})
|
||
},
|
||
showInfo() {
|
||
$('#f-info').modal({moveable: true})
|
||
}
|
||
},
|
||
mounted() {
|
||
this.serviceList();
|
||
}
|
||
});
|
||
</script>
|