组装“生成工单”页面

页面组件分析

“生成工单”页面的组装过程如下：

1. 在页面中，拖入一个容器组件。
2. 在容器组件中，拖入一个表单组件和容器组件。
   1. 将表单组件分割为3个区域：“基本信息”、“设备信息”、“其他信息”。
   2. 将2级容器作为“按钮”区域。

组装完成后，整个页面有4个区域，如图1所示。

图1 生成工单页面

其中，“基本信息”、“设备信息”是通过数据绑定页面模型直接创建的表单，“其他信息”及“按钮”区域是手动拖入的组件，然后再进行数据绑定，页面中详细组件分布如图2所示。

图2 页面组件分析

页面模型分析

页面模型负责与页面组件交互，获取生成工单需要的数据，页面模型需要先定义，然后再与页面组件进行绑定。

对于设备维修工单，需要录入的信息包括：工单基本信息、设备信息以及工单扩展信息。

打开创单页面，有如下处理逻辑：

1. 在“基本信息”区域指定“设备名称”时，在“设备详情”区域自动显示设备信息。该能力需要开发（equipmentSelectListQuery）脚本实现。
2. 填写完工单，单击“提交”按钮后，会创建一个工单实例。该能力通过调用BPM实现。

结合填单页面需求，以及前端组件对应关系，需要创建如下模型：

操作步骤

1. 进入创建“设备维修管理系统”应用中创建的应用。
2. 在“WorkOrder”目录中，鼠标放在“Page”上，单击界面上出现的“+”，在弹出菜单中选择“标准页面”。
3. 在“标签”和“名称”文本框中输入“createWorkOrder”，单击“添加”。

   当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击进行锁定。

4. 在标准页面的“设计视图”下，单击页面底部的“模型视图”页签，切换到“模型视图”。
   图3 切换模型视图
   

5. 定义模型“basicInfo”。
   1. 在模型视图页面，单击“新增模型”。
   2. 添加自定义模型，模型名称“basicInfo”，单击“下一步”。
   3. 单击“新增节点”，新增设备ID字段“HW__equipmentId__CST”，并设置字段类型“SingleSelect”，加粗斜体内容请替换为实际命名空间前缀。
   4. 依次增加表2中列出的字段名称，单击“下一步”，再单击“确定”。
      图4 新增节点字段
      
      

      加粗斜体内容请替换为实际命名空间前缀。

      表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. 单击页面上方的，保存设置。

6. 定义模型“equipmentList”。
   1. 在模型视图页面，单击“新增模型”。
   2. 添加自定义模型，模型名称“equipmentList”，单击“下一步”。
   3. 单击“下一步”，再单击“确定”。
   4. 单击页面上方的，保存设置。

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. 单击页面上方的，保存设置。

8. 定义模型“equipmentOptions”。
   1. 在模型视图页面，单击“新增模型”。
   2. 添加服务模型，模型名称“equipmentOptions”，单击“下一步”。
   3. 设置服务类型为“公共接口”，“项目”选择“设备维修管理系统”，公共接口为“equipmentSelectListQuery”，即创建“查询设备列表”脚本中定义的脚本“equipmentSelectListQuery”对应的公共接口，单击“下一步”，再单击“确定”。
      图5 选择服务
      
   4. 单击页面上方的，保存设置。

9. 定义模型“setInstanceId”。
   1. 在模型视图页面，单击“新增模型”。
   2. 添加服务模型，模型名称“setInstanceId”，单击“下一步”。
   3. 设置服务类型为“公共接口”，“项目”选择“设备维修管理系统”，公共接口为“createWorkOrder”，即“生成工单”脚本“createWorkOrder”对应的公共接口，单击“下一步”，再单击“确定”。
   4. 单击页面上方的，保存设置。

10. 拖拽页面框架组件（“基本信息”、“设备信息”、“其他信息”以及“按钮”区域）。
    1. 单击页面底部的“设计视图”页签，切换到“设计视图”。
    2. 从基本组件列表区拖拽“容器”到右侧“页面内容”中，然后再拖拽一个“表单”到“容器”中，并在“元数据表单配置向导”弹窗中，单击“取消”。
    3. 拖拽一个“容器”到“表单”下方（表单之外），作为按钮区域的容器。
       图6 拖拽按钮区域容器
       
    4. 选择“表单”，拖一个“折叠面板”组件到“表单”中，并在页面右下角的组件树中，删除2个“折叠页”（在组件树中，选中后单击鼠标右键，再单击“删除”即可），删除后折叠面板包含1个折叠页。
       图7 组件层级关系及删除多余折叠页
       
    5. 在“折叠面板”中，选中“折叠页签标题”，然后在右侧“属性”页签中进行以下设置：
       • 在“样式”下的“背景”，将背景颜色修改为浅蓝色（#9BCCEF）。
         图8 设置背景为浅蓝色
         
       • 选中图标，设置图标颜色为深蓝色（#004080）。
         图9 设置图标颜色为深蓝色
         
       • 选中图标后的“标签”，设置“文本内容”为“基本信息”。
         图10 设置标签内容为基本信息
         

       您还可以根据需要，修改边距等其他样式，使其更美观。

    6. 展开组件树，将鼠标放在折叠面板上，单击右键选择“复制”，再单击右键选择2次“粘贴”，在折叠面板之后，添加2个同样的折叠面板。
       图11 粘贴后的折叠面板
       
    7. 分别设置第二、第三个折叠面板的“折叠页签标题”为“设备信息”、“其他信息”。
       图12 修改折叠页标题
       
    8. 单击界面上方的，保存页面。

