前言##
关于zny平台组件的dependsOn的使用方法和功能介绍,平台组有更为专业的介绍和描述。具体地址为:https://www.yuque.com/msdi/vw7l9x/qiwbhh 。如果你是个入门者,或许可以从这里开始。
概述##
dependsOn意为依赖检测,通过在当前字段中检测别的字段的修改,并且配置一些条件规则来处理表单元素之间的联动逻辑。
denpensOn分为三种模式:
1.Computed 计算模式
2.Refresh 刷新模式
3.Visible 可视化模式
一般来说,Computed模式比较适合于文本输入类元素,例如Input,Number。。。在Computed模式下,Computed的返回值会直接赋值给元素的Value。Refresh模式比较适合于列表类元素,这类元素往往需要通过api属性去后台获取数据。Refresh通常的应用情景是根据筛选条件动态获取列表信息。Visible模式比较简单,就是处理元素的显示和隐藏。那么,就让我们从Computed模式下的一个简单联动demo开始吧!它相当于你写的第一个helloword程序。
Computed##
Computed的工作原理为:通过给表单元素配置被监测字段和规则,当被监测字段符合规则时就调用computed函数,该函数可以用于处理一些与规则相关的业务逻辑,并将处理后返回值赋值给当前元素的Value属性。下面为一个简单联动的代码:
const fieldsForm: FormFieldProps = [
{
type: 'Select',
label: '折扣',
field: 'reviewType',
options: [
{
label: '五折',
value: 0.5,
},
{
label: '六折',
value: 0.6,
},
],
},
{
type: 'Input',
label: '折扣价',
field: 'fileId',
dependsOn:{
mode: 'computed', //监测模式,可以是'Computed','Refresh', 'Visible'
watchFields: ['reviewType'],//被监测字段,可以是其他任何一个表单元素
computed: (v, f)=>{ //被监测字段符合条件时就执行这里
return v.reviewType; //return会将返回值赋值给当前元素
}, //v表示当前表单元素的Value集合,f为bool,表示是否符合规则
immediate: true, //false表示始终执行computed,true表示只有符合规则才执行computed
watchMode: '|' //'|'表示只要一个规则满足就执行computed,'&'表示只有所有规则都满足时才执行computed
}
// required: true,
}
];
上述代码实现了一个非常简单的功能,即点击一个下拉列表项,在下面的文本框中显示该列表项的Value。可以看到,上述dependsOn没有添加规则,我们下面给它增加规则,代码如下:
dependsOn:{
mode: 'computed',
watchFields: ['reviewType'],
rule: (v)=>{
return (v > 0.5);
},
computed: (v, f)=>{
return v.reviewType;
},
immediate: true,
watchMode: '|'
}
运行结果是可以显示0.6,不能显示0.5,符合我们的预期。computed还可以是对象,代码如下:
computed: {
match: ()=>{;
return 1;
},
noMatch: ()=>{
return 2;
}
},
match和noMatch分别表示匹配成功和匹配不成功时分别调用的回调,回调中的返回值会赋值给当前元素的Value。
rule支持简单字符串,正则表达式以及回调函数的匹配方式,同时支持多条件匹配。具体的可参阅平台组文档。在回调函数的匹配方式中,被监测字段的Value值会被传递到回调函数中,同时rule中的返回值将作为匹配结果传递到computed中,即上述代码中的f参数,在这里可以对不同匹配结果做不同的逻辑处理。关于dependsOn的条件匹配有以下细节需要注意:
1.支持监测多个字段。
2.支持多个条件匹配。
3.一个监测字段只能对应一个匹配条件。
关于第3条,我们可以对代码做如下修改:
watchFields: ['reviewType'],
rule: [(v)=>{
return (v > 0.5);
},
(v)=>{
return (v > 0.6);
}
],
watchMode: '&',
实际运行效果是可以显示0.6,不能显示0.5,'reviewType'只会匹配第一条rule。
再看以下代码:
watchFields: ['reviewType','reviewType'],
rule: [(v)=>{
return (v > 0.5);
},
(v)=>{
return (v > 0.6);
}
],
watchMode: '&',
实际运行效果是显示0.6和0.5都不能显示,两个rule都起了作用。因此我们可以判断
当多条件匹配时,rule规则和watchFields是一一对应的关系,意即第一个watchField
对应第一条rule,第二个watchField对应第二条rule,依次类推,而不是一对多关系。
下面我们实现一个计算折扣价的功能。代码如下:
const fieldsForm: FormFieldProps = [
{
type: 'Number',
label: '价格',
field: 'price',
},
{
type: 'Select',
label: '折扣',
field: 'reviewType',
options: [
{
label: '五折',
value: 0.5,
},
{
label: '六折',
value: 0.6,
},
],
},
{
type: 'Input',
label: '折扣价',
field: 'fileId',
dependsOn:{
mode: 'computed',
watchFields: ['reviewType', 'price'],
// rule: (v)=>{
// return v === 0.5;
// },
computed: (v, f)=>{
if(f)
{
return v.reviewType * v.price;
}
else
{
return '';
}
},
immediate: true,
watchMode: '&'
}
// required: true,
}
];
是不是非常的简单呢?当然,这里只是做了非常简单的业务处理,但是复杂正是从简单堆砌起来的。如果简单的都不会,如何做复杂的处理呢?关于Refresh模式和Visible模式,它们的条件匹配和computed是一样的,只是在细节处理上稍有区别。好吧,就到这里吧,希望能对你有所帮助。