页面树结构

版本比较

标识

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

概述

下面的表格列举了DWF的前端脚本提供的基础调用,以及一些控件的用法要领:

  • 全局变量:DWF脚本引擎中可以直接访问到的变量数据
  • 查询条件:在查询条件配置界面和URL操作的链接中可以使用的全局变量
  • 应用配置:可以用来控制app端的一系列函数,例如:在应用打开的时候把那些模块展开
  • 数据交互:DWF脚本访问数据或者通过接口访问数据,与前端进行消息通讯等
  • 表单交互:DWF脚本实现表单直接的切换,表单本身数据的更新,表单间参数传递
  • 控件访问:DWF脚本直接访问表单的控件、获取控件上的方法等
  • 控件要领:对部分控件的脚本使用要领

评论区则是在实战中积累的经验,作为备忘尚未整理但是在解决实际问题时肯定会用到的脚本。

详情

序号功能分类脚本名称/关键字功能描述适用范围/场景脚本示例说明
关键字
1全局变量





this.obj

表单绑定的类的对象,如果没有条件限制默认获取的是绑定类的最新一条记录

是一个JSON对象

this.obj是当前表单绑定类的对象,可以通过类上的属性获取返回对象的某一项的值

调试查看this.obj的返回值:

console.log(this.obj);

1)操作动作为visit/edit时,this.obj有数据

2)操作的前处理脚本中写了return{obj:obj},表单的this.obj会有对应值

使用范围:

在表单上绑定的前端脚本均可用

实体类:

  • console.log(this.obj);
  • this.obj.[属性名]

关联类:

  • this.obj.left_[左类属性名]
  • this.obj.right_[右类属性名]
  • this.obj.relation_[关联属性名]
2this.selectedObjs

表单中含有唯一的多对象控件时,通过此数组获得用户选中的对象,如果是有多个多对象控件可以在表单设置中绑定多对象控件

是一个JSON对象数组

使用范围:

表单中有多对象控件(表格),并且在表单的基础配置中设置了默认多对象控件,该脚本有效,否则为null


代码块
languagejs
console.log(this.selectedObjs);


3this.data

打开表单的初始化参数

在表单中的任何操作的前端脚本都可以直接使用this.data获取初始化参数

是一个JSON对象

可以使用的场景有两类:

1)操作的前处理脚本,通过return{ data:this.obj} 可以传递json对象到打开的表单

2)使用脚本打开表单传参,可用的有:this.openTab,this.openForm,this.openDrawer


代码块
languagejs
console.log(this.selectedObjs);


4this.env

当前DWF前端的上下文信息,返回一个JSON对象,JSON对象属性包括:

  • this.env.serverIp:获取服务器ip,在浏览器地址栏输入的DWF服务器位置
  • this.env.serverPort:字符串,在浏览器地址栏输入访问DWF服务器的端口号
  • this.env.appConfig[]:键值对,包含了在DWF配置文件中记录的配置项
  • this.env.serverURL:获取服务器URL,服务器IP+端口
  • this.env.metaServicePort:DWF元数据接口访问端口
  • this.env.objServicePort:DWF对象数据接口访问端口
  • this.env.locale:当前DWF的语言环境,用于判断是否要执行特定国家的逻辑

可以用在所有的前端脚本中,不限位置



代码块
languagejs
console.log(this.env);
console.log(this.env.serverIp);
console.log(this.env.serverPort);
console.log(this.env.serverURL);
console.log(this.env.metaServicePort);
console.log(this.env.objServicePort);
console.log(this.env.appConfig);
console.log(this.env.locale);


5this.user

当前登录用户的基本信息,返回一个JSON对象,包括属性如下:

  • this.user.oid:字符串,当前登录用户在内部的唯一代号
  • this.user.userName:字符串,用户登录DWF的账号
  • this.user.displayName:字符串,用户的中文显示名
  • this.user.token:字符串,用于访问其他网站的令牌
  • this.user.userGroups:数组,当前用户所属的直接用户组
需要获取到用户的基本信息的时候,可以使用this.user


代码块
languagejs
console.log(this.user.userName);
console.log(this.user.userId);
console.log(this.user.oid);
console.log(this.user.token);
console.log(this.user.userGroups);
console.log(this.user.displayName);


6this.store

DWF内部变量,缓存了当前访问表单的基本信息

是一个JSON对象,可用的对象如下:

  • this.store.state.DWF_form :表单绑定的类和属性的信息
  • this.store.state.DWF_global:当前DWF的服务器配置信息包括:服务器地址、接口对应端口等
  • this.store.user:当前登录用户和用户组的信息及当前登录的token

需要获取到配置系统的配置信息的时候可以使用this.store



代码块
languagejs
console.log(this.store.state.DWF_form);
console.log(this.store.state.DWF_global);
console.log(this.store.state.user);
console.log(this.store);


7this.confirmData弹窗表单新增对象/编辑对象成功后提交的表单数据,在后处理脚本中可用仅适用于操作的后处理脚本中
在后处理脚本中可以使用


代码块
languagejs
console.log(this.confirmData);


8this.className表单所属的实体类或者关联类的名称任何表单的脚本中都可以使用


代码块
languagejs
console.log(this.className);


9

this.generateUUID()

生成uuid的函数


代码块
languagejs
console.log("打印自动生成的uuid:"+this.generateUUID());


10查询条件关键字$env

仅在拼接过滤条件等场景下使用,获取当前环境的基本信息,返回一个JSON对象,包括属性如下:

  • $env.serverURL:获取服务器URL
  • $env.serverIp:获取服务器ip
  • $env.serverPort:服务器端口
  • $env.metaServicePort:DWF元数据服务端口
  • $env.objServicePort:DWF对象数据服务端口

1、操作动作为url的时候,在URL地址中可用$env

2、在过滤条件中可以使用$env

3、嵌入网页的连接地址中可以使用$env

4、功能模型->应用管理->编辑应用中的起始操作可以使用$env


11$user

仅在拼接过滤条件等场景下使用,当前登录用户的基本信息,返回一个JSON对象,包括属性如下:

  • $user.oid:字符串,当前登录用户在内部的唯一代号
  • $user.userName:字符串,用户登录DWF的账号
  • $user.displayName:字符串,用户的中文显示名
  • $user.token:字符串,用于访问其他网站的令牌
  • $user.userGroups:数组,当前用户所属的直接用户组

1、操作动作为url的时候,在URL地址中可用$user

2、在过滤条件中可以使用$user

3、嵌入网页的连接地址中可以使用$user

4、功能模型->应用管理->编辑应用中的起始操作可以使用$user


12$obj

仅在拼接过滤条件等场景下使用,表单绑定的类的对象,如果没有条件限制默认获取的是绑定类的最新一条记录

是一个JSON对象

1、在表单中的事件操作动作为url的时候,在URL地址中可用$obj

2、在过滤条件中可以使用$obj

3、嵌入网页控件的连接地址中可以使用$obj

注意:当表单以create状态打开,如果未初始化数据$obj的各项属性为空,慎用


obj.[attributeName类属性英文名]=$obj.[attributeName类属性英文名]

13$form

获取表单的单对象控件的取值

示例:$form["控件代号"]

该关键字可用到过滤条件中,并且仅对单对象控件有效(有getValue方法的有效)

注意:如果是单选框、复选框、选择框等设置了数据的回填和显示属性不一致,则此处返回的是该控件的回填属性的取值

在过滤obj.attributeName= '$form["id"]'

this.generateUUID()

生成uuid的函数console.log("打印自动生成的uuid========"+this.generateUUID());
14应用配置this.env.setCollapsed(
控制展开的参数
);
侧边栏默认为展开,默认为fasle
  • 侧边栏默认为展开,默认为false
参数为true时表示侧边栏展开
  • 参数为false时表示侧边栏展开
参数为false时表示侧边栏关闭
  • 参数为true时表示侧边栏关闭
PC应用菜单


代码块
//控制侧边栏收起
setTimeout(() => {
	this.env.setCollapsed(true);
},500)


15this.env.setOpenNames

指定某些菜单展开

  • 展开菜单列表为二维数组,示例中['外部模块','iotdb外部映射','A'],按照格式['第一级菜单','第二级菜单','第三级菜单'],写入分组菜单的中文名称,只展开匹配到的下一个层级,再深层级的嵌套子集的不需展开
PC应用菜单


代码块
//分组菜单默认折叠,如需展开:
setTimeout(() => {
	this.env.setOpenNames([['招聘管理','人事管理'],['招聘管理','个人信息'],['外部模块','iotdb外部映射','A']])
},500)



