上一讲，以设备管理系统中的零部件（Part）为案例，简要介绍了实体类表单建模和部分表单控件的用法。这一讲中，我们将进一步围绕实体类表单建模、多对象及手机端控件展开。本讲中涉及新的控件包括：

• 单对象控件：选择框、日期框、数字框
• 多对象控件：表格的列面板定制、事件、操作列功能

1.维护单个设备信息

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

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

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

1.1 单对象控件-选择框

在第三章 表单建模入门 我们介绍了如何使用单选框控件来处理属性值数据较少的业务。除了单选框，DWF还提供了下拉选择形式的选择框，为用户定制提供更多可能。

本次案例中，设备的类型我们设定为搅拌车,挖掘机,装载机。选择框的建模过程如下：

1）在控件区-单对象控件分类中找到选择框()控件，将选择框拖入合适布局内；

2）选中画布区的选择框，右侧滑出选择框的属性编辑框。为选择框控件目标属性绑定“设备类型assetType”属性；

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

图-选择框属性设置

1.2 单对象控件-日期框

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

1）在单对象控件区找到日期框()控件，拖入合适布局区内；

2）选中布局区的日期框，右侧滑出日期框的属性编辑框。根据案例设计，为日期框目标属性绑定“安装时间installationTime”属性；

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

图-日期框属性设置

1.3 单对象控件-数字框

除了时间类型的数据，我们在日常生活中，还会遇到填写年龄、体重等数字类型的情况。在DWF中，数字框用于解决数字类型数据的维护和展示。接下来为大家讲解数字框的使用。

1）在单对象控件区找到数字框()控价，拖入合适布局内；

2）选中布局区的数字框控件，右侧滑出数字框的属性编辑框。以“位置经度locationX”为例，为数字框控件绑定该属性；

3）根据实际情况设置数字填写的范围；

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

图-数字框属性设置

2.维护设备列表

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

图-维护设备列表表单

2.1 多对象控件-表格

在本节中，我们将进一步讲解表格控件的使用技巧，主要有三个功能：列定制面板、操作列和事件。首先是我们已熟悉的表格设置：

1）在多对象控件区域找到表格()控件，拖入合适布局内；

2）选中表格控件，右侧滑出属性编辑框，为表格控件设置目标类，默认为当前表单的目标类，即设备（Asset）；

3）点击选择属性按钮，弹出设备类属性弹窗，选择“代号”、“设备名称”、“设备类型”、“工作小时数”...“业主名称”等设备信息属性（可按需勾选）。表格列属性的显示顺序按照勾选属性时的顺序，如果想要调整顺序，可以用鼠标选中表格列名，拖动列名使鼠标变成十字光标，即可实现列位置的调整。

2.1.1 表格属性设置

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

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

• 全表可排序：默认开启，排序支持。
• 可导出：默认开启，开启后表格右下角出现“导出CSV”按钮。
• 多选：默认关闭，开启后表格数据行出现勾选框。
• 拖拽列宽：默认开启，开启后可拖拽列宽。
• 全表只读：默认关闭。该设置项的优先级高于单独设置列可编辑（列定制面板处设置）。
• 操作列：默认关闭。开启后表头出现一列“操作列”，点击该表头右上角出现操作列设置面板即可设置列操作。详细使用说明见2.1.3 操作列。
• 序号列：默认关闭。开启后表格出现序号列。
• 可拖拽：默认关闭。关闭时表格不可拖动，开启后方可拖动表格。
• 区域选择：默认关闭。开启后可以对表格数据进行区域选择（参考Excel）。
• 状态栏：默认关闭。需配合区域选择一起使用，开启后，表格底部出现状态栏。当区域选择的列为数字类型将统计最大值、最小值、合计等。当选择为字符串会显示区域选择的行数。
• 紧凑模式：默认关闭。开启后，行与行之间的间距缩短，若设置有操作列，操作列样式会被去掉。
• 开启分页：默认开启。默认每页显示25条数据，可在建模端设置分页条数。
• 自适应列宽：默认关闭。开启后，根据列数自适应调整列宽。表格自适应列宽关闭后，默认设置列宽为200px。

2.1.2 列定义面板

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

图-列定制面板

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

1）在表格“部件”列名右上角鼠标由箭头变成小手后，点击右上角弹出列定制面板弹窗；

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

图-列定制面板详情

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

• 可排序，默认可排序。点击列名时支持升序或降序显示数据。
• 可定制，默认可定制。开启此功能后，在应用端点击列名右上角会出现过滤器。
• 该列可编辑，默认不可编辑仅能浏览。开启此功能后，双击该列下的一条数据可进入编辑模式，属性离开此区域后自动保存编辑。
• 冻结该列位置，默认不冻结。开启此功能后，需选择冻结该列在左侧或者右侧。
• 九宫格布局，调整表格数据布局位置。

