# 组装"待处理工单"页面 "待处理工单"页面是一个手机端的页面，用于显示现场工程师名下的待处理工单，将使用标准页面功能实现。 如[图1]所示工程师在手机端可以看到自己名下所有的待处理工单。系统默认优先显示待处理的工单。 图1"待处理工单"页面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675086.png) 因当前页面组件较多，因此分3个大步骤开发页面，先拖拽页面的前端组件，再定义页面模型，进行模型与前端组件绑定，最后为页面添加相应的事件代码。 #### 页面组件分析 分析[图1]的组成，可以将整个页面分割为3个区域：页面标题、查询条件和待处理工单列表区域，如[图2]所示。 待处理工单列表通过在列表视图中，使用2个"分栏"的嵌套，组装出待处理工单列表区。 图2页面组件分析 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433151958.png) #### 操作步骤 以下操作步骤只是给出的大致的拖拽方法，您可以根据需要，修改各组件的颜色、对齐方式、边距显示样式，使页面更美观。 1. 在"我的应用"中，单击"设备维修管理系统"，进入应用。 2. 鼠标放在"Page"上，单击界面上出现的"+"，在弹出菜单中选择"标准页面"。 3. 在"标签"和"名称"文本框中输入"workOrderListM"，单击"添加"。 当编辑已有标准页面时，为防止编辑时多人篡改，编辑前请单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675098.png)进行锁定。 4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992698.png)Mobile图标，切换到手机端设计模式。 5. 组装"页面标题区"。 1. 从基本组件列表区，拖拽1个"标题"组件到"页面内容"。 2. 选中"标题"组件，在右侧"属性"页签，配置标题组件属性： 1. 修改"标题内容"为"工单列表"。 2. 在"样式"下的"高级设置"中，输入如下样式代码，即设置标题组件的背景色、水平居中对齐，文字颜色为白色。 ``` :root{ text-align:center; background-color:#4a90e2; color:#FFFFFF; opacity:0.9; } ``` 图3高级设置 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433151926.png) 6. 组装"查询条件区"。 1. 拖拽1个"分栏"到"工单列表"之后，在右侧"行布局"下先单击PC中的2栏图标，再单击Phone下的2栏图标，将分栏设置为左右不均分的2栏，如下图所示。 图4拖入分栏组件并设置为2栏 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071877.png "点击放大") 2. 选中左侧"栏"，在"样式 \> 高级设置"下输入样式代码，设置宽度为75%，高度为40px。 图5修改列宽度 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991301.png "点击放大") ``` :root{ width:75%; height:40px; } ``` 3. 选中右侧"栏"，同样方式设置宽度为25%，高度为40px。 ``` :root{ width:25%; height:40px; } ``` 4. 拖拽1个"输入框"组件到"分栏"的左栏，修改其"占位符"为"请输入工单完整标题"。 5. 拖拽1个"按钮"组件到"分栏"的右栏，修改其"显示名称"为"查询"、"类型"为"主要按钮"。 6. 选择"请输入工单完整标题"所在的"栏"，设置"弹性布局"，并修改内边距为"10px"。 图6设置栏属性 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675090.png "点击放大") 7. 组装"待处理工单列表区"。 1. 在"分栏"之后，拖入1个" 列表视图"组件。 图7拖入列表视图 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483071861.png "点击放大") 2. 在"列表视图容器"**下层的"列表视图"** 中，拖入1个"分栏"，在右侧修改为1个栏（Phone），并设置分栏内边距为"10px"。 图8修改分栏为1栏及内边距 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992702.png "点击放大") 3. 在"分栏"中，再拖入1个"分栏"，并参考上图修改为1个栏（Phone），然后单击分栏的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991285.png)7次，新增7个分栏，新增后，变为8个分栏。 4. 向第1\~7分栏中，分别拖拽2个"标签"组件（并排），然后在第8分栏中，拖入一个"按钮"组件。 5. 修改第1分栏中的第1个标签的"文本内容"修改为"标题："。 图9修改第1个标签标题 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992670.png "点击放大") 6. 重复上一步，修改第2\~7分栏中的第1个标签的"文本内容"为"单号："、"状态："、"时间："和"优先级："。 表1标签的文本内容 | 所在分栏 | 第一栏 | 第二栏 | |:---|:---|:---| | 1 | 标题： | 保持默认（label） | | 2 | 单号： | 保持默认（label） | | 3 | 状态： | 保持默认（label） | | 4 | 要求到达时间： | 保持默认（label） | | 5 | 要求解决时间： | 保持默认（label） | | 6 | 现场故障说明： | 保持默认（label） | | 7 | 优先级： | 保持默认（label） | 正常情况下，第二栏中的内容是动态获取的，在[表3]中，设置的第二栏中的"文本内容"，仅会在未获取相应工单信息时显示，您也可以根据实际需要自定义"标题"组件默认显示内容。 7. 在"样式"属性下，自定义修改各个标签组件的样式，例如加粗文本。 图10自定义修改样式 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911561.png) 8. 在第8行内，选中"按钮"组件，设置按钮"显示名称"为"处理"、"类型"为"主要按钮"，您也可以在属性中为按钮添加图标，修改按钮背景色为"#4a90e2"。 组装完成效果，如[图11]所示。 图11组装工单信息展示区域 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911565.png) 8. 单击界面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432992682.png)，保存页面。 #### 定义模型并绑定页面组件 页面模型负责与页面组件交互，获取显示工单需要的数据。结合页面展示需求，可知需要创建如下模型： 表2模型分析 | 模型名称 | 作用 | 详细定义 | |:---|:---|:---| | workOrderList | 保存工单的基本信息。 | 自定义模型，包含的字段节点如下，这些节点与工单对象的字段名称相同，**加粗斜体内** **容**请替换为实际命名空间前缀： - ***HW__***title__CST：工单标题，字段类型Text。 - ***HW__***workOrderId__CST：工单ID，字段类型Text。 - ***HW__***priority__CST：工单优先级，字段类型Text。 - id：记录ID，字段类型Text。 - ***HW__***recoveryTime__CST：要求解决时间，字段类型Text。 - ***HW__***faultPhenomenon__CST：现场故障说明，字段类型Text。 - ***HW__***status__CST：工单状态，字段类型Text。 - ***HW__***instanceId__CST：工单绑定的BPM实例的id，字段类型Text。 - ***HW__***arriveTime__CST：要求到达时间，字段类型Text。 - isDeal：判断工单状态字段，字段类型Bool。 | | queryCondition | 查询条件。 | 自定义模型，包含字段节点：title，字段类型Text，与页面上的查询条件对应。 | | queryWorkOrder | 查询工单。 | 服务模型，绑定公共接口" queryWorkOrder"，调用查询工单逻辑。 | | total | 保存满足查询条件的记录数，作为Scroll组件滚动显示时的累计记录数。 | 自定义模型，包含的字段节点如下： - currentTotal：当前页显示的数量，字段类型Text。 - actualTotal：实际总数量，字段类型Text。 | 1. 定义模型"workOrderList"。 1. 单击"模型视图"，切换到模型视图。 2. 在模型视图中，单击"新增模型"。 3. 添加自定义模型，模型名称"workOrderList"，单击"下一步"。 4. 单击"新增节点"，依次增加[表2]中列出的字段名称，单击"下一步"，再单击"确定"。 5. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675078.png)，保存模型。 2. 定义模型"queryCondition"。 1. 在"模型视图"中，单击"新增模型"。 2. 添加自定义模型，模型名称"queryCondition"，单击"下一步"。 3. 单击"新增节点"，依次增加[表2]中列出的字段名称，单击"下一步"，再单击"确定"。 4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231347.png)，保存模型。 3. 定义模型"total"。 1. 在"模型视图"中，单击"新增模型"。 2. 添加自定义模型，模型名称"total"，单击"下一步"。 3. 单击"新增节点"，依次增加[表2]中列出的字段名称，单击"下一步"，再单击"确定"。 4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675106.png)，保存模型。 4. 定义模型"queryWorkOrder"。 1. 在"模型视图"中，单击"新增模型"。 2. 添加服务模型，模型名称"queryWorkOrder"，单击"下一步"， 3. "服务类型"选择"公共接口"，"选择项目"为"设备维修管理系统"，"搜索"中的接口选择"queryWorkOrder"，单击"下一步"，再单击"确定"。 4. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231333.png)，保存模型。 5. 绑定模型"workOrderList"。 1. 单击"设计视图"，从"模型视图"切换到"设计视图"。 2. 选中"列表视图容器"标签中的**"列表视图"** 标签（不要选择列表视图容器），为其绑定"workOrderList"。 图12绑定数据模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675094.png "点击放大") 3. 如[图13]所示，选中"标题："**后的标签组件** label，在右侧"属性"页签，单击"+"，增加属性值绑定，即设置"属性"为"文本内容"，"模型字段"为"workOrderList"下的"***HW__*** title__CST"。 图13为标签绑定模型 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911593.png "点击放大") 4. 依次为其他标签添加属性值绑定，具体绑定的字段如[表3]所示。 表3标签的属性值绑定 | 所在分栏 | 第一栏 | 第二栏 | 第二栏标签绑定的字段 | |:---|:---|:---|:---| | 1 | 标题： | label | workOrderList.***HW__***title__CST | | 2 | 单号： | label | workOrderList.***HW__***workOrderId__CST | | 3 | 状态： | label | workOrderList.***HW__***status__CST | | 4 | 要求到达时间： | label | workOrderList.***HW__***arriveTime__CST | | 5 | 要求解决时间： | label | workOrderList.***HW__***recoveryTime__CST | | 6 | 现场故障说明： | label | workOrderList.***HW__***faultPhenomenon__CST | | 7 | 优先级： | label | workOrderList.***HW__***priority__CST | 5. 为"处理"按钮添加属性值绑定，"属性"设置为"禁用"，绑定"workOrderList"的"isDeal"字段，绑定后为"workOrderList.isDeal"。 图14添加属性值绑定 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991305.png) 6. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001483231353.png)，保存设置。 6. 绑定模型"queryCondition"。 1. 选中"请输入工单完整标题"输入框，为其进行值绑定，绑定字段为"queryCondition.title"。 图15绑定工单标题 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482991297.png "点击放大") 2. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432675110.png)，保存设置。 #### 定义页面中的事件代码 通过定义页面的on-load事件，可以实现打开页面即自动展示当前工程师的待处理工单。 1. 定义页面事件代码。 1. 在"设计视图"中，选中最外层的"页面"。 2. 在右侧"事件"页签中，单击"加载"后的"+"。 3. 在添加事件弹窗中，输入如下脚本代码。 ``` $model.ref('queryWorkOrder').setData({inputParam: {"isFME": true}}); $model.ref('queryWorkOrder').run().then(function (data) { if (data && data.workOrderList) { //将查询到的数据赋值给页面模型来展示 $model.ref('workOrderList').setData(data.workOrderList); } }).catch(function (error) { console.log('error is', error); }); ``` 4. 单击"创建"，退出事件编排窗口。 #### 实现"按标题查询工单" 通过定义"查询"按钮的"点击"事件，可以实现根据工单标题查询工单的能力。 1. 在"设计视图"中，选中"查询"按钮。 2. 在右侧"事件"页签中，单击"点击"后的"+"。 3. 在添加事件弹窗中，输入如下脚本代码。 ``` let queryTitle = $model.ref('queryCondition').getData().title; $model.ref('queryWorkOrder').setData({ inputParam: { "title": queryTitle, "isFME": true } }); $model.ref('queryWorkOrder').run().then(function (data) { if (data && data.workOrderList) { //将查询到的数据赋值给页面模型来展示 $model.ref('workOrderList').setData(data.workOrderList); } }).catch(function (error) { console.log('error is', error); }); ``` 4. 单击"创建"，退出事件编排窗口。 #### 实现"处理工单" 通过定义"处理"按钮的"点击"事件，可以实现接单、处理工单的能力。 1. 在"设计视图"中，选中"处理"按钮。 2. 在右侧"事件"页签中，单击"点击"后的"+"。 3. 在添加事件弹窗中，输入如下脚本代码。 脚本中**红色内容** 请替换为实际的页面名。 ``` //获取当前组件（即button） let _component = context.$component.current; // 配置页面的bpm参数 context.$page.params["bp.name"] = "HW__WorkOrderBpm"; //获取当前行id let id = _component.$attrs.row.id; let taskId = ""; let instanceId = ""; //遍历获取当前行内容 let row = {}; let workorders = $model.ref('workOrderList').getData(); workorders.forEach(function (wo, idx) { if (wo.id == id) { row = wo; instanceId = wo.HW__instanceId__CST; } }); //打开处理弹框 context.$dialog.popup({ title: '处理工单', page: 'HW__workOrderProcess', footerHide: false, width: 20, height: 180, okText: '提交', cancelText: '取消', params: { id: id, row: row }, onCancel: function () { }, onOk: function () { let statusInfo = { "statusInfo": $model.ref("statusInfo").getData() }; let taskData = { "action": "complete", "variables": statusInfo }; // 获取csrf token context.$utils.getCSRFToken().then(function (token) { let url = '/u-route/baas/bp/v2.0/query/tasks?flag=activeTask&rootID=' + instanceId; fetch(url, { method: 'GET', headers: { 'Content-Type': 'application/json', 'CSRF-Token': token } }).then(function (resp) { resp.json().then(function (data) { taskId = data.result.Recs[0].id; let url2 = '/u-route/baas/bp/v2.0/runtime/tasks/' + taskId; fetch(url2, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(taskData) }).then(function (resp) { context.$message.success('处理成功'); $model.ref('queryWorkOrder').setData({ inputParam: {"isFME": true} }); $model.ref('queryWorkOrder').run().then(function (data) { if (data && data.workOrderList) { //将查询到的数据赋值给页面模型来展示 $model.ref('workOrderList').setData(data.workOrderList); } }).catch(function (error) { console.log('error is', error); }); }).catch(function (error) { console.log('error is', error); }); }); }).catch(function (error) { console.log('error is', error); }); }); } }); ``` 4. 单击"创建"，退出事件编排窗口。 #### 验证 通过**PC端**预览页面的方式，访问"待处理工单"页面进行测试。 请在PC端预览或测试"待处理工单"标准页面，当前版本不建议在手机端预览页面。 1. 打开"待处理工单"标准页面。 2. 单击界面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001433151954.png)，进入预览页面。 3. 查看页面的展示效果。 图16工单列表页面 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001432835074.png) 如果当前租户开发者名下没有工单，所以当前的预览效果只能看到页面框架，没有工单。 图17无工单信息 ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001482911569.png)