FcDesigner Pro

Appearance

设计器的数据和方法 ​

通过 refs.designer 可以调用 fc-designer 组件的各种方法来操作和配置设计器。以下是各方法的详细说明及示例：

移动端设计器是fc-designer-mobile组件

Vue3

vue
<template>
    <fc-designer ref="designer"/>
</template>
<script setup>
    import {onMounted} from "vue";
    const designer = ref(null);

    //注意：需等待组件完成初始化后，方可调用其方法
    onMounted(() => {
        designer.value.addComponent([
            //扩展组件
        ])
    });
</script>
Vue2
vue
<template>
    <fc-designer ref="designer"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        //注意：需等待组件完成初始化后，方可调用其方法
        mounted() {
            this.$refs.designer.addComponent([
                //扩展组件
            ])
        }
    };
</script>

字段 ​

组件实例的字段以及说明：

字段名描述
activeRule当前选中的组件规则。
formOptions当前表单的规则。

方法 ​

组件实例方法及使用说明：

方法名描述类型定义
getConfig获取设计器的配置项。(key: string, def: any) => any
addComponent将一个或多个组件模板或拖拽组件添加到设计器，并根据 menu 字段自动归类到对应菜单下。查看扩展组件。AddComponent
setMenuItem将拖拽组件覆盖添加到指定的菜单下，menuName 为目标菜单名称。查看扩展组件分组。(menuName: string, list: MenuList) => void
addMenu向设计器左侧菜单栏添加一个新的菜单项。查看扩展组件分组。(menu: Menu) => void
removeMenu移除指定的菜单项。(name: string) => void
appendMenuItem向指定菜单添加菜单项。(name: string, item: MenuItem | MenuItem[]) => void
removeMenuItem从指定菜单移除菜单项。(item: string | MenuItem) => void
setRule设置表单生成的规则，支持字符串或规则对象数组。查看保存JSON规则。(rule: string | Rule[], partFlag?: boolean) => void
setOption设置表单的配置选项（如布局、标签宽度）。查看修改表单默认配置。
别名方法：setOptions。		(opt: Options) => void
mergeOptions通过合并方式更新表单配置选项。查看修改表单默认配置。(opt: Options) => void
getRule获取当前表单的渲染规则（数组形式）。() => Rule[]
getJson获取当前表单的 JSON 渲染规则（字符串形式）。() => string
getOptionsJson获取当前表单的 JSON 配置（字符串形式）。() => string
getFormData获取当前表单的 formData 对象。查看默认值。() => Object
setFormData设置表单的 formData 对象（用于预填充数据）。查看默认值。(formData: Object) => void
getDescription获取表单的层级结构数据。查看获取层级结构。() => TreeData
getFormDescription获取表单组件的层级结构数据。查看获取层级结构。() => TreeData
openPreview打开表单预览模式。() => void
openInputData开启或关闭数据录入模式（true 开启，false 关闭）。查看默认值。(open: boolean) => void
clearDragRule清空设计器中的所有表单组件。() => void
fields获取设计器中所有字段的名称列表。查看管理字段列表。() => string[]
triggerActive选中指定组件（支持规则对象或 field/name/_fc_id）。(rule: Rule | string) => void
clearActiveRule清除当前选中的组件状态。() => void
setFormRuleConfig设置表单配置规则（同 config.formRule）。查看扩展配置规则。(rule: () => Rule[], append: boolean) => void
setBaseRuleConfig设置组件基础配置规则（同 config.baseRule）。查看扩展配置规则。(rule: () => Rule[], append: boolean) => void
setComponentRuleConfig设置指定组件的属性配置规则（同 config.componentRule）。查看扩展配置规则。(id: string, rule: () => Rule[], append: boolean) => void
setGlobalData预设全局数据源（用于设计器）。查看预定义全局数据。(data: GlobalData) => void
setGlobalEvent预设全局事件（用于设计器）。查看预定义全局数据。(event: GlobalEvent) => void
setGlobalClass预设全局样式（用于设计器）。查看预定义全局数据。(class: GlobalClass) => void
setGlobalVariable预设全局变量（用于设计器）。查看预定义全局数据。(variable: GlobalVariable) => void
openGlobalEventDialog开启全局事件弹窗。() => void
openGlobalFetchDialog开启全局数据源弹窗。() => void
openGlobalClassDialog开启全局样式弹窗。() => void
openGlobalVariableDialog开启全局变量弹窗。() => void
setDevice设置设计器的设备类型。(device: string) => void

