yf-admin-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>
                <BillofLadingDetailsM
                v-else-if="businesstypeData.reportsType == 'MBL BOOKING SHEET'"
                :documentForm="documentForm"></BillofLadingDetailsM>
            <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 BillofLadingDetailsM
    from "@/views/iosBasicData/SeafreightExportF/bills/assembly/reportformsFrame/BillofLadingDetailsM.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";
import { isProcurement } from "@/api/basicData/configuration";
export default {
    components: {
        businessReports,
        BillofLadingDetails,BillofLadingDetailsM, reportContainer, reportformsList, bbusinesstype, DispatchNotice, PurchaseNotice
    },
    data() {
        return {
            textareaNumber:5,
            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: '提单详情(H)',
                    classifyCode: '单证',
                    groupCode: '提单详情(H)',
                    reportsType: 'TDXQ',
                    businessType: 'HYCK'
                },
                {
                    cnName: '提单详情(M)',
                    classifyCode: '单证',
                    groupCode: '提单详情(M)',
                    reportsType: 'MBL BOOKING SHEET',
                    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);
        isProcurement({ "param": "textarea.number" }).then(res => {
            if(res.data.data){
                this.textareaNumber = res.data.data
            }
        })
        // 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=='提单详情(H)'?'提单详情':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=='提单详情(H)'?'提单详情':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.remarks,
                    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 > 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
                }
            }

            // 处理箱号
            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>