页面树结构

版本比较

标识

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

...

关闭页签

this,viewName ,opendrawer(targetClass//top /bottom', null,displayType,initParams)

@param targetClass:表示对应的类

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

@param left/right:表示右滑窗还是左滑窗

@param args:打开表单时的其他参数,在之前的实现保持不变的前提下,保证兼容性,推荐使用null

@param displaType:tab页签打开时的状态

@param initParams:nitParams:object,与操作中的前处理脚本中return  不限示例脚本如下:
this.msgboxDialog.confirm (function> <function> <

注意:comfirm有点击确定和取消的回调函数,可以自行编辑

注意在使用弹窗的时候 回调里面需要对this进行重定义,否则无法使用相关方法

示例如下

var 事件处理完成,关闭遮罩,在异步交口调用完成后可以关闭遮罩if(this.validateForm()){
console.log('表单验证成功')
}else{
var grdiAddin = thisdebugger
// getAddinById("Label4");
label.setValue(this.getSourceAddin.args.text)var place = this示例:设置附件上传类型var place = thisvar grid = thisclientScript:var grid = thisdebugger;

//内存表格

ar grid = var tree = this


功能分类脚本名称/关键字功能描述适用范围/场景脚本示例说明备注
关键字this.obj

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

是一个JSON对象

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_[关联属性名]

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

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

console.log(this.obj);

this.selectedObjs

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

是一个JSON对象数组

使用范围:

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

console.log(this.selectedObjs);
this.data

打开表单的初始化参数

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

是一个JSON对象

可以使用的场景有两类:

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

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

console.log(this.data);
this.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对象数据接口访问端口

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


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);


this.user

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

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

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);


this.store

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

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

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

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


console.log(this.store.DWF_form);

console.log(this.store.DWF_global);

console.log(this.store.user);

console.log(this.store);


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

在后处理脚本中可以使用

console.log(this.confirmData);


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

console.log(this.className);


$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



$user

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

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

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

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

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

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



$obj

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

是一个JSON对象

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

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

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

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


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


$form

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

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

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

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

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

this.generateUUID()

生成uuid的函数

console.log("打印自动生成的uuid========"+this.generateUUID());


数据访问

this.handleQueryData()

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

  • targetClass:要查询数据所在的类(实体类、关联类、外部实体类)
  • queryObjReq:查询条件,是一个json对象,包含如下的属性:
    • 单纯查询目标类对象
      • query:字符串,可以不传,一个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的参数分隔符,用于支持根据多选回填查询显示取值
        • targetClass:字符串,被关联的类的类名,如 Customer(客户信息类)
        • targetAttr:字符串,被关联的类上的关联字段(即 回填字段),如 name
        • 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": []
    }
}



this.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);
})



this.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}



this.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});



this.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});



this.deleteByCondition(condition, 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();
})



this.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);
});





this.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);
});



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");



this.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处理



this.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);
});



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



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



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


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



this.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);




表单间交互this.openForm()

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

  • targetClass:字符串,表示对应的类
  • viewName:字符串,表示需要打开的表单名称
  • args:JSON对象,可以为空对象,包含弹框的大小和高度,标题,初始化脚本和后处理脚本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里面的为准。如果,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
); 



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


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


this.returnSync()

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

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

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


代码块
//创建前端内存对象
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}


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

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

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

在弹框的操作脚本中调用

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

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

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



this.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);



this.closeTab()

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

  • 不带参数:this.closeTab()
  • 带参数:this.closeTab(data)
关闭tab和关闭tab传值到后处理


代码块
languagejs
//不带参数:关闭tab

this.closeTab();


代码块
languagejs
//带参数:关闭tab传值到后处理

this.closeTab(data);



this.closeTabById()

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

  • 不带参数:this.closeTabById(id)
  • 带参数:this.closeTabById(id, data)
指定tab关闭和指定tab关闭传值

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

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

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



代码块
languagejs
//关闭页签
this.closeTabById('moduleName-authority');

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

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

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

关闭页签并触发打开页签的后处理脚本


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

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



this.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里面的为准。

脚本打开滑窗

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


this.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
 10});


this.msgbox.info({content: "一般的提示",duration:
 10
 10});


this.msgbox.error({content: "错误的提示",duration:
 10
 10});


更多的参数设置如下:


this.msgboxDialog()

模态弹窗提示后需手动关闭的msg提示框,支持确定和取消两种回调方式:模态弹窗提示后需手动关闭的msg提示框,支持确定和取消两种回调方式,示例脚本如下:
this.msgboxDialog.confirm

不限

(
“title标题”,
"请确认是否删除?",


<function>(点击确定之后的回调函数),


<function>(点击取消之后的回调函数));

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



代码块
languagejs
//由于使用函数作为参数,使用回调里面需要对this进行重定义,否则无法使用相关方法。
var _this =
 this
 this;


this.msgboxDialog.
confirm 
confirm("title标题","请确认是否关闭?",


function() {

     console

	console.log("确认关闭function")
    
;
	_this.closeDialog();

	},


function() {

    console

	console.log("取消关闭function"  


	}
);



this.spinShow()

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

弹出遮罩

防止重复提交,数据混淆,主要用在异步请求数据接口调用的时候this.spinShow();this.spinHide()关闭遮罩



代码块
languagejs
this.spinShow(); //打开遮罩

this.edit(editObj, className).then(rtnObj =>{


   //返回的rtnObj为后台修改保存后返回的对象

   this

   this.spinHide(); //编辑完成,关闭遮罩


});



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

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


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



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


代码块
// 一般性前端校验
if(this.validateForm()){
	console.log('表单验证成功')
}else{
	console.log('表单验证失败')

}

为了满足验重配置项的接口校验,将校验方法调整为如下:


}
// 为了满足验重配置项的接口校验,将校验方法调整为如下:
this.validateForm().then(res=>{

	if(res){

		console.log('表单验证成功')


	}else{


		console.log('表单验证失败')


	}


});



this.freshData()

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

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


代码块
languagejs
this.freshData();


this.msgbox.info("fresh success")



使用控件

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


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




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


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



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


代码块
languagejs
let addin = this.getSourceAddin();


if (addin) {
	console.log(
this.getSourceAddin
addin.args
.text
)
}
label =



this.

 this.getSocketId();

获取当前客户端的socketId


脚本互相调用this.executeOperation()

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

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

opr:定义的操作对象
  • 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

var opr = {
    targetClass: "WorkOrder",  //目标类的类名

    viewName

    viewName:"SinlgeWO"
  
  ,//目标类中的表单名称

    oprName

    oprName: "openCreatedial"
  
  ,
  
  //操作英文名,生造操作时可以自定义

    displayName

    displayName:"创建工单" //
操作中文名 
     
操作中文名 
		displayType:"create"
  
  ,//动作支持create、edit、visit、next_create、url

    oprStyle

    oprStyle:"dialog"  //操作样式dialog、tab、drawer

    displayOperation

    displayOperation:true,  //默认操作 true、false

    beforeExecute

    beforeExecute:() => //前处理函数,代表前处理脚本


        //新的前处理脚本

        return 

        return { 


       
 obj
  obj:this.selectedObjs[0],//
选填,当前表单多对象控件选中的对象 
选填,当前表单多对象控件选中的对象 
         //query:"and obj.woTitle = '工单1'", //
选填,非必填 
选填,非必填 
       
 data
  data:{ "woDesc1":"自定义属性"//选填,woDesc1是自定义的属性,


         } 


       }


    },

    afterExecute:

    afterExecute:() => {         //表示后处理函数,代表后处理脚本


        //新的后处理脚本,可根据实际情况维护


   
     var data = this
      var data = this.confirmData;


       
 console
  console.log(`自定义后处理`)


       
 console
  console.log(data)


    }


}


this.executeOperation(opr);



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

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

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

参数说明

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

default: 为后端脚本的脚本名称

返回结果

res:后端通过this.res给前端脚本传参

注意

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

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

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

示例:

一个操作中的前端脚本:

一个操作中的前端脚本:

代码块
languagejs
this.callServer(customData,'default').then(res => {


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


    console.log(res.result);


})

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

代码块
this.logger.info("前端传递给后端脚本的参数:"+this.customData);

this.res = {


	"result":"后端脚本执行成功"


}

结果:

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

后端回调结果

后端脚本执行成功


布局控件

showTab


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


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

tabAddin.showTab("tab页签名称");


tabAddin.hideTab("tab页签名称");



hideTab控制指定页签的隐藏标签页var tabAddin = this


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

tabAddin.
hideTab
showTab("tab页签名称");
tabAddin.hideTab("tab页签名称");



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


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

tabAddin.getSelectedTab();



turnTo跳转激活子页签标签页


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

tabAddin.turnTo('tab1');



dropName获取点击次数标签页


代码块
languagejs
var dropName = ''

tabAddin.args.tabs.forEach(item => {

	if(name == item.name){

		dropName = item.dropName

	}

})

dropName = tabAddin.args.tabs[i].dropName

tabAddin.clickObj[dropName]



按钮控件导入导出按钮控件responseData

responseData:

  • code: 200
  • data: Object
    • allNum: 导入的数据条数
    • failedNum: 导入数据的失败条数
    • msg: "succeed"/“failed”
    • succeedNum: 导入数据的成功条数
  • message: "OK"
  • success: true

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

示例:


代码块
languagejs
console.log('导入完成事件');


// 获取到导入接口返回的数据


let responseData =
 this
 this.getSourceAddin().responseData;


console.log(responseData);

 

// 导入成功


if(responseData.success){

    console

    console.log('导入成功');

    console

    console.log(responseData.data);


    // responseData.data = {


    //     "msg": "succeed",


    //     "failedNum": 0,


    //     "succeedNum": 5,


    //     "allNum": 5


    // };


}else{

    console

    console.log('导入失败')


}



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


代码块
示例:
languagejs
// 脚本调用数据导出方法,不传参数,以控件上设置的条件导出;有参数,就根据输入的参数导出


this.exportData(['oid'], 'echo', `and obj.oid='9948A73560B48D44AF3894FC7DF98E7E'`)



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


代码块
languagejs
//设置标签页的页签"页签1"禁用

var tabAddin = this.getAddinById("Tab1");

tabAddin.setDisable('tab1', true);

//设置按钮禁用

var tabAddin = this.getAddinById("Operation1");

tabAddin.setDisable(true);



单对象表单控件脚本







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


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


let result = mySelect.getValue();



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

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

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


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


let myRadio =
 this
 this.getAddinById('RadioButton1');//绑定单选框,这个绑定的控件id需要根据自己的表单内的控件调整


let myCheckBox =
 this
 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);



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


代码块
languagejs
var place = this.getAddinById("CheckBox1");//绑定复选框


place.setValue('nanjing');//设置地点的值



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

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

示例:

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

true 隐藏

false:显示

所有控件


代码块
languagejs
let myAttach =
 this
 this.getAddinById('Attachments1');//绑定附件,这个绑定的控件id需要根据自己的表单内的控件调整


myAttach.args.allowType = 'jpg';//设置附件上传文件类型


//可以通过console.log查看每个控件支持的args的参数


myAttach.args.hided =
 true
 true;//隐藏控件




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


代码块
languagejs
var place = this.getAddinById("CheckBox1");//绑定复选框


place.setValue('nanjing');//设置地点的值


place.triggerEvent('
valueChanged
值变化')//触发控件上绑定的值变化事件



this.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);



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


代码块
languagejs
//控件的id可在app端开发者工具中拾取,后期可在modeler中直接拷贝

var addinElement = this

var addinElement = this.getAddinById("指定控件的id");


//设置控件在界面中的错误信息提示


addinElement.setError("存在异常");


//$el为指定控件的dom元素,可以直接对dom元素修改其样式


addinElement.$el.style.display = "none";



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


