说明:本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配(如使用功能不一致,或多个宏代码冲突等),需根据实际需求开发代码。
需求一:
在仪表盘中使用参数或筛选器时,实现限制用户能选择筛选器值的数量,比如只允许选择两个,超过两个弹窗提示。
生效范围:
参数下拉多选、筛选器下拉多选、参数下拉树多选
效果:
1、勾选<=2个时,正常筛选;
2、勾选>3个时,勾选完了会收起下拉备选项面板,收起完了之后会弹出提示框:“参数选择超过2个”,不控制数据刷新。
代码示例:
function main(page: IPage, portlet: IFilterPortlet) { // 下拉组件控件类型 let config: any = [{ type: 'PARAM_SELECT', multi: '.__DashboardFilter_multipleSelect_input' }, { type: 'FILTER_SELECT', multi: '.__DashboardFilter_multipleSelect_input' }, { type: 'PARAM_TREE', multi: '.param-tree-view-wrapper' }]; /** 最多选择数量 */ const MAX_NUM = 2; let conf = config.find((el: any) => el.type === portlet.getType()); if (!conf) return; /** 当前组件的样式选择器 */ let portletSelector = `div.db-portlet-ui[portletid="${portlet.getId()}"]`; /** 下拉框dom */ let dom = document.querySelector(`${portletSelector} ${conf.multi}`); /** 是否多选组件 */ let isMultiSelect = !!dom; if (!isMultiSelect) return; // 选择值之后做提示 portlet.setFilterValueChangeHandler(function (value: any) { if (value) { let isArrayValueOut = Array.isArray(value) && value.length > MAX_NUM; let isObjectValueOut = value.value && value.value.length > MAX_NUM; if (isArrayValueOut || isObjectValueOut) { alert(`参数选择超过${MAX_NUM}个`) } } return value; }) }
需求二:
在仪表盘中使用筛选器时,实现筛选器必选
生效范围:
日期、下单单选、下拉多选筛选器、下拉树参数
效果:
去除仪表盘筛选器删除图标,实现筛选器控件必选
原始效果:筛选器中已选择的值可以通过“x”删除已选择的数据
实现效果:
代码示例:
function main(page: IPage) { const selector = ` .filter-wrapper .el-icon-close, .filter-wrapper .el-icon-circle-close, .param-tree-view-wrapper .el-icon-circle-close, .param-tree-view-wrapper .el-icon-close ` page.appendCss(selector, { display: 'none !important' }) }