控制组件操作权限

config.componentPermission 配置项允许开发者对表单设计器中的组件进行细粒度的权限控制，包括操作权限和配置项权限。

数据结构

//控制组件的配置权限
type ComponentPermission = {
    // 匹配组件标识字段（可单选或多选）
    //组件的 field
    field?: string | string[];
    //组件的 name
    name?: string | string[];
    //组件的 _fc_drag_tag
    tag?: string | string[];
    //组件的 _fc_id
    id?: string | string[];
    //权限
    permission: {
        // 基础操作权限
        delete?: boolean    // 是否允许删除
        copy?: boolean     // 是否允许复制
        move?: boolean     // 是否允许拖动
        // 配置项权限
        validate?: boolean  // 验证规则配置
        event?: boolean     // 事件配置
        advanced?: boolean  // 高级配置
        base?: boolean      // 基础配置
        props?: boolean     // 组件属性配置
        style?: boolean     // 样式配置
        slots?: boolean     // 插槽配置
        switchType?: boolean // 组件类型切换
        name?: boolean      // 是否显示组件名称
        // 精细化控制
        hiddenConfig?: string[]   // 需要隐藏的配置项名称
        disabledConfig?: string[] // 需要禁用的配置项名称
    },
}[],

在 JSON 面板中可以查看对应组件的相关 id 和配置名称

input 组件禁止删除和复制

<template>
    <fc-designer ref="designer" :config="config"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        data() {
            return {
                config: {
                    ComponentPermission: [
                        {
                            tag: 'input',
                            permission: {
                                delete: false,
                                copy: false,
                            }
                        }
                    ]
                },
            };
        }
    };
</script>

通过组件的 field 隐藏对应组件的 validate 配置项

<template>
    <fc-designer ref="designer" :config="config"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        data() {
            return {
                config: {
                    ComponentPermission: [
                        {
                            field: ['field1', 'field2'],
                            permission: {
                                validate: false,
                            }
                        }
                    ]
                },
            };
        }
    };
</script>

隐藏 input 组件的disabled 配置项

<template>
    <fc-designer ref="designer" :config="config"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        data() {
            return {
                config: {
                    ComponentPermission: [
                        {
                            tag: 'input',
                            permission: {
                                hiddenConfig: ['disabled'],
                            }
                        }
                    ]
                },
            };
        }
    };
</script>

禁用 select 组件的样式配置

<template>
    <fc-designer ref="designer" :config="config"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        data() {
            return {
                config: {
                    ComponentPermission: [
                        {
                            tag: 'select',
                            permission: {
                                style: false,
                            }
                        }
                    ]
                },
            };
        }
    };
</script>