页面树结构
转至元数据结尾
转至元数据起始

正在查看旧版本。 查看 当前版本.

与当前比较 查看页面历史

« 前一个 版本 17 下一个 »


功能分类脚本名称/关键字功能描述适用范围/场景脚本示例说明备注
关键字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:字符串,在浏览器地址栏输入的DWF服务器位置
  • this.env.serverPort:字符串,在浏览器地址栏输入访问DWF服务器的端口号
  • this.env.appConfig[]:键值对,包含了在DWF配置文件中记录的配置项
  • this.env.serverURL:字符串,服务器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.comfirmData弹窗表单新增对象/编辑对象成功后提交的表单数据,在后处理脚本中可用仅适用于操作的后处理脚本中

在后处理脚本中可以使用

console.log(this.confirmData);



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

console.log(this.className);



$env

获取当前环境的基本信息,返回一个JSON对象,包括属性如下:

  • $env.serverURL:获取服务器URL
  • $env.serverIp:获取服务器ip
  • $env.serverPort:服务器端口
  • $env.metaServicePort:服务器元数据服务端口
  • env.objServicePort:服务器对象数据服务端口
需要获取当前环境的基本信息的时候,可以使用$env

debugger;
let _this = this;
var grid = this.GetAddinById("id");
let query = `and obj.department1 = '${this.user.userGroups[0].oid}'
and obj.attributeName ='${this.store.state.user.userId}'
and obj.attributeName= '${this.user.userName}'
and obj.attributeName= '${this.user.userId}'
and obj.attributeName= '${this.user.oid}'
and obj.attributeName= '${this.user.token}'
and obj.attributeName= '${this.user.userGroups[0].name}'
and obj.attributeName= '${this.user.userGroups[0].comment}'

and obj.attributeName= '${env.serverURL}

and obj.attributeName= '${env.serverIp}`;//以此类推可以自定义增加或减少env和user
debugger;
grid.freshData(query);
this.msgbox.success("已刷新!");



$user

debugger;
let _this = this;
var grid = this.GetAddinById("id");
let query = `and obj.department1 = '${this.user.userGroups[0].oid}'
and obj.attributeName ='${this.store.state.user.userId}'
and obj.attributeName= '${this.user.userName}'
and obj.attributeName= '${this.user.userId}'
and obj.attributeName= '${this.user.oid}'
and obj.attributeName= '${this.user.token}'
and obj.attributeName= '${this.user.userGroups[0].name}'
and obj.attributeName= '${this.user.userGroups[0].comment}'

and obj.attributeName= '${env.serverURL}

and obj.attributeName= '${env.serverIp}`;//以此类推可以自定义增加或减少env和user
debugger;
grid.freshData(query);
this.msgbox.success("已刷新!");




$obj

obj.attributeName=$obj.attributeName



$form
   指定控件联动查询obj.attributeName= '$form["id"]'

数据访问this.handleQueryData()
表格后台数据强制刷新/查询//查询条件
let  queryConditon = {
   targetClass:"Part",
   query:{query:`and obj.id='${this.obj.name}'`},
   fresh: true     //是否从后台强制刷新查询(建议默认值为true)
};
//基于DB进行查询
this.handleQueryData(queryConditon).then(res => {
   //针对res值(查询返回值)直接处理…
});


this.create()

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

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

//系统新增时控制是否弹出信息

this.create(obj, "WorkOrder", {showMessage:true});

//关联类表单新增实体类并控制是否弹出信息

this.create/edit(obj, "WorkOrderToPart", {
isRelation:true,
relationClass:'WorkOrderToPart',
leftClass:'WorkOrder',
rightClass:'Part',
showMessage:true});



this.createObj()

/创建前端内存对象

let obj = this.createObj(this.className).then((res) => {
console.log("新增内存对象oid=");
console.log(obj)
debugger
this.returnSync({
obj: res.data
})

})
console.log("新增内存对象oid=" + obj.oid);
return {sync:true}

let param =
[{
"woTitle":""}]



this.edit()

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

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

//系统编辑时控制是否弹出信息

this.edit(obj, "WorkOrder", {showMessage:true});

//关联类表单新增实体类并控制是否弹出信息

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}
用于系统编辑时控制是否弹出信息和关联类表单删除实体类并控制是否弹出信息

//系统删除时控制是否弹出信息

this.delete(obj, "WorkOrder", {
showMessage:true});

//关联类表单删除实体类并控制是否弹出信息

this.delete(obj, "WorkOrder", {isRelation:false,
showMessage:true});



this.dwf_axios()
在回调中处理调用app的restful API示例1
//this.dwf_axios.post(`http://192.168.30.63/workorder/init`,param);
let param = {
};
this.dwf_axios.post(`/workorder/init?tyWorkOrderOid=${this.obj.oid}`,param).then(initRes => {
   //在回调中处理
    if(initRes && initRes.data && initRes.data.result && initRes.data.result == true){
        this.msgbox.success('已完成基于专家库作业信息的初始创建!');
    }else if(initRes && initRes.data && initRes.data.msg){
        alert(initRes.data.msg);
    }
});


this.dwf_modeler_axios()


调用modeler端的restful API//获取当前服务器端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进行调用,并且允许修改已有操作的操作样式和动作。

@param targetClass:已有操作绑定的目标类;

@param operName:已有操作的英文名

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

this.getOperation(this.className, 'obj').then(res => {
    var operation = res.data.data;
    operation.beforeExecute = () => {
        console.log(`自定义前处理`)
        return {
            // obj: {
            //     obj:this.selectedObjs[0]
            // },
            query: `and obj.woTitle like '%工单%'`,
            data: {
                woDesc1: 'getOperation执行已有操作'
            }
        }
    }
     
    operation.afterExecute = () => {
        var data = this.confirmData;
        this.msgbox.info("getOperation执行已有操作结束")
    }
    this.executeOperation(operation).then((opr) => {
        console.log(opr)
        debugger
    });
})

这两个脚本不知道怎么描述功能?



this.queryEntity()

在回调中处理resMetaObj值…

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



this.queryRelation()
在回调中处理resMetaObj值…

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



表单间交互this.openForm()
新的标签打开界面var targetClass = 'part';
var viewName = 'allPartList';
var args = {};  //args是{ conditionExpre: 查询条件, params: 初始化脚本 },如果没有args可以传空
this.openForm(targetClass, viewName, args);


this.returnSync()
保证异步前处理脚本处理之后再打开弹窗用的//创建前端内存对象

let obj = this.createObj(this.className).then((res) => {
console.log("新增内存对象oid=");
console.log(obj)
debugger
this.returnSync({
obj: res.data
})

})
console.log("新增内存对象oid=" + obj.oid);
return {sync:true}

let param =
[{
"woTitle":""}]



this.closeDialog()
关闭弹窗this.closeDialog()

this.openTab()

queryOpr中的参数

@param targetClass:表示对应的类

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

@param action:动作

@param authority:英文名

@param extSettings:是否打开默认操作

@param args中的参数

  1. initParams:object,与操作中的前处理脚本中return { obj:{...}, query: {...}, data: {...}} 返回的格式一致,可以设置对象,查询条件和夹带的数据
  2. displayType:create/edit/visit
打开tab

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



this.closeTab()

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

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

//不带参数:关闭tab

this.closeTab();

//带参数:关闭tab传值到后处理

this.closeTab(data);



this.closeTabById()

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

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

this.closeTabById('moduleName-authority');不知道这个moduleName-authority什么意思,无法说明这里面填了个什么值进去

this.closeTabById('moduleName-authority',data);



this.openDrawer()

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

opendrawer(targetClass,viewName ,'left'/'right', null,displayType,initParams)

@param targetClass:表示对应的类

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

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

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

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

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

脚本打开滑窗

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("错误的提示");


this.msgboxDialog()
模态弹窗提示后需手动关闭的msg提示框//建议补充模态弹窗提示后需手动关闭的msg提示框,参考如下:
this.msgboxDialog.success(“title标题”,"成功的提示");
this.msgboxDialog.info(“title标题”,"一般的提示");
this.msgboxDialog.error(“title标题”,"错误的提示");
//@扩展点(暂不支持)
//建议补充comfirm确认弹窗(包括确认与取消按钮)
this.msgboxDialog.confirm (“title标题”,"请确认是否删除?", <function>(点击确定之后的回调函数), <function>(点击取消之后的回调函数));


this.spinShow()
已遮罩spinShow();

this.spinHide()
取消遮罩this.spinHide();

this.validateForm()
控件效验if(this.validateForm()){
console.log('表单验证成功')
}else{
console.log('表单验证失败')
}


this.freshData()

不带参数:this.freshData()

带参数:没看到带参的脚本

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

//不带参数

this.freshData();
 
this.msgbox.info("fresh success")



使用控件

this.getAddinById()
多对象控件组中的'表单点选器'控件【内置的控件】var grdiAddin = this.GetAddinById("控件的id");

this.getTargetAddin()
获取操作绑定的控件var grid = this.getTargetAddin();

this.getSourceAddin()
获取操作触发对象debugger
// this.getSourceAddin();
console.log(this.getSourceAddin.args.text)
label =this.getAddinById("Label4");
label.setValue(this.getSourceAddin.args.text)


脚本互相调用this.executeOperation()

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

  1. opr:定义的操作对象
  2. targetClass:目标类的类名
  3. viewName:目标类中的表单名称
  4. oprName:操作英文名
  5. displayName: 操作中文名
  6. displayType:动作支持create、edit、visit、next_create、url
  7. url: 如果displayType是url需要增加这个参数来传url地址
  8. oprStyle:操作样式dialog、tab、drawerL、 drawerR
  9. displayOperation:默认操作 true、false
  10. beforeExecute:表示前处理函数,代表前处理脚本
  11. afterExecute:表示后处理函数,代表后处理脚本

//定义新的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);



单对象表单控件脚本







this.getAddinById("控件代号").getValue()
获取控件的值

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



this.getAddinById("控件代号").getDisplayValue()
获取界面显示值key

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



this.getAddinById("控件代号").setValue()
设置控件的值

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



this.getAddinById("控件代号").args
设置附件上传类型

let myAttach = this.getAddinById('Attachments1');//绑定附件,这个绑定的控件id需要根据自己的表单内的控件调整
myAttach.args.allowType = 'jpg';//设置附件上传文件类型



this.getAddinById("控件代号").triggerEvent()
触发值变化事件

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



this.getAddinById("控件代号").setTooltip()
鼠标悬停

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


this.getAddinById("控件代号").getSelected()
获取选中对象的信息

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 => {
debugger
 
button.invokeEvent("单击");//删除后执行刷新
 
})//删除关联类的关联关系



this.getAddinById("控件代号").getKVValue()
获取动态参数框的KV键值对数据

clientScript:
//动态参数控件对象
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);



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


























setExternalOprConfig(config)
其中用到uniLabel、type、shape、disabled、color
show脚本设置表格样式
表格操作列样式设置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);


setRowClass
设置行样式//行样式设置
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';
}

});


setColumnDefs
设置列定义

//列样式设置

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
设置列可见debugger;
var grdiAddin = this.GetAddinById("id");
grdiAddin.setColumnVisible(0, false)


setRowData
设置表格数据

//表格头部生成与数据结构数据操作(增删改,浏览器内存实现,不涉及数据库)


var grdiAddin = this.GetAddinById("表格控件的id");
var rowData = [
        {field: 'field1', oid: 'oid1'},
        {field: 'field2', oid: 'oid2'},
...
]
//设置表格数据
grdiAddin.setRowData(rowData);
//添加表格数据
grdiAddin.setRowData(rowData, 'add');
//删除表格数据(参数对应行)
grdiAddin.deleteRowData('1');
grdiAddin.deleteRowData(['2','3']);
//修改表格数据(参数对应行)
grdiAddin.updateRowData('4', {field: 'updatefield'});






getRowData
获取表格数据

deleteRowData
/删除表格数据(参数对应行)

updateRowData
修改表格数据

getAll
对象集合

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

debugger;

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

var Table = workItemTable.getAll();

console.log(Table);

this.msgbox.info('Table');



getDefaultColumnDef
获取一列的默认列定义

//内存表格

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




setPageInfo
设置当前页码

getPageInfo
获取表格页码信息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))

}
});


setTooltip
鼠标悬停

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()
create、visit、edit三态


getSelected
获取表格中选中的(多)行数据debugger
var grid = this.getAddinById('Grid2');
var button = this.getAddinById("Operation3");
var selectedObjs = grid.getSelected();
console.log('getSelected',selectedObjs);


getParentAddin
获取父控件

//卡片之间值传递

var FormEngine1 = this.getAddinById('FormEngine1');//获取卡片1控件id
var FormEngine2 = this.getAddinById('FormEngine3');//获取卡片2控件id
var Text1InFormEngine = FormEngine1.g如上AddinById('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的文本框赋值
}
}
}



updateShow
刷新子表单的数据显示

//为子表单设置对象

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

let query = ` and obj.dataname = '数据111' `; //查询条件
//开始后台数据的查询
this.handleQueryData({query:query,targetClass:"data",fresh:true}).then(res=>{
//updateShow('子表单类名','子表单名',{obj:res[0]});
FormEngine1.updateShow('data','biaoqian',{obj:res[0]});
});




getRootAddin
获取控件var subFormAddin = this.getRootAddin();

freshObj(res)
修改信息后刷新卡片this.edit({product: '上海米老头', oid: '04D0D88571046C4C9EA6546FE6245784'}, 'salevalue').then(res => {
this.getSourceAddin().getParentAddin().freshObj(res)
});


createOpr.args.hided
初次进入卡片时初始化事件var createOpr = this.getAddinById('Operation1');
var editOpr = this.getAddinById('Operation2');
var deleteOpr = this.getAddinById('Operation3');
if(this.obj.workinghours == 12345){
createOpr.args.hided = true;
}else if(this.obj.workinghours ==12){
editOpr.args.hided = true;
}


freshObj(res)
关联类修改信息后刷新卡片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()
编辑树

var tree = this.getAddInByID('TreeID');

let fixObj = {
right_uintname: "value",
}
tree.editNodeObj(fixObj, true)



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


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
获取后端返回值console.log(this.param);
var label = this.getAddinById("Label1");
label.setValue(this.param.data.operationResult);


可视化表单控件脚本









getSelected()

获取选中系列

//获取可视化控件

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

//打印当前所有系列

console.log(grid.getAll());



getAll()
return全部定制对象

//获取可视化控件

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

//打印当前选中的系列
console.log(grid.getSelected())



freshData(query)
根据传入的查询条件刷新

//获取可视化控件

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

//设置过滤条件
let query = `and obj.number = '${this.obj.number}'`;

//根据query过滤显示可视化控件
grid.freshData(query);



setDisplayType(type)

设置显示类型

type:create、edit、visit




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




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


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


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


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


clickData
回填选中的值let chart = this.getAddinById('EChart1');
console.log(chart.clickData)
return {
obj: {
price2: chart.clickData
}
}


option.legend
设置图例位置let myChart = this.getAddinById('EchartBar1');
myChart.args.option.legend.right = 60;//可以写left ,right,top,bottom
myChart.args.option.legend.bottom = 'auto';


编码扩展表单控件脚本HTML
动画实例<!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 type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true,
styleobj :{
fontSize:'30px',
color:'red'
}
},
methods : {
}
});
</script>
</body>
</html>


VUE
vue-超级控件

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



  • 无标签