- 1、本文档共12页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
项目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组件中。
创建订单跟踪窗口部件按照前面介绍补充完代码,完成订单跟踪窗口部件的开发,并查询订单的实时状态。
文档评论(0)