跪拜 Guibai
← All articles
Vue.js · Open Source · AI Programming

FcDesigner v3.6 Adds SQL Export, Letting Visual Forms Become Database Tables Directly

By 无懈可击 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Teams running low-code form workflows in Vue now have a direct path from visual form design to database schema, which removes a manual translation step that usually introduces drift between the form and its backing table. The diff capability makes the generated SQL reviewable against prior state instead of blindly destructive.

Summary

FcDesigner v3.6 ships a new SQL generation panel in its preview dialog. The panel produces CREATE TABLE statements from the current form and compares them with historical table structures, outputting change statements for added/removed tables and fields, modified fields, and renames. A required flag on a field is the only condition that triggers NOT NULL in the generated SQL, and the designer exposes getSQL and getSQLDiff methods for use from business code.

The release also upgrades tooltip editing to accept raw HTML, with a read-only input and a popup editor when line breaks are present, requiring formCreate 3.3.6+ or 2.7.32+. New button group components land for Element Plus and Ant Design Vue, letting a set of buttons share size and type configuration while each button's text stays individually editable, and Element Plus adds text-button styling with background color options. The preview dialog's four panels (form, components, HTML, SQL) can each be toggled on or off, and table form column headers now follow the designer's multi-language setup.

UI polish includes descriptive text in validation rule dropdowns and placeholder examples in the event/custom-validation editors. Component-level additions cover Ant Design Vue select search with label-or-value matching, Element Plus tree disable configuration, and a Vant select clear icon.

Takeaways
— The preview dialog gains a Generate SQL panel that emits CREATE TABLE statements from the current form.
— Historical table structure comparison produces change statements for new, dropped, and renamed tables and fields, as well as modified fields.
— NOT NULL appears in the generated SQL only when the corresponding field is marked required.
— getSQL and getSQLDiff methods expose the SQL generation for direct use in business-side code.
— Tooltip text supports HTML editing; content with line breaks switches the input to read-only and opens a popup editor.
— HTML tooltip support requires formCreate version 3.3.6+ or 2.7.32+.
— Element Plus and Ant Design Vue gain a button group component with unified size/type config and per-button text editing; Element Plus also adds text button styles and text button background colors.
— The four preview panels (form, generated components, generated HTML, generated SQL) can each be toggled for visibility independently.
— Table form column headers now respect the multi-language configuration, with per-language column names maintained separately.
— Validation rule dropdowns show explanatory text, and the event/custom-validation code editors include placeholder examples with parameter docs.
— Ant Design Vue selector supports search with matching by option label or option value.
— Element Plus tree control gains a disable configuration.
— Vant selector gets a clear icon.
Conclusions

Generating SQL directly from a visual form makes the schema a byproduct of the UI, which can speed up prototyping but risks baking form-level assumptions into the database layer without a human review step.

The diff-based SQL output positions the tool for iterating on existing forms, since teams can see the exact migration statements rather than regenerating tables from scratch.

Supporting HTML in tooltips is a power feature, but it asks teams to trust the renderer with raw markup, which may create a sanitization obligation depending on where the content originates.

Concepts & terms
Form generation rules
A JSON structure describing the components, layout, and configuration of a form built in FcDesigner. Saving and reloading this JSON restores the form exactly, and it feeds the renderer for producing the interactive UI.
SQL diff
A comparison between the SQL generated from the current form and the SQL of a previously stored table structure. The output lists only the changes (added/removed tables or fields, modified or renamed fields) rather than full DDL.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