示例 ​

扩展自定义组件 ​

自定义组件允许开发者根据业务需求扩展表单设计器的功能，例如添加特定的输入控件、业务模块或第三方UI组件。

vue
<template>
    <fc-designer ref="designer"></fc-designer>
</template>
<script>
    import lineChart from './rule/charts/lineChart';
    import areaChart from './rule/charts/areaChart';
    import barChart from './rule/charts/barChart';
    import stripeChart from './rule/charts/stripeChart';
    import pieChart from './rule/charts/pieChart';
    import funnelChart from './rule/charts/funnelChart';
    import gaugeChart from './rule/charts/gaugeChart';
    import radarChart from './rule/charts/radarChart';
    import scatterChart from './rule/charts/scatterChart';
    import customChart from './rule/charts/customChart';

    export default {
        name: 'Component',
        //注意：需等待组件完成初始化后，方可调用其方法
        mounted() {
            this.$refs.designer.addComponent([
                lineChart, areaChart, barChart, stripeChart, pieChart, 
                funnelChart, gaugeChart, radarChart, scatterChart, customChart
            ])
        }
    };
</script>

导入设计表单规则 ​

在设计器中导入预先设计好的表单规则，可以二次编辑已有配置

vue
<template>
    <fc-designer ref="designer"></fc-designer>
</template>
<script>
    import formCreate from '@form-create/element-ui';
    export default {
        name: 'Component',
        //注意：需等待组件完成初始化后，方可调用其方法
        mounted() {
            axios.get('/api/getForm').then(({ ruleJson, optionsJson }) => {
                this.$refs.designer.setRule(formCreate.parseJson(ruleJson));
                this.$refs.designer.setOptions(formCreate.parseJson(optionsJson));
            })
        }
    };
</script>

保存设计表单规则 ​

在设计器中完成表单设计后，可通过以下步骤保存规则：

vue
<template>
    <fc-designer ref="designer"></fc-designer>
    <el-button @click="save">保存</el-button>
</template>
<script>
    import formCreate from '@form-create/element-ui';
    export default {
        name: 'Component',
        methods: {
            save() {
                axios.post('/api/saveForm', {
                    rules: formCreate.toJson(this.$refs.designer.getRule()), //JSON字符串
                    options: formCreate.toJson(this.$refs.designer.getOptions()), //JSON字符串
                }).then(response => {
                    // 处理保存成功的逻辑
                    console.log('保存成功');
                })
            },
        }
    };
</script>

手动选中指定组件 ​

在表单设计器初始化完成后，通过 triggerActive 方法并传入字段名、组件名或规则对象，来手动选中并激活指定的表单组件。

vue
<template>
    <fc-designer ref="designer"></fc-designer>
</template>
<script>
    import formCreate from '@form-create/element-ui';
    export default {
        name: 'Component',
        //注意：需等待组件完成初始化后，方可调用其方法
        mounted() {
            //通过组件 field 选中
            this.$refs.designer.triggerActive('field');
            //通过组件 name 选中
            this.$refs.designer.triggerActive('name');
            //通过组件规则选中
            this.$refs.designer.triggerActive(rule);
        }
    };
</script>

菜单管理 ​

动态管理设计器的菜单项，包括添加、删除、修改菜单。

vue
<template>
    <fc-designer ref="designer"></fc-designer>
    <el-button @click="addCustomMenu">添加自定义菜单</el-button>
    <el-button @click="removeMenu">移除菜单</el-button>
</template>
<script>
    export default {
        name: 'Component',
        mounted() {
            // 添加自定义菜单
            this.$refs.designer.addMenu({
                name: 'custom',
                title: '自定义组件',
                list: [
                    {
                        name: 'custom-input',
                        title: '自定义输入框',
                        // 组件配置...
                    }
                ]
            });
        },
        methods: {
            addCustomMenu() {
                // 向现有菜单添加组件
                this.$refs.designer.appendMenuItem('custom', {
                    name: 'custom-button',
                    title: '自定义按钮'
                });
            },
            removeMenu() {
                // 移除菜单项
                this.$refs.designer.removeMenuItem('custom-button');
                // 或移除整个菜单
                this.$refs.designer.removeMenu('custom');
            }
        }
    };
</script>

设备类型切换 ​

动态切换设计器的设备类型，支持PC和移动端预览。

vue
<template>
    <fc-designer ref="designer"></fc-designer>
    <el-button @click="switchToMobile">切换到移动端</el-button>
    <el-button @click="switchToPC">切换到PC端</el-button>
</template>
<script>
    export default {
        name: 'Component',
        methods: {
            switchToMobile() {
                // 切换到移动端
                this.$refs.designer.setDevice('mobile');
            },
            switchToPC() {
                // 切换到PC端
                this.$refs.designer.setDevice('pc');
            }
        }
    };
</script>

类型定义 ​

展开
ts
// 单组件或组件数组添加
type AddComponent =
    (dragRule: dragRule | dragTemplateRule) => void |
        (dragRule: Array<dragRule | dragTemplateRule>) => void;

        // 菜单项操作
type SetMenuItem = (menuName: string, list: MenuList) => void;
type AddMenu = (menu: Menu) => void;

// 规则与配置操作
type SetRule = (rule: string | Rule[]) => void;
type SetOption = (opt: Options) => void;
type MergeOptions = (opt: Options) => void;
type GetRule = () => Rule[];
type GetJson = () => string;
type GetOption = () => Options;
type GetOptionsJson = () => string;

// 表单数据操作
type GetFormData = () => Object;
type SetFormData = (formData: Object) => void;

// 结构数据获取
type GetDescription = () => TreeData;
type GetFormDescription = () => TreeData;

// 视图控制
type OpenPreview = () => void;
type OpenInputData = (open: boolean) => void;

// 设计器操作
type ClearDragRule = () => void;
type Fields = () => string[];
type TriggerActive = (rule: Rule | string) => void;
type ClearActiveRule = () => void;

// 规则配置
type SetFormRuleConfig = (rule: () => Rule[], append: boolean) => void;
type SetBaseRuleConfig = (rule: () => Rule[], append: boolean) => void;
type SetValidateRuleConfig = (rule: () => Rule[], append: boolean) => void;
type SetComponentRuleConfig = (id: string, rule: () => Rule[], append: boolean) => void;

// 全局预设
type SetGlobalData = (data: GlobalData) => void;
type SetGlobalEvent = (event: GlobalEvent) => void;
type SetGlobalClass = (class: GlobalClass) => void;
type SetGlobalVariable = (variable: GlobalVariable) => void;

// 弹窗控制
type OpenGlobalEventDialog = () => void;
type OpenGlobalFetchDialog = () => void;
type OpenGlobalClassDialog = () => void;
type OpenGlobalVariableDialog = () => void;

// 设备控制
type SetDevice = (device: string) => void;

// 菜单管理
type RemoveMenu = (name: string) => void;
type AppendMenuItem = (name: string, item: MenuItem | MenuItem[]) => void;
type RemoveMenuItem = (item: string | MenuItem) => void;

// 配置获取
type GetConfig = (key: string, def: any) => any;

完整配置项的类型定义可参考 TypeScript 数据结构文档：Ts数据结构

注意事项 ​

组件初始化时机 ​

重要：所有方法调用必须在组件完成初始化后进行，否则会报错。

vue
<script>
export default {
    mounted() {
        // ✅ 正确：在 mounted 生命周期中调用
        this.$refs.designer.addComponent([...]);
    },
    methods: {
        wrongWay() {
            // ❌ 错误：在组件未挂载时调用
            this.$refs.designer.setRule([]);
        }
    }
};
</script>

异步操作处理 ​

某些方法涉及异步操作，需要正确处理：

vue
<script>
export default {
    async mounted() {
        // ✅ 正确：等待异步操作完成
        await this.loadFormData();
        this.$refs.designer.setRule(this.rules);
    },
    methods: {
        async loadFormData() {
            const response = await fetch('/api/form-data');
            return response.json();
        }
    }
};
</script>