文本介绍了如何根据业务场景动态设置金额字段的录入范围。通过在单据中添加金额字段并初始设置范围,再通过插件实现不修改元数据情况下的范围调整。尝试了修改dataScope、min、max属性来设置范围,发现只有min和max生效。随后探讨前端和后端如何动态设置范围,前端需修改元数据,后端则调整字段属性。还指出了不同操作(新建与更新)对错误提示方式的影响,以及如何通过元数据的修改在前端即时验证金额范围。
如何动态设置金额字段录入范围
正常设置金额字段的录入范围,我想大家可能都会,那么假如要根据不同业务场景动态设置金额字段的录入范围,该如何实现呢?
首先我们在单据添加一个金额字段,设置数值范围[0,50]
预览界面,发现只能输入0-50之间的数值,其他根本输入不上:
我们现在假如要在不修改元数据的情况下,将它的范围限制在[0,20],第一意识是通过插件实现,但是我们并不知道数值范围对应的是哪个属性,为方便分析,我们开发插件对这个字段进行值改变监听:
注册插件,修改字段值,触发值更新事件,后台查看下数据结构
发现相关项,min、max、dataScope,首先修改下dataScope属性
更新插件,输入不在[0,20]范围的数值22,点击保存
发现保存成功了,很明显,我们设置的范围值没有生效
再次修改min和max属性
关闭界面,再次尝试:
校验成功,发现这两个属性值生效,那是不是说dadaScope这个属性可以不设置呢?
注释掉这行代码,重新请求:
发现也是成功的,那假如我们修改dataScope为其他数据呢?
发现操作失败的这个范围变成后台设置的dataScope值
更加有意思的是,我们将dataScope设置为[0,5]
发现错误的提示方式不一样了,以前是个弹框,现在变成了提醒。
经过反复验证原来是save和update的区别,当一张新建单据的时候会弹框,而当是已存在的单据时会消息提示。
好了,校验是生效了,但是总觉得有美中不足的地方,设计界面设置的录入范围,在前端输入的时候就可以校验的住,那我们也要动态设置成设计界面那种效果该怎么实现呢?
我们在输入框输入不能输入的值,看下后台
发现并没有发送请求,所以这个校验是在前端完成的,那这个数值范围的值是怎样取到的呢?
我们随便改动点元数据的内容,然后保存预览(之所以要改动元数据,是因为只有改动了元数据第一次会调用会触发这个请求),我们注意到如下请求:
复制Response的内容到文本编辑器,发现内容特别多:
整个页面的元数据的json格式组成
其他的我们先不关心,找到金额字段对应的组成:
找到对应的层级结构,我们来修改代码:
保存,预览:
发现已经能输入之前界面设置的[0,50]范围外的数字了,因为我们现在将最大值修改成了100
好了,前端和后端的金额范围修改均已实现,成功达成目标!
总结:
1. 前端动态设置金额录入范围需要修改元数据的值,后端设置则修改对应字段的属性值
2. 在后端修改录入范围值的时候,min、max、dataScope三个属性都需要赋值,dataScope不设置或者设置错的话,可能会对实际结果产生误导
推荐阅读