说明：本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配（如使用功能不一致，或多个宏代码冲突等），需根据实际需求开发代码。
需求一：
在仪表盘中使用参数或筛选器时，实现限制用户能选择筛选器值的数量，比如只允许选择两个，超过两个弹窗提示。
生效范围：
参数下拉多选、筛选器下拉多选、参数下拉树多选
效果：
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' })
} |
...
