[泛微OA]Ecology9 选择框控制主表及明细表案例

Chaos

利用原生JS 配合泛微 WfForm 完成表单字段的隐藏显示及必填


jQuery().ready(function(){
//选择框field
const selectdField = 'field52294';

//设置福利及其他类型字段不可见
//根据ID获取对应的element
//需要隐藏的字段设置对应的class
const fl_elements =  document.getElementsByClassName('fl');
const qt_elements =  document.getElementsByClassName('qt');

//相应字段及明细表
const fl_fields = ['field52295','field52311','field52297'];

//监听字段改变
//0 办公用品 1 生产易耗品 2 福利
WfForm.bindFieldChangeEvent(selectdField, function(obj,id,value){
    switch(value){
        case '0':
            setQtVisible();
            break;
        case '1':
            setQtVisible();
            break;
        case '2':
            setFlVisible();
            break;
    }
});

const setFieldsHidden = (e) => {
    e.forEach(function(field){
        WfForm.changeFieldAttr("field110", 4); 
    })
}

const setFieldsVisible = (e) =>{
    e.forEach(function(field){
        WfForm.changeFieldAttr("field110", 3); 
    })
}

//设置为隐藏
const setElementHidden = (e,index) => {
    for(let i = 0 ; i< e.length ; i++){
        e[i].style.display = 'none';
    }
    WfForm.delDetailRow(`detail_${index}`, "all"); 
}

//设置为可见
const setElementVisible = (e,index) => {
    for(let i = 0 ; i< e.length ; i++){
        e[i].style.display = '';
    }
    WfForm.addDetailRow(`detail_${index}`, "all"); 
}

const setFlVisible = () => {
    setElementHidden(qt_elements,2);
    setElementVisible(fl_elements,1);
    setFieldsVisible(fl_fields);
}

const setQtVisible = () => {
    setElementVisible(qt_elements,2);
    setElementHidden(fl_elements,1);
    setFieldsHidden(fl_fields);
}

})