complete_signclosed.ftl 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="renderer" content="webkit|ie-comp|ie-stand">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  8. <meta http-equiv="Cache-Control" content="no-siteapp" />
  9. <#include "/base/add_base.ftl">
  10. <link href="${path}/common/lib/jquery.ui/jquery-ui.css" rel="stylesheet" type="text/css"/>
  11. <link href="${path}/common/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css"/>
  12. <link href="${path}/common/lib/icheck/icheck.css" rel="stylesheet" type="text/css"/>
  13. <style>
  14. .tit{position: relative;text-align: left;font-size: 16px;padding-left: 10px;}
  15. .tit:after{content: '';position: absolute;left: 0;top: 20%;height: 60%;width: 3px;background-color: #32a3d8;}
  16. .tit-2{position: relative;text-align: left;font-size: 16px;padding-left: 10px;}
  17. .tit-2:after{content: '';position: absolute;left: 0;top: 20%;height: 60%;width: 3px;background-color: #32a3d8;}
  18. #province select{margin-right:10px; width:100px;height: 31px;-webkit-appearance:none !important;appearance:none;background: url(${path}/common/images/cm/select-1.png) right center no-repeat;background-size: auto 100%;padding-left:3px;padding-right: 25px;}
  19. #suggest, #suggest2 {width:200px}
  20. .gray {color:gray}
  21. .ac_results {background:#fff;border:1px solid #7f9db9;position: absolute;z-index: 10000;display: none}
  22. .ac_results li a {white-space: nowrap;text-decoration:none;display:block;color:#05a;padding:1px 3px}
  23. .ac_results li {border:1px solid #fff}
  24. .ac_over, .ac_results li a:hover {background:#c8e3fc}
  25. .ac_results li a span {float:right}
  26. .ac_result_tip {border-bottom:1px dashed #666;padding:3px}
  27. .select-box{background: url(${path}/common/images/cm/select-1.png) right center no-repeat;background-size: auto 100%;}
  28. .select-box select{-webkit-appearance:none !important;background-color: transparent; appearance:none;padding-right: 25px;}
  29. .dalog-ask{position: absolute;left:60%;top:0;-webkit-transform: translateY(-30%);transform: translateY(-30%);display: none;background-color: #fff;z-index: 10;}
  30. .tag{ width:300px; min-height:300px; border:1px solid #32a3d8; position:relative;background-color: #fff;line-height: 1.5;padding: 10px 12px;}
  31. .tag em{display:block; border-width:15px; position:absolute; top:30%; left:-30px;border-style:solid dashed dashed; border-color:transparent #32a3d8 transparent transparent;font-size:0; line-height:0;}
  32. .dalog-ask .ask{color: #000;margin: 10px 0 5px 0;}
  33. .dalog-ask .answer{color: #666;margin-bottom: 10px;}
  34. .dalog-ask .answer:hover{color: #32a3d8;cursor: pointer;}
  35. .time-line-list{list-style: none;width: 100%;margin-left: -20px;}
  36. .time-line-list>li{position: relative;float: left; text-align: center;width: 100px;overflow: hidden;white-space: nowrap;word-break: break-all;padding: 2px 0;}
  37. .time-line-list .number{display: inline-block; padding: 2px; background: #32a3d8;border: 2px solid #fff;box-shadow:0 0 0 1px #32a3d8;width: 20px;height: 20px;color: #fff;line-height: 20px;border-radius: 50%;}
  38. .time-line-list>li:before{content:'';position: absolute;height: 1px;width: 30%;right:0;top: 15px; background-color: #32a3d8;}
  39. .time-line-list>li:after{content: '';position: absolute;height: 1px;width: 30%;left: 0;top: 15px;background:#32a3d8;}
  40. .time-line-list>li:first-child:after,.time-line-list>li:last-child:before{display: none;}
  41. .time-line-list .arrow{border-width:7px; position:absolute; left:25%; top:9px;border-style:solid dashed dashed; border-color:transparent transparent transparent #32a3d8;font-size:0; line-height:0;}
  42. .time-line-list>li:first-child .arrow{display: none;}
  43. .table-bg th{background-color: #e2f6ff;}
  44. .update-parts>span{margin-right: 10px;padding: 3px 4px;background-color: #effaff;border: 1px solid #32a3d8;}
  45. .my-search-input{padding-left: 30px;background: url(${path}/common/images/cm/search.png) 6px center no-repeat;background-size: auto 60%; }
  46. </style>
  47. <title>完成签收 - 客诉管理 - RST</title>
  48. </head>
  49. <body>
  50. <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
  51. <span class="c-gray en">&gt;</span> 客诉管理
  52. <span class="c-gray en">&gt;</span> 完成签收
  53. <a class="btn radius r"
  54. style="line-height:1.6em;margin-top:3px;background: #32a3d8;color: #fff;border:1px solid #32a3d8;"
  55. href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
  56. </nav>
  57. <article class="page-container" style="padding: 10px;">
  58. <div class="pd-20 cl">
  59. <form action="" method="post" class="form form-horizontal" id="form-signclosed-add">
  60. <div class="row cl">
  61. <label class="form-label col-3 col-sm-3">寄送信息:</label>
  62. <div class="formControls col-4 col-sm-4">
  63. <#if (signclosedList?size > 0)>
  64. <#list signclosedList as signclosed>
  65. <#if signclosed.signclosedProductType == 1>
  66. ${signclosed.productName!''}-${signclosed.colorName!''}*${signclosed.productNum!''}台
  67. <#else>
  68. ${signclosed.productName!''}*${signclosed.productNum!''}件
  69. </#if>
  70. </#list>
  71. </#if>
  72. </div>
  73. </div>
  74. <div class="row cl">
  75. <label class="form-label col-3 col-sm-3">客服备注:</label>
  76. <#if ifcomplaintSignclosedInfo?? >${complaintSignclosedInfo.signclosedCustomerDesc!''}</#if>
  77. </div>
  78. <div class="row cl">
  79. <label class="form-label col-3 col-sm-3">寄回产品:</label>
  80. <div class="formControls col-8 col-sm-8 text-c" id="produceSelect">
  81. <div>
  82. <input type="text" oninput="selectProduct();" onpropertychange="selectProduct();" class="input-text" style="width: 100%;" id="selectProcuct" name="selectProcuct" placeholder="请输入产品名称搜索">
  83. </div>
  84. <table class="table table-border table-bg table-bordered">
  85. <thead>
  86. <tr class="text-c">
  87. <th style="text-align: center;" width="80">产品名称</th>
  88. <th style="text-align: center;" width="130">产品颜色</th>
  89. <th style="text-align: center;" width="100">产品配件</th>
  90. </tr>
  91. </thead>
  92. <tbody id="addProduct">
  93. <#if (signclosedList?size > 0)>
  94. <#list signclosedList as signclosed>
  95. <tr>
  96. <#if signclosed.signclosedProductType == 1>
  97. <td>${signclosed.productName!''}</td>
  98. <td style="margin: 0px;padding: 0px;height: 20px;">
  99. <table border="0">
  100. <td id="tdColorId${signclosed.signclosedProductColor!''}" style="border-top: 1px solid #ddd;">
  101. <input type="checkbox" checked value="${signclosed.signclosedProductColor!''}" name="alreadyColorName" datatype="*">${signclosed.colorName!''}
  102. <input type="text" style="width: 50px;margin-left: 10px;" value="${signclosed.productNum!''}" class="input-text" oninput="generateInput( ${signclosed.signclosedProductColor!''})" onpropertychange="generateInput(${signclosed.signclosedProductColor!''})" placeholder="数量" id="alreadyColorId${signclosed.signclosedProductColor!''}" name="alreadyColorId${signclosed.signclosedProductColor!''}"><br>
  103. <#list 1..signclosed.productNum as t>
  104. <input type="text" class="input-text" style="width: 110px;" placeholder="机器编号" name="machineNumber${signclosed.signclosedProductColor!''}" >
  105. </#list>
  106. </td>
  107. </table>
  108. </td>
  109. <td> </td>
  110. </#if>
  111. <#if signclosed.signclosedProductType == 2>
  112. <td></td>
  113. <td></td>
  114. <td><input type="checkbox" value="${signclosed.signclosedProductId!''}" name="alreadyFittingsName" datatype="*">${signclosed.productName!''}
  115. <input type="text" style="width: 50px;margin-left: 10px;" class="input-text" value="${signclosed.productNum!''}" placeholder="数量" id="alreadyFittingsId${signclosed.signclosedProductId!''}" name="alreadyFittingsId${signclosed.signclosedProductId!''}"><br>
  116. </td>
  117. </#if>
  118. </tr>
  119. </#list>
  120. </#if>
  121. </tbody>
  122. </table>
  123. </div>
  124. </div>
  125. <div class="row cl">
  126. <label class="form-label col-3 col-sm-3"><span class="c-red">*</span>寄件人信息:</label>
  127. <div class="formControls col-4 col-sm-4" style="margin-left: -0.9%">
  128. <input type="text" style="width: 150px;margin-left: 10px;" class="input-text" placeholder="寄件方姓名/公司名称" id="signclosedSendName" name="signclosedSendName" onkeyup="value=value.replace(/[A-Za-z\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[A-Za-z\d]/g,''))">
  129. <input type="text" style="width: 150px;margin-left: 10px;" class="input-text" placeholder="寄件方联系电话" id="signclosedSendTel" name="signclosedSendTel">
  130. </div>
  131. </div>
  132. <div class="row cl" style="position: relative;">
  133. <label class="form-label col-3 col-sm-3"><span class="c-red">*</span>寄件区域:</label>
  134. <div class="formControls col-4 col-sm-4 skin-minimal">
  135. <span class="select-box" style="width: 150px;">
  136. <select name="signclosedAddrProvinces" id="province" class="select">
  137. </select>
  138. </span>
  139. <span class="select-box" style="width: 150px;margin-left: 7px;">
  140. <select name="signclosedAddrCity" id="city" class="select">
  141. </select>
  142. </span>
  143. </div>
  144. <div class="formControls col-3 col-sm-3 skin-minimal">
  145. </div>
  146. </div>
  147. <div class="row cl">
  148. <label class="form-label col-3 col-sm-3"><span class="c-red">*</span>签收日期:</label>
  149. <div class="formControls col-5 col-sm-5 skin-minimal" style="margin-left: -0.9%">
  150. <input type="text" style="width: 150px;margin-left: 10px;" class="input-text my-input-date Wdate" placeholder="签收日期" onClick="WdatePicker({skin:'whyGreen',maxDate:'%y-%M-%d'})" id="signclosed_date" name="signclosed_date" readonly="readonly"/>
  151. </div>
  152. </div>
  153. <div class="row cl">
  154. <label class="form-label col-3 col-sm-3"><span class="c-red">*</span>是否少配件:</label>
  155. <div class="formControls col-5 col-sm-5 skin-minimal">
  156. <div class="radio-box">
  157. <input type="radio" id="tel-4" name="signclosedIsFittings" value="1" datatype="*" checked >
  158. <label for="tel-4">缺少配件</label>
  159. </div>
  160. <div class="radio-box">
  161. <input type="radio" id="tel-5" name="signclosedIsFittings" value="2" datatype="*">
  162. <label for="tel-5">不缺配件</label>
  163. </div>
  164. </div>
  165. </div>
  166. <div class="row cl" id="objectsStateId">
  167. <label class="form-label col-3 col-sm-3"><span class="c-red">*</span>物件状态:</label>
  168. <div class="formControls col-5 col-sm-5 skin-minimal">
  169. <div class="radio-box">
  170. <input type="radio" id="tel-12" name="signclosedObjectsState" value="1" datatype="*" checked >
  171. <label for="tel-12">正常签收</label>
  172. </div>
  173. <div class="radio-box">
  174. <input type="radio" id="tel-13" name="signclosedObjectsState" value="2" datatype="*">
  175. <label for="tel-13">物件不对</label>
  176. </div>
  177. </div>
  178. </div>
  179. <div class="row cl">
  180. <label class="form-label col-3 col-sm-3">备注:</label>
  181. <div class="formControls col-5 col-sm-5">
  182. <textarea name="signclosedDesc" id="signclosedDesc" cols="" rows="2" class="textarea" placeholder="请填写备注"></textarea>
  183. </div>
  184. </div>
  185. <div class="row cl">
  186. <div class="col-2 col-sm-2 col-offset-3">
  187. <input type="hidden" id="signclosedId" name="signclosedId" value="<#if complaintSignclosedInfo?? >${complaintSignclosedInfo.signclosedId!''}</#if>">
  188. <button onClick="add();" class="btn btn-block btn-primary size-XL" type="button">确认签收</button>
  189. </div>
  190. </div>
  191. </form>
  192. </div>
  193. </article>
  194. <script type="text/javascript" src="${path}/common/lib/My97DatePicker/4.8/WdatePicker.js"></script>
  195. <script type="text/javascript" src="${path}/common/lib/webuploader/0.1.5/webuploader.min.js"></script>
  196. <script type="text/javascript" src="${path}/common/lib/icheck/jquery.icheck.min.js"></script>
  197. <script type="text/javascript" src="${path}/common/lib/cm.lib/jquery.provincesCity.js"></script>
  198. <script type="text/javascript" src="${path}/common/lib/cm.lib/provincesData.js"></script>
  199. <script type="text/javascript" src="${path}/common/lib/cm.lib/airCity.js"></script>
  200. <#--<script type="text/javascript" src="${path}/common/lib/cm.lib/dimensions.js"></script>-->
  201. <script type="text/javascript" src="${path}/common/lib/cm.lib/suggest.js"></script>
  202. <script type="text/javascript">
  203. /*初始化单选框样式*/
  204. $(function(){
  205. $('.skin-minimal input').iCheck({
  206. checkboxClass: 'icheckbox-blue',
  207. radioClass: 'iradio-blue',
  208. increaseArea: '20%'
  209. });
  210. });
  211. //动态回显产品js state
  212. function selectProduct(){
  213. var productName = $("#selectProcuct").val();
  214. if(productName == null || productName == ""){
  215. var productTable = '<td colspan="3">暂无数据!</td>';
  216. $("#addProduct").html(productTable);
  217. return false;
  218. }
  219. $.ajax({
  220. cache: true,
  221. type: "POST",
  222. url: "${path}/admin/signclosed/select_product",
  223. data:{'productName':productName},
  224. async: false,
  225. success: function(data){
  226. if (data.returnCode == 200) {
  227. $("#addProduct").html("");
  228. $.each(data.returnMsg.productList,function(i,value) {
  229. var colorTable = '';
  230. var fittingsTable = '';
  231. /*var colorlength = value.colorList.length;
  232. var fittingslength = value.fittingsList.length;*/
  233. if(value.colorList != null) {
  234. if (value.colorList.length > 0) {
  235. $.each(value.colorList, function (i, value) {
  236. colorTable = colorTable + '<td id="tdColorId' + value.colorId + '" style="border-top: 1px solid #ddd; "><input type="checkbox" value="' + value.colorId + '" name="alreadyColorName" datatype="*">' + value.colorName + ''
  237. + '<input type="text" style="width: 50px;margin-left: 10px;" class="input-text" oninput="generateInput(' + value.colorId + ')" onpropertychange="generateInput(' + value.colorId + ')" placeholder="数量" id="alreadyColorId' + value.colorId + '" name="alreadyColorId' + value.colorId + '"><br>' +
  238. '</td>'
  239. });
  240. }else{
  241. colorTable = '<span>暂无颜色,请先添加产品颜色</span>';
  242. }
  243. }else {
  244. colorTable = '<span>暂无颜色,请先添加产品颜色</span>';
  245. }
  246. if(value.fittingsList != null) {
  247. if (value.fittingsList.length > 0) {
  248. $.each(value.fittingsList, function (i, value) {
  249. fittingsTable = fittingsTable + '<input type="checkbox" style="margin-left: 5px;" value="' + value.fittingsId + '" name="alreadyFittingsName" datatype="*">' + value.fittingsName + ''
  250. + '<input type="text" style="width: 50px;" class="input-text" value="" placeholder="数量" id="alreadyFittingsId' + value.fittingsId + '" name="alreadyFittingsId' + value.fittingsId + '"><br>'
  251. });
  252. }else{
  253. fittingsTable = '<span>暂无配件,请先添加配件</span>';
  254. }
  255. }else{
  256. fittingsTable = '<span>暂无配件,请先添加配件</span>';
  257. }
  258. var productTable = '<tr>'
  259. +'<td>'+value.productName+'</td>'
  260. +'<td style="margin: 0px;padding: 0px;height: 20px;"><table border="0" style="height: 65px;">'+colorTable+'</table></td>'
  261. +'<td style="margin: 0px;padding: 0px;height: 20px;">'+fittingsTable+'</td>'
  262. +'</tr>';
  263. $("#addProduct").append(productTable);
  264. });
  265. }else{
  266. var productTable = '<td colspan="3">暂无数据!</td>';
  267. $("#addProduct").html(productTable);
  268. }
  269. },
  270. error: function(XmlHttpRequest, textStatus, errorThrown){
  271. layer.msg('查询错误,请刷新页面重试',{icon: 5,time:1000});
  272. }
  273. });
  274. }
  275. //填写数量后动态生成相同数量的文本框
  276. function generateInput(colorId){
  277. var inputList = "";
  278. var number = $("#alreadyColorId"+colorId).val();
  279. var machineNumberName = "machineNumber"+colorId;
  280. if(!/^\d+$/.test(number)){
  281. layer.msg('请输入正确的数量',{icon: 5,time:1000});
  282. $('input[name='+machineNumberName+']').remove();
  283. return false;
  284. }
  285. $('input[name='+machineNumberName+']').remove();
  286. for (var i = 1;i<=number;i++){
  287. inputList = inputList + '<input type="text" class="input-text" style="width: 110px;" placeholder="机器编号" name="machineNumber' + colorId + '" >';
  288. }
  289. $("#tdColorId"+colorId).append(inputList);
  290. }
  291. //动态回显产品js end
  292. $(function(){
  293. var province = listProvince(null,null);
  294. var provinceHtml = '';
  295. for(var i=0;i<province.length;i++){
  296. provinceHtml += '<option value="'+ province[i].provinceId +'">'+ province[i].province +'</option>';
  297. }
  298. $("#province").html(provinceHtml);
  299. var city = listCity(null,null);
  300. var cityHtml = '';
  301. for(var i=0;i<city.length;i++){
  302. cityHtml += '<option value="'+ city[i].cityId +'">'+ city[i].city +'</option>';
  303. }
  304. $("#city").html(cityHtml);
  305. /*监听省选择事件*/
  306. $(document).on('change', '#province', function() {
  307. var proId = $("#province").val();
  308. var city = listCity(proId,null);
  309. var cityHtml = '';
  310. for(var i=0;i<city.length;i++){
  311. cityHtml += '<option value="'+ city[i].cityId +'">'+ city[i].city +'</option>';
  312. }
  313. $("#city").html(cityHtml);
  314. });
  315. });
  316. function add() {
  317. var signclosedSendName = $("#signclosedSendName").val();
  318. if( signclosedSendName == null || signclosedSendName == "" ){
  319. layer.msg('寄件人姓名不能为空',{icon: 5,time:1000});
  320. return;
  321. }
  322. /*var reg=/^[\u2E80-\u9FFF]+$/;
  323. if(!reg.text(signclosedSendName)){
  324. layer.msg('寄件人姓名格式错误',{icon: 5,time:1000});
  325. return;
  326. }*/
  327. if( signclosedSendName.length > 10 ){
  328. layer.msg('寄件人姓名长度不得大于10个字符',{icon: 5,time:1000});
  329. return;
  330. }
  331. var signclosedSendTel = $("#signclosedSendTel").val();
  332. if( signclosedSendTel == null || signclosedSendTel == "" ){
  333. layer.msg('请输入寄件人电话',{icon: 5,time:1000});
  334. return;
  335. }
  336. if( signclosedSendTel.length > 11 ){
  337. layer.msg('寄件人电话长度不得大于11个字符',{icon: 5,time:1000});
  338. return;
  339. }
  340. var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
  341. if(!myreg.test(signclosedSendTel)){
  342. layer.msg('寄件人电话格式不正确',{icon: 5,time:1000});
  343. return;
  344. }
  345. var signclosed_date = $("#signclosed_date").val();
  346. if( signclosed_date == null || signclosed_date == "" ){
  347. layer.msg('签收日期不能为空',{icon: 5,time:1000});
  348. return;
  349. }
  350. var signclosedDesc = $("#signclosedDesc").val();
  351. if( signclosedDesc != null || signclosedDesc == "" ){
  352. if( signclosedDesc.length > 300 ){
  353. layer.msg('备注长度不得大于150个字符',{icon: 5,time:1000});
  354. return;
  355. }
  356. }
  357. $.ajax({
  358. cache: true,
  359. type: "POST",
  360. url: "${path}/admin/signclosed/complete_signclosed",
  361. data:$('#form-signclosed-add').serialize(),// 你的formid
  362. async: false,
  363. success: function(data){
  364. if (data.returnCode == 200) {
  365. layer.msg('添加成功',{icon: 1,time:1000},function () {
  366. window.location.href= "${path}/admin/signclosed/select_signclosed_list";
  367. });
  368. } else if(data.returnCode == 501) {
  369. layer.msg('机器编号未填写',{icon: 5,time:1000});
  370. } else if(data.returnCode == 502) {
  371. layer.msg('请至少选择一件已签收的产品',{icon: 5,time:1000});
  372. }else {
  373. layer.msg('添加失败',{icon: 5,time:1000});
  374. }
  375. },
  376. error: function(XmlHttpRequest, textStatus, errorThrown){
  377. layer.msg('添加错误',{icon: 5,time:1000});
  378. }
  379. });
  380. }
  381. </script>
  382. <!--/请在上方写此页面业务相关的脚本-->
  383. </body>
  384. </html>