import{ax as i,z as a,A as t,b2 as e}from"./chunks/framework.DkLJC2NO.js";const g=JSON.parse('{"title":"dataSourceService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/dataSourceServiceMethods.md","filePath":"api/editor/dataSourceServiceMethods.md"}'),l={name:"api/editor/dataSourceServiceMethods.md"};function n(p,s,h,k,r,d){return t(),a("div",null,[...s[0]||(s[0]=[e(`
参数:
{StateKey} name 状态键名返回:
{any} 对应的状态值详情:
获取数据源服务的内部状态
可用的状态键:
datasourceTypeList: 数据源类型列表dataSources: 当前数据源列表editable: 是否可编辑configs: 数据源表单配置values: 数据源默认值events: 数据源事件列表methods: 数据源方法列表示例:
import { dataSourceService } from '@tmagic/editor';
const dataSources = dataSourceService.get('dataSources');
console.log(dataSources);参数:
{StateKey} name 状态键名{any} value 状态值返回:
{void}详情:
设置数据源服务的内部状态
示例:
import { dataSourceService } from '@tmagic/editor';
dataSourceService.set('editable', false);扩展支持: 是
参数:
{string} type 数据源类型,默认为 'base'返回:
详情:
获取指定类型数据源的表单配置
示例:
import { dataSourceService } from '@tmagic/editor';
const config = dataSourceService.getFormConfig('http');
console.log(config);扩展支持: 是
参数:
{string} type 数据源类型返回:
{void}详情:
设置指定类型数据源的表单配置
示例:
import { dataSourceService } from '@tmagic/editor';
dataSourceService.setFormConfig('http', [
{
name: 'url',
text: '请求地址',
type: 'text',
},
{
name: 'method',
text: '请求方法',
type: 'select',
options: [
{ text: 'GET', value: 'GET' },
{ text: 'POST', value: 'POST' },
],
},
]);扩展支持: 是
参数:
{string} type 数据源类型,默认为 'base'返回:
详情:
获取指定类型数据源的默认值
示例:
import { dataSourceService } from '@tmagic/editor';
const defaultValue = dataSourceService.getFormValue('http');
console.log(defaultValue);扩展支持: 是
参数:
{string} type 数据源类型返回:
{void}详情:
设置指定类型数据源的默认值
示例:
import { dataSourceService } from '@tmagic/editor';
dataSourceService.setFormValue('http', {
type: 'http',
method: 'GET',
url: '',
});扩展支持: 是
参数:
{string} type 数据源类型,默认为 'base'返回:
详情:
获取指定类型数据源的事件列表
示例:
import { dataSourceService } from '@tmagic/editor';
const events = dataSourceService.getFormEvent('http');
console.log(events);扩展支持: 是
参数:
{string} type 数据源类型返回:
{void}详情:
设置指定类型数据源的事件列表
示例:
import { dataSourceService } from '@tmagic/editor';
dataSourceService.setFormEvent('http', [
{ label: '请求成功', value: 'success' },
{ label: '请求失败', value: 'error' },
]);扩展支持: 是
参数:
{string} type 数据源类型,默认为 'base'返回:
详情:
获取指定类型数据源的方法列表
示例:
import { dataSourceService } from '@tmagic/editor';
const methods = dataSourceService.getFormMethod('http');
console.log(methods);扩展支持: 是
参数:
{string} type 数据源类型返回:
{void}详情:
设置指定类型数据源的方法列表
示例:
import { dataSourceService } from '@tmagic/editor';
dataSourceService.setFormMethod('http', [
{ label: '发起请求', value: 'request' },
{ label: '重试', value: 'retry' },
]);扩展支持: 是
参数:
返回:
详情:
添加一个数据源,如果配置中没有id或id已存在,会自动生成新的id
示例:
import { dataSourceService } from '@tmagic/editor';
const newDs = dataSourceService.add({
type: 'http',
title: '用户信息',
url: '/api/user',
method: 'GET',
});
console.log(newDs.id); // 自动生成的id扩展支持: 是
参数:
{Object} options 可选配置 返回:
详情:
更新数据源
示例:
import { dataSourceService } from '@tmagic/editor';
const updatedDs = dataSourceService.update({
id: 'ds_123',
type: 'http',
title: '用户详情',
url: '/api/user/detail',
});
console.log(updatedDs);扩展支持: 是
参数:
{string} id 数据源id返回:
{void}详情:
删除指定id的数据源
示例:
import { dataSourceService } from '@tmagic/editor';
dataSourceService.remove('ds_123');扩展支持: 是
参数: 无
返回:
{string} 生成的唯一id详情:
生成一个唯一的数据源id,格式为 ds_ + guid
示例:
import { dataSourceService } from '@tmagic/editor';
const id = dataSourceService.createId();
console.log(id); // 'ds_xxx-xxx-xxx'参数:
{string} id 数据源id返回:
详情:
根据id获取数据源配置
示例:
import { dataSourceService } from '@tmagic/editor';
const ds = dataSourceService.getDataSourceById('ds_123');
console.log(ds);参数:
返回:
{void}详情:
复制组件时会带上组件关联的数据源,将关联的数据源存储到 localStorage
示例:
import { dataSourceService, editorService } from '@tmagic/editor';
const node = editorService.get('node');
dataSourceService.copyWithRelated(node);参数: 无
返回:
{void}详情:
粘贴数据源,从 localStorage 中读取复制的数据源并添加到当前页面
如果数据源id已存在,则不会覆盖
示例:
import { dataSourceService } from '@tmagic/editor';
dataSourceService.paste();参数: 无
返回:
{void}详情:
重置数据源服务状态,清空所有数据源
示例:
import { dataSourceService } from '@tmagic/editor';
dataSourceService.resetState();参数: 无
返回:
{void}详情:
销毁 dataSourceService,移除所有事件监听并重置状态
示例:
import { dataSourceService } from '@tmagic/editor';
dataSourceService.destroy();相对于use, usePlugin支持更加灵活更加细致的扩展, 上述方法中标记有扩展支持: 是的方法都支持使用usePlugin扩展
每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为,before可以用于修改传入参数,after可以用于修改返回的值
import { dataSourceService } from '@tmagic/editor';
dataSourceService.usePlugin({
beforeAdd(config) {
console.log('添加前:', config);
return [config];
},
afterAdd(result, config) {
console.log('添加后:', result);
return result;
},
});删掉当前设置的所有扩展
import { dataSourceService } from '@tmagic/editor';
dataSourceService.removeAllPlugins();