预览编辑修改接口

src/components/boxManagement/reportsTS.vue

@@ -0,0 +1,1200 @@
+<template>
+  <div>
+    <el-dialog append-to-body title="预览报表" class="el-dialogDeep" :visible.sync="previewDialog" width="60%"
+      :close-on-click-modal="false" :destroy-on-close="true" :close-on-press-escape="false" v-dialog-drag>
+      <!--<el-checkbox v-model="isPrintTheBoxNumber">打印箱号</el-checkbox>-->
+      <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :search.sync="query"
+        :permission="permissionList" :before-open="beforeOpen" v-model="form" ref="crud" id="out-table"
+        :header-cell-class-name="headerClassName" @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 398)"
+        @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 398)" @row-update="rowUpdate" @row-save="rowSave"
+        @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange"
+        @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
+        <template slot-scope="{type,disabled}" slot="urlForm">
+          <el-button size="small" :disabled="bbDisabled" @click="reportDesignButton(form.url)">设计报表</el-button>
+        </template>
+        <template slot="menuLeft">
+          <el-button type="primary" size="small" icon="el-icon-plus" :disabled="disabled" @click="addedData(3)">新 增
+          </el-button>
+          <el-button type="danger" size="small" icon="el-icon-delete" plain v-if="permission.reports_delete"
+            @click="handleDelete">删 除
+          </el-button>
+        </template>
+        <template slot-scope="{disabled,size}" slot="authorizedUsersForm">
+          <div>
+            <el-select v-model="form.authorizedUsersId" placeholder="请选择">
+              <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+        </template>
+        <template slot-scope="scope" slot="menu">
+          <el-link type="primary" style="font-size: 12px" icon="el-icon-view" :underline="false"
+            @click="addedData(1, scope)">查看详情&nbsp;&nbsp;</el-link>
+          <el-link type="primary" style="font-size: 12px" icon="el-icon-edit" :underline="false" :disabled="disabled"
+            @click="addedData(2, scope)">编 辑&nbsp;&nbsp;</el-link>
+          <el-link type="primary" style="font-size: 12px" icon="el-icon-delete" :underline="false" :disabled="disabled"
+            @click="rowDel(scope.row)">删 除</el-link>
+          <el-link type="primary" :disabled="scope.row.status == 1"
+            @click="handleReportPreview(scope.row.url, scope.row)">预览报表</el-link>
+        </template>
+      </avue-crud>
+    </el-dialog>
+    <reportContainer ref="reportContainer"></reportContainer>
+    <mail-component ref="mailComponentRef" />
+  </div>
+</template>
+
+<script>
+import { getList, reportsDetail, add, update, reportsRemove, printingUpdate } from "@/api/boxManagement/reports";
+import { getUserApprovalList } from "@/api/approval/processConfig";
+import { mapGetters } from "vuex";
+import { billsDetail } from '@/api/iosBasicData/bills'
+import { bbusinesstypeList } from "@/api/iosBasicData/bbusinesstype";
+import reportContainer from "@/views/iosBasicData/report-container/report-container.vue"
+import { reportsGetReportData } from "@/api/iosBasicData/reports";
+import mailComponent from "@/components/iosbasic-data/mail-component.vue";
+export default {
+  components: {
+    reportContainer,
+    mailComponent
+  },
+  props: {
+    assemblyForm: {
+      type: Object,
+      default: {}
+    },
+    id: {
+      type: String
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    businessValue: {
+      type: String,
+      default: ''
+    },
+    groupCode: {
+      type: String,
+      default: ''
+    },
+  },
+  data() {
+    return {
+      userList: [],
+      isPrintTheBoxNumber: false,
+      bbDisabled: false,
+      form: {},
+      formReport: {},
+      query: {},
+      loading: true,
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      },
+      selectionList: [],
+      option: {},
+      optionBack: {
+        height: 400,
+        calcHeight: 30,
+        tip: false,
+        search: false,
+        searchShow: false,
+        searchMenuSpan: 6,
+        border: true,
+        index: true,
+        viewBtn: true,
+        selection: true,
+        dialogClickModal: false,
+        column: [
+          {
+            label: "业务类型",
+            prop: "businessType",
+            overHidden: true,
+            disabled: true,
+            type: 'select',
+            dicData: [],
+            props: {
+              label: "cnName",
+              value: "code"
+            },
+            // rules: [{
+            //   required: true,
+            //   message: "请输入业务类型",
+            //   trigger: "blur"
+            // }]
+          },
+          {
+            label: "类别",
+            prop: "classifyCode",
+            overHidden: true,
+            rules: [{
+              required: true,
+              message: "请输入类别",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "组别",
+            prop: "groupCode",
+            overHidden: true,
+            rules: [{
+              required: true,
+              message: "请输入组别",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "报表编码",
+            prop: "code",
+            overHidden: true,
+            search: true,
+            rules: [{
+              required: true,
+              message: "请输入报表编码",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "中文名称",
+            prop: "cnName",
+            overHidden: true,
+            search: true,
+            rules: [{
+              required: true,
+              message: "请输入中文名称",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "英文名称",
+            prop: "enName",
+            overHidden: true,
+          },
+          {
+            label: "报表格式",
+            prop: "content",
+            overHidden: true,
+            rules: [{
+              required: true,
+              message: "请输入报表格式",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "授权用户",
+            prop: "authorizedUsersId",
+            overHidden: true,
+            // hide: true,
+            formslot: true,
+            type: 'tree',
+            dicUrl: "/api/blade-user/userList",
+            multiple: true,
+            props: {
+              label: "realName",
+              value: "id"
+            },
+            dicData: [],
+            rules: [{
+              required: true,
+              message: "请选择授权用户",
+              trigger: "blur"
+            }]
+          },
+          // {
+          //   label: "版本",
+          //   prop: "version",
+          //   rules: [{
+          //     required: true,
+          //     message: "请输入版本",
+          //     trigger: "blur"
+          //   }]
+          // },
+          {
+            label: "状态",
+            prop: "status",
+            overHidden: true,
+            type: 'select',
+            dicData: [{
+              label: '正常',
+              value: 0
+            }, {
+              label: '停用',
+              value: 1
+            }],
+            rules: [{
+              required: true,
+              message: "请输入状态",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "设计报表",
+            prop: "url",
+            hide: true,
+            formslot: true,
+            rules: [{
+              required: true,
+              message: "请输入备注",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "备注",
+            prop: "remarks"
+          },
+        ]
+      },
+      data: [],
+      previewDialog: false,
+    };
+  },
+  async created() {
+    this.option = await this.getColumnData(this.getColumnName(398), this.optionBack);
+    getUserApprovalList().then(res => {
+      this.findObject(this.option.column, "authorizedUsersId").dicData = res.data.data
+    })
+    // 获取业务类型
+    bbusinesstypeList(1, 20).then(res => {
+      this.findObject(this.option.column, "businessType").dicData = res.data.data.records
+    })
+  },
+  computed: {
+    ...mapGetters(["permission"]),
+    permissionList() {
+      return {
+        addBtn: this.vaildData(this.permission.reports_add, false),
+        viewBtn: this.vaildData(this.permission.reports_view, false),
+        delBtn: this.vaildData(this.permission.reports_delete, false),
+        editBtn: this.vaildData(this.permission.reports_edit, false)
+      };
+    },
+    ids() {
+      let ids = [];
+      this.selectionList.forEach(ele => {
+        ids.push(ele.id);
+      });
+      return ids.join(",");
+    }
+  },
+  methods: {
+    openDialog() {
+      this.previewDialog = true
+    },
+    // 设计报表
+    async reportDesignButton(url) {
+      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()
+        // console.log(jsonString)
+        this.form.url = jsonString;
+
+        console.log('保存url')
+        console.log(jsonString)
+        console.log('保存url结束')
+
+      }
+
+      let report = new window.Stimulsoft.Report.StiReport();
+
+      report.styles.loadFile('static/Plugins/reports/css/Styles.sts')
+      report.applyStyles()
+
+
+      console.log("从 url 报表");
+      console.log(url)
+      console.log("结束");
+      if (url) {
+        report.load(url)
+      }
+
+      // 加载文件
+      // if (this.id) {
+      //   billsDetail(this.id).then(res => {
+      //     var data = res.data.data
+      //     data.pageOne = 'Page : 1 of 1'
+      //     // 处理超长数据
+      //     if (data.hshipperDetails) {
+      //       var consignerIndex2 = data.hshipperDetails.indexOf( '\n' )
+      //       for (let i = 0; i < 4; i++) {
+      //         consignerIndex2 = data.hshipperDetails.indexOf( '\n', consignerIndex2 + 1 );
+      //       }
+      //       if (consignerIndex2 != -1) {
+      //         var hshipperDetails = data.hshipperDetails.substring(consignerIndex2 + 2, data.hshipperDetails.length)
+      //         data.hshipperDetails = data.hshipperDetails.substring(0, consignerIndex2) + ' *'
+      //         data.commodityDescr += '\n*' + hshipperDetails
+      //       }
+      //     }
+      //
+      //     if (data.hconsigneeDetails) {
+      //       var consigneeIndex2 = data.hconsigneeDetails.indexOf( '\n' )
+      //       for (let i = 0; i < 3; i++) {
+      //         consigneeIndex2 = data.hconsigneeDetails.indexOf( '\n', consigneeIndex2 + 1 );
+      //       }
+      //       if (consigneeIndex2 != -1) {
+      //         var hconsigneeDetails = data.hconsigneeDetails.substring(consigneeIndex2 + 2, data.hconsigneeDetails.length)
+      //         data.hconsigneeDetails = data.hconsigneeDetails.substring(0, consigneeIndex2) + ' **'
+      //         data.commodityDescr += '\n**' + hconsigneeDetails
+      //       }
+      //     }
+      //
+      //     if (data.hnotifyDetails) {
+      //       var notifierIndex2 = data.hnotifyDetails.indexOf( '\n' )
+      //       for (let i = 0; i < 3; i++) {
+      //         notifierIndex2 = data.hnotifyDetails.indexOf( '\n', notifierIndex2 + 1 );
+      //       }
+      //       if (notifierIndex2 != -1) {
+      //         var hnotifyDetails = data.hnotifyDetails.substring(notifierIndex2 + 2, data.hnotifyDetails.length)
+      //         data.hnotifyDetails = data.hnotifyDetails.substring(0, notifierIndex2) + ' ***'
+      //         data.commodityDescr += '\n***' + hnotifyDetails
+      //       }
+      //     }
+      //
+      //     // 处理箱号
+      //     if (this.isPrintTheBoxNumber) {
+      //       data.commodityDescr += '\n.\n.\n'
+      //     }
+      //
+      //     // PLACE & DATE OF ISSUE
+      //     data.placeAndDateOfIssue = ''
+      //     if (data.issueAt) {
+      //       data.placeAndDateOfIssue += data.issueAt
+      //     }
+      //     if (data.issueDate) {
+      //       let date = new Date(data.issueDate.replace(/-/g,'/'));
+      //       let yyyy = date.getFullYear();
+      //       let mmmm = date.toDateString().split(" ")[1]
+      //       let dd = date.getDate()
+      //       data.placeAndDateOfIssue += ', ' + dd + '-' + mmmm + '-' + yyyy
+      //     }
+      //
+      //     // Total number of containers or packages received by the Carriers
+      //     if (data.preContainersList) {
+      //       let boxMap = new Map();
+      //       for (let boxQuantity of data.preContainersList) {
+      //         if (boxMap.get(boxQuantity.cntrTypeCode)) {
+      //           let v = boxMap.get(boxQuantity.cntrTypeCode)
+      //           boxMap.set(boxQuantity.cntrTypeCode, v + boxQuantity.quantity)
+      //         } else {
+      //           boxMap.set(boxQuantity.cntrTypeCode, boxQuantity.quantity)
+      //         }
+      //       }
+      //       let boxs = ''
+      //       boxMap.forEach(function (value, key, map) {
+      //         boxs += value + 'x' + key + ', '
+      //       })
+      //       boxs = boxs.substring(0, boxs.length - 2)
+      //
+      //       data.boxQuantity = boxs + ' CONTAINER(S) ONLY'
+      //     }
+      //
+      //     // Number of original B/Ls
+      //     if (data.numberOfObl) {
+      //       data.numberOfObl += ' (' + data.numberOfOblDigit + ')'
+      //     }
+      //
+      //     if (data.commodityDescr) {
+      //       var descriptionIndex2 = data.commodityDescr.indexOf( '\n' )
+      //       for (let i = 0; i < 19; i++) {
+      //         descriptionIndex2 = data.commodityDescr.indexOf( '\n', descriptionIndex2 + 1 );
+      //       }
+      //       if (descriptionIndex2 != -1) {
+      //         data.pageOne = 'Page : 1 of 2'
+      //         data.pageTwo = 'Page : 2 of 2'
+      //         var extraLongText = data.commodityDescr.substring(descriptionIndex2 + 2, data.commodityDescr.length)
+      //         data.commodityDescr = data.commodityDescr.substring(0, descriptionIndex2)
+      //         data.extraLongTips = '** TO BE CONTINUED ON ATTACHED LIST **'
+      //         data.extraLongText = extraLongText
+      //       }
+      //     }
+      //     var dataSet = new Stimulsoft.System.Data.DataSet(
+      //       'reportData'
+      //     )
+      //     dataSet.readJson(data)
+      //     report.regData('reportData', 'reportData', dataSet)
+      //     // 从模版和数据加载报表
+      //     // loadReport(report, '', {})
+      //
+      //     designer.report = report
+      //   })
+      // }
+
+      // let data = [
+      //   {
+      //     id: 2,
+      //     billNo: 'JOB NO',
+      //     billDate: 'DATE',
+      //     operatorName: 'OP',
+      //     bookingNo: 'bookingNo',
+      //     mblno: 'ob/l no',
+      //     carrierCnName: 'CARRIER',
+      //     polCnName: 'POL',
+      //     vesselCnName: 'vsl/voy',
+      //     voyageNo: 'vsl/voy',
+      //     podCnName: 'POD',
+      //     cyCnName: 'DEPOT',
+      //     etd: 'etd/eta',
+      //     eta: 'etd/eta',
+      //     mpaymode: 'freight / freight',
+      //     volume: '箱型箱量',
+      //     hblno: 'hb/l no',
+      //     srcType: 'analysis1',
+      //     srcCnName: 'analysis2',
+      //     corpName: 'analysis3',
+      //     list: [
+      //       {
+      //         id:1,
+      //         pid:2,
+      //         feeCnNameData: 'fee list1',
+      //         usd: 'usd',
+      //         rmb: 'rmb',
+      //         tr: '税',
+      //         corpName: 'customer',
+      //       },
+      //       {
+      //         id:2,
+      //         pid:2,
+      //         feeCnNameData: 'fee list2',
+      //         usd: 'usd',
+      //         rmb: 'rmb',
+      //         tr: '税',
+      //         corpName: 'customer',
+      //       },
+      //     ]
+      //
+      //   }, {
+      //       id:3,
+      //     billNo: 'JOB NO',
+      //     billDate: 'DATE',
+      //     operatorName: 'OP',
+      //     bookingNo: 'bookingNo',
+      //     mblno: 'ob/l no',
+      //     carrierCnName: 'CARRIER',
+      //     polCnName: 'POL',
+      //     vesselCnName: 'vsl/voy',
+      //     voyageNo: 'vsl/voy',
+      //     podCnName: 'POD',
+      //     cyCnName: 'DEPOT',
+      //     etd: 'etd/eta',
+      //     eta: 'etd/eta',
+      //     mpaymode: 'freight / freight',
+      //     volume: '箱型箱量',
+      //
+      //     hblno: 'hb/l no',
+      //     srcType: 'analysis1',
+      //     srcCnName: 'analysis2',
+      //     corpName: 'analysis3',
+      //     list: [
+      //       {
+      //         id:3,
+      //         pid:3,
+      //         feeCnNameData: 'fee list',
+      //         usd: 'usd',
+      //         rmb: 'rmb',
+      //         tr: '税',
+      //         corpName: 'customer',
+      //       },
+      //       {
+      //         id:4,
+      //         pid:3,
+      //         feeCnNameData: 'fee list',
+      //         usd: 'usd',
+      //         rmb: 'rmb',
+      //         tr: '税',
+      //         corpName: 'customer',
+      //       },
+      //     ]
+      //
+      //   }, {
+      //       id:4,
+      //     billNo: 'JOB NO',
+      //     billDate: 'DATE',
+      //     operatorName: 'OP',
+      //     bookingNo: 'bookingNo',
+      //     mblno: 'ob/l no',
+      //     carrierCnName: 'CARRIER',
+      //     polCnName: 'POL',
+      //     vesselCnName: 'vsl/voy',
+      //     voyageNo: 'vsl/voy',
+      //     podCnName: 'POD',
+      //     cyCnName: 'DEPOT',
+      //     etd: 'etd/eta',
+      //     eta: 'etd/eta',
+      //     mpaymode: 'freight / freight',
+      //     volume: '箱型箱量',
+      //
+      //     hblno: 'hb/l no',
+      //     srcType: 'analysis1',
+      //     srcCnName: 'analysis2',
+      //     corpName: 'analysis3',
+      //     list: [
+      //       {
+      //         id:10,
+      //         pid:4,
+      //         feeCnNameData: 'fee list',
+      //         usd: 'usd',
+      //         rmb: 'rmb',
+      //         tr: '税',
+      //         corpName: 'customer',
+      //       },
+      //       {
+      //         id:11,
+      //         pid:4,
+      //         feeCnNameData: 'fee list',
+      //         usd: 'usd',
+      //         rmb: 'rmb',
+      //         tr: '税',
+      //         corpName: 'customer',
+      //       },
+      //     ]
+      //   },
+      // ]
+      // 获取报表数据
+      const res = await reportsGetReportData({
+        billId: this.id,
+        reportCode: this.form.classifyCode,
+        groupCode: this.form.groupCode,
+        type: this.businessValue
+      })
+      console.log('获取的数据赋值', res.data.data.data)
+      // 获取的数据赋值
+      var data = res.data.data.data
+
+      var dataSet = new Stimulsoft.System.Data.DataSet(
+        'reportData'
+      )
+
+      dataSet.readJson(data)
+      report.regData('reportData', 'reportData', dataSet)
+      // 从模版和数据加载报表
+      // loadReport(report, '', {})
+
+      designer.report = report
+
+      this.designer = designer
+
+      this.$refs.reportContainer.showContainer(
+        () => {
+          setTimeout(() => {
+            designer.renderHtml('reportContainer')
+            this.createDesignerButtons()
+          }, 50)
+        },
+        () => { },
+      )
+    },
+    testMail(e) {
+      console.info('eeeeeeeeeeeeeeeeeeee----', e)
+      this.$refs.mailComponentRef.dialogVisible = true
+      this.$refs.mailComponentRef.formData.attachments = e.fileName
+      this.$refs.mailComponentRef.formData.fileType = e.formatName
+      this.$refs.mailComponentRef.formData.fileContent = e.data
+    },
+    // 预览报表
+    handleReportPreview(url, row) {
+      printingUpdate({ id: this.id })
+      console.log(row, 698)
+      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.showPrintButton = false // 打印按钮是否显示   下面直接自定义控制打印弹窗是否开启
+      options.toolbar.showSendEmailButton = true // 显示发送邮件按钮
+      options.email.showEmailDialog = false
+      options.email.showExportDialog = false
+      // printDestination 参数：用于指定报表打印的目标位置，可以是打印机、PDF 文件或者直接打印到浏览器等。
+      // Stimulsoft.Viewer.StiPrintDestination.Direct：表示直接打印到打印机，即将报表内容直接发送至打印机进行打印。
+      // 通过设置不同的 printDestination 参数，你可以控制报表打印的行为，例如是直接打印到打印机，还是生成 PDF 文件，或者直接在浏览器中预览打印内容等。
+      options.toolbar.printDestination = Stimulsoft.Viewer.StiPrintDestination.Direct
+      // htmlRenderMode html渲染模式
+      options.appearance.htmlRenderMode = Stimulsoft.Report.Export.StiHtmlExportMode.Table
+      // 是创建一个 Stimulsoft 报表查看器的实例的代码
+      let viewer = new Stimulsoft.Viewer.StiViewer(options, 'StiViewer', false)
+      viewer.onEmailReport = this.testMail
+
+      // 报表
+      console.log("创建一个报表实例");
+      let report = new window.Stimulsoft.Report.StiReport();
+
+      // 加载文件
+      console.log("从url加载报表");
+      // report.loadFile("/reports/stimulsoft/demos/SimpleList.mrt");
+      report.load(url)
+
+      // 获取报告文件名更改文件名称
+      report.reportAlias = this.assemblyForm.corpName + '-' + this.assemblyForm.mblno
+      // report.reportName = '12313'
+
+      // 获取报表数据
+      // const res = await reportsGetReportData({
+      //     billId:this.id,
+      //     reportCode:this.form.code,
+      //     groupCode:this.form.groupCode,
+      // })
+      // // 获取的数据赋值
+      // let data = res.data.data.data
+
+      // 加载数据
+      if (this.id) {
+        // billsDetail(this.id).then(res => {
+        reportsGetReportData({
+          billId: this.id,
+          reportCode: row.classifyCode,
+          groupCode: row.groupCode,
+          type: this.businessValue
+        }).then(res => {
+          // var data = res.data.data.data.map((item,index)=>{
+          //     item.index = index
+          //     item.feeCenterList.forEach(ite=>{
+          //         ite.ppid = index
+          //     })
+          //     return item
+          // })
+          var data = res.data.data.data
+
+          console.log(data, 'hshipperDetails')
+
+          // var aaa = data.hshipperDetails.split('\n')
+          // console.log(aaa)
+
+          data.pageOne = 'Page : 1 of 1'
+          // 处理超长数据
+          if (data.hshipperDetails) {
+            var consignerIndex2 = data.hshipperDetails.indexOf('\n')
+            for (let i = 0; i < 4; i++) {
+              consignerIndex2 = data.hshipperDetails.indexOf('\n', consignerIndex2 + 1);
+            }
+            if (consignerIndex2 != -1) {
+              var hshipperDetails = data.hshipperDetails.substring(consignerIndex2 + 2, data.hshipperDetails.length)
+              data.hshipperDetails = data.hshipperDetails.substring(0, consignerIndex2) + ' *'
+              data.commodityDescr += '\n*' + hshipperDetails
+            }
+          }
+
+          if (data.hconsigneeDetails) {
+            var consigneeIndex2 = data.hconsigneeDetails.indexOf('\n')
+            for (let i = 0; i < 3; i++) {
+              consigneeIndex2 = data.hconsigneeDetails.indexOf('\n', consigneeIndex2 + 1);
+            }
+            if (consigneeIndex2 != -1) {
+              var hconsigneeDetails = data.hconsigneeDetails.substring(consigneeIndex2 + 2, data.hconsigneeDetails.length)
+              data.hconsigneeDetails = data.hconsigneeDetails.substring(0, consigneeIndex2) + ' **'
+              data.commodityDescr += '\n**' + hconsigneeDetails
+            }
+          }
+
+          if (data.hnotifyDetails) {
+            var notifierIndex2 = data.hnotifyDetails.indexOf('\n')
+            for (let i = 0; i < 3; i++) {
+              notifierIndex2 = data.hnotifyDetails.indexOf('\n', notifierIndex2 + 1);
+            }
+            if (notifierIndex2 != -1) {
+              var hnotifyDetails = data.hnotifyDetails.substring(notifierIndex2 + 2, data.hnotifyDetails.length)
+              data.hnotifyDetails = data.hnotifyDetails.substring(0, notifierIndex2) + ' ***'
+              data.commodityDescr += '\n***' + hnotifyDetails
+            }
+          }
+
+          // 处理箱号
+          if (this.isPrintTheBoxNumber) {
+            data.commodityDescr += '\n.\n.\n'
+          }
+
+          // PLACE & DATE OF ISSUE
+          data.placeAndDateOfIssue = ''
+          if (data.issueAt) {
+            data.placeAndDateOfIssue += data.issueAt
+          }
+          if (data.issueDate) {
+            let date = new Date(data.issueDate.replace(/-/g, '/'));
+            let yyyy = date.getFullYear();
+            let mmmm = date.toDateString().split(" ")[1]
+            let dd = date.getDate()
+            data.placeAndDateOfIssue += ', ' + dd + '-' + mmmm + '-' + yyyy
+          }
+
+          // Total number of containers or packages received by the Carriers
+          if (data.preContainersList) {
+            let boxMap = new Map();
+            for (let boxQuantity of data.preContainersList) {
+              if (boxMap.get(boxQuantity.cntrTypeCode)) {
+                let v = boxMap.get(boxQuantity.cntrTypeCode)
+                boxMap.set(boxQuantity.cntrTypeCode, v + boxQuantity.quantity)
+              } else {
+                boxMap.set(boxQuantity.cntrTypeCode, boxQuantity.quantity)
+              }
+            }
+            let boxs = ''
+            boxMap.forEach(function (value, key, map) {
+              boxs += value + 'x' + key + ', '
+            })
+            boxs = boxs.substring(0, boxs.length - 2)
+
+            data.boxQuantity = boxs + ' CONTAINER(S) ONLY'
+          }
+
+          // Number of original B/Ls
+          if (data.numberOfObl) {
+            data.numberOfObl += ' (' + data.numberOfOblDigit + ')'
+          }
+
+          if (data.commodityDescr) {
+            var descriptionIndex2 = data.commodityDescr.indexOf('\n')
+            for (let i = 0; i < 19; i++) {
+              descriptionIndex2 = data.commodityDescr.indexOf('\n', descriptionIndex2 + 1);
+            }
+            if (descriptionIndex2 != -1) {
+              data.pageOne = 'Page : 1 of 2'
+              data.pageTwo = 'Page : 2 of 2'
+              var extraLongText = data.commodityDescr.substring(descriptionIndex2 + 2, data.commodityDescr.length)
+              data.commodityDescr = data.commodityDescr.substring(0, descriptionIndex2)
+              data.extraLongTips = '** TO BE CONTINUED ON ATTACHED LIST **'
+              data.extraLongText = extraLongText
+            }
+          }
+
+          // console.log(data.hshipperDetails, 'hshipperDetails2')
+
+
+          // 创建一个 Stimulsoft 数据集（DataSet）的实例的代码
+          var dataSet = new Stimulsoft.System.Data.DataSet(
+            'reportData'
+          )
+
+          dataSet.readJson(data) // 用于将 JSON 格式的数据加载到数据集中。data 是包含报表数据的 JSON 对象。
+          // 这是一个方法调用，用于在报表中注册数据源。参数 'reportData' 是数据源的名称，
+          // 第二个 'reportData' 是数据源的别名，dataSet 则是之前创建的数据集实例
+          report.regData('reportData', 'reportData', dataSet)
+          // 从模版和数据加载报表
+          // loadReport(report, '', {})
+
+          // 这是将报表对象指定给报表查看器的属性。viewer 是报表查看器的实例，而 report 是之前创建的报表对象。
+          viewer.report = report;
+        })
+      }
+
+
+      this.$refs.reportContainer.showContainer(
+        () => {
+          setTimeout(() => {
+            viewer.renderHtml('reportContainer')
+            this.createViewerButtons(viewer)
+          }, 50)
+        },
+        () => {
+        },
+      )
+
+      console.log("加载成功完成!");
+    },
+
+    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) {
+      console.log(e, 936)
+      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()
+        }
+      }
+    },
+    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 printBtn = viewer.jsObject.SmallButton(
+        'printBtn',
+        '打印报表',
+        'myClose.png'
+      )
+      // console.log(viewer.jsObject.print(),'1013')
+      // 获取 关闭按钮的dom元素位置
+      const toolbarTable = viewer.jsObject.controls.toolbar.firstChild.firstChild
+      const buttonsTable = toolbarTable.rows[0].lastChild.lastChild
+      const userButtonCell = buttonsTable.rows[0].insertCell(0)
+      // 获取打印按钮的位置
+      const buttonsTablePrint = toolbarTable.rows[0].childNodes[0].lastChild // 打印按钮
+      const userButtonPrint = buttonsTablePrint.rows[0].childNodes[0] // 打印按钮dom位置
+
+
+      userButtonPrint.addEventListener("click", (event) => {
+        console.log("打印点击");
+        // event.preventDefault()
+      });
+      userButtonPrint.addEventListener("mouseover", (event) => {
+        console.log("移入打印按钮");
+        console.log(event, 1035)
+
+      });
+
+      userButtonCell.className = 'stiJsViewerClearAllStyles'
+      userButtonCell.appendChild(closeBtn) // 添加关闭节点
+
+      // userButtonPrint.prepend(printBtn) // 在 printBtn 节点里最前面增加一个子级节点
+
+
+      let that = this
+      // 关闭按钮的监听点击
+      closeBtn.action = function () {
+        console.log(that.$refs.ReportContainer, '1022')
+        if (that.$refs.reportContainer)
+          that.$refs.reportContainer.hideContainer()
+      }
+
+      // // // 打印按钮监听
+      // printBtn.action = (e)=>{
+      //     console.log('打印')
+      //     window.print()
+      // }
+
+    },
+
+
+    addedData(type, scope) {
+      this.form = {};
+      if (type == 1) {
+        this.bbDisabled = true;
+        this.$refs.crud.rowView(scope.row, scope.$index);
+      } else if (type == 2) {
+        this.bbDisabled = true;
+        var userIdList = [];
+        userIdList = scope.row.authorizedUsersId
+        let userObj = JSON.parse(localStorage.getItem("saber-userInfo")).content;
+        for (let id of userIdList) {
+          if (id == userObj.user_id) {
+            this.bbDisabled = false;
+          }
+        }
+        if (userObj.role_name.indexOf('admin') != -1 || userObj.role_name.indexOf('报表管理') != -1) {
+          this.bbDisabled = false;
+        }
+        this.$refs.crud.rowEdit(scope.row, scope.$index);
+      } else if (type == 3) {
+        console.log(this.businessValue, 123456)
+        this.bbDisabled = false;
+        this.$set(this.form, "businessType", this.businessValue)
+        this.$refs.crud.rowAdd();
+      }
+    },
+    // 添加
+    rowSave(row, done, loading) {
+      row.authorizedUsersId = row.authorizedUsersId.join()
+      row.businessType = this.businessValue
+      add(row).then(() => {
+        this.onLoad(this.page);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
+        });
+        done();
+      }, error => {
+        loading();
+        window.console.log(error);
+      });
+    },
+    rowUpdate(row, index, done, loading) {
+      // console.log(row.authorizedUsersId)
+      // row.authorizedUsersId = row.authorizedUsersId.join()
+      update(row).then(() => {
+        this.onLoad(this.page);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
+        });
+        done();
+      }, error => {
+        loading();
+        console.log(error);
+      });
+    },
+    rowDel(row) {
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          return reportsRemove(row.id);
+        })
+        .then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+        });
+    },
+    handleDelete() {
+      if (this.selectionList.length === 0) {
+        this.$message.warning("请选择至少一条数据");
+        return;
+      }
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          return reportsRemove(this.ids);
+        })
+        .then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          this.$refs.crud.toggleSelection();
+        });
+    },
+    beforeOpen(done, type) {
+      if (["edit", "view"].includes(type)) {
+        reportsDetail(this.form.id).then(res => {
+          this.form = res.data.data;
+        });
+      }
+      done();
+    },
+    searchReset() {
+      this.query = {};
+      this.onLoad(this.page);
+    },
+    searchChange(params, done) {
+      this.query = params;
+      this.page.currentPage = 1;
+      this.onLoad(this.page, params);
+      done();
+    },
+    selectionChange(list) {
+      this.selectionList = list;
+    },
+    selectionClear() {
+      this.selectionList = [];
+      this.$refs.crud.toggleSelection();
+    },
+    currentChange(currentPage) {
+      this.page.currentPage = currentPage;
+    },
+    sizeChange(pageSize) {
+      this.page.pageSize = pageSize;
+    },
+    refreshChange() {
+      this.onLoad(this.page, this.query);
+    },
+    onLoad(page, params = {}) {
+      this.loading = true;
+      params.businessType = this.businessValue
+      if (this.groupCode) {
+        params.groupCode = this.groupCode
+      }
+      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+        const data = res.data.data;
+        this.page.total = data.total;
+        this.data = data.records;
+        this.loading = false;
+        this.selectionClear();
+      });
+    },
+    //自定义列保存
+    async saveColumnTwo(ref, option, optionBack, code) {
+      /**
+       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
+       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
+       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
+       */
+      const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
+      if (inSave) {
+        this.$message.success("保存成功");
+        //关闭窗口
+        this.$refs[ref].$refs.dialogColumn.columnBox = false;
+      }
+    },
+    //自定义列重置
+    async resetColumnTwo(ref, option, optionBack, code) {
+      this[option] = this[optionBack];
+      const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
+      if (inSave) {
+        this.$message.success("重置成功");
+        this.$refs[ref].$refs.dialogColumn.columnBox = false;
+      }
+    },
+    // 更改表格颜色
+    headerClassName(tab) {
+      //颜色间隔
+      let back = ""
+      if (tab.columnIndex >= 0 && tab.column.level === 1) {
+        if (tab.columnIndex % 2 === 0) {
+          back = "back-one"
+        } else if (tab.columnIndex % 2 === 1) {
+          back = "back-two"
+        }
+      }
+      return back;
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep#out-table .back-one {
+  background: #ecf5ff !important;
+}
+
+::v-deep#out-table .back-two {
+  background: #ecf5ff !important;
+}
+
+::v-deep .el-input-group__append {
+  padding: 0 0px !important;
+}
+
+/deep/ .el-tree-node__content>.el-tree-node__expand-icon {
+  visibility: hidden;
+}
+
+/deep/ .el-col-md-8 {
+  width: 24.33333%;
+}
+</style>

src/views/iosBasicData/businessCenter/customerLetter/detailsPage.vue

@@ -436,7 +436,7 @@ import { losbfeestemplateDetail } from "@/api/iosBasicData/losbfeestemplate";
 import dicSelect from "@/components/dicSelect/main";
 import checkSchedule from "@/components/checkH/checkSchedule.vue";
 import businessReports from "@/components/boxManagement/businessReportsTS.vue";
-import reports from "@/components/boxManagement/reports.vue";
+import reports from "@/components/boxManagement/reportsTS.vue";
 import freightRate from "./components/freightRate.vue";
 import { deptGetDetailPol } from '@/api/iosBasicData/bills'
 import { getDicinit } from "@/api/dicSelect/index";