代码块
languagejs
var grid = this.getAddinById('Grid3');//绑定表格,这个里面是控件id,需要修改成表单内需要绑定的表格控件id

var button = this

var button = this.getAddinById("Operation10");//绑定刷新按钮,这个里面是按钮的控件id,需要修改成表单内需要绑定的按钮控件id

var selectedObjs =

var selectedObjs = grid.getSelected();//获取选中的对象的信息,信息包括oid,属性值等

var targetClass

var targetClass = 'Recordsheet';//指定要删除关联关系的关联类,这个根据自己需要改

var infoid

var infoid={


	relation_oid: selectedObjs[0].relation_oid


	//获取选中对象的oid

}
var params = {

}
var params = {
isRelation:true,


}//关联关系,这个地方可以改,当关联类和实体类没有关联的时候改成false


this.delete(infoid,targetClass,null,params).then(res =>
{
debugger
 
 {
	button.invokeEvent("单击");//删除后执行刷新

 

})//删除关联类的关联关系



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


代码块
languagejs
//动态参数控件对象

var addin = this

var addin = this.getAddinById('DynamicParameterFrame1');


//获取控件全部数据(包括原schema与新输入值)

var formValue =

var formValue = addin.getValue();


/*获取控件KV键值对数据,即不包括原schema元数据,返回数据如下:


{"number": 1,"date":"2020-03-01 10:30:00" ,"name": "桌子", "price":100,"type":"家具","description": "测试数据..."} */

var formOBJ =

var formOBJ = addin.getKVValue();


//TODO:针对formOBJ的后续处理


console.log(formValue);


console.log(formOBJ);



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

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


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



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

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


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



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


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


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



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


























setExternalOprConfig(config)

表格操作列样式设置

表格操作列样式设置,其中用到uniLabel、type、shape、disabled、color

show脚本设置表格样式

show脚本设置表格样式,用来根据数据的取值来动态修改操作按钮。

表格控件


代码块
languagejs
var grid = this.getAddinById('Grid2');

 var operationParams = [{
    uniLabel

var operationParams = [{
    uniLabel'修改过的编辑',//按钮文字

    type

    type'warning',//按钮样式

    shape: true

    shape: true,//是否圆角

    disabled: true

    disabled: true//是否禁用

    color

    color'red',//文字颜色

    show: false

    show: false//按钮是否显示


},{

    uniLabel

    uniLabel'修改过的新增',

    type

    type: (rowData) => {

        if

        if(rowData.product === '草莓'){

            return 

            return 'warning'


        }else{

            return 

            return 'success'


        }


    },

    shape

    shape: (rowData) => {

        if

        if(rowData.product === '草莓'){

            return 

            return 'circle'//圆角


        }else{

            return 

            return 'true' //直角


        }


    },//是否圆角

    disabled

    disabled: (rowData) => {

        if

        if(rowData.product === '草莓'){

            return true

            return true
        }else{

            return false

            return false
        }


    }, //是否禁用

    color

    color: (rowData) => {

        if

        if(rowData.product === '草莓'){

            return 

            return 'red'


        }else{

            return 

            return 'blue'


        }


    },//文字颜色

    show

    show: (rowData) => {

        if

        if(rowData.product === '草莓'){

            return true

            return true
        }else{

            return false

            return false
        }


    //是否显示


}]

 

grid.setExternalOprConfig(operationParams);



setRowClass

设置行样式设置行样式,是一个函数,表格会遍历每行,传入名为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
 {
	// 间隔行效果
	if (params.node.rowIndex % 2 === 0) {


		return 'grid-font-color-red';


	}


	if (params.node.rowIndex % 2 !== 0) {


		return 'grid-font-color-green';

}
if

	}
	// 特殊数据标绿
	if (params.data.companyd === '哈哈哈1') {


		return 'grid-font-color-green';


	}


});



setColumnDefs设置列定义表格控件


代码块
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);



setColumnVisible设置列可见表格控件


代码块
languagejs
var grdiAddin = this.getAddinById("id");


grdiAddin.setColumnVisible(0, false)




setRowData设置表格数据表格控件


代码块
languagejs
//表格头部生成与数据结构数据操作(增删改,浏览器内存实现,不涉及数据库)
var grdiAddin = this

var grdiAddin = this.getAddinById("表格控件的id");

var rowData = [

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'});




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


代码块
languagejs
//获取表格中所有的的行数据对象集合

debugger;


let workItemTable = this.getAddinById("Grid1");

var Table = workItemTable.getAll();

console.log(Table);

this.msgbox.info('Table');



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


代码块
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
 {
      if (res.data.code != 200)
{
}else{
 {
      } else {
        pageInfo.totalPage = res.data.data; //数据总数


        pageInfo.pageSize = 2; //每页条数


        pageInfo.pageIndex = 1; //当前页码


        pageInfo.pageSizeOpts = [2]; //每页条数切换的配置

modReq = {
condition: '',
startIndex: pageInfo.pageIndex,
pageSize: pageInfo.pageSize
};

        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

            modReq
          )
          .then((rsp) => {
            if (rsp.data.code != 200)
{
}else{
 {
            } else {
              grid.setRowData(rsp.data.data
)
}
}
);

}
});
}else{
modReq = {
condition: '',
startIndex: pageInfo.pageIndex,
pageSize: pageInfo.pageSize
};
this.dwf_axios.post(

            }
          });
      }
    });
} 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
 {
      if (rsp.data.code != 200)
{
{
var pageIndex =
 {
        {
          var pageIndex = pageInfo.pageIndex;

var pageSize =

          var pageSize = pageInfo.pageSize;


          grid.setRowData(rsp.data.data)

}
;
        }
      }
    });


}



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


