test

public/index.html

@@ -25,7 +25,11 @@
   <script src="https://webapi.amap.com/maps?v=1.4.15&key=9fe905e45ed0e2cfbf69479b4cd83edf"></script>
     <!--  <link rel="icon" href="<%= BASE_URL %>favicon.png">-->
   <link rel="icon" href="<%= BASE_URL %>tubaoFavicon.ico">
-  <title>途宝AAA企业级开发平台</title>
+<!- stimulsoft -->
+  <link rel="stylesheet" href="<%= BASE_URL %>reports/stimulsoft/css/stimulsoft.viewer.office2013.whiteblue.css">
+  <link rel="stylesheet" href="<%= BASE_URL %>reports/stimulsoft/css/stimulsoft.designer.office2013.whiteblue.css">
+
+  <title>途宝CCC企业级开发平台</title>
   <style>
     html,
     body,
@@ -115,6 +119,12 @@
 <script src="<%= BASE_URL %>cdn/axios/1.0.0/axios.min.js" charset="utf-8"></script>
 <script src="<%= BASE_URL %>cdn/element-ui/2.15.1/index.js" charset="utf-8"></script>
 <script src="<%= BASE_URL %>cdn/avue/2.8.18/avue.min.js" charset="utf-8"></script>
+
+<!- stimulsoft -->
+<script src="<%= BASE_URL %>reports/stimulsoft/scripts/stimulsoft.designer.js" charset="utf-8"></script>
+<script src="<%= BASE_URL %>reports/stimulsoft/scripts/stimulsoft.reports.js" charset="utf-8"></script>
+<script src="<%= BASE_URL %>reports/stimulsoft/scripts/stimulsoft.viewer.js" charset="utf-8"></script>
+
 </body>
 
 </html>

src/components/report-container/report-container.vue

@@ -0,0 +1,65 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    top="0"
+    width="100%"
+    height="100%"
+    :before-close="onClose"
+    append-to-body
+    class="el-dialogDeep"
+    :close-on-click-modal="false"
+    v-dialog-drag
+  >
+    <avue-card style="min-width: 100vw !important;max-width: 100vw !important; max-height: 100vh">
+      <div id="reportContainer" style="width: 100%; height: 100%; padding: 0">
+      </div>
+    </avue-card>
+  </el-dialog>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      visible: false,
+      refreshfun: null,
+    };
+  },
+  props: {
+    switchDialog: {
+      type: Boolean,
+      default: false
+    },
+    reportName: {
+      type: String
+    },
+    reportId: {
+      type: String
+    },
+  },
+  methods: {
+    cellStyle() {
+      return "padding:0;height:40px;";
+    },
+    onClose() {
+      this.visible = false;
+    },
+    showContainer(initfun, refreshfun) {
+      if (typeof initfun == 'function') {
+        initfun()
+      }
+      this.refreshfun = refreshfun
+      this.visible = true
+    },
+    hideContainer() {
+      if (typeof this.refreshfun == 'function') {
+        this.refreshfun()
+      }
+      this.visible = false
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>

src/views/iosBasicData/bcorps/index.vue

@@ -123,6 +123,8 @@
               <el-button type="warning" size="small" icon="el-icon-printer" @click="excelBox = true">导入
               </el-button>
               <el-button type="success" size="small" @click="handleExport" icon="el-icon-printer">导出</el-button>
+              <el-button type="success" size="small" @click="handleReportDesigner" icon="el-icon-printer">设计报表</el-button>
+              <el-button type="success" size="small" @click="handleReportPreview" icon="el-icon-printer">预览报表</el-button>
             </template>
             <template slot-scope="{ row, index }" slot="menu">
               <el-button icon="el-icon-edit" type="text" size="small" @click.stop="editOpen(row)">
@@ -144,6 +146,9 @@
         </basic-container>
       </el-col>
     </el-row>
+
+    <reportContainer ref="reportContainer"></reportContainer>
+
     <detailPage v-if="!isShow" ref="detail" @goBack="goBack" @copyOrder="copyOrder" :detailData="detailData"></detailPage>
 
     <!--类别弹窗-->
@@ -181,11 +186,15 @@ import detailPage from "./detailsPage";
 import { getBcorpsList, getBcorpsDetail, addBcorps, updateBcorps, removeBcorps, downLoadBcorpsTemplate } from "@/api/iosBasicData/bcorps";
 import { mapGetters } from "vuex";
 import { bcorpstypedefineList } from "@/api/iosBasicData/bcorpstypedefine"
-import bcorpstypedefine from "@/views/iosBasicData/bcorps/bcorpstypedefine.vue";
+import bcorpstypedefine from "@/views/iosBasicData/bcorps/bcorpstypedefine.vue"
+
+import reportContainer from "@/views/iosBasicData/report-container/report-container.vue"
+
 export default {
   components: {
     detailPage,
-    bcorpstypedefine
+    bcorpstypedefine,
+    reportContainer
   },
   data() {
     return {
@@ -1017,7 +1026,8 @@ export default {
             minRows: 3,
 
           },
-        ]
+        ],
+        designer: null,
       },
       data: []
     };
@@ -1321,6 +1331,272 @@ export default {
       }
       return back;
     },
+    // 报表加载格式和数据
+    // report 报表实例
+    // content 报表设计模板, data:application/zip;base64,UEsDBAoAAAAIAClHSlfgHxo4LgwDAHeJBQAPAAAAcmVwb3J0Zml...
+    // data 报表数据 JSON Object
+    loadReport(report, content, data){
+      var mimeString = content
+        .split(',')[0]
+        .split(':')[1]
+        .split(';')[0]
+      var byteString = atob(content.split(',')[1])
+
+      var ab = new ArrayBuffer(byteString.length)
+      var ia = new Uint8Array(ab)
+
+      for (var i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i)
+      }
+
+      var blob = new Blob([ab])
+      JSZip.loadAsync(blob).then(function(unziped) {
+        unziped
+          .file('reportfile.json')
+          .async('string')
+          .then(res => {
+            report.load(res)
+
+            if (!!data) {
+              var dataSet = new Stimulsoft.System.Data.DataSet(
+                'reportData'
+              )
+              dataSet.readJson(data)
+              report.regData('reportData', 'reportData', dataSet)
+            }
+          })
+      })
+
+    },
+    createDesignerButtons(e) {
+      if (!!e) {
+        try {
+          this.designer.jsObject.options.menus.localizationMenu.addEventListener(
+            'click',
+            this.createDesignerButtons
+          )
+        } catch (error) {
+        }
+      }
+
+      let toolBarRow =  this.designer.jsObject.options.toolBar.firstChild.tr[0]
+
+      let customButton =  this.designer.jsObject.StatusPanelButton(
+        'exitButton',
+        '关闭',
+        'LoginControls.Window.CloseWhite.png',
+        '关闭',
+        null,
+        30,
+        60
+      )
+
+      customButton.image.style.width = customButton.image.style.height = '16px'
+
+      let buttonCell = document.createElement('td')
+
+      buttonCell.className = 'stiDesignerToolButtonCell'
+
+      buttonCell.appendChild(customButton)
+
+      toolBarRow.appendChild(buttonCell)
+
+      let that=this
+      customButton.action = function(e) {
+        let jsObject = this.jsObject
+
+        if (jsObject.options.reportIsModified) {
+          var messageForm = jsObject.MessageFormForSave()
+          messageForm.changeVisibleState(true)
+          messageForm.action = function(state) {
+            if (state) {
+              jsObject.SendCommandSaveReport()
+              setTimeout(() => {
+                jsObject.SendCommandCloseReport()
+                jsObject.designer.invokeExit()
+                if (that.$refs.reportContainer)
+                  that.$refs.reportContainer.hideContainer()
+                }, 250)
+            } else {
+              jsObject.SendCommandCloseReport()
+              jsObject.designer.invokeExit()
+              if (that.$refs.reportContainer)
+                that.$refs.reportContainer.hideContainer()
+            }
+          }
+        } else {
+          jsObject.SendCommandCloseReport()
+          jsObject.designer.invokeExit()
+          if (that.$refs.reportContainer)
+            that.$refs.reportContainer.hideContainer()
+        }
+      }
+    },
+    handleReportDesigner(){
+      Stimulsoft.Base.StiLicense.key = '6vJhGtLLLz2GNviWmUTrhSqnOItdDwjBylQzQcAOiHn0s4gy0Fr5YoUZ9V00Y0igCSFQzwEqYBh/N77k4f0fWXTHW5rqeBNLkaurJDenJ9o97TyqHs9HfvINK18Uwzsc/bG01Rq+x3H3Rf+g7AY92gvWmp7VA2Uxa30Q97f61siWz2dE5kdBVcCnSFzC6awE74JzDcJMj8OuxplqB1CYcpoPcOjKy1PiATlC3UsBaLEXsok1xxtRMQ283r282tkh8XQitsxtTczAJBxijuJNfziYhci2jResWXK51ygOOEbVAxmpflujkJ8oEVHkOA/CjX6bGx05pNZ6oSIu9H8deF94MyqIwcdeirCe60GbIQByQtLimfxbIZnO35X3fs/94av0ODfELqrQEpLrpU6FNeHttvlMc5UVrT4K+8lPbqR8Hq0PFWmFrbVIYSi7tAVFMMe2D1C59NWyLu3AkrD3No7YhLVh7LV0Tttr/8FrcZ8xirBPcMZCIGrRIesrHxOsZH2V8t/t0GXCnLLAWX+TNvdNXkB8cF2y9ZXf1enI064yE5dwMs2fQ0yOUG/xornE'
+      // Stimulsoft.Base.StiLicense.Key = '6vJhGtLLLz2GNviWmUTrhSqnOItdDwjBylQzQcAOiHkcgIvwL0jnpsDqRpWg5FI5kt2G7A0tYIcUygBh1sPs7plofUOqPB1a4HBIXJB621mau2oiAIj+ysU7gKUXfjn/D5BocmduNB+ZMiDGPxFrAp3PoD0nYNkkWh8r7gBZ1v/JZSXGE3bQDrCQCNSy6mgby+iFAMV8/PuZ1z77U+Xz3fkpbm6MYQXYp3cQooLGLUti7k1TFWrnawT0iEEDJ2iRcU9wLqn2g9UiWesEZtKwI/UmEI2T7nv5NbgV+CHguu6QU4WWzFpIgW+3LUnKCT/vCDY+ymzgycw9A9+HFSzARiPzgOaAuQYrFDpzhXV+ZeX31AxWlnzjDWqpfluygSNPtGul5gyNt2CEoJD1Yom0VN9fvRonYsMsimkFFx2AwyVpPcs+JfVBtpPbTcZscnzUdmiIvxv8Gcin6sNSibM6in/uUKFt3bVgW/XeMYa7MLGF53kvBSwi78poUDigA2n12SmghLR0AHxyEDIgZGOTbNI33GWu7ZsPBeUdGu55R8w='
+      Stimulsoft.Base.Localization.StiLocalization.addLocalizationFile( '/reports/stimulsoft/Localization/zh-CHS.xml', true, 'zh-CHS')
+      Stimulsoft.Base.Localization.StiLocalization.setLocalizationFile('/reports/stimulsoft/Localization/zh-CHS.xml' )
+
+      var options = new Stimulsoft.Designer.StiDesignerOptions()
+      options.appearance.fullScreenMode = true
+      options.allowChangeWindowTitle = false
+      options.toolbar.showSaveDialog = false
+
+      options.toolbar.showFileMenuSave = false
+      options.toolbar.showFileMenuAbout = false
+      options.toolbar.showFileMenuClose = false
+      options.toolbar.showFileMenuExit = false
+      options.toolbar.showFileMenuInfo = false
+      options.toolbar.showFileMenuHelp = false
+      options.toolbar.showFileMenuNew = false
+
+      options.appearance.showTooltips = false
+      options.appearance.showDialogsHelp = false
+
+      options.toolbar.showSetupToolboxButton = true
+      options.appearance.htmlRenderMode = Stimulsoft.Report.Export.StiHtmlExportMode.Table
+
+      let designer = new Stimulsoft.Designer.StiDesigner(
+        options,
+        'StiDesigner',
+        false
+      )
+
+      designer.onSaveReport = (e)=>{
+        console.log('onSaveReport')
+        /*
+        let jsObject = this.jsObject
+
+        if (!e.report.isModified)
+          return
+        var jsonString = e.report.saveToJsonString()
+        var zip = new JSZip()
+
+        zip.file('reportfile.json', jsonString)
+        zip.generateAsync({
+          type: 'blob',
+          compression: 'DEFLATE',
+          compressionOptions: {
+            level: 9
+          }
+        }).then(content => {
+          var reader = new FileReader()
+          reader.onload = event => {
+            var reportContent = reader.result
+
+            // 此处将报表模版保存到数据库
+            // save content to database
+
+            e.report.isModified = false
+          }
+          reader.readAsDataURL(content)
+        })
+        */
+      }
+
+      let report = new window.Stimulsoft.Report.StiReport();
+
+      report.styles.loadFile('static/Plugins/reports/css/Styles.sts')
+      report.applyStyles()
+
+      // 加载文件
+      console.log("从 url 报表");
+      report.loadFile("/reports/stimulsoft/demos/SimpleList.mrt");
+      // 从模版和数据加载报表
+      // loadReport(report, '', {})
+
+      designer.report = report
+      this.designer=designer
+
+      this.$refs.reportContainer.showContainer(
+        ()=> {
+          setTimeout(() => {
+            designer.renderHtml('reportContainer')
+            this.createDesignerButtons()
+          }, 50)
+        },
+        ()=>{
+        },
+      )
+    },
+    createViewerButtons (viewer){
+      viewer.jsObject.collections.images['myClose.png'] =
+        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAA0ElEQVQ4ja3TO05CQRQG4A8iOwAbtYWETndAaecK7NwCKmETtJZsSBNLobEz8ZFIJQ0UnOGSm3DnYviTybzO/895DQXGWGCVGQuMEqkRcwcfuMOLalziCaf4TIe9UG9nyMJmFRzNGoRK1BU4xxx9G7cfwostciGk+x8MqgySwDXe4tU53hVV+MNtTmAoX84JGv9NYgrHyR6DV8wUSW7hItZLm36ZVoVQxsFJLOMsPOrH/h7dQwR2cdxOTEn8DtUbPGc4V2H7Vb4Yqfedf/GYSGt8VUmxgyfuBAAAAABJRU5ErkJggg=='
+      const closeBtn = viewer.jsObject.SmallButton(
+        'closeBtn',
+        '关闭',
+        'myClose.png'
+      )
+
+      const toolbarTable = viewer.jsObject.controls.toolbar.firstChild.firstChild
+      const buttonsTable = toolbarTable.rows[0].lastChild.lastChild
+      const userButtonCell = buttonsTable.rows[0].insertCell(0)
+      userButtonCell.className = 'stiJsViewerClearAllStyles'
+      userButtonCell.appendChild(closeBtn)
+
+      let that=this
+      closeBtn.action = function() {
+        console.log(that.$refs.ReportContainer)
+        if (that.$refs.reportContainer)
+          that.$refs.reportContainer.hideContainer()
+      }
+    },
+    handleReportPreview(){
+      Stimulsoft.Base.StiLicense.key = '6vJhGtLLLz2GNviWmUTrhSqnOItdDwjBylQzQcAOiHn0s4gy0Fr5YoUZ9V00Y0igCSFQzwEqYBh/N77k4f0fWXTHW5rqeBNLkaurJDenJ9o97TyqHs9HfvINK18Uwzsc/bG01Rq+x3H3Rf+g7AY92gvWmp7VA2Uxa30Q97f61siWz2dE5kdBVcCnSFzC6awE74JzDcJMj8OuxplqB1CYcpoPcOjKy1PiATlC3UsBaLEXsok1xxtRMQ283r282tkh8XQitsxtTczAJBxijuJNfziYhci2jResWXK51ygOOEbVAxmpflujkJ8oEVHkOA/CjX6bGx05pNZ6oSIu9H8deF94MyqIwcdeirCe60GbIQByQtLimfxbIZnO35X3fs/94av0ODfELqrQEpLrpU6FNeHttvlMc5UVrT4K+8lPbqR8Hq0PFWmFrbVIYSi7tAVFMMe2D1C59NWyLu3AkrD3No7YhLVh7LV0Tttr/8FrcZ8xirBPcMZCIGrRIesrHxOsZH2V8t/t0GXCnLLAWX+TNvdNXkB8cF2y9ZXf1enI064yE5dwMs2fQ0yOUG/xornE'
+      // Stimulsoft.Base.StiLicense.Key = '6vJhGtLLLz2GNviWmUTrhSqnOItdDwjBylQzQcAOiHkcgIvwL0jnpsDqRpWg5FI5kt2G7A0tYIcUygBh1sPs7plofUOqPB1a4HBIXJB621mau2oiAIj+ysU7gKUXfjn/D5BocmduNB+ZMiDGPxFrAp3PoD0nYNkkWh8r7gBZ1v/JZSXGE3bQDrCQCNSy6mgby+iFAMV8/PuZ1z77U+Xz3fkpbm6MYQXYp3cQooLGLUti7k1TFWrnawT0iEEDJ2iRcU9wLqn2g9UiWesEZtKwI/UmEI2T7nv5NbgV+CHguu6QU4WWzFpIgW+3LUnKCT/vCDY+ymzgycw9A9+HFSzARiPzgOaAuQYrFDpzhXV+ZeX31AxWlnzjDWqpfluygSNPtGul5gyNt2CEoJD1Yom0VN9fvRonYsMsimkFFx2AwyVpPcs+JfVBtpPbTcZscnzUdmiIvxv8Gcin6sNSibM6in/uUKFt3bVgW/XeMYa7MLGF53kvBSwi78poUDigA2n12SmghLR0AHxyEDIgZGOTbNI33GWu7ZsPBeUdGu55R8w='
+      Stimulsoft.Base.Localization.StiLocalization.addLocalizationFile( '/reports/stimulsoft/Localization/zh-CHS.xml', true, 'zh-CHS')
+      Stimulsoft.Base.Localization.StiLocalization.setLocalizationFile('/reports/stimulsoft/Localization/zh-CHS.xml' )
+
+      // 工具栏
+      var options = new Stimulsoft.Viewer.StiViewerOptions()
+      options.height = '100%'
+
+      options.appearance.scrollbarsMode = true
+      options.toolbar.showDesignButton = false
+      options.toolbar.showAboutButton = false
+      options.toolbar.showResourcesButton = false
+      options.toolbar.showFullScreenButton = false
+      options.toolbar.showOpenButton = false
+
+      options.appearance.showTooltips = false
+      options.appearance.showDialogsHelp = false
+
+      options.exports.showExportToDocument = false
+      options.toolbar.showParametersButton = true
+      options.appearance.bookmarksPrint = true
+
+      options.toolbar.printDestination = Stimulsoft.Viewer.StiPrintDestination.Direct
+
+      options.appearance.htmlRenderMode = Stimulsoft.Report.Export.StiHtmlExportMode.Table
+
+      let viewer = new Stimulsoft.Viewer.StiViewer(options, 'StiViewer', false)
+
+      // 报表
+      console.log("创建一个报表实例");
+      let report = new window.Stimulsoft.Report.StiReport();
+
+      // 加载文件
+      console.log("从url加载报表");
+      report.loadFile("/reports/stimulsoft/demos/SimpleList.mrt");
+      // 从模版和数据加载报表
+      // loadReport(report, '', {})
+
+      viewer.report = report;
+
+      this.$refs.reportContainer.showContainer(
+        ()=> {
+          setTimeout(() => {
+            viewer.renderHtml('reportContainer')
+            this.createViewerButtons(viewer)
+          }, 50)
+        },
+        ()=>{
+        },
+      )
+
+      console.log("加载成功完成!");
+    },
 
   }
 };

src/views/iosBasicData/report-container/report-container.vue

@@ -0,0 +1,67 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    top="0"
+    width="100%"
+    height="100%"
+    style="width: 100%; height: 100%;"
+    :before-close="onClose"
+    :close-on-click-modal="false"
+    append-to-body
+    class="el-dialogDeep"
+    v-dialog-drag
+  >
+    <div id="reportContainer" style="width: 100%; height: 100%; padding: 0">
+    </div>
+  </el-dialog>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      visible: false,
+      refreshFun: null,
+    };
+  },
+  props: {
+    switchDialog: {
+      type: Boolean,
+      default: false
+    },
+    reportName: {
+      type: String
+    },
+    reportId: {
+      type: String
+    },
+  },
+  methods: {
+    cellStyle() {
+      return "padding:0;height:40px;";
+    },
+    onClose() {
+      this.visible = false;
+    },
+    showContainer(initFun, refreshFun) {
+      if (typeof initFun == 'function') {
+        initFun()
+      }
+      this.refreshFun = refreshFun
+      this.visible = true
+      console.log(window.reportContainer)
+      console.log('showContainer')
+    },
+    hideContainer() {
+      if (typeof this.refreshFun == 'function') {
+        this.refreshFun()
+      }
+      this.visible = false
+      console.log('hideContainer')
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>