论坛 › 咨询和建议 › 表单设计 只读是不是把所有设置的样式都除去了？

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:

wang1sun 发表于 2024-6-24 15:20:40

只读这个显示样式确实有问题,尤其是多选框.我在测试的时候发现 一个 下拉选择组件会莫名奇妙的丢失配置信息.导致正在流转的单据无法流转. 需要重新配置下数据字典才可以

halphen 发表于 2024-7-4 11:32:39

szhtest 发表于 2024-6-4 11:53
我们最后放弃了系统只读isReadonly，在表单queryLoad事件中调用脚本，脚本里遍历所有表单元素，用disable ...

是的，折腾半天，感觉不如老实掏点钱买商业产品

szhtest 发表于 2024-7-4 11:40:40

本帖最后由 szhtest 于 2024-7-4 11:57 编辑

halphen 发表于 2024-7-4 11:32
是的，折腾半天，感觉不如老实掏点钱买商业产品
我们光上线前的各种查补缺漏的开发已经进行了近乎半年，功能缺失，基础bug无数（不清楚付费版是不是不一样，但既然付费，我很建议买那几个市面大厂商，之前做过调研，各项都比较完备）。且后续人力维护极其繁琐，根本就不是低代码平台，代码量极高，公司肯定需要有会开发的IT部门。强烈建议及时止损，市面上成熟OA也就十来万左右。我们 原本想着更新换代才换了新OA，结果该开源OA比我们自己原本十年前购买的商业成熟产品还难用数倍不止:'(，原本的根本就不需要二次开发，并且流程各项配置也能由各个部门自行维护设置。现如今无开发基础近乎无法配置该OA的许多功能，而且功能比十年前的商业产品还缺失众多。。:'(

查看完整版本: 表单设计 只读是不是把所有设置的样式都除去了？