记12306货运系统“抢订空车”插件的编写--流程简化及核心代码_12306核心代码

--流程简化及核心代码

         接上文的流程分析，下面是订空车页面中，正常的订空车流程对应的完整时序图（笔者第一次画时序图，老费劲了……接受拍砖）：

         从中可以看出，在一次完整的订车过程中，用户与页面的交互共有五个点，分别是：

1. 触发预约列表
2. 选择预约项
3. 修改、保存订车信息
4. 显示和提报订车信息
5. 确认和提交。

        页面与后台服务器的交互共有五次，分别是：

1. 获取预约列表
2. 获取装卸车地点等信息（这一步单独存在，很不解）
3. 停限装校验
4. 保存订车信息（获取订车预约号）
5. 提交预约号。

        且不论这么麻烦冗余的步骤是否合理，我们可以看出用户与页面交互的几个点中，第三个点最耗时，且通常必不可少；而其他的点都可以通过javascript自动化完成或跳过。因此，我们的插件应该只有一次输入过程：提前确定选择预约列表中的第几项，并预先填写一些需要修改的订车信息项目，例如装车日期、订车数、货区货位等，然后把其余的步骤都自动化完成！

        我们插件的核心代码，应该透过现有页面的限制，打破“用户<-->页面”、“页面<-->服务器”这两种固有的交互模式，实现用户与服务器之间一步到位的交互，而页面上的表单只起辅助作用。我们的整个流程简化为：

1. 在表单中填写必要的信息（装车时间等）
2. 获取预约列表、自动选择一项
   

   //自动获取预约信息，然后填表
   function getPreserved(){
       var d = new Date();
       d.setDate(d.getDate() + 1);
       $.getJSON('/gateway/hydzsw/Dzsw/action/ZcrbjhAction_getYsxq',{
            q:'',
   //       limit:50,
   //       timestamp:1394861501408,
            zcrq:d.format('yyyy-MM-dd')},
            function(data, textStatus,jqXHR){
                if(data.length&& data.length > 0){
                     resultFunc(data[data.length-1]);//取最后一项
                }
        });
    }
   

3. 填充表单，即上述代码中取预约列表的最后一项，调用resultFunc函数来填充表格。其中resultFunc函数是在订空车页面的源码中定义的。如果第一步中填写的信息在这个函数中被覆盖了，我们就修改这个函数，删除可能导致覆盖的代码。
   

   functionresultFunc(item){
   	if (item) {
   		$("input[name='keyword']").val('');
   		var sycs = item.PZCS - item.JDZC4 - item.YPWZ - item.YQWP - item.FACS;
   		$("input[name='po.xqslh']").val(item.XQSLH);
   		$("input[name='po.pzycfh']").val(item.PZYCFH);
   		$("input[name='fzhzzm']").val(item.FZHZZM);
   		$("input[name='fjm']").val(item.FJQC);
   		$("input[name='fhdwmc']").val(item.FHDWMC);
   		$("input[name='dzhzzm']").val(item.DZHZZM);
   		$("input[name='djm']").val(item.DJQC);
   		$("input[name='shdwmc']").val(item.SHDWMC);
   		$("input[name='hzpm']").val(item.HZPM);
   		$("select[name='po.qqcz']").val(item.CZ);
   		$("input[name='po.qqcs']").val(sycs);
   		$("input[name='yqwp']").val(item.YQWP);
   		$("input[name='ypwz']").val(item.YPWZ);
   		$("input[name='jdzc4']").val(item.JDZC4);
   		$("input[name='po.qqds']").val($("input[name='po.qqcs']").val() * 60);
   		$("input[name='qqcsMax']").val(sycs);
   		$("input[name='po.ifzzjg']").attr("checked", item.IFZZJG == '1');
    
   		$("input[name='fztmism']").val(item.FZTMISM);
   		$("input[name='dztmism']").val(item.DZTMISM);
   		// $("input[name='fzyx']").val(item.FZYX);
   		// $("input[name='dzyx']").val(item.DZYX);
   		createZyx(item.PZYCFH);
   	}
   }
   

