Association object list page JS plugin

It is consistent with the usage of the JS plugin from the object list.

The Association Object List Page JS plugin contains the following extended scenarios:

• Controls the associated object list page rendering process
• Modify the field display

This component will only appear in the subcomponents of the detail page, so please move to the details page plugin for registration of related subcomponent plugins.

Controls the associated object list page rendering process

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

Modify the field display

   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}`
                       }
                   }
               }
           }
       }
   }

Controls the associated object list page rendering process

beforeFetch()

Parameter:

• context: Object : The context of the field
• param: Object : Calls the parameters passed by the associated object list interface

Return:

This method returns the interface request parameters.

Usage:

beforeFetch occurs before the interface.

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

beforeInitTable()

Parameter:

• context: Object : The context of the field
• options: Object : The Association Object List component initializes dependent properties

Return:

The method needs to return the property data that the list initialization depends on

Usage:

beforeInitTable occurs before the interface.

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

Modify the field display

entry()

Parameter:

• context: Object : The context of the field
• field: Object : Field description information

Usage:

The entry method, which indicates which fields the plug-in applies to.

render()

Parameter:

• context: Object : The context of the field
• field: Object : Field description information
• value: * : The value of the field

Return:

You need to return a DOM object or DOM string.

Usage:

The entry method, which indicates which fields the plug-in applies to.

Simple example

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;
   }

}

Note: If you use a VUE component, destroy the component in and every time to avoid unnecessary memory leaks beforeDestroy render

context

The component-level context has all the APIs in the detail page context. In addition to this, the following methods are available:

Common API

getCompInfo()

Return:

• compInfo: Object : Description information for the component
  • api_name: String : The component's apiName
  • header: String : Component title
  • type: String : Component type
  • ... In addition, different components have their own special information (can be printed to the console to view)

Usage:

The method returns a description of the current component.

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

getObjectApiName()

Return:

• objectApiName: String : Gets the apiName of the current primary object

Usage:

This method gets the apiName of the current primary object.

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

getObjectDataId()

Return:

• objectDataId: String : Gets the data ID of the current primary object

Usage:

This method gets the data ID of the current primary object.

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

Tabular component properties

parameter	illustrate	type	Optional value	Default value
maxHeight	Maximum height limit	number	—	—
searchTip	Search for prompts in the input box	string	—	—
columns	Column configuration	array	—	—
colMinWidth	Minimum column width	number	—	—
scrollLoad	Turn on X-axis scroll loading	boolean	—	false
scrollLoadY	Turn on Y-axis scroll loading	boolean	—	false
noDataTip	No data tips	string	—	-
initComplete	Table rendering completion function	function	—	-
showWaterMask	Whether to display a watermark	boolean	—	false
forceTrWrap	Force line breaks	boolean	—	true

columnItem

parameter	illustrate	type	Optional value	Default value
api_name	The field apiName	string	—	—
type	The field type	string	—	—
render	Field rendering functions	function	—	—
width	Column width	string	—	—
title	The column header name	string	—	—
fixed	Whether it is fixed	boolean	—	—
isFilter	Whether filtering is supported	boolean	—	false
isOrderBy	Whether sorting is supported	boolean	—	true

Common examples

Modify the object list configuration

The table adds fixed columns and modifies the column width, we can refer to the following example:

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;
   	},
   }
}