本章将进一步介绍如何通过DWF的前端脚本访问加载到界面的业务对象数据。

脚本基础

在介绍前端数据访问的脚本编程方法之前有必要先简单介绍一下前端数据的概念，在之前的定制培训过程中，读者应该初步了解到DWF的表单可以展示单个的对象，也可以展示多个对象，每当表单显示在用户面前的时候，DWF一方面按照表单的模板把表单的样子展示给了用户，同时，DWF还通过与服务器通讯，将用户希望展示的数据也填入了表单之中。这些填入到表单中的数据也就是前端的数据的组成。

（一）访问前端数据的保留字

和上一章介绍的内容相同，DWF的提供了一系列用于访问前端数据的保留字，通过这些保留字可以实现对表单数据的访问，这些保留字包括：

• this.className：字符串，表单所属的实体类或者关联类的名称。
• this.obj：对象，表单中含有单个对象的时候，通过此变量访问当前对象。
• this.selectedObjs：数组，表单中含有唯一的多对象控件时，通过此数组获得用户选中的对象。

举个例子，如下图的两幅表单所示：

• 首先，两幅表单都是用于展示设备类数据的表单，因此，this.className = 'Asset'。
• 当打开了单个设备编辑表单的时候，可以通过this.obj访问到该表单中显示的对象。
• 右边的显示了当打开多个设备的列表的时候，则可以通过this.selectedObjs访问当前选中的设备对象，结果为一个数组。

图-设备类表单中数据的访问示意

（二）访问业务对象属性的取值

当拿到对象的引用之后，下一步是访问对象的属性取值，在DWF中存在实体类和关联类两种数据类型，这两种类型对应的对象属性的访问方式有所不同，分别介绍如下：

对于实体类，属性的取值的获取方式比较简单，如下所示：

• this.obj.[属性名]：其中[属性名 ]是属性的英文名称，返回值则为具体对象的取值。

例如：访问设备类（Asset）的设备名称：this.obj.assetName

而对于关联类对象，由于涉及左类对象、右类对象和关联类对象，因此在前端脚本中需要进行区分，因此属性的取值的访问方式如下：

• this.obj.left_[左类属性名]：访问左对象的具体属性。
• this.obj.right_[右类属性名]：访问右对象的具体属性。
• this.obj.relation_[关联属性名]：访问关联对象的具体属性。

例如：访问一个父件到子件关联类对象的取值的时候，可以这么写：

• 访问父件到子件类（Part2Part）的装配数量：this.obj.relation_number
• 访问父件到子件类（Part2Part）的父件Oid：this.obj.left_oid 或 this.obj.relation_leftOid
• 访问父件到子件类（Part2Part）的子件类型：this.obj.right_partType

（三）与后端进行数据的交换                                               

在前端的脚本中如果获得对象的引用之后，也可以直接通过脚本将变更对象传递到后端保存，后端对已经存在的对象进行修改保存，或者是删除，具体的用法如下：

• this.create (targetObject, targetClass)
• this.edit (targetObject, targetClass)
• this.delete (targetObject, targetClass)

上述三个函数中create表示新建保存对象，edit表示更新保存对象，delete表示删除指定的对象，传递参数的含义如下：

• targetObject：对象，表示需要被增删改的对象，一般通过this.obj或者this.selectecObjs获得。
• targetClass：字符串，表示对象在DWF中的数据类型，一般通过this.className获得。

上述三个函数调用之后的返回值是另一个函数then，包含1个参数，表示后台返回结果，对结果的处理方式如下面的代码所示：

this.edit(targetAsset, targetClass).then(result=>{
	console.log(result);
	this.msgbox.info(`更改设备${targetAsset.id}的状态`);
	//刷新前端…
})

（四）脚本访问业务数据模型

为了减轻在DWF编写脚本的时候的记忆负担，DWF在脚本编辑工具之外提供了一个辅助工具用于帮助建模人员快速得到业务对象模型数据，即类名以及类的属性名。如下图所示：

图-前端数据模型信息获取辅助工具

脚本案例

接下来，围绕设备状态管理的应用，做几个示例用于展示前端数据访问的方法。

（一）访问被选中的设备并消息显示

首先，在设备类（Asset）的多设备列表浏览表单中（MultiAssets）添加一个按钮，增加绑定的操作，显示当前被选中设备的代号。

图-选中设备对象消息显示脚本操作定义

脚本如下所示：

console.log(this.selectedObjs, this.className);
if (this.selectedObjs) {
    if (this.selectedObjs.length > 0) {
        this.msgbox.info(`hello ${this.selectedObjs[0].id}`);
    }
}

在App端打开以后，显示效果如下：

图-访问对象数据示例

（二）访问单个设备对象并弹窗显示

接下来，在单个设备表单（SingleAsset）中放入一个按钮，按照同样的方法放入如下的单对象访问前端脚本，获取并显示单个设备对象的代号

console.log(this.obj, this.className);
if (this.obj) {
    this.msgbox.info(`hello ${this.obj.id}`);
}

图-单对象数据访问示例

（三）将选中设备的状态变为“已安装”

在设备列表的表单（MultiAssets）之中，放入一个按钮，将其绑定到一个新的操作上，前端输入脚本如下：

if (this.selectedObjs) {
    if (this.selectedObjs.length > 0) {
        var targetClass = this.className;
        var targetAsset = this.selectedObjs[0];
        targetAsset.assetState = "已安装";
        this.edit(targetAsset, targetClass).then(result => {
            console.log(result);
            this.msgbox.info(`更改设备${targetAsset.id}的状态`);
        })
    }
}

点击该按钮可以改变设备的状态属性，如下所示：

图-更改设备状态的脚本操作示意

（四）删除选中的设备

回到之前的设备列表表单（MuitiAssets），再放入一个按钮，将其绑定到一个新的操作上，命名为：删除选中设备，在前端代码中输入如下的代码

if (this.selectedObjs) {
    if (this.selectedObjs.length > 0) {
        var targetClass = this.className;
        var targetObj = this.selectedObjs[0];
        this.delete(targetObj, targetClass).then(result => {
            console.log(result);
            this.msgbox.info(`删除设备${targetObj.id}`);
            //控制后端刷新
            var addins = this.GetTargetAddin();
            addins.forEach(x => {
                x.freshData();
            });
        });
    }
}

点击此按钮后会将选中的设备对象从数据库中删除。

小结

本章介绍了单对象表单和多对象表单的数据引用方法，并且结合四个例子展示了对象引用脚本的用途，其中需要记住的保留字如下：

• 表单对象快速引用 this.obj, this.selectedObjs, this.className ;
• 对象属性数据访问 obj.属性英文名, obj.left_属性英文名, obj.right_属性英文名, obj.relation_属性英文名 ;
• 对象数据增删改 this.insert(), this.delete(),this.edit();

后续，将在数据的基础上进一步介绍操作表单中控件。

示例模型包

访问表单中的数据.zip