# 列表页JS插件
列表页JS插件包含以下扩展场景:
# 控制列表页流程
该类需求需要通过以下API来实现:
# beforeParse()
参数:
context: Object
:字段的上下文环境data: Object
:列表页面数据
返回:
该方法需返回列表页面数据。
用法:
beforeParse发生在接口成功调用后,解析响应数据之前。
示例 1、通过自定义函数校验部分用户是否隐藏列表页里的图表
export default {
beforeParse: function(context, data) {
return new Promise(resolve => {
FxUI.userDefine.call_controller('func_verification__c', [
{
name: 'user_id',
type: 'String',
value: id
}
]).then(res => {
if(!res.isShowList) {
data.layout.hidden_components.push('bi_card')
}
resolve(data)
})
});
}
}
# beforeRender()
参数:
context: Object
:字段的上下文环境data: Object
:解析后的布局页面数据、描述、组件及布局信息
返回:
该方法需返回布局页面数据。
用法:
beforeRender发生在解析处理布局数据后,渲染布局页面前。
export default {
beforeRender: function(context, data) {
return new Promise(resolve => {
resolve(data);
});
}
}
# 修改列表页内子组件的流程
声明格式:
- 通过componentPlugns方法注册组件插件
export default {
componentPlugns(context) {
return {
[组件api_name或者组件类型]: {
hookName(context, ...args) {
//todo what you want
}
}
}
}
}
例子:
- 通过componentPlugns方法注册组件插件
export default {
componentPlugns(context) {
return {
'list_component': {
beforeFetch(context, params) {
// 修改params中的数据
return params;
}
}
}
}
}
- 直接注册组件插件
export default {
'list_component': {
beforeInitTable(context, options) {
// 修改options中的数据
return options;
}
}
}
- 通过context获取所有组件,再根据具体的业务需求来进行注册。
export default {
componentPlugns(context) {
let plugins = {};
const components = context.getComponentsByType('list_component');
components.forEach(item => {
if (item.ref_object_api_name === 'object_p541G__c') { //只注册某个对象列表
plugins[item.api_name] = {
beforeFetch(context, params) {
return params;
}
}
}
})
}
}
注意:当组件类型和组件api_name定位到同一个组件时,只运行api_name定义的hook方法。
# 修改字段展示
export default {
componentPlugns(context) {
let plugins = {};
plugins[context.getComponentsByType('list_component').api_name] = this.listComponentPlugin
return plugins;
},
listComponentPlugin: {
// 字段判断
entry: function(context, field) {
return field.api_name === 'name' || field.api_name === 'owner'
},
// 字段渲染
render: function(context, field, value, wrapper) {
if (field.api_name === 'name') {
return `<div>name字段:${value}</div>`;
}else if(field.api_name === 'owner') {
const vm = new Vue({
render: h => h('div', [
value,
'测试'
])
}).$mount(wrapper);
return vm.$el;
}
}
},
}
返回:
describe: Object
:对象的描述信息api_name: String
:对象的apiNamedisplay_name: String
:对象的名称fields: Object
:对象的所有字段_id: Object
:数据的id
用法:
该方法返回当前数据的描述信息。
const describe = context.getDescribe();
console.log(describe.api_name);
console.log(describe.fields);
# getComponents()
返回:
components: Array
:列表页面所有组件
用法:
该方法返回当前列表页所有组件。
const comps = context.getComponents();
# getLayout()
返回:
data: Object
:当前数据的信息
用法:
该方法返回当前数据的具体数据值。
const data = context.getLayout();
console.log(data);
# getComponentsByType(type)
参数:
type: String
: 组件的类型
返回:
components: Array
:组件列表
用法:
该方法返回当前数据所在页面所有同类型的组件信息。
const components = context.getComponentsByType('list_component');
# getComponentByApiName(apiname)
参数:
apiname: String
: 组件的apiname
返回:
component: Object
:组件信息
用法:
该方法返回当前数据所在页面的组件信息。(下面罗列了几个常用的组件)
const component = context.getComponentByApiName('list_component');
# 修改字段展示
该类需求需要通过以下API来实现:
# entry()
参数:
context: Object
:字段的上下文环境field: Object
:字段描述信息
用法:
入口方法,指使插件适用在哪些字段上。
# render()
参数:
context: Object
:字段的上下文环境field: Object
:字段描述信息value: *
:字段的值wrapper: Object
:渲染的容器DOM
返回:
需要return一个dom节点。
用法:
入口方法,指使插件适用在哪些字段上。
# getDescribe()
返回:
describe: Object
:对象的描述信息api_name: String
:对象的apiNamedisplay_name: String
:对象的名称fields: Object
:对象的所有字段
用法:
该方法返回当前对象的对象描述信息。
const describe = context.getDescribe();
console.log(describe.api_name);
console.log(describe.fields);
# getDataByIndex()
参数:
index: Number
:列表的索引
返回:
data: Object
:数据信息
用法:
该方法返回索引为index的数据。
const dataOfIndex0 = context.getDataByIndex(0);
const dataOfIndex1 = context.getDataByIndex(1);
# getDataById()
参数:
dataId: String
:数据id
返回:
data: Object
:数据信息
用法:
该方法返回某个固定id的数据。
const data = context.getDataById('613e08151b737c00011e273b');