# 组装"生成工单"页面 "生成工单"对应设备管理流程的第一个节点，客服人员使用这个页面完成维修信息录入，生成维修工单，并提交给派单人员处理。该页面使用标准页面组装实现。 #### 页面组件分析 "生成工单"页面的组装过程如下： 1. 在页面中，拖入一个**容器**组件。 2. 在**容器** 组件中，拖入一个**表单** 组件和**容器** 组件。 1. 将**表单** 组件分割为**3个区域**："基本信息"、"设备信息"、"其他信息"。 2. 将2级**容器**作为"按钮"区域。 组装完成后，整个页面有4个区域，如[图1]所示。 图1生成工单页面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231481.png "点击放大") 其中，"基本信息"、"设备信息"是通过数据绑定页面模型直接创建的表单，"其他信息"及"按钮"区域是手动拖入的组件，然后再进行数据绑定，页面中详细组件分布如[图2]所示。 图2页面组件分析 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835206.png "点击放大") #### 页面模型分析 页面模型负责与页面组件交互，获取生成工单需要的数据，页面模型需要先定义，然后再与页面组件进行绑定。 对于设备维修工单，需要录入的信息包括：工单基本信息、设备信息以及工单扩展信息。 打开创单页面，有如下处理逻辑： 1. 在"基本信息"区域指定"设备名称"时，在"设备详情"区域自动显示设备信息。该能力需要开发（equipmentSelectListQuery）脚本实现。 2. 填写完工单，单击"提交"按钮后，会创建一个工单实例。该能力通过调用BPM实现。 结合填单页面需求，以及前端组件对应关系，需要创建如下模型： 表1模型分析 | 模型名称 | 作用 | 来源 | 详细定义 | |:---|:---|:---|:---| | basicInfo | 保存工单的基本信息，将与"基础信息"、"其他信息"区域中各个组件绑定 | 自定义模型 | 新增的字段名称请与下面字段名称保持一致，后续将绑定页面组件。包含的节点如下，这些节点与前台页面上的工单基本信息一一对应，加粗斜体部分要替换为自己账号对应的命名空间： - ***HW__*** equipmentId__CST：设备ID，字段类型**SingleSelect**。 - ***HW__***title__CST：工单标题，字段类型Text。 - createdDate：创建时间，字段类型**DateTime**。 - ***HW__*** type__CST：工单类型，字段类型**SingleSelect**。 - ***HW__*** priority__CST：工单优先级，字段类型**SingleSelect**。 - ***HW__*** description__CST：工单备注说明，字段类型**TextArea**。 - ***HW__***faultPhenomenon__CST：故障现象说明，字段类型Text。 - ***HW__***customer__CST：客户接口人，字段类型Text。 - ***HW__*** recoveryTime__CST：客户要求故障恢复时间，字段类型**DateTime**。 - ***HW__***source__CST：工单来源，字段类型Text。 - ***HW__*** arriveTime__CST：客户要求工程师到达现场时间，字段类型**DateTime**。 | | equipmentInfo | 获取设备详细信息，将与"设备信息"区域组件绑定 | 自定义模型 | 将绑定页面组件。包含的计算节点如下，这些节点与前台页面上的设备信息一一对应，加粗斜体部分要替换为自己账号对应的命名空间： - name：设备名称，字段类型Text。 - ***HW__***equipmentSN__CST：设备编码，字段类型Text。 - ***HW__***equipmentBrand__CST：设备品牌，字段类型Text。 - ***HW__***equipmentModel__CST：设备型号，字段类型Text。 - ***HW__***fullAddress__CST：设备完整地址，字段类型Text。 **这些节点名称需要与设备对象的字段名保持一致。** | | equipmentList | 查询系统中的设备，设备名称下拉框的属性值绑定模型 | 自定义模型 | 与"设备名称"下拉框绑定，将从下拉框的值赋给当前下拉框值。 | | equipmentOptions | 查询系统中的设备，设备下拉框的可选项 | 服务模型 | 与公共接口equipmentSelectListQuery关联。 | | setInstanceId | 查询系统中的设备，设备下拉框的可选项 | 服务模型 | 与公共接口createWorkOrder关联。 | #### 操作步骤 1. 进入[创建"设备维修管理系统"应用](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_07_1009.html)中创建的应用。 2. 在"WorkOrder"目录中，鼠标放在"Page"上，单击界面上出现的"+"，在弹出菜单中选择"标准页面"。 3. 在"标签"和"名称"文本框中输入"createWorkOrder"，单击"添加"。 当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675246.png)进行锁定。 4. 在标准页面的"设计视图"下，单击页面底部的"模型视图"页签，切换到"模型视图"。 图3切换模型视图 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835210.png "点击放大") 5. 定义模型"basicInfo"。 1. 在模型视图页面，单击"新增模型"。 2. 添加自定义模型，模型名称"basicInfo"，单击"下一步"。 3. 单击"新增节点"，新增设备ID字段"***HW__***equipmentId__CST"，并设置字段类型"SingleSelect"，加粗斜体内容请替换为实际命名空间前缀。 4. 依次增加[表2]中列出的字段名称，单击"下一步"，再单击"确定"。 图4新增节点字段 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991445.png "点击放大") 表2新增basicInfo模型的节点字段 | 字段名称 | 字段类型 | 字段描述 | |:---|:---|:---| | ***HW__***equipmentId__CST（上一步已添加） | **SingleSelect** | 设备ID | | ***HW__***title__CST | Text | 工单标题 | | createdDate | **DateTime** | 创建时间 | | ***HW__***type__CST | **SingleSelect** | 工单类型 | | ***HW__***priority__CST | **SingleSelect** | 工单优先级 | | ***HW__***description__CST | **TextArea** | 工单备注说明 | | ***HW__***faultPhenomenon__CST | Text | 故障现象说明 | | ***HW__***customer__CST | Text | 客户接口人 | | ***HW__***recoveryTime__CST | **DateTime** | 客户要求故障恢复时间 | | ***HW__***source__CST | Text | 工单来源 | | ***HW__***arriveTime__CST | **DateTime** | 客户要求工程师到达现场时间 | 5. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992834.png)，保存设置。 6. 定义模型"equipmentList"。 1. 在模型视图页面，单击"新增模型"。 2. 添加自定义模型，模型名称"equipmentList"，单击"下一步"。 3. 单击"下一步"，再单击"确定"。 4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071977.png)，保存设置。 7. 定义模型"equipmentInfo"。 1. 在模型视图页面，单击"新增模型"。 2. 添加自定义模型，模型名称"equipmentInfo"，单击"下一步"。 3. 单击"新增节点"，依次新增[表3]中列出的字段名称，单击"下一步"，再单击"确定"。 表3新增equipmentInfo模型的节点字段 | 字段名称 | 字段类型 | 字段描述 | |:---|:---|:---| | name | Text | 设备名称 | | ***HW__***equipmentSN__CST | Text | 设备编码 | | ***HW***__equipmentBrand__CST | Text | 设备品牌 | | ***HW***__equipmentModel__CST | Text | 设备型号 | | ***HW***__fullAddress__CST | Text | 设备完整地址 | 4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992810.png)，保存设置。 8. 定义模型"equipmentOptions"。 1. 在模型视图页面，单击"新增模型"。 2. 添加服务模型，模型名称"equipmentOptions"，单击"下一步"。 3. 设置服务类型为"公共接口"，"项目"选择"设备维修管理系统"，公共接口为"equipmentSelectListQuery"，即[创建"查询设备列表"脚本](https://support.huaweicloud.com/bestpractice-astrozero/astrozero_07_1035.html)中定义的脚本"equipmentSelectListQuery"对应的公共接口，单击"下一步"，再单击"确定"。 图5选择服务 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001932123762.png "点击放大") 4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675226.png)，保存设置。 9. 定义模型"setInstanceId"。 1. 在模型视图页面，单击"新增模型"。 2. 添加服务模型，模型名称"setInstanceId"，单击"下一步"。 3. 设置服务类型为"公共接口"，"项目"选择"设备维修管理系统"，公共接口为"createWorkOrder"，即"生成工单"脚本"createWorkOrder"对应的公共接口，单击"下一步"，再单击"确定"。 4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835178.png)，保存设置。 10. 拖拽页面框架组件（"基本信息"、"设备信息"、"其他信息"以及"按钮"区域）。 1. 单击页面底部的"设计视图"页签，切换到"设计视图"。 2. 从基本组件列表区拖拽"容器"到右侧"页面内容"中，然后再拖拽一个"表单"到"容器"中，并在"元数据表单配置向导"弹窗中，单击"取消"。 3. 拖拽一个"容器"到"表单"下方（**表单之外** ），作为按钮区域的容器。 图6拖拽按钮区域容器 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991441.png) 4. 选择"表单"，拖一个"折叠面板"组件到"表单"中，并在页面右下角的组件树中，删除2个"折叠页"（在组件树中，选中后单击鼠标右键，再单击"删除"即可），删除后折叠面板包含1个折叠页。 图7组件层级关系及删除多余折叠页 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991453.png) 5. 在"折叠面板"中，选中"折叠页签标题"，然后在右侧"属性"页签中进行以下设置： - 在"样式"下的"背景"，将背景颜色修改为浅蓝色（#9BCCEF）。 图8设置背景为浅蓝色 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001932284434.png) - 选中图标![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001932286390.png "点击放大")，设置图标颜色为深蓝色（#004080）。 图9设置图标颜色为深蓝色 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001959326925.png) - 选中图标后的"标签"，设置"文本内容"为"基本信息"。 图10设置标签内容为基本信息 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001959207933.png) 您还可以根据需要，修改边距等其他样式，使其更美观。 6. 展开组件树，将鼠标放在折叠面板上，单击右键选择"复制"，再单击右键选择2次"粘贴"，在折叠面板之后，添加2个同样的折叠面板。 图11粘贴后的折叠面板 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433152102.png) 7. 分别设置第二、第三个折叠面板的"折叠页签标题"为"设备信息"、"其他信息"。 图12修改折叠页标题 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992826.png "点击放大") 8. 单击界面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991433.png)，保存页面。 11. 组装"基本信息"区域。 1. 在"基本信息"所在的折叠面板下，从左侧组件列表中，拖一个"表单"到"折叠页签内容"中，然后在"元数据表单配置向导"弹窗中，单击"取消"。 图13拖入表单 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231477.png "点击放大") 2. 选中"表单"，在右侧属性中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991449.png)，在模型选择弹窗中选中"basicInfo"，单击"确定"，并在提示弹窗中，单击"绑定并生成表单"。 图14表单数据绑定 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433152098.png) 3. 在生成的表单中，删除如[表4]中的多余字段所在组件以及按钮。 表4需要删除的组件名及组件 | 字段名 | 组件 | |:---|:---| | ***HW__***faultPhenomenon__CST | 输入框 | | ***HW__***customer__CST | 输入框 | | ***HW__***recoveryTime__CST | 日期选择框 | | ***HW__***arriveTime__CST | 日期选择框 | | 保存、重置 | 按钮 | 4. 分别选择表单中的2个"分栏"，在"行布局"中单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675238.png)，修改分栏为4列，并按[图16]所示调整字段组件的位置（选中组件，用鼠标即可拖拽组件到目的栏），调整完成后，删除多余空白分栏。 图15调整分栏为4列 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835174.png "点击放大") 图16调整后表单 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911717.png "点击放大") 5. 选择表单中的各个组件，依次在右侧属性面板中修改各个组件标签，详细标签名如[表5]所示。 表5修改表单组件名及组件对应字段 | 标签名 | 字段名 | 组件类型 | |:---|:---|:---| | 设备名称 | ***HW__***equipmentId__CST | 下拉框 | | 工单标题 | ***HW__***title__CST | 输入框 | | 创建时间 | createdDate | 日期选择框 | | 工单类型 | ***HW__***type__CST | 下拉框 | | 优先级 | ***HW__***priority__CST | 下拉框 | | 工单来源 | ***HW__***source__CST | 输入框 | | 备注 | ***HW__***description__CST | 多行输入框 | 6. 选中"设备名称"下拉框，在右侧属性页签，单击"属性值绑定"的"+"，"属性"设置为"选项"，然后再单击"模型字段"的设置图标![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231501.png)，在弹窗中勾选"equipmentList"模型，对"设备名称"下拉框进行属性绑定。 图17添加属性值绑定 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675230.png) 7. 选中"工单类型"下拉框，在右侧属性页签中，设置"维修"和"保养"2个选项。 图18添加工单类型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911721.png) 8. 选中"优先级"下拉框，在右侧属性页签中，设置"高"、"中"和"低"3个选项。 图19添加优先级 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231497.png) 9. 单击界面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071993.png)，保存页面。 12. 组装"设备信息"区。 1. 在"设备信息"所在的"折叠面板"中，拖入一个"表单"组件到"折叠页签内容"中，并在"元数据表单配置向导"弹窗中，单击"取消"。 2. 选择"表单"，在右侧属性中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433152082.png)，在弹窗中选中"equipmentInfo"，单击"确定"，并在提示中单击"绑定并生成表单"。 图20表单数据绑定 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992838.png) 3. 删除"name"输入框、"保存"、"取消"按钮以及按钮所在"容器"。 4. 选择"分栏"，在"行布局"中单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483072009.png)，修改分栏组件为4列，并删除空白分栏，调整后如[图21]所示。 图21调整后表单 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992830.png "点击放大") 5. 修改各个输入框组件的标签名，并"公共"属性下，设置"只读"。 表6组件名及对应字段 | 标签名 | 字段名 | 其他属性 | |:---|:---|:---| | 设备编码 | ***HW__***equipmentSN__CST | 只读 | | 设备品牌 | ***HW__***equipmentBrand__CST | 只读 | | 设备型号 | ***HW__***equipmentModel__CST | 只读 | | 地址 | ***HW__***fullAddress__CST | 只读 | 6. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992814.png)，保存页面。 13. 组装"其他信息"区域，组装完成后如[图23]所示。 图22其他信息区域组件结构 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483072013.png) 图23其他信息区域 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911713.png "点击放大") 1. 在"其他信息"所在的"折叠面板"中，拖1个"表单"组件到"折叠页签内容"中，然后单击"取消"元数据表单配置向导弹窗。 2. 设置表单样式：选中"表单"组件，在"样式"下"高级设置"中，设置表单样式":root{margin-left:50px;}"。 3. 在"表单"中，拖入1个"折叠面板"，并删除1个折叠页，保留2个折叠页。 4. 修改第1个折叠页"折叠页签标题"的"标签"下的"文本内容"修改为"故障记录"。 5. 在"故障记录"的"折叠页签内容"下，拖入1个分栏组件，设置为3列，并向第1列拖入"输入框"，并修改输入框的标签为"故障现象说明"。 6. 修改第2个折叠页"折叠页签标题"的"标签"下的"文本内容"修改为"时间记录"。 7. 在"时间记录"的"折叠页签内容"下，拖入1个分栏组件，并设置为3列，并分别向第1列和第2列拖入1个"日期选择框"，修改"标签"为"客户要求工程师到达现场时间"、"客户要求故障恢复时间"，然后修改"类型"为"日期时间"并设置"日期格式"为"yyyy-MM-dd HH:mm:ss"，向第3列拖入一个输入框，设置"标签"为"客户接口人"。 图24设置日期格式 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675242.png) 8. 选择"故障现象说明"输入框，在右侧属性页签中，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433152070.png)，为输入框绑定"basicInfo"下的"***HW__***faultPhenomenon__CST"字段。 9. 参考上一步，为其他组件绑定数据字段，组件名及对应字段，如[表7]所示。 表7组件名及对应字段 | 标签名 | 绑定的字段名 | 组件类型 | |:---|:---|:---| | 客户要求工程师到达现场时间 | ***HW__***arriveTime__CST | 日期选择框 | | 客户要求故障恢复时间 | ***HW__***recoveryTime__CST | 日期选择框 | | 客户接口人 | ***HW__***customer__CST | 输入框 | 14. 组装"按钮"区域。 1. 选择页面最下方"容器"，设置"水平对齐方式"为"中"，并拖入2个"按钮"组件。 图25设置容器对齐方式 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433152074.png) 2. 修改第1个"按钮"的"显示名称"为"提交"。 3. 修改第2个"按钮"的"显示名称"为"取消"，"类型"为"默认按钮"。 15. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911709.png)，保存页面。