Component Operation Permissions

Use config.componentPermission to control component permissions in the form designer, including operations and configuration items.

Data Structure

// Control component configuration permissions
type ComponentPermission = {
    // Match component identifier fields (single or multiple selection)
    // Component field
    field?: string | string[];
    // Component name
    name?: string | string[];
    // Component _fc_drag_tag
    tag?: string | string[];
    // Component _fc_id
    id?: string | string[];
    // Permissions
    permission: {
        // Basic operation permissions
        delete?: boolean    // Whether deletion is allowed
        copy?: boolean     // Whether copying is allowed
        move?: boolean     // Whether dragging is allowed
        // Configuration item permissions
        validate?: boolean  // Validation rule configuration
        event?: boolean     // Event configuration
        advanced?: boolean  // Advanced configuration
        base?: boolean      // Basic configuration
        props?: boolean     // Component property configuration
        style?: boolean     // Style configuration
        slots?: boolean     // Slot configuration
        switchType?: boolean // Component type switching
        name?: boolean      // Whether to display component name
        // Fine-grained control
        hiddenConfig?: string[]   // Configuration item names to hide
        disabledConfig?: string[] // Configuration item names to disable
    },
}[],

You can view the relevant IDs and configuration names of corresponding components in the JSON panel

Prohibit Delete and Copy for Input Components

Restrict operation permissions for input components, preventing users from deleting and copying form components of this type:

<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>

Hide Validate Configuration Item by Component Field

Hide the validation configuration item for specific components by field names (field1, field2):

<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>

Hide Disabled Configuration Item for Input Components

Hide the disabled configuration item for input components to prevent users from modifying the disabled state:

<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>

Disable Style Configuration for Select Components

Disable style configuration for select components to prevent users from modifying style properties:

<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>