xinglie
commented
2 years ago 图片库和模板数据接口
在入口文件，如index.html中，启动设计器的入口配置相应的接口地址
designer.setup({
getImageUrl:'./apis/images.json',
getFieldUrl:'./apis/fields.json',
getTemplateUrl:'./apis/example.json'
});可到apis目录自行查看相应的接口数据：https://github.com/xinglie/report-designer/tree/master/apis
设计器初始化配置对象
/**
* 设计器支持的初始化对象
*/
interface DesignerOptions {
/**
* 站点名称，需要授权
*/
siteName?: string
/**
* 站点logo，需要授权
*/
siteLogo?: string
/**
* 主题色配置，需要授权
*/
themeBrand?: string
/**
* 主题反差色配置，需要授权
*/
themeContrast?: string
/**
* 版权信息，支持html，需要授权
*/
copyright?: string
/**
* 版本号，哪天打包的代码
*/
version?: string
/**
* 使用哪个view做为入口
*/
use?: string,
/**
* 应用根节点id
*/
rootId?: string,
/**
* 是否mini模式
*/
mini?: boolean
/**
* 拆分模式
*/
split?: boolean
/**
* 元素插件集合
*/
plugins?: string[]
/**
* 面板配置
*/
panels?: Report.OuterPanelsConfig
/**
* 工具栏控制
*/
toolbar?: Report.OuterViewConfig
/**
* 头部控制
*/
header?: Report.OuterViewConfig
/**
* 第三方地址配置
*/
providers?: Report.ProviderURLConfig
/**
* 预览页url
*/
viewerUrl?: string
/**
* 设计器自己的服务地址，打印页面使用
*/
rdsUrl?: string
/**
* 图片源接口地址
*/
getImageUrl?: string
/**
* 自定义字体接口地址
*/
getFontFaceUrl?: string
/**
* 数据源接口地址
*/
getFieldUrl?: string
/**
* 示例接口
*/
getTemplateUrl?: string
/**
* 获取示例内容接口
*/
getTemplateContentUrl?: string
/**
* 保存内容接口
*/
saveContentUrl?: string
/**
* 获取内容接口
*/
getContentUrl?: string
/**
* 图片上传接口
*/
imageUploadUrl?: string
/**
* 错误上报接口
*/
errorReportUrl?: string
/**
* 预设内容接口，进入设计器后，可通过该接口返回随机内容，填充设计区
*/
presetUrl?: string
/**
* 保存主题接口
*/
saveThemeUrl?: string
/**
* 解析绑定元素的url请求地址
*/
getBindUrl?: (bind: object) => string
/**
* 拦截所有接口请求，如果提供该配置则要在该配置内完成相应的接口请求
* @param url 请求地址
* @param options 请求配置信息
*/
io?:(url,options)=>object
/**
* 对接口响应内容做处理。该配置仅在你的接口无法返回{"data":object,"success":boolean,"message":string}这种格式时，
* 使用该配置来适配。通过该函数返回{"data":object,"success":boolean,"message":string}的数据结构
* 来让你现在的接口和设计器都无需修改代码即可配合工作
* @param response 响应数据
* @param url 哪个接口
* @returns 返回{"data":object,"success":boolean,"message":string}的结构对象
*/
response?: (response, url) => { success: boolean, data?: object, message?: string }
/**
* 对接口请求参数做处理
* @param request 请求对象
* @param url 哪个接口
* @returns 返回{ options, body, query }结构的数据
*/
request?: (request, url) => ({ options, body, query })
}
接口统一格式
项目中所有用到的接口均按以下统一格式返回
全部数据源接口
该接口返回后端都有哪些数据接口可供使用，可查看当前项目中使用的一份写死的格式：https://github.com/xinglie/report-designer/blob/master/apis/fields.json
说明一下data中的格式
如上述示例中的”地区测试“数据源，需要配合相应的”地区测试“这个数据接口来看：https://github.com/xinglie/report-designer/blob/master/apis/area.json
其中最关键的是”fields“这个对象，该对象需要列出 https://github.com/xinglie/report-designer/blob/master/apis/area.json 接口中可供使用的字段集合，这是绑定数据源的关键。
点击这里查看如何通过
tag或id在打印或预览时转换成真实的url元素绑定数据源
元素在绑定时，内部会记录相应的接口地址或标识以及绑定的字段，在展示或打印时，由展示或打印页面根据元素绑定的接口，把数据设置到绑定信息上，而元素仅根据绑定的字段key把相应的数据取出来展示
自动分页
根据可设计元素的不同，需要绑定的数据源是数组还是对象也不同。比如“数据”元素分组下的列表格、数据表格等要求数组。文本、图片等要求返回单个对象，即使返回数组也只会使用第一个。
更多规则
以上是个人根据以往的经验总结的格式，非必须按照执行的最终格式。包括元素绑定数据源时，到底使用对象还是数组，并非最终定论，可根据具体需求调整。