7.2 创建订单跟踪窗口部件.pptxVIP

项目7 工业标识解析在过程流程层创新应用——创建订单跟踪窗口部件

创建订单跟踪窗口部件图示展示了在订单跟踪窗口部件输入（包括扫描枪扫描输入）标识编码并单击“查询”按钮后显示的数据，可以看到窗口下部会出现完整的订单进度记录，而这部分在查询之前是不可见的。下面还是分HTML和CSS资源以及JavaScript代码两部分来实现窗口部件。

创建订单跟踪窗口部件1．HTML和CSS资源与前面的窗口部件一样，订单跟踪窗口部件包含第一行的标识显示框，中间的三行两列的表格以及最后一行的“查询”按钮，在HTML编辑页面，也使用了表格布局，如图所示。其中使用div元素将页面分割为多个独立区块，配合使用class属性重复定义相同样式的区域。

创建订单跟踪窗口部件由于显示框，按钮等元素的内容与前面章节的部件开发相似，这里就不在详细展开介绍，请参考前面的章节内容，自行补充学习。需要关注的是第76行代码，这部分用于显示查询返回的订单进度详细记录，但查询前是不可见的，所以，元素的style样式属性中，设置了高度自动与y方向内容溢出则提供滚动机制。

创建订单跟踪窗口部件2．JavaScript订单跟踪部件的JavaScript代码框架如图所示，除了自定义函数不同，基本结构仍与销售订单部件一致。这里按照实际需求定义数据对象cydata的属性，属性键值对会少于销售订单部件的cydata对象，键名可以相同。

创建订单跟踪窗口部件订单跟踪部件的self.onInit方法很简单，只需要调用self.textLayout和self.btnLayout两个方法。对于self.textLayout方法，除了标识编码的输入框，其余TextBox只用于显示查询结果，所以在编写代码时要注意属性value和disabled的设置，以实现如图所示的效果。

创建订单跟踪窗口部件在self.btnLayout方法中，需设置“查询”按钮的单击响应事件，这里的逻辑与销售订单部件不同，是先从输入框获取标识编码，再调用自定义的标识查询函数，从二级节点指定接口中查询记录并从响应参数中提取数据。

创建订单跟踪窗口部件最后来完成订单跟踪部件最重要的标识查询功能，也就是self.btnLayout方法中调用的自定义函数searchCode。如图所示，在调用GET接口查询标识之前，先对将要显示查询结果的UI组件进行了初始化，因为这部分没有在self.textLayout方法中实现。还需要注意的是这里的UI组件为TextArea，它与TextBox的最大区别是：TextArea能显示多行而TextBox只能显示一行。

创建订单跟踪窗口部件另外，与标识注册使用POST请求不同，查询标识使用GET请求，二者体现在这里的最大区别是：GET请求会在URL地址后以?的形式加上发给服务器的数据，如图第94行代码所示的?handle=code，其中code是searchCode函数的第2个参数；而POST请求则是在实体（body）内容中指出发给服务器的数据data。

创建订单跟踪窗口部件success回调函数先将返回的value数组中下标为2~7的元素值分别显示在对应的TextBox组件。然后就是解析订单进度schedule的值，将不同时间的进度记录逐条显示在TextArea组件中。这里举例说明一下schedule的值：[{name:平台下单,time:1655951931295},{name:裁片出库,time:1655953935816},{name:裁片缝制,time:1655954164845}]这里的任务是将上述格式的数据转换如下记录并加上序号显示：2022/6/2310:38:52平台下单2022/6/2311:11:43裁片出库2022/6/2311:16:04裁片缝制

创建订单跟踪窗口部件先用JSON.parse()方法将JSON数据转换为JavaScript对象，结果是一个数组，数组成员是对象（Object），如数组下标为0的元素：{name:已下单,time:1655951931295}所以，需要把整数形式的时间戳转换为yyyy/mm/ddhh:mm:ss格式，用到了parseInt()和toLocaleString()两个方法，同时在不同字符串之间拼接如‘\t’、‘\n’、‘\r’等转义字符，使得记录显示地更整齐，具体代码可参考图示。最后再将字符串str显示于id为scheduleList的TextArea组件中。

创建订单跟踪窗口部件按照前面介绍补充完代码，完成订单跟踪窗口部件的开发，并查询订单的实时状态。