Skip to content

Support function props for dynamic config #119

Open
@BingBlog

Description

@BingBlog

需求描述

系统-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']
        };
    }
]

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions