Designer Data and Methods

Call fc-designer component methods through refs.designer to operate and configure the designer. Detailed descriptions and examples for each method:

Mobile designer is the fc-designer-mobile component

Vue3

<template>
    <fc-designer ref="designer"/>
</template>
<script setup>
    import {onMounted} from "vue";
    const designer = ref(null);
    // Note: Must wait for component initialization to complete before calling its methods
    onMounted(() => {
        designer.value.addComponent([
            // Extend components
        ])
    });
</script>

Vue2

<template>
    <fc-designer ref="designer"></fc-designer>
</template>
<script>
    export default {
        name: 'Component',
        // Note: Must wait for component initialization to complete before calling its methods
        mounted() {
            this.$refs.designer.addComponent([
                // Extend components
            ])
        }
    };
</script>

Fields

Component instance fields:

Field Name	Description
activeRule	Currently selected component rule.
formOptions	Current form's rules.

Methods

Component instance methods:

Method Name	Description	Type Definition
getConfig	Get designer configuration items.	(key: string, def: any) => any
addComponent	Add one or more component templates or drag components to the designer, automatically categorized under corresponding menus based on menu field.	AddComponent
setMenuItem	Override add drag components to the specified menu, menuName is the target menu name.	(menuName: string, list: MenuList) => void
addMenu	Add a new menu item to the designer's left menu bar.	(menu: Menu) => void
setRule	Set form generation rules, supports string or rule object array.	(rule: string | Rule[]) => void
setOption	Set form configuration options (such as layout, label width). Alias method: setOptions.	(opt: Options) => void
mergeOptions	Update form configuration options through merging.	(opt: Options) => void
getRule	Get current form's rendering rules (array form).	() => Rule[]
getJson	Get current form's JSON rendering rules (string form).	() => string
getOption	Get current form's configuration object. Alias method: getOptions.	() => Options
getOptionsJson	Get current form's JSON configuration (string form).	() => string
getFormData	Get current form's formData object.	() => Object
setFormData	Set form's formData object (for pre-filling data).	(formData: Object) => void
getDescription	Get form's hierarchical structure data.	() => TreeData
getFormDescription	Get form component's hierarchical structure data.	() => TreeData
openPreview	Open form preview mode.	() => void
openInputData	Enable or disable data input mode (true to enable, false to disable).	(open: boolean) => void
clearDragRule	Clear all form components in the designer.	() => void
fields	Get list of all field names in the designer.	() => string[]
triggerActive	Select specified component (supports rule object or field/name/_fc_id).	(rule: Rule | string) => void
clearActiveRule	Clear currently selected component state.	() => void
setFormRuleConfig	Set form configuration rules (same as config.formRule).	(rule: () => Rule[], append: boolean) => void
setBaseRuleConfig	Set component basic configuration rules (same as config.baseRule).	(rule: () => Rule[], append: boolean) => void
setComponentRuleConfig	Set specified component's property configuration rules (same as config.componentRule).	(id: string, rule: () => Rule[], append: boolean) => void

Examples

Extend Custom Components

Custom components let you extend the form designer with specific input controls, business modules, or third-party UI components.

<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',
        // Note: Must wait for component initialization to complete before calling its methods
        mounted() {
            this.$refs.designer.addComponent([
                lineChart, areaChart, barChart, stripeChart, pieChart, 
                funnelChart, gaugeChart, radarChart, scatterChart, customChart
            ])
        }
    };
</script>

Import Design Form Rules

Import pre-designed form rules into the designer for editing existing configurations:

<template>
    <fc-designer ref="designer"></fc-designer>
</template>
<script>
    import formCreate from '@form-create/element-ui';
    export default {
        name: 'Component',
        // Note: Must wait for component initialization to complete before calling its methods
        mounted() {
            axios.get('/api/getForm').then(({ ruleJson, optionsJson }) => {
                this.$refs.designer.setRule(formCreate.parseJson(ruleJson));
                this.$refs.designer.setOptions(formCreate.parseJson(optionsJson));
            })
        }
    };
</script>

Save Design Form Rules

Save form design rules after completing the design:

<template>
    <fc-designer ref="designer"></fc-designer>
    <el-button @click="save">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 string
                    options: formCreate.toJson(this.$refs.designer.getOptions()), // JSON string
                }).then(response => {
                    // Handle save success logic
                    console.log('Save successful');
                })
            },
        }
    };
</script>

Manually Select Specified Component

After designer initialization, manually select and activate a form component using triggerActive with a field name, component name, or rule object:

<template>
    <fc-designer ref="designer"></fc-designer>
</template>
<script>
    import formCreate from '@form-create/element-ui';
    export default {
        name: 'Component',
        // Note: Must wait for component initialization to complete before calling its methods
        mounted() {
            // Select by component field
            this.$refs.designer.triggerActive('field');
            // Select by component name
            this.$refs.designer.triggerActive('name');
            // Select by component rule
            this.$refs.designer.triggerActive(rule);
        }
    };
</script>

Type Definitions

Expand

// Single component or component array addition
type AddComponent =
    (dragRule: dragRule | dragTemplateRule) => void |
        (dragRule: Array<dragRule | dragTemplateRule>) => void;

        // Menu item operations
type SetMenuItem = (menuName: string, list: MenuList) => void;
type AddMenu = (menu: Menu) => void;

// Rule and configuration operations
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;

// Form data operations
type GetFormData = () => Object;
type SetFormData = (formData: Object) => void;

// Structure data retrieval
type GetDescription = () => TreeData;
type GetFormDescription = () => TreeData;

// View control
type OpenPreview = () => void;
type OpenInputData = (open: boolean) => void;

// Designer operations
type ClearDragRule = () => void;
type Fields = () => string[];
type TriggerActive = (rule: Rule | string) => void;
type ClearActiveRule = () => void;

// Rule configuration
type SetFormRuleConfig = (rule: () => Rule[], append: boolean) => void;
type SetBaseRuleConfig = (rule: () => Rule[], append: boolean) => void;
type SetComponentRuleConfig = (id: string, rule: () => Rule[], append: boolean) => void;

For complete type definitions, see the TypeScript data structure documentation: TypeScript Data Structure