接口及配置说明 #27
Comments
图片库和模板数据接口在入口文件，如 designer.setup({
getImageUrl:'./apis/images.json',
getFieldUrl:'./apis/fields.json',
getTemplateUrl:'./apis/example.json'
});可到 设计器初始化配置对象/**
* 设计器支持的初始化对象
*/
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 })
} |
保存和编辑数据接口在入口文件，如 designer.setup({
getImageUrl:'./apis/images.json',//图片库接口
getFieldUrl:'./apis/fields.json',//数据源接口
getTemplateUrl:'./apis/example.json',//获取模板接口
saveContentUrl:'./apis/save.json',//保存内容接口
getContentUrl:'./apis/getcontent.json',//获取内容接口
presetUrl:'.apis/content.json',//预设内容接口
});当保存内容时，以 思考如果是以新建的模式进入设计器时，此时反复保存，后端是否会反复创建新的数据？ 这里建议进入设计器时，始终携带一个类似 后端根据数据库里是否有类似该 设计器保存时提交什么数据，则编辑时返回什么样的数据 |
接口配置与界面关系
如果未配置 如果未配置 如果未配置 如果未配置 |
API可视化编辑器， 您也可以不使用上述内置的接口，自己通过 可视化编辑器自带的打印预览页面 |
元素与接口的绑定
项目中元素与接口绑定后，会统一走数据中心模块(tmpl/provider/datacenter.ts)进行请求。 即上图中的文本、图片等会通过 而 |
接口的参数控制假如进入设计器时 有时候我们想把地址栏中的其它参数如
<script type="module">
let parsedUrl = new URL(location.href);
let from = parsedUrl.searchParams.get('from');
let postfix = from ? `?from=${from}` : '';
designer.setup({
//以下是相关配置接口，如果地址栏有from参数，拼接上即可
getImageUrl: './apis/images.json' + postfix,
getFieldUrl: './apis/fields.json' + postfix,
getTemplateUrl: './apis/example.json' + postfix,
saveContentUrl: './apis/save.json' + postfix,
getContentUrl: './apis/content.json' + postfix,
imageUploadUrl: './apis/save-image.json' + postfix,
});
</script>打开设计器带的参数，在设计器里面调用预览页面时，参数会自动透传给预览页面(需授权)，独立使用预览页面需要自己处理(无须授权) 元素数据绑定接口部分元素如文本提供和数据源进行绑定，绑定对象如下。 {
//...以下是存储绑定的数据源和对应字段的对象
bind: {
tag: 'user.info',//数据源请求标识符
id: 'source1',//唯一id
fields: []//绑定了哪些字段
},
}在打印页面，如果需要根据 <script>
viewer.setup({
rdsUrl: '//localhost:9988/',
getBindUrl(bind) {
if(bind.tag=='user.info'){
return 'apis/person.json?bindId='+bind.id;
}
return 'apis/default.json?bindId='+bind.id;
},
});
</script>
这样我们就可以在设计阶段只存放绑定标识，而在打印页面通过 当然，如果打印页面这种绑定数据的接口也需要地址栏中的参数，只需要像设计页面那样处理即可，示例如下 <script>
let parsedUrl = new URL(location.href);
let from = parsedUrl.searchParams.get('from');
let postfix = from ? `&from=${from}` : '';
viewer.setup({
rdsUrl: '//localhost:9988/',
getBindUrl(bind) {
return bind.url + '?bindId=' + bind.id + postfix;
},
});
</script> |
授权配置
history.max.count
hisotry.save.continous.delay
random.examples
show.help.and.ow.links
save.can.use.native.file
save.can.show.stage.content
support.help
support.theme
support.axis.help.line
clear.copy.list.when.cut.action
stage.scale
stage.padding
stage.auto.center
stage.auto.scale.when.change
stage.wheel.zoom
stage.hook.wheel.event
page.width
page.height
page.max.width
page.max.height
page.min.width
page.min.height
move.near.side.area
move.near.step
page.enable.snap.align.elements
page.follow.snap.align.elements
align.points
align.svg.points
align.svg.self.points
contextmenu.paste.exactly.source.position
page.grid.width
page.grid.height
page.grid.max.width
page.grid.max.height
page.grid.min.width
page.grid.min.height
wheel.delay.time
axis.size
axis.show.shadow
scale.max
scale.min
scale.step
scale.fast.increase
scale.slow.decrease
support.snapshot
auto.save
auto.save.debouce.duration
new.tab.viewer
keyboard.move.step
keyboard.with.shift.move.step
keyboard.rotate.step
keyboard.with.shift.rotate.step
drag.snap.to.other.element.offset
drag.snap.degree
drag.snap.degree.offset
support.readonly.element
support.panels.hide.when.nearside
element.same.position.offset
element.min.px.size
element.dblclick.interval.ms.time
panels.prop.show.group
panels.tree.show.icon
element.auto.show.icon.less.than
element.show.normal.outline
element.svg.modify.point.min.factor
element.svg.modify.point.max.factor
element.svg.modify.point.step
element.svg.modify.point.shift.step
element.svg.modify.point.fixed
font.family
font.default.family
border.types
unit
unit.allow.change
|
接口适配假设您现在使用的接口返回如下的格式 {
"data":"array | object",
"info": {
"ok": true,
"message":""
}
}可使用前面提到的 designer.setup({
//...其它初始化配置项
response(response, url) {
console.log('current url', url, 'current response', response);
return {
success: response.info.ok,
message: response.info.message,
data: response.data
};
}
}); |
接口统一格式
项目中所有用到的接口均按以下统一格式返回
全部数据源接口
该接口返回后端都有哪些数据接口可供使用，可查看当前项目中使用的一份写死的格式：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把相应的数据取出来展示
自动分页
根据可设计元素的不同，需要绑定的数据源是数组还是对象也不同。比如“数据”元素分组下的列表格、数据表格等要求数组。文本、图片等要求返回单个对象，即使返回数组也只会使用第一个。
更多规则
以上是个人根据以往的经验总结的格式，非必须按照执行的最终格式。包括元素绑定数据源时，到底使用对象还是数组，并非最终定论，可根据具体需求调整。
The text was updated successfully, but these errors were encountered: