tire-platform-ui/src/views/iosBasicData/SeafreightExportF/bills/assembly/DocumentCenter.vue

<template>
    <div>
        <el-row>
            <el-col :span="5">
                <el-scrollbar>
                    <basic-container>
                        <avue-tree :option="treeOption" :data="feesTypeData" @node-click="nodeClick">
                        </avue-tree>
                    </basic-container>
                </el-scrollbar>
            </el-col>
            <el-col :span="19">
                <basic-container>
                    <avue-crud :option="documentOption" :table-loading="loading" :data="documentData" :page.sync="documentPage" :search.sync="documentSearch"
                               id="out-table" :header-cell-class-name="headerClassName"
                               :before-open="beforeOpen" ref="documentCrud" @search-change="searchChange"
                               @search-reset="searchReset" @refresh-change="refreshChange" @on-load="reportslogListfun"
                               @resetColumn="resetColumnTwo('documentCrud', 'documentOption', 'documentOptionBack', 312.1)"
                               @saveColumn="saveColumnTwo('documentCrud', 'documentOption', 'documentOptionBack', 312.1)" >
                        <template slot="menuLeft">
                            <el-button type="primary" size="small" icon="el-icon-plus" :disabled="disabled" @click="addbtnfun()">新增
                            </el-button>
                        </template>
                        <template slot-scope="scope" slot="menu">
                            <el-button type="text" size="small" :disabled="disabled" @click="printEditing(scope.row)" >编辑</el-button>
                            <el-button type="text" size="small" :disabled="disabled" @click="printDelete(scope.row)" >
                                <span v-if="disabled" >删除</span>
                                <span v-else style="color: red">删除</span>
                            </el-button>
                            <el-button type="text" size="small" @click="dialogPreviewfun(scope.row)">打印预览</el-button>
                        </template>
                    </avue-crud>
                </basic-container>
            </el-col>
        </el-row>


        <!--添加编辑弹窗-->
        <el-dialog :title="businesstypeData.cnName"
                   :close-on-click-modal="false"
                   :visible.sync="documentVisible"
                   append-to-body
                   width="60%"
                   :before-close="corpTypeClose">
            <Dispatch-Notice v-if="businesstypeData.reportsType == 'PCTZD'" :documentForm="documentForm"></Dispatch-Notice>
            <Purchase-Notice v-else-if="businesstypeData.reportsType == 'RHTZ'" :documentForm="documentForm"></Purchase-Notice>
            <BillofLadingDetails v-else-if="businesstypeData.reportsType == 'TDXQ'||businesstypeData.reportsType == 'DCWTS'" :documentForm="documentForm"></BillofLadingDetails>
            <span slot="footer" class="dialog-footer">
                <!--<el-button type="success" @click="documentSubmit(true)" >保存并打印</el-button>-->
                <el-button v-if="addShow" type="success" :disabled="!documentForm.id" @click="dialogPreviewfun(editData)" >打印</el-button>
                <el-button @click="printingCanceling">取 消</el-button>
                <el-button type="primary" @click="documentSubmit(false)">保 存</el-button>
            </span>
        </el-dialog>

        <!--费用打印-->
        <reportContainer ref="reportContainer"></reportContainer>


        <!--打印预览弹窗-->
        <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 :before-close="corpTypeClose">
            <avue-crud :option="PreviewOption"
                       :table-loading="loading"
                       :data="PreviewData"
                       :page.sync="PreviewPage"
                       :search.sync="PreviewQuery"
                       ref="crud"
                       id="out-table"
                       :header-cell-class-name="headerClassName"
                       @resetColumn="resetColumnTwo('crud', 'PreviewOption', 'PreviewOptionBack', 312.3)"
                       @saveColumn="saveColumnTwo('crud', 'PreviewOption', 'PreviewOptionBack', 312.3)"
                       @search-change="PreviewSearchChange"
                       @search-reset="PreviewSearchReset"
                       @current-change="PreviewCurrentChange"
                       @size-change="PreviewSizeChange"
                       @refresh-change="PreviewRefreshChange" >
                <template slot-scope="scope" slot="menu">
                    <el-link type="primary" :disabled="scope.row.status == 1"
                             @click="handleReportPreview(scope.row.url,documentForm)">预览报表</el-link>
                </template>
            </avue-crud>
        </el-dialog>
    </div>
