FcDesigner Pro

Appearance

保存字段 ​

提供了保存字段的功能，使开发者能够将当前选中的字段保存为可复用的模板，以便在其他表单中快速使用。这对于标准化字段设计和提高开发效率具有重要意义。

save.png

注意

保存字段功能仅在选中具有 field 属性的字段时可用，确保字段具有完整的配置信息。

显示保存字段按钮 ​

设计器中内置了一个保存字段按钮，通过 config.showSaveFieldBtn 配置项来控制其显示。此功能允许用户将当前选中的字段保存为模板。

以下代码展示了如何在配置中启用保存字段按钮：

js
{
    config: {
        showSaveFieldBtn: true //默认开启, 为 false 时关闭
    }
}

保存字段数据 ​

当用户点击保存字段按钮时，会触发 saveField 事件。开发者可以自定义处理该事件以实现字段模板的保存功能。

保存字段示例 ​

以下是保存字段的一个简单实现示例：

vue
<template>
    <fc-designer ref="designer" @saveField="handleSaveField" :config="config"/>
</template>
<script setup>
    const config = {
        showSaveFieldBtn: true
    }
    function handleSaveField(activeRule) {
        // 示例：调用后端接口保存字段模板
        axios.post('/api/saveFieldTemplate', {
            fieldConfig: activeRule,
            fieldName: activeRule.field,
            fieldType: activeRule.type,
            fieldTitle: activeRule.title,
        }).then(response => {
            // 处理保存成功的逻辑
            console.log('字段模板保存成功', response.data);
            // 可以显示成功提示
            ElMessage.success('字段模板保存成功');
        }).catch(error => {
            // 错误处理
            console.error('字段模板保存失败', error);
            ElMessage.error('字段模板保存失败');
        });
    }
</script>

通过上述代码，当用户点击保存字段按钮时，当前选中字段的配置信息会被发送到指定的 API 接口进行保存。

读取字段列表 ​

保存的字段模板可以通过接口读取，并添加到设计器的字段列表中，方便用户快速复用已保存的字段配置。

读取字段列表示例 ​

以下示例展示了如何从后端接口读取字段模板，并将其添加到设计器的字段列表中：

vue
<template>
    <fc-designer 
        ref="designer" 
        :field="fieldList"
        :config="config"
    />
</template>
<script setup>
import { ref, onMounted } from 'vue'
const fieldList = ref([])
const config = {
    showSaveFieldBtn: true
}
// 读取字段模板
async function loadFieldTemplates() {
    try {
        const response = await axios.get('/api/getFieldTemplates');
        const templates = response.data;
        // 将模板转换为字段列表格式
        const templateFields = templates.map(template => ({
            label: template.fieldTitle,
            field: template.fieldName,
            rule: template.fieldConfig,
        }));
        // 添加到现有字段列表
        fieldList.value = [
            ...fieldList.value,
            {
                label: '自定义模板',
                children: templateFields
            }
        ];
    } catch (error) {
        console.error('读取字段模板失败', error);
        ElMessage.error('读取字段模板失败');
    }
}
// 组件挂载时加载字段模板
onMounted(() => {
    loadFieldTemplates();
});
</script>

添加到字段ID选择列表 ​

除了将保存的字段模板添加到左侧字段列表（用于拖拽）外，您还可以将这些模板添加到 config.fieldList 中，使其成为字段ID的候选选项。这样用户在选择字段ID时，可以直接从已保存的模板中选择。

字段ID选择列表配置 ​

通过设置 config.fieldList 属性，可以将字段模板配置为字段ID的选择项。这种配置通常用于：

  1. 限制用户只能选择预定义的字段
  2. 提供标准的字段命名规范
  3. 在子表单组件中建立字段联动关系

配置示例 ​

以下示例展示如何将保存的字段模板添加到字段ID选择列表中：

vue
<template>
    <fc-designer ref="designer" :config="config"/>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const config = ref({
    showSaveFieldBtn: true,
    // 字段ID只能从选择项中选择，不能手动输入
    fieldReadonly: true,
    // 字段ID选择项列表
    fieldList: []
})
// 读取字段模板并配置到fieldList
async function loadFieldList() {
    try {
        const response = await axios.get('/api/getFieldTemplates');
        const templates = response.data;
        // 将模板转换为fieldList格式
        const fieldItems = templates.map(template => ({
            value: template.fieldName,  // 字段值
            label: template.fieldTitle, // 显示标签
        }));
        // 配置fieldList
        config.value.fieldList = [
            {
                value: 'custom_template',
                label: '自定义模板',
                children: fieldItems
            }
        ];
    } catch (error) {
        console.error('读取字段列表失败', error);
        ElMessage.error('读取字段列表失败');
    }
}
// 组件挂载时加载字段列表
onMounted(() => {
    loadFieldList();
});
</script>

通过以上配置，您可以将保存的字段模板充分利用，既能在左侧字段列表中进行拖拽使用，又能在字段ID选择器中快速选择，大大提高了表单设计的效率和规范性。