Weibw's FR
ShowTemplateByPopover 卡片
你可以使用它在页面中以卡片方式打开模板。
注：此接口未使用帆软官方接口，所以支持FineReport目前所有版本的工程项目。
需要注意的是，目前该接口仅支持填报预览模式，因为气泡组件会根据我们点击的按钮位置进行动态弹出，所以我们在调用时需要将当前按钮的位置及尺寸发给端口。当然，您也不需要担心如何获取到当前控件的位置和尺寸，我们都已经帮您写好了。
在使用该接口的时候，请务必将下方代码加入到您的参数中。
javascript
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],基础用法
javascript
WEIBW.Feedback.showTemplateByPopover({
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "30%",
height: "200px",
});WEIBW.Feedback.showTemplateByPopover({
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "30%",
height: "200px",
});路由
ShowTemplateByPopover 组件的打开的模板路径由参数url控制，如果您填写的是当前工程下的模板文件路径，那应该类似于/webroot/decision/view/report?viewlet=***.cpt，当然，您也可以直接填绝对地址，如https://finereport.weibw162.com。
注意：当url参数无值时，会自动打开当前文档所在网页，即https://finereport.weibw162.com。
javascript
WEIBW.Feedback.showTemplateByPopover({
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],
url: "https://finereport.weibw162.com",
});WEIBW.Feedback.showTemplateByPopover({
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],
url: "https://finereport.weibw162.com",
});参数
ShowTemplateByPopover 组件在打开模板时是支持携带参数的，参数由params控制，他是一个json对象，您可以在这里配置您打开模板时携带的路由参数。
javascript
WEIBW.Feedback.showTemplateByPopover({
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
}
});WEIBW.Feedback.showTemplateByPopover({
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
}
});尺寸
ShowTemplateByPopover 组件的尺寸由参数width和height分别控制其宽度和高度。这两个参数同样支持两种写法，可以输入百分比，如'20%'，也可以输入固定尺寸，如'200px'。
javascript
WEIBW.Feedback.showTemplateByPopover({
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "40%",
height: "300px",
});WEIBW.Feedback.showTemplateByPopover({
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "40%",
height: "300px",
});弹出方向
ShowTemplateByPopover 组件弹出的卡片可以有四个方向，其弹出方向由参数direction，可选值有'left'，'right'，'top'，'bottom'。
左侧
javascript
WEIBW.Feedback.showTemplateByPopover({
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "30%",
height: "300px",
direction: "left"
});WEIBW.Feedback.showTemplateByPopover({
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "30%",
height: "300px",
direction: "left"
});右侧
javascript
WEIBW.Feedback.showTemplateByPopover({
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "30%",
height: "300px",
direction: "right"
});WEIBW.Feedback.showTemplateByPopover({
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "30%",
height: "300px",
direction: "right"
});顶部
javascript
WEIBW.Feedback.showTemplateByPopover({
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "30%",
height: "300px",
direction: "top"
});WEIBW.Feedback.showTemplateByPopover({
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "30%",
height: "300px",
direction: "top"
});底部
javascript
WEIBW.Feedback.showTemplateByPopover({
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "30%",
height: "300px",
direction: "bottom"
});WEIBW.Feedback.showTemplateByPopover({
fposition: [this.element.offset().left, this.element.offset().top],
fsize: [this.options.width, this.options.height],
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "30%",
height: "300px",
direction: "bottom"
});关闭Popover
如果你需要在其他JavaScript代码中关闭当前Popover窗口，那么你只需要执行如下接口即可：
Javascript
WEIBW.Feedback.closePopover();WEIBW.Feedback.closePopover();参数解释
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| url | 模板路由 | string | 无 | 是 |
| params | 模板携带参数 | json对象 | 无 | 否 |
| direction | 抽屉展开方向 | enum，可选值有'left'，'right'，'top'，'bottom' | 'right' | 否 |
| width | Popover卡片宽度 | string，可以输入百分比，如'20%'，也可以输入固定尺寸，如'200px' | '50%' | 否 |
| height | Popover卡片高度 | string，可以输入百分比，如'20%'，也可以输入固定尺寸，如'200px' | '60%' | 否 |