# 列表页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');