上一讲,以设备管理系统中的零部件(Part)为案例,简要介绍了实体类表单建模和部分表单控件的用法。这一讲中,我们将进一步围绕实体类表单建模、多对象及手机端控件展开。本讲中涉及新的控件包括:
...
上一讲,讲解的是PC端的单对象、多对象表格编辑控件,以及布局、操作列等。这一讲中,我们将介绍手机端的表单建模的方法,主要讲解查看设备和查看工单两个功能。本讲主要介绍手机表单建模,内容如下:
- 建立设备查看表单
- 建立设备列表
- 查看设备详情
- 建立工单查看表单
- 查看我的工单
- 编辑工单详情
1.
...
手机端表单设计如图:
...
设备查看表单
1.1 建立设备列表
设备列表有两种方法可以实现:
- 方法1:直接在表单模型管理界面中新增移动端表单。
- 方法2:直接在创建操作时直接新增移动端表单。
...
1)表单模型中Asset点击创建,出现创建表单对话框,选择移动端填写表单名(英文名)“assetMobile",显示名(中文名)”设备移动端“。
2)表单定制页面中,拖拽控件区的轮播控件到相应位置,画图区中点击轮播控件,在属性区中修改轮播项1、2、3为图片库,点击图片库下的空白格,出现图片管理器弹框,点击上传,从本地图库中选择三个搅拌车进行上传,并选中第一个搅拌车图片,点击轮播项1的图片库下的空白格;选中第二个搅拌车图片,点击轮播项2的图片库下的空白格;选中第三个搅拌车图片,点击轮播项3的图片库下的空白格,点击确认。读者也可以根据需要新增不同类型的表单,并进行定制。
...
方法2——直接在创建操作时直接新增移动端表单。在功能模型中,点击设备手机端,点击添加标签,填写显示名“设备移动端”,选择目标类“设备”,新增表单名称“assetMobile”,点击编辑,出现的表单定制页面,按照步骤2)、3)、4)操作即可。
5.小结
维护单个设备信息 SingleAsset
- 布局控件
- 行、列、分组框
- 单对象控件
- 文本框:文本框类型textarea
- 选择框:自定义下拉内容
- 上传文件:显示方式、整体高度
- 日期框:设置日期格式
- 数字框:数据范围显示、步长
维护多个设备列表 MultiAssets
- 布局控件-行、列
- 单对象控件
- 按钮:单击事件——创建设备、编辑设备、删除
- 多对象控件
- 表格:列定制面板、操作列、事件
手机端控件信息 assetMobile
- 表单模型中新增移动端表单
- 创建操作时直接新增移动端表单
...
1.2 查看设备详情
查看设备详情指的是1.1建立设备列表中商品卡片中的设备详情,点击商品卡片,属性区中事件中新增单击事件,填写显示名“显示手机详情页”,选择动作“edit”,操作样式“tab|页签”,目标类“设备”,点击新增表单名称,开始创建表单,填写表单名“assetMobileSingle”,显示名(中文名)“搅拌车手机详情”。编辑新增表单,进入表单定制页面。
1)表单定制页面中,拖拽控件区的多列到手机画图区中,拖拽上传文件到多列的第一个框中,属性区中选择目标属性“设备图标”,显示方式“图片”,设置对齐方式“居中”。拖拽文本标签到多列的第二个框中,属性区中选择目标属性“代号”。
2)表单定制页面中,拖拽控件区的多列到手机画图区中,分别拖拽两个动态数字框到多列中,点击第一个动态数字框,属性区中选择“工作小时数”,填写单位设置“小时”,选择开启动效。点击第二个动态数字框,属性区中选择“总里程数”,填写单位设置“公里”,选择开启动效。
3)拖拽控件区的百度地图到手机画图区中,属性区中选择经度“位置经度”,纬度“位置纬度”,图标“设备图标”,点击过滤条件,点击全局唯一标识Oid,及当前的全局唯一标识Oid,即“and obj.oid = '$obj.oid'”。样式填写“200px”。
4)拖拽商品卡片到手机画图区中,属性区选择目标类“工单”,商品标题“代号”,商品描述“工单标题”,商品图片“工单照片”,商品标签“工单状态”,点击刷新卡片。点击过滤条件,点击工单的故障设备assetOid,及当前的全局唯一标识Oid,即“and obj.assetOid = '$obj.oid'”。
5)保存表单后,点击分享,出现手机扫码预览的二维图,读者用自己的手机扫描,可以看到相应的手机端页面。
2.工单查看表单
2.1 编辑工单详情
工单查看表单指的是1.2中查看设备详情中,点击顶部的文本标签,属性区中事件中新增单击事件,填写显示名“手机工单详情”,选择动作“edit”,操作样式“tab|页签”,目标类“工单”,点击新增表单名称,开始创建表单,填写表单名“workOrderMobileSingle”,显示名(中文名)“手机工单详情”。编辑新增表单,进入表单定制页面。
1)表单定制页面中,拖拽控件区的标签到手机画图区中,属性区中样式中标签文本大小和内容文本大小都设置为“30”,选择目标属性“代号”。
2)拖拽控件区的选择框到手机画图区中, 选择目标属性“故障设备”,点击数字字典,选择引用类“设备”,浏览字段“代号”,“设备名称”,回填字段“全局唯一标识”,点击保存。
3)分别拖拽控件区的两个文本框到手机画图区中,第一个文本框选择目标属性“工单标题”,第二个文本框选择目标属性“工单描述”,占位文本“textarea”,点击保存。
4)拖拽控件区的选择框到手机画图区中, 选择目标属性“工单状态”,填写自定义选项组“已创建,已下达,执行中,已关闭”,点击确认,点击保存。
5)拖拽控件区的选择框到手机画图区中,选择目标属性“负责工程师”,点击数字字典,选择引用类“用户”,浏览字段“用户名”,“显示名”,回填字段“全局唯一标识”,点击保存。
6)拖拽控件区的日期框到手机画图区中,选择目标属性“截止日期”,点击保存。
7)拖拽控件区的上传文件框到手机画图区中,选择目标属性“工单照片”,显示方式“图片”,点击保存。
8)拖拽控件区的多列框到手机画图区中,分别拖拽两个按钮到多列框中,分别点击两个多列框,在属性区样式中,点击水平对齐方式“居中”,分别点击两个按钮,在属性区中样式中,点击圆角,宽度设置为“100px”。点击第一个按钮,属性区事件中选择单击事件“编辑”。点击第二个按钮,属性区事件中新增单击事件,填写显示名“回到设备”,选择动作“visit”,操作样式“tab|页签”,目标类“设备”,表单名称“assetMobile”,点击保存。
3.手机端显示设备工单详情
通过创建设备、工单详情,读者可以看见不同的手机表单,本部分内容通过在功能模型中手机端的设置,让读者在手机中可以自由跳转,看不同的设备、工单页面。
功能模型中,点击设备手机端,弹出的页面中点击添加标签,填写显示名“工单”,选择动作“visit”,目标类“工单”。点击新增表单名称,弹出创建表单对话框,填写表单名“workOrderListMobile”,显示名“工单列表”。
拖拽控件区中的商品卡片到手机画图区中,修改属性区样式整体高度为“100vh”,选择目标类“工单”,商品标题“代号”,商品描述“工单标题”,商品图片“工单照片”,商品标签“工单状态”,点击刷新卡片。新增单机事件,填写显示名“查看详情”,选择动作“visit”,操作样式“tab|页签”,目标类“工单”,表单名称“workOrderMobileSingle”,点击保存。
功能模型中,点击设备手机端,将设备设为默认,并移动到工单上面,点击保存设置,点击扫码体验,出现手机扫码预览的二维图,读者用自己的手机扫描,可以看到相应的手机端页面。
手机页面中,点击第一张图下面的设备列表,出现第二张页面。第二张页面中点击下面的工单列表,出现第三张页面。第三张页面中点击工单详情,出现第四张页面。第四张页面中点击右下角的回到设备按钮,又回到第一张页面。如此反复,手机端的表单定制功能在无代码的环境下可以定制出来。
4.小结
基本概念
- 移动端应用通道
- 移动端表单
功能实现
- 设备浏览,工单浏览
- 商品列表
- 轮播图
- 设备详情,工单详情
- 标签、文本、选择框、拍照
- 按钮
5.附件
View file | |
---|---|
|
|