打开设计器
Open Report
×
Select Report:
{{reportId}}
Close
// 报表设计器包
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
import "@grapecity/activereports-localization/dist/designer/zh-locale"; // 中文包
import "@grapecity/activereports-localization";
import "@grapecity/activereports/styles/ar-js-designer.css";
// 报表查看器包
import { Viewer } from "@grapecity/activereports-vue";
import "@grapecity/activereports/styles/ar-js-viewer.css";
// 设计器与查看器公用包
import "@grapecity/activereports/styles/ar-js-ui.css";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "../../node_modules/bootstrap/dist/js/bootstrap.min.js";
import $ from "jquery";
let resolveFunc = null;
export default {
name: "Report",
components: {
ReportViewer: Viewer,
},
data() {
return {
reportStorage: new Map(),
reportIds: null,
counter: 0,
designer: null, // 设计器实例
designerHidden: false, // 显示隐藏设计器
disableOpenSaveHotkeys: true,
// 初始化报表查看器参数
reportTemplate: {
Type: "report",
Body: {
Name: "Body",
Type: "section",
ReportItems: [
{
Type: "textbox",
Name: "textbox1",
Style: {
FontSize: "18pt",
},
Value: "Hello, ActiveReportsJS Viewer",
Height: "10in",
},
],
},
Name: "Report",
},
};
},
methods: {
onDesignerOpen() {
this.designerHidden = false;
},
onSelectReport(reportId) {
if (resolveFunc) {
alert("1");
$("#dlgOpen").modal("hide");
resolveFunc({ definition: this.reportStorage.get(reportId), id: reportId, displayName: reportId });
resolveFunc = null;
}
},
},
mounted() {
const _this = this;
this.designer = new ReportDesigner("#designer-host", {
language: "zh", //汉化；
}); // 初始化报表设计器
this.designer.setActionHandlers({
// 添加预览功能
onRender: async (report) => {
this.designerHidden = true;
console.log(report);
this.$refs.reportViewer.Viewer().open(report.definition);
return Promise.resolve();
},
// 添加保存功能
onSave: (info) => {
const reportId = info.id || `NewReport${_this.counter + 1}`;
_this.reportStorage.set(reportId, info.definition);
_this.counter++;
return Promise.resolve({ displayName: reportId });
},
// 添加另存为功能
onSaveAs: function (info) {
const reportId = `NewReport${_this.counter + 1}`;
_this.reportStorage.set(reportId, info.definition);
_this.counter++;
return Promise.resolve({ id: reportId, displayName: reportId });
},
onOpen: function () {
const ret = new Promise(function (resolve) {
resolveFunc = resolve;
_this.reportIds = _this.reportStorage.keys();
$("#dlgOpen").modal("show");
});
return ret;
},
});
},
};
#designer-host, #viewer-host {
width: 100%;
height: 800px;
}