cp icon indicating copy to clipboard operation
cp copied to clipboard

Support function props for dynamic config

Open BingBlog opened this issue 5 years ago • 0 comments

需求描述

系统-os选择不一样时,品牌-brand展现出不同的选项。

image

image

现在的方案方案: 配置多个品牌,通过showOn来联动展示不同的品牌。

{
        type: 'Radio',
        model: 'os',
        label: '系统',
        options:[
            {label: 'IOS', 'value': 'IOS'},
            {label: 'Android', 'value': 'Android'},
        ]
    },
    {
        type: 'Radio',
        model: 'brand',
        label: '品牌',
        options: [
            {label: '苹果', 'value': 'apple'},
        ],
        showOn: {
            os: [
                {
                    type: 'enum',
                    enum: ['IOS']
                }
            ]
        }
    },
    {
        type: 'Radio',
        model: 'brand',
        label: '品牌',
        options: [
            {label: '三星', 'value': 'samsung'},
            {label: '华为', 'value': 'huawei'},
        ],
        showOn: {
            os: [
                {
                    type: 'enum',
                    enum: ['Android']
                }
            ]
        }
    },

现有方案的问题

1、当条件变多时,比如os增加到5个甚至10个,此时需要配置的品牌将会非常多; 2、只能使用远程拉取来进行复杂的选项联动;

讨论方案: 支持配置项设置为函数,paramsContainer中包含当前表单的model的值和外部传入的参数的集合。

方案一:支持单个配置项配置为函数

[
    {
        type: 'Radio',
        model: 'os',
        label: '系统',
        options:[
            {label: 'IOS', 'value': 'IOS'},
            {label: 'Android', 'value': 'Android'},
        ]
    },
    {
        type: 'Radio',
        model: 'brand',
        label: '品牌',
        options(paramsContainer) {
        const {os} = paramsContainer;
            const map = {
                'IOS': [
                    {label: '苹果', 'value': 'apple'},
                ],
                'Android': [
                    {label: '三星', 'value': 'samsung'},
                    {label: '华为', 'value': 'huawei'},
                ]
            };
            return map[os];
        }
    }
]

方案二:支持一个computedFields属性,返回一个新的配置项,可以覆盖其它配置

[
    {
        type: 'Radio',
        model: 'os',
        label: '系统',
        options:[
            {label: 'IOS', 'value': 'IOS'},
            {label: 'Android', 'value': 'Android'},
        ]
    },
    function field(paramsContainer) {
        const {os} = paramsContainer;
        const map = {
            'IOS': [
                {label: '苹果', 'value': 'apple'},
            ],
            'Android': [
                {label: '三星', 'value': 'samsung'},
                {label: '华为', 'value': 'huawei'},
            ]
        };
        return {
            model: 'brand',
            type: 'Radio',
            label: (os || 'IOS') + '-品牌',
            options: map[os || 'IOS']
        };
    }
]

BingBlog avatar Jul 06 '20 06:07 BingBlog