275 lines
8.6 KiB
JavaScript
275 lines
8.6 KiB
JavaScript
|
||
|
||
var pers = []
|
||
var table,form,layer
|
||
layui.use(['form','layer','table'], function () {
|
||
table = layui.table;
|
||
form = layui.form;
|
||
layer = layui.layer;
|
||
|
||
//测试
|
||
setData(null);
|
||
|
||
// 触发submit提交 按钮点击或者表单被执行提交时触发
|
||
form.on('submit(query)', function (data) {
|
||
// 对表格进行重载。id 即 table表格的id
|
||
table.reload('table', {
|
||
// //设定异步数据接口的额外参数
|
||
where: data.field
|
||
})
|
||
return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
|
||
});
|
||
form.on('submit(reset)', function () {
|
||
$('#username').val('');
|
||
$('#proname').val('');
|
||
form.render();
|
||
let obj = {
|
||
username:'',
|
||
proname:'',
|
||
}
|
||
// 对表格进行重载。id 即 table表格的id
|
||
table.reload('table', {
|
||
// //设定异步数据接口的额外参数
|
||
where: obj
|
||
})
|
||
return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
|
||
});
|
||
//取消按钮点击
|
||
$("#closeBt").click(() => {
|
||
var index = parent.layer.getFrameIndex(window.name); //先得到当前 iframe层的索引
|
||
parent.layer.close(index); //再执行关闭
|
||
})
|
||
//保存按钮点击
|
||
$("#submitBt").click(() => {
|
||
save();
|
||
})
|
||
|
||
init();
|
||
});
|
||
|
||
// 静态数据
|
||
var tableData = [
|
||
{id: 1, username: '李云飞', idNumber: '342224196202241356', lineName: '500kV大宝Ⅰ回线',phone:'15665366624',bank:'中国银行',bankNumber:'xxxxxxxxxxxxxxxxxxxx',UnionPayNumber:'xxxxxxxxxxxx',visitationWorkSecond:'31',laborPrice:'10',visitationWorkDay:'5',laborPriceDay:'115'},
|
||
{id: 2, username: '李云飞', idNumber: '342224196202241356', lineName: '500kV大宝Ⅰ回线',phone:'15665366624',bank:'中国银行',bankNumber:'xxxxxxxxxxxxxxxxxxxx',UnionPayNumber:'xxxxxxxxxxxx',visitationWorkSecond:'32',laborPrice:'10',visitationWorkDay:'5',laborPriceDay:'115'},
|
||
{id: 3, username: '李云飞', idNumber: '342224196202241356', lineName: '500kV大宝Ⅰ回线',phone:'15665366624',bank:'中国银行',bankNumber:'xxxxxxxxxxxxxxxxxxxx',UnionPayNumber:'xxxxxxxxxxxx',visitationWorkSecond:'33',laborPrice:'10',visitationWorkDay:'5',laborPriceDay:'115'},
|
||
];
|
||
|
||
|
||
/**
|
||
* 初始化数据
|
||
*/
|
||
function init(){
|
||
// 渲染表格
|
||
table.render({
|
||
elem: '#table',
|
||
// url: "/sys/achievement",
|
||
// page: true,
|
||
skin: 'line', // 表格样式
|
||
data: tableData,
|
||
cols: [[
|
||
{
|
||
title: '序号',
|
||
field: 'zizeng',
|
||
align: 'center',
|
||
type: 'numbers'
|
||
},
|
||
{field:'username', title: '姓 名',align: 'center',},
|
||
{field:'idNumber', title: '身份证号',align: 'center',},
|
||
{field:'lineName', title: '管辖线路名称',align: 'center',},
|
||
{field:'phone', title: '手机号',align: 'center',},
|
||
{field:'bank', title: '开户行',align: 'center',},
|
||
{field:'bankNumber', title: '银行卡号',align: 'center'},
|
||
{field:'UnionPayNumber', title: '银联号',align: 'center'},
|
||
{field:'visitationWorkSecond', title: '巡视工作量（基*次）',align: 'center', },
|
||
{field:'laborPrice', title: '约定巡视工价（元/(基*次)）',align: 'center', },
|
||
{field:'visitationWorkDay', title: '特巡工作量（人*天）',align: 'center', },
|
||
{field:'laborPriceDay', title: '约定特巡工价（元/(人*天)）',align: 'center', },
|
||
{
|
||
field: '',
|
||
title: '合价（元）',
|
||
align: 'center',
|
||
templet: function(d){
|
||
var visitationWorkSecond = d.visitationWorkSecond;
|
||
var laborPrice = d.laborPrice;
|
||
var visitationWorkDay = d.visitationWorkDay;
|
||
var laborPriceDay = d.laborPriceDay;
|
||
|
||
var totalPrice = "";
|
||
//判断是否是数字
|
||
if(isNumber(visitationWorkSecond) && isNumber(laborPrice) && isNumber(visitationWorkDay) && isNumber(laborPriceDay)){
|
||
totalPrice = Number(visitationWorkSecond) * Number(laborPrice) + Number(visitationWorkDay) * Number(laborPriceDay)
|
||
}else{
|
||
totalPrice = "0"
|
||
}
|
||
|
||
|
||
var html = `<span>${totalPrice}</span>`;
|
||
return html;
|
||
},
|
||
},
|
||
{
|
||
field: '',
|
||
title: '通讯费',
|
||
align: 'center',
|
||
templet: function(d){
|
||
var id = d.id
|
||
var html = `<input class="message" key="${id}" oninput="computemMessage(this)" type="number" min="0" value="0" lay-verify="required" class="layui-input" style="width: 54px;border: 1px #E4E4E4 solid;border-radius: 3px;height: 25px;"/>`;
|
||
return html;
|
||
},
|
||
},
|
||
{
|
||
field: '',
|
||
title: '奖惩',
|
||
align: 'center',
|
||
templet: function(d){
|
||
var id = d.id
|
||
var html = `<input class="bonusPenalty" key="${id}" oninput="computeBonusPenalty(this)" type="number" value="0" lay-verify="required" class="layui-input" style="width: 54px;border: 1px #E4E4E4 solid;border-radius: 3px;height: 25px;"/>`;
|
||
return html;
|
||
},
|
||
},
|
||
{
|
||
field: '',
|
||
title: '备注',
|
||
align: 'center',
|
||
templet: function(d){
|
||
var id = d.id
|
||
var html = `<input class="remark" key="${id}" type="text" class="layui-input" style="width: 76px;border: 1px #E4E4E4 solid;border-radius: 3px;height: 25px;"/>`;
|
||
return html;
|
||
},
|
||
},
|
||
{
|
||
field: '',
|
||
title: '实发金额',
|
||
align: 'center',
|
||
templet: function(d){
|
||
var visitationWorkSecond = d.visitationWorkSecond;
|
||
var laborPrice = d.laborPrice;
|
||
var visitationWorkDay = d.visitationWorkDay;
|
||
var laborPriceDay = d.laborPriceDay;
|
||
|
||
var netSalary = "";
|
||
//判断是否是数字
|
||
if(isNumber(visitationWorkSecond) && isNumber(laborPrice) && isNumber(visitationWorkDay) && isNumber(laborPriceDay)){
|
||
netSalary = Number(visitationWorkSecond) * Number(laborPrice) + Number(visitationWorkDay) * Number(laborPriceDay);
|
||
}else{
|
||
netSalary = "0"
|
||
}
|
||
|
||
|
||
var html = `<span class="netSalary" style="color: #D9001B">${netSalary}</span>`;
|
||
return html;
|
||
},
|
||
},
|
||
]],
|
||
});
|
||
|
||
}
|
||
|
||
//通讯费input失去焦点事件
|
||
function computemMessage(enent){
|
||
var thisValue = $(enent).val();
|
||
var totalPrice = $(enent).parent().parent().prev().children().children().text();
|
||
|
||
var value = ""
|
||
//判断是否是数字
|
||
if(isNumber(thisValue) && isNumber(totalPrice)){
|
||
value = Number(thisValue) + Number(totalPrice);
|
||
}else{
|
||
value = "0"
|
||
}
|
||
|
||
$(enent).parent().parent().next().next().next().children().children().text(value);
|
||
}
|
||
//奖惩 input失去焦点事件
|
||
function computeBonusPenalty(enent){
|
||
var thisValue = $(enent).val();
|
||
var totalPrice = $(enent).parent().parent().prev().prev().children().children().text();
|
||
var value = ""
|
||
//判断是否是数字
|
||
if(isNumber(thisValue) && isNumber(totalPrice)){
|
||
value = Number(thisValue) + Number(totalPrice);
|
||
}else{
|
||
value = "0"
|
||
}
|
||
$(enent).parent().parent().next().next().children().children().text(value);
|
||
}
|
||
|
||
|
||
//页面赋值
|
||
function setData(data){
|
||
$("#inspectionStation").text("迪庆运检站");
|
||
$("#subComName").text("运检二公司");
|
||
$("#proNum").text("60");
|
||
$("#lineProtector").text("16");
|
||
$("#month").text("3月")
|
||
}
|
||
|
||
//保存
|
||
function save(){
|
||
//获取通讯费 DOM
|
||
var messages = $(".message");
|
||
//获取奖惩 DOM
|
||
var bonusPenaltys = $(".bonusPenalty");
|
||
//获取备注 DOM
|
||
var remarks = $(".remark");
|
||
//获取实发金额 DOM
|
||
var netSalarys = $(".netSalary");
|
||
|
||
var arr = [];
|
||
|
||
//循环获取的 DOM，将数据整合
|
||
for (var i = 0; i < messages.length; i++) {
|
||
//获取此行数据 的id
|
||
var id = $(messages[i]).attr("key");
|
||
//获取通讯费
|
||
var message = $(messages[i]).val();
|
||
//获取奖惩
|
||
var bonusPenalty = $(bonusPenaltys[i]).val();
|
||
//获取备注
|
||
var remark = $(remarks[i]).val();
|
||
//获取实发金额 DOM
|
||
var netSalary = $(netSalarys[i]).text();
|
||
|
||
var json = {
|
||
"id": id,
|
||
"message": message == ""? "0" : message,
|
||
"bonusPenalty": bonusPenalty? "0" : message,
|
||
"remark": remark,
|
||
"netSalary": netSalary
|
||
}
|
||
arr.push(json);
|
||
|
||
}
|
||
console.log(arr)
|
||
|
||
//将整合的数据传至后台
|
||
// 加载提示
|
||
let loadingMsg = layer.msg('数据上传中,请稍候...', {icon: 16, scrollbar: false, time: 0, shade: [0.8, '#393D49']});
|
||
// form请求地址
|
||
let formUrl = PATH_URL + "";
|
||
$.ajax({
|
||
type: 'POST',
|
||
async: true, // 默认异步true,false表示同步
|
||
url: formUrl, // 请求地址
|
||
data: JSON.stringify(arr),
|
||
success: function (data) {
|
||
layer.close(loadingMsg); // 关闭提示层
|
||
if(data.code == 200){
|
||
top.layer.msg("保存成功");
|
||
reloading();
|
||
}else{
|
||
layer.alert(data.msg);
|
||
}
|
||
},
|
||
error: function (XMLHttpRequest, textStatus, e) {
|
||
layer.msg('数据请求发生异常,请稍后重试', {icon: 16, scrollbar: false});
|
||
}
|
||
});
|
||
}
|
||
|
||
//判断是否为数字
|
||
function isNumber(variable){
|
||
return !isNaN(Number(variable));
|
||
}
|
||
|