# 组装"工单列表（客服人员）"页面 "工单列表（客服人员）"页面与查询设备列表页面类似，包含工单查询条件、工单列表，以及创建工单的入口，用标准页面功能实现。 如[图1]所示，工单列表（客服人员）页面主要由一个表格、"创建工单"按钮及表格查询区域构成。 图1工单列表（客服人员） ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231449.png "点击放大") #### 操作步骤 1. 在"我的应用"中，单击"设备维修管理系统"，进入应用。 2. 在"WorkOrder"中，在鼠标放在"Page"上，单击界面上出现的"+"，在弹出菜单中选择"标准页面"。 3. 在"标签"和"名称"文本框中输入"workOrderList"，单击"添加"。 当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231453.png)进行锁定。 4. 定义模型"queryWorkOrder"。 1. 在"模型视图"中，单击"新增模型"。 2. 添加服务模型，模型名称"queryWorkOrder"，单击"下一步"。 3. "选择服务类型"为"公共接口"，"项目"为"设备维修管理系统"，"选择服务"为"queryWorkOrder"，单击"下一步"，再单击"确定"。 4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911681.png)，保存模型。 5. 定义模型"workOrderInstance"。 1. 在"模型视图"中，单击"新增模型"。 2. 来源选择"自定义"，模型名称"workOrderInstance"，单击"下一步"。 3. 单击模型名后的"新增节点"，新增[表1]所示的节点，然后单击"下一步"，再单击"确定"。 以下字段要与"工单对象"中的字段一致，其中加粗斜体内容部分要替换为当前账号对应的命名空间前缀。 表1新增节点 | 字段名称 | 字段类型 | 字段描述 | |:---|:---|:---| | id | Text | 记录ID | | ***HW__***workOrderId__CST | Text | 工单Id | | ***HW__***priority__CST | Text | 优先级 | | ***HW__***title__CST | Text | 工单标题 | | ***HW__***status__CST | Text | 状态 | | ***HW__***assignedFme__CST | Text | 当前处理人 | | createdDate | DataTime | 创单时间 | | ***HW__***createdBy__CST | Text | 创建人 | 4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071953.png)，保存模型。 6. 单击"设计视图"，从"模型视图"切换到"设计视图"。 7. 拖拽页面标题。 1. 从基本组件列表区拖拽一个"标题"组件到"页面内容"中。 2. 在右侧"属性"页签中，将"标题内容"修改为"现场工单列表"。 3. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675210.png)，保存页面标题。 8. 从组件列表区拖拽一个"表格"组件到"标题"的下方。 9. 绑定表格数据模型，并设置查询结果区域。 1. 在"设计视图"中，选中"表格"，单击右侧"属性"页签![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911665.png)，如[图2]所示。 图2为表格绑定数据模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433152042.png "点击放大") 2. 在"选择模型"对话框中，选中"workOrderInstance"模型，单击"确定"。绑定模型后，系统自动将模型的所有字段添加为查询结果列。 3. 单击上图中每个字段后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001931867438.png)，修改列标题等字段属性。 以"工单ID"为例，其属性配置如[图3]所示，各个字段及修改后的列名如[表2]所示。 图3设置"工单ID"列的属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001959232133.png) 表2修改各字段的显示属性 | 字段名 | 列标题 | 备注 | |:---|:---|:---| | id | 记录ID | 启用"隐藏"属性，即设置为true | | ***HW__***workOrderId__CST | 工单ID | - | | ***HW__***priority__CST | 优先级 | - | | ***HW__***title__CST | 工单标题 | - | | ***HW__***status__CST | 状态 | - | | ***HW__***assignedFme__CST | 当前处理人 | - | | createdDate | 创单时间 | - | | ***HW__***createdBy__CST | 创建人 | - | 4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675214.png)，保存设置。 10. 添加"创建工单"按钮。 1. 选中"表格"，单击右侧"属性"页签中"表格区块"中"工具栏"后的"添加"按钮。 图4增加查询条件区域 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835146.png) 2. 删除工具栏中多余的按钮，只保留"新增行"。 3. 修改"新增行"的"显示名称"为"创建工单"。 4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992794.png)，保存设置。 11. 创建查询条件区域。 1. 单击"模型视图"，切换到模型视图，在表格模型"table_***0*** _condition"后，单击编辑图标![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991413.png)。 表格组件拖入后，页面将自动生成一个表格模型。"table_***0*** _condition"即是在前面拖入的表格对应的表格模型，模型名可能跟拖入顺序及个数有关，一般情况下模型名称为"table_***0*** _condition"，如果名称不一致，请根据实际情况修改。 图5编辑表格模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071945.png "点击放大") 2. 在表格模型"table_***0*** _condition"中，单击"新增节点"，添加一个"queryInfo"节点，"数据类型"为"Any"，然后在"queryInfo"下，再单击"新增节点"添加3个子节点"createdBy"、" title"、"status"。 图6创建完成后的模型节点 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991421.png) 3. 设置完成后，单击"下一步"，再单击"确定"，保存设置。 4. 单击"设计视图"，切换到设计视图，从左侧组件列表中，拖一个"表单"组件到"表格容器"的最上部（表格容器内部最上部），在"元数据表单配置向导"弹窗中，单击"取消"。 图7向表格容器拖入表单 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911685.png "点击放大") 5. 选中表单，在属性中"数据绑定"下，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433152046.png)，为表单绑定"table_***0*** _condition"中的"queryInfo"节点，并在提示弹窗中，单击"绑定并生成表单"，单击"确定"。 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675202.png) 6. 在表单中，分别选中并删除"createdBy"、"重置"按钮。 7. 调整"title"、"status"、"保存"为1行，并删除多余分栏及容器，调整后，如[图8]所示。 图8调整后表单 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675206.png "点击放大") 8. 修改表单中输入框属性。 - 修改"title"的"标签"为"工单标题"。 - 修改"status"的"标签"修改为"状态"。 9. 选中"保存"按钮，修改"显示名称"为"搜索"，设置单击"事件"页签，再单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992778.png)，删除"提交表单"事件，然后单击"点击"后的"+"，进入事件编排页面，在"自定义动作"中，输入以下事件代码，单击"创建"。 图9修改按钮事件代码 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992798.png) 脚本中**红色内容**请替换为实际的对象名、字段名、页面名、组件ID。其中"table_0_condition"为当前表格组件的ID号，中间数字默认为"0"，如果有多次修改或创建该ID号会变化，选中表格后，在组件树上可以查看实际组件ID。 ``` let pageInfo = $model.ref('table_0_condition').getData().pageInfo; let queryInfo = $model.ref('table_0_condition').getData().queryInfo; if (!queryInfo) { queryInfo = {}; } let queryData = { "title": queryInfo.title, "status": queryInfo.status, "createdBy": queryInfo.createdBy, "start": 0, "limit": pageInfo.pageSize }; $model.ref('queryWorkOrder').setData({ inputParam: queryData }); $model.ref('queryWorkOrder').run().then(function (data) { $model.ref('workOrderInstance').setData(data.workOrderList); pageInfo.total = parseInt(data.total); $model.ref('table_0_condition').setData({ "pageInfo": pageInfo }); }).catch(function (error) { console.log('error is', error); }); ``` 10. 选中"搜索"按钮所在的栏，在右侧"样式"下的"布局"中，设置上方外边距为"30"，使"搜索"按钮上下居中显示。 图10设置搜索按钮布局样式（位置） ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071957.png "点击放大") 查询条件区域创建后，如[图11]所示。 图11查询区域 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433152038.png "点击放大") 11. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991405.png)，保存设置。 12. 添加页面事件代码。 1. 在"设计视图"中选中最外层的"页面"，在右侧"事件"页签中，单击"加载"后的"+"，进入编辑动作页面。 2. 在"自定义动作"中，输入如下脚本代码。 ``` let pageInfo = $model.ref('table_0_condition').getData().pageInfo; let queryData = { "start": (pageInfo.curPage - 1) * pageInfo.pageSize, "limit": pageInfo.pageSize }; $model.ref('queryWorkOrder').setData({ inputParam: queryData }); $model.ref('queryWorkOrder').run().then(function (data) { $model.ref('workOrderInstance').setData(data.workOrderList); pageInfo.total = parseInt(data.total); $model.ref('table_0_condition').setData({ "pageInfo": pageInfo }); }).catch(function (error) { console.log('error is', error); }); ``` 3. 单击"创建"，退出事件编排窗口。 13. 添加"创建工单"按钮跳转事件，跳转事件功能是将页面跳转到"生成工单"页面。 1. 选中"创建工单"按钮，在右侧"事件"页签中，单击"新增行"后的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001932038774.png)，进入事件编排页面。 2. 在"自定义动作"中，输入以下事件代码。 ``` //打开创建工单页面，需要根据实际页面名称修改 context.$page.load('/besBaas/page#/HW__createWorkOrder') ``` 3. 单击"创建"，退出事件编排窗口。 14. 单击页面上的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001959237953.png)，保存页面。