<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>提货申请</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" />
<link rel="stylesheet" type="text/css" href="css/mui.picker.css"/>
<link rel="stylesheet" href="css/mui.poppicker.css"/>
<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
<link rel="stylesheet" type="text/css" href="css/webuploader.css" />
<link rel="stylesheet" type="text/css" href="css/up.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style>
.pro-list>li:first-child{margin: 12px 10px;border: 1px solid rgba(0,0,0,.1);border-top: 30px solid rgba(0,0,0,.1);position: relative;}
</style>
</head>
<body>
<div class="loading-bg">
<div class="mui-loading">
<div class="mui-spinner">
</div>
加载中...
</div>
</div>
<nav class="mui-bar mui-bar-tab submit">
<button type="button">提交申请</button>
</nav>
<div class="mui-content">
<form class="mui-input-group my-input-group no-after">
<div class="mui-input-row">
<label>提货人</label>
<input type="text" reg="ch" param="applyPickName" placeholder="请输入提货人姓名">
</div>
<div class="mui-input-row">
<label>提货原因</label>
<input type="text" reg="ch_en_num" param="applyPickReason" placeholder="请输入提货原因">
</div>
<div class="mui-input-row my-tit-row">
<label style="width: 50%;"><h4>审批订单<span class="mui-h6">(已通过审核订单)</span></h4></label>
</div>
<div class="mui-input-row">
<label>审批订单</label>
<input type="text" readonly="readonly" reg="ch_en_num" param="productionApprovalId" id="select-orderName" placeholder="请选择审批订单">
</div>
<ul class="pro-list">
<!--<li>
<div class="mui-input-row no-after">
<label>申请人</label>
<input type="text" readonly="readonly" value="张三">
</div>
<div class="mui-input-row no-after">
<label>订单名称</label>
<input type="text" readonly="readonly" value="爱贝源9月份内部采购">
</div>
<ul class="pro-iteam-list">
<li>
<div class="mui-input-row">
<label>产品名称</label>
<input type="text" readonly="readonly" subparam="itemProductName" value="优尼雅净水机">
</div>
<div class="mui-input-row">
<label>品牌名称</label>
<input type="text" readonly="readonly" subparam="itemBrandName" value="美国watero">
</div>
<div class="mui-input-row">
<label>产品型号</label>
<input type="text" readonly="readonly" subparam="itemProductModel" value="wb-1">
</div>
<div class="mui-input-row">
<label>产品颜色</label>
<input type="text" readonly="readonly" subparam="itemColorName" value="黑色">
</div>
<div class="mui-input-row">
<label>产品数量</label>
<input type="tel" readonly="readonly" subparam="itemProductNum" value="100台">
</div>
<div class="mui-input-row">
<label>箱 / 套数</label>
<input type="tel" readonly="readonly" subparam="itemProductBoxNumber" value="100">
</div>
<div class="mui-input-row no-after">
<label>提货数量</label>
<input type="text" reg="num" subparam="itemProductNum" placeholder="请输入提货数量（1~100台）">
</div>
</li>
<li>
<div class="mui-input-row">
<label>产品名称</label>
<input type="text" readonly="readonly" subparam="itemProductName" value="优尼雅净水机">
</div>
<div class="mui-input-row">
<label>品牌名称</label>
<input type="text" readonly="readonly" subparam="itemBrandName" value="美国watero">
</div>
<div class="mui-input-row">
<label>产品型号</label>
<input type="text" readonly="readonly" subparam="itemProductModel" value="wb-1">
</div>
<div class="mui-input-row">
<label>产品颜色</label>
<input type="text" readonly="readonly" subparam="itemColorName" value="黑色">
</div>
<div class="mui-input-row">
<label>产品数量</label>
<input type="tel" readonly="readonly" subparam="itemProductNum" value="100台">
</div>
<div class="mui-input-row">
<label>箱 / 套数</label>
<input type="tel" readonly="readonly" subparam="itemProductBoxNumber" value="100">
</div>
<div class="mui-input-row no-after">
<label>提货数量</label>
<input type="text" reg="num" subparam="itemProductNum" placeholder="请输入提货数量（1~100台）">
</div>
</li>
</ul>
</li>-->
</ul>
<div class="mui-input-row my-tit-row">
<label><h4>提货凭证</h4></label>
</div>
<div class="mui-input-row no-after">
<label>上传凭证</label>
</div>
<div class="mui-content-padded" style="margin-top: 0;">
<div class="wrapper">
<div class="container">
<!--头部，相册选择和格式选择-->
<div class="uploader" id="uploader1">
<div class="queueList" id="queueList1">
<div class="placeholder">
<div id="filePicker1" class="filePicker"></div>
<p>凭证照片最多可选5张</p>
</div>
</div>
<div class="statusBar" style="display:none;">
<div class="progress">
<span class="text">0%</span>
<span class="percentage"></span>
</div><div class="info"></div>
<div class="btns">
<span id="filePicker2"></span>
<div class="uploadBtn" id="uploadBtn1">开始上传</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mui-input-row my-tit-row">
<label><h4>提货备注</h4></label>
</div>
<div class="mui-input-row" style="height: 90px;margin-bottom: 30px;">
<label style="display: none;">提货备注</label>
<textarea class="textarea" style="width: 100%;padding:10px 30px 10px 15px;" rows="3" param="applyPickRemk" placeholder="请输入提货备注（非必填）"></textarea>
</div>
</form>
</div>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/mui.picker.min.js"></script>
<script type="text/javascript" src="js/mui.picker.js"></script>
<script type="text/javascript" src="js/mui.poppicker.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/webuploader.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/up1.js"></script>
<script type="text/javascript">
var approvalList=[],selectPro=[];
mui.ready(function(){
$.ajax(base_path + '/approval/approvalInfoList?dates=' + new Date().getTime(), {
data: {
"pageNO":1,
"pageSize":100,
// "selectType":1,
"productionState":2
},
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
type: 'post',
timeout: 15000,
success: function(dt) {
if(dt.isRedirect) {
location.href = dt.redirectURL;
} else {
console.log(dt)
if(dt.returnCode == "200") {
approvalList=dt.returnMsg.approvalList;
var arr=[];
mui.each(approvalList, function(index) {
var iteam = {};
iteam["value"]=this.approvalId;
iteam["text"]=this.approvalName;
arr.push(iteam);
});
var payPicker = new mui.PopPicker();
payPicker.setData(arr);
$(document).on('tap','#select-orderName',function(){
var th=this;
payPicker.show(function(items) {
th.value = items[0].text;
th.setAttribute("name",items[0].value);
var table = document.body.querySelector('.pro-list');
table.innerHTML='';
mui.each(approvalList, function(index) {
if(items[0].value==this.approvalId){
var li = document.createElement('li');
var str='<ul class="pro-iteam-list">';
var arr={};
mui.each(this.approvalProduction.listProductionItem, function(index) {
console.log(this);
arr["itemId"]=this.itemId;
arr["itemProductNum"]=this.itemProductNum;
// arr["itemProductName"]=this.itemProductName;
// arr["itemColorName"]=this.itemColorName;
str+='<li><div class="mui-input-row"><label>产品名称</label><input type="text" readonly="readonly" subparam="itemProductName" value="'+this.itemProductName+'"></div><div class="mui-input-row"><label>品牌名称</label><input type="text" readonly="readonly" subparam="itemBrandName" value="'+this.itemBrandName+'"></div><div class="mui-input-row"><label>产品型号</label><input type="text" readonly="readonly" subparam="itemProductModel" value="'+this.itemProductModel+'"></div><div class="mui-input-row"><label>产品颜色</label><input type="text" readonly="readonly" subparam="itemColorName" value="'+this.itemColorName+'"></div><div class="mui-input-row"><label>产品数量</label><input type="tel" readonly="readonly" subparam="itemProductNum" value="'+this.itemProductNum+this.itemProductUnit+'"></div><div class="mui-input-row"><label>箱 / 套数</label><input type="tel" readonly="readonly" subparam="itemProductBoxNumber" value="'+this.itemProductBoxNumber+'"></div><div class="mui-input-row no-after"><label>提货数量</label><input type="text" reg="num" subparam="itemProductNum" maxlength="'+(this.itemProductNum).toString().length+'" maxnum="'+this.itemProductNum+'" placeholder="请输入提货数量（1~'+this.itemProductNum+this.itemProductUnit+'）"></div></li>';
});
li.innerHTML='<div class="mui-input-row no-after"><label>申请人</label><input type="text" readonly="readonly" value="'+this.approvalProduction.applicantName+'"></div><div class="mui-input-row no-after"><label>订单名称</label><input type="text" readonly="readonly" value="'+this.approvalProduction.orderName+'"></div>'+str+'</ul>';
table.appendChild(li);
selectPro.push(arr);
}
});
//返回 false 可以阻止选择框的关闭
//return false;
});
});
} else {
mui.alert("获取数据失败！"+dt.resultMsg);
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
//mui.alert("获取数据失败！网络错误");
dt={
"resultCode": 200,
"resultMsg": "查询成功",
"returnCode": 200,
"returnMsg": {
"approvalList": [
{
"approvalId": 10,
"approvalName": "何秀刚的审批订单",
"approvalType": 1,
"approvalStatus": 1,
"approvalStatusDetails": "待liupanqiang审批",
"adminId": 1,
"approvalApplicant": "柳健康",
"activitiId": "52501",
"approvalDetails": "html内容",
"approvalRemark": "没有住",
"approvalCreateTime": 1539771459000,
"approvalProduction": {
"productionId": 10,
"approvalId": 10,
"applicantOrderNo": "订单编号",
"applicantName": "何秀刚",
"applicantId": 1,
"orderName": "20181017审批订单",
"companyName": "爱贝源",
"contactName": "王小明",
"contactTel": "15200000000",
"productionDeliveryDate": "2018-10-17",
"productionDeliveryWay": "快递",
"productionDeliveryDesc": "没有备注",
"productionState": 1,
"productionPackingWay": "随便",
"productionRemark": "没有住",
"productionCreateTime": 1539771459000,
"listProductionItem": [
{
"itemId": 6,
"productionId": 10,
"itemProductName": "爱贝源净水机",
"itemColorName": "红色",
"itemProductNum": 500,
"itemBrandName": "W",
"itemProductModel": "WB-1",
"itemProductUnit": "台",
"itemProductBoxNumber": 500,
"itemShouldStorage": 500,
"itemActualStorage": 0,
"itemLackNumber": 500,
"itemCreateTime": 1539771460000
},
{
"itemId": 7,
"productionId": 11,
"itemProductName": "watero净水机",
"itemColorName": "黑色",
"itemProductNum": 100,
"itemBrandName": "Watero",
"itemProductModel": "WB-1",
"itemProductUnit": "台",
"itemProductBoxNumber": 100,
"itemShouldStorage": 100,
"itemActualStorage": 0,
"itemLackNumber": 100,
"itemCreateTime": 1539771460000
}
]
},
"listProductionContract": [
{
"contractId": 7,
"approvalId": 10,
"contractUrl": "../certificate1.jpg",
"contractName": "../certificate1.jpg",
"contractCreateTime": 1539771460000
}
]
},
{
"approvalId": 11,
"approvalName": "张三的审批订单",
"approvalType": 1,
"approvalStatus": 1,
"approvalStatusDetails": "待liupanqiang审批",
"adminId": 1,
"approvalApplicant": "柳健康",
"activitiId": "52502",
"approvalDetails": "html内容",
"approvalRemark": "没有住",
"approvalCreateTime": 1539771459000,
"approvalProduction": {
"productionId": 10,
"approvalId": 11,
"applicantOrderNo": "订单编号",
"applicantName": "何秀刚",
"applicantId": 1,
"orderName": "20181017审批订单",
"companyName": "爱贝源",
"contactName": "王小明",
"contactTel": "15200000000",
"productionDeliveryDate": "2018-10-17",
"productionDeliveryWay": "快递",
"productionDeliveryDesc": "没有备注",
"productionState": 1,
"productionPackingWay": "随便",
"productionRemark": "没有住",
"productionCreateTime": 1539771459000,
"listProductionItem": [
{
"itemId": 7,
"productionId": 10,
"itemProductName": "xxx净水机",
"itemColorName": "红色",
"itemProductNum": 500,
"itemBrandName": "W",
"itemProductModel": "WB-1",
"itemProductUnit": "台",
"itemProductBoxNumber": 500,
"itemShouldStorage": 500,
"itemActualStorage": 0,
"itemLackNumber": 500,
"itemCreateTime": 1539771460000
},
{
"itemId": 8,
"productionId": 11,
"itemProductName": "666净水机",
"itemColorName": "黑色",
"itemProductNum": 100,
"itemBrandName": "Watero",
"itemProductModel": "WB-1",
"itemProductUnit": "台",
"itemProductBoxNumber": 100,
"itemShouldStorage": 100,
"itemActualStorage": 0,
"itemLackNumber": 100,
"itemCreateTime": 1539771460000
}
]
},
"listProductionContract": [
{
"contractId": 7,
"approvalId": 10,
"contractUrl": "../certificate1.jpg",
"contractName": "../certificate1.jpg",
"contractCreateTime": 1539771460000
}
]
}
]
}
}
if(dt.returnCode == "200") {
approvalList=dt.returnMsg.approvalList;
var arr=[];
mui.each(approvalList, function(index) {
var iteam = {};
iteam["value"]=this.approvalId;
iteam["text"]=this.approvalName;
arr.push(iteam);
});
var payPicker = new mui.PopPicker();
payPicker.setData(arr);
$(document).on('tap','#select-orderName',function(){
var th=this;
payPicker.show(function(items) {
th.value = items[0].text;
th.setAttribute("name",items[0].value);
mui.each(approvalList, function(index) {
if(items[0].value==approvalList[index].approvalId){
var table = document.body.querySelector('.pro-list');
var li = document.createElement('li');
var str='<ul class="pro-iteam-list">';
mui.each(this.approvalProduction.listProductionItem, function(index) {
console.log(this);
str+='<li><div class="mui-input-row"><label>产品名称</label><input type="text" readonly="readonly" subparam="itemProductName" value="'+this.itemProductName+'"></div><div class="mui-input-row"><label>品牌名称</label><input type="text" readonly="readonly" subparam="itemBrandName" value="'+this.itemBrandName+'"></div><div class="mui-input-row"><label>产品型号</label><input type="text" readonly="readonly" subparam="itemProductModel" value="'+this.itemProductModel+'"></div><div class="mui-input-row"><label>产品颜色</label><input type="text" readonly="readonly" subparam="itemColorName" value="'+this.itemColorName+'"></div><div class="mui-input-row"><label>产品数量</label><input type="tel" readonly="readonly" subparam="itemProductNum" value="'+this.itemProductNum+this.itemProductUnit+'"></div><div class="mui-input-row"><label>箱 / 套数</label><input type="tel" readonly="readonly" subparam="itemProductBoxNumber" value="'+this.itemProductBoxNumber+'"></div><div class="mui-input-row no-after"><label>提货数量</label><input type="text" reg="num" name="'+this.itemId+'" subparam="itemProductNum" placeholder="请输入提货数量（1~'+this.itemProductNum+this.itemProductUnit+'）"></div></li>';
});
li.innerHTML='<div class="mui-input-row no-after"><label>申请人</label><input type="text" readonly="readonly" value="'+this.approvalProduction.applicantName+'"></div><div class="mui-input-row no-after"><label>订单名称</label><input type="text" readonly="readonly" value="'+this.approvalProduction.orderName+'"></div>'+str+'</ul>';
table.appendChild(li);
}
});
//返回 false 可以阻止选择框的关闭
//return false;
});
});
} else {
mui.alert("获取数据失败！");
}
}
});
document.querySelector('.loading-bg').style.display='none';
});
//提交
var check = false,msg='';
$(document).on('tap','.submit>button',function(){
check = false,msg='';
var parameter = {};
mui(".mui-input-group>.mui-input-row input[reg]").each(function () {
//若当前input为空，则alert提醒
var th=this;
var label = th.previousElementSibling;
if(!th.value||(th.value).trim()==""){
msg=label.innerText+"不允许为空";
check = false;
return false;
}else{
checkReg(th,label);
if(th.getAttribute("param")!=null){
parameter[th.getAttribute("param")] = th.value;
}
}
});
//parameter["productionItems"]=arr;
//校验通过，继续执行业务逻辑
if(check){
parameter["productionApprovalId"]=$("#select-orderName").attr("name");
parameter["applyPickTel"]='13800138000';
mui(selectPro).each(function (index) {
var th=this,ix=index;
mui('.pro-iteam-list input[subparam=itemProductNum]').each(function () {
if(selectPro[ix].itemId==this.getAttribute("name")){
selectPro[ix].itemProductNum=this.value;
}
});
});
parameter["listApplyPickItemJson"]= JSON.stringify(selectPro);
if(imgArray.length>0){
console.log("通过");
parameter["imageJson"] = JSON.stringify(imgArray);
mui(".textarea[param=applyPickRemk]").each(function() {
var label = this.previousElementSibling;
console.log(this)
if((this.value).trim() != "") {
checkReg(this, label);
if(check) {
parameter["productionRemark"] = this.value;
console.log(JSON.stringify(parameter));
$.ajax(base_path + '/applyPick/addApplyPick?dates=' + new Date().getTime(), {
data: parameter,
dataType: 'json',
xhrFields: {
withCredentials: true
},
crossDomain: true,
traditional: true, //防止深度序列化
type: 'post',
timeout: 15000,
success: function(dt) {
console.log(dt)
if(dt.isRedirect) {
location.href = dt.redirectURL;
} else {
if(dt.returnCode == "200") {
mui.alert("提交成功！", function() {
location.href = "pro_order_list_index.html?type=1";
});
} else {
mui.alert("提交失败！");
}
}
},
error: function(xhr, type, errorThrown) {
console.log(xhr);
mui.alert("提交失败！网络错误");
}
});
} else {
msg = label.innerText + "格式错误";
mui.alert(msg);
}
}
});
}else{
mui.alert("请上传提货凭证照片");
}
}else{
mui.alert(msg);
}
});
function checkReg(th,label){
var reg_Tel =/^(0?(13|14|15|18|19)[\d]{9}$|(01|02|03|04|05|06|07|08|09)[\d]{7,10}$|(400|800)[0-9]{7}$)/; //手机,座机(400-800)
var reg_Ch=/^[\u4e00-\u9fa5]{2,}$/;//简体中文(2位以上)
var reg_Int=/^[1-9]\d*$/; //正整数1以上
var reg_Ch_Num=/^[0-9~!@#$%^&*()_+={}|<>?:;'"！@￥…（）｛｝【】《》/`、；‘’：\-—“”，。,.？·_\-\u4e00-\u9fa5]{1,140}$/;//简体中文数字,常用符号(1位以上)
var reg_En_Num=/^[A-Za-z0-9~!@#$%^&*()_+={}|<>?:;'"！@￥…（）｛｝【】《》/`、；‘’：\-—“”，。,.？·]{1,}$/;//英文数字,常用符号(1位以上)
var reg_Ch_En_Num=/^[A-Za-z0-9~!@#$%^&*()_+={}|<>?:;'"！@￥…（）｛｝【】《》/`、；‘’：\-—“”，。,.？·_\-\u4e00-\u9fa5]{1,140}$/;//简体中文英文数字，常用符号(0-140位)
var reg_Date=/^([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8])))/; //日期(2018-11-11)
switch (th.getAttribute("reg")){
case "ch":
if(reg_Ch.test(th.value)){
check = true;
$(th).parent().addClass("check").removeClass("error");
}else{
check = false;
$(th).parent().removeClass("check").addClass("error");
msg=label.innerText+"格式错误";
}
break;
case "num":
if(reg_Int.test(th.value)){
check = true;
$(th).parent().addClass("check").removeClass("error");
}else{
check = false;
$(th).parent().removeClass("check").addClass("error");
msg=label.innerText+"格式错误";
}
break;
case "ch_num":
if(reg_Ch_Num.test(th.value)){
check = true;
$(th).parent().removeClass("error").addClass("check");
}else{
check = false;
$(th).parent().removeClass("check").addClass("error");
msg=label.innerText+"格式错误";
}
break;
case "en_num":
if(reg_En_Num.test(th.value)){
check = true;
$(th).parent().removeClass("error").addClass("check");
}else{
check = false;
$(th).parent().removeClass("check").addClass("error");
msg=label.innerText+"格式错误";
}
break;
case "ch_en_num":
if(reg_Ch_En_Num.test(th.value)){
check = true;
$(th).parent().removeClass("error").addClass("check");
}else{
check = false;
$(th).parent().removeClass("check").addClass("error");
msg=label.innerText+"格式错误";
}
break;
case "date":
if(reg_Date.test(th.value)){
check = true;
$(th).parent().removeClass("error").addClass("check");
}else{
check = false;
$(th).parent().removeClass("check").addClass("error");
msg=label.innerText+"格式错误";
}
break;
case "tel":
if(reg_Tel.test(th.value)){
check = true;
$(th).parent().addClass("check").removeClass("error");
}else{
check = false;
$(th).parent().removeClass("check").addClass("error");
msg=label.innerText+"格式错误";
}
break;
default:
break;
}
}
$(document).on('input',".mui-input-group input[reg],.mui-input-group .bztextarea",function(){
var th=this,val=th.value;
var label = th.previousElementSibling;
//禁止用户输入空格
if(val.indexOf(" ")!=-1){
val=val.replace(" ", "");
$(th).val(val);
}
if(!val||val==""){
$(th).parent().removeClass("check error");
}else{
if($(th).attr("maxnum")!=null){
if(th.value>parseInt($(th).attr("maxnum"))){
$(th).val($(th).attr("maxnum"));
}
}
checkReg(th,label);
}
});
</script>
</body>
</html>