关于前台页面js的一些 知识
在jqGrid中前面勾选按钮的时间
全选事件
onSelectAll:function(aRowids,status) {
var _this = this;if(status){
item_selected = _.union(item_selected, aRowids);
$("#numbertext").show();
$("#number").text(item_selected.length)
}else{
item_selected = _.difference(item_selected, aRowids);
$("#number").text(item_selected.length);
}
},
//单选按钮选中单条数据事件
beforeSelectRow:function(rowid, e) {
var _this = this;
var index = _.indexOf(item_selected, rowid);
if(index==-1){
item_selected.push(rowid);
$("#numbertext").show();
$("#number").text(item_selected.length);
}
else{
item_selected = _.pull(item_selected, rowid);
$("#number").text(item_selected.length);
}
},
遍历元素 表格下面的input框 type为 checkbox的所有组件
$("#table_list_1 input[type|=checkbox]").each(function(){
var id=this.id;
$(this).attr('checked','checked'); 为当前input框设置全选
item_selected.push(id.substring(17));
})
<!DOCTYPE html>
<html>
<head>
<#include "/common/common-css.html"/>
<title>运单管理</title>
<style>
.ui-jqgrid-hbox{width:100%;}
.ui-jqgrid-htable{width:100% !important;}
#table_list_1,#table_list_2,#table_list_3,#table_list_4{width:100% !important;color: #666;}
/* #pager_list_1,#pager_list_2,#pager_list_3,#pager_list_5{height: 50px;} */
#gbox_table_list_1,#gview_table_list_1,.ui-jqgrid-bdiv,.ui-jqgrid .ui-jqgrid-hdiv,#pager_list_1{width:100% !important;}
#gbox_table_list_2,#gview_table_list_2,.ui-jqgrid-bdiv,.ui-jqgrid .ui-jqgrid-hdiv,#pager_list_2{width:100% !important;}
#gbox_table_list_3,#gview_table_list_3,.ui-jqgrid-bdiv,.ui-jqgrid .ui-jqgrid-hdiv,#pager_list_3{width:100% !important;}
#gbox_table_list_4,#gview_table_list_4,.ui-jqgrid-bdiv,.ui-jqgrid .ui-jqgrid-hdiv,#pager_list_4{width:100% !important;}
</style>
</head>
<body class="payment-details">
<!-- page-heading -->
<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>业务管理——运单管理</h2>
<ol class="breadcrumb">
<li>
<a onclick="index()">业务管理</a>
</li>
<li class="active">
<strong>运单管理</strong>
</li>
</ol>
</div>
</div>
<div class="list-waybill">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="tabs-container">
<ul class="nav nav-tabs">
<li class="active"><a id="clickTab1" data-toggle="tab" href="#tab-1"> 待装车</a></li>
<li class=""><a id="clickTab2" data-toggle="tab" href="#tab-2">运输中</a></li>
</ul>
<div class="tab-content">
<div id="tab-1" class="tab-pane active">
<div class="panel-body">
<!-- 查询条件 -->
<div class="query-criteria" style="background: #fff; margin: 0; padding: 0; padding-top: 0px; padding-bottom: 10px;">
<form id="queryForm">
<input name="waybillId" id="waybillIdQuery" type="text" placeholder="承运单号" class="form-control input-text">
<select name="sendWay" id="sendWayQuery" class="form-control">
<option value="">-发货方式-</option>
<option value="pick_up">上门提货</option>
<option value="by_oneself">自送站点</option>
</select>
<select name="deliveryWay" id="deliveryWayQuery" class="form-control">
<option value="">-送货方式-</option>
<option value="pick_up">到站自提</option>
<option value="home_delivery">送货上门</option>
</select>
<select name="insure" id="insureQuery" class="form-control">
<option value="">-是否投保-</option>
<option value="1">是</option>
<option value="2">否</option>
</select>
<select name="receiptWay" id="receiptWayQuery" class="form-control">
<option value="">-回单方式-</option>
<option value="elec">电子回单</option>
<option value="paper">纸质回单</option>
</select>
<select name="freightSettleWay" id="freightSettleWayQuery" class="form-control">
<option value="">-结算方式-</option>
<option value="cash">现金</option>
<option value="receipt">回付</option>
<option value="monthly">月结</option>
<option value="collect">到付</option>
</select>
<!-- <div class="form-group" id="data_5"> -->
<!-- <div class="input-daterange input-group" id="datepicker"> -->
<!-- <input type="text" class="input-sm form-control" name="start" placeholder="下单时间" value=""/> -->
<!-- <span class="input-group-addon">至</span> -->
<!-- <input type="text" class="input-sm form-control" name="end" placeholder="下单时间" value="" /> -->
<!-- </div> -->
<!-- </div> -->
<button id="btnQuery" type="button">查询</button>
</form>
</div>
<!-- 表格 -->
<div class="row">
<div class="col-lg-12">
<div class="ibox ">
<div class="ibox-content" style="padding: 15px 0px 0px 0px;">
<div class="jqGrid_wrapper">
<table id="table_list_1"></table>
<div id="pager_list_1"></div>
</div>
</div>
</div>
</div>
</div>
<div class="derive" style="bottom: 46px;">
<button id="btnWaybillAdd" type="button">新增</button>
<button id="entrucking" type="button">一键装车<span id="numbertext" style="display: none">(<span id="number"></span>单)</span></button>
<span id="num" style="display: none"></span>
</div>
</div>
</div>
<div id="tab-2" class="tab-pane">
<div class="panel-body">
<!-- 查询条件 -->
<div class="query-criteria" style="background: #fff; margin: 0; padding: 0; padding-top: 0px; padding-bottom: 10px;">
<form id="queryForm2">
<input name="waybillId" id="waybillIdQuery2" type="text" placeholder="承运单号" class="form-control input-text">
<select name="sendWay" id="sendWayQuery2" class="form-control">
<option value="">-发货方式-</option>
<option value="pick_up">上门提货</option>
<option value="by_oneself">自送站点</option>
</select>
<select name="deliveryWay" id="deliveryWayQuery2" class="form-control">
<option value="">-送货方式-</option>
<option value="pick_up">到站自提</option>
<option value="home_delivery">送货上门</option>
</select>
<select name="insure" id="insureQuery2" class="form-control">
<option value="">-是否投保-</option>
<option value="1">是</option>
<option value="2">否</option>
</select>
<select name="receiptWay" id="receiptWayQuery2" class="form-control">
<option value="">-回单方式-</option>
<option value="elec">电子回单</option>
<option value="paper">纸质回单</option>
</select>
<select name="freightSettleWay" id="freightSettleWayQuery2" class="form-control">
<option value="">-结算方式-</option>
<option value="cash">现金</option>
<option value="receipt">回付</option>
<option value="monthly">月结</option>
<option value="collect">到付</option>
</select>
<button id="btnQuery2" type="button">查询</button>
</form>
</div>
<!-- 表格 -->
<div class="row">
<div class="col-lg-12">
<div class="ibox ">
<div class="ibox-content" style="padding: 15px 0px 0px 0px;">
<div class="jqGrid_wrapper">
<table id="table_list_2"></table>
<div id="pager_list_2"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<#include "/common/common-js.html"/>
<script>
var item_selected = new Array();
$(document).ready(function () {
// Examle data for footable
// Configuration for jqGrid Example 1
$("#table_list_1").jqGrid({
url:"${request.contextPath}/waybill/waybillList?status=10",
datatype: "json",
height: 367,
autowidth: false,
width:2000,
shrinkToFit: true,
autoScroll: true,
rowNum: 10,
rowList: [10, 20, 30],
colNames: ['承运单号','下单时间','运单状态','货物','件数','重量','体积','发货人','发货人电话','发货人地址','收货人','收货人电话','收货人地址','结算方式','结算金额','操作'],
colModel: [
{name: 'waybillId', index: 'waybillId', width: 10,sortable:false,key:true},
{name: 'createTime', index: 'createTime', width: 10 ,sortable:false,formatter: formatterDate},
{name: 'status', index: 'status', width: 4 ,sortable:false,formatter: formatterStatus},
{name: 'cargoName', index: 'cargoName', width: 8 ,sortable:false},
{name: 'numberOfPackages', index: 'numberOfPackages', width: 3 ,sortable:false},
{name: 'weight', index: 'weight', width: 3 ,sortable:false},
{name: 'volume', index: 'volume', width: 3 ,sortable:false},
{name: 'consignor', index: 'consignor', width: 5 ,sortable:false},
{name: 'consignorMobile', index: 'consignorMobile', width: 8, sortable:false},
{name: 'consignorAddress', index: 'consignorAddress', width: 20 ,sortable:false,formatter: formatterConsignorAddress},
{name: 'consignee', index: 'consignee', width: 5 ,sortable:false},
{name: 'consigneeMobile', index: 'consigneeMobile', width: 8 ,sortable:false},
{name: 'consigneeAddress', index: 'consigneeAddress', width: 20 ,sortable:false,formatter: formatterConsigneeAddress},
{name: 'freightSettleWay', index: 'freightSettleWay', width: 5,sortable:false,formatter: formatterSettleWay},
{name: 'settleAmount', index: 'settleAmount', width: 8 ,sortable:false,formatter: formatterMoney},
{name: 'act', index: 'act', width: 8 ,sortable:false,formatter: formatterDelete},
],
pager: "#pager_list_1",
gridComplete:function() {
var _this = this;
if(item_selected.length>0){
for (var i = 0; i < item_selected.length; i++) {
$(_this).jqGrid('setSelection',item_selected[i]);
}
// console.info(item_selected);
}
},
onSelectAll:function(aRowids,status) {
var _this = this;
if(status){
item_selected = _.union(item_selected, aRowids);
$("#numbertext").show();
$("#number").text(item_selected.length)
}else{
item_selected = _.difference(item_selected, aRowids);
$("#number").text(item_selected.length);
}
},
//单选按钮选中单条数据事件
beforeSelectRow:function(rowid, e) {
var _this = this;
var index = _.indexOf(item_selected, rowid);
if(index==-1){
item_selected.push(rowid);
$("#numbertext").show();
$("#number").text(item_selected.length);
}
else{
item_selected = _.pull(item_selected, rowid);
$("#number").text(item_selected.length);
}
},
rownumbers: true,
multiselect: true,
viewrecords: true,
hidegrid: false
});
$("#table_list_2").jqGrid({
url:"${request.contextPath}/waybill/waybillList?status=20",
datatype: "json",
height: 367,
autowidth: true,
shrinkToFit: true,
autoScroll: true,
rowNum: 10,
rowList: [10, 20, 30],
colNames: ['承运单号','下单时间','运单状态','货物','件数','发货人','发货人电话','发货人地址','收货人','收货人电话','收货人地址','结算方式','结算金额','操作'],
colModel: [
{name: 'waybillId', index: 'waybillId', width: 12,sortable:false},
{name: 'createTime', index: 'createTime', width: 12 ,sortable:false,formatter: formatterDate},
{name: 'status', index: 'status', width: 5 ,sortable:false,formatter: formatterStatus},
{name: 'cargoName', index: 'cargoName', width: 8 ,sortable:false},
{name: 'numberOfPackages', index: 'numberOfPackages', width: 5 ,sortable:false},
{name: 'consignor', index: 'consignor', width: 5 ,sortable:false},
{name: 'consignorMobile', index: 'consignorMobile', width: 8, sortable:false},
{name: 'consignorAddress', index: 'consignorAddress', width: 20 ,sortable:false,formatter: formatterConsignorAddress},
{name: 'consignee', index: 'consignee', width: 5 ,sortable:false},
{name: 'consigneeMobile', index: 'consigneeMobile', width: 8 ,sortable:false},
{name: 'consigneeAddress', index: 'consigneeAddress', width: 20 ,sortable:false,formatter: formatterConsigneeAddress},
{name: 'freightSettleWay', index: 'freightSettleWay', width: 5,sortable:false,formatter: formatterSettleWay},
{name: 'settleAmount', index: 'settleAmount', width: 8 ,sortable:false,formatter: formatterMoney},
{name: 'act', index: 'act', width: 10 ,sortable:false,formatter: formatterDelete},
],
pager: "#pager_list_2",
//回显
rownumbers: true,
multiselect: true,
viewrecords: true,
hidegrid: false
});
// Add responsive to jqGrid
$(window).bind('resize', function () {
var width = $('.jqGrid_wrapper').width();
$('#table_list_1').setGridWidth(width);
$('#table_list_2').setGridWidth(width);
});
setTimeout(function(){
$('.wrapper-content').removeClass('animated fadeInRight');
},700);
$('#data_5 .input-daterange').datepicker({
keyboardNavigation: false,
forceParse: false,
autoclose: true
});
});
//标签页切换时表格对齐
$("#clickTab1").on("click", function () {
var width = $('.jqGrid_wrapper').width();
$('#table_list_1').setGridWidth(width);
});
$("#clickTab2").on("click", function () {
var width = $('.jqGrid_wrapper').width();
$('#table_list_2').setGridWidth(width);
$('#sumNum').val("6");
});
//点击查询按钮重新查询
$("#btnQuery").on("click", function () {
$("#table_list_1").jqGrid('setGridParam', {
datatype: 'json',
postData: getGridParam("#queryForm"), //发送数据
page: 1
}).trigger("reloadGrid"); //重新载入
});
$("#btnQuery2").on("click", function () {
$("#table_list_2").jqGrid('setGridParam', {
datatype: 'json',
postData: getGridParam("#queryForm2"), //发送数据
page: 1
}).trigger("reloadGrid"); //重新载入
});
function getGridParam(id) {
//定义参数数据集合
var parm = {};
//获取表单里面的所有数据进行组装条件查询
$.each($(id).serializeArray(), function (index, obj) {
var key = $.trim(obj.name);
var val = $.trim(obj.value);
//控件数值为字符串空情况不考虑在内
parm[key] = val
});
return parm;
}
$("#btnWaybillAdd").on("click", function () {
window.open('Add','_self');
});
//装车点击事件
$("#entrucking").on("click", function () {
var num=$("#num").text();
var numbers=$("#number").text();
if(num == null || num == ""){
//判断是否有值 没有值就直接全选
var number=$("#number").text();
if(number == null || number == ""){
$("#num").text("2");
$("#numbertext").show();
$("#table_list_1 input[type|=checkbox]").each(function(){
var id=this.id;
$(this).attr('checked','checked');
item_selected.push(id.substring(17));
})
}else{
if(numbers == 0){
return;
}
//勾选的事件
layer.open({
type: 2,
title: '装车单',
shadeClose: true,
shade: 0.8,
area: ['100%', '90%'],
content: '${request.contextPath}/loading/findviews?item_selected='+item_selected
});
return;
}
$("#number").text(item_selected.length);
}else{
if(numbers == 0){
return;
}
layer.open({
type: 2,
title: '装车单',
shadeClose: true,
shade: 0.8,
area: ['100%', '90%'],
content: '${request.contextPath}/loading/findviews?item_selected='+item_selected
});
}
});
//金额保留两位小数
function formatterMoney(cellvalue, options, row) {
var money = cellvalue.toFixed(2);
return money;
}
//发货人地址拼接
function formatterConsignorAddress(cellvalue, options, row) {
var address = row.consignorProv + row.consignorCity + row.consignorDistrict + cellvalue;
return address;
}
//收货人地址拼接
function formatterConsigneeAddress(cellvalue, options, row) {
var address = row.consigneeProv + row.consigneeCity + row.consigneeDistrict + cellvalue;
return address;
}
//运单状态
function formatterStatus(cellvalue, options, row) {
if (cellvalue == "10") {
return "已揽货";
} else if (cellvalue == "20") {
return "运输中";
} else if (cellvalue == "60") {
return "派件中";
} else if (cellvalue == "90") {
return "已签收";
} else {
return "--";
}
}
//结算方式
function formatterSettleWay(cellvalue, options, row) {
if (cellvalue == "cash") {
return "现金";
} else if (cellvalue == "receipt") {
return "回付";
} else if (cellvalue == "monthly") {
return "月结";
} else if (cellvalue == "collect") {
return "到付";
} else {
return "--";
}
}
function formatterDelete(cellvalue, options, row){
var selectHtml="<a class=\"btn btn-primary btn-xs\" href=\"javascript:void(0)\" onclick=\"detailWaybill('"+row.waybillId+"')\">详情</a>"
+ " <a class=\"btn btn-primary btn-xs\" href=\"javascript:void(0)\" onclick=\"deleteWaybill('"+row.waybillId+"')\">删除</a>";
return selectHtml;
}
//详情按钮
function detailWaybill(waybillId){
window.open('detail?waybillId='+waybillId,'_self');
}
//删除按钮
function deleteWaybill(waybillId){
var r=confirm("是否删除？");
if (r==true){
$.ajax({
type: "POST",
data:{"waybillId":waybillId},
url: "${request.contextPath}/waybill/waybillDelete",
dataType: "json",
success: function (flag) {
if(flag){
$("#table_list_1").jqGrid('setGridParam', {
datatype: 'json',
postData: getGridParam("#queryForm"), //发送数据
page: 1
}).trigger("reloadGrid"); //重新载入
}
},
error: function () {
}
})
}
}
//日期转换
function formatterDate(cellvalue, options, row) {
var oldTime = (new Date(cellvalue)).getTime();
var curTime = new Date(oldTime).format("yyyy-MM-dd hh:mm:ss");
return curTime
}
Date.prototype.format = function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt)) {
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
}
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<#include "/common/common-css.html"/>
<meta charset="utf-8">
<style>
.form-group {
margin-bottom: 0px;
}
.add-merchant .info label,.add-merchant .info .agree{text-align:left;}
</style>
</head>
<body class="payment-details">
<!-- page-heading -->
<div class="row wrapper border-bottom white-bg page-heading">
</div>
<div class="ibox-content">
<div class="row">
<div class="col-sm-8 b-r"><h3 class="m-t-none m-b">1、基本信息</h3>
<form id="queryForm2">
<div class="info">
<label><span>线路：</span>
<input id="originsite" name="originSite" type="text" placeholder="出发地">-
<input id="destinationsite" name="destinationSite" type="text" placeholder="目的地"><label>
<br/>
<label><span>车辆：</span>
<input id="driverid" name="driverid" type="text" style="display: none;">
<input id="drivername" name="driverName" type="text" placeholder="司机姓名" style="width: 10%">
<input id="drivermobile" name="driverMobile" type="text" placeholder="司机手机号" style="width: 20%">
<select style="width: 20%" name="VehicleSpecification" id="VehicleSpecification">
<option value="30">4.2米</option>
</select>
<input id="Vehicleplatenumber" name="VehiclePlateNumber" type="text" placeholder="输入车牌号" style="width: 15%">
<input id="Vehicletandemplatenumber" name="VehicleTandemPlateNumber" type="text" placeholder="拖挂车牌号" style="width: 15%">
<label>
</div>
</form>
</div>
<div class="col-sm-4">
<span>常用线路：</span><span>武汉——北京</span><br/>
<br/>
<span>常用车辆：</span><div style=" width: 80%; height:150px;">
<div id="top">
<div style="border:1px solid #7D9EC0; width: 20%;height: 50px;margin-left: 2%;margin-top: 2%;float: left; display: none;"onclick="getinfo(0)" id="divs0"></div>
<div style="border:1px solid #7D9EC0; width: 20%;height: 50px;margin-left: 2%;margin-top: 2%;float: left; display: none;" onclick="getinfo(1)" id="divs1"></div>
<div style="border:1px solid #7D9EC0; width: 20%;height: 50px;margin-left: 2%;margin-top: 2% ;float: left; display: none;"onclick="getinfo(2)" id="divs2" ></div>
<div style="border:1px solid #7D9EC0; width: 20%;height: 50px;margin-left: 2%;margin-top: 2% ;float: left; display: none;"onclick="getinfo(3)" id="divs3"></div>
</div>
<div id="index">
<div style="border:1px solid #7D9EC0; width: 20%;height: 50px;margin-left: 2%;margin-top: 2%;float: left; display: none;" onclick="getinfo(4)" id="divs4"></div>
<div style="border:1px solid #7D9EC0; width: 20%;height: 50px;margin-left: 2%;margin-top: 2%;float: left; display: none;" onclick="getinfo(5)" id="divs5" ></div>
<div style="border:1px solid #7D9EC0; width: 20%;height: 50px;margin-left: 2%;margin-top: 2%;float: left; display: none;" onclick="getinfo(6)" id="divs6"></div>
<div style="border:1px solid #7D9EC0; width: 20%;height: 50px;margin-left: 2%;margin-top: 2%;float: left; display: none;" onclick="getinfo(7)" id="divs7"></div>
</div>
</div>
</div>
</div>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-sm-10 b-r">
<h3 class="m-t-none m-b">2、装车信息</h3>
<div class="wrapper wrapper-content animated fadeInRight">
<input type="text" id="Order_number" value="${item_selected}" style="display: none;">
<div class="query-criteria" style="background: #fff; margin: 0; padding: 0; padding-top: 0px; padding-bottom: 10px;">
<form id="queryForm">
<div class="form-group" id="data_5">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="start" placeholder="下单时间" value=""/>
<span class="input-group-addon">至</span>
<input type="text" class="input-sm form-control" name="end" placeholder="下单时间" value="" />
</div>
</div>
<input name="waybillId" id="waybillIdQuery" type="text" placeholder="承运单号" class="form-control" style="width: 150px">
<input name="consignorCity" id="consignorCity" type="text" placeholder="始发地" class="form-control" style="width: 80px">
<input name="consigneeCity" id="consigneeCity" type="text" placeholder="目的地" class="form-control" style="width: 80px">
<input name="carrier" id="carrier" type="text" placeholder="专线公司" class="form-control" style="width: 80px">
<input name="cargoName" id="cargoName" type="text" placeholder="货物名称" class="form-control" style="width: 80px">
<input name="declaredValueStart" id="declaredValueStart" type="text" placeholder="申明价值" class="form-control" style="width: 80px">
<input name="declaredValueEnd" id="declaredValueEnd" type="text" placeholder="申明价值" class="form-control" style="width: 80px">
<select name="insure" id="insureQuery" class="form-control">
<option value="">-是否投保-</option>
<option value="1">是</option>
<option value="2">否</option>
</select>
<button id="btnQuery" type="button">查询</button>
</form>
</div>
<!-- 表格 -->
<div class="row">
<div class="col-lg-12">
<div class="ibox ">
<div class="ibox-content">
<div class="jqGrid_wrapper">
<table border="1px" width="100%" id="infotable" cellspacing="0px" style="border-collapse:collapse;margin-left: -20px">
<tr style="height: 30px">
<th width="2%"></th>
<th width="10%">下单时间</th>
<th width="14%">订单编号</th>
<th width="12%">线路</th>
<th width="10%">专线公司</th>
<th width="8%">货物名称</th>
<th width="10%">申明价值</th>
<th width="10%">投保诉求</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6"></div>
</div>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-sm-5 b-r">
<h3 class="m-t-none m-b">3、结算信息</h3>
<div class="ibox-content">
<form class="form-horizontal" id="feetinfo">
<label><span>货车司机：</span>
<select style="width: 100px" name="driverFreightSettleWay">
<option value="" selected='selected' >选择支付方式</option>
<option value="cash">现付</option>
<option value="collect">到付</option>
<option value="receipt" >回付</option>
<option value="monthly">月结</option>
</select>
<input id="amount" name="amount" type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" >元</label>
<br/>
<div id="div1" >
</div>
</form>
</div>
</div>
<div class="col-sm-7">
<div class="col-lg-4">
<div class="widget lazur-bg no-padding">
<div class="p-m">
<h2 class="font-bold no-margins">
总收入：
</h2>
<h1 class="m-xs"><small><span>￥</span><span id="allcount">0</span>.00元</small></h1>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="widget lazur-bg no-padding">
<div class="p-m">
<h2 class="font-bold no-margins">
成本支出：
</h2>
<h1 class="m-xs"><small><span>￥</span><span id="outcount">0.00</span>元</small></h1>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="widget lazur-bg no-padding">
<div class="p-m">
<h2 class="font-bold no-margins">
剩余收入：
</h2>
<h1 class="m-xs"><small><span>￥</span><span id="getcount">0.00</span>元</small></h1>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box" style="width:90%;">
<button type="button" class="btn btn-primary btn-lg" style="margin:0 auto;display:block; width: 200px" onclick="loadingBtn()">下一步</button>
</div>
<#include "/common/common-js.html"/>
<script>
var indexs;
var Compang;
var item_selected = new Array();
$(document).ready(function() {
var Order_number=$("#Order_number").val();
$.ajax({
url:"${request.contextPath}/loading/index?Order_number="+Order_number,
type:"POST",
dataType: "json",
success: function (data){
var settleAmount=data.settleAmount;//总金额
$("#allcount").text(settleAmount);//总金额赋值
var e =data.list;//得到运单信息
var cou=e.length;
var vehicleList = data.vehicleList;//得到司机信息
var lines=data.compangnum;
var insurenum=data.insurenum;
var declaredValuenums=data.declaredValuenum;
var declaredValuenum=declaredValuenums+='.00';
Compang =data.Compang;//公司
//拼接司机信息
for(var n=0; n<vehicleList.length; n++){
if( n < 8 ){
var vehicleId = vehicleList[n].vehicleId;//司机id
var driverName = vehicleList[n].driverName;//司机姓名
var driverMobile = vehicleList[n].driverMobile; //手机号
var vehicleSpecification = vehicleList[n].vehicleSpecification;//类型
var vehiclePlateNumber = vehicleList[n].vehiclePlateNumber;//车牌号
var vehicleTandemPlateNumber = vehicleList[n].vehicleTandemPlateNumber;//拖挂车牌号
$("#divs"+n).show();
var html="<span id='vehicleId"+n+"' style='display: none;''>"+vehicleId+"</span><span id='vehicleSpecification"+n+"' style='display: none;''>"+vehicleSpecification+"</span><span id='vehiclePlateNumber"+n+"' style='display: none;''>"+vehiclePlateNumber+"</span><span id='vehicleTandemPlateNumber"+n+"' style='display: none;''>"+vehicleTandemPlateNumber+"</span><span style='text-align: center;display:block;' id='driverName"+n+"'>"+driverName+"</span><br/><span id='driverMobile"+n+"'>"+driverMobile+"</span>";
$("#divs"+n).append(html);
}
}
//定义数组用来统计有几个专线公司的个数
var mycars = new Array();
var htmls="";//表格数据
var html="";//公司结算方式
for(var i=0;i<e.length;i++){
var createTime=formatterDate(e[i].createTime);//创建时间
var waybillId=e[i].waybillId;//订单编号
item_selected.push(waybillId);
var carrier=e[i].carrier;//专线公司
var carrierId=e[i].carrierId;//承运方专线公司ID
var consignorCity =e[i].consignorCity; //发货人city
var consigneeCity =e[i].consigneeCity; //收货人city
var line=consignorCity+"-"+consigneeCity;
if(i == 0){
mycars.push(carrier);
indexs=i;
html+="<label style='width: 400px' ><span>"+carrier+"：</span><select style='width: 100px' name='settleway"+i+"'><option value='' selected='selected' >选择支付方式</option><option value='cash'>现付</option><option value='collect'>到付</option><option value='receipt' >回付</option> <option value='monthly'>月结</option></select><input name='amount"+i+"' id='amount"+i+"' type='text' oninput='OnInput (event)' onpropertychange='OnPropChanged (event)'>元<input name='carrierid"+i+"' type='text' value='"+carrierId+"' style='display:none'></label>";
}else{
for(var j=0;j<mycars.length;j++){
if(carrier == mycars[j]){
}else{
mycars.push(carrier);
html+="<label style='width: 400px' ><span>"+carrier+"：</span><select style='width: 100px' name='settleway"+i+"'><option value='' selected='selected' >选择支付方式</option><option value='cash'>现付</option><option value='collect'>到付</option> <option value='receipt'>回付</option><option value='monthly'>月结</option></select><input name='amount"+i+"' id='amount"+i+"' type='text' oninput='OnInput (event)' onpropertychange='OnPropChanged (event)'>元<input name='carrierid"+i+"' type='text'value='"+carrierId+"' style='display:none'></label>";
indexs++;
}
}
}
var cargoName=e[i].cargoName;//货物名称
var declaredValues=e[i].declaredValue;//申明价值
var declaredValue=declaredValues += '.00';//申明价值
var insure=e[i].insure;//是否投保
if(insure == 1){
insure="要求投保";
}else{
insure="未投保";
}
htmls +="<tr style='height: 30px'><td><input type='checkbox' name='box' value='"+waybillId+"' onclick='checkboxOnclick(this)'></td><td>"+createTime+"</td><td>"+waybillId+"</td><td>"+line+"</td><td>"+carrier+"</td><td>"+cargoName+"</td><td>"+declaredValue+"</td><td>"+insure+"</td></tr>";
}
$("#infotable").append(htmls);
var count="<tr style='height: 30px'><td></td><td>已选择：<span id='order'>"+cou+"</span>个订单</td><td></td><td><span id='line'>"+lines+"</span>个线路</td><td><span id='compang'>"+Compang+"</span>个专线</td><td></td><td>总价值:<span id='num'>"+declaredValuenum+"</span>元</td><td><span id='count'>"+insurenum+"</span>个保险诉求</td></tr>";
$("#infotable").append(count);
$("#div1").append(html);
$('input[type|=checkbox]').attr('checked','checked');
}
});
//时间的转换
function formatterDate(cellvalue) {
var oldTime = (new Date(cellvalue)).getTime();
var curTime = new Date(oldTime).format("yyyy-MM-dd hh:mm:ss");
return curTime;
}
Date.prototype.format = function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt)) {
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
}
$('#data_5 .input-daterange').datepicker({
keyboardNavigation: false,
forceParse: false,
autoclose: true
});
});
function OnInput (event) {
var sum=0;
for(var i = 0;i<Compang;i++){
var amount=$("#amount"+i).val();
if(amount!=''){
sum += parseInt(amount);
}
}
var driver=$("#amount").val();
if(driver != ''){
sum += parseInt(driver);
}
sum += '.00';
$("#outcount").text(sum);//支出成本
var get=$("#allcount").text();
var getmoney= parseFloat(get)-sum;
getmoney += '.00';
$("#getcount").text(getmoney);//剩余金额
}
// Internet Explorer
function OnPropChanged (event) {
var sum=0;
for(var i = 0;i<Compang;i++){
var amount=$("#amount"+i).val();
if(amount!=''){
sum += parseInt(amount);
}
}
var driver=$("#amount").val();
if(driver != ''){
sum += parseInt(driver);
}
$("#outcount").text(sum);//支出成本
var get=$("#allcount").text();
var getmoney= parseFloat(get)-sum;
$("#getcount").text(getmoney);//剩余金额
}
//点击下一步的事件 保存装车单事件
function loadingBtn(){
var count=$("#getcount").text();
if(count<0){
alert("剩余金额不能为负数");
return;
}
var Ordernumbers=$("#Order_number").val();
//获取到基本信息
var information=getParmInfo("#queryForm2");
var feetinfo=getParmInfo("#feetinfo");
var obj=JSON.parse(feetinfo);
var feetArray = new Array();
for(var i=0;i<indexs;i++){
var key='settleway';
var settleways=obj.key;
}
var parm={
"information":information,
"Ordersnumbers":Ordernumbers,
"feetinfo":feetinfo,
"indexs":indexs
};
saveinfo(parm);
};
//传参保存方法
function saveinfo(parm){
$.ajax({
url:"${request.contextPath}/loading/addloading",
type:"POST",
data: parm,
dataType: "json",
success:function(e){
alert("成功");
}
})
};
function getinfo(i){
var vehicleId = $("#vehicleId"+i).text();//司机id
$("#driverid").val(vehicleId);
var driverName = $("#driverName"+i).text();//司机姓名
$("#drivername").val(driverName);
var driverMobile = $("#driverMobile"+i).text();//司机手机号
$("#drivermobile").val(driverMobile);
var vehicleSpecification = $("#vehicleSpecification"+i).text();//货车类型
$("#VehicleSpecification").val(vehicleSpecification);
var vehiclePlateNumber = $("#vehiclePlateNumber"+i).text();//货车车牌
$("#Vehicleplatenumber").val(vehiclePlateNumber);
var vehicleTandemPlateNumber = $("#vehicleTandemPlateNumber"+i).text();//甩挂
$("#Vehicletandemplatenumber").val(vehicleTandemPlateNumber);
}
//点击查询按钮事件
$("#btnQuery").on("click", function () {
var boxes = document.getElementsByName("box");
var information=getParmInfo("#queryForm");
var Ordernumberq=$("#Order_number").val();
var parm={
"information":information,
"Ordernumbers":Ordernumberq
};
$.ajax({
url:"${request.contextPath}/loading/findInfoByquery",
type:"POST",
data: parm,
dataType: "json",
success:function(e){
var list=e.lists;
var unms;//运单数量
if(list.length == 0){
$('input[type|=checkbox]').attr('checked',false);
}else{
item_selected.splice(0,item_selected.length);
for(i=0;i<boxes.length;i++){
for(j=0;j<list.length;j++){
unms = list.length;
if(boxes[i].value == list[j].waybillId){
boxes[i].checked = true;
item_selected.push(list[j].waybillId);
break
}else{
boxes[i].checked = false;
}
}
}
}
var lines=e.compangnum;//线路
var insurenum=e.insurenum;//是否投保
var declaredValuenum=e.declaredValuenum;//申明价值
var Compang=e.Compang;//公司
$("#order").text(unms);//订单
$("#line").text(lines);//线路
$("#compang").text(Compang);//专线
$("#num").text(declaredValuenum);//总价值:
$("#count").text(insurenum);//保险
}
})
});
//将数组转化为json
function getParmInfo(formId){
var parm = getGridParam(formId);
var parmInfo = JSON.stringify(parm);
return parmInfo;
}
function getGridParam(id) {
//定义参数数据集合
var pv = {};
//获取表单里面的所有数据进行组装条件查询
$.each($(id).serializeArray(), function(index, obj) {
var key = $.trim(obj.name);
var val = $.trim(obj.value);
//控件数值为字符串空情况不考虑在内
pv[key] = val
});
return pv;
}
//手动勾选事件
function checkboxOnclick(checkbox){
if (checkbox.checked == true){
item_selected.push(checkbox.defaultValue);
}else{
item_selected=removeItem(item_selected,checkbox.defaultValue)
}
if(item_selected.length == 0){
$("#order").text("0");//订单
$("#line").text("0");//线路
$("#compang").text("0");//专线
$("#num").text("0");//总价值:
$("#count").text("0");//保险
}else{
$.ajax({
url:"${request.contextPath}/loading/index?Order_number="+item_selected,
type:"POST",
dataType: "json",
success: function (data){
var unms;//运单数量
var list=data.list;
for(var i = 0 ;i<list.length;i++){
unms = list.length;
}
var lines=data.compangnum;//线路
var insurenum=data.insurenum;//是否投保
var declaredValuenum=data.declaredValuenum;//申明价值
var Compang=data.Compang;//公司
//重新赋值给文本框
$("#order").text(unms);//订单
$("#line").text(lines);//线路
$("#compang").text(Compang);//专线
$("#num").text(declaredValuenum);//总价值:
$("#count").text(insurenum);//保险
}
});
}
}
//移除数组中删除的元素值在用一个新的值进行接收
function removeItem(arr,item){
let newArr = [];
for(let value of arr){
if(value !== item){
newArr.push(value)
}
}
return newArr;
}
</script>
</body>
</html>