前言##
关于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是一样的，只是在细节处理上稍有区别。好吧，就到这里吧，希望能对你有所帮助。
网友评论