6.2 创建标识注册窗口部件.pptxVIP

项目6 工业标识解析在产品设备层创新应用——创建标识注册窗口部件

创建标识注册窗口部件如图所示，本案例中茶叶溯源标识的注册信息包括茶叶编码、茶叶名称、包装规格、生产地区、茶叶分类、生产线、原料编码、生产日期、质检情况和企业前缀等十项内容，所有项都有默认填充内容。这个窗口部件的功能模拟了茶叶包装环节的标识注册和标签打印，一旦操作员输入产品所有信息并单击“注册”按钮，系统会自动生成一个唯一的产品标识编码及对应二维码标签，单击“打印”按钮，就可以打印二维码标签（类似3.3.2小节的操作）。

创建标识注册窗口部件由于目前茶叶行业没有标识编码规范，本案例中的产品标识编码采用类似线缆的编码规范：“企业前缀/茶叶分类.企业自定义代码（茶叶编码）.厂区产线.日期.产品随机码”图示展示了单击“注册”按钮后生成的标识编码和相应的二维码。

创建标识注册窗口部件1．HTML和CSS资源相比6.2小节介绍的登录授权功能，标识注册需要生成二维码，表现在外部资源是多了一个二维码相关的js文件，如图所示。

创建标识注册窗口部件HTML部分还是采用表格布局，但比登录授权窗口复杂一些，可以将标识注册界面看成六行两列加上最后一行显示结果的表格布局，HTML代码结构如图所示，前六行分别对应从第6、26、46、66、86和106行折叠的代码。

创建标识注册窗口部件图示以第一个dx-field区块为例（第6-25行代码），里面有一个boxOptions区块，包括两个结构一致的区块（第8-15行和第16-23行）。这两个div区块的class属性为“box”，还定义了“data-options”属性；这里可以把box理解为方框所包含的容器空间。每个box里又有一个dx-field区块，相当于在容器里填充内容，内含两个子区块。两个子区块的class属性分别为“dx-field-label”和“dx-field-value”，对应方框里的两列。

创建标识注册窗口部件以第一个方框为例，第一列“dx-field-label”的值为“茶叶编码”，如第10行代码所示；第二列“dx-field-value”的值是一个id为cycode的变量，它的样式（方框）和值（“6632338570308”）都会在JavaScript中定义。对比第8-15行和第16-23行两部分代码，可以看出“data-options”属性中确定了两个box容器的占比（ratio）为1:1，即UI组件宽度一样。后面四行内容的代码（分别从第26、46、66、86行开始折叠）与第一行（这里的“行”是指表格布局里的行）类似，请参考JavaScript部分cydata字段后自行补充。

创建标识注册窗口部件现在来看最后两行，如图626所示，两个按钮的布局类似前面五行，即在boxOptions区域里放两个占比1:1的box区块。而结果显示区域（第116-121行）又分为两个div区块，第一个div区块的id为cyid，会在可见的方框里显示注册后的标识编码；第二个div区块的id为qrcode，会在方框后不可见的区域里显示标识对应的二维码，这个区块还设置style属性为text-align=center以及height属性为180px。

创建标识注册窗口部件CSS部分代码与登录授权窗口部件相同，参见图。

创建标识注册窗口部件2．JavaScript完成HTML和CSS资源后，下面就通过JavaScript代码来设置窗口部件的动态效果。如图展示了JavaScript代码结构，与登录授权部分一样，在完成数据初始化后，通过self.onInit完成部件的初始化，继续调用self的textLayout和btnLayout方法，其中self.btnLayout方法还会调用两个自定义函数，用于完成标识编码的拼接和标识的注册。这里多了两个工具函数，分别用于生成随机数和字符转码。

创建标识注册窗口部件（1）定义数据字段并初始化可以参考标识注册窗口界面定义数据字段，也可以根据实际需求增减字段。如图所示，除了产品随机码cyno和标识编码cyid，其余10个字段分别对应HTML中相应的id，所有字段都是字符串类型，字段初始值仅供参考。这里企业前缀prefix的初始值“88.121.19792”已经在前序章节中多次使用，如需要注册其他企业前缀，可修改该值。

创建标识注册窗口部件（2）重写窗口部件的初始化方法onInit如图所示，重写的self.onInit方法直接调用了textLayout和btnLayout方法，初始化窗口部件并设置按钮事件。至于第19-22行代码的作用，可以先自行思考，会在后面说明。

创建标识注册窗口部件（3）重写self.textLayout方法如图所示，调用jQuery对象的相关方法，设置输入框的初始值和输入要求等。其中包含