szhtest 发表于 2024-5-7 17:13:30

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

本帖最后由 szhtest 于 2024-5-7 18:38 编辑

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




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



我表单afterLoad事件的脚本为:
divs = this.form.app.node.getElementsByTagName('div')
for(var i = 0;i<divs.length;i++){
    divs.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) {
            moduleList.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变灰禁止填写就可以,而是要全部变成文本,表单很多组件在只读状态下真的相当丑,而且用户也不理解单纯文本在那什么意思


论坛管理员 发表于 2024-5-8 13:48:53

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

szhtest 发表于 2024-5-8 14:07:19

本帖最后由 szhtest 于 2024-5-8 14:15 编辑

论坛管理员 发表于 2024-5-8 13:48
没有,默认只读模式都是只显示值,没有下拉框、复选框的
其实个人感觉只读模式设置组件灰色禁填就可以了,纯文本的话表单只读情况下很多时候文本堆叠在一起,用户其实也不知道原来是有个什么组件。。就。。有点奇怪,而且很多时候组件的样式是专门设计和调好布局的,结果变成纯文本又是另外一种展现效果了。因为目前市面上系统表单设计很少看到有这种只读变纯文本形式的,希望你们可以考虑一下

比如表单设计是这样:

只读/打印时又是这样:

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

论坛管理员 发表于 2024-5-11 09:45:50

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

hao 发表于 2024-6-3 18:49:53

只读表单美观性确实差了一些,主要是也没有办法去设置。

hao 发表于 2024-6-3 18:50:16

希望能提供与编辑状态下一致的外观。

szhtest 发表于 2024-6-4 11:53:13

本帖最后由 szhtest 于 2024-6-4 11:56 编辑

hao 发表于 2024-6-3 18:49
只读表单美观性确实差了一些,主要是也没有办法去设置。
我们最后放弃了系统只读isReadonly,在表单queryLoad事件中调用脚本,脚本里遍历所有表单元素,用disable设置不可编辑的状态(即组件变灰),流程流转时就可以保持与编辑状态下一致的外观。(但是如果流程结束了,打开就依旧是系统的只读状态)。你可以尝试按你的要求写一下

如果OA还没开始启用,建议及时止损。更换市面成熟OA产品,这个产品问题极大:dizzy:
页: [1]
查看完整版本: 表单设计 只读是不是把所有设置的样式都除去了?