11. 组装“基本信息”区域。
    1. 在“基本信息”所在的折叠面板下，从左侧组件列表中，拖一个“表单”到“折叠页签内容”中，然后在“元数据表单配置向导”弹窗中，单击“取消”。
       图13 拖入表单
       
    2. 选中“表单”，在右侧属性中，单击，在模型选择弹窗中选中“basicInfo”，单击“确定”，并在提示弹窗中，单击“绑定并生成表单”。
       图14 表单数据绑定
       
    3. 在生成的表单中，删除如表4中的多余字段所在组件以及按钮。

       表4 需要删除的组件名及组件

       字段名	组件
       HW__faultPhenomenon__CST	输入框
       HW__customer__CST	输入框
       HW__recoveryTime__CST	日期选择框
       HW__arriveTime__CST	日期选择框
       保存、重置	按钮

    4. 分别选择表单中的2个“分栏”，在“行布局”中单击，修改分栏为4列，并按图16所示调整字段组件的位置（选中组件，用鼠标即可拖拽组件到目的栏），调整完成后，删除多余空白分栏。
       图15 调整分栏为4列
       
       图16 调整后表单
       
    5. 选择表单中的各个组件，依次在右侧属性面板中修改各个组件标签，详细标签名如表5所示。

       表5 修改表单组件名及组件对应字段

       标签名	字段名	组件类型
       设备名称	HW__equipmentId__CST	下拉框
       工单标题	HW__title__CST	输入框
       创建时间	createdDate	日期选择框
       工单类型	HW__type__CST	下拉框
       优先级	HW__priority__CST	下拉框
       工单来源	HW__source__CST	输入框
       备注	HW__description__CST	多行输入框

    6. 选中“设备名称”下拉框，在右侧属性页签，单击“属性值绑定”的“+”，“属性”设置为“选项”，然后再单击“模型字段”的设置图标，在弹窗中勾选“equipmentList”模型，对“设备名称”下拉框进行属性绑定。
       图17 添加属性值绑定
       
    7. 选中“工单类型”下拉框，在右侧属性页签中，设置“维修”和“保养”2个选项。
       图18 添加工单类型
       
    8. 选中“优先级”下拉框，在右侧属性页签中，设置“高”、“中”和“低”3个选项。
       图19 添加优先级
       
    9. 单击界面上方的，保存页面。

12. 组装“设备信息”区。
    1. 在“设备信息”所在的“折叠面板”中，拖入一个“表单”组件到“折叠页签内容”中，并在“元数据表单配置向导”弹窗中，单击“取消”。
    2. 选择“表单”，在右侧属性中，单击，在弹窗中选中“equipmentInfo”，单击“确定”，并在提示中单击“绑定并生成表单”。
       图20 表单数据绑定
       
    3. 删除“name”输入框、“保存”、“取消”按钮以及按钮所在“容器”。
    4. 选择“分栏”，在“行布局”中单击，修改分栏组件为4列，并删除空白分栏，调整后如图21所示。
       图21 调整后表单
       
    5. 修改各个输入框组件的标签名，并“公共”属性下，设置“只读”。

       表6 组件名及对应字段

       标签名	字段名	其他属性
       设备编码	HW__equipmentSN__CST	只读
       设备品牌	HW__equipmentBrand__CST	只读
       设备型号	HW__equipmentModel__CST	只读
       地址	HW__fullAddress__CST	只读

    6. 单击页面上方的，保存页面。

13. 组装“其他信息”区域，组装完成后如图23所示。
    图22 其他信息区域组件结构
    
    图23 其他信息区域
    
    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 设置日期格式
       
    8. 选择“故障现象说明”输入框，在右侧属性页签中，单击，为输入框绑定“basicInfo”下的“HW__faultPhenomenon__CST”字段。
    9. 参考上一步，为其他组件绑定数据字段，组件名及对应字段，如表7所示。

       表7 组件名及对应字段

       标签名	绑定的字段名	组件类型
       客户要求工程师到达现场时间	HW__arriveTime__CST	日期选择框
       客户要求故障恢复时间	HW__recoveryTime__CST	日期选择框
       客户接口人	HW__customer__CST	输入框

14. 组装“按钮”区域。
    1. 选择页面最下方“容器”，设置“水平对齐方式”为“中”，并拖入2个“按钮”组件。
       图25 设置容器对齐方式
       
    2. 修改第1个“按钮”的“显示名称”为“提交”。
    3. 修改第2个“按钮”的“显示名称”为“取消”，“类型”为“默认按钮”。

15. 单击页面上方的，保存页面。