Skip to content

Support function props for dynamic config #119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BingBlog opened this issue Jul 6, 2020 · 0 comments
Open

Support function props for dynamic config #119

BingBlog opened this issue Jul 6, 2020 · 0 comments
Labels
enhancement New feature or request

Comments

@BingBlog
Copy link
Collaborator

BingBlog commented Jul 6, 2020

需求描述

系统-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 BingBlog added the enhancement New feature or request label Jul 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant