扩展右侧配置规则

通过 config 中的 baseRule、formRule、componentRule 和 appendConfigData 参数，您可以扩展和自定义组件右侧的配置规则。这些参数允许您根据需求调整和增强设计器的配置选项，使其更符合特定的业务场景。

数据结构

//定义函数返回规则或者通过rule字段返回规则
type extendRule = ((arg: { t: t }) => Rule[]) | {
    //生成规则
    rule: (arg: { t: t }) => Rule[];
    //追加
    append?: boolean;
    //前置
    prepend?: boolean;
};
type Config = {
    //基础配置的渲染规则,可以覆盖默认规则.append为true时追加到默认规则后面
    baseRule?: extendRule;
    //表单的渲染规则,可以覆盖默认规则.append为true时追加到默认规则后面
    formRule?: extendRule;
    //组件配置的渲染规则,可以覆盖默认规则.append为true时追加到默认规则后面
    componentRule?: {
        //所有组件生效
        default: (rule: Rule, arg: { t: t }) => Rule[] | {
            rule: (rule: Rule, arg: { t: t }) => Rule[];
            append?: boolean;
            prepend?: boolean;
        };
        //id组件拖拽组件规则的id,rule为当前组件的生成规则
        [id: string]: (rule: Rule, arg: { t: t }) => Rule[] | {
            rule: (rule: Rule, arg: { t: t }) => Rule[],
            append?: boolean
            prepend?: boolean;
        }
    };
}

扩展表单配置

在表单配置的顶部添加一个备注输入框，帮助用户在表单创建时配置额外的信息或说明。

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        appendConfigData: ['mark'],
        formRule: {
            prepend: true,
            rule() {
                return [
                    {
                        type: 'input',
                        field: 'mark',
                        title: '表单备注'
                    }
                ]
            }
        }
    }
</script>

扩展表单组件配置

在表单组件配置的尾部增加一个字段映射输入框。

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        appendConfigData(rule){
            return {
                formCreateDb_field: rule.db_field
            }
        },
        formRule: {
            prepend: true,
            rule() {
                return [
                    {
                        type: 'input',
                        field: 'mark',
                        title: '表单备注'
                    }
                ]
            }
        }
    }
</script>

扩展指定组件配置

给输入框组件配置项顶部增加一个是否必填开关

<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
    const config = {
        appendConfigData: ['mark'],
        componentRule: {
            default: {
                prepend: true,
                rule() {
                    return [
                        {
                            type: 'input',
                            field: 'mark',
                            title: '备注'
                        }
                    ]
                }
            },
            input: {
                prepend: true,
                rule() {
                    return [
                        {
                            type: 'switch',
                            field: '$required',
                            title: '是否必填'
                        }
                    ]
                }
            }
        }
    }
</script>