如何使用onLoad函数
渲染前修改数据
<script id="customScript">
(function(form){
//数据加载后，渲染之前，this为window
form.on('onLoad',function(data, dataPermission){
data.txtName = 'txt';
},'cover');
})
</script>渲染前等待接口修改数据
<script id="customScript">
(function(form){
//数据加载后，渲染之前，this为window
form.on('onLoad',function(data, dataPermission){
// 拼接api地址，并发送ajax请求
var url = config.apiHost + '/user';
return axios.get(url).then(function(res){
data.txtName = res.name;
});
},'cover');
})
</script>渲染前修改数据权限
<script id="customScript">
(function(form){
//数据加载后，渲染之前
form.on('onLoad',function(data, dataPermission){
//不可编辑
dataPermission.txt.e = false;
//不可见
dataPermission.txt.v = false;
//必填
dataPermission.txt.r = true;
},'cover');
})
</script>如何定制表单操作按钮
隐藏提交按钮
隐藏系统按钮
<script id="customScript">
(function(form){
//数据加载后，渲染之前，this为window
form.on('onLoad',function(action,data){
var btnSubmit = this.actions.find(function(a){
return a.code === 'submit';
});
if(btnSubmit){
btnSubmit.visible = false;
}
});
})
</script>隐藏自定义按钮
自定义按钮是获取到表单元数据中的自定义按钮配置数据追加进去的，需要在onRendered中编写隐藏逻辑，且自定义按钮本身也有显示条件，所以需要在actionController上进行隐藏；
<script id="customScript">
(function(form){
//渲染完成后
form.on('onRendered',function(data){
console.log('=>this.actions',this.actions);
console.log('=>data',data);
this.actions.forEach((item)=>{
// data.Number1735095458291 === 1
if (item.code === 'button01') {
item.actionController.visible = false;
}
});
});
})
</script>阻止按钮的默认行为
<script id="customScript">
(function(form){
//操作前（包含自定义按钮）执行，返回false阻止按钮操作
form.on('onPreAction',function(action,data){
if(action.code === 'save'){
return false;
}
});
})
</script>添加自定义按钮，发送请求
<section id="toolbar">
<action text="按钮1" code="btn1"></action>
</section>
<script id="customScript">
(function(form){
//自定义按钮执行
form.on('onCustomAction',function(action,data){
if(action.code === 'btn1'){
// 拼接api地址，并发送ajax请求
var url = config.apiHost + '/user';
axios.get(url).then(function(res){});
}
});
})
</script>如何显示对话框、提示框
显示提示框
// 成功
this.$message.success('success');
// 失败
this.$message.error('error');
// loading
this.$message.loading();
this.$message.loading('加载中');
//0不自动隐藏，大于0显示的秒数
var closeLoading = this.$message.loading('加载中', 0);
closeLoading();显示对话框
this.$confirm({
title:'对话框',
content:'ddddd',
onOk(){
alert('onOk')
},
onCancel(){
alert('onCancel')
}
})如何使用onValidate函数
添加自定义校验
form.on('onValidate',function(action,data){
if(this.txtName.value !== 'a'){
this.$message.error('校验失败');
return false; //校验失败，阻止后续动作执行
}
});异步自定义校验
form.on('onValidate',function(action,data){
var closeLoading = this.$message.loading('正在校验数据',0);
var form = this;
return new Promise(function(resolve,reject){
setTimeout(function(){
if(form.txtName.value !== 'a'){
closeLoading();
form.$message.error('校验失败');
resolve(false);
}
},5000);
});
});如何自定义HTML
添加HTML片段
html片段必须添加在节点下
<section type="template" id="template"> <a-row> <a-col> <div>div1</div> </a-col> </a-row> </section>
为HTML片段绑定事件
<section type="template" id="template">
<a-row>
<a-col>
<button id="btn1" onclick="show()">按钮</button>
</a-col>
</a-row>
</section>
<script>
function show(){
alert('aaabbbb');
}
</script>
<script id="customScript">
</script>如何操作控件的属性、订阅控件的事件
获取、修改控件的值
控件的类型不同获得的值类型也不同，详见表单控件API
// 获取、设置文本的值，txtName是控件的key
var name = this.text1.value;
this.text1.value = 'a';
// 设置数值的值
this.number1.value = 1;
// 设置日期的值
this.date1.value = new Date(2019);
// 设置选人控件的值
this.userSelect1.value = [{
type: 1, //1部门，3人员
name: 'name1',
imgUrl: '//www.baidu.com/img1.png',
id: 'id1',
//departmentId : 'departmentId' 配置了选人控件属于、包含表达式时必需,
//departments : [] 配置了选人控件属于、包含表达式时必需
}];
// 关联表单
this.relevanceForm1.value = {
id: 'bizObjectId',
name: '数据摘要'
};
// 复选框
this.checkbox1.value = ['a','b'];监听控件的值变化事件
// txtName是控件的key，控件的类型不同获得的值类型也不同，详见表单控件API
this.txtName.valueChange.subscribe(function(change){
//最新值
console.log(change.value);
//旧值
console.log(change.oldValue);
});
// 订阅属性变化
this.txtName.propertryChange.subscribe(function(change){
change.name //属性名称：display、required等等
change.value //最新值
change.oldValue //旧值
});控制控件的显示与隐藏
// 隐藏 this.txtName.display = false; // 显示 this.txtName.display = true;
设置控件的编辑状态
// 编辑 this.txtName.edit = true; // 只读 this.txtName.edit = false;
获取、设置下拉框、单选、复选的选项
//设置 this.dropdown1.items = ['a','b']; //获取 var items = this.dropdown1.items;
子表赋值
//整表赋值
this.sheet1.value = [{
text1: 'a',
text2: 'b'
},{
text1: 'a',
text2: 'b'
}];
//整行赋值
this.sheet1.rows[0].value = {
text1: 'a',
text2: 'b'
};
//单元格赋值，第1行第1列
this.sheet1.getCell(0, 0).value = 'a';
//删除第一行
this.sheet1.removeRow(0);子表事件订阅
//订阅第1行的行值变化
this.sheet1.getRowValueChange(0).subscribe(function(change){});
//订阅整列的列值变化
const subject = this.sheet1.getColumnValueChange('text1');
if(subject){
subject.subscribe(function(change){});
}
//订阅子表的行变化
this.sheet1.rowChange.subscribe(function(change){
if(change.type === 'insert'){ //新增行
}else if(change.type === 'insertMulti'){ //批量新增行
}else if(change.type === 'remove'){ //删除行
}else if(change.type === 'removeMulti'){ //批量删除行
}
})-
有用（6）
-
没有用（0）
