yf-admin-ui/src/views/iosBasicData/OceanFreightImport/bills/assembly/reports.vue

<template>
  <basic-container>
    <!--<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', 312.8)"
      @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 312.8)" @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="authorizedUsersIdForm">
        <dic-select v-model="form.authorizedUsersId" placeholder="授权用户" key="id" keyValue="id" label="realName"
          url="/blade-user/userListAll" :filterable="true" :multiple="true" dataName="realName" dataType="string"
          @selectChange="dicChange('authorizedUsersId', $event, form)"></dic-select>
      </template>
      <template slot="authorizedRoleIdForm">
        <dic-select v-model="form.authorizedRoleId" placeholder="授权角色" key="id" keyValue="id" label="roleName"
          url="/blade-system/role/list" :filterable="true" :multiple="true" dataName="roleName" dataType="string"
          @selectChange="dicChange('authorizedRoleId', $event, form)"></dic-select>
      </template>
      <template slot="authorizedTeamIdForm">
        <dic-select v-model="form.authorizedTeamId" placeholder="授权团队" key="id" keyValue="id" label="postName"
          url="/blade-system/post/listAll" :filterable="true" :multiple="true" dataName="postName" dataType="string"
          @selectChange="dicChange('authorizedTeamId', $event, form)"></dic-select>
      </template>
      <template slot="excludeUsersIdForm">
        <dic-select v-model="form.excludeUsersId" placeholder="排除用户" key="id" keyValue="id" label="realName"
          url="/blade-user/userListAll" :filterable="true" :multiple="true" dataName="realName" dataType="string"
          @selectChange="dicChange('excludeUsersId', $event, form)"></dic-select>
      </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"
          @click="addedData(2, scope)">编 辑&nbsp;&nbsp;</el-link>
        <el-link type="primary" style="font-size: 12px" icon="el-icon-delete" :underline="false"
          @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>
    <reportContainer ref="reportContainer"></reportContainer>
    <mail-component ref="mailComponentRef" />
  </basic-container>
</template>

