开源表单设计器form-create-designer中的控制右侧配置面板组件配置项的显隐

在 form-create-designer 的开源表单设计工具中，灵活的配置选项是实现个性化业务需求的关键。通过 config.hiddenItemConfig 和 config.disabledItemConfig，开发者能够在设计器中精确控制右侧配置面板中配置项的可见性和交互性，从而优化用户界面对不同需求的适应能力。

控制组件配置项的结构

在 form-create-designer 中，您可以利用以下数据结构来调整配置项的可见性和可用性：

type Config = {
    // 用于管理组件配置项的显示状态
    hiddenItemConfig?: {
        // 默认隐藏的配置项
        default?: string[];
        // 通过组件名称自定义隐藏的配置项
        [id: string]: string[];
    };
    // 用于管理组件配置项的可交互状态
    disabledItemConfig?: {
        // 默认禁用的配置项
        default?: string[];
        // 通过组件名称自定义禁用的配置项
        [id: string]: string[];
    };
}

配置项隐藏功能详解

通过 hiddenItemConfig，您可以选择性地在右侧配置面板中隐藏特定项。例如，您可以隐藏所有组件的 disabled 属性以及输入框组件的 field 属性：

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        hiddenItemConfig: {
            default: ['disabled'],
            input: ['field']
        }
    };
</script>

配置项禁用功能详解

通过设置 disabledItemConfig，可以将特定的配置项设为不可交互状态。例如，要禁用所有组件的 disabled 属性及输入框的 field 属性：

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        disabledItemConfig: {
            default: ['disabled'],
            input: ['field']
        }
    };
</script>

基于用户权限的动态配置调整

form-create-designer 允许通过绑定用户权限或其他条件，动态调整配置项的状态。这赋予了设计器更高的灵活性，适应不同用户的权限需求：

<template>
    <fc-designer ref="designer" :config="dynamicConfig"/>
</template>
<script setup>
    import { ref, onMounted } from 'vue';

    const dynamicConfig = ref({});

    onMounted(() => {
        const userPermissions = getUserPermissions();
        dynamicConfig.value = {
            hiddenItemConfig: userPermissions.canEdit ? {} : { default: ['disabled'] },
            disabledItemConfig: userPermissions.canEdit ? {} : { default: ['disabled'] }
        };
    });

    function getUserPermissions() {
        return { canEdit: false }; // 修改为 true 以授予编辑权限
    }
</script>

通过这样有针对性的权限管理，form-create-designer 可以为多元化用户组提供灵活高效的表单设计解决方案，增强应用场景的广泛性和实用性。