디자이너 컴포넌트 - 보고서 구성요소(Parts)

<template>
  <div>
    <div id="designer-toolbar" class="container-fluid">
      <div class="row mt-3 mb-3">
        <button
          type="button"
          class="btn btn-outline-primary btn-sm col-sm-2 ml-1"
          @click="onDesignerOpen"
          :style="{ display: designerHidden ? 'block' : 'none' }"
        >
          Open Designer
        </button>
      </div>
    </div>
    <div
      id="designer-host"
      :style="{ display: designerHidden ? 'none' : 'block' }"
    >
      <ReportDesigner
        ref="reportDesigner"
        :report="{ id: 'reports/init-template.rdlx-json' }"
        :onRender="onReportPreview"
        :onInit="onDesignerInit"
      />
    </div>
    <div
      id="viewer-host"
      :style="{ display: designerHidden ? 'block' : 'none' }"
    >
      <ReportViewer ref="reportViewer" />
    </div>
  </div>
</template>

<script>
import { Viewer, Designer } from "@mescius/activereportsjs-vue";
import Core from "@mescius/activereportsjs/core";
import { exportDocument as pdfExport } from "@mescius/activereportsjs/pdfexport";

export default {
  components: {
    ReportViewer: Viewer,
    ReportDesigner: Designer,
  },
  data() {
    return {
      designerHidden: false,
    };
  },
  mounted(){
      this.$refs.reportDesigner.getPanelsAPI().then(function(panelsApi){
        panelsApi.menu.open("libraries-list");
      })
  },  
  methods: {
    async onPdfPreview() {
      const reportInfo = await this.$refs.reportDesigner.getReport();
      const report = new Core.PageReport();
      await report.load(reportInfo.definition);
      const doc = await report.run();
      const result = await pdfExport(doc);
      result.download("exportedreport");
    },
    onDesignerOpen() {
      this.designerHidden = false;
    },
    async onReportPreview(report) {
      this.designerHidden = true;
      this.$refs.reportViewer.Viewer().open(report.definition);
    },   
    onDesignerInit(){
    const appBarSettings = {
      visible: true, // Show the app bar
      homeTab: {
        visible: true, // Show the home tab
      },
      contextActionsTab: {
        visible: false, // Hide the context actions tab
      },
      parametersTab: {
        visible: false, // Hide the parameters tab
      },
    };
    const toolBarSettings = {
      visible: true, // Show the toolbar
    };
    const menuSettings = {
      visible: true, // Show the main menu
      toolBox: {
        visible: false, // Hide the Tool Box
      },
      documentExplorer: {
        visible: true, // Show the Document Explorer
      },
      groupEditor: {
        visible: false, // Hide the Group Editor
      },
      layerEditor: {
        visible: false, // Hide the Layer Editor
      },
      logo: {
        visible: false, // Hide the logo
      },
    };
    const dataTabSettings = {
      dataTab: {
        visible: false, // Hide the Data tab
      },
    };
    const propertyGridSettings = {
      propertiesTab: {
        visible: true, // Show the Properties tab
      },
      mode: "Basic", // Set the Property Grid mode to "Advanced" or "Basic"
    };
    const statusBarSettings = {
      visible: false, // Hide the status bar
    };
    const themeConfig = {
      initialTheme: "ActiveReports",
      themeSelector: {
        isEnabled: true,
        availableThemes: ["ActiveReports", "ActiveReportsDark"]
      }      
    };
    const libraries = [
      {
        id: 'reports/ReportLib.rdlx-json',
        name: 'ReportLib',
        displayName: "Sales Data Visualizers"
      }
    ];                
    return {
      appBar: appBarSettings,
      toolBar: toolBarSettings,
      menu: menuSettings,
      data: dataTabSettings,
      propertyGrid: propertyGridSettings,
      statusBar: statusBarSettings,
      themeConfig : themeConfig,
      reportPartsLibraries: libraries,
    };
  }    
  },
};

Core.FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json");
</script>

<style>
@import url("/activereportsjs/demos/arjs/styles/ar-js-ui.css");
@import url("/activereportsjs/demos/arjs/styles/ar-js-designer.css");
@import url("/activereportsjs/demos/arjs/styles/ar-js-viewer.css");

#designer-host,
#viewer-host {
  width: 100%;
  height: 500px;
}
</style>