怎么让日期组件不可编辑

在宏管理里面怎么让日期主键不可编辑，比如我有个下拉框，选择某个值的时候让日期组件不可编辑

这里有个《根据参数值动态隐藏另一个参数》
https://wiki.smartbi.com.cn/page ... mp;pageId=111892108

如果是回写不给编辑单元格的话，那写宏判断下：https://wiki.smartbi.com.cn/page ... amp;pageId=51943098

最好的实现方式就是沙发提供的，

因为不隐藏的话，那我在选择那个选项之前先改日期不就行了。

这个显示、隐藏是通过感官上“提醒”用户 这个选项不允许改日期，但这又触发另一个问题 就是我先选个能改日期的 再选不能改的不就行了

 

所以这种有下面几种方式规避

1.显示但不允许修改的方式。当选择某个选项之后，日期被重置为某个默认的值，且不允许修改。

2.隐藏但允许修改的方式。当选择某个选项之后，日期组件隐藏，同时回写规则中不回写 或回写某个默认的值。

总体上来说隐藏在这个平台中是能实现的

            //禁用整个下拉框

            portlet.appendCss('.FILTER_SELECT', {

                'pointer-events': 'none', /* 禁用鼠标事件 */

                'opacity': '0.5' /* 设置透明度为 0.5，使按钮看起来被禁用 */

            })

            //禁用下拉按钮

            portlet.appendCss('.el-input__suffix-inner', {

                'pointer-events': 'none',

            })

官方文档中没有直接禁用portlet组件的函数;

思路：

1.修改css， 让其不可用，官方文档中没找到css代码。楼上的朋友找到的下拉框的禁用，我试了试，对日期组件无效，代码如下：（如果想要禁用日期组件，需要对应的css代码，可以问一下官方）

function main(page: IPage, portlet: IFilterPortlet) {

    let otherportlet = page.getPortletsByTitle('筛选_1')[0];

portlet.setFilterValueChangeHandler(function (value: Array) {

    alert(value[0]);

    if (value[0]=='2017') {

                       //禁用整个下拉框

        otherportlet.appendCss('.el-input__suffix-inner', {

            'pointer-events': 'none',

        });

}

    return value;

 

})

}

注意：append css之后，还需要remove.

 

2.通过修改筛选器的选值范围来实现不可修改，以达到禁用的效果。

代码如下：

 

 

 

function main(page: IPage, portlet: IFilterPortlet) {

    let otherportlet = page.getPortletsByTitle('筛选_2')[0]; //获取另一个筛选器

    portlet.setFilterValueChangeHandler(function (value: Array) {

        //这个是修改日期时使用的函数

        debugger;

        let value_before_change  = portlet.getValue(); //获取当前已经选中的值

        let other_value = otherportlet.getValue()[0]; //获取另一个筛选器的值

        if (other_value == '2017') {  //满足条件时，设置选中值为之前已经选中的值。

            alert("当前不可修改日期")

            value[0] = value_before_change[0]

            //value[0] = '2017-01-01'  或者其他固定值

        };

        return value

    });

}

方法2效果图：

1.当下拉框不是2017时，日期组件可修改值，

 

2.当下拉框是2017是，可选但不可修改

这个宏是写在下拉框的，用来禁用日期；用这个就可以了，效果是当筛选_2 选中2017时，筛选_1（日期控件）变为不可点击。

（附件视频是效果：视频开始是演示刷新了两次，初始值为2017，则把日期控件禁用。）

 

function main(page: IPage, portlet: IFilterPortlet) {

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>开始

    //这段代码，是渲染页面时，根据下拉框的值，禁用日期组件

    let otherportlet = page.getPortletsByTitle('筛选_1')[0]; 

    current_value = portlet.getValue();

    if (current_value[0] == '2017') {

            //禁用filter-wrapper

            otherportlet.appendCss('.filter-wrapper__row', {

                'pointer-events': 'none',

                'opacity': '0.5'

            });

            //禁用input__suffix

            otherportlet.appendCss('.el-input__suffix-inner', {

                'pointer-events': 'none',

            });

    };

   //<<<<<<<<<<<<<<<<<<<<<<<<<结束

    //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>开始

    //这里是在选中下拉参数时，控制日期组件是否可用

    portlet.setFilterValueChangeHandler(function (value: Array) {

        if (value[0] == '2017') {//添加禁用日期组件的CSS代码

            //禁用filter-wrapper

            otherportlet.appendCss('.filter-wrapper__row', {

                'pointer-events': 'none',

                'opacity': '0.5'

            });

            //禁用input__suffix

            otherportlet.appendCss('.el-input__suffix-inner', {

                'pointer-events': 'none',

            });

        }

        else { //移除禁用日期组件的CSS代码

            otherportlet.removeCss('.filter-wrapper__row', {

                'pointer-events': 'none',

                'opacity': '0.5'

            });

            otherportlet.removeCss('.el-input__suffix-inner', {

                'pointer-events': 'none',

            });

        };

        return value;

    })

       //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<结束

}20241129_161432.mp4 (383.21 K)