# 对象列表页JS插件
对象列表页JS插件允许开发人员定制对象表格的相关功能。
# 简单示例
export default class Plugin {
apply() {
return [
{
event: "list.render.before",
functional: this.renderBefore.bind(this)
}
];
}
renderBefore() {
return Promise.resolve({
columnsExtendConfig: {
filterColumns: ['name', 'owner'] // 过滤主属性和负责人字段
}
})
}
}
说明：
1、apply 用来声明钩子。例如此示例，插件声明了一个钩子，该钩子在列表页渲染之前调用。
2、renderBefore 是钩子的具体实现。例如此示例，钩子定义了表格渲染依赖的配置项：隐藏name和owner两个字段。
注意： 1、钩子需返回promise对象，意味着支持异步逻辑。
# 钩子
"钩子"（Hook）通常是指一种允许你在特定事件或状态发生时插入自定义代码的机制。
# list.render.before
该钩子在渲染对象表格之前调用
表格属性：
{
// 列扩展配置
columnsExtendConfig: {
// 过滤表格展示的字段，同时影响表格设置和筛选
filterColumns: ['name', ...],
render: {
name: nameRender, //name字段渲染函数
owner: ownerRender, //负责人渲染函数
...
}
},
// 图片字段扩展配置
imageExtendConfig: {
// 扩展图片字段：imageFieldApiName 是图片字段的apiName
[imageFieldApiName]: {
previewWidth: 400,
previewHeight: 400
}
},
// 筛选扩展配置
filterExtendConfig: {
// 自定义外露的字段筛选：fieldApiName 是字段的apiName
[fieldApiName]: {
onlyOr: [1, ...], // 需保留的操作符
components: {
1: FilterComp // 不同操作符对应的筛选字段
},
filterOptions(options) { // 此处过滤单选字段/多选字段类型的选项
return options.filter(
(a) => ["91jGaF8hn", "A5137BeV2"].indexOf(a.value) > -1
);
}
}
},
// 场景扩展配置
termExtendConfig: {
default: 'aaa', // 默认展示的场景，需要传筛选场景id
retain: ['aaa', ...] // 需保留的场景，需要传筛选场景id
}
}
# 上下文
上下文（Context）通常是指特定事件或状态发生时提供的参数（特定和通用）和API（特定和通用）的集合。
# entryType
返回当前页面是对象列表页还是自定义菜单项关联的对象列表页（list|custommenu）
# layoutApiName
返回自定义菜单项的唯一标识
# objectApiName
返回对象的apiName
# 简单示例
# 自定义外露筛选器
正常情况下，字段按照类型有不同的操作符和筛选交互。假设，我们希望 主属性 只能按照 等于 进行筛选，并且采用 单选框 的交互形式，我们可以按照如下方式进行扩展：
<template>
<fx-input v-model="value">
</template>
<script>
export default {
data(){
return {
value: ''
}
}
}
</script>
import SelectFieldOptions from "./selectfield.vue";
const SelectField = Vue.extend(SelectFieldOptions);
class FilterComp {
constructor(options){
this.options = options;
this.vm = new SelectField({});
}
// 表格渲染筛选时会调用此方法
render(){
this.vm.$mount();
this.options.el.get(0).appendChild(this.vm.$el);
}
// 表格设置默认筛选值是会调用此方法
setValue(value) {
this.vm.value = value;
}
// 表格进行筛选时会调用此方法
getValue() {
return this.vm.value;
}
// 表格进行清除筛选时会调用此方法
clean() {
this.vm.value = '';
}
// 表格进行销毁时会调用此方法
destroy() {
if (this.vm) {
this.vm.destroy();
this.vm = null;
}
}
}
export default class Plugin {
apply() {
return [
{
event: "list.render.before",
functional: this.renderBefore.bind(this)
}
];
}
renderBefore() {
return Promise.resolve({
filterExtendConfig: {
name: {
onlyOr: [1], // 需保留的操作符
components: {
1: FilterComp // 定义哪种操作符使用哪个组件进行展示和交互
}
}
},
})
}
}
# 自定义列表字段渲染
export default class Plugin {
constructor(){
this.widgets = {};
},
apply() {
return [
{
event: "list.render.before",
functional: this.renderBefore.bind(this)
}
];
}
renderBefore() {
return Promise.resolve({
columnsExtendConfig: {
render: {
name: () => {
return 'Hello, Fxiaoke';
},
address: (value, type, data, format, index, field) => {
const vmId = `${data._id}_${field.api_name}`;
return FxUI.helper.generateHTMLStr(() => {
if (this.widgets[vmId]) {
this.widgets[vmId].$destroy();
this.widgets[vmId] = null;
}
var vm = new Vue({
render: h => h('div', 'Hello, Fxiaoke')
});
vm.$mount();
this.widgets[vmId] = vm;
return vm;
});
}
}
}
})
},
destroy() {
Object.keys(this.widgets).forEach(vmId => {
const vm = this.widgets[vmId];
if (vm) {
vm.$destroy();
}
});
this.widgets = {};
}
}