FxObjectList组件

用于展示业务对象的数据列表。

Attributes

参数	说明	类型	可选值	默认值
apiName	业务对象apiname(必填)	String	—	-
title	列表标题	String	—	当前对象名称
listUrl	列表页请求数据	String	—	系统接口
quickFilterFields	外露筛选的字段名单	Array	—	-
isShowSearch	是否显示搜索输入框	Boolean	—	-
isShowSceneFilter	是否显示场景筛选	Boolean	—	-
isShowFieldFilter	是否显示字段筛选	Boolean	—	-
isShowColumnSetting	是否显示表格列设置	Boolean	—	-
isShowMultiBtn	是否显示列表选数据	Boolean	—	-
beforeInitTable	钩子函数，发生在初始化列表之前	Function	—	-
beforeRender	钩子函数，发生在渲染列表数据之前	Function	—	-
beforeParse	钩子函数，发生在请求列表数据之前	Function	—	-
isShowObjectDetail	点击列时是否展示详情页	Boolean	—	false
batchBtns	批量操作按钮	Array	—

batchBtns

属性	说明	类型	可选值	默认值
text	按钮的名称	String	—	-
className	按钮的样式类名	String	—	-
attrs	按钮上自定义属性	String	—	-

简单使用

组件通过 FxUI.component.get('ObjectList') 获取。

<template>
    <object-list apiName="AccountObj"></object-list>
</template>
<script>
    export default {
		components: {
			ObjectList: FxUI.component.get('ObjectList')
		}
    }
</script>

效果展示：

组件扩展

为了满足企业定制化的需求，这里我们为开发者提供了一些扩展方式，能够快速开发出相应功能。

钩子

对象列表页在渲染前，都要经过一系列的过程--例如，初始化表格、请求表格设置项数据、解析表格设置项数据、请求列表数据、解析列表数据等。同时在这个过程中也会运行一些叫做钩子的函数，这给了开发人员在不同阶段添加自己的代码的机会。

<template>
    <object-list v-bind="options"></object-list>
</template>
<script>
	export default {
		components: {
			ObjectList: FxUI.component.get('ObjectList')
		},
		data() {
			return {
				options: {
                    apiName: "AccountObj",
                    /**
                     * @description 在初始化表格时调用，
                     * @param {Object} options 列表实例化需要的参数
                     * @return {Object} options  返回一个对象
                     */
                    beforeInitTable: (options) => {
                        // todo what you want
                    	return options;
                    },
                    /**
                     * @description 在请求列表数据时调用，
                     * @param {Object} params:  请求参数
                     * @return {Object} params 返回一个对象
                     */
                  	beforeFetch: (params) => {
                    	// todo what you want
                    	return params;
                    },
                    /**
                     * @description 在渲染列表数据时调用，
                     * @param {Object} rawData 原始数据
                     * @param {Object} data 解析后的数据
                     * @return { data: any[], totalCount: Number } 返回一个对象，包含 data 和 totalCount 两个属性。
                     */
                  	beforeRender(rawData, data) {
                      	// todo what you want
                    	return data;
                    }
                }
			}
		}
	}
</script>

组件插槽

组件插槽允许开发人员将某个组件插入到表格预定的区域。

<template>
    <object-list v-bind="options">
        <div slot="bottomTip">
            额外信息
        </div>
    </object-list>
</template>
<script>
    export default {
		components: {
			ObjectList: FxUI.component.get('ObjectList')
		}
    }
</script>

关于组件插槽的详细信息，请继续往后翻阅。

钩子

beforeInitTable

参数：

• options: Object
  • columns: Array： 表格的列配置
    • api_name: String： 字段apiName
    • render: Function： 字段的渲染函数
    • is_index: Boolean： 字段是否允许外露
  • 其他属性陆续开放中...

返回：

该方法需返回列表实例化需要的参数。

用法：

列表页初始化时调用，发生在调用接口之前。这里可以修改列表组件实例化时的属性。

export default {
    beforeInitTable(options) {
        // 处理 options
        options.columns.push({
            api_name: 'field_abc__c',
            render(data) {
                return '自定义字段显示';
            }
        });
        options.columns.push({
            api_name: 'xxx',
            render(data) {
                return '自定义操作按钮';
            }
        });
        return options;
    }
}

beforeFetch

参数：

预制接口请求的参数。

返回：

需要返回请求接口时需要传递的参数。

用法：

列表页调用接口时调用，发生在调用接口之前。这里可以修改调用接口的请求参数。

该钩子通常会配合 listUrl 来修改列表的数据源。

export default {
    beforeFetch(params) {
        // 处理 params
        return params;
    }
}

beforeParse

参数：

数据列表接口响应的数据。

返回：

返回固定的数据结构

• data: Object：
  • totalCount: Number：列表数据总数
  • data: Array：数据列表

用法：

列表页解析数据时调用，发生在解析数据之前。这里可以修改接口返回的所有数据，返回的结果将影响列表数据的渲染。

export default {
    beforeParse(res) {
        // 处理 res
        return {
            totalCount: 0,
            data: [{
                name: 'FxUI',
                field_1__c: 'FxUI',
                field_2__c: 'FxUI'
            }, ...]
        };
    }
}

插槽

bottomTip

能够在列表底部插入自定义的内容。