FcDesigner v3.6 Adds SQL Export, Letting Visual Forms Become Database Tables Directly
Vue Visual AI Form Designer FcDesigner v3.6 Released, with SQL Export Support!
Author: 无懈可击
FcDesigner is a Vue-based low-code visual AI form designer. Describe business needs in natural language to generate form structures, or drag and drop components and export JSON, which a renderer then restores to an interactive form. Suited for government affairs, OA, ERP, e-commerce, and process approval workflows.
Source code: Github | Gitee | Docs | Online Demo
Core Features
- Built-in form multi-language system, easily breaking language barriers.
- Provides 30+ common components, covering form components, layout components, auxiliary components, and other useful modules.
- Supports flexible extension of custom components, making personalized development easy. Supports secondary extension development and deep customization.
- Supports component style configuration, dynamically adjusting style properties like component size, color, and spacing.
- Supports event interaction configuration, flexibly configuring component event response logic to achieve complex interaction scenarios.
- Built-in AI form assistant, making form development faster, more stable, and smarter.
- Form outline, operation history, data input, component generation, event configuration, form validation, grid layout, table layout, etc.
3.6 Version Update Contents
1. Preview supports exporting SQL
The preview dialog adds a "Generate SQL" panel, which can generate CREATE TABLE statements based on the current form, and compare with historical table structures, outputting change statements for new tables, dropped tables, new fields, dropped fields, modified fields, and renamed fields. The designer also provides getSQL and getSQLDiff methods for direct use in business logic. NOT NULL is only generated when a field is marked as required.
2. Tooltip information supports HTML editing
The component's tooltip information can now be written directly in HTML. When the content contains line breaks, the input box becomes read-only, and clicking it opens an editing dialog, avoiding difficulty maintaining long text in the input box. (Requires formCreate version >= 3.3.6 or 2.7.32)
3. New button group component
Element Plus and Ant Design Vue have new button group components, allowing unified configuration of size and type within a group of buttons, and direct editing of each button's text. Element Plus buttons also support text button styles, and background colors for text buttons.
4. Preview dialog can be displayed as needed
The four panels (form, generated components, generated HTML, generated SQL) in the preview dialog can now be individually controlled for visibility, making it easy to hide unneeded content based on usage scenarios.
5. Table form column headers support multi-language
Table form column headers are now integrated with the multi-language configuration, allowing column names to be maintained separately for different languages. The preview and rendering will display according to the current language.
6. Validation and event editing easier to get started
The dropdown options for validation rules now have explanatory text, so you can see the applicable scenario when selecting a rule. The code editors for event functions and custom validation also have placeholder examples, showing parameter descriptions and writing references when you open the editor.
7. Feature optimizations and BUG fixes
✅ Added Ant Design Vue selector search support, with the option to match by option label or option value
✅ Added Element Plus tree control disable configuration
✅ Added Vant selector clear icon
✅ Optimized the header style of the multi-language selection list
✅ Optimized the designer's icon font
Element Plus Version Form Designer
@form-create/designer supports Vue 3 environments. Below is a guide on how to install and use this library in a Vue 3 project.
Installation
First, install the Vue 3 version of @form-create/designer:
npm install @form-create/designer@^3
npm install @form-create/element-ui@^3
npm install element-plus
If you have an older version of the renderer installed, run the following command to update to the latest version:
npm update @form-create/element-ui@^3
Import
Node.js Import
For projects using Node.js, follow these steps to import and configure in your Vue 3 project:
import { createApp } from 'vue';
import FcDesigner from '@form-create/designer';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
// Create Vue app
const app = createApp(App);
// Use Element Plus and FcDesigner
app.use(ElementPlus);
app.use(FcDesigner);
app.use(FcDesigner.formCreate);
// Mount app
app.mount('#app');
CDN Import
If you choose to use CDN, follow these steps to import the required dependencies in an HTML file:
<!-- Import Element Plus styles -->
<link href="https://unpkg.com/element-plus/dist/index.css" rel="stylesheet" />
<!-- Import Vue 3 -->
<script src="https://unpkg.com/vue"></script>
<!-- Import Element Plus -->
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<!-- Import form-create and designer -->
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/designer@next/dist/index.umd.js"></script>
<div id="app">
<fc-designer height="100vh"></fc-designer></div><script>
const { createApp } = Vue;
const app = createApp({});
app.use(ElementPlus);
app.use(FcDesigner);
app.use(FcDesigner.formCreate);
app.mount('#app');
</script>
Usage
In a Vue 3 component, you can use the fc-designer component in the following way:
<template>
<fc-designer ref="designer" height="100vh" /></template><script setup>
import { ref } from 'vue';
// You can get the designer instance here or perform other operations
const designer = ref(null);
</script>
AntDesignVue Version PC Form Designer
This project uses Vue 3.0 and Ant Design Vue for page construction, has a built-in multi-language solution, supports secondary extension development, and supports custom component extensions.
Installation
First, install @form-create/antd-designer:
npm install @form-create/antd-designer@^3
npm install @form-create/ant-design-vue@^3
npm install ant-design-vue
If you have an older version of the renderer installed, run the following command to update to the latest version:
npm update @form-create/ant-design-vue@^3
Import
Node.js Import
For projects using Node.js, follow these steps to import and configure in your Vue 3 project:
import FcDesigner from '@form-create/antd-designer'
import antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
// Create Vue app
const app = createApp(App);
app.use(antd)
app.use(FcDesigner)
app.use(FcDesigner.formCreate)
// Mount app
app.mount('#app');
CDN Import
If you choose to use CDN, follow these steps to import the required dependencies in an HTML file:
<link rel="stylesheet" href="https://unpkg.com/ant-design-vue@4/dist/reset.css"></link>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"></link>
<!-- Import Vue and required components -->
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/ant-design-vue@4/dist/antd.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
<!-- Import form-create and fcDesigner --><script src="https://unpkg.com/@form-create/ant-design-vue@^3/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@^3/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/antd-designer@^3/dist/index.umd.js"></script>
<div id="app">
<fc-designer height="100vh"></fc-designer></div><!-- Mount component --><script>
// Create Vue app instance
const app = Vue.createApp({});
// Mount AntDesignVue
app.use(antd);
// Mount fcDesignerPro component
app.use(FcDesigner);
// Mount formCreate
app.use(FcDesigner.formCreate);
// Mount Vue app
app.mount('#app');
</script>
Usage
In a Vue 3 component, you can use the fc-designer component in the following way:
<template>
<fc-designer ref="designer" height="100vh" /></template><script setup>
import { ref } from 'vue';
// You can get the designer instance here or perform other operations
const designer = ref(null);
</script>
Mobile Form Designer
This project uses Vue 3.0 and ElementPlus for mobile page construction. The mobile side uses vant version 4.0. It has a built-in multi-language solution, supports secondary extension development, and supports custom component extensions.
Installation
First, install @form-create/vant-designer:
npm install @form-create/vant-designer@^3
npm install @form-create/element-ui@^3
npm install @form-create/vant@^3
npm install element-plus
npm install vant
If you have an older version of the renderer installed, run the following command to update to the latest version:
npm update @form-create/element-ui@^3
npm update @form-create/vant@^3
Import
Node.js Import
For projects using Node.js, follow these steps to import and configure in your Vue 3 project:
import FcDesignerMobile from '@form-create/vant-designer'
import ELEMENT from 'element-plus';
import vant from 'vant';
import 'vant/lib/index.css';
import 'element-plus/dist/index.css';
// Create Vue appconst app = createApp(App);
app.use(ELEMENT)
app.use(vant)
app.use(FcDesignerMobile)
app.use(FcDesignerMobile.formCreate)
// Mount app
app.mount('#app');
CDN Import
If you choose to use CDN, follow these steps to import the required dependencies in an HTML file:
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"></link>
<link rel="stylesheet" href="https://unpkg.com/vant@4/lib/index.css"/>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<script src="https://unpkg.com/vant@4/lib/vant.min.js"></script>
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant-designer@next/dist/index.umd.js"></script>
<div id="app">
<fc-designer-mobile height="100vh"></fc-designer-mobile></div><script>
const { createApp } = Vue;
app.use(ElementPlus);
app.use(vant);
app.use(FcDesignerMobile);
app.use(FcDesignerMobile.formCreate);
app.mount('#app');
</script>
Usage
In a Vue 3 component, you can use the fc-designer component in the following way:
<template>
<fc-designer-mobile ref="designer" height="100vh" /></template><script setup>
import { ref } from 'vue';
// You can get the designer instance here or perform other operations
const designer = ref(null);
</script>
Getting Designed Form Data
In the form designer, you can get the form's generation rules and configuration through the following methods. This data is usually saved to the database for later loading and re-display.
//Get the form's generation rules
const ruleJson = this.$refs.designer.getJson();
//Get the form's configuration
const optionsJson = this.$refs.designer.getOptionsJson();
//todo Save JSON data to database
This data can be saved to the database to ensure the form's state and configuration can be restored on page refresh or reload.
Re-displaying the Designed Form
To re-display a designed form, you need to load the previously saved JSON rules and configuration, and apply them to the designer.
//todo Load form JSON rules
//Re-display form
this.$refs.designer.setOptions(optionsJson);
this.$refs.designer.setRule(ruleJson);
Through these methods, the previously saved form rules and configuration can be applied to the designer, restoring the form's state.
Form Rendering
To render a form, you need to mount form-create to the Vue app, and load the form rules and configuration.
//Import formCreate from designer
import {formCreate} from '@form-create/designer';
//Mount formCreate
app.use(formCreate);
Form Rendering Example
<template>
<div id="app">
<form-create v-model="formData" v-model:api="fApi" :rule="rule" :option="option"></form-create>
</div></template><script>
import {formCreate} from '@form-create/designer';
export default {
data() {
return {
//Instance object
fApi: {},
//Form data
formData: {},
//Form generation rules
rule: [],
//Component parameter configuration
option: {}
}
},
beforeCreate(){
const rule,option;
// todo Load form JSON rules
this.rule = formCreate.parseJson(rule);
this.option = formCreate.parseJson(option);
}
}
</script>
Dynamically Loading and Saving Form Configurations
Form rules and configurations can be dynamically loaded via API requests, and form data can be saved to the server.
import axios from 'axios';
// Load form configuration
async function loadFormConfig() {
try {
const response = await axios.get('/api/form-config');
return response.data;
} catch (error) {
console.error('Failed to load form configuration', error);
return { rule: [], option: {} };
}
}
// Save form configuration
async function saveFormConfig(ruleJson, optionsJson) {
try {
await axios.post('/api/form-config', { rule: ruleJson, options: optionsJson });
} catch (error) {
console.error('Failed to save form configuration', error);
}
}
Related links
- Detailed introduction of FcDesigner: Click to view