<!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" type="text/css" 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" /> </head> <body> <!-- 加载ing begin--> <div class="loading covers"> <div class="loading-bj"></div> <p>正在加载...</p> </div> <!-- 加载ing end --> <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" maxlength="12" param="applicantName" placeholder="请输入申请人姓名"> </div> <div class="mui-input-row"> <label>订单名称</label> <input type="text" reg="ch_en_num" param="orderName" placeholder="请输入订单名称"> </div> <div class="mui-input-row my-tit-row"> <label><h4>客户信息</h4></label> </div> <div class="mui-input-row"> <label>公司名称</label> <input type="text" reg="ch" maxlength="20" param="companyName" placeholder="请输入公司名称"> </div> <div class="mui-input-row"> <label>联系人</label> <input type="text" reg="ch" maxlength="12" param="contactName" placeholder="请输入联系人姓名"> </div> <div class="mui-input-row"> <label>联系电话</label> <input type="tel" reg="tel" maxlength="11" param="contactTel" placeholder="请输入联系人电话"> </div> <div class="mui-input-row my-tit-row"> <label><h4>订单信息</h4></label> </div> <ul class="pro-list"> <li> <div class="mui-input-row"> <label>产品名称</label> <input type="text" reg="ch_en_num" maxlength="12" subparam="itemProductName" placeholder="请输入产品名称"> </div> <div class="mui-input-row"> <label>品牌名称</label> <input type="text" reg="ch_en_num" maxlength="12" subparam="itemBrandName" placeholder="请输入品牌名称"> </div> <div class="mui-input-row"> <label>产品型号</label> <input type="text" reg="en_num" maxlength="12" subparam="itemProductModel" placeholder="请输入产品型号"> </div> <div class="mui-input-row"> <label>产品颜色</label> <input type="text" reg="ch" subparam="itemColorName" placeholder="请输入产品颜色"> </div> <div class="mui-input-row"> <label>产品数量</label> <input type="tel" reg="num" maxlength="5" subparam="itemProductNum" placeholder="请输入产品数量"> </div> <div class="mui-input-row"> <label>数量单位</label> <input readonly="readonly" reg="ch_num" subparam="itemProductUnit" type="text" placeholder="请选择数量单位" class="showpayPicker1"> </div> <div class="mui-input-row no-after"> <label>箱 / 套数</label> <input type="tel" reg="num" maxlength="5" subparam="itemProductBoxNumber" placeholder="请输入箱/套数"> </div> <span class="li-del">删除</span> </li> </ul> <div class="mui-content-padded mui-text-center"> <button type="button" class="mui-btn mui-icon mui-icon-plusempty"> 继续添加</button> </div> <div class="mui-input-row my-tit-row"> <label><h4>交付信息</h4></label> </div> <div class="mui-input-row"> <label>期望交付</label> <input type="text" reg="date" param="deliveryDate" placeholder="请选择期望交付时间" readonly="readonly" id="ipt-date"> </div> <div class="mui-input-row"> <label>交付方式</label> <input type="text" reg="ch" param="productionDeliveryWay" placeholder="请选择交付方式" readonly="readonly" id="showpayPicker"> </div> <div class="mui-input-row"> <label>交付备注</label> <input type="text" reg="ch_en_num" maxlength="140" param="productionDeliveryDesc" placeholder="请输入交付备注信息"> </div> <div class="mui-input-row my-tit-row"> <label><h4>包装说明</h4></label> </div> <div class="mui-input-row" style="height: 90px;"> <label style="display: none;">包装说明</label> <textarea maxlength="140" style="width: 100%;padding:10px 30px 10px 15px;" reg="ch_en_num" param="productionPackingWay" class="textarea bztextarea" rows="3" placeholder="请输入包装说明(必填)"></textarea> </div> <div class="mui-input-row my-tit-row"> <label><h4>合同信息</h4></label> </div> <div class="mui-input-row"> <label>合同名称</label> <input type="text" maxlength="20" reg="ch_en_num" param="contractName" placeholder="请输入合同名称"> </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 no-after"> <label>上传附件</label> </div> <div class="mui-content-padded" style="margin-top: 0;"> <div class="wrapper"> <div class="container"> <!--头部,相册选择和格式选择--> <div class="uploader" id="uploader2"> <div class="queueList" id="queueList2"> <div class="placeholder"> <div id="filePicker3" 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="filePicker4"></span> <div class="uploadBtn" id="uploadBtn2">开始上传</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;"> <label style="display: none;">订单备注</label> <textarea maxlength="140" class="textarea" style="width: 100%;padding:10px 30px 10px 15px;" rows="3" param="productionRemark" placeholder="请输入订单备注(非必填)"></textarea> </div> <div class="mui-input-row no-after"> <label style="width: 50%;"><h4>审核流程<span class="mui-h6"> (已预设流程)</span></h4></label> </div> </form> <div class="mui-content-padded" style="margin-top: 20px;"> <ul class="mui-table-view no-after"> <li class="mui-table-view-cell" style="padding: 11px 0px;"> <ul class="name-steps"> <!--<li class="active">张三</li> <li>李四</li> <li>王五</li> <li>赵六</li>--> </ul> </li> <li class="mui-table-view-cell" style="padding: 11px 0px;"> <h6>审核通过后由仓库 <span class="cl-blue" id="warehouseAdmin"></span> 执行入库</h6> </li> </ul> </div> </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" src="js/up2.js"></script> <script type="text/javascript"> var editData = JSON.parse(sessionStorage.getItem('editData')); console.log(editData) if(editData != null) { mui(".mui-input-group>.mui-input-row input[param],.mui-input-group>.mui-input-row textarea[param]").each(function() { var th = this; var label = th.previousElementSibling; switch(th.getAttribute("param")) { case 'applicantName': th.value = editData.returnMsg.approvalInfo.approvalApplicant; if(!th.value || (th.value).trim() == "") { msg = label.innerText + "不允许为空"; ws = false; return false; } else { checkReg(th, label); } break; case 'orderName': th.value = editData.returnMsg.approvalInfo.approvalProduction.orderName; if(!th.value || (th.value).trim() == "") { msg = label.innerText + "不允许为空"; check = false; return false; } else { checkReg(th, label); } break; case 'companyName': th.value = editData.returnMsg.approvalInfo.approvalProduction.companyName; if(!th.value || (th.value).trim() == "") { msg = label.innerText + "不允许为空"; check = false; return false; } else { checkReg(th, label); } break; case 'contactName': th.value = editData.returnMsg.approvalInfo.approvalProduction.contactName; if(!th.value || (th.value).trim() == "") { msg = label.innerText + "不允许为空"; check = false; return false; } else { checkReg(th, label); } break; case 'contactTel': th.value = editData.returnMsg.approvalInfo.approvalProduction.contactTel; if(!th.value || (th.value).trim() == "") { msg = label.innerText + "不允许为空"; check = false; return false; } else { checkReg(th, label); } break; case 'contactTel': th.value = editData.returnMsg.approvalInfo.approvalProduction.contactTel; if(!th.value || (th.value).trim() == "") { msg = label.innerText + "不允许为空"; check = false; return false; } else { checkReg(th, label); } break; case 'deliveryDate': th.value = editData.returnMsg.approvalInfo.approvalProduction.productionDeliveryDate; if(!th.value || (th.value).trim() == "") { msg = label.innerText + "不允许为空"; check = false; return false; } else { checkReg(th, label); } break; case 'productionDeliveryWay': th.value = editData.returnMsg.approvalInfo.approvalProduction.productionDeliveryWay; if(!th.value || (th.value).trim() == "") { msg = label.innerText + "不允许为空"; check = false; return false; } else { checkReg(th, label); } break; case 'productionDeliveryDesc': th.value = editData.returnMsg.approvalInfo.approvalProduction.productionDeliveryDesc; if(!th.value || (th.value).trim() == "") { msg = label.innerText + "不允许为空"; check = false; return false; } else { checkReg(th, label); } break; case 'productionPackingWay': th.value = editData.returnMsg.approvalInfo.approvalProduction.productionPackingWay; if(!th.value || (th.value).trim() == "") { msg = label.innerText + "不允许为空"; check = false; return false; } else { checkReg(th, label); } break; case 'contractName': th.value = editData.returnMsg.approvalInfo.approvalProduction.contractName; if(!th.value || (th.value).trim() == "") { msg = label.innerText + "不允许为空"; check = false; return false; } else { checkReg(th, label); } break; case 'productionRemark': if(typeof(editData.returnMsg.approvalInfo.approvalProduction.productionRemark) != "undefined") { th.value = editData.returnMsg.approvalInfo.approvalProduction.productionRemark; } break; default: break; } }); var table=document.body.querySelector(".pro-list"); table.innerHTML=''; mui(editData.returnMsg.approvalInfo.approvalProduction.listProductionItem).each(function() { var th=this; var li=document.createElement("li"); li.innerHTML='<div class="mui-input-row"><label>产品名称</label><input type="text" reg="ch_en_num" subparam="itemProductName" placeholder="请输入产品名称" value="'+this.itemProductName+'"></div><div class="mui-input-row"><label>品牌名称</label><input type="text" reg="ch_en_num" subparam="itemBrandName" placeholder="请输入品牌名称" value="'+this.itemBrandName+'"></div><div class="mui-input-row"><label>产品型号</label><input type="text" reg="en_num" subparam="itemProductModel" placeholder="请输入产品型号" value="'+this.itemProductModel+'"></div><div class="mui-input-row"><label>产品颜色</label><input type="text" reg="ch" subparam="itemColorName" placeholder="请输入产品颜色" value="'+this.itemColorName+'"></div><div class="mui-input-row"><label>产品数量</label><input type="tel" reg="num" subparam="itemProductNum" placeholder="请输入产品数量" value="'+this.itemProductNum+'"></div><div class="mui-input-row"><label>数量单位</label><input readonly="readonly" reg="ch_num" subparam="itemProductUnit" type="text" placeholder="请选择数量单位" class="showpayPicker1" value="'+this.itemProductUnit+'"></div><div class="mui-input-row no-after"><label>箱 / 套数</label><input type="tel" reg="ch_num" subparam="itemProductBoxNumber" placeholder="请输入箱/套数" value="'+this.itemProductBoxNumber+'"></div><span class="li-del">删除</span>'; table.appendChild(li); }); mui(".mui-input-group>.pro-list>li").each(function(index, el) { var subparameter = {}; $($(el).find(".mui-input-row input[reg]")).each(function() { var label = this.previousElementSibling; if(!this.value || (this.value).trim() == "") { msg = label.innerText + "不允许为空"; check = false; return false; } else { checkReg(this, label); } }); }); } mui.ready(function() { var payPicker = new mui.PopPicker(); payPicker.setData([{ value: '1', text: '微信' }, { value: '2', text: '支付宝' }, { value: '3', text: '银行卡' }, { value: '4', text: '现金' }]); var showpayPicker = document.getElementById('showpayPicker'); showpayPicker.addEventListener('tap', function(event) { var th = this; payPicker.show(function(items) { th.value = items[0].text; th.setAttribute("name", items[0].value); $(th).parent().addClass("check") //返回 false 可以阻止选择框的关闭 //return false; }); }, false); var Picker1 = new mui.PopPicker(); Picker1.setData([{ value: '个', text: '个' }, { value: '箱', text: '箱' }]); $(document).on('tap', ".showpayPicker1", function() { var th = this; Picker1.show(function(items) { th.value = items[0].text; th.setAttribute("name", items[0].value); $(th).parent().addClass("check"); //返回 false 可以阻止选择框的关闭 //return false; }); }); $.ajax(base_path + '/approval/getFindApplyRu?dates=' + new Date().getTime(), { data: { type: 1 }, 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") { var table = document.body.querySelector(".name-steps"); mui(dt.returnMsg.list).each(function(index) { var li = document.createElement("li"), active = '', th = this, str = ''; if(index == 0) { active = 'active'; } if(th.length > 1) { mui(th).each(function(index) { var name = this; if(name.length > 2) { name = name.substring(name.length - 2); } str += '<div>' + name + '</div>'; }); li.className = active + ' two'; li.innerHTML = str; table.appendChild(li); } else { li.className = active; var name = this[0]; if(name.length > 2) { name = name.substring(name.length - 2); } li.innerHTML = name; table.appendChild(li); } }); if(typeof(dt.returnMsg.warehouseAdmin) != "undefined") { str = ''; mui(dt.returnMsg.warehouseAdmin).each(function(index) { var name = this.adminName; if(name.length > 2) { name = name.substring(name.length - 2); str += (name + ' '); } }); $("#warehouseAdmin").text(str); } } else { mui.alert("获取数据失败!"); } } }, error: function(xhr, type, errorThrown) { console.log(xhr); mui.alert("获取数据失败!网络错误"); } }); $(".loading").hide().css("opacity", "0"); }); $(document).on('tap', '#ipt-date', function() { var th = $(this); var date = new Date(); var y = date.getFullYear(); var m = date.getMonth(); //获取当前月份的日期 var d = date.getDate(); var dtpicker = new mui.DtPicker({ type: "date", //设置日历初始视图模式 beginDate: new Date(), //设置开始日期 endDate: new Date(y + 1, m, d) //设置结束日期 }); dtpicker.show(function(e) { th.val(e.value); $(th).parent().addClass("check") }); }); //提交 var check = false, msg = ''; $(document).on('tap', '.submit>button', function() { $(".loading").css("opacity", "1"); $(".loading p").text("提交中..."); check = false, msg = ''; var parameter = {}; mui(".mui-input-group>.mui-input-row input[reg],.mui-input-group>.mui-input-row .bztextarea").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; } } }); var arr = []; if(check) { mui(".mui-input-group>.pro-list>li").each(function(index, el) { var subparameter = {}; $($(el).find(".mui-input-row input[reg]")).each(function() { var label = this.previousElementSibling; if(!this.value || (this.value).trim() == "") { msg = label.innerText + "不允许为空"; check = false; return false; } else { checkReg(this, label); if(this.getAttribute("subparam") != null) { subparameter[this.getAttribute("subparam")] = this.value; } } }); arr.push(subparameter); }); } parameter["productionItems"] = JSON.stringify(arr); //校验通过,继续执行业务逻辑 if(check) { // imgArray = [{ // "contractUrl": "../certificate1.jpg", // "contractType": "1" // }] if(imgArray.length > 0) { console.log("通过"); var imgArrayList = []; if(imgArray1.length > 0) { imgArrayList = imgArray.concat(imgArray1); } parameter["productionContracts"] = JSON.stringify(imgArrayList); console.log(imgArrayList) mui(".textarea[param=productionRemark]").each(function() { var label = this.previousElementSibling; if((this.value).trim() != "") { checkReg(this, label); if(check) { parameter["productionRemark"] = this.value; console.log(JSON.stringify(parameter)); $.ajax(base_path + '/approval/addApproval?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() { editData=null; 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*$/; //正整数0以上 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}$/; //简体中文英文数字,常用符号(1-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": var pa = $(th).parent().parent(); if(reg_Int.test(th.value)) { console.log(pa.find("input[subparam=itemProductNum]").val()) console.log(pa.find("input[subparam=itemProductBoxNumber]").val()) if(pa.find("input[subparam=itemProductBoxNumber]").val() != '') { if(pa.find("input[subparam=itemProductNum]").val() >= pa.find("input[subparam=itemProductBoxNumber]").val()) { check = true; pa.find("input[subparam=itemProductNum]").parent().addClass("check").removeClass("error"); pa.find(".no-after").addClass("check").removeClass("error"); } else { check = false; pa.find("input[subparam=itemProductNum]").parent().removeClass("check").addClass("error"); pa.find(".no-after").removeClass("check").addClass("error"); msg = "箱 / 套数不能大于产品数量"; } } else { 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 { checkReg(th, label); } }); $(document).on('tap', '.mui-icon-plusempty', function() { $(".pro-list").append('<li><div class="mui-input-row"><label>产品名称</label><input type="text" reg="ch_en_num" subparam="itemProductName" placeholder="请输入产品名称"></div><div class="mui-input-row"><label>品牌名称</label><input type="text" reg="ch_en_num" subparam="itemBrandName" placeholder="请输入品牌名称"></div><div class="mui-input-row"><label>产品型号</label><input type="text" reg="en_num" subparam="itemProductModel" placeholder="请输入产品型号"></div><div class="mui-input-row"><label>产品颜色</label><input type="text" reg="ch" subparam="itemColorName" placeholder="请输入产品颜色"></div><div class="mui-input-row"><label>产品数量</label><input type="tel" reg="num" subparam="itemProductNum" placeholder="请输入产品数量"></div><div class="mui-input-row"><label>数量单位</label><input readonly="readonly" reg="ch_num" subparam="itemProductUnit" type="text" placeholder="请选择数量单位" class="showpayPicker1"></div><div class="mui-input-row no-after"><label>箱 / 套数</label><input type="tel" reg="ch_num" subparam="itemProductBoxNumber" placeholder="请输入箱/套数"></div><span class="li-del">删除</span></li>'); }); $(document).on('tap', '.pro-list .li-del', function() { $(this).parent().remove(); }); </script> </body> </html>