</template>

<script>
import {
    getList as reportsList,
    reportsGetReportData,
    reportsDetail,
    reportsRemove,
    getList
} from "@/api/iosBasicData/reports";
import {reportslogList, reportslogSubmit} from "@/api/iosBasicData/bills";
import {bbusinesstypeList} from "@/api/iosBasicData/bbusinesstype";
import bbusinesstype from "@/views/iosBasicData/bbusinesstype/index.vue";
import reportformsList from "@/views/iosBasicData/SeafreightExportF/bills/assembly/reportformsList.vue";
import DispatchNotice from '@/views/iosBasicData/SeafreightExportF/bills/assembly/reportformsFrame/DispatchNotice.vue'
import PurchaseNotice from "@/views/iosBasicData/SeafreightExportF/bills/assembly/reportformsFrame/PurchaseNotice.vue";
import reportContainer from "@/views/iosBasicData/report-container/report-container.vue";
import BillofLadingDetails
    from "@/views/iosBasicData/SeafreightExportF/bills/assembly/reportformsFrame/BillofLadingDetails.vue";
import businessReports from "@/views/iosBasicData/SeafreightExportF/bills/assembly/businessReports.vue";
import losaudit from "@/views/wel/components/losAssembly/losaudit.vue";
import {dateFormat} from "@/util/date";
    export default {
        components: {
            businessReports,
            BillofLadingDetails, reportContainer, reportformsList, bbusinesstype,DispatchNotice,PurchaseNotice},
        data(){
            return {
                previewDialog:false, // 打印预览弹窗
                PreviewOption:{}, // 打印预览弹窗的配置项
                PreviewOptionBack: {
                    height:'auto',
                    calcHeight: 30,
                    tip: false,
                    searchShow: true,
                    searchMenuSpan: 6,
                    border: true,
                    index: true,
                    selection: true,
                    dialogClickModal: false,
                    menuWidth:100,
                    addBtn:false,
                    viewBtn:false,
                    delBtn:false,
                    editBtn:false,
                    column: [
                        {
                            label: "组别",
                            prop: "groupCode",
                            rules: [{
                                required: true,
                                message: "请输入组别",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "报表编码",
                            prop: "code",
                            rules: [{
                                required: true,
                                message: "请输入报表编码",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "中文名称",
                            prop: "cnName",
                            rules: [{
                                required: true,
                                message: "请输入中文名称",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "英文名称",
                            prop: "enName"
                        },
                        {
                            label: "报表格式",
                            prop: "content",
                            rules: [{
                                required: true,
                                message: "请输入报表格式",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "备注",
                            prop: "remarks"
                        },
                    ]
                },
                PreviewData:[], // 打印预览弹窗获取的数据
                PreviewQuery:{}, // 搜索项
                // 打印预览弹窗分页数据
                PreviewPage:{
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },

                documentVisible:false, // 单证添加编辑弹窗
                editData:{}, // 编辑弹窗的数据
                documentForm:{}, // 添加编辑弹窗的数据
                documenturl:'', // 报表的url 暂存
                // 左侧配置项
                treeOption: {
                    nodeKey: "id",
                    // lazy: true,
                    addBtn: false,
                    menu: false,
                    size: "small",
                    props: {
                        labelText: "标题",
                        label: "cnName",
                        value: "value",
                        children: "children"
                    }
                },
                feesTypeData:[
                    {
                        cnName: '入货通知',
                        classifyCode:'单证',
                        groupCode:'入货通知',
                        reportsType:'RHTZ',
                        businessType:'HYCK'
                    },
                    {
                        cnName: '派车通知单',
                        classifyCode:'单证',
                        groupCode:'派车通知单',
                        reportsType:'PCTZD',
                        businessType:'HYCK'
                    },
                    {
                        cnName: '提单详情',
                        classifyCode:'单证',
                        groupCode:'提单详情',
                        reportsType:'TDXQ',
                        businessType:'HYCK'
                    },
                    {
                        cnName: '订舱委托书',
                        classifyCode:'单证',
                        groupCode:'提单详情',
                        reportsType:'DCWTS',
                        businessType:'HYCK' 
                    }
                ], // 左侧获取的数据
                documentOption:{},
                documentOptionBack: {
                    dialogDrag: true,
                    height: 'auto',
                    calcHeight: 30,
                    tip: false,
                    searchShow: true,
                    searchMenuSpan: 6,
                    border: true,
                    index: true,
                    selection: true,
                    dialogClickModal: false,
                    addBtn:false,
                    viewBtn:false,
                    delBtn:false,
                    editBtn:false,
                    menuWidth:'160',
                    column: [
                        {
                            label: "报表编码",
                            prop: "reportsCode",
                            overHidden:true,
                        },
                        {
                            label: "单据类型",
                            prop: "groupCode",
                            overHidden:true,
                        },
                        {
                            label: "创建人",
                            prop: "createUserName",
                            overHidden:true,
                        },
                        {
                            label: "创建时间",
                            prop: "createTime",
                            overHidden:true,
                        },
                    ]
                },
                documentSearch:{},
                documentPage:{
                    pageSize: 10,
                    currentPage: 1,
                    total: 0,
                    pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500]
                },
                query: {},
                documentData:[],
                loading:false,
                businesstypeData:{}, // 左侧选择的数据
                addShow:false,
            }
        },
        props:{
            assemblyForm:{
                type:Object,
                default:{}
            },
            detailData:{
                type:Object,
                default: {}
            },
        disabled: {
            type: Boolean,
            default: false,
        },
        },
        async created() {
            this.documentOption = await this.getColumnData(this.getColumnName(312.1), this.documentOptionBack);
            this.PreviewOption = await this.getColumnData(this.getColumnName(312.3), this.PreviewOptionBack);
            // this.reportsListfun()
        },
        methods:{
            // 打印预览按钮
            async dialogPreviewfun(row){
                this.editData = row
                if(row.printContent){
                    this.documentForm = JSON.parse(row.printContent).data
                }
                this.PreviewPage.currentPage = 1;
                const data = await this.PreviewOnLoad(this.PreviewPage, {
                    businessType:'HYCK',
                    classifyCode:'单证',
                    groupCode:row.groupCode
                });
                this.$nextTick(()=>{
                    if (data.length == 1) {
                        this.handleReportPreview(data[0].url,this.documentForm)
                    }else {
                        this.previewDialog = true
                    }
                })
                // let obj = {businessType:'HYCK',classifyCode:'单证',groupCode:row.groupCode}
                // let documentaa = null // 暂存url数据
                // reportsList(1,20,{
                //     businessType:'HYCK',
                //     classifyCode:'单证',
                //     groupCode:row.groupCode,
                // }).then(resz=>{
                //     const h = this.$createElement;
                //     const that = this
                //     this.$msgbox({
                //         title: "请选择数据",
                //         message: h('el-select',
                //             {
                //                 props: {
                //                     value: documentaa,
                //                     filterable: true,
                //                     size:'small'
                //                 },
                //                 ref: 'selectView',
                //                 on: {
                //                     change:e => {
                //                         documentaa = e
                //                         that.$refs.selectView.value = e  // select下拉框值改变，回显到页面上
                //                     },
                //                 },
                //             },
                //             [
                //                 resz.data.data.records.map(it => {
                //                     return h('el-option', {
                //                         props: {
                //                             label: it.cnName,
                //                             key: it.id,
                //                             value: it.url,
                //                         },
                //                     });
                //                 })
                //             ]
                //         ),
                //         showCancelButton: true,
                //         closeOnClickModal: false,
                //         confirmButtonText: '确定',
                //         cancelButtonText: '取消',
                //     }).then( _ => {
                //         // 成功操作。。。。
                //         this.documenturl = documentaa
                //         this.handleReportPreview(this.documenturl,JSON.parse(row.printContent).data)
                //     }).catch(msg => {
                //         // 取消操作。。。。
                //     });
                // })
            },
            PreviewSearchReset() {
                this.PreviewQuery = {};
                this.PreviewOnLoad(this.PreviewPage,{
                    businessType:'HYCK',
                    classifyCode:'单证',
                    groupCode:this.editData.groupCode
                });
            },
            PreviewSearchChange(params, done){
                this.PreviewQuery = params;
                this.PreviewPage.currentPage = 1;
                this.PreviewOnLoad(this.PreviewPage, params);
                done();
            },
            PreviewCurrentChange(currentPage){
                this.PreviewPage.currentPage = currentPage;
            },
            PreviewSizeChange(pageSize){
                this.PreviewPage.pageSize = pageSize;
            },
            PreviewRefreshChange() {
                this.PreviewOnLoad(this.PreviewPage, {
                    businessType:'HYCK',
                    classifyCode:'单证',
                    groupCode:this.editData.groupCode
                });
            },
            // 打印预览弹窗数据
            async PreviewOnLoad(page, params = {}){
                const res = await reportsList(page.currentPage, page.pageSize, Object.assign(params, this.PreviewQuery))
                const data = res.data.data;
                this.PreviewPage.total = data.total;
                this.PreviewData = data.records;
                return data.records
            },
            // 新建单证按钮
            addbtnfun(){
                if (!this.assemblyForm.id) {
                    this.$message.warning("请先保存数据");
                    return;
                }
                if(!this.businesstypeData.cnName){
                    this.$message.warning("请先选择报表类型");
                    return
                }
                this.addShow=false
                reportsGetReportData({
                    billId:this.assemblyForm.id,
                    reportCode:this.businesstypeData.classifyCode,
                    groupCode:this.businesstypeData.groupCode,
                    reportsType:this.businesstypeData.reportsType,
                    type:'HYCK'
                }).then(res=>{
                    this.editData.groupCode=this.businesstypeData.groupCode
                    this.documentForm = res.data.data.data
                    // 联系人
                    this.documentForm.corpAttnName = this.documentForm.corpAttnName + '' + this.documentForm.corpAttnTel
                    // this.documenturl = this.businesstypeData.url;
                    // 打开报表选择框
                    this.documentVisible = true
                    
                })
            },
            // 编辑
            printEditing(row){
                if(!this.businesstypeData.cnName){
                    this.$message.warning("请先选择报表类型");
                    return
                }
                // this.businesstypeData.code = row.reportsCode
                this.addShow=true
                this.editData = row
                this.documentForm = JSON.parse(row.printContent).data
                // this.documenturl = JSON.parse(row.printContent).url;
                this.documentVisible = true
            },
            // 删除
            printDelete(row){
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(()=>{
                    reportsRemove(row.id).then(res=>{
                        this.$message.success('操作成功')
                        this.reportslogListfun(this.documentPage, this.query);
                    })
                })
            },
            // 单证弹窗的确认按钮
            documentSubmit(type){
                let obj = {}
                if (this.editData.id){
                    obj = this.editData
                }else {
                    obj.remarks = this.assemblyForm.remarks
                    obj.businessType = this.assemblyForm.businessType
                    obj.billId = this.assemblyForm.id
                    obj.billNo = this.assemblyForm.billNo
                    obj.mblno = this.assemblyForm.mblno
                    obj.hblno = this.assemblyForm.hblno
                    obj.reportsCode = this.businesstypeData.reportsType
                    obj.groupCode = this.businesstypeData.groupCode
                    obj.reportsType = this.businesstypeData.reportsType
                }
                obj.printContent = JSON.stringify({
                    data:{
                        ...this.documentForm,
                        to:this.documentForm.corpCnName,
                        attn:this.documentForm.corpAttnName,
                        fm:this.documentForm.createUserName,
                        fax:this.documentForm.fax,
                        cc:this.documentForm.cc,
                        email:this.documentForm.ematl,
                        department:this.documentForm.corpAttnName,
                        operate:this.documentForm.operatorName,
                        mobilePhone:this.documentForm.mobilePhone,
                        remarks:this.documentForm.cyRemarks,
                        contacts:this.documentForm.cyContacts,
                        deliverylocation:this.documentForm.cyCnName,
                        shippingAgency:this.documentForm.bookingAgentCnName,
                        Telephone:this.documentForm.cyTel,
                        datetime:dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss')
                    }
                    // url:this.documenturl
                })
                console.log(obj)
                // 保存
                reportslogSubmit(obj).then(res=>{
                    if (type) {
                        let documentaa = null // 暂存url数据
                        reportsList(1,20,{
                            businessType:'HYCK',
                            classifyCode:'单证',
                            groupCode:res.data.data.groupCode,
                        }).then(resz=>{
                            const h = this.$createElement;
                            const that = this
                            this.$msgbox({
                                title: "请选择数据",
                                message: h('el-select',
                                    {
                                        props: {
                                            value: documentaa,
                                            filterable: true,
                                            size:'small'
                                        },
                                        ref: 'selectView',
                                        on: {
                                            change:e => {
                                                documentaa = e
                                                that.$refs.selectView.value = e  // select下拉框值改变，回显到页面上
                                            },
                                        },
                                    },
                                    [
                                        resz.data.data.records.map(it => {
                                            return h('el-option', {
                                                props: {
                                                    label: it.cnName,
                                                    key: it.id,
                                                    value: it.url,
                                                },
                                            });
                                        })
                                    ]
                                ),
                                showCancelButton: true,
                                closeOnClickModal: false,
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                            }).then( _ => {
                                // 成功操作。。。。
                                this.documenturl = documentaa
                                this.handleReportPreview(this.documenturl,this.documentForm)
                                this.reportslogListfun(this.documentPage, {...this.query,reportsCode:res.data.data.reportsCode});
                                this.editData = {}
                                this.documentForm = {}
                                this.documenturl = {}
                                this.documentVisible = false
                            }).catch(msg => {
                                // 取消操作。。。。
                            });
                        })
                    }else {
                        this.$message.success('操作成功')
                        this.reportslogListfun(this.documentPage, {...this.query,reportsCode:res.data.data.reportsCode});
                        this.editData = {}
                        this.documentForm = {}
                        this.documenturl = {}
                        this.documentVisible = false
                    }
                })
            },
            // 打印取消
            printingCanceling(){
                this.editData = {}
                this.documentForm = {}
                this.documenturl = {}
                this.documentVisible = false
            },
            // 左侧筛选
            nodeClick(data) {
                this.editData={}
                this.documentForm={}
                this.businesstypeData={}
                this.businesstypeData = data
                this.reportslogListfun(this.documentPage, {reportsType:data.reportsType});
            },
            // 左侧数据获取
            // reportsListfun(){
            //     reportsList(1,20,{
            //         businessType:'HYCK',
            //         classifyCode:'单证',
            //         groupCode:'派车通知单,入货通知，提单详情',
            //         code:'BZRHTZ,TDXQ,PCTZD,'
            //     }).then(res=>{
            //         this.feesTypeData = res.data.data.records
            //     })
            // },
            // 类别弹窗关闭
            corpTypeClose(done) {
                console.log(1111)
                this.editData={}
                this.documentForm={}
                this.businesstypeData={}
               done();
            },
            // 点击搜索触发
            searchChange(params, done){
                this.query = params;
                this.documentPage.currentPage = 1;
                this.reportslogListfun(this.documentPage, params);
                done();
            },
            // 清空搜索回调方法
            searchReset(){
                this.query = {};
                this.reportslogListfun(this.documentPage);
            },
            // 点击刷新按钮
            refreshChange(){
                this.reportslogListfun(this.documentPage, {...this.query,reportsCode:this.businesstypeData.content});
            },
            // 打开前的回调
            beforeOpen(done, type) {
                // 编辑和查看
                if (["edit", "view"].includes(type)) {

                }
            },
            // 单证中心数据获取
            reportslogListfun(documentPage, params = {}){
                if(!this.assemblyForm.id) {
                    return
                }
                this.loading = true;
                reportslogList(documentPage.currentPage, documentPage.pageSize, {
                    ...Object.assign(params, this.query),
                    billId:this.assemblyForm.id
                }).then(res=>{
                    const data = res.data.data;
                    this.documentPage.total = data.total;
                    this.documentData = data.records;
                    this.loading = false;
                })
            },
            // 预览报表
            handleReportPreview(url,data){
                console.log(url,1670)
                console.log(data,1671)
                // 处理时间
                data.end = data.end?data.end.slice(0,10):''
                data.goodsTime = data.goodsTime?data.goodsTime.slice(0,10):''
                data.clearanceTime = data.clearanceTime?data.clearanceTime.slice(0,10):''
                data.vgmDeadline = data.vgmDeadline?data.vgmDeadline.slice(0,10):''

                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 // 打印按钮是否显示   下面直接自定义控制打印弹窗是否开启

                // 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)

                // 报表
                console.log("创建一个报表实例");
                console.log()
                let report = new window.Stimulsoft.Report.StiReport();

                // 加载文件
                console.log("从url加载报表");
                // report.loadFile("/reports/stimulsoft/demos/SimpleList.mrt");
                report.load(url)

                data.pageOne = 'Page : 1 of 1'
                // 处理超长数据
                if (data.hshipperDetails) {
                    let arrDeteil=[]
                    arrDeteil=data.hshipperDetails.split('\n')
                    if(arrDeteil.length>5){
                        data.hshipperDetails=arrDeteil.slice(0, 5).join('\n')+'***'
                        data.commodityDescr+="\n***"+arrDeteil.slice(5,arrDeteil.length).join('\n')
                    }else{
                        data.hshipperDetails =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) {
                    let arrDeteil=[]
                    arrDeteil=data.hconsigneeDetails.split('\n')
                    if(arrDeteil.length>5){
                        data.hconsigneeDetails=arrDeteil.slice(0, 5).join('\n')+'***'
                        data.commodityDescr+="\n***"+arrDeteil.slice(5,arrDeteil.length).join('\n')
                    }else{
                        data.hconsigneeDetails =data.hconsigneeDetails
                    }
                    // var consigneeIndex2 = data.hconsigneeDetails.indexOf( '\n' )
                    // for (let i = 0; i < 4; 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) {
                    let arrDeteil=[]
                    arrDeteil=data.hnotifyDetails.split('\n')
                    if(arrDeteil.length>5){
                        data.hnotifyDetails=arrDeteil.slice(0, 5).join('\n')+'***'
                        data.commodityDescr+="\n***"+arrDeteil.slice(5,arrDeteil.length).join('\n')
                    }else{
                        data.hnotifyDetails =data.hnotifyDetails
                    }
                    // var notifierIndex2 = data.hnotifyDetails.indexOf( '\n' )
                    // for (let i = 0; i < 4; 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("加载成功完成!");
            },
            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()
                // }

            },

            //自定义列保存
            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 scoped>
::v-deep#out-table .back-one {
    background: #ecf5ff !important;
}

::v-deep#out-table .back-two {
    background: #ecf5ff !important;
}
</style>