自定义视图

概述

自定义视图通过网站模块页面和组件两种方式渲染视图。在系统提供的视图不能满足要求时通过自定义视图可以通过编写代码的方式实现功能。 自定义的内容会被嵌入到视图展示区域，视图的数据获取，排序，筛选，表单展示还是由系统提供。

使用网站模块的页面渲染

使用这种渲染方式时，是在页面视图展示区域嵌入一个iframe元素，通过网站服务与平台进行数据交互。并支持自定义视图服务。视图内可以通过自定义视图服务获取系统查询的列表数据。

可监听的事件

• record-list-updated 当数据表刷新时触发

示例

我们通过设置一个不显示筛选条件、隐藏工具栏的自定义视图，来接管列表页面的渲染。具体效果如下

1. 下载自定义视图源代码，将打包后的dist目录上传至网站与资源托管模块
2. 配置自定义视图，将上传的页面配置于页面地址

关键代码说明

App.vue 文件中

1. 通过customViewService.getRecordList方法获取自定义视图中，视图返回的列表数据。
2. 通过监听record-list-updated事件，监听用户的刷新行为，从而刷新自定义视图的数据。
3. 通过customViewService.changePagination方法，去改变自定义视图的分页信息

<style lang="scss" scoped>
#app {
    position: relative;©
    height: 100%;
    width: 100%;
    overflow: auto;

    ::v-deep {
        .el-container {
            position: relative;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        .el-main {
            background-color: #f6f7f9;
        }

    }
}
</style>

<template>
    <div id="app">
        <el-container>
            <el-main class="pd-0">
                <component
                    :is="viewComponent"
                    :data-list="dataList"
                    :data-count="dataCount"
                    :table-info="tableInfo"
                    @type-change="onTypeChange"
                    @pagination-change="onPaginationChange"
                    @show-record="onShowRecord"
                    @selection-change="onSelectionChange"
                    @reload="reload"
                />
            </el-main>
        </el-container>
    </div>
</template>

<script>
import TableView from '@/components/TableView.vue';
import CardView from '@/components/CardView.vue';

export default {
    name: 'App',
    components: {
        TableView,
        CardView
    },
    computed: {
        viewComponent() {
            return `${this.viewType}View`;
        }
    },
    data() {
        return {
            viewType: 'Table',
            dataList: [],
            selectionIds: [],
            dataCount: 0,
            tableInfo: null
        };
    },
    // 组件创建的时候等待RPC通道建立
    created() { 
        eventService.onceEvent('rpc-ready', () => { 
            this.onRpcReady(); 
        }); 
    }, 
    mounted() {
        this.loadData();
    },
    methods: {
        onRpcReady() {
            eventService.onEvent('record-list-updated', (data) => {
                this.loadData();
            });
            customViewService.getTableInfo().then(info => {
                this.tableInfo = info;
                this.reload();
            });
        },
        reload() {
            customViewService.reload();
        },
        refresh() {
            customViewService.refresh();
        },
        loadData() {
            this.clearSelection(); 
            // 获取自定义视图中的列表数据
            customViewService.getRecordList().then(list => { 
                this.dataList = list; 
            }); 
            // 获取自定义视图中的列表数据量
            customViewService.getRecordCount().then(count => { 
                this.dataCount = +count > 0 ? +count : 0; 
            }); 
        },
        onShowRecord(recordId) {
            customViewService.openRecord(recordId);
        },
        onTypeChange(type) {
            this.viewType = type;
            this.clearSelection();
        },
        onPaginationChange(pagination) {
            this.clearSelection();
            // 改变自定义视图的页码
            customViewService.changePagination(pagination); 
        },
        clearSelection() {
            this.selectionIds = [];
            customViewService.setSelectedRecordIdList([]);
        },
        onSelectionChange(ids) {
            this.selectionIds = ids;
            customViewService.setSelectedRecordIdList(this.selectionIds);
        }
    }
};
</script>

使用组件渲染

这种渲染方式，支持嵌入一个组件设计器开发的组件，并支持通过组件编辑器的事件和参数与自定义视图进行数据交互。具体示例可参考自定义视图使用组件渲染