后勤设备报修模板主要分为 PC 管理端和移动应用端两部分,PC 管理端是根据数据模型搭建的应用,移动应用端是自定义应用。
后勤设备报修模板管理端搭建
步骤1:创建通用选项集
后勤设备报修模板使用到了枚举类选项,因此需要先在微搭平台的通用选项集中创建选项集数据,模板示例数据用到维修结果。
选项标识 | 选项值 |
1 | 待维修 |
2 | 已指派 |
3 | 已维修 |
4 | 已反馈 |
5 | 已归档 |
![](https://qcloudimg.tencent-cloud.cn/image/document/771099a0397ff795159c9c6cc9f0c993.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/771099a0397ff795159c9c6cc9f0c993.png)
步骤2:创建数据模型
后勤设备报修模板用到设备报修数据模型,所以在创建应用前先创建数据模型。
字段名称 | 字段标识 | 类型 |
设备报修标题 | wxsbbt | 短文本 |
维修反馈照片 | wxfkzp | 图片 |
设备损坏地址 | sbbxdz | 短文本 |
设备报修时间 | sbbxsj | 日期时间 |
设备维修人员 | sbwxry | 关联关系 |
设备损坏描述 | sbshms | 长文本 |
设备报修编号 | sbbxbh | 自动编号 |
设备报修人员 | sbbxry | 关联关系 |
维修结果反馈 | wxjgfk | 长文本 |
设备维修时间 | sbwxsj | 日期时间 |
设备报修状态 | sbbxzt | 枚举 |
![](https://qcloudimg.tencent-cloud.cn/image/document/2e8d46f19f2369c769769224c405b1d8.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/2e8d46f19f2369c769769224c405b1d8.png)
步骤3:创建应用页面
1. 进入 创建新应用 页面,单击新建数据模型应用。输入应用名称单击新建。
![](https://qcloudimg.tencent-cloud.cn/image/document/a066f82f1ee870c9c02e77803640a38f.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/a066f82f1ee870c9c02e77803640a38f.png)
2. 在创建页面中选择 步骤2 创建的设备报修数据模型。单击创建页面,应用页面基本由数据模型自动生成。
![](https://qcloudimg.tencent-cloud.cn/image/document/b53b8ae090ec478cd4b9eb64c5226ffb.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/b53b8ae090ec478cd4b9eb64c5226ffb.png)
3. 其中设备报修列表、创建设备报修、更新设备报修和设备报修详情四个页面由系统自动生成,而设备报修归档列表、设备报修处理跟踪都克隆设备报修列表页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/e6a70049c35b6f3c46b6032a2df86b77.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/e6a70049c35b6f3c46b6032a2df86b77.png)
步骤5:内容调整
1. 修改标题:选中组件树中的组件,在组件属性中找到页面标题,修改成自定义内容。
![](https://qcloudimg.tencent-cloud.cn/image/document/f21e34a2d09ef7079a8e7cb7ca1ce494.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/f21e34a2d09ef7079a8e7cb7ca1ce494.png)
2. 配置按钮:在组件树中找到按钮组件,设置属性和点击事件。
例如:设备报修处理跟踪页面,可以自定义归档按钮,然后给按钮添加事件。
![](https://qcloudimg.tencent-cloud.cn/image/document/ecd101cbc24deb24b766cb5ab5971156.png)
其中的 updateStatus 方法为自定义方法,可以在低码中进行编写,其主要作用是将数据表中的设备报修状态字段改成5。
![](https://qcloudimg.tencent-cloud.cn/image/document/d8d35be448ed8b48cb046be715fbbd56.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/ecd101cbc24deb24b766cb5ab5971156.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/d8d35be448ed8b48cb046be715fbbd56.png)
3. 自定义页面:应用的首页使用自定义页面创建的方式生成。
首页的待维修工单、已指派工单、待反馈工单和已归档工单使用网格布局组件分别插入四个统计卡片组件,数据根据报修工单的四种状态统计获取。
![](https://qcloudimg.tencent-cloud.cn/image/document/28fa473fc701626340692d03066a756c.png)
首页的月度工单统计表使用柱状图组件,X 轴数据是设备报修时间,Y 轴数据是设备报修编号统计值。
![](https://qcloudimg.tencent-cloud.cn/image/document/b0fbc25088a09df3a2359d2ac4341f4a.png)
首页的工单变化趋势图使用折线图组件,X 轴数据是设备报修时间,Y 轴数据是设备报修编号统计值。
![](https://qcloudimg.tencent-cloud.cn/image/document/a87e5eacbade2ec245c5e5723d9cb841.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/28fa473fc701626340692d03066a756c.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/b0fbc25088a09df3a2359d2ac4341f4a.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/a87e5eacbade2ec245c5e5723d9cb841.png)
后勤设备报修模板移动端搭建
步骤1:创建应用及页面
1. 进入 创建新应用 页面,单击新建自定义应用。输入应用名称,支持平台选择支持小程序和 Web 端并单击新建。
![](https://qcloudimg.tencent-cloud.cn/image/document/ff5d2f429512166d30c2ae8f4dc06259.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/ff5d2f429512166d30c2ae8f4dc06259.png)
2. 这里主要创建三个自定义页面,分别是首页、报修页面和详情页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/e005c4b74e1788d74089c1ceb3d893a1.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/e005c4b74e1788d74089c1ceb3d893a1.png)
步骤2:搭建首页
单行输入
1. 单击左上角的变量,在首页中定义变量 keyWord。
![](https://qcloudimg.tencent-cloud.cn/image/document/88f2ff11f188bd258559d035386b532c.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/88f2ff11f188bd258559d035386b532c.png)
2. 在组件树中拖入单行输入组件,添加事件,实现变量赋值。
![](https://qcloudimg.tencent-cloud.cn/image/document/6a79a20d32595468b8367d9fdcb091be.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/6a79a20d32595468b8367d9fdcb091be.png)
数据列表
1. 在组件树中拖入数据列表组件,组件基础属性中数据模型选择设备报修。
![](https://qcloudimg.tencent-cloud.cn/image/document/cda2f1f33b8aaf04ee7ab4288bc50878.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/cda2f1f33b8aaf04ee7ab4288bc50878.png)
2. 数据筛选条件设置设备报修标题包含 keyWord 变量。
![](https://qcloudimg.tencent-cloud.cn/image/document/ab1ccfa34093bb90309fe78dd6ca5f4b.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/ab1ccfa34093bb90309fe78dd6ca5f4b.png)
3. 选择图标组件,给图标增加页面跳转事件。跳转到详情页面,传递参数 ![](https://qcloudimg.tencent-cloud.cn/image/document/ab0e889849105fade8c3b339a1c0429f.png)
\\_id
。
![](https://qcloudimg.tencent-cloud.cn/image/document/ab0e889849105fade8c3b339a1c0429f.png)
4. 其它内容设置相关样式,其中报修状态使用样式。
![](https://qcloudimg.tencent-cloud.cn/image/document/d91a6ce5c802476f3cea1e45dbba3777.png)
样式代码:
![](https://qcloudimg.tencent-cloud.cn/image/document/d91a6ce5c802476f3cea1e45dbba3777.png)
$w.item_g99m.sbbxzt == 2 ? {background: "#e5f9f6",color: "#58d9c8",border: "1px solid"} : $w.item_g99m.sbbxzt == 1 ? {background: "#ffe8d5",color: "#ff7102",border: "1px solid"} : {background: "#f0f0f0",color: "#A8a8a8",border: "1px solid"}
Tab 栏
在组件树中拖入 Tab 栏组件,分别设置为首页和报修。
![](https://qcloudimg.tencent-cloud.cn/image/document/37c04b080b9fe7b8be82d3ae60d5fa0c.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/37c04b080b9fe7b8be82d3ae60d5fa0c.png)
步骤3:搭建详情页面
顶部导航
在组件树中拖入顶部导航组件。
![](https://qcloudimg.tencent-cloud.cn/image/document/03d528b115c2b70afc18a98d4afed1c0.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/03d528b115c2b70afc18a98d4afed1c0.png)
数据详情
1. 在组件树中拖入数据详情组件,数据模型选择设备报修。
![](https://qcloudimg.tencent-cloud.cn/image/document/dfa663288ecd0052855c9f8242f9f2be.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/dfa663288ecd0052855c9f8242f9f2be.png)
2. 数据筛选设置条件数据标识等于参数 ![](https://qcloudimg.tencent-cloud.cn/image/document/a8aaeb6b4cb4f5ba60debff47dcb1fdb.png)
\\_id
。
![](https://qcloudimg.tencent-cloud.cn/image/document/a8aaeb6b4cb4f5ba60debff47dcb1fdb.png)
3. 其它设置详情标题和内容绑定,调整样式。
![](https://qcloudimg.tencent-cloud.cn/image/document/7df0cd63081adc0022d935b8fc4ae859.png)
例如报修编号和内容绑定。
![](https://qcloudimg.tencent-cloud.cn/image/document/458168326c9048a3543c8aa47e801934.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/7df0cd63081adc0022d935b8fc4ae859.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/458168326c9048a3543c8aa47e801934.png)
步骤4:搭建报修页面
表单容器
在组件树中拖入表单容器组件,表单场景选择新增,数据源类型选择数据模型,数据模型选择设备报修。
![](https://qcloudimg.tencent-cloud.cn/image/document/5de8ba098e7c258e51f14775734d7f34.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/5de8ba098e7c258e51f14775734d7f34.png)
Tab 栏
在组件树中拖入 Tab 栏组件,分别设置首页和报修。
![](https://qcloudimg.tencent-cloud.cn/image/document/17c56fc3750d211b34278bd4b4d733d9.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/17c56fc3750d211b34278bd4b4d733d9.png)