代码块
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 =
 {
      var rowData = rsp.data.data;

var pageInfo =

      var pageInfo = grid.getPageInfo();


      grid.setRowData(
        rowData.slice(
          (pageInfo.pageIndex - 1) * pageInfo.pageSize,
          pageInfo.pageIndex * pageInfo.pageSize
))
}

        )
      );
    }
  });



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);



setDisplayType()

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

craete、visit、edit

卡片控件

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


代码块
language
debugger
js
var grid = this.getAddinById('Grid2');


var button = this.getAddinById("Operation3");


var selectedObjs = grid.getSelected();


console.log('getSelected',selectedObjs);



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


代码块
languagejs
//卡片之间值传递

var FormEngine1 = this.getAddinById(
'
"FormEngine1
'
"); //获取卡片1控件id


var FormEngine2 = this.getAddinById(
'
"FormEngine3
'
"); //获取卡片2控件id


var Text1InFormEngine = FormEngine1.
g如上AddinById
getAddinById(
'
"TextInput1
'
"); //获取卡片1控件中的文本框1


Text1InFormEngine.setValue(1); //为文本框1赋值为1


var FE1 = Text1InFormEngine.getParentAddin(); //获取文本框1的父控件,也就是卡片1


if (FE1) {


  var Form = FE1.getParentAddin(); //卡片1的父控件,也就是当前表单

debugger
if

  debugger;
  if (Form) {


    var FE2 = Form.getAddinById(
'
"FormEngine3
'
"); //获取当前表单的卡片2


    if (FE2)
{
var TextInput1FormEngine2 =
 {
      var TextInput1FormEngine2 = FE2.getAddinById(
'
"TextInput1
'
"); //卡片2的文本框

if

      if (TextInput1FormEngine2) TextInput1FormEngine2.setValue(3); //给卡片2的文本框赋值

}
}
}

    }
  }
}



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


代码块
//为子表单设置对象

var FormEngine1 = this.getAddinById(
'
"FormEngine1
'
");

let query = {condition: ` and obj.dataname = '数据111' `}; //查询条件


//开始后台数据的查询


this.handleQueryData({
query
 queryObjReq: query, targetClass: "
data
Asset"
,fresh:true
}).then(
  (res) => {


    //updateShow('子表单类名','子表单名',{obj:res[0]});


    FormEngine1.updateShow(
'data','biaoqian',{obj:
"Asset", "biaoqian", { obj: res[0] });


  }
);



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


代码块
languagejs
this.edit(
  { product:
'
 "上海米老头
'
", oid:
'
 "04D0D88571046C4C9EA6546FE6245784
'
" },
'salevalue'

  "salevalue"
).then((res) => {


  this.getSourceAddin().getParentAddin().freshObj(res)

;
});



freshObj(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)

;
});



editNodeObj()编辑树树控件


代码块
languagejs
var tree = this.getAddInByID('TreeID');

let fixObj = {

	right_uintname: "value",

}

tree.editNodeObj(fixObj, true)



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


代码块
var addin = this.getAddinById("TextInput1");

var wm = this.getAddinById('WatchMessage2');


var params = {


	data: addin.getValue()


}


wm.start(params);



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


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


wm.pause();



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


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


wm.resume();



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


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


wm.stop();



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


代码块
console.log(this.param);


var label = this.getAddinById("Label1");


label.setValue(this.param.data.operationResult);



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


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

this.getAddinById("控件代号").getAddinById("查询框内控件的控件代号").getValue()



freshData

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

重新执行查询条件

查询框


代码块
this.getSourceAddin().getSelected('Grid1').then(res => {


	var query = res


	console.log('getselected');


	console.log(query);


	//重新执行查询事件


	this.getSourceAddin().freshData(query)

})



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


代码块
var rowData = [

        {field: 'field1', oid: 'oid1'},

        {field: 'field2', oid: 'oid2'},

]

//更新列表数据

this.getSourceAddin().freshObj(rowData)



可视化表单控件脚本









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

获取选中系列

可视化控件


代码块
let chart = this.getAddinById('EChart1');


console.log(chart.clickData)



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


代码块
//获取可视化控件

var grid = this.getAddinById("控件id");

//设置过滤条件


let query = `and obj.number = '${this.obj.number}'`;

//根据query过滤显示可视化控件


grid.freshData(query);



freshData(extendArr, extendGrid, extendSTime, extendETime) @param extendArr 外部选择的序列集合
* @param extendGrid 外部指定图表排列方式
* @param extendSTime 外部指定查询起始时间
* @param extendETime 外部指定查询结束时间,
时序看板

getToolsSeries()返回当前工具栏所选全部序列时序看板

getToolsGridType()返回当前工具栏所选图标排列方式时序看板

getToolsStartTime()返回当前工具栏日期起始时间时序看板

getToolsEndTime()返回当前工具栏日期结束时间时序看板

option.legend设置图例位置可视化控件


代码块
let myChart = this.getAddinById('EchartBar1');


myChart.args.option.legend.right = 60;//可以写left ,right,top,bottom


myChart.args.option.legend.bottom = 'auto';



编码扩展表单控件脚本HTML

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

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

获取dwf_ctx句柄的方法:

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

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

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


代码块
languagexml
<!DOCTYPE html>


<html>

<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
opacity: 0
}
</style>
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">点我</button>
<transition name = "fade">
<p v-show = "show" v-bind:style = "styleobj">动画实例</p>
</transition>
</div>
<script

<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">

var vm = new Vue({
el: '#databinding',
data: {
show:true,
styleobj :{
fontSize:'30px',
color:'red'
}
},
methods : {
}
});
</script>
</body>
</html>

    // 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>



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


代码块
<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>



应用配置this.env.locale获取当前的语言环境

PC应用/Mobile应用


代码块
console.log(this.env.locale)
;



this.env.setCollapsed(控制展开的参数);
  • 侧边栏默认为展开,默认为fasle
  • 参数为true时表示侧边栏展开
  • 参数为false时表示侧边栏关闭
PC应用菜单


代码块
//控制侧边栏收起

this.env.setCollapsed(true);



setOpenNames

指定某些菜单展开

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


代码块
//分组菜单默认折叠,如需展开:

this.env.setOpenNames([['招聘管理','人事管理'],['招聘管理','个人信息'],['外部模块','iotdb外部映射','A']])