<script>
import { getList, reportsDetail, add, update, reportsRemove2, reportsGetReportData } from "@/api/iosBasicData/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 { isProcurement } from "@/api/basicData/configuration";
import dicSelect from "@/components/dicSelect/main";
import mailComponent from "@/components/iosbasic-data/mail-component.vue";
export default {
  components: {
    reportContainer,
    dicSelect,
    mailComponent
  },
  props: {
    assemblyForm: {
      type: Object,
      default: {}
    },
    id: {
      type: String
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    businessValue: {
      type: String,
      default: ''
    },
    groupCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      textareaNumber: 5,
      userList: [],
      isPrintTheBoxNumber: false,
      bbDisabled: false,
      form: {
        authorizedUsers: null,
      },
      formReport: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {},
      optionBack: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: true,
        selection: true,
        dialogClickModal: false,
        column: [
          {
            label: "业务类型",
            prop: "businessType",
            disabled: true,
            type: 'select',
            dicData: [],
            props: {
              label: "cnName",
              value: "code"
            },
            // rules: [{
            //   required: true,
            //   message: "请输入业务类型",
            //   trigger: "blur"
            // }]
          },
          {
            label: "类别",
            prop: "classifyCode",
            rules: [{
              required: true,
              message: "请输入类别",
              trigger: "blur"
            }]
          },
          {
            label: "组别",
            prop: "groupCode",
            rules: [{
              required: true,
              message: "请输入组别",
              trigger: "blur"
            }]
          },
          {
            label: "报表编码",
            prop: "code",
            search: true,
            rules: [{
              required: true,
              message: "请输入报表编码",
              trigger: "blur"
            }]
          },
          {
            label: "中文名称",
            prop: "cnName",
            search: true,
            rules: [{
              required: true,
              message: "请输入中文名称",
              trigger: "blur"
            }]
          },
          {
            label: "英文名称",
            prop: "enName"
          },
          {
            label: "报表格式",
            prop: "content",
            rules: [{
              required: true,
              message: "请输入报表格式",
              trigger: "blur"
            }]
          },
          {
            label: "授权用户",
            prop: "authorizedUsersId",
            hide: true,
            showColumn: false,
            formslot: true,
            overHidden: true,
          },
          {
            label: "授权用户",
            prop: "authorizedUsers",
            display: false,
            overHidden: true,
          },
          {
            label: "授权角色",
            prop: "authorizedRoleId",
            hide: true,
            showColumn: false,
            formslot: true,
            overHidden: true,
          },
          {
            label: "授权角色",
            prop: "authorizedRole",
            display: false,
            overHidden: true,
          },
          {
            label: "授权团队",
            prop: "authorizedTeamId",
            hide: true,
            showColumn: false,
            formslot: true,
            overHidden: true,
          },
          {
            label: "授权团队",
            prop: "authorizedTeam",
            display: false,
            overHidden: true,
          },
          {
            label: "排除用户",
            prop: "excludeUsersId",
            hide: true,
            showColumn: false,
            formslot: true,
            overHidden: true,
          },
          {
            label: "排除用户",
            prop: "excludeUsers",
            display: false,
            overHidden: true,
          },
          {
            label: "状态",
            prop: "status",
            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: []
    };
  },
  async created() {
    this.option = await this.getColumnData(this.getColumnName(312.8), this.optionBack);
    isProcurement({ "param": "textarea.number" }).then(res => {
      if (res.data.data) {
        this.textareaNumber = res.data.data
      }
    })
    // 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: {
    dicChange(name, row) {
      if (name == 'authorizedUsersId') {
        if (row) {
          this.form.authorizedUsers = row
        } else {
          this.form.authorizedUsersId = null
          this.form.authorizedUsers = null
        }
      }
      if (name == 'authorizedRoleId') {
        if (row) {
          this.form.authorizedRole = row
        } else {
          this.form.authorizedRoleId = null
          this.form.authorizedRole = null
        }
      }
      if (name == 'authorizedTeamId') {
        if (row) {
          this.form.authorizedTeam = row
        } else {
          this.form.authorizedTeamId = null
          this.form.authorizedTeam = null
        }
      }
      if (name == 'excludeUsersId') {
        if (row) {
          this.form.excludeUsers = row
        } else {
          this.form.excludeUsersId = null
          this.form.excludeUsers = null
        }
      }
    },
    // 设计报表
    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',
      //     corpCnName: 'analysis3',
      //     list: [
      //       {
      //         id:1,
      //         pid:2,
      //         feeCnNameData: 'fee list1',
      //         usd: 'usd',
      //         rmb: 'rmb',
      //         tr: '税',
      //         corpCnName: 'customer',
      //       },
      //       {
      //         id:2,
      //         pid:2,
      //         feeCnNameData: 'fee list2',
      //         usd: 'usd',
      //         rmb: 'rmb',
      //         tr: '税',
      //         corpCnName: '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',
      //     corpCnName: 'analysis3',
      //     list: [
      //       {
      //         id:3,
      //         pid:3,
      //         feeCnNameData: 'fee list',
      //         usd: 'usd',
      //         rmb: 'rmb',
      //         tr: '税',
      //         corpCnName: 'customer',
      //       },
      //       {
      //         id:4,
      //         pid:3,
      //         feeCnNameData: 'fee list',
      //         usd: 'usd',
      //         rmb: 'rmb',
      //         tr: '税',
      //         corpCnName: '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',
      //     corpCnName: 'analysis3',
      //     list: [
      //       {
      //         id:10,
      //         pid:4,
      //         feeCnNameData: 'fee list',
      //         usd: 'usd',
      //         rmb: 'rmb',
      //         tr: '税',
      //         corpCnName: 'customer',
      //       },
      //       {
      //         id:11,
      //         pid:4,
      //         feeCnNameData: 'fee list',
      //         usd: 'usd',
      //         rmb: 'rmb',
      //         tr: '税',
      //         corpCnName: '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) {
      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.corpCnName.split(' - ')[0] + '-' + 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'
          // 处理超长数据
          console.log(data.commodityDescr)
          if (data.hshipperDetails) {
            let arrDeteil = []
            arrDeteil = data.hshipperDetails.split('\n')
            if (arrDeteil.length > this.textareaNumber) {
              data.hshipperDetails = arrDeteil.slice(0, this.textareaNumber).join('\n') + '*'
              data.commodityDescr += "\n*" + arrDeteil.slice(this.textareaNumber, arrDeteil.length).join('\n')
            } else {
              data.hshipperDetails = data.hshipperDetails
            }
          }

          if (data.hconsigneeDetails) {
            let arrDeteil = []
            arrDeteil = data.hconsigneeDetails.split('\n')
            if (arrDeteil.length > this.textareaNumber) {
              data.hconsigneeDetails = arrDeteil.slice(0, this.textareaNumber).join('\n') + '**'
              data.commodityDescr += "\n**" + arrDeteil.slice(this.textareaNumber, arrDeteil.length).join('\n')
            } else {
              data.hconsigneeDetails = data.hconsigneeDetails
            }
          }

          if (data.hnotifyDetails) {
            let arrDeteil = []
            arrDeteil = data.hnotifyDetails.split('\n')
            if (arrDeteil.length > this.textareaNumber) {
              data.hnotifyDetails = arrDeteil.slice(0, this.textareaNumber).join('\n') + '***'
              data.commodityDescr += "\n***" + arrDeteil.slice(this.textareaNumber, arrDeteil.length).join('\n')
            } else {
              data.hnotifyDetails = data.hnotifyDetails
            }
          }
          console.log(data.commodityDescr)
          // 处理箱号
          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
            }
            // let arrDeteil = []
            // arrDeteil = data.commodityDescr.split('\n')
            // if (arrDeteil.length > 18) {
            //   data.commodityDescr = arrDeteil.slice(0, 18).join('\n')
            // }
          }
          // 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) {
        this.bbDisabled = false;
        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 reportsRemove2(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 reportsRemove2(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>