管理表单列表

在表单设计器中，您可以通过 props.list 配置来管理左侧的表单列表。表单列表功能使用户能够高效地加载和切换不同的表单模板或业务表单。

数据结构

FormList 定义了字段列表的结构：

type FormItem = {
    //表单名称
    label: string;
    //是否禁用
    disabled?: boolean;
    //表单生成规则
    rule?: string | Rule[];
    //表单配置
    options?: string | Options;
    //加载表单规则
    load?: (item: FormItem) => ({
        rule?: string | Rule[];
        options?: string | Options;
    } | Promise<{
        rule?: string | Rule[];
        options?: string | Options;
    }>);
    //子表单
    children?: FormItem[];
}


type FormList = FormItem[];

注意: rule 的优先级高于 load，如果同时定义，使用 rule 生成表单。

定义表单列表

下面是一个示例，展示如何定义一个表单列表：

vue

<template>
    <fc-designer ref="designer" :list="list"/>
</template>
<script setup>
    const list = [{
        label: '组件联动',
        children: [
            {
                label: '公式计算',
                info: '使用公式自动计算字段值，实现数据的动态运算和联动更新',
                rule: "[{\"type\":\"input\",\"field\":\"Fynvm1upczxam2c\",\"title\":\"商品价格\",\"info\":\"\",\"$required\":false,\"_fc_id\":\"id_Fvkym1upczxam3c\",\"name\":\"ref_F1v7m1upczxam4c\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"input\"},{\"type\":\"input\",\"field\":\"Fabgm1upd7znm5c\",\"title\":\"销售数量\",\"info\":\"\",\"$required\":false,\"_fc_id\":\"id_Fdwrm1upd7znm6c\",\"name\":\"ref_F4ssm1upd7znm7c\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"input\"},{\"type\":\"input\",\"field\":\"F1gum1updrnum8c\",\"title\":\"退款数量\",\"info\":\"\",\"$required\":false,\"_fc_id\":\"id_F3cpm1updrnum9c\",\"name\":\"ref_Far3m1updrnumac\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"input\"},{\"type\":\"fcValue\",\"field\":\"F27gm1updxm7mbc\",\"title\":\"销售总价\",\"info\":\"\",\"_fc_id\":\"id_Fk79m1updxm7mcc\",\"name\":\"ref_Fse7m1updxm7mdc\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"fcValue\",\"computed\":{\"value\":\"IF(GT(Fynvm1upczxam2c,0), MUL(Fynvm1upczxam2c || '', '' + SUB(TONUMBER(Fabgm1upd7znm5c || 0),TONUMBER(F1gum1updrnum8c || 0))), 0)\"}},{\"type\":\"fcValue\",\"field\":\"F8lbm1uphskcmec\",\"title\":\"中文大写\",\"info\":\"\",\"_fc_id\":\"id_Fvxom1uphskcmfc\",\"name\":\"ref_Fsn5m1uphskcmgc\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"fcValue\",\"computed\":{\"value\":\"TOCHINSESAMOUNT(F27gm1updxm7mbc || 0)\"}}]",
                options: "{\"form\":{\"inline\":false,\"hideRequiredAsterisk\":false,\"labelPosition\":\"right\",\"size\":\"default\",\"labelWidth\":\"125px\"},\"globalEvent\":{},\"globalData\":{},\"resetBtn\":{\"show\":false,\"innerText\":\"重置\"},\"submitBtn\":{\"show\":true,\"innerText\":\"提交\"},\"formData\":{\"Fynvm1upczxam2c\":\"100\",\"Fabgm1upd7znm5c\":\"300\",\"F1gum1updrnum8c\":\"90\",\"F27gm1updxm7mbc\":21000,\"F8lbm1uphskcmec\":\"贰万壹仟元整\"}}",
            },
            {
                label: '绑定变量',
                info: '将组件值与变量关联，实现数据共享和实时更新',
                rule: "[{\"type\":\"elDivider\",\"children\":[\"基础\"],\"_fc_id\":\"id_Flg8m1uqc2vaetc\",\"name\":\"ref_F9u8m1uqc2vaeuc\",\"_fc_drag_tag\":\"elDivider\",\"_hidden\":false,\"display\":true,\"hidden\":false},{\"type\":\"select\",\"field\":\"Fvixlz6gmhetc7c\",\"title\":\"选择器\",\"info\":\"\",\"effect\":{\"fetch\":\"\"},\"$required\":false,\"options\":[{\"label\":\"选项00\",\"value\":\"1\"},{\"label\":\"选项01\",\"value\":\"2\"},{\"label\":\"选项02\",\"value\":\"3\"}],\"_fc_id\":\"id_Fdt0lz6gmhetc8c\",\"name\":\"ref_Flkglz6gmhetc9c\",\"_fc_drag_tag\":\"select\",\"_hidden\":false,\"display\":true,\"hidden\":false},{\"type\":\"select\",\"field\":\"Fe1fm1uqcszkevc\",\"title\":\"自动同步\",\"info\":\"\",\"effect\":{\"fetch\":\"\"},\"$required\":false,\"options\":[{\"label\":\"选项00\",\"value\":\"1\"},{\"label\":\"选项01\",\"value\":\"2\"},{\"label\":\"选项02\",\"value\":\"3\"}],\"_fc_id\":\"id_Fswqm1uqcszkewc\",\"name\":\"ref_Flkglz6gmhetc9c\",\"_fc_drag_tag\":\"select\",\"_hidden\":false,\"display\":true,\"hidden\":false,\"$loadData\":[{\"attr\":\"$form.Fvixlz6gmhetc7c\",\"to\":\"value\",\"modify\":true}]},{\"type\":\"elDivider\",\"children\":[\"计算\"],\"_fc_id\":\"id_Fudxm1uqdtglexc\",\"name\":\"ref_F9u8m1uqc2vaeuc\",\"_fc_drag_tag\":\"elDivider\",\"_hidden\":false,\"display\":true,\"hidden\":false},{\"type\":\"input\",\"field\":\"F3k5m1ur2ymyb4c\",\"title\":\"前缀\",\"info\":\"\",\"$required\":false,\"_fc_id\":\"id_F1ugm1ur2ymyb5c\",\"name\":\"ref_Fcvfm1ur2ymyb6c\",\"_fc_drag_tag\":\"input\",\"_hidden\":false,\"display\":true,\"hidden\":false},{\"type\":\"select\",\"field\":\"Fho3m1uqgvqcfcc\",\"title\":\"选择器\",\"info\":\"\",\"effect\":{\"fetch\":\"\"},\"$required\":false,\"options\":[{\"label\":\"选项01\",\"value\":\"1\"},{\"label\":\"选项02\",\"value\":\"2\"},{\"label\":\"选项03\",\"value\":\"3\"}],\"_fc_id\":\"id_Fcivm1uqgvqcfdc\",\"name\":\"ref_Fk33m1uqgvqcfec\",\"_fc_drag_tag\":\"select\",\"_hidden\":false,\"display\":true,\"hidden\":false},{\"type\":\"input\",\"field\":\"Fwlnm1uqgy8lfgc\",\"title\":\"输入框\",\"info\":\"\",\"$required\":false,\"_fc_id\":\"id_F2vwm1uqgy8lfhc\",\"name\":\"ref_Ftdcm1uqgy8lfic\",\"_fc_drag_tag\":\"input\",\"_hidden\":false,\"display\":true,\"hidden\":false,\"$loadData\":[{\"attr\":\"$var.var_Fi61m2a3znylapc\",\"to\":\"value\",\"modify\":true}]},{\"type\":\"elDivider\",\"children\":[\"加载选项\"],\"_fc_id\":\"id_Fy3gm1urxwfzb7c\",\"name\":\"ref_F9u8m1uqc2vaeuc\",\"_fc_drag_tag\":\"elDivider\",\"_hidden\":false,\"display\":true,\"hidden\":false},{\"type\":\"input\",\"field\":\"Fwy9m1uryfv6bec\",\"title\":\"前缀\",\"info\":\"\",\"$required\":false,\"_fc_id\":\"id_Fj9sm1uryfv6bfc\",\"name\":\"ref_Ftc1m1uryfv6bgc\",\"_fc_drag_tag\":\"input\",\"_hidden\":false,\"display\":true,\"hidden\":false},{\"type\":\"select\",\"field\":\"Fwhzm1uryccob8c\",\"title\":\"选择器\",\"info\":\"\",\"effect\":{\"fetch\":\"\"},\"$required\":false,\"options\":[{\"label\":\"选项01\",\"value\":\"1\"},{\"label\":\"选项02\",\"value\":\"2\"},{\"label\":\"选项03\",\"value\":\"3\"}],\"_fc_id\":\"id_F3lum1uryccob9c\",\"name\":\"ref_F21bm1uryccobac\",\"_fc_drag_tag\":\"select\",\"_hidden\":false,\"display\":true,\"hidden\":false,\"$loadData\":[{\"attr\":\"$var.var_Fiqem2a443swaqc\",\"to\":\"options\"}]},{\"type\":\"elDivider\",\"children\":[\"获取Token\"],\"_fc_id\":\"id_Fn6nm1us1nneblc\",\"name\":\"ref_F9u8m1uqc2vaeuc\",\"_fc_drag_tag\":\"elDivider\",\"_hidden\":false,\"display\":true,\"hidden\":false},{\"type\":\"upload\",\"field\":\"Fffzm1us1lqfbic\",\"title\":\"上传\",\"info\":\"\",\"$required\":false,\"props\":{\"action\":\"/\",\"onSuccess\":\"[[FORM-CREATE-PREFIX-function anonymous(res,file\\n) {\\nfile.url = res.data.url;\\n}-FORM-CREATE-SUFFIX]]\"},\"_fc_id\":\"id_Fvyjm1us1lqfbjc\",\"name\":\"ref_Fh4rm1us1lqfbkc\",\"_fc_drag_tag\":\"upload\",\"_hidden\":false,\"display\":true,\"hidden\":false,\"$loadData\":[{\"attr\":\"$var.var_Fhp2m2a46gezarc\",\"to\":\"props.headers\"}]}]",
                options: "{\"form\":{\"inline\":false,\"hideRequiredAsterisk\":false,\"labelPosition\":\"right\",\"size\":\"default\",\"labelWidth\":\"125px\"},\"globalEvent\":{},\"globalData\":{},\"resetBtn\":{\"show\":false,\"innerText\":\"重置\"},\"submitBtn\":{\"show\":true,\"innerText\":\"提交\"},\"globalVariable\":{\"var_Fi61m2a3znylapc\":{\"label\":\"自动计算\",\"handle\":\"[[FORM-CREATE-PREFIX-function handle(get, api){return get('$form.F3k5m1ur2ymyb4c','default') + '-'+ get('$form.Fho3m1uqgvqcfcc', '');}-FORM-CREATE-SUFFIX]]\"},\"var_Fiqem2a443swaqc\":{\"label\":\"生成选项\",\"handle\":\"[[FORM-CREATE-PREFIX-function handle(get, api){const prefix = get('$form.Fwy9m1uryfv6bec','default');\\nreturn [\\n      {\\n        \\\"label\\\": prefix + \\\"-选项00\\\",\\n        \\\"value\\\": \\\"1\\\"\\n      },\\n      {\\n        \\\"label\\\": prefix + \\\"-选项01\\\",\\n        \\\"value\\\": \\\"2\\\"\\n      },\\n      {\\n        \\\"label\\\": prefix + \\\"-选项02\\\",\\n        \\\"value\\\": \\\"3\\\"\\n      }\\n    ];}-FORM-CREATE-SUFFIX]]\"},\"var_Fhp2m2a46gezarc\":{\"label\":\"TOKEN\",\"handle\":\"[[FORM-CREATE-PREFIX-function handle(get, api){return {Token: get('$cookie.token', 'default')};}-FORM-CREATE-SUFFIX]]\"}}}",
            },
            {
                label: '数据联动',
                info: '实现组件间的数据自动同步，根据输入动态更新其他字段',
                rule: "[{\"type\":\"switch\",\"field\":\"Fum1m1upvn0nchc\",\"title\":\"开启联动\",\"info\":\"\",\"$required\":false,\"_fc_id\":\"id_Foe1m1upvn0ncic\",\"name\":\"ref_Fn1vm1upvn0ncjc\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"switch\"},{\"type\":\"select\",\"field\":\"F7wfm1upvhevcbc\",\"title\":\"用户列表\",\"info\":\"\",\"effect\":{\"fetch\":\"\"},\"$required\":false,\"options\":[{\"label\":\"用户01\",\"value\":\"1\"},{\"label\":\"用户02\",\"value\":\"2\"},{\"label\":\"用户03\",\"value\":\"3\"}],\"_fc_id\":\"id_Fgxmm1upvhewccc\",\"name\":\"ref_Fz9wm1upvhewcdc\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"select\"},{\"type\":\"input\",\"field\":\"Flxtm1upvlvgcec\",\"title\":\"用户ID\",\"info\":\"\",\"$required\":true,\"props\":{\"readonly\":true},\"_fc_id\":\"id_F4q5m1upvlvgcfc\",\"name\":\"ref_Fnffm1upvlvgcgc\",\"display\":true,\"hidden\":false,\"_fc_drag_tag\":\"input\",\"computed\":{\"value\":{\"mode\":\"AND\",\"group\":[{\"field\":\"Fum1m1upvn0nchc\",\"condition\":\"==\",\"value\":true}],\"linkage\":\"F7wfm1upvhevcbc\"}}}]",
            },
            {
                label: '控制组件状态',
                info: '使用公式和逻辑条件灵活设置组件的显隐、禁用等状态',
                rule: "[{\"type\":\"radio\",\"field\":\"F52hlxvqk4uge8c\",\"title\":\"逻辑控制\",\"info\":\"\",\"effect\":{\"fetch\":\"\"},\"$required\":false,\"options\":[{\"label\":\"必填\",\"value\":1},{\"label\":\"禁用\",\"value\":2},{\"label\":\"隐藏\",\"value\":3}],\"_fc_id\":\"id_F5eqlxvqk4uge9c\",\"name\":\"ref_F363lxvqk4ugeac\",\"_fc_drag_tag\":\"radio\",\"_hidden\":false,\"display\":true,\"hidden\":false},{\"type\":\"switch\",\"field\":\"Febwlxvqktmiebc\",\"title\":\"逻辑开关\",\"info\":\"\",\"$required\":false,\"_fc_id\":\"id_Fl9elxvqktmiecc\",\"name\":\"ref_F69wlxvqktmiedc\",\"_fc_drag_tag\":\"switch\",\"_hidden\":false,\"display\":true,\"hidden\":false},{\"type\":\"input\",\"field\":\"Fr0slxvqlc13eec\",\"title\":\"受控组件\",\"info\":\"\",\"$required\":false,\"_fc_id\":\"id_F3k7lxvqlc13efc\",\"name\":\"ref_Fhvvlxvqlc13egc\",\"_fc_drag_tag\":\"input\",\"_hidden\":false,\"display\":true,\"hidden\":false,\"computed\":{\"hidden\":{\"mode\":\"AND\",\"group\":[{\"field\":\"F52hlxvqk4uge8c\",\"condition\":\"==\",\"value\":3},{\"field\":\"Febwlxvqktmiebc\",\"condition\":\"==\",\"value\":true}]},\"$required\":{\"mode\":\"AND\",\"group\":[{\"field\":\"Febwlxvqktmiebc\",\"condition\":\"==\",\"value\":true},{\"field\":\"F52hlxvqk4uge8c\",\"condition\":\"==\",\"value\":1}]},\"props.disabled\":{\"mode\":\"AND\",\"group\":[{\"field\":\"F52hlxvqk4uge8c\",\"condition\":\"==\",\"value\":2},{\"field\":\"Febwlxvqktmiebc\",\"condition\":\"==\",\"value\":true}]}}}]",
            }
        ]
    }]
</script>

使用场景

加载表单:

方便地加载预设的表单模板或业务表单，为不同应用场景快速提供表单基础，减少设计时间。

切换表单:

支持在多个表单模板或业务表单之间快速切换，提升设计效率和灵活性，用户可以根据具体需求迅速调整表单结构。

动态配置:

利用 load 方法，可以动态加载表单规则和配置，适应不同的业务场景和用户需求。

模块化设计:

将表单分为多个子表单，使得设计更加清晰、结构化，便于后续的维护和扩展。

管理表单列表 ​

数据结构 ​

定义表单列表 ​

使用场景 ​

管理表单列表

数据结构

定义表单列表

使用场景