FxDataRange组件

用于数据图表的数据筛选器。

Attributes

参数	说明	类型	可选值	默认值
filterList	默认回显的数据筛选条件	Array	—	-

简单使用

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

使用：

• 筛选弹框默认隐藏，需要主动调用组件show方法展示筛选条件弹框并传入默认回显的筛选条件

代码示例：

<template>
    <div id="graphWrap">
        <BIDataRange 
            ref="dataRange"
            :filterList="filterList"
            @onDataRangeChange="onDataRangeChange"
        ></BIDataRange>
        <lwt-table 
            class="tableWrap"
            v-loading="loading"
            fx-loading-text="拼命加载中"
            fx-loading-spinner="el-icon-loading"
            ref="BITable"
            :key="id"
            :table-height="tableHeight"
            :table-width="tableWidth"
            @onLwtMounted="lwtMounted"
            :on-after-render="afterRender"
        ></lwt-table>
    </div>
</template>
<script>
export default {
    components: {
        BIDataRange: FxUI.component.get('BIDataRange'),
        LwtTable: FxUI.component.get('BILwtTable')
    },
    data() {
        return {
            id: 'BI_lwt_1658322497512',
            filterList: [],
            queryParams: {},
            tableHeight: 0,
            tableWidth: 0,
            tableHeadFieldList: [],
            loading: false,
        }
    },
    methods: {
        showDataRangeDialog() {
            this.$refs.dataRange.getFilterResult(this.id).then(res => {
                if (res.Result.StatusCode == 0) {
                    this.filterList = res.Value.filterLists;
					// 弹框默认隐藏，需要主动调用展示筛选条件弹框
                    this.$refs.dataRange.$refs.dataRange.show()
                }
            })
        },
        lwtMounted() {
            this.loading = true;
            this.queryParams = {
                id: this.id,
                refresh: 0,
                filterList: [],
                pageSize: 20,
                pageNumber: 1,
            };
            this.$refs.BITable.$refs.lwtCom && this.$refs.BITable.$refs.lwtCom.lwtQuery.setQueryParams(this.queryParams);
            this.$refs.BITable.$refs.lwtCom && this.$refs.BITable.$refs.lwtCom.queryData();
        },
        onDataRangeChange(filterList) {
            // filterList 修改后的数据范围
            console.log(filterList);
            this.loading = true;
            this.queryParams = {
                id: this.id,
                refresh: 0,
                filterList: filterList[0].filterLists,
                pageSize: 20,
                pageNumber: 1,
            };
            console.log('onDataRangeChange', this.queryParams)
            this.$refs.BITable.$refs.lwtCom && this.$refs.BITable.$refs.lwtCom.lwtQuery.setQueryParams(this.queryParams);
            this.$refs.BITable.$refs.lwtCom && this.$refs.BITable.$refs.lwtCom.queryData();
        },
        afterRender() {
            console.log('加载完成')
            this.loading = false
        }
    },
}
</script>

组件扩展

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

钩子

onDataRangeChange

数据筛选条件改变时触发。

钩子接受一个参数：

• filterList: Array：改变后的数据筛选条件

组件插槽

组件插槽的机制允许开发人员将某个组件或某个类型的组件替换成自己开发的组件，从而修改该字段的交互形式。