关联对象列表页JS插件

和从对象列表JS插件用法一致。

关联对象列表页JS插件包含以下扩展场景：

• 控制关联对象列表页渲染流程
• 修改字段展示

该组件只会出现在详情页的子组件，所以相关子组件插件的注册请移步详情页插件。

控制关联对象列表页渲染流程

    export default {
        componentPlugns(context) {
            return {
                'relatedlist': {
                    beforeInitTable(options) {
                        // todo what you want
                        return options;
                    }
                }
            }
        }
    }

修改字段展示

    let
    export default {
        componentPlugns(context) {
            return {
                'relatedlist': {
                    entry(context, field) {
                        return field.name === 'name' // 只考虑改变主属性的渲染
                    },
                    render(context, field, value) {
                        if (field.api_name === 'name') {
                            return `test: ${value}`
                        }
                    }
                }
            }
        }
    }

控制关联对象列表页渲染流程

beforeFetch()

参数：

• context: Object：字段的上下文环境
• param: Object：调用关联对象列表接口传递的参数

返回：

该方法需返回接口请求参数。

用法：

beforeFetch发生在接口之前。

{
    beforeFetch: function(context, param) {
        // todo what you want
        param.aaa = 'test'; //追加请求数据
        return param;
    }
}

beforeInitTable()

参数：

• context: Object：字段的上下文环境
• options: Object：关联对象列表组件初始化依赖的 属性

返回：

该方法需返回列表初始化依赖的属性数据

用法：

beforeInitTable发生在接口之前。

{
    beforeInitTable: function(context, options) {
        options.scrollLoad = false; //关闭水平方向的滚动加载
        options.scrollLoadY = false; //关闭垂直方向的滚动加载
        return options;
    }
}

修改字段展示

entry()

参数：

• context: Object：字段的上下文环境
• field: Object：字段描述信息

用法：

入口方法，指使插件适用在哪些字段上。

render()

参数：

• context: Object：字段的上下文环境
• field: Object：字段描述信息
• value: *：字段的值

返回：

需要返回一个DOM对象或者DOM字符串。

用法：

入口方法，指使插件适用在哪些字段上。

简单示例

let widgets = {};
{

    entry(context, field) {
        return field.api_name === 'name' || field.api_name === 'owner'
    },
    
    render(context, field, value, data) {
        if (field.api_name === 'name') {
            return `<div>hello fxiaoke</div>`; // 返回DOM字符串
        }else if(field.api_name === 'owner') {
            const key = `${data._id}-${field.api_name}`;
            let vm = widgets[key];
            if (vm) {
                vm.$destroy();
            }
            vm = widgets[key] = new Vue({
                render: h => h('div', {
                    on: {
                        click(e) {
                            e.stopPropagation(); //可以防止点击当前字段后打开详情页
                        }
                    }
                }, [
                    value,
                    '测试'
                ])
            }).$mount();
            return vm.$el; //返回DOM对象
        }
    },

    beforeDestroy() {
        Object.keys(widgets).forEach(key => {
            widgets[key].$destroy();
        })
        widgets = null;
    }

}

注意：如果使用vue组件，请在 beforeDestroy 中和每一次 render 时进行 组件销毁，避免不必要的内存泄漏

context

组件级别context具备详情页context中所有的 API。除此之外，还提供了下列方法：

通用API

getCompInfo()

返回：

• compInfo: Object：组件的描述信息
  • api_name: String：组件的apiName
  • header: String：组件标题
  • type: String：组件类型
  • ... 除此之外，不同的组件具有各自特殊的信息（可以打印到控制台来查看）

用法：

该方法返回当前组件的描述信息。

const compInfo = context.getCompInfo();
console.log(compInfo.api_name);
console.log(compInfo.type);

getObjectApiName()

返回：

• objectApiName: String：获取当前主对象的apiName

用法：

该方法获取当前主对象的apiName。

const objectApiName = context.getObjectApiName();
console.log(objectApiName);

getObjectDataId()

返回：

• objectDataId: String：获取当前主对象的数据id

用法：

该方法获取当前主对象的数据id。

const objectDataId = context.getObjectDataId();
console.log(objectDataId);

表格组件属性

参数	说明	类型	可选值	默认值
maxHeight	最大高度限制	number	—	—
searchTip	搜索输入框的提示信息	string	—	—
columns	列配置	array	—	—
colMinWidth	最小列宽	number	—	—
scrollLoad	开启X轴滚动加载	boolean	—	false
scrollLoadY	开启Y轴滚动加载	boolean	—	false
noDataTip	无数据提示	string	—	-
initComplete	表格渲染完成函数	function	—	-
showWaterMask	是否显示水印	boolean	—	false
forceTrWrap	强制换行	boolean	—	true

columnItem

参数	说明	类型	可选值	默认值
api_name	字段apiName	string	—	—
type	字段类型	string	—	—
render	字段渲染函数	function	—	—
width	列宽度	string	—	—
title	列表头名称	string	—	—
fixed	是否固定	boolean	—	—
isFilter	是否支持筛选	boolean	—	false
isOrderBy	是否支持排序	boolean	—	true

常见示例

修改对象列表配置

表格增加固定列，同时修改列宽度，我们可以参考以下示例：

export default {
    // 注册关联对象列表插件
	componentPlugns(context) {
		let plugins = {};
        // 找到所有关联对象列表组件，并进行插件赋值
		context.getComponentsByType('relatedlist').forEach(item => {
			plugins[item.api_name] = this.subPlugin
		})
		return plugins;
	},
    // 关联对象列表插件内容
	subPlugin: {
        // 修改列表组件的配置，关闭滚动加载和打开换行。
		beforeInitTable(context, options) {
			options.columns.forEach(col => {
                if (col.api_name === 'name' || col.api_name === 'owner') {
                    col.fixed = true;
                    col.width = 180;
                }
            })
			return options;
		},
	}
}