数据访问

this.handleQueryData()

获取DWF定制的实体类、关联类的数据对象的脚本,支持回调,入参的查询条件为JSON对象,分别是:(返回方式为异步请求,如果在前端脚本要等待返回成功做处理需要将处理内容写到回调函数中)

  • targetClass:要查询数据所在的类(实体类、关联类、外部实体类)
  • queryObjReq:查询条件,是一个json对象,包含如下的属性:
    • 单纯查询目标类对象
query:字符串,可以不传,一个DWF的快速查询条件,即:以and开头的若干逻辑表达式的组合,例如:`and
      • condition:字符串,可以不传,一个DWF的快速查询条件,即:以and开头的若干逻辑表达式的组合,例如:`and obj.creator = '${this.user.oid}'`。
      • startIndex:整数,可以不传,用于翻页,从哪一行开始
      • pageSize:整数,可以不传,用于限制每页的大小
      • returnAttrs:字符串数组,可以不传,表示在得到的结果里面需要哪些英文名的属性,如:["assetName", "assetType", "assetState", "workhours"]
    • 通过属性引用其他类对象,此时返回的结果将变为1个JSON对象,包含queryResult和refResult两个属性,具体引用设置如下:
refs:数组,用于在第一轮查询出的结果基础上从数据库通过关联Join查询引用多个其他实体类对象,并将结果一并返回
  • id:字符串,返回值唯一key值,可以不填,如果不填,则返回结果为sourceAttr的取值。
  • sourceAttr:字符串,targetClass所指的实体类(或关联类)上关联了对象的属性,如 consumer(订单创建人)
  • sourceAttrSplit:字符串,sourceAttr的参数分隔符,用于支持根据多选回填查询显示取值
        • refs:数组,用于在第一轮查询出的结果基础上从数据库通过关联Join查询引用多个其他实体类对象,并将结果一并返回
          • id:字符串,返回值唯一key值,可以不填,如果不填,则返回结果为sourceAttr的取值。
          • sourceAttr:字符串,targetClass所指的实体类(或关联类)上关联了对象的属性,如 consumer(订单创建人)
          • sourceAttrSplit:字符串,sourceAttr的参数分隔符,用于支持根据多选回填查询显示取值
          • targetClass:字符串,被关联的类的类名,如 Customer(客户信息类)
          • targetAttr:字符串,被关联的类上的关联字段(即 回填字段),如 name
          • returnAttrs:字符串数组,可以不传,表示在得到的结果里面需要哪些英文名的属性,如:["assetName", "assetType", "assetState", "workhours"]
      • 顺便查询其他类对象,如果希望通过查询得到的结果与目标类直接查询得到的结果无关,只是顺便查询,例如:一些字典的选项,那么就可以使用options,其返回的结果会在前面的refResult、queryResult的基础上,额外包含optionsResult,类型为一个数组。
        • options:数组,用于在第一轮查询的结果基础上,额外提取一些与查询结果无关的其他类数据,一方面方便前端处理,同时减少前后端来回的调用降低性能
          • id:字符串,返回值唯一key值,可以不填,如果不填,则返回结果为sourceAttr的取值作为key。
          • targetClass:字符串,被关联的类的类名,如 Customer(客户信息类)
    targetAttr:字符串,被关联的类上的关联字段(即 回填字段),如 name
          • condition:字符串,以 and 开头的 sql 查询语句,此字段可不传递或设为空串
          • pageSize:数字,被请求对象个数
          • returnAttrs:字符串数组,可以不传,表示在得到的结果里面需要哪些英文名的属性,如:["assetName", "assetType", "assetState", "workhours"]
    表格后台数据强制刷新/查询
    • 单纯查询实体类对象,返回结果
    代码块
    languagejs
    //查询条件
    let  queryConditon = {
       targetClass:"Part",
       queryObjReq:{condition:`and obj.id='${this.obj.name}'`}
    };
    //基于DB进行查询
    this.handleQueryData(queryConditon).then(res => {
    	//调用成功返回结果为一个Part对象组成的数组
    	console.log(res)
    });
    • 增加属性引用其他实体类,返回结果含有queryResult和refRestult两个属性。
    代码块
    languagejs
    let  queryConditon = {
    	targetClass:"Asset", 
    	queryObjReq:{
    		pageSize:3, 
    		returnAttrs:["oid", "id","assetName"], 
    		refs:[{
    			sourceAttr:"partOid", 
    			targetClass:"Part",
    			targetAttr:"oid", 
    			returnAttrs:["partName", "oid"]
    			}]
    		}};
    //基于DB进行查询
    this.handleQueryData(queryConditon).then(res => {
       console.log(res)
    });
    //打印得到的对象数组如下:
    {
        "queryResult": [
            {
                "assetName": "",
                "oid": "6ADCD23CDC7EBF45A2DEC0B42E5AEFD6",
                "id": "我自闭了"
            },
            {
                "assetName": "",
                "oid": "0909498BE13D644B80ACC643A27BF4EB",
                "id": "我想开了"
            },
            {
                "assetName": "搅拌车",
                "oid": "05C2B5311CBE1B42B60A3ED6FFCF6734",
                "id": "BC1010313113"
            }
        ],
        "refResult": {
            "partOid": []
        }
    }


    17this.handleQueryBySQL()

    提供在DWF数据库中接入的数据源,执行原始SQL语句的能力,接受一个对象,包含下面的属性:

    • dataSourceName:字符串,配置的数据源,如果不传,则从DWF默认的数据中执行。
    • condition:字符串,SQL语句

    返回结果:

    • res.data.data.head:字符串数组,表示结果集的表头
    • res.data.data.data:二维数组,是查询得到的内容
    切记,不要一次查询上巨量数据,例如:上百万量级,导致OOM(Out Of Memory)
    • 用SQL查询DWF的数据库
    代码块
    languagejs
    //用SQL查询DWF的数据库
    this.handleQueryBySQL({"condition": "select plt_name as 姓名 from plt_org_user "}).then(res => {
    	let header = res.data.data.head;
    	let data = res.data.data.data;
        console.log(header); //输出结果为:["姓名"]
    	console.log(data); //输出结果为:["admin"...]
    });
    • 查询配置到DWF中的IoTDB数据源,假设外部数据连接的名字是IoTDB
    代码块
    languagejs
    //查询配置到DWF中的IoTDB数据源,假设外部数据连接的名字是IoTDB
    let query = {
    	dataSourceName: 'IoTDB',
    	condition: 'select v_in from root.test.round00 limit 100'
    }
    this.handleQueryBySQL(query).then(res => {
    	let header = res.data.data.head;
    	let data = res.data.data.data
    .data;
    ;
        console.log(header); //输出结果为:["Time, root.test.round00.v_in"]
    	console.log(data); //输出结果为:带时间戳的100个值
    });


    18this.handleQueryByApi()要求先在DWF建模工具中的“数据集成”-“API接口管理”的功能下面将外部接入的API先配置好,给其设定一个名字,如:“新闻报道”,在脚本中,直接将这个名字传递给函数,获得返回结果。要先配置好API,并且为其命名才能起作用。


    代码块
    languagejs
    //假设已经在建模工具的“数据集成”-“API接口管理”配置好名为:“新闻头条”的API
    this.handleQueryByApi("新闻头条").then((res) => {
      console.log(
    header
    res);
    
    //输出结果为:["Time, root.test.round00.v_in"] console.log(data
    });
    //
    输出结果为:带时间戳的100个值 });
    返回结果随API的不同而不同


    19this.create()

    支持实体类和关联类表单中执行新增操作

    • 实体类:this.create(obj,className,{showMessage:true/false})
    • 关联类this.create(obj,className,{isRelation:true,showMessage:true/false})
    用于系统新增时控制是否弹出信息和关联类表单新增实体类并控制是否弹出信息

    新增实体类对象

    代码块
    languagejs
    //系统新增并弹出信息提示
    this.create(obj, "WorkOrder", {showMessage:true}).then(res => {
    	//res即为被新增的对象
    	console.log(res);
    })

    新增关联类对象

    代码块
    languagejs
    //关联类表单新增实体类并控制是否弹出信息
    this.create(obj, "WorkOrderToPart", {
    isRelation:true,
    relationClass:'WorkOrderToPart',
    leftClass:'WorkOrder',
    rightClass:'Part',
    showMessage:true}).then(res => {
    	//res为被新增的关联类对象
    	console.log(res);
    })


    20this.createObj()在前端创建内存对象,临时对象不保存到数据库。如果在异步调用的响应函数then中,使用this.returnSync({obj: res}),则会实现同步传递。


    代码块
    languagejs
    //创建前端内存对象
    let obj = this.createObj(this.className).then((res) => {
    	console.log("新增内存对象oid=" + res.oid);	
    	this.returnSync({obj: res})
    })
    console.log("新增内存对象oid=" + obj.oid);
    return {sync:true}


    21this.edit()

    支持实体类和关联类表单中执行编辑操作

    • 实体类:this.edit(obj,className,{showMessage:true/false})
    • 关联类this.edit(obj,className,{isRelation:false,showMessage:true/false})
    用于系统编辑时控制是否弹出信息和关联类表单编辑实体类并控制是否弹出信息

     实体类编辑

    代码块
    languagejs
    //系统编辑时控制是否弹出信息
    this.edit(obj, "WorkOrder", {showMessage:true}).then(res => {
    	console.log(res);
    })

    关联类编辑

    代码块
    languagejs
    //关联类表单新增实体类并控制是否弹出信息
    this.edit(obj, "WorkOrderToPart", {
    	isRelation:true,
    	relationClass:'WorkOrderToPart',
    	leftClass:'WorkOrder',
    	rightClass:'Part',
    	showMessage:true});


    22this.delete()

    支持实体类和关联类表单中执行删除操作

    • 实体类:this.delete(obj,className,{showMessage:true/false})
    • 关联类this.delete(obj,className,{isRelation:false,showMessage:true/false}
    用于系统编辑时控制是否弹出信息和关联类表单删除实体类并控制是否弹出信息


    代码块
    languagejs
    //系统删除时控制是否弹出信息 
    this.delete(obj, "WorkOrder", { showMessage:true});


    代码块
    languagejs
    //关联类表单删除实体类并控制是否弹出信息 
    this.delete(obj, "WorkOrder", {isRelation:false, showMessage:true});


    23

    this.deleteByCondition(condition,

     className

     className)

    根据条件删除类对象

    参数:

    condition:查询条件

    className:要操作的目标类



    代码块
    languagejs
    //删除实体类对象
    var oid = this.getAddinById('Grid1').getSelected()[0].oid;
    this.deleteByCondition(`and obj.oid='${oid}'`, 'WorkOrder').then(() => {
        this.getAddinById('Grid1').freshData();
    })


    代码块
    languagejs
    //删除关联类对象
    var oid1 = this.getAddinById('Grid2').getSelected()[0].relation_oid;
    this.deleteByCondition(`and obj.oid='${oid1}'`, 'WorkOrderToPart').then(() => {
        this.getAddinById('Grid2').freshData();
    })


    24this.axios在前端调用接口可能的第三方接口

    需要在config中补充接口信息,如headers: {'Authorization': this.user.token}。

    由于是前端调用,要密切注意不会出现跨域调用被拒绝的问题CORS,如果出现该问题,改用后端脚本实现调用。




    代码块
    languagejs
    //从iotdb中获取最新的时间序列数据
    var token = btoa("root:root");
    var headers = { headers: { Authorization: `Basic ${token}` } }
    var url = `http://i-vi6spj.cloud.nelbds.cn:8180/iotdb/rest/v1/query`;
    var params = { sql: `select last * from root.fleet.*` };
    this.axios.post(url, params, headers).then(res => {
    	console.log(res.data);
    });




    25this.dwf_axios

    在前端调用APP端的restfull接口,主要是实体类、关联类等数据的增删改查的接口,同时该接口还支持调用第三方服务的接口

    支持post、get

    注意:

    • 如果当前dwf的app接口,可以直接使用swagger中的地址去掉/dwf/v1即可
    • 如果是另外一个dwf服务的app接口,可以直接写全地址
    • post方法支持param参数,该参数为json对象
    由于是前端调用,要密切注意不会出现跨域调用被拒绝的问题CORS,如果出现该问题,改用后端脚本实现调用。


    代码块
    languagejs
    //调用app的restful API示例1
    let param = {
    };
    this.dwf_axios.post(`/omf/entities/${this.className}/objects`,param).then(res => {
    	//在回调中处理结果
    	console.log(res.data.data);
    });


    26

    this.dwf_modeler_axios

    在前端调用modeler端的restful接口,主要是一些模型类的数据、用户、授权、应用等建模相关接口

    注意:

    • 如果当前dwf的modeler接口,可以直接使用swagger中的地址去掉/dwf/v1即可
    • 如果是另外一个dwf服务的modeler接口,可以直接写全地址
    • post方法支持param参数,该参数为json对象
    调用modeler端的restful API


    代码块
    languagejs
    //获取当前服务器端IP
    var curServerIP = this.env.serverIp;
    //获取当前登录用户
    var curUserId = this.user.oid;
    //调用modeler端的restful API
    this.dwf_modeler_axios("/dwf/v1/org/users/${curUserId}/groups");


    27this.QueryResultAll()根据查询条件获取Store中缓存的数据该接口已经不推荐使用!


    代码块
    //查询条件
    let  queryConditon = {
       targetClass:"Part",
       query:{query:`and obj.id='${this.obj.name}'`},
       fresh: true     //是否从后台强制刷新查询(建议默认值为true)
    };
    //该接口主要在store中进行查询(不查询后台DB)
    let queryResult = this.QueryResultAll(queryConditon);
    //TODO:查询结果queryResult处理


    28this.getOperation()

    根据类、操作名称获取操作的定义,通过getOperation获取到已有的操作(需要存储到数据库中),再通过executeOperation进行调用,并且允许修改已有操作的操作样式和动作。

    • targetClass:已有操作绑定的目标类;
    • operName:已有操作的英文名

    在前端脚本中需要调用定义的其他前后端脚本操作,可以利用getOperation得到对应的脚本,然后借助executeOperation实现交互


    代码块
    languagejs
    //调用已有的操作,假设实体类WorkOrder有createWO的操作
    this.getOperation("WorkOrder", "createWO").then(res =>{
        //先取出原始操作
        var opr = res.data.data;
        // 替代前处理脚本,不用的话可以不写
        opr.beforeExecute = () => {
            //新的前处理脚本
            return {
            		obj:{...},//选填,对象 
            		query:"",//选填,查询条件
            		data:{...}}//选填,自定义属性
        		}
    		};
        // 替代原来操作的后处理脚本,不用的话可以不写
        opr.afterExecute = () => {
            //新的后处理脚本,可根据需要编写
            ...
        };
        this.executeOperation(opr);
    });


    29this.queryEntity()获取实体类的元模型信息,传入字符串表示的实体类的类名



    代码块
    //获取实体类的元模型信息
    this.queryEntity(targetClassName).then(resMetaObj => {
       //在回调中处理resMetaObj值…
    });


    30this.queryRelation()获取关联类的元模型信息,传入字符串表示的关联类的类名


    代码块
    //获取关联类的元模型信息
    this.queryRelation(targetClassName).then(resMetaObj => {
       //在回调中处理resMetaObj值…
    });


    31this.cudBatchObjs()

    传入一个代表增删改事件的数组,批量增删改对象,在包含多个不同类型的实体类的复杂结构表单中,利用数据容器控件的this.getObj()提取对象,然后一次性提交数据修改,非常方便。

    this.cudBtachObjs接受的是一个代表批量操作的动作数组,数组中的每个元素是一个JSON对象,包含下面的属性:

    • action:字符串,有4种动作:
      • 'create':批量创建对象,在对象数组中只需要给出对象的业务属性取值即可。
      • 'update':单纯的批量更新对象,要求对象数组中的对象必须包含一个oid属性。
      • 'delete':给定一个oid的数组,可以批量删除。
      • 'createOrUpdate':如果存在则更新,如果不存在则创建,要求数组中的对象必须包含oid属性,如果存在需要跨类设置oid和外键引用的时候,用这个动作。
    • className:字符串,表示要处理的类名
    • objs:数组,如果动作是'create', 'update', 'createOrUpdate',表示需要增删改的对象数组。
    • oids:数组,如果动作是'delete',表示要删除对象的全局唯一标识oid。

    返回值为,被传入的动作数组,照原样返回,其中objs是实际增删改的数据。



    代码块
    languagejs
    var wo = this.getAddinById('DataView1').getObj();
    var rt = this.getAddinById('DataView2').getObj();
    var cudEvents = [
        {
            action: 'update',
            className: 'ReqWorkorder',
            objs: [wo]
        },
        {
            action: 'update',
            className: 'WorkorderReport',
            objs: [rt]
        },
    
     { "action" :"delete", "className":"TyPartDelivery", "oids":   ["7F8802A65B643E4FA1058E16197A23A3", "B075591C7FE45E43BFA0978CC409DCAA"] } 
    ];
    this.cudBatchObjs(cudEvents);



    32表单间交互this.openForm()

    脚本打开弹窗,参数如下:

    • targetClass:字符串,表示对应的类
    • viewName:字符串,表示需要打开的表单名称
    • args:JSON对象,如果打算不传要使用null作为占位符,包含弹框的大小和高度,标题,初始化脚本和后处理脚本,具体有:
      • curDialogWidth:字符串,含有单位的宽度,如:800px
      • curDialogHeight:字符串,含有单位的高度,如:800px
      • curDrawerWidth:字符串,抽屉宽度,仅对抽屉效果有效
      • needDialogDefaultOpr:布尔,是否显示默认操作的按钮
      • displayName:字符串,弹窗以后标题的名字
      • initialScript:字符串,可以不传,前处理脚本
      • afterScript:字符串,可以不传,后处理脚本
    • displayType:字符串,打开方式,包含'edit', 'create', 'visit'。
    • initParams:JSON对象,用于完成弹窗打开前的初始化,与操作中的前处理脚本中return { obj:{...}, query: {...}, data: {...}} 返回的格式一致,可以设置对象,查询条件和夹带的数据
      • obj:对象,用于初始化的对象
      • query:字符串,默认查询条件
      • data:对象,外部带入的数据

    如果,initialScript中初始化了返回的对象与initParams的含义冲突,以initParam里面的为准。




    代码块
    // 表单类名
    let targetClass = 'ClaimResult'		
    // 表单名称
    let viewName = 'ClaimResultSingle' 	
    // 弹框的基本操作
    let args = { 
    		curDialogWidth: '1000px',		/*弹窗宽*/ 
    		curDialogHeight: '800px',		/*弹窗高*/, 
    		needDialogDefaultOpr:false,		/*是否显示右下角保存按钮*/
    		displayName: "openDialog标题",	/*弹窗标题*/
    };
    // 弹框的类型:create,edit,visit
    let displayType = 'edit';	
    // 前端脚本中Dialog弹窗脚本示例:
    let initParams = {
        obj:this.selectedObjs[0],
        data: { woDesc1: 'cheney' }
    }  
    // 前端脚本中Dialog弹窗脚本示例:
    this.openForm(
    	targetClass, viewName, args, displayType, initParams
    ); 


    33this.getRootForm()在有多层弹窗的情况下可以使用该方法获取最底层表单的句柄

    34

    this.getParentForm()出现弹窗的时候想在弹窗中获取父表单的控件可以使用该方法获取父表单句柄

    35

    前处理脚本:return false

    表单默认操作:return false

    如果无异步调用,在操作的前处理脚本中可用,并且操作样式为弹框方式,使用return false表示不继续弹窗。

    同样的,在操作控制以弹框的方式显示表单,在默认操作里面使用retrun false也会阻止弹框的关闭。



    36this.returnSync()

    当前端调用后端服务接口需要等待返回后在执行返回操作可以使用该方法

    在操作的前处理脚本中可用,并且操作样式为弹框方式

    这样的话就能够保证在前处理中请求接口数据初始化弹框的内容

    如果无异步调用,使用return false表示不继续弹窗;

    var 

    var _this =

     this

     this;
    setTimeout(() => {

        var params

        var params = {

            obj

            obj: {

                AnimateName

                AnimateName: 'a1'
            }
        }
        _this.openDialog(params);
    }, 2000)
    //弹窗的前处理脚本返回false时阻止弹窗打开,通过新增加的openDialog()脚本打开,参数与前处理脚本返回obj,query是一样的

    return false

    return false;


    代码块
    //创建前端内存对象
    let obj = this.createObj(this.className).then((res) => {
    	console.log("新增内存对象oid=" + res.oid);	
    	this.returnSync({obj: res})
    })
    console.log("新增内存对象oid=" + obj.oid);
    return {sync:true}


    37this.closeDialog()表单以弹窗样式打开,该方法有效,关闭当前弹窗,可以传递一个confirmData,在操作回到后处理脚本的时候,利用this.confirmData得到这个对象。

    在弹框的操作脚本中调用

    代码块
    languagejs
    this.closeData({key1:'hello'})

    在弹框关闭后触发的后处理脚本中通过this.confirmData获得

    代码块
    languagejs
    console.log(this.confirmData) //前端控制台输出:{key1:'hello'}


    38this.openTab()

    以tab页签方式打开表单,传入两个参数,queryOpr和args:

    queryOpr:object,中的参数

    targetClass:表示对应的类

    viewName:表示需要打开的表单名称

    action:动作

    authority:英文名

    extSettings:是否打开默认操作

    args中的参数

    initScript:object,与操作中的前处理脚本中return { obj:{...}, query: {...}, data: {...}} 返回的格式一致,可以设置对象,查询条件和夹带的数据

    displayType:create/edit/visit



    代码块
    languagejs
    var grid=this.getAddinById("D0050C68B42743D79C646E1F8FB7D397");
    obj=grid.getSelected();
    let queryOpr = {
    	targetClass: this.className, 
    	viewName:'SingleWO',
    	action: 'edit',//动作
    	authority: 'hihilalal',//英文名可随意给 
    	displayName: '设置的显示名',//显示名
    	extSettings: JSON.stringify({needDefaultOpr:true})
    }
    let args = {  
    	initScript:`return{
    	obj:this.selectedObjs[0]
    	}`,
    	displayType:'edit'
    }
    this.openTab(queryOpr, args);


    39this.closeTab()

    分为不带参数和带参数两种方式。他们的功能分别是关闭tab和关闭tab传值到后处理

    不带参数:this.closeTab()

    带参数:this.closeTab(data)

    关闭tab和关闭tab传值到后处理


    代码块
    languagejs
    //不带参数:关闭tab
    this.closeTab();


    代码块
    languagejs
    //带参数:关闭tab传值到后处理
    this.closeTab(data);


    40this.closeTabById()

    分为不带参数和带参数两种方式。他们的功能分别是关闭指定tab和指定tab关闭传值。

    不带参数:this.closeTabById(id)

    带参数:this.closeTabById(id, data)

    页签的ID获取方式:moduleName-authority

    moduleName:新建操作的时候的模块名,即打开页签的操作所在的类名

    authority:打开页签操作的操作名即打开页签操作的英文名

    data为回传给后处理脚本的参数,可以在后处理脚本中利用this.confirmData获取



    代码块
    languagejs
    //关闭页签
    this.closeTabById('moduleName-authority');
    //关闭页签并触发打开页签的后处理脚本
    this.closeTabById('moduleName-authority',data);


    41this.openDrawer()

    支持打开滑窗的功能,规则如下:

    targetClass:字符串,表示对应的类

    viewName:字符串,表示需要打开的表单名称

    direction:字符串,表示右滑窗还是左滑窗分成'left','right','top','buttom'四种

    args:JSON对象,如果打算不传要使用null作为占位符,包含弹框的大小和高度,标题,初始化脚本和后处理脚本,具体有:

    curDrawerWidth:字符串,抽屉宽度,仅对左右抽屉效果有效,取值为数值和单位的字符串,例如:'800px'

    curDrawerHight:字符串,抽屉高度,仅对上下抽屉效果有效,取值为数值和单位的字符串,例如:'800px'

    needDialogDefaultOpr:布尔,是否显示默认操作的按钮

    displayName:字符串,弹窗以后标题的名字

    initialScript:字符串,可以不传,前处理脚本

    afterScript:字符串,可以不传,后处理脚本

    displayType:字符串,打开方式,包含'edit', 'create', 'visit'。

    initParams:JSON对象,用于完成弹窗打开前的初始化,与操作中的前处理脚本中return { obj:{...}, query: {...}, data: {...}} 返回的格式一致,可以设置对象,查询条件和夹带的数据

    obj:对象,用于初始化的对象

    query:字符串,默认查询条件

    data:对象,外部带入的数据

    如果,initialScript中初始化了返回的对象与initParams的含义冲突,以initParam里面的为准。

    脚本打开滑窗


    代码块
    //传入初始化脚本,可以传一个对象obj,也支持query,也支持自定义内容data
    let initParams = {
      obj: this.selectedObjs[0],
      data: {
        woDesc1: "cheney",
      },
    };
    this.openDrawer(
      this.className,
      "SingleWOTest",
      "left",
      null,
      "edit",
      initParams
    );

     

    42this.msgbox()

    消息提示,支持三种:

    this.msgbox.success
    this.msgbox.info
    this.msgbox.error

    早期版本只接受一个字符串,后来发现有时候要停留更长时间,所以增加了输入一个配置的JSON对象的方法,这个JSON对象的具体的属性为:

    content:字符串,表示消息内容

    duration:数字,表示停留时间,单位为秒








    代码块
    languagejs
    //目前如下几种消息提示都是在界面上方提示后自动关闭
    this.msgbox.success("成功的提示");
    this.msgbox.info("一般的提示");
    this.msgbox.error("错误的提示");
    
    //特殊需求,对于提示时间需要加长的,可以参考如下写法:10 单位为秒
    this.msgbox.success({content: "成功的提示",duration: 10});
    this.msgbox.info({content: "一般的提示",duration: 10});
    this.msgbox.error({content: "错误的提示",duration: 10});


    更多的参数设置如下:

    Image Modified

    43this.msgboxDialog()

    模态弹窗提示后需手动关闭的msg提示框,支持确定和取消两种回调方式,示例脚本如下:
    this.msgboxDialog.confirm (
    “title标题”,
    "请确认是否删除?",
    <function>(点击确定之后的回调函数),
    <function>(点击取消之后的回调函数));

    注意:comfirm有点击确定和取消的回调函数,可以自行编辑,由于使用函数作为参数,使用回调里面需要对this进行重定义,否则无法使用相关方法。



    代码块
    languagejs
    //由于使用函数作为参数,使用回调里面需要对this进行重定义,否则无法使用相关方法。
    var _this = this;
    this.msgboxDialog.confirm("title标题","请确认是否关闭?",
    function() {
    	console.log("确认关闭function");
    	_this.closeDialog();
    	},
    function() {
    	console.log("取消关闭function")   
    	}
    );


    44this.spinShow()

    表单遮罩,该脚本执行会弹出一个遮罩层,防止表单此时再去编辑

    弹出遮罩

    防止重复提交,数据混淆,主要用在异步请求数据接口调用的时候



    代码块
    languagejs
    this.spinShow(); //打开遮罩
    this.edit(editObj, className).then(rtnObj =>{
       //返回的rtnObj为后台修改保存后返回的对象
       this.spinHide(); //编辑完成,关闭遮罩
    });


    45this.spinHide()关闭遮罩

    事件处理完成,关闭遮罩,在异步交口调用完成后可以关闭遮罩


    代码块
    languagejs
    this.spinShow(); //打开遮罩
    this.edit(editObj, className).then(rtnObj =>{
       //返回的rtnObj为后台修改保存后返回的对象
       this.spinHide(); //编辑完成,关闭遮罩
    });


    46this.validateForm()表单单对象控件规则校验提交保存表单之前,可以使用该脚本校验单对象控件是否满足设定的规则


    代码块
    // 一般性前端校验
    if(this.validateForm()){
    	console.log('表单验证成功')
    }else{
    	console.log('表单验证失败')
    }
    // 为了满足验重配置项的接口校验,将校验方法调整为如下:
    this.validateForm().then(res=>{
    	if(res){
    		console.log('表单验证成功')
    	}else{
    		console.log('表单验证失败')
    	}
    });


    47this.freshData()

    使用原有查询条件控制表单刷新,更新数据会触发原有页面初始化事件

    当数据同步被修改,可以利用this.freshData()获取到最新数据


    代码块
    languagejs
    this.freshData();
    this.msgbox.info("fresh success")


    48使用控件

    this.getAddinById()根据控件代号获取控件对象,以便能够操作控件在表单的前端脚本中都可以获取到当前表单的控件对象


    代码块
    languagejs
    var grdiAddin = this.getAddinById("控件代号");



    49this.getTargetAddin()获取控件绑定的多对象控件,这种用法不必在脚本里面使用字符串常量去得到目标控件。仅在按钮上有效,获取的是按钮绑定的多对象控件


    代码块
    var grid = this.getTargetAddin();


    50this.getSourceAddin()获取当前操作绑定的控件,无需控件代号,避免了复用操作对应的脚本时,使用this.getAddinById必须指定字符串常量的局限性。


    代码块
    languagejs
    let addin = this.getSourceAddin();
    if (addin) {
    	console.log(addin.args)
    }


    51

    this.getSocketId();

    获取当前客户端的socketId

    52脚本互相调用this.executeOperation()

    调用并执行已有的后端脚本,支持回调

    自定义操作对象(在现在的脚本中定义操作对象,无需事先定义操作)通过executeOperation进行调用

    opr:定义的操作对象,包含下面的属性:

    targetClass:目标类的类名

    viewName:目标类中的表单名称

    oprName:操作英文名

    displayName: 操作中文名

    displayType:动作支持create、edit、visit、next_create、url

    url: 如果displayType是url需要增加这个参数来传url地址

    oprStyle:操作样式dialog、tab、drawerL、 drawerR

    displayOperation:默认操作 true、false

    beforeExecute:表示前处理函数,代表前处理脚本

    afterExecute:表示后处理函数,代表后处理脚本


    可以和getOperation配合使用


    代码块
    languagejs
    //定义新的create动作的dialog样式的操作
    var opr = {
        targetClass: "WorkOrder",  //目标类的类名
        viewName:"SinlgeWO"  ,//目标类中的表单名称
        oprName: "openCreatedial"  ,  //操作英文名,生造操作时可以自定义
        displayName:"创建工单" , //操作中文名 
    		displayType:"create"  ,//动作支持create、edit、visit、next_create、url
        oprStyle:"dialog",   //操作样式dialog、tab、drawer
        displayOperation:true,  //默认操作 true、false
        beforeExecute:() => { //前处理函数,代表前处理脚本
            //新的前处理脚本
            return { 
             obj:this.selectedObjs[0],//选填,当前表单多对象控件选中的对象 
             //query:"and obj.woTitle = '工单1'", //选填,非必填 
             data:{ "woDesc1":"自定义属性"//选填,woDesc1是自定义的属性,
             } 
           }
        },
        afterExecute:() => {         //表示后处理函数,代表后处理脚本
            //新的后处理脚本,可根据实际情况维护
             var data = this.confirmData;
             console.log(`自定义后处理`)
             console.log(data)
        }
    }
    this.executeOperation(opr);


    53
    前端脚本调用后端脚本(二)
    前端脚本调用后端脚本

    this.callServer(

    customData,'default'

    ).then(res => {


        console.log("后端回调结果");
        console.log(res);

    })

    说明:该调用方式仅仅试用与在同一个操作内编写的后端脚本有效default: 为后端脚本的脚本名称

    完成前后端脚本的配合,传入参数并获得返回结果。

    参数说明

    customData:为前端调用后端脚本的参数JSON格式

    customData:对象,调用后端脚本准备传递过去的自定义参数,JSON格式,后端脚本通过this.customData获取传递过去的参数结果。

    scriptName:字符串,默认为“default”,后端脚本的脚本名称,在配置操作的时候,可以一次性新建多个后端脚本,每个后端脚本有一个英文名,传递这个英文名就意味着指示激活哪个后端脚本,也可以不传。

    返回结果

    callServer的调用为异步调用,如果希望从后端脚本向前端返回数据,方法是给后端脚本的this.res赋值:

    res:后端通过this

    res:对象,通过this.

    res给前端脚本传参

    res向前端脚本传参,一般是结果。

    注意

    在同一个操作内编写的后端接口获取前端脚本传参可以利用this.customData获取callServer的第一个参数

    返回结果需要通过this.res={}来给前端赋值回调结果

    该方法属于操作内方法,调用的后端脚本仅支持在同一个操作内新建的后端脚本操作,如图:

    Image Modified

    一个操作中的前端脚本:

    代码块
    languagejs
    this.callServer(customData,'default').then(res => {
        console.log("后端回调结果");
        console.log(res.result);
    })

    统一操作中的后端脚本(default):

    代码块
    this.logger.info("前端传递给后端脚本的参数:"+this.customData);
    this.res = {
    	"result":"后端脚本执行成功"
    }

    结果:

    打开console控制台,可以看到控制台输出了两行记录:

    后端回调结果

    后端脚本执行成功

    54布局控件

    showTab()


    控制指定页签的显示,属于控件自身的函数标签页


    代码块
    languagejs
    var tabAddin = this.getAddinById("Tab1");
    tabAddin.showTab("tab页签名称");
    tabAddin.hideTab("tab页签名称");


    55hideTab()控制指定页签的隐藏标签页


    代码块
    languagejs
    var tabAddin = this.getAddinById("Tab1");
    tabAddin.showTab("tab页签名称");
    tabAddin.hideTab("tab页签名称");


    56getSelectedTab()获取Tab控件当前选中的子页签标签页


    代码块
    languagejs
    var tabAddin = this.getAddinById("Tab1");
    tabAddin.getSelectedTab();


    57turnTo()跳转激活子页签标签页


    代码块
    languagejs
    var tabAddin = this.getAddinById("Tab1");
    tabAddin.turnTo('tab1');


    58dropName()获取点击次数标签页


    代码块
    languagejs
    var dropName = ''
    tabAddin.args.tabs.forEach(item => {
    	if(name == item.name){
    		dropName = item.dropName
    	}
    })
    dropName = tabAddin.args.tabs[i].dropName
    tabAddin.clickObj[dropName
    ]
    ]


    59导入导出按钮控件responseData

    responseData:

    code: 200

    data: Object

    allNum: 导入的数据条数

    failedNum: 导入数据的失败条数

    msg: "succeed"/“failed”

    succeedNum: 导入数据的成功条数

    message: "OK"

    success: true

    数据导入控件绑定数据导入完成事件

    数据导入控件绑定数据导入完成事件


    代码块
    languagejs
    console.log('导入完成事件');
    // 获取到导入接口返回的数据
    let responseData = this.getSourceAddin().responseData;
    console.log(responseData);
    // 导入成功
    if(responseData.success){
        console.log('导入成功');
        console.log(responseData.data);
        // responseData.data = {
        //     "msg": "succeed",
        //     "failedNum": 0,
        //     "succeedNum": 5,
        //     "allNum": 5
        // };
    }else{
        console.log('导入失败')
    }


    60this.exportData(['属性名'], '类名',
    `查询条件`
    `查询条件`)数据导出并下载文件数据导出控件绑定点击事件


    代码块
    languagejs
    // 脚本调用数据导出方法,不传参数,以控件上设置的条件导出;有参数,就根据输入的参数导出
    this.exportData(['oid'], 'echo', `and obj.oid='9948A73560B48D44AF3894FC7DF98E7E'`)


    61setDisable()设置控件禁用/可用按钮、数据导入按钮、数据导出按钮、标签页


    代码块
    languagejs
    //设置标签页的页签"页签1"禁用
    var tabAddin = this.getAddinById("Tab1");
    tabAddin.setDisable('tab1', true);
    //设置按钮禁用
    var tabAddin = this.getAddinById("Operation1");
    tabAddin.setDisable(true);


    62单对象表单控件脚本







    this.getAddinById("控件代号").getValue()获取控件取值除按钮外的单对象控件,包括:数字框、文本框、标签、富文本、选择框、单选框、复选框、对象标签。


    代码块
    languagejs
    let mySelect = this.getAddinById('SelectInput1');//绑定选择框,这个绑定的控件id需要根据自己的表单内的控件调整
    let result = mySelect.getValue();


    63this.getAddinById("控件代号").getDisplayValue()

    获取界面显示的值,该方法仅在单选框、选择框、复选框中有效

    单选框、选择框、复选框控件有效


    代码块
    languagejs
    let mySelect = this.getAddinById('SelectInput1');//绑定选择框,这个绑定的控件id需要根据自己的表单内的控件调整
    let myRadio = this.getAddinById('RadioButton1');//绑定单选框,这个绑定的控件id需要根据自己的表单内的控件调整
    let myCheckBox = this.getAddinById('CheckBox2');//绑定复选框,这个绑定的控件id需要根据自己的表单内的控件调整
    let displayResult = mySelect.getDisplayValue();//获取选择框的界面显示值key
    let result = mySelect.getValue();//获取选择框的界面显示值value
    let displayRadioResult = myRadio.getDisplayValue();//获取单选框的界面显示值key
    let displayCheckResult = myCheckBox.getDisplayValue();//获取复选框的界面显示值key
    let result1 = myRadio.getValue();//获取单选框的界面显示值value
    let result2 = myCheckBox.getValue();//获取复选框的界面显示值value
    console.log('select',displayResult, result);//打印
    console.log('radio',displayRadioResult,result1);
    console.log('checkBox',displayCheckResult,result2);


    64this.getAddinById("控件代号").setValue()给控件设置取值,并在控件上展示单对象控件


    代码块
    languagejs
    var place = this.getAddinById("CheckBox1");//绑定复选框
    place.setValue('nanjing');//设置地点的值


    65this.getAddinById("控件代号").args

    获取控件上的其他配置参数

    示例:

    args.hided //控件的显示隐藏

    true 隐藏

    false:显示

    所有控件


    代码块
    languagejs
    let myAttach = this.getAddinById('Attachments1');//绑定附件,这个绑定的控件id需要根据自己的表单内的控件调整
    myAttach.args.allowType = 'jpg';//设置附件上传文件类型
    
    //可以通过console.log查看每个控件支持的args的参数
    
    myAttach.args.hided = true;//隐藏控件



    66this.getAddinById("控件代号").triggerEvent()需要被触发的事件名称,跟中文名一样,例如:在控件的选项区中发现有:“值变化事件”,那么事件的名称即为:“值变化”


    代码块
    languagejs
    var place = this.getAddinById("CheckBox1");//绑定复选框
    place.setValue('nanjing');//设置地点的值
    place.triggerEvent('值变化')//触发控件上绑定的值变化事件


    67this.getAddinById("控件代号").setTooltip()设置控件的鼠标悬停事件


    代码块
    languagejs
    var grid = this.getAddinById('Grid1');
    var index = Math.round(Math.random() * 10)
    var cellData = grid.getCellData(); //获取当前单元格数据集
    var cellValue = cellData.value
    var toolTipContent = `<p>${cellValue}</p>`
    grid.setTooltip(toolTipContent);


    68this.getAddinById("控件代号").setError()设置控件的提示信息设置信息


    代码块
    languagejs
    //控件的id可在app端开发者工具中拾取,后期可在modeler中直接拷贝
    var addinElement = this.getAddinById("指定控件的id");
    //设置控件在界面中的错误信息提示
    addinElement.setError("存在异常");
    //$el为指定控件的dom元素,可以直接对dom元素修改其样式
    addinElement.$el.style.display = "none";


    69this.getAddinById("控件代号").getSelected()获取选中的对象信息仅支持多对象控件,如:表格、卡片、目录树、关联结构树


    代码块
    languagejs
    var grid = this.getAddinById('Grid3');//绑定表格,这个里面是控件id,需要修改成表单内需要绑定的表格控件id
    var button = this.getAddinById("Operation10");//绑定刷新按钮,这个里面是按钮的控件id,需要修改成表单内需要绑定的按钮控件id
    var selectedObjs = grid.getSelected();//获取选中的对象的信息,信息包括oid,属性值等
    var targetClass = 'Recordsheet';//指定要删除关联关系的关联类,这个根据自己需要改
    var infoid={
    	relation_oid: selectedObjs[0].relation_oid
    	//获取选中对象的oid
    }
    var params = {
    isRelation:true,
    }//关联关系,这个地方可以改,当关联类和实体类没有关联的时候改成false
    this.delete(infoid,targetClass,null,params).then(res => {
    	button.invokeEvent("单击");//删除后执行刷新
    })//删除关联类的关联关系


    70this.getAddinById("控件代号").getKVValue()获取动态参数看的KV键值数据仅支持动态参数控件


    代码块
    languagejs
    //动态参数控件对象
    var addin = this.getAddinById('DynamicParameterFrame1');
    //获取控件全部数据(包括原schema与新输入值)
    var formValue = addin.getValue();
    /*获取控件KV键值对数据,即不包括原schema元数据,返回数据如下:
    {"number": 1,"date":"2020-03-01 10:30:00" ,"name": "桌子", "price":100,"type":"家具","description": "测试数据..."} */
    var formOBJ = addin.getKVValue();
    //TODO:针对formOBJ的后续处理
    console.log(formValue);
    console.log(formOBJ);


    71

    this.getAddinById("控件代号").getSelectedFileList()

    点击预览事件,获得被点击的文件列表多文件上传控件


    代码块
    languagejs
    this.getAddinById("控件代号").getSelectedFileList();


    72

    this.getAddinById("控件代号").getDeleteFileList()

    针对删除文件事件,获取已经删除的文件列表多文件上传控件


    代码块
    languagejs
    this.getAddinById("控件代号").getDeleteFileList();


    73

    this.getAddinById("控件代号").getFileList(withUrl:false);


    获得上传成功的所有文件列表,默认不获取全部URL,withUrl为真表示获取全部Url,自动拼接好多文件上传控件


    代码块
    languagejs
    this.getAddinById("控件代号").getFileList(withUrl:false);


    74多对象表单控件脚本(卡片还有特殊包含的关键字)


























    setExternalOprConfig(config)

    表格操作列样式设置,其中用到uniLabel、type、shape、disabled、color
    show脚本设置表格样式,用来根据数据的取值来动态修改操作按钮。

    表格控件


    代码块
    languagejs
    var grid = this.getAddinById('Grid2');
    var operationParams = [{
        uniLabel: '修改过的编辑',//按钮文字
        type: 'warning',//按钮样式
        shape: true,//是否圆角
        disabled: true, //是否禁用
        color: 'red',//文字颜色
        show: false//按钮是否显示
    },{
        uniLabel: '修改过的新增',
        type: (rowData) => {
            if(rowData.product === '草莓'){
                return 'warning'
            }else{
                return 'success'
            }
        },
        shape: (rowData) => {
            if(rowData.product === '草莓'){
                return 'circle'//圆角
            }else{
                return 'true' //直角
            }
        },//是否圆角
        disabled: (rowData) => {
            if(rowData.product === '草莓'){
                return true
            }else{
                return false
            }
        }, //是否禁用
        color: (rowData) => {
            if(rowData.product === '草莓'){
                return 'red'
            }else{
                return 'blue'
            }
        },//文字颜色
        show: (rowData) => {
            if(rowData.product === '草莓'){
                return true
            }else{
                return false
            }
        } //是否显示
    }]
    grid.setExternalOprConfig(operationParams);


    75setRowClass

    设置行样式,是一个函数,表格会遍历每行,传入名为params的参数,其中params包含:

    node:表示每行的信息,如rowIndex表示行号

    data:表示每行显示的JSON对象。

    可设置的配置项如下:

    .grid-font-color-red
    .grid-font-color-yellow
    .grid-font-color-green
    .grid-font-color-black
    .grid-font-color-white
    .grid-font-color-grey
    .grid-font-color-blue
    .grid-background-color-red
    .grid-background-color-yellow
    .grid-background-color-green
    .grid-background-color-black
    .grid-background-color-white
    .grid-background-color-grey
    .grid-background-color-blue
    .grid-font-size-12
    .grid-font-size-14
    .grid-text-decoration-underline
    .grid-text-decoration-line-through
    .grid-font-weight-bold
    .grid-font-weight-normal

    表格控件


    代码块
    languagejs
    //行样式设置
    var grid = this.getAddinById('Grid3');
    grid.setRowClass((params) => {
    	// 间隔行效果
    	if (params.node.rowIndex % 2 === 0) {
    		return 'grid-font-color-red';
    	}
    	if (params.node.rowIndex % 2 !== 0) {
    		return 'grid-font-color-green';
    	}
    	// 特殊数据标绿
    	if (params.data.companyd === '哈哈哈1') {
    		return 'grid-font-color-green';
    	}
    });


    76setColumnDefs设置列定义表格控件


    代码块
    languagejs
    //列样式设置
    var grid = this.getAddinById('Grid3');
    var def = [{
    	// hide: true,
    	cellClass: (params) => {
    		return params.value==='哈哈哈1'?'grid-text-decoration-underline grid-font-color-blue grid-font-size-14':'';
    		}
    }]
    grid.setColumnDefs(def);


    77setColumnVisible设置列可见表格控件


    代码块
    languagejs
    var grdiAddin = this.getAddinById("id");
    grdiAddin.setColumnVisible(0, false)



    78setRowData设置表格数据表格控件


    代码块
    languagejs
    //表格头部生成与数据结构数据操作(增删改,浏览器内存实现,不涉及数据库)
    var grdiAddin = this.getAddinById("表格控件的id");
    var rowData = [
            {field: 'field1', oid: 'oid1'},
            {field: 'field2', oid: 'oid2'},
    ...
    ]
    //设置表格数据
    grdiAddin.setRowData(rowData);
    //添加表格数据
    grdiAddin.setRowData(rowData, 'add');
    //删除表格数据(参数对应行)
    grdiAddin.deleteRowData('oid1');
    grdiAddin.deleteRowData(['oid2','oid3']);
    //修改表格数据(参数对应行)
    grdiAddin.updateRowData('oid4', {field: 'updatefield'});



    79getRowData获取表格数据表格控件
    80deleteRowData删除表格数据(参数对应行)表格控件
    81updateRowData修改表格数据表格控件
    82getAll获取表格的所有数据表格控件


    代码块
    languagejs
    //获取表格中所有的的行数据对象集合
    let workItemTable = this.getAddinById("Grid1");
    var Table = workItemTable.getAll();
    console.log(Table);
    this.msgbox.info('Table');


    83getDefaultColumnDef获取一列的默认列定义表格控件


    代码块
    languagejs
    var grid = this.getAddinById("Grid3");
    var pageInfo = grid.getPageInfo(); //获取当前表格页码信息
    var defaultColumnDefs1 = grid.getDefaultColumnDef({
      alignCode: 1,
      attrName: "companyd",
      editable: false,
      colId: "companyd_id",
      enableFilter: true,
      enableSorting: true,
      field: "companyd",
      headerName: "单位",
    });
    var defaultColumnDefs2 = grid.getDefaultColumnDef({
      alignCode: 1,
      attrName: "number",
      editable: false,
      colId: "number_id",
      enableFilter: true,
      enableSorting: true,
      field: "number",
      headerName: "数量",
    });
    grid.setColumnDefs([defaultColumnDefs1, defaultColumnDefs2]);
    var modReq = {
      condition: "",
    };
    if (!pageInfo.totalPage) {
      this.dwf_axios
        .post(
          "http://192.168.31.82:9090/dwf/v1/omf/entities/recruit/objects/count",
          modReq
        )
        .then((res) => {
          if (res.data.code != 200) {
          } else {
            pageInfo.totalPage = res.data.data; //数据总数
            pageInfo.pageSize = 2; //每页条数
            pageInfo.pageIndex = 1; //当前页码
            pageInfo.pageSizeOpts = [2]; //每页条数切换的配置
            modReq = {
              condition: "",
              startIndex: pageInfo.pageIndex,
              pageSize: pageInfo.pageSize,
            };
            grid.setPageInfo(pageInfo); //设置当前表格页码信息
            this.dwf_axios
              .post(
                "http://192.168.31.82:9090/dwf/v1/omf/entities/recruit/objects",
                modReq
              )
              .then((rsp) => {
                if (rsp.data.code != 200) {
                } else {
                  grid.setRowData(rsp.data.data);
                }
              });
          }
        });
    } else {
      modReq = {
        condition: "",
        startIndex: pageInfo.pageIndex,
        pageSize: pageInfo.pageSize,
      };
      this.dwf_axios
        .post(
          "http://192.168.31.82:9090/dwf/v1/omf/entities/recruit/objects",
          modReq
        )
        .then((rsp) => {
          if (rsp.data.code != 200) {
            {
              var pageIndex = pageInfo.pageIndex;
              var pageSize = pageInfo.pageSize;
              grid.setRowData(rsp.data.data);
            }
          }
        });
    }


    84setPageInfo设置当前页码表格控件
    85getPageInfo获取表格页码信息表格控件


    代码块
    languagejs
    var grid = this.getAddinById("Grid3");
    var query = "";
    var modReq = {
      condition: query,
    };
    this.dwf_axios
      .post("http://192.168.31.82:9090/dwf/v1/omf/entities/recruit/objects", modReq)
      .then((rsp) => {
        if (rsp.data.code != 200) {
        } else {
          var rowData = rsp.data.data;
          var pageInfo = grid.getPageInfo();
          grid.setRowData(
            rowData.slice(
              (pageInfo.pageIndex - 1) * pageInfo.pageSize,
              pageInfo.pageIndex * pageInfo.pageSize
            )
          );
        }
      });


    86setTooltip表格单元格的鼠标悬停事件表格控件


    代码块
    languagejs
    var grid = this.getAddinById('Grid1');
    var index = Math.round(Math.random() * 10)
    var cellData = grid.getCellData(); //获取当前单元格数据集
    var cellValue = cellData.value
    var toolTipContent = `<p>${cellValue}</p>`
    grid.setTooltip(toolTipContent);


    87setDisplayType()

    设置卡片的展示类型,支持

    craete、visit、edit

    卡片控件
    88getSelected获取选中行数据,支持多选对象表格控件、卡片控件


    代码块
    languagejs
    var grid = this.getAddinById('Grid2');
    var button = this.getAddinById("Operation3");
    var selectedObjs = grid.getSelected();
    console.log('getSelected',selectedObjs);


    89getParentAddin获取卡片控件所在的表单卡片控件


    代码块
    languagejs
    //卡片之间值传递
    var FormEngine1 = this.getAddinById("FormEngine1"); //获取卡片1控件id
    var FormEngine2 = this.getAddinById("FormEngine3"); //获取卡片2控件id
    var Text1InFormEngine = FormEngine1.getAddinById("TextInput1"); //获取卡片1控件中的文本框1
    Text1InFormEngine.setValue(1); //为文本框1赋值为1
    var FE1 = Text1InFormEngine.getParentAddin(); //获取文本框1的父控件,也就是卡片1
    if (FE1) {
      var Form = FE1.getParentAddin(); //卡片1的父控件,也就是当前表单
      debugger;
      if (Form) {
        var FE2 = Form.getAddinById("FormEngine3"); //获取当前表单的卡片2
        if (FE2) {
          var TextInput1FormEngine2 = FE2.getAddinById("TextInput1"); //卡片2的文本框
          if (TextInput1FormEngine2) TextInput1FormEngine2.setValue(3); //给卡片2的文本框赋值
        }
      }
    }
    


    90updateShow刷新子表单的数据显示卡片控件


    代码块
    //为子表单设置对象
    var FormEngine1 = this.getAddinById("FormEngine1");
    let query = {condition: ` and obj.dataname = '数据111' `}; //查询条件
    //开始后台数据的查询
    this.handleQueryData({ queryObjReq: query, targetClass: "Asset"}).then(
      (res) => {
        //updateShow('子表单类名','子表单名',{obj:res[0]});
        FormEngine1.updateShow("Asset", "biaoqian", { obj: res[0] });
      }
    );
    
    


    91getRootAddin获取控件卡片控件,子表单中使用var subFormAddin = this.getRootAddin();
    92freshObj(res)修改信息后刷新卡片,只是前端刷新卡片控件


    代码块
    languagejs
    this.edit(
      { product: "上海米老头", oid: "04D0D88571046C4C9EA6546FE6245784" },
      "salevalue"
    ).then((res) => {
      this.getSourceAddin().getParentAddin().freshObj(res);
    });
    
    


    93freshObj(res)关联类修改信息后刷新卡片卡片控件


    代码块
    languagejs
    var newObj = {
      relation_leftOid: "34AC734FBFB2294E852EE50B54C00831",
      relation_number: 77,
      right_partName: "螺丝",
      left_partName: "头盔",
      relation_oid: "A7EEDE6CA7AE0748BEE6B195041EB877",
      relation_rightOid: "DAFB73D0B5202941A46AC896965682BE",
    };
    // 假设点击的编辑按钮,在卡片的表单内部
    this.edit(newObj, "PartToPart", { isRelation: true }).then((res) => {
      this.getSourceAddin().getParentAddin().freshObj(res);
    });


    94editNodeObj()编辑树树控件


    代码块
    languagejs
    var tree = this.getAddInByID('TreeID');
    let fixObj = {
    	right_uintname: "value",
    }
    tree.editNodeObj(fixObj, true)


    95start(args)启动消息订阅订阅控件


    代码块
    languagejs
    var addin = this.getAddinById("TextInput1");
    var wm = this.getAddinById('WatchMessage2');
    var params = {
    	data: addin.getValue()
    }
    wm.start(params);


    96pause()暂停消息订阅订阅控件


    代码块
    languagejs
    var wm = this.getAddinById('WatchMessage2');
    wm.pause();


    97resume()恢复消息订阅订阅控件


    代码块
    languagejs
    var wm = this.getAddinById('WatchMessage2');
    wm.resume();


    98stop()停止消息订阅订阅控件


    代码块
    languagejs
    var wm = this.getAddinById('WatchMessage2');
    wm.stop();


    99this.param获取后端返回值,当调用后端脚本完成后,后端脚本返回的数据会存储在this.param变量中,需要的时候可以取到调用后端脚本或restful接口返回的结果存储在this.param中,当调用后该对象有值


    代码块
    languagejs
    console.log(this.param);
    var label = this.getAddinById("Label1");
    label.setValue(this.param.data.operationResult);


    100getValue();获取查询框中控件的取值查询框


    代码块
    languagejs
    //获取查询框中的控件的2种方式:var value = this.getSourceAddin().getAddinById('parentOidEcho&2').getValue();
    this.getAddinById("控件代号").getAddinById("查询框内控件的控件代号").getValue()


    101freshData

    获取查询框中的查询条件和

    重新执行查询条件

    查询框


    代码块
    languagejs
    this.getSourceAddin().getSelected('Grid1').then(res => {
    	var query = res
    	console.log('getselected');
    	console.log(query);
    	//重新执行查询事件
    	this.getSourceAddin().freshData(query)
    })


    102freshObj支持返回结果,如改用API查询或者自定义sql查询查询框


    代码块
    languagejs
    var rowData = [
            {field: 'field1', oid: 'oid1'},
            {field: 'field2', oid: 'oid2'},
    ]
    //更新列表数据
    this.getSourceAddin().freshObj(rowData)


    103可视化表单控件脚本









    this.getAddinById('可视化控件代号').clickData

    获取选中系列

    可视化控件


    代码块
    languagejs
    let chart = this.getAddinById('EChart1');
    console.log(chart.clickData)


    104freshData(query)根据过滤条件更新数据多对象控件、可视化控件


    代码块
    languagejs
    //获取可视化控件
    var grid = this.getAddinById("控件id");
    //设置过滤条件
    let query = `and obj.number = '${this.obj.number}'`;
    //根据query过滤显示可视化控件
    grid.freshData(query);


    105freshData(extendArr, extendGrid, extendSTime, extendETime) @param extendArr 外部选择的序列集合
    @param extendGrid 外部指定图表排列方式
    @param extendSTime 外部指定查询起始时间
    @param extendETime 外部指定查询结束时间,
    时序看板
    106getToolsSeries()返回当前工具栏所选全部序列时序看板
    107getToolsGridType()返回当前工具栏所选图标排列方式时序看板
    108getToolsStartTime()返回当前工具栏日期起始时间时序看板
    109getToolsEndTime()返回当前工具栏日期结束时间时序看板
    110option.legend设置图例位置可视化控件


    代码块
    languagejs
    let myChart = this.getAddinById('EchartBar1');
    myChart.args.option.legend.right = 60;//可以写left ,right,top,bottom
    myChart.args.option.legend.bottom = 'auto';


    111编码扩展表单控件脚本HTML

    超级控件扩展,支持Html和Vue两种格式

    在控件内可以通过dwf_ctx调用dwf脚本引擎中的方法

    获取dwf_ctx句柄的方法:

    var _this = window.parent.dwf_ctx;  //获取dwf的脚本句柄

    1)自定义复杂的交互逻辑,如根据设置数据自动增加可控件等

    2)酷炫的可视化看板功能


    代码块
    languagexml
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        </style>
        <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=??????"></script>
        <title>地球模式</title>
    </head>
    <body>
        <div id="allmap"></div>
    </body>
    </html>
    <script type="text/javascript">
        // GL版命名空间为BMapGL
        var map = new BMapGL.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式
         
        var ctx = window.parent.dwf_ctx;
        let param = {};
        ctx.dwf_axios.post(`/omf/entities/Asset/objects`,param).then(initRes => {
          //在回调中处理
          console.log(initRes.data.data);
          let assets = initRes.data.data;
          assets.forEach(a => {
              var marker = new BMapGL.Marker(new BMapGL.Point(a.locationX, a.locationY));
              marker.asset = a; //先将标记点对应的数据绑定起来
              marker.addEventListener('click', function () {
                    console.log(marker.asset);
                    // 单击的时候打开对话框
                    let initParams={ obj:marker.asset };
                    ctx.openForm('Asset','AssetComposition',null,'visit',initParams);             
                });
              map.addOverlay(marker);
            });
        });
    </script>


    112VUEvue-超级控件支持Iview的组件,如需其他组件需要在服务器安装后才可以被引用,如要使用elementUI的组件库,可以预先在dwf服务器下载安装,然后才能再此处加入引用


    代码块
    languagexml
    <template>
    <div>
    <Button>Hello World</Button>
    </div>
    </template>
    <script>
    import { Button } from 'iview';
    export default {
    components: { Button },
    data() {
    return {
    }
    },
    }
    </script>
    <style>
    @import "../../node_modules/iview/dist/styles/iview.css";
    </style>