<%@ page import="com.yc.sdk.shopping.util.SettingKey" %>
|
<%@ page import="com.yc.utils.SessionKey" %>
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
pageEncoding="UTF-8" %>
|
<%
|
String url = SettingKey.getHostUrl(request);
|
String dbId = (String) request.getSession().getAttribute(SessionKey.DATA_BASE_ID);
|
%>
|
<!DOCTYPE html>
|
<html lang="zh-cn">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport"
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>维护费订单列表</title>
|
<link href="<%=url%>/layui/css/layui.css" rel="stylesheet">
|
<style>
|
.layui-table-cell {
|
height: auto !important;
|
}
|
|
.hide {
|
display: none !important;
|
}
|
|
.waitPay {
|
color: red;
|
}
|
|
.otherPay {
|
color: green;
|
}
|
|
.closePay {
|
color: #df862a;
|
}
|
|
.huise {
|
background-color: #CCC !important;
|
border-color: #5FB878 !important;
|
}
|
</style>
|
</head>
|
<body>
|
<div style="text-align: center;margin-top: 10px">
|
<h2>支付维护费</h2>
|
</div>
|
<div id="maintainId">
|
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin: 10px 20px;height: 500px">
|
<ul class="layui-tab-title" id="payTableId">
|
<li class="layui-this" style="width: 200px">费用清单</li>
|
<li style="width: 200px">待支付</li>
|
<li style="width: 200px">已支付</li>
|
<li style="width: 200px">已取消</li>
|
</ul>
|
<div class="layui-tab-content" style="height: 100px;">
|
<div class="layui-tab-item layui-show">
|
<table class="layui-hide" id="costId" lay-filter="costId"></table>
|
<div style="text-align: center;">
|
<button @click="paymentGo" type="button" id="payment"
|
class="layui-btn layui-btn-fluid layui-btn-disabled"
|
style="width: 200px;height: 50px" :disabled="disabled">去支付:{{butPrice}}元
|
</button>
|
</div>
|
</div>
|
<div class="layui-tab-item">
|
<table class="layui-hide" id="toBePaid" lay-filter="toBePaid"></table>
|
</div>
|
<div class="layui-tab-item">
|
<table class="layui-hide" id="Paid" lay-filter="Paid"></table>
|
</div>
|
<div class="layui-tab-item">
|
<table class="layui-hide" id="Cancelled" lay-filter="Cancelled"></table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
<script src="<%=url%>/help/js/JQuery-3.6.0.js"></script>
|
<script src="<%=url%>/layui/layui.js"></script>
|
<script src="<%=url%>/help/js/vue.js"></script>
|
<script type="text/html" id="barPayId">
|
{{# if((d.docStatus == 0 || d.isPaid==0) && d.skCode!=null && d.skCode!="" ){ }}
|
<a class="layui-btn layui-btn-xs" lay-event="goPay">去支付</a>
|
{{# }else{ }}
|
<%-- <span>无</span>--%>
|
{{# } }}
|
</script>
|
<script type="text/html" id="barPayId1">
|
{{# if(d.docStatus == 0 && d.isPaid==0){ }}
|
<a class="layui-btn layui-btn-xs" lay-event="goPay">去支付</a>
|
{{# }else{ }}
|
<%-- <span>无</span>--%>
|
{{# } }}
|
</script>
|
<script>
|
var layer;
|
var index = -1;
|
var backIndex = function () {
|
let reg = new RegExp("(^|&)index=([^&]*)(&|$)", "i");
|
let r = window.location.search.substr(1).match(reg);
|
if (r != null) {
|
return (r[2]);
|
}
|
return 0;
|
}
|
var vm = new Vue({
|
el: '#maintainId',
|
data: {
|
cltCode: "",
|
butPrice: 0.00,
|
fields: [],
|
disabled: true
|
}
|
, methods: {
|
paymentGo: function () {
|
$.post("/Maintain/skCreate.do", {
|
"whCode": this.fields.join(","),
|
"cltCode": this.cltCode
|
}, function (data) {
|
if (data != null && data.code == 0) {
|
let skCode = data.data;
|
location.href = '<%=url%>/app/<%=dbId%>/0/cnzh/150371/5/payment.jsp?skCode=' + skCode;
|
} else {
|
layer.alert(data.msg, {closeBtn: false});
|
}
|
});
|
}
|
},
|
filters: {}
|
})
|
layui.use(['layer', 'element', 'table'], function () {
|
layer = layui.layer;
|
var $ = layui.jquery
|
, element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
|
var table = layui.table;
|
|
let json_costId = [[
|
{type: 'checkbox', LAY_CHECKED: true}//
|
, {field: 'docCode', width: 180, title: '费用单号', align: 'center'}
|
, {
|
field: 'docDate', width: 180, title: '费用日期', align: 'center', templet: function (t) {
|
return t.docDate.split(" ")[0];
|
}
|
}
|
, {field: 'receivMoney', width: 100, title: '金额', align: 'center'}
|
, {
|
field: 'itemList', title: '收费项目', align: 'center', templet: function (t) {
|
let text = "";
|
for (var i in t.itemList) {
|
text += t.itemList[i].matName + " / " + t.itemList[i].totalMoney + " * " + t.itemList[i].digit + "<br>";
|
}
|
return text;
|
}
|
}
|
, {
|
field: 'itemList', width: 250, title: '有效期', align: 'center', templet: function (t) {
|
let time = "";
|
for (var i in t.itemList) {
|
if (t.itemList[i].fybeginday != null && t.itemList[i].fyendday != null) {
|
time += t.itemList[i].fybeginday.split(" ")[0] + " ~ " + t.itemList[i].fyendday.split(" ")[0] + "<br>";
|
} else {
|
time += "未设置<br>";
|
}
|
}
|
return time;
|
}
|
}
|
, {
|
field: 'status', width: 150, title: '状态', align: 'center', templet: function (t) {
|
if (t.docStatus == 1) {
|
if (t.isPaid == 1) {
|
return "<font style='color:red'>已支付,待处理</font>";
|
} else {
|
return "<font style='color:red'>待支付</font>";
|
}
|
} else {
|
return "<font style='color:green'>正常</font>";
|
}
|
}
|
}
|
, {fixed: 'right', title: '操作', align: 'center', toolbar: '#barPayId', width: 150}
|
]];
|
let json_toBePaid = [[
|
{field: 'docCode', title: '收款单号', align: 'center'}
|
, {
|
field: 'detailed', title: '费用单号', align: 'center', templet: function (t) {
|
let item = "";
|
for (var i in t.detailed) {
|
item += t.detailed[i].sodocCode + "<br>";
|
}
|
return item;
|
}
|
}
|
, {
|
field: 'docDate', title: '创建日期', align: 'center', templet: function (t) {
|
return t.docDate.split(" ")[0];
|
}
|
}
|
, {field: 'sumAmount', title: '金额', align: 'center'}
|
, {
|
field: 'detailed', title: '收费项目', align: 'center', templet: function (t) {
|
let text = "";
|
let item = t.detailed;
|
for (var i in item) {
|
let it = item[i].payItem;
|
for (var e in it) {
|
text += it[e].matName + " / " + it[e].totalMoney + " * " + it[e].digit + "<br>";
|
}
|
}
|
return text;
|
}
|
}
|
, {
|
field: 'docStatus', title: '状态', align: 'center', templet: function (t) {
|
switch (t.docStatus) {
|
case 0:
|
if (t.isPaid == 1) {
|
return "<font style='color:red'>已支付,待处理</font>";
|
} else {
|
return "<font style='color:red'>待支付</font>";
|
}
|
break
|
case 100:
|
return "<font style='color:green'>已支付</font>";
|
break
|
case -200:
|
return "<font style='color:#df862a'>已取消</font>";
|
break
|
}
|
}
|
}
|
, {fixed: 'right', title: '操作', align: 'center', toolbar: '#barPayId1', width: 150}
|
]];
|
$("#payTableId li").on("click", function () {
|
vm.butPrice = 0;
|
vm.fields = [];
|
vm.disabled = true;
|
$("#payment").addClass("layui-btn-disabled");
|
index = $(this).index();
|
if (index == 0) {
|
table.reload('costId');
|
return;
|
}
|
let tab = ['#toBePaid', '#Paid', '#Cancelled'];
|
let status = [0, 100, -200];
|
var toBePaid = table.render({
|
elem: tab[index - 1]
|
, url: '/Maintain/toBePaid.do'
|
, height: 400
|
, parseData: function (res) { //res 即为原始返回的数据
|
return {
|
"code": res.code, //解析接口状态
|
"msg": '', //解析提示文本
|
"count": 0, //解析数据长度
|
"data": res.data //解析数据列表
|
};
|
}
|
, done: function (res, curr, count) {
|
let d = res.data;
|
let color = "otherPay";
|
for (let j in d) {
|
let checkbox = $(".layui-table tr[data-index=" + d[j].LAY_TABLE_INDEX + "]");
|
if (index == 1) {
|
color = "waitPay";
|
} else if (index == 3) {
|
color = "closePay";
|
}
|
checkbox.addClass(color).attr("title", "单据类型:" + d[j].docType);
|
}
|
}
|
, cols: json_toBePaid
|
, page: false
|
, skin: 'line' //行边框风格
|
, size: 'sm' //小尺寸的表格
|
, where: { //条件
|
cltCode: vm.cltCode,
|
docStatus: status[index - 1]
|
}
|
});
|
})
|
var costId = table.render({
|
elem: '#costId'
|
, url: '/Maintain/Cost.do'
|
, height: 400
|
, parseData: function (res) { //res 即为原始返回的数据
|
if (res != null) {
|
vm.cltCode = res.cltCode;
|
}
|
if (res.data != null && res.data.length > 0) {
|
for (let r in res.data) {
|
if (res.data[r].docStatus == 1) {
|
res.data[r].LAY_CHECKED = false;
|
}
|
}
|
}
|
return {
|
"code": res.code, //解析接口状态
|
"msg": '', //解析提示文本
|
"count": 0, //解析数据长度
|
"data": res.data //解析数据列表
|
};
|
}
|
, done: function (res, curr, count) {
|
vm.butPrice = 0;
|
vm.fields = [];
|
let d = res.data;
|
for (let j in d) {
|
let checkbox = $(".layui-table tr[data-index=" + d[j].LAY_TABLE_INDEX + "]");
|
if (d[j].docStatus == 1) {
|
checkbox.addClass("waitPay").attr("title", "双击去处理");
|
let c = checkbox.find("input[type='checkbox']");
|
c.prop('disabled', true);
|
c.next().addClass('layui-btn-disabled');
|
c.next().removeClass("layui-form-checked");
|
c.next().find("i").removeClass("layui-icon-ok");
|
c.next().find("i").addClass("huise");
|
} else {
|
checkbox.addClass("otherPay");
|
vm.butPrice = (Number(vm.butPrice) + Number(d[j].receivMoney));
|
vm.fields.push(d[j].docCode);
|
}
|
}
|
if (vm.butPrice > 0) {
|
vm.butPrice = parseFloat(vm.butPrice).toFixed(2);
|
}
|
if (vm.fields.length > 0) {
|
$("#payment").removeClass("layui-btn-disabled");
|
vm.disabled = false;
|
}
|
if (backIndex() > 0 && index != 0) {
|
$("#payTableId li").eq(backIndex()).trigger("click");
|
}
|
}
|
, cols: json_costId
|
, page: false
|
, skin: 'line' //行边框风格
|
, size: 'sm' //小尺寸的表格
|
});
|
table.on('checkbox(costId)', function (obj) {
|
let checkStatus = table.checkStatus('costId');
|
vm.butPrice = 0;
|
vm.fields = [];
|
if (checkStatus.data.length > 0) {
|
let mut = checkStatus.data;
|
for (let v in mut) {
|
if (mut[v].docStatus == 1) {
|
continue;
|
}
|
vm.butPrice = (Number(vm.butPrice) + Number(mut[v].receivMoney));
|
vm.fields.push(mut[v].docCode);
|
}
|
if (vm.butPrice > 0) {
|
vm.butPrice = parseFloat(vm.butPrice).toFixed(2);
|
}
|
if (vm.fields.length > 0) {
|
$("#payment").removeClass("layui-btn-disabled");
|
vm.disabled = false;
|
} else {
|
$("#payment").addClass("layui-btn-disabled");
|
vm.disabled = true;
|
}
|
} else {
|
$("#payment").addClass("layui-btn-disabled");
|
vm.disabled = true;
|
}
|
let checkbox = $(".layui-table tr[data-index]");
|
checkbox.each(function () {
|
let i = $(this).find("input[type='checkbox']");
|
if (i.next().hasClass("layui-checkbox-disbaled")) {
|
i.next().find("i").removeClass("layui-icon-ok");
|
i.next().find("i").addClass("huise");
|
}
|
})
|
})
|
|
table.on('checkbox(layTableAllChoose)', function () {
|
layer.alert("进来了");
|
})
|
|
//监听行单击事件(双击事件为:rowDouble)
|
table.on('row(costId)', function (obj) {
|
// let data = obj.data;
|
// if (data.status == 1) {
|
// location.href = '/general/maintainPay/payment.html?skCode=' + data.skCode;
|
// }
|
});
|
|
//监听行双击事件(单击事件为:row)
|
table.on('rowDouble(costId)', function (obj) {
|
let data = obj.data;
|
if (data.docStatus == 1) {
|
location.href = '<%=url%>/app/<%=dbId%>/0/cnzh/150371/5/payment.jsp?skCode=' + data.skCode;
|
}
|
});
|
table.on('tool(costId)', function (obj) {
|
let data = obj.data; //获得当前行数据
|
let layEvent = obj.event; //获得 lay-event 对应的值
|
if (layEvent === 'goPay') { //查看
|
location.href = '<%=url%>/app/<%=dbId%>/0/cnzh/150371/5/payment.jsp?skCode=' + data.skCode;
|
}
|
})
|
|
table.on('tool(toBePaid)', function (obj) {
|
let data = obj.data; //获得当前行数据
|
let layEvent = obj.event; //获得 lay-event 对应的值
|
if (layEvent === 'goPay') { //查看
|
location.href = '<%=url%>/app/<%=dbId%>/0/cnzh/150371/5/payment.jsp?skCode=' + data.docCode;
|
} else if (layEvent === 'close') { //取消
|
$.ajax({
|
url: '/Maintain/skClose.do?skCode=' + data.docCode,
|
type: "get",
|
async: false,
|
headers: {'Content-Type': 'application/json;charset=utf-8'}, //接口json格式
|
success: function (data) {
|
if (data.code === 0) {
|
layer.alert(data.data, {closeBtn: false}, function (index) {
|
//重载
|
table.reload('toBePaid');
|
layer.close(index);
|
});
|
}
|
}, error: function (data) {
|
layer.alert(data, {closeBtn: false});
|
}
|
});
|
}
|
})
|
});
|
//禁止右键
|
window.document.oncontextmenu = function () {
|
// return false;
|
}
|
</script>
|
</body>
|
</html>
|