组件关联外部数据

在 FormCreate 中，loadData 属性允许从本地或外部数据源加载数据，并将其插入到表单组件的特定位置。此功能在处理动态表单数据时非常有用。

此功能内部是通过自定义属性方式实现。

加载数据

使用 loadData 属性从外部数据源动态加载选项数据到表单组件中，实现表单选项的异步更新和动态绑定功能。

类型

interface LoadDataEffectOption {
    // 数据名
    attr: String;
    // 插入位置, 默认 `options`
    to?: String;
    // 加载时是否深拷贝, 默认为 `false`
    copy?: boolean;
    // 数据源变化时, 是否同步修改, 默认为 `true`
    watch?: boolean;
    //是否直接修改组件规则, 默认为 `false`
    modify: boolean;
}
type LoadData = LoadDataEffectOption | LoadDataEffectOption[];

注意

通过设置 copy 属性，可以在加载时深拷贝数据，以防止数据引用带来的副作用。

当 watch 为 true 时，数据源发生变化会自动更新表单组件的数据。

给 value 赋值时必须同时设置 modify 为 true，否则赋值操作不会生效。

如果需要关联对象中的属性值，可通过 rule.variableName.attributeName 格式使用嵌套属性。

使用方法

1. 通过 formCreate.setData 方法写入数据

在使用 loadData 之前，可以通过 formCreate.setData 方法预加载数据：

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

2. 在 loadData 中配置对应的数据名

在表单规则中，使用 loadData 配置项来加载数据：

const rule = {
    effect: {
        loadData: {
            // 数据名
            attr: 'labelOptions',
            // 插入位置
            to: 'props.options'
        }
    }
}

内置变量

FormCreate提供了一些内置变量，用于获取不同来源的数据：

变量名称	描述
$topForm	获取外层表单中的数据
$form	获取表单中的数据
$options	获取表单配置中的数据
$cookie	获取cookie中的数据
$localStorage	获取localStorage中的数据
$sessionStorage	获取sessionStorage中的数据
$mobile	当前是否是移动端
$preview	当前是否是阅读模式

例如: 获取表单中name字段的值

const rule = {
    effect: {
        loadData: {
            // 数据名
            attr: '$form.name',
            // 插入位置
            to: 'value',
            //直接修改组件规则
            modify: true
        }
    }
}
//或者 api.getData('$form.name');

获取cookie中的token数据

const rule = {
    effect: {
        loadData: {
            // 数据名
            attr: '$cookie.token',
            // 插入位置
            to: 'props.headers.token',
            //直接修改组件规则
            modify: true
        }
    }
}

API 介绍

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');

示例

根据用户角色动态加载表单选项

在实际业务中，可能需要根据用户的角色来动态显示不同的表单选项。通过 loadData 配合 setData 和 setDataDriver，我们可以轻松实现这一点。

// 假设用户角色存储在 Vuex 中
formCreate.setDataDriver('$roleOptions', function(key) {
    const role = $store.state.user.role;
    if (key === 'admin') {
        return $store.state.admin.role;
        // return [
        //     { label: '管理员选项1', value: 'admin_option_1' },
        //     { label: '管理员选项2', value: 'admin_option_2' }
        // ];
    } else {
        return $store.state.user.role;
        // return [
        //     { label: '用户选项1', value: 'user_option_1' },
        //     { label: '用户选项2', value: 'user_option_2' }
        // ];
    }
});


const rules = [
    {
        type: 'select',
        field: 'role_based_options',
        title: '根据角色选择',
        effect: {
            loadData: {
                attr: '$roleOptions.admin',
                to: 'options'
            }
        }
    }
];

依赖于外部数据源的实时更新表单

在复杂的企业应用中，表单可能需要实时依赖于外部数据源（如库存系统）进行数据更新。使用 refreshData，可以确保表单中的数据始终保持最新状态。

// 定期从外部系统刷新库存数据
setInterval(() => {
    fetch('/api/inventory')
        .then(res => res.json())
        .then(data => {
            formCreate.setData('inventoryOptions', data);
            formCreate.refreshData('inventoryOptions');
        });
}, 60000);  // 每分钟刷新一次


const rules = [
    {
        type: 'select',
        field: 'product',
        title: '选择产品',
        effect: {
            loadData: {
                attr: 'inventoryOptions',
                to: 'options'
            }
        }
    }
];

基于其他字段的选择动态加载数据

在复杂表单中，用户选择一个字段的值后，可能需要动态加载与该选择相关的数据。通过 loadData 配合 onChange 事件，可以实现这样的逻辑。

// 初始化类别数据
formCreate.setData('categoryOptions', {
    electronics: [
        { label: '手机', value: 'phone' },
        { label: '电脑', value: 'computer' }
    ],
    clothing: [
        { label: 'T恤', value: 'tshirt' },
        { label: '牛仔裤', value: 'jeans' }
    ]
});


const rules = [
    {
        type: 'select',
        field: 'category',
        title: '选择类别',
        options: [
            { label: '电子产品', value: 'electronics' },
            { label: '服装', value: 'clothing' }
        ],
        inject: true,
        on: {
            change(inject, val) {
                const products = inject.api.getData('categoryOptions')[val] || [];
                inject.api.getRule('products').options = products;
            }
        }
    },
    {
        type: 'select',
        field: 'products',
        title: '选择产品',
        options: []
    }
];

以上展示了 FormCreate 在处理复杂动态表单场景中的强大功能。通过灵活使用 loadData、setData、onChange 等方法，您可以实现各种复杂的业务逻辑，使表单更加智能和动态化。无论是实时校验、依赖关系处理，还是动态数据加载，FormCreate 都能提供强大的支持。