表单设计 只读是不是把所有设置的样式都除去了？

szhtest

如图，该工作流表单在流转的时候，除第一个环节外，其余环节都给下拉框设置了变灰不可选择




但是当流程结束后变为已办时，从已办打开：



我表单afterLoad事件的脚本为：

[JavaScript] 纯文本查看 复制代码

divs = this.form.app.node.getElementsByTagName('div')
for(var i = 0;i<divs.length;i++){
    divs[i].style.minHeight='15px'
}

// this.include("public_tool")
var activityName = this.workContext.getWork().activityName; // 当前流程环节名称
var moduleList = this.form.getApp().appForm.json.moduleList; // 获取所有组件
var _this=this

// 设置特定组件的状态(为了剔除“流程名”组件，不调用public_tool里的函数)
function setComponentReadonlyStatus(componentId, Status) {

        if (moduleList[componentId]) {
            moduleList[componentId].isReadonly = Status;

            if (!Status) {
                var element = document.id(componentId); 
                if(componentId.includes('radio')){
                    element.setStyles({
                        'background-color': '#f0f0f0',
                        'display':'inline-block'
                    })
                }
                else if(componentId == '流程名'){
                    //不需任何可填样式
                } 
                else{
                    element.setStyles({
                        'background-color': '#f0f0f0',
                    })
                }
            
            }

        }
}


// 根据流程环节设置组件的只读状态
function setComponentsBasedOnActivity(activity) {
    // 首先设置整个表单为只读
    _this.setFormReadonly();
    const array = ['活动环节3', '活动环节4']
    // 根据活动名称设置特定组件为可编辑
    if (activity === 'PMC') {
        // 设置组件为可编辑
        ['title','流程名','业务账套_radio','订单号','规格型号','数量','原交期','调整后交期','调整原因','发起人','发起人日期'].forEach(function(id) {
            setComponentReadonlyStatus(id, false);
        });

        if(_this.workContext.getTask() !== null){
            _this.data.发起人 = _this.session.user
            _this.data.发起人日期 = _this.getnowdate()
        }
      

    } else if (activity === '跟单') {

        ['流程名','供应商-跟单_radio','跟单意见','跟单经办人','跟单经办日期'].forEach(function(id) {
            setComponentReadonlyStatus(id, false);
        });

        _this.form.getField("流程名").node.disabled = true//使得流程名下拉框变灰不可选

        if(_this.workContext.getTask() !== null){
            _this.data.跟单经办人 = _this.session.user
            _this.data.跟单经办日期 = _this.getnowdate()
        }
    }
    else if (activity === '采购业务') {
        ['流程名','供应商-业务_radio','业务意见','业务经办人','业务经办日期'].forEach(function(id) {
            setComponentReadonlyStatus(id, false);
        });

        _this.form.getField("流程名").node.disabled = true//使得流程名下拉框变灰不可选

        if(_this.workContext.getTask() !== null){
             _this.data.业务经办人 = _this.session.user
            _this.data.业务经办日期 = _this.getnowdate()
        }
    }
    else if (activity === '采购意见（许世杰）') {
        ['流程名','许世杰审核_radio','采购意见','许世杰','许世杰经办日期'].forEach(function(id) {
            setComponentReadonlyStatus(id, false);
        });
        _this.form.getField("流程名").node.disabled = true//使得流程名下拉框变灰不可选

        if(_this.workContext.getTask() !== null){
             _this.data.许世杰 = _this.session.user
            _this.data.许世杰经办日期 = _this.getnowdate()
        }
    }
    else if (activity === '计划意见') {
        ['流程名','舒建明审核_radio','计划意见（舒建明）','舒建明','舒建明经办日期'].forEach(function(id) {
            setComponentReadonlyStatus(id, false);
        });
        _this.form.getField("流程名").node.disabled = true//使得流程名下拉框变灰不可选

        if(_this.workContext.getTask() !== null){
             _this.data.舒建明 = _this.session.user
            _this.data.舒建明经办日期 = _this.getnowdate()
        }
    }
    else if (activity === '部门意见') {
        ['流程名','蔡伟涛审核_radio','部门意见（蔡伟涛）','蔡伟涛','蔡伟涛经办日期'].forEach(function(id) {
            setComponentReadonlyStatus(id, false);
        });
        _this.form.getField("流程名").node.disabled = true//使得流程名下拉框变灰不可选

        if(_this.workContext.getTask() !== null){
             _this.data.蔡伟涛 = _this.session.user
            _this.data.蔡伟涛经办日期 = _this.getnowdate()
        }
    }
    else{
        ['流程名'].forEach(function(id) {
            setComponentReadonlyStatus(id, false);
        });
        _this.form.getField("流程名").node.disabled = true//使得流程名下拉框变灰不可选
    }

}

// 调用函数，传入当前活动名称
setComponentsBasedOnActivity(activityName);

是流程结束所有组件都会变成只读，即使我在else里设置了组件可编辑+变灰也没用？还是能有别的解决方法？否则很多时候仔细调的样式变成只读模式都很不美观

其实并不理解为何系统的只读不直接把组件设置为disable变灰禁止填写就可以，而是要全部变成文本，表单很多组件在只读状态下真的相当丑，而且用户也不理解单纯文本在那什么意思

论坛管理员

没有，默认只读模式都是只显示值，没有下拉框、复选框的

szhtest

论坛管理员 发表于 2024-5-8 13:48
没有，默认只读模式都是只显示值，没有下拉框、复选框的

其实个人感觉只读模式设置组件灰色禁填就可以了，纯文本的话表单只读情况下很多时候文本堆叠在一起，用户其实也不知道原来是有个什么组件。。就。。有点奇怪，而且很多时候组件的样式是专门设计和调好布局的，结果变成纯文本又是另外一种展现效果了。因为目前市面上系统表单设计很少看到有这种只读变纯文本形式的，希望你们可以考虑一下

比如表单设计是这样：

只读/打印时又是这样：

希望可以评估一下这个需求，对工作流的使用感和美化度也有很大的提升

论坛管理员

管理员把这个需求反馈给研发人员评估