页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

1.维护单个设备信息

单个设备信息维护表单设计如图。

Image RemovedImage Added

图-维护单个设备信息表单

第三章 表单建模入门 提到的基础控件,将不再本章赘述,下面为大家讲解新控件的使用。

...

3)在自定义下拉内容处,将“搅拌车,挖掘机,装载机”(逗号分割,中英文符号均可),点击确定后,下拉的选项组即刻显示在下拉框中。

Image RemovedImage Added

图-选择框属性设置


信息
title注意!
  • 在该设备表单中做为对象下拉选择框使用,当打开“开启多选”开关后,可以实现多选;
  • 当在属性编辑区打开”数据字典‘时,对象下拉选择框可做外键引用类控件使用。

1.2

...

单对象控件-日期框

我们日常注册用户信息,填写申请表时,往往会遇到选择日期的情况,例如出生日期、请假日期。DWF提供了日期框的控件,用于解决实际业务场景需要记录时间类型的数据。点击时间框时,能够下拉显示一个日历缩略图,并支持设置时-分-秒。接下来为大家讲解日期框的使用。

...

3)根据实际的业务需要,可以设置日期框的日期格式,例如年月、年月日、时分秒等。默认设置为年月日。

Image RemovedImage Added

图-日期框属性设置

1.3 单对象控件-数字框

...

4)数字框除了直接输入数字,还可以点击输入框右侧上下箭头改变取值。步长指点击上下箭头时,数值在原有基础上增加或减少一步长单位。默认步长设置为1。

Image RemovedImage Added

图-数字框属性设置

2.维护设备列表

同零部件列表的维护,设备列表维护同样使用了表格、按钮控件。

Image RemovedImage Added

图-维护设备列表表单

2.1 多对象控件-表格

...

选中表格后,右侧出现表格控件的属性编辑框。在属性编辑区中部提供了多个设置项供用户个性化设置表格。如下图所示。

Image RemovedImage Added

表格属性设置项具体含义如下:

...

鼠标移动到列的右上角,点击该区域,此时弹出列定制面板弹窗。列定制面板弹窗分基本设置和显示模式两项,接下来为大家讲解基本设置-引用设置功能的使用。

Image RemovedImage Added

图-列定制面板

基本设置-引用设置:引用设置是指当前表格目标类对象上的某个属性值在表格中显示不够直观或友好,我们通过引用相关类的数据使其展示更为直观。例如在本案例中,设备类上有一个UUID类型的“部件partOid”属性,回填到数据库的数据为零部件类对象的“全局唯一标识oid”。如果直接显示这一长串二进制数,并无意义。这时使用列面板定制功能的引用设置功能可以将数据更友好的显示出来,引用设置操作步骤如下:

...

2)设置引用类为零部件(Part),回填字段为“全局唯一标识oid”,浏览字段为“零件名称partName”,点击确定后设置成功。

Image RemovedImage Added

图-列定制面板详情

基本设置-样式设置:样式设置主要提供了以下设置项:

...

6)操作列也支持冻结,本案例中开启冻结后选择冻结位置在右侧。

Image RemovedImage Added

图-操作列设置面板

下面以在设备列表的操作列创建工单操作为例,为大家介绍操作的设置信息。这部分内容会涉及到第五章 表单建模进阶的表单,大家可以学习第五章后再进行操作。同时在本示例中还会串讲第三部分 DWF脚本开发的脚本内容。大家不必纠结脚本语法,按照我们提供的脚本复用即可。

Image RemovedImage Added

图-基于设备创建工单操作编辑框

...

操作列除了可以完成以上功能,还可以下载设备图片。为操作列新增一个按钮,在属性区-事件处选择单击事件——新增并绑定下载图片操作。下载图片操作的设置信息如下。

Image RemovedImage Added

图-下载图片操作编辑框

需要使用到的脚本内容如下,我们将在第三部分 DWF脚本开发为大家详解。

代码块
languagejs
linenumberstrue
clientScript:
if (this.selectedObjs && this.selectedObjs.length > 0){
    var targetObjOid = this.selectedObjs[0].oid
    fileURL=
    `http://${this.env.serverIp}:${this.env.serverPort-8180+9090}/dwf/v1/omf/classes/${this.className}/objects/
		${targetObjOid}/attributes/assetImg/bytes?attachment=true&0`;
    console.log(fileURL);
    window.open(fileURL);
}

2.2 单对象控件-按钮

上一讲关于按钮的使用,与本章中关于新增设备、编辑设备功能的实现建模步骤相同。

...

如果想要实现功能的操作并未创建,则需要点击“绑定操作”处的“+”按钮,为按钮新增并绑定一个操作。

Image RemovedImage Added

图-创建设备操作编辑框

3.批量创建及编辑实体类

...

3)保存表单后,回到app端刷新页面。点击新增按钮,可实现批量新增多条无属性值数据,双击表格列可编辑行数据(实体类对象)。这样我们就实现了批量新增实体类对象和编辑实体类对象。如下图所示。

Image RemovedImage Added

下面介绍第2种——批量新增实体类对象后使用操作列实现对象编辑。建模过程(基于上文已创建的表单)如下:

...

3)保存表单后,回到app端刷新页面。还是同样的方式,可以多次点击新增按钮批量新增实体类对象,此时可以点击操作列对新增的空对象进行对象编辑。如下图所示。

Image RemovedImage Added

4.小结

维护单个设备信息 SingleAsset

  • 布局控件
    • 行、列、分组框
  • 单对象控件
    • 文本框:文本框类型textarea
    • 选择框:自定义下拉内容
    • 附件:显示方式、整体高度上传文件:显示方式、整体高度
    • 日期框:设置日期格式
    • 数字框:数据范围显示、步长
    布局控件
    • 行、列、分组框

维护多个设备列表 MultiAssets

  • 布局控件-行、列
  • 单对象控件
    • 按钮:单击事件——创建设备、编辑设备、删除
  • 多对象控件
    • 表格:列定制面板、操作列、事件

...

View file
name表单建模入门(二).zip
page表单建模入门(二)
spaceDWF
height250