显示模型：为了能将存在数据库的数据更直观友好地显示在表格中，列定制面板提供了显示模式方便建模者进行多样化的设置。

• 进度条：用进度条的形式显示数字类型的数据，可以显示该数据在某场景下的进度。
• 勾选框：勾选多行数据，进行批量操作。
• 时间转换：系统默认将时间类型的数据转换为“年月日 时分秒”格式。可以根据业务需要，调整时间戳的转换形式，例如“年月”、“时分秒”等。
• 时序动态数字：显示对象上绑定时序数值绑定路径对应的动态数字。
• 替换显示内容：转换数据为Key-Value类型的数据，使表格显示Value数据。

2.1.3 事件

根据表格的使用特性，提供了以下几种事件：

• 初始化事件：表格初始化数据时，触发的事件。
• 前处理事件：表格所在表单被打开前数据的处理事件。
• 翻页事件：当表格翻页时，触发的事件。
• 鼠标悬浮toolTip事件：鼠标悬停在表格某列数据上时触发的事件。
• 单击事件：鼠标单击表格数据时触发的操作。
• 双击事件：鼠标双击表格数据时触发的操作。

表格事件的绑定同按钮绑定单击事件，只是表现形式不同。

2.1.3 操作列

在本案例中，我们还将为大家介绍操作列的功能。在实际业务中，常常需要针对某一个设备创建工单。除了在表格外放按钮控件维护表格数据外，还可以通过开启操作列功能。

以在设备列表基础上创建针对每个设备创建工单的操作为例，下面为大家介绍操作列的使用：

1）选中画布中的表格控件，在滑出的右侧属性编辑框，找到“操作列”勾选框；

2）勾选该功能，画布区表格多出一列——“操作列”；

3）点击“操作列”列名右上角，弹出操作列设置面板；

4）在操作列定制面板顶部，可维护操作列按钮个数的按钮和；

5）点击按钮后，还需要为该按钮绑定事件让其有意义。此处操作绑定步骤同按钮控件；

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

图-操作列设置面板

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

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

表单打开前脚本内容如下，用于为将选中设备对象的”全局唯一标识oid“回填到工单对象的“故障设备oid“。

//前处理脚本
if (this.selectedObjs && this.selectedObjs.length > 0){
    return {
        obj: {
            assetOid: this.selectedObjs[0].oid,
            woTitle: "输入维修规程"
        }
    }
}

表单关闭后脚本如下，创建工单成功后，更新设备对象记录“当前工单数woCount”的属性值，同时刷新MultiAssets表单中表格的数据。

//后处理脚本
 if (this.selectedObjs && this.selectedObjs.length > 0) {
    targetAsset = this.selectedObjs[0];
    targetAsset.woCount += 1;
    this.edit(targetAsset, this.className).then(r => {
        grid = this.getAddinById("Grid1");//Grid1为MultiAssets表单中表格控件代号，需要调整成自己系统表格的id
        grid.freshData();
    })
}

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

图-下载图片操作编辑框

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

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 单对象控件-按钮

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

需要注意的是，当建模者已经创建了“新增设备”、“编辑设备”的操作，在同一目标类的表单中是可以复用的。建模着可以拖入一个按钮控件到画布区，在右侧属性区找到事件，按钮控件支持的事件为“单击事件”。点击单击事件的下拉框，可以看到刚才为设备（Asset）创建两个操作，选择任一操作即可实现按钮的事件绑定。

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

图-创建设备操作编辑框

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

上述用按钮绑定单击事件-新增设备管理，可以实现带界面的实体类对象新增。现在为大家介绍两种快速批量创建并编辑对象的方法。

• 第1种：批量新增实体类对象后使用列编辑功能实现对象编辑。
• 第2种：批量新增实体类对象后使用操作列实现对象编辑。

首先介绍第1种——批量新增实体类对象后使用列编辑功能实现对象编辑。建模过程（基于上文已创建的表单）如下：

1）在画布区拖入一个按钮控件，选中按钮控件，在右侧属性编辑区-事件处绑定单击事件，选择绑定基础操作-“新增”；

2）点击画布区的表格控件，再点击表格列名（可按需设置）右上角，弹出列定制面板，展开“样式设置”标签页，将“该列可编辑”的勾选框勾选上；

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

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

1）回到modeler端，打开MutilAssets表单。选择画布区的表格，勾选右侧属性区中“操作列”设置项。

2）查看表格最右侧列，找到“操作列”列名，点击列右上角弹出操作列编辑框。如上文关于如何使用操作列的设置，可为操作列增加一个“编辑工单”（动作edit，目标类Asset、表单SingleAsset）操作。

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

4.小结

维护单个设备信息 SingleAsset

• 布局控件
  • 行、列、分组框

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

维护多个设备列表 MultiAssets

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

5.附件

第四章 表单模型（二）.zip