4. createZyx函数发起了另一个ajax请求来获取装卸车地点等信息并填充表单，蛋疼啊……这个函数也是原页面定义的，我们需要修改一下它，在填充完表单之后直接调用“保存”按钮的事件处理函数来校验表单并保存。我们来看一下“保存”按钮的事件处理函数的定义：
   

   $("#submitBtn").click(function(){
   	if (validator.form()) {
    
   		if (Number($("input[name='po.qqcs']").val()) > Number($(
   				"input[name='qqcsMax']").val())) {
   			alert("最大可用车数：" + $("input[name='qqcsMax']").val()
   					+ "，所报车数不能超过最大可用车数！");
   			$("input[name='po.qqcs']").focus();
   			return false;
   		}
    
   		if (Number($("input[name='po.qqds']").val()) > Number($(
   				"input[name='po.qqcs']").val()) * 80) {
   			alert("吨数不能超80吨/车！");
   			$("input[name='po.qqds']").focus();
   			return false;
   		} else {
   			function save() {
   				var url = $("#uuid").val() == "" ? "/gateway/hydzsw/Dzsw/action/ZcrbjhAction_add"
   						: "/gateway/hydzsw/Dzsw/action/ZcrbjhAction_updateForZcrbjh2";
   				$.ajax({
   					type : "post",
   					url : url,
   					data : $("#saveForm").serialize(),
   					dataType : "json",
   					error : function(xhr, msg, e) {
   						alert("空车数据保存失败");
   						mask.hide();
   					},
   					success : function(msg) {
   						if (msg.success) {
   							// alert("空车数据保存成功,"+msg["message"]);
   							alert2(
   									"空车数据已成功保存！<br/>您可以在”未报空车查询结果列表“中编辑、打印指定的运单或批量编辑、打印运单，也可凭预约号在车站打印运单。",
   									function() {
   										clearForm();
   									});
   							// mask.hide();
   						} else {
   							alert(msg["message"]);
   							mask.hide();
   						}
   					}
   				});
   			}
   			mask.show();
   			// 停限装校验
   			$.ajax({
   				type : "post",
   				url : "/gateway/hydzsw/Dzsw/action/TbInformationRestrictionAction_checkOrder",
   				async : false,
   				data : {
   					fztmism : $("#fztmism").val(),
   					dztmism : $("#dztmism").val(),
   					fzyx : $("#fzyx").val(),
   					dzyx : $("#dzyx").val(),
   					startDate : $("#zcrq").val(),
   					endDate : $("#zcrq").val()
   				},
   				dataType : "json",
   				error : function(xhr, msg, e) {
   				},
   				success : function(msg) {
   					if (msg.success) {
   						confirm(msg.message
   								+ "<br/>您确认保存数据？",
   								function() {
   									save();
   								}, function() {
   									mask.hide();
   								}, '停限装信息提示');
   					} else {
   						save();
   					}
   				}
   			});
   			// 将空车数据以ajax的方式进行提交 saveForm"
   			// action="ZcrbjhAction_add"
   			// document.saveForm.submit();
   		}
   	}
   });
   

5. 订空车信息保存成功之后，调用了clearForm函数来刷新“未报空车”列表。我们将刷新列表、选择再提交的繁琐步骤跳过，直接把结果提交！其中的关键参数是上步返回的对象中的uuid属性的值，也就是保存成功的预约空车的编号。
   

   $.ajax({
   	url : "/gateway/hydzsw/Dzsw/action/ZcrbjhAction_operateZcrbjh",
   	async : true,
   	type : "POST",
   	data : "op=10&uuids=" + param + "&mor_dzsw_security_info="
   			+ securityInfo,
   	success : function(msg) {
   		$.unblockUI();
   		if (msg.success) {
   			$("#grid").setGridParam({
   				datatype : "json"
   			}).trigger('reloadGrid');
   		}
   		if (msg.object) {
   			varerrorText;
   			if (msg.object.BQ) {
   				if (msg.object.ERROR) {
   					errorText = '客户提报预约号为' + msg.object.ERROR
   							+ '的单据的时间已超过受理时间,请删除对应单据重新提报';
   					errorText = errorText + '</br>预约号为' + msg.object.BQ
   							+ '的单据需要转为补充需求,您是否同意?';
   				} else {
   					errorText = '客户提报预约号为' + msg.object.BQ
   							+ '的单据需要转为补充需求,您是否同意?';
   				}
   				confirm(
   						errorText,
   						function() {
   							//alert(msg.object.BQUUID);
   							$.ajax({
   								type : "post",
   								url : "/gateway/hydzsw/Dzsw/action/ZcrbjhAction_operateZcrbjhBq",
   								data : "op=10&uuids="
   										+ msg.object.BQUUID
   										+ "&mor_dzsw_security_info="
   										+ securityInfo,
   								dataType : "json",
   								async : false,
   								error : function(xhr, msg, e) {
   								},
   								success : function(msg) {
   									if (msg.success) {
   										$("#grid").setGridParam({
   													datatype : "json"
   												}).trigger('reloadGrid');
   									}
   									alert("上报" + msg.message);
   								}
   							});
   						});
   			} else {
   				errorText = '客户提报预约号为' + msg.object.ERROR
   						+ '的单据的时间已超过受理时间,请删除对应单据重新提报';
   				alert(errorText);
   			}
   		} else {
   			alert("上报" + msg.message);
   		}
   	}
   });
   

        以上核心代码基本都来自原始的页面，我们将其重新组织了一下，用5个步骤完成了本文开头那个超复杂的时序图完成的工作，OMG！当然有一些步骤还是不能省的，比如表格的校验和错误提示信息，否则提交失败了却不知道原因，岂不是很失败……

        当然，虽然核心代码已经完成，但是具体操作时，直接用这些js代码还是存在诸多不便的，尤其是给普通用户使用时，比较麻烦，因此笔者想到了制作一个chrome插件，毕竟chrome内核的浏览器在国内的市场份额还是非常大的，市面上诸多的12306抢票浏览器也都是集成了插件的chrome内核的浏览器嘛。关于插件的开发文档不多，因此编写过程颇费了一番功夫，笔者抽空再把相关内容整理一下。