获取外部数据

本文介绍如何通过 setData 和 getData 方法在 form-create 中获取和管理外部数据。你将学习如何在组件中定义、传递、监听和使用外部数据，以及在事件中传递数据的方法。

数据结构

setData

挂载自定义数据，使其在表单中可用，方便在组件间共享数据。

• 类型：

type SetData = (name:string,value:any) => void;

• 示例：

 formCreate.setData('options',[
        {label:'好用',value:0},
        {label:'快速',value:1},
        {label:'高效',value:2},
        {label:'全能',value:3},
 ]);

setDataDriver

导入自定义的数据获取函数，允许你根据特定的逻辑从外部数据源中获取数据。

• 类型：

type SetDataDriver = (id: string, callback: (key: string) => any) => void;

• 示例：

formCreate.setDataDriver('$user', function(key) {
    return $store.state.user[key];
});

setDataDriver 方法允许你为表单指定数据驱动函数，使得表单组件可以动态地获取数据。例如，你可以从 Vuex 状态管理中获取用户数据，并在表单中显示。

getData

获取先前通过 setData 挂载的自定义数据。

• 类型：

type GetData = (name: string) => any;

• 示例：

const options = formCreate.getData('options');
console.log(options);

removeData

移除之前通过 setData 方法挂载的自定义数据。

• 类型：

type RemoveData = (name:string) => void;

• 示例：

formCreate.removeData('options');

refreshData

手动刷新与特定数据相关的表单渲染，确保表单组件的显示和数据保持同步。

• 类型：

type RefreshData = (name:string) => void;

• 示例：

formCreate.refreshData('options');

以下是 Api 外部数据管理相关的数据结构及简明解释：

interface Api {
  // 设置外部数据，支持在表单中使用外部数据源
  setData(id: string, value?: any): void;
  // 获取外部数据，返回之前设置的数据对象
  getData(id: string, defaultValue?: any): any;
  // 刷新与外部数据相关的组件，确保数据变更后 UI 同步更新
  refreshData(id: string): void;
}

外部数据传递

在表单组件中，我们通常需要在组件与外部数据之间进行通信。

将数据用 ref 包裹后，可以方便地监听数据的变化。setData 支持传递任意类型的数据。

1. 在组件中定义和添加数据

在组件的 mounted 生命周期中，你可以定义和添加外部数据：

import {formCreate} from '@form-create/designer';
import { ref, watch } from 'vue';


export default {
    name: 'app',
    mounted() {
        // 定义数据对象，并用 ref 包裹以便监听变化
        const data = ref({
            id: 'ref_Fnfglyptoxuhb6c'
        });
        // 监听数据变化，方便调试或执行特定操作
        watch(data, () => {
            console.log('data 发生变化');
        }, { deep: true });
        // 使用 formCreate 的 setData 方法添加外部数据
        formCreate.setData('data', data);
        // 设置一个外部回调函数，例如表单提交时的处理逻辑
        formCreate.setData('callback', (formData) => {
            // 这里可以添加提交表单的逻辑
        });
    },
    unmounted() {
        // 在组件卸载时，清除添加的外部数据，避免内存泄漏
        formCreate.removeData('data');
        formCreate.removeData('callback');
    }
};

2. 在组件事件中获取并修改数据

在组件的事件中，你可以通过 getData 获取并修改外部数据，例如在按钮点击时修改数据：

function handleClick($inject) {
    // 先获取外部数据的引用
    const data = $inject.api.getData('data');
    // 修改数据，例如更新表单项的 ID
    data.value.id = $inject.rule._fc_id;
    // 执行外部回调函数，例如提交表单
    $inject.api.getData('callback')();
}

在事件中传递数据

在某些情况下，你可能需要在组件事件之间传递数据。例如，在点击按钮打开弹窗前保存当前表单项的 ID，然后在弹窗提交时使用该 ID。

1. 配置按钮的点击事件

function click($inject) {
    // 获取当前表单项的 ID，并保存到外部数据中
    $inject.api.setData('id', $inject.api.getValue('id'));
    // 设置弹窗关闭时的回调函数
    $inject.api.setData('onClose', () => {
        // 清除保存的 ID
        $inject.api.removeData('id');
    });
    // 打开指定的弹窗
    $inject.api.open('ref_F2vulxvqc841dac');
}

2. 配置弹窗的提交事件

function submit($inject) {
    // 获取表单数据和外部保存的 ID
    const formData = $inject.args[0];
    const id = $inject.api.getData('id');
    // 提交表单数据，同时传递保存的 ID
    $inject.api.fetch({
        action: 'xxxx?id=' + id,
        method: 'post',
        data: formData
    }).then(res => {
        // 提交成功后，执行关闭弹窗的回调函数
        $inject.api.getData('onClose')();
    });
}

外部数据的动态更新

假设我们需要根据用户操作实时更新外部数据，并让表单响应这些变化。例如，根据用户选择的不同选项，动态调整表单中的可见字段。

import formCreate from '@form-create/element-ui';
import { ref, watch } from 'vue';


export default {
    name: 'app',
    setup() {
        // 定义一个响应式状态，用于控制表单项的显示与隐藏
        const visibility = ref(true);
        // 监听状态变化，自动更新外部数据
        watch(visibility, (newValue) => {
            formCreate.setData('visibility', newValue);
        });
        // 返回状态以便在模板中绑定
        return {
            visibility
        };
    },
    mounted() {
        // 初始化外部数据
        formCreate.setData('visibility', true);
    }
};

在表单组件中，使用 getData 方法来控制字段的显示或隐藏：

function updateFormVisibility($inject) {
    // 获取外部数据
    const isVisible = $inject.api.getData('visibility');
    // 根据外部数据调整表单项的可见性
    $inject.api.updateRule($inject.rule.id, {
        props: {
            display: isVisible
        }
    });
}

动态设置回调函数

除了数据，回调函数也可以动态设置。例如，用户可以根据特定条件设置不同的提交逻辑。

function setDynamicCallback($inject, condition) {
    // 根据条件设置不同的回调函数
    if (condition) {
        $inject.api.setData('callback', (formData) => {
            console.log('条件为真，提交数据：', formData);
            // 执行特定的提交逻辑
        });
    } else {
        $inject.api.setData('callback', (formData) => {
            console.log('条件为假，执行其他操作');
            // 执行不同的操作
        });
    }
}

在事件中执行回调：

function onSubmit($inject) {
    // 获取并执行动态设置的回调函数
    $inject.api.getData('callback')($inject.args[0]);
}

使用异步数据源

在实际应用中，外部数据有时来自异步数据源，例如 API 请求或 WebSocket 消息。在这种情况下，form-create 可以方便地与这些异步数据源集成。

1. 加载和处理异步数据

假设我们需要在组件挂载时从远程服务器加载数据，并将其注入到表单中。

import formCreate from '@form-create/element-ui';
import { ref, onMounted } from 'vue';
import axios from 'axios';


export default {
    name: 'app',
    setup() {
        const data = ref(null);
        onMounted(async () => {
            // 从 API 获取数据
            const response = await axios.get('/api/data');
            data.value = response.data;
            // 将获取的数据设置为外部数据
            formCreate.setData('asyncData', data.value);
        });
        return {
            data
        };
    }
};

2. 动态更新表单项

当异步数据加载完成后，你可以动态更新表单项，以反映最新的数据状态。

function updateFormWithAsyncData($inject) {
    // 获取异步加载的外部数据
    const asyncData = $inject.api.getData('asyncData');
    // 更新表单项内容，例如填充表单中的选择框
    $inject.api.updateRule($inject.rule.id, {
        props: {
            options: asyncData.options  // 使用异步数据填充选项
        }
    });
}

通过这些方法，你可以灵活地在 form-create 中传递和管理外部数据，确保组件之间的数据流畅通无阻。