tire-platform-ui/src/views/iosBasicData/oceanShippingCar/dispatchCarAmend/detailsPage.vue

<template>
    <div class="borderless" v-loading="pageLoading">
        <div class="customer-head">
            <div class="customer-back">
                <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                    @click="backToList">返回列表
                </el-button>
            </div>
            <div class="add-customer-btn">
                <el-button size="small" style="margin-right: 8px" :loading="saveLoading" :disabled="!form.id"
                    @click="previewreportfun">预 览
                </el-button>
                <el-button size="small" style="margin-right: 8px"
                    v-if="roleName.indexOf('admin') != -1 ? true : roleName.indexOf('报表管理') != -1 ? true : false"
                    :loading="saveLoading" :disabled="!form.id" @click="DesignreportDialog = true">报表设计
                </el-button>
                <el-button size="small" type="success" style="margin-right: 8px"
                    v-if="form.status == 0 || form.status == 4" :disabled="!form.id || editPower" :loading="saveLoading"
                    @click="submitforApproval">提交请核
                </el-button>
                <el-button size="small" type="warning" plain v-if="form.status == 1" :disabled="!form.id || editPower"
                    :loading="saveLoading" @click="revokepleaseReview">撤销请核
                </el-button>
                <span v-if="form.status == 2" style="font-size: 14px;margin-right: 10px;">审核中</span>
                <span v-if="form.status == 3" style="font-size: 12px;margin-right: 10px;">审核通过</span>
                <el-button size="small" type="primary" style="margin-right: 8px" :disabled="buttonDisable"
                    :loading="saveLoading" @click="amendsSubmitfun">保 存
                </el-button>
            </div>
        </div>
        <div style="margin: 55px 5px 0px 5px;'">
            <el-card class="box-card">
                <el-form :model="form" ref="form" label-width="90px" class="demo-ruleForm" :rules="rules">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="原M B/L NO" prop="mblno">
                                <el-input style="width: 100%;" v-model="form.mblno" :disabled="buttonDisable"
                                    size="small" autocomplete="off" clearable placeholder="请输入原M B/L NO">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="原H B/L NO" prop="hblno">
                                <el-input style="width: 100%;" v-model="form.hblno" :disabled="buttonDisable"
                                    size="small" autocomplete="off" clearable placeholder="请输入原H B/L NO">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="原外提单号" prop="refno">
                                <el-input style="width: 100%;" v-model="form.refno" :disabled="buttonDisable"
                                    size="small" autocomplete="off" clearable placeholder="请输入原外提单号">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="5">
                            <el-form-item label="BOOKINGNO" prop="bookingNo">
                                <el-input style="width: 100%;" v-model="form.bookingNo" :disabled="buttonDisable"
                                    size="small" autocomplete="off" clearable placeholder="请输入BOOKINGNO">
                                </el-input>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="6">
                            <el-form-item label="AMEND原因" prop="responsibleParty">
                                <search-query :datalist="responsiblePartyData" :selectValue="form.responsibleParty"
                                    :filterable="true" :disabled="buttonDisable" :clearable="true" :buttonIf="false"
                                    placeholder="请选择AMEND原因"
                                    :forParameter="{ key: 'dictKey', label: 'dictValue', value: 'dictKey' }"
                                    @corpChange="corpChange($event, 'responsibleParty')" @corpFocus="amendReasonfun">
                                </search-query>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-col :span="15">
                                <el-form-item label="客户名称" prop="corpCnName">
                                    <el-input style="width: 100%;" v-model="form.corpCnName" size="small"
                                        autocomplete="off" :disabled="true" clearable placeholder="客户名称">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9">
                                <el-form-item label="" prop="corpEnName" label-width="5px">
                                    <el-input style="width: 100%;" v-model="form.corpEnName" size="small"
                                        autocomplete="off" :disabled="true" clearable placeholder="客户名称">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="业务类型" prop="businessType">
                                <search-query :datalist="origSeaTypeData" :selectValue="form.origSeaType"
                                    :filterable="true" :disabled="true" :clearable="true" :buttonIf="false"
                                    placeholder="业务类型">
                                </search-query>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="原业务编号" prop="billNo">
                                <el-input style="width: 100%;" v-model="form.origBillNo" size="small" autocomplete="off"
                                    :disabled="true" clearable placeholder="原业务编号">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="账单日期" prop="createTime">
                                <el-date-picker v-model="form.createTime" :clearable="false" style="width: 100%;"
                                    type="date" size="small" value-format="yyyy-MM-dd HH:mm:ss"
                                    :disabled="buttonDisable" placeholder="选择账单日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>

                        <el-col :span="5">
                            <el-form-item label="船名" prop="vesselCnName">
                                <el-input style="width: 100%;" v-model="form.vesselCnName" size="small"
                                    autocomplete="off" :disabled="true" clearable placeholder="船名">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="航次" prop="voyageNo">
                                <el-input style="width: 100%;" v-model="form.voyageNo" size="small" autocomplete="off"
                                    :disabled="true" clearable placeholder="航次">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="ETD" prop="etd">
                                <el-input style="width: 100%;" v-model="form.etd" size="small" autocomplete="off"
                                    :disabled="true" clearable placeholder="ETD">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="ETA" prop="eta">
                                <el-input style="width: 100%;" v-model="form.eta" size="small" autocomplete="off"
                                    :disabled="true" clearable placeholder="ETA">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="业务编号" prop="billNo">
                                <el-input style="width: 100%;" v-model="form.billNo" size="small" autocomplete="off"
                                    :disabled="true" clearable placeholder="业务编号">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="件数" prop="quantity">
                                <el-input style="width: 100%;" v-model="form.quantity" size="small" autocomplete="off"
                                    :disabled="true" clearable placeholder="件数">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="毛重" prop="grossWeight">
                                <el-input style="width: 100%;" v-model="form.grossWeight" size="small"
                                    autocomplete="off" :disabled="true" clearable placeholder="毛重">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="尺码" prop="measurement">
                                <el-input style="width: 100%;" v-model="form.measurement" size="small"
                                    autocomplete="off" :disabled="true" clearable placeholder="尺码">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="箱型箱量" prop="quantityCntrDescr">
                                <el-input style="width: 100%;" v-model="form.quantityCntrDescr" size="small"
                                    autocomplete="off" :disabled="true" clearable placeholder="箱型箱量">
                                </el-input>
                            </el-form-item>
                        </el-col>
                             <el-col :span="6">
                            <el-form-item label="业务部门" prop="createDeptName">
                                <el-input style="width: 100%;" v-model="form.createDeptName" size="small"
                                    autocomplete="off" :disabled="true" clearable placeholder="业务部门">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10">
                            <el-form-item label="原业务备注" prop="origRemarks">
                                <el-input style="width: 100%;" v-model="form.origRemarks" type="textarea" size="small"
                                    autocomplete="off" :disabled="true" clearable placeholder="原业务备注">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="备注" prop="remarks">
                                <el-input style="width: 100%;" v-model="form.remarks" type="textarea" size="small"
                                    autocomplete="off" clearable placeholder="请输入备注">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :offset="18" :span="6">
                            <el-form-item label-width="50px">
                                <el-button size="small" type="warning" style="margin-right: 8px" :disabled="form.id"
                                    :loading="saveLoading" @click="emptyConditionfun">一键清空
                                </el-button>
                                <el-button size="small" type="primary" style="margin-right: 8px" :disabled="form.id"
                                    :loading="saveLoading" @click="retrievalfun">提取原业务信息
                                </el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <el-card style="margin-top: 10px"
                v-if="roleName.indexOf('admin') != -1 || roleName.indexOf('应收修改') != -1 || roleName.indexOf('应收查看') != -1 || roleName.indexOf('应付修改') != -1 || roleName.indexOf('应付查看') != -1">
                <amends-costdetails :disabled="buttonDisable" :tableData="form.feeCenterList" :form="form"
                    :dcDisabled="dcDisabled" @addfun="addTablefun" @oneclickEditingfun="oneclickEditingfun"
                    @printingCostsfun="printingCostsfun" @amendsDetailfun="amendsDetailfun(form.id)">
                </amends-costdetails>
            </el-card>

            <!-- <el-card style="margin-top: 10px">
                <div v-if="roleName.indexOf('admin') != -1 || roleName.indexOf('应收修改') != -1 ? true : roleName.indexOf('应收查看') != -1"
                    style="margin-bottom: 5px;">
                    <div>
                        <div style="display: inline-block;margin-right: 20px" class="disabledBox fontSize">
                            <i class="el-icon-coin"></i>
                            <span>应收费用</span>
                        </div>
                        <el-button v-if="roleName.indexOf('admin') != -1 || roleName.indexOf('应收修改') != -1" type="primary"
                            plain size="small" :disabled="buttonDisable" @click="upwardAddfun('D')">生成amend费用
                        </el-button>
                    </div>
                    <billgenerated :tableData="this.form.feeCenterListD" :handleSelectionData="multipleChoiceDArr"
                        @handleSelectionChange="handleSelectionChange($event, 'D')"></billgenerated>
                </div>
                <div v-if="roleName.indexOf('admin') != -1 || roleName.indexOf('应付修改') != -1 ? true : roleName.indexOf('应付查看') != -1"
                    style="margin-bottom: 5px;">
                    <div>
                        <div style="display: inline-block;margin-right: 20px" class="disabledBox meetSize">
                            <i class="el-icon-coin"></i>
                            <span>应付费用</span>
                        </div>
                        <el-button v-if="roleName.indexOf('admin') != -1 || roleName.indexOf('应付修改') != -1" type="primary"
                            plain size="small" :disabled="buttonDisable" @click="upwardAddfun('C')">生成amend费用
                        </el-button>
                    </div>
                    <billgenerated :tableData="this.form.feeCenterListC" :handleSelectionData="multipleChoiceCArr"
                        @handleSelectionChange="handleSelectionChange($event, 'C')"></billgenerated>
                </div>
            </el-card> -->
        </div>

        <!--模板弹窗-->
        <el-dialog title="选择数据" class="el-dialogDeep" :visible.sync="retrievePopupsType" append-to-body width="70%"
            :close-on-click-modal="false">
            <div>
                <avue-crud :option="retrievePopupsOption" :data="retrievePopupsData" ref="retrievePopupsRef"
                    id="out-table" :header-cell-class-name="headerClassName">
                    <template slot="menu" slot-scope="{ row }">
                        <el-button type="text" icon="" size="small" @click.stop="retrievePopupsSelect(row)">选择
                        </el-button>
                    </template>
                </avue-crud>
            </div>
        </el-dialog>

        <!--设计报表弹窗-->
        <el-dialog append-to-body title="设计报表" class="el-dialogDeep" :visible.sync="DesignreportDialog" width="70%"
            :close-on-click-modal="false" :destroy-on-close="true" :close-on-press-escape="false" v-dialog-drag>
            <reports :id="form.id" :assemblyForm="form" groupCode="TRUCKA" businessValue="AMEND" classifyCode="TRUCKA">
            </reports>
        </el-dialog>

        <!--往来单位弹窗-->
        <el-dialog title="打印" :visible.sync="printingDialog" append-to-body width="70%" :close-on-click-modal="false"
            :before-close="handleClose">
            <div>
                <el-row :gutter="10">
                    <el-col :span="4">
                        <avue-tree ref="treeRef" :option="reportOption" :data="reportTypeData"
                            @node-click="reportNodeClick"></avue-tree>
                    </el-col>
                    <el-col :span="20">
                        <avue-crud :option="optionPrinting" :table-loading="printingLoading" :data="PrintingData"
                            id="out-table" :header-cell-class-name="headerClassName" :row-style="{ height: '20px' }"
                            :cell-style="{ padding: '0px' }">
                            <template slot-scope="scope" slot="menu">
                                <el-button type="text" size="small"
                                    @click="dialogPreviewfun(scope.row)">打印预览</el-button>
                            </template>
                        </avue-crud>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="printingDialog = false;">取 消</el-button>
            </span>
        </el-dialog>

        <!--预览-->
        <el-dialog title="打印" :visible.sync="selectPrintingDialog" append-to-body width="70%"
            :close-on-click-modal="false" :destroy-on-close="true" :close-on-press-escape="false" v-dialog-drag>
            <div>
                <reportformsList ref="reportformsList" @reportRadio="reportRadio"></reportformsList>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="selectPrintingDialog = false;">取 消</el-button>
            </span>
        </el-dialog>


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

<script>
import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
import amendsCostdetails from "@/views/iosBasicData/seamends/assembly/amendsCostdetails.vue";
import billgenerated from "@/views/iosBasicData/seamends/assembly/billgenerated.vue";
import { getGeneralbill } from "@/api/iosBasicData/bills";
import { dateFormat } from "@/util/date";
import { amendsSubmit, amendsDetail, amendsCheckAmends, amendsRevokeCheckAmends } from "@/api/iosBasicData/amends";
import { getWorkDicts } from "@/api/system/dictbiz";
import reports from "@/views/iosBasicData/SeafreightExportF/bills/assembly/reports.vue";
import { getList as reportsList } from "@/api/iosBasicData/reports";
import {
    getFeeCenterCorpIds
} from "@/api/iosBasicData/feecenter";
import TreeSelect from "@/components/iosbasic-data/TreeSelect.vue";
import { reportsGetReportData } from "@/api/iosBasicData/reports";
import reportContainer from "@/views/iosBasicData/report-container/report-container.vue";
import reportformsList from "@/views/iosBasicData/SeafreightExportF/bills/assembly/reportformsList.vue";
import { getList as getreportsList } from "@/api/iosBasicData/reports";
import { contrastObj, contrastList } from "@/util/contrastData";
export default {
    components: { reportformsList, reportContainer, TreeSelect, reports, SearchQuery, amendsCostdetails, billgenerated },
    data() {
        return {
            retrievePopupsType: false, // 检索完的弹窗
            retrievePopupsData: [], // 检索完的弹窗数据
            retrievePopupsOption: {
                border: true,
                calcHeight: 30,
                tip: false,
                height: 'auto',
                index: true,
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                editBtn: false,
                refreshBtn: false,
                columnBtn: false,
                menuWidth: '60',
                column: [
                    {
                        label: "单据类型",
                        prop: "billType",
                        type: 'select',
                        dicData: [{
                            label: '直单',
                            value: 'DD'
                        }, {
                            label: '主单',
                            value: 'MM'
                        }, {
                            label: '分单',
                            value: 'MH'
                        }],
                        overHidden: true,
                    },
                    {
                        label: "单据编号",
                        prop: "billNo",
                        width: "120",
                        overHidden: true,
                    },
                    {
                        label: "客户名",
                        prop: "corpCnName",
                        width: "140",
                        overHidden: true,
                    },
                    {
                        label: "MB/L NO",
                        prop: "mblno",
                        width: "80",
                        overHidden: true,
                    },
                    {
                        label: "HB/L NO",
                        prop: "hblno",
                        width: "80",
                        overHidden: true,
                    },
                    // {
                    //     label: "BOOKING NO",
                    //     prop: "bookingNo",
                    //     width: "120",
                    //     overHidden: true,
                    // },
                    {
                        label: "船名",
                        prop: "vesselCnName",
                        overHidden: true,
                    },
                    {
                        label: "航次",
                        prop: "voyageNo",
                        width: "80",
                        overHidden: true,
                    },
                    {
                        label: "开船日期",
                        prop: "etd",
                        type: "date",
                        unlinkPanels: true,
                        searchRange: true,
                        overHidden: true,
                        forma: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                        searchDefaultTime: ["00:00:00", "23:59:59"],
                    },
                ]
            },

            rules: {
                createTime: [{
                    required: true,
                    message: ' ',
                    trigger: 'change'
                }],
                responsibleParty: [{
                    required: true,
                    message: ' ',
                    trigger: 'change'
                }],

            },
            pageLoading: false, // 全屏加载动画
            saveLoading: false, // 按钮加载动画
            // 选择的数据
            form: {
                createTime: dateFormat(new Date(), "yyyy-MM-dd") + ' 00:00:00', // 制单日期 默认 当天,
                feeCenterListD: [],
                feeCenterListC: [],
                feeCenterList: []
            },
            oldForm: {
                createTime: dateFormat(new Date(), "yyyy-MM-dd") + ' 00:00:00', // 制单日期 默认 当天,
                feeCenterListD: [],
                feeCenterListC: [],
                feeCenterList: []
            },
            // 业务类型 数据
            origSeaTypeData: [
                {
                    label: '出口',
                    value: 'E'
                },
                {
                    label: '进口',
                    value: 'I'
                }
            ],
            responsiblePartyData: [], // AMEND 原因
            multipleChoiceDArr: [], // 应收多选
            multipleChoiceCArr: [], // 应付多选
            roleName: [], // 当前的角色权限
            buttonDisable: false, // 按钮的是否禁用
            editPower: false, // 是否有权限编辑
            DesignreportDialog: false, // 设计报表弹窗
            printingDialog: false, // 打印弹窗
            reportOption: {
                nodeKey: "id",
                addBtn: false,
                menu: false,
                size: "small",
                props: {
                    labelText: "标题",
                    label: "cnName",
                    value: "value",
                    children: "children"
                }
            },
            reportTypeData: [], // 打印获取的数据
            reportformsObj: [], // 打印选择的数据
            PrintingData: [], // 打印的列表数据
            printingLoading: false, // 打印弹窗加载动画
            optionPrinting: {
                stripe: true,
                maxHeight: '250',
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                selection: true,
                dialogClickModal: false,
                refreshBtn: false,
                columnBtn: false,
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                editBtn: false,
                menuWidth: '100',
                column: [
                    {
                        label: "币别",
                        prop: "curCode",
                        width: 100,
                        cell: true,
                        type: 'select',
                        dicData: [{
                            label: '全部',
                            value: null
                        }, {
                            label: 'USD',
                            value: 'USD'
                        }, {
                            label: 'CNY',
                            value: 'CNY'
                        }],
                        overHidden: true,
                    },
                    {
                        label: "客户名称",
                        prop: "cnName",
                        overHidden: true,
                    },
                    {
                        label: "客户编号",
                        prop: "code",
                        overHidden: true,
                    },
                ]
            },
            selectPrintingDialog: false, // 预览弹窗
            dcDisabled: false, // dc列是否禁用
            saberUserInfo: {}, // 当前登录人信息
        }
    },
    watch: {
        "form.status": {
            // 执行方法
            handler(oldValue, newValue) {
                // 0 = 新建  1=审核提交  2=审核中  3= 审核通过  4=审核驳回
                if (oldValue == 1 || oldValue == 2 || oldValue == 3) {
                    this.buttonDisable = true
                } else {
                    if (this.roleName.indexOf('admin') == -1 ? this.roleName.indexOf('允许修改他人业务') == -1 ? this.saberUserInfo.user_id != this.form.createUser : false : false) {
                        this.buttonDisable = true
                        this.editPower = true
                    } else {
                        this.buttonDisable = false
                    }
                }
            },
            deep: false, // 深度监听
            immediate: false  // 第一次改变就执行
        },
    },
    created() {
        this.roleName = localStorage.getItem('roleName').split(',')
        // 获取当前登录人个人信息
        this.saberUserInfo = JSON.parse(localStorage.getItem('saber-userInfo')).content
    },
    methods: {
        // 报表预览
        previewreportfun() {
            getreportsList(1, 10, {
                businessType: 'AMEND',
                classifyCode: 'TRUCKA',
                groupCode: 'TRUCKA'
            }).then(res => {
                if (res.data.data.records.length == 1) {
                    this.reportRadio(res.data.data.records[0])
                } else {
                    this.saveLoading = true
                    this.selectPrintingDialog = true
                    this.saveLoading = false
                    let page = {
                        pageSize: 10,
                        currentPage: 1,
                        total: 0
                    }
                    this.$nextTick(() => {
                        this.$refs.reportformsList.onLoad(page, {
                            businessType: 'AMEND',
                            classifyCode: 'TRUCKA',
                            groupCode: 'TRUCKA'
                        })
                    })
                }
            })
        },
        // 打印表格选择
        reportNodeClick(data) {
            this.reportformsObj = data
            this.printingLoading = true
            this.getFeeCenterCorpIdsfun()
        },
        // 预览里的打印
        reportRadio(val) {
            // 获取报表数据
            reportsGetReportData({
                billId: this.form.id,
                reportCode: val.classifyCode,
                groupCode: val.groupCode,
                type: 'AMEND'
            }).then(res => {
                this.handleReportPreview(val.url, res.data.data.data)
            })
        },
        // 费用弹窗里的打印
        dialogPreviewfun(row) {
            if (!this.reportformsObj.id) {
                this.$message.warning('请选择打印类型')
                return;
            }
            // 获取报表数据
            reportsGetReportData({
                billId: this.form.id,
                reportCode: this.reportformsObj.classifyCode,
                groupCode: this.reportformsObj.groupCode,
                corpIds: row.id,
                curCode: row.curCode,
                type: 'AMEND'
            }).then(res => {
                this.handleReportPreview(this.reportformsObj.url, res.data.data.data)
            })
        },
        // 打印费用
        printingCostsfun() {
            // 没有多选弹窗
            this.printingLoading = true
            this.reportsListfun({
                classifyCode: '费用',
                businessType: 'HYCK',
            })
            this.printingDialog = true
        },
        // 获取打印表格数据
        reportsListfun(obj) {
            reportsList(1, 50, obj).then(res => {
                this.reportTypeData = res.data.data.records
                // 获取第一项的值
                this.reportformsObj = res.data.data.records[0]
                if (res.data.data.length != 0) {
                    this.getFeeCenterCorpIdsfun()
                }
            })
        },
        // 获取弹窗列表数据
        getFeeCenterCorpIdsfun() {
            getFeeCenterCorpIds({
                billId: this.form.id,
                dc: this.reportformsObj.cnName == '应收' ? 'D' : 'C',
                type: 'AMEND'
            }).then(res => {
                this.printingLoading = false
                res.data.data.forEach(e => {
                    e.$cellEdit = true
                    e.curCode = null
                })
                this.PrintingData = res.data.data
            })
        },
        // 下拉回调
        corpChange(value, name) {
            this.$set(this.form, name, value)
        },
        // 获取AMEND原因字典数据
        amendReasonfun() {
            getWorkDicts('amend_reason').then(res => {
                this.responsiblePartyData = res.data.data
            })
        },
        // 添加一条
        addTablefun() {
            let obj = {
                paymode: 'PP',
                editType: true,
            }
            this.dcDisabled = false
            // 有应收没有应付的时候
            if (this.roleName.indexOf('应收修改') != -1 && this.roleName.indexOf('应付修改') == -1) {
                obj.dc = 'D'
                this.dcDisabled = true
            }
            // 有应付没有应收的时候
            if (this.roleName.indexOf('应付修改') != -1 && this.roleName.indexOf('应收修改') == -1) {
                obj.dc = 'C'
                this.dcDisabled = true
            }
            this.form.feeCenterList.push(obj)
        },
        // 一键编辑
        oneclickEditingfun() {
            for (let item of this.form.feeCenterList) {
                this.$delete(item, 'editType')
                this.$set(item, 'editType', true)
            }
        },
        // 详情数据
        amendsDetailfun(id) {
            this.pageLoading = true
            amendsDetail(id).then(res => {
                this.pageLoading = false
                this.form = res.data.data
                this.oldForm = this.deepClone(res.data.data);
                // 把编辑状态变成不可编辑状态
                for (let item of this.form.feeCenterList) {
                    this.$delete(item, 'editType')
                    this.$set(item, 'editType', false)
                }
                let arr = ['feeCenterList', 'feeCenterListC', 'feeCenterListD']
                for (let data of arr) {
                    for (let item of this.form[data]) {
                        if (item.curCode == 'CNY') {
                            this.$set(item, 'rmbAmount', Number(item.amount).toFixed(2))
                            this.$set(item, 'usdAmount', '')
                            this.$set(item, 'rmbAmountNet', Number(item.amountNet).toFixed(2))
                            this.$set(item, 'usdAmountNet', '')
                        } else {
                            this.$set(item, 'usdAmount', Number(item.amount).toFixed(2))
                            this.$set(item, 'rmbAmount', '')
                            this.$set(item, 'usdAmountNet', Number(item.amountNet).toFixed(2))
                            this.$set(item, 'rmbAmountNet', '')
                        }
                    }
                }
            })
        },
        // 向上添加数据
        upwardAddfun(dc) {
            let arr = []
            if (dc == 'D') {
                arr = JSON.parse(JSON.stringify(this.multipleChoiceDArr)).map(item => {
                    this.$delete(item, 'editType')
                    this.$set(item, 'editType', true)
                    return item
                })
            } else {
                arr = JSON.parse(JSON.stringify(this.multipleChoiceCArr)).map(item => {
                    this.$delete(item, 'editType')
                    this.$set(item, 'editType', true)
                    return item
                })
            }
            for (let item of arr) {
                item.amendSrcItemId = item.id
                item.accStatus = 0
                delete item.id
                delete item.pid
                delete item.accAmount
                delete item.accBillId
                delete item.accBillNo
                delete item.accById
                delete item.accByName
                delete item.accDateaccStatus
                delete item.accountDate
                delete item.accountDay
                delete item.accountMonth
                delete item.accountYear
                delete item.appliedAmount
                delete item.appliedAmountStl
                delete item.appliedInvoiceAmount
                delete item.appliedInvoiceAmountStl
                delete item.applyId
                delete item.applyName
                delete item.applyTime
                delete item.approveTime
                delete item.approveTimeList
                delete item.approverId
                delete item.approverName
                delete item.auditStatus
                delete item.checkAmount
                delete item.checkBillId
                delete item.checkBillNo
                delete item.checkById
                delete item.checkByName
                delete item.checkDate
                delete item.checkStatus
                delete item.createDept
                delete item.createDeptName
                delete item.createTime
                delete item.createUser
                delete item.createUserName
                delete item.invoiceAmount
                delete item.invoiceAmountLoc
                delete item.invoiceBillId
                delete item.invoiceBillNo
                delete item.invoiceById
                delete item.invoiceByName
                delete item.invoiceCurCode
                delete item.invoiceDate
                delete item.invoiceExrate
                delete item.invoiceNo
                delete item.invoiceStatus
                delete item.stlAmount
                delete item.stlAmountLoc
                delete item.stlBillId
                delete item.stlBillNo
                delete item.stlById
                delete item.stlByName
                delete item.stlCurCode
                delete item.stlDate
                delete item.stlExrate
                delete item.stlExrateLoc
                delete item.stlOrgAmount
                delete item.stlStatus
                delete item.stlTtlAmount
                delete item.uninvoicedAmount
                delete item.unsettledAmount
                delete item.updateTime
                delete item.updateUser
                delete item.updateUserName
                delete item.voucherBillId
                delete item.voucherBillNo
                delete item.voucherById
                delete item.voucherByName
                delete item.voucherDate
                delete item.voucherNo
                delete item.voucherStatus
                this.form.feeCenterList.unshift(JSON.parse(JSON.stringify(item)))
            }
        },
        // 选择弹窗的数据
        retrievePopupsSelect(row) {
            this.retrievePopupsType = false
            this.form = row
            this.form.feeCenterList = []
            this.form.origId = row.id
            this.form.origBillNo = row.billNo
            this.form.origBillDate = row.billDate ? row.billDate.slice(0, 10) + ' 00:00:00' : null
            this.form.origAccountDate = row.accountDate ? row.accountDate.slice(0, 10) + ' 00:00:00' : null
            this.form.origSeaType = row.seaType
            this.form.origBillType = row.billType
            this.form.origRemarks = row.remarks
            this.form.bookingDate = row.bookingDate ? row.bookingDate.slice(0, 10) + ' 00:00:00' : null
            this.form.etd = row.etd ? row.etd.slice(0, 10) + ' 00:00:00' : null
            this.form.eta = row.eta ? row.eta.slice(0, 10) + ' 00:00:00' : null
            this.form.businessType = 'TRUCKA'
            this.form.createTime = dateFormat(new Date(), "yyyy-MM-dd") + ' 00:00:00' // 制单日期 默认 当天,
            this.form.createDept = row.accDept
            this.form.createDeptName = row.accDeptName
            delete this.form.id
            delete this.form.status
            delete this.form.id
            // delete this.form.createUser
            // delete this.form.createUserName
            // delete this.form.createDept
            // delete this.form.createDeptName
            // delete this.form.createTime
            delete this.form.updateUser
            delete this.form.updateUserName
            delete this.form.updateTime
            delete this.form.billNo
            delete this.form.billDate
            delete this.form.remarks
            delete this.form.accountDate

            // this.form.feeCenterListC = row.feeCenterListC.map(item => {
            //     item.accStatus = 0
            //     // delete item.id
            //     delete item.pid
            //     delete item.accAmount
            //     delete item.accBillId
            //     delete item.accBillNo
            //     delete item.accById
            //     delete item.accByName
            //     delete item.accDateaccStatus
            //     delete item.accountDate
            //     delete item.accountDay
            //     delete item.accountMonth
            //     delete item.accountYear
            //     delete item.appliedAmount
            //     delete item.appliedAmountStl
            //     delete item.appliedInvoiceAmount
            //     delete item.appliedInvoiceAmountStl
            //     delete item.applyId
            //     delete item.applyName
            //     delete item.applyTime
            //     delete item.approveTime
            //     delete item.approveTimeList
            //     delete item.approverId
            //     delete item.approverName
            //     delete item.auditStatus
            //     delete item.checkAmount
            //     delete item.checkBillId
            //     delete item.checkBillNo
            //     delete item.checkById
            //     delete item.checkByName
            //     delete item.checkDate
            //     delete item.checkStatus
            //     delete item.createDept
            //     delete item.createDeptName
            //     delete item.createTime
            //     delete item.createUser
            //     delete item.createUserName
            //     delete item.invoiceAmount
            //     delete item.invoiceAmountLoc
            //     delete item.invoiceBillId
            //     delete item.invoiceBillNo
            //     delete item.invoiceById
            //     delete item.invoiceByName
            //     delete item.invoiceCurCode
            //     delete item.invoiceDate
            //     delete item.invoiceExrate
            //     delete item.invoiceNo
            //     delete item.invoiceStatus
            //     delete item.stlAmount
            //     delete item.stlAmountLoc
            //     delete item.stlBillId
            //     delete item.stlBillNo
            //     delete item.stlById
            //     delete item.stlByName
            //     delete item.stlCurCode
            //     delete item.stlDate
            //     delete item.stlExrate
            //     delete item.stlExrateLoc
            //     delete item.stlOrgAmount
            //     delete item.stlStatus
            //     delete item.stlTtlAmount
            //     delete item.uninvoicedAmount
            //     delete item.unsettledAmount
            //     delete item.updateTime
            //     delete item.updateUser
            //     delete item.updateUserName
            //     delete item.voucherBillId
            //     delete item.voucherBillNo
            //     delete item.voucherById
            //     delete item.voucherByName
            //     delete item.voucherDate
            //     delete item.voucherNo
            //     delete item.voucherStatus
            //     return item
            // })
            // this.form.feeCenterListD = row.feeCenterListD.map(item => {
            //     item.accStatus = 0
            //     // delete item.id
            //     delete item.pid
            //     delete item.accAmount
            //     delete item.accBillId
            //     delete item.accBillNo
            //     delete item.accById
            //     delete item.accByName
            //     delete item.accDateaccStatus
            //     delete item.accountDate
            //     delete item.accountDay
            //     delete item.accountMonth
            //     delete item.accountYear
            //     delete item.appliedAmount
            //     delete item.appliedAmountStl
            //     delete item.appliedInvoiceAmount
            //     delete item.appliedInvoiceAmountStl
            //     delete item.applyId
            //     delete item.applyName
            //     delete item.applyTime
            //     delete item.approveTime
            //     delete item.approveTimeList
            //     delete item.approverId
            //     delete item.approverName
            //     delete item.auditStatus
            //     delete item.checkAmount
            //     delete item.checkBillId
            //     delete item.checkBillNo
            //     delete item.checkById
            //     delete item.checkByName
            //     delete item.checkDate
            //     delete item.checkStatus
            //     delete item.createDept
            //     delete item.createDeptName
            //     delete item.createTime
            //     delete item.createUser
            //     delete item.createUserName
            //     delete item.invoiceAmount
            //     delete item.invoiceAmountLoc
            //     delete item.invoiceBillId
            //     delete item.invoiceBillNo
            //     delete item.invoiceById
            //     delete item.invoiceByName
            //     delete item.invoiceCurCode
            //     delete item.invoiceDate
            //     delete item.invoiceExrate
            //     delete item.invoiceNo
            //     delete item.invoiceStatus
            //     delete item.stlAmount
            //     delete item.stlAmountLoc
            //     delete item.stlBillId
            //     delete item.stlBillNo
            //     delete item.stlById
            //     delete item.stlByName
            //     delete item.stlCurCode
            //     delete item.stlDate
            //     delete item.stlExrate
            //     delete item.stlExrateLoc
            //     delete item.stlOrgAmount
            //     delete item.stlStatus
            //     delete item.stlTtlAmount
            //     delete item.uninvoicedAmount
            //     delete item.unsettledAmount
            //     delete item.updateTime
            //     delete item.updateUser
            //     delete item.updateUserName
            //     delete item.voucherBillId
            //     delete item.voucherBillNo
            //     delete item.voucherById
            //     delete item.voucherByName
            //     delete item.voucherDate
            //     delete item.voucherNo
            //     delete item.voucherStatus
            //     return item
            // })
            // 应收
            for (let item of this.form.feeCenterListD) {
                if (item.curCode == 'CNY') {
                    this.$set(item, 'rmbAmount', Number(item.amount).toFixed(2))
                    this.$set(item, 'usdAmount', '')
                    this.$set(item, 'rmbAmountNet', Number(item.amountNet).toFixed(2))
                    this.$set(item, 'usdAmountNet', '')
                } else {
                    this.$set(item, 'usdAmount', Number(item.amount).toFixed(2))
                    this.$set(item, 'rmbAmount', '')
                    this.$set(item, 'usdAmountNet', Number(item.amountNet).toFixed(2))
                    this.$set(item, 'rmbAmountNet', '')
                }
            }
            // 应付
            for (let item of this.form.feeCenterListC) {
                if (item.curCode == 'CNY') {
                    this.$set(item, 'rmbAmount', Number(item.amount).toFixed(2))
                    this.$set(item, 'usdAmount', '')
                    this.$set(item, 'rmbAmountNet', Number(item.amountNet).toFixed(2))
                    this.$set(item, 'usdAmountNet', '')
                } else {
                    this.$set(item, 'usdAmount', Number(item.amount).toFixed(2))
                    this.$set(item, 'rmbAmount', '')
                    this.$set(item, 'usdAmountNet', Number(item.amountNet).toFixed(2))
                    this.$set(item, 'rmbAmountNet', '')
                }
            }
        },
        // 保存
        amendsSubmitfun(status) {
            // 判断是否填写 AMEND原因
            if (!this.form.responsibleParty) {
                return this.$message.warning('请填写AMEND原因')
            }
            // 判断必填项
            let sum = '请输入'
            for (let item of this.form.feeCenterList) {
                let i = 1
                if (!item.dc) {
                    sum += ` 应收序号${i}收/付`
                }
                if (!item.corpId) {
                    sum += ` 应收序号${i}往来单位`
                }
                if (!item.feeId) {
                    sum += ` 应收序号${i}费用简称`
                }
                if (!item.elementsId) {
                    sum += ` 应收序号${i}核算要素`
                }
                if (!item.curCode) {
                    sum += ` 应收序号${i}币种`
                }
                i++
            }
            if (sum != '请输入') {
                this.$confirm(sum, {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                return;
            }
            this.form.feeCenterList = this.form.feeCenterList.map((row, index) => {
                row.dc = row.dc
                row.pid = this.form.id
                row.sort = Number(index) + 1
                row.businessType = this.form.businessType // 业务类型
                row.billType = this.form.origBillType // 单据类型
                row.billNo = this.form.origBillNo // 单据编号
                row.billDate = this.form.origBillDate // 单据日期
                row.billCorpId = this.form.corpId // 主表客户 id
                row.billCorpCnName = this.form.corpCnName // 主表客户中文名称
                row.billCorpEnName = this.form.corpEnName // 主表客户英文名称
                row.lineId = this.form.lineId // 航线 id
                row.lineCnName = this.form.lineCnName // 航线中文名称
                row.lineEnName = this.form.lineEnName // 航线英文名称
                row.vesselId = this.form.vesselId // 船名 id
                row.vesselCnName = this.form.vesselCnName // 中文船名
                row.vesselEnName = this.form.vesselEnName // 英文船名
                row.voyageNo = this.form.voyageNo // 航次
                row.mblno = this.form.mblno // MB/L NO
                row.hblno = this.form.hblno // HB/L NO
                row.etd = this.form.etd // 开船日期
                row.eta = this.form.eta // 到港日期
                row.polId = this.form.polId // 装货港 id
                row.polCode = this.form.polCode // 装货港代码
                row.polCnName = this.form.polCnName // 装货港中文名称
                row.polEnName = this.form.polEnName // 装货港英文名称
                row.podId = this.form.podId // 卸货港 id
                row.podCode = this.form.podCode // 卸货港代码
                row.podCnName = this.form.podCnName // 卸货港中文名称
                row.podEnName = this.form.podEnName // 卸货港英文名称
                row.corpArgreementNo = this.form.corpArgreementNo // 客户约号
                return row
            })
            this.saveLoading = true
            this.form.billNoFormat = 'TRUCKA'
            this.form.businessTypeCode = 'TRUCKA'
            amendsSubmit(this.form).then(res => {

                // 把费用编辑状态变成不可编辑
                for (let item of this.form.feeCenterList) {
                    this.$delete(item, 'editType')
                    this.$set(item, 'editType', false)
                }
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                if (status == 'goBack') {
                    this.$emit('goBack')
                }
                this.amendsDetailfun(res.data.data.id)
            }).finally(() => {
                this.saveLoading = false
            })
        },
        // 提交请核
        submitforApproval() {
            if (this.form.feeCenterList == 0) {
                return this.$message.warning('请添加费用详情信息')
            }
            this.$confirm("您确定提交请核申请吗?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.form.businessType = 'TRUCKA'
                amendsCheckAmends({
                    ...this.form,
                    url: '/iosBasicData/oceanShippingCar/dispatchCarAmend/index',
                    pageStatus: '',
                    pageLabel: '海运派车AMEND'
                }).then(res => {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    this.amendsDetailfun(this.form.id)
                })
            })
        },
        // 撤销请核
        revokepleaseReview() {
            this.$confirm("您确定撤销请核申请吗?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.form.businessType = 'TRUCKA'
                amendsRevokeCheckAmends(this.form).then(res => {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    });
                    this.amendsDetailfun(this.form.id)
                })
            })
        },
        // 清空搜索条件
        emptyConditionfun() {
            this.$confirm("您确定要清空搜索条件吗?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(res => {
                this.form = {
                    createTime: dateFormat(new Date(), "yyyy-MM-dd") + ' 00:00:00', // 制单日期 默认 当天,
                    feeCenterListD: [],
                    feeCenterListC: [],
                    feeCenterList: []
                }
            })
        },
        // 检索
        retrievalfun() {
            // 判断是否有客户名称
            if (this.form.corpCnName) {
                return this.$message.warning('请先一键清空数据之后再进行提取信息')
            }
            if (!this.form.mblno && !this.form.hblno && !this.form.refno && !this.form.bookingNo) {
                return this.$message.warning('请填写至少一项检索条件')
            }
            getGeneralbill({
                mblno: this.form.mblno ? this.form.mblno : null,
                hblno: this.form.hblno ? this.form.hblno : null,
                refno: this.form.refno ? this.form.refno : null,
                bookingNo: this.form.bookingNo ? this.form.bookingNo : null,
                billType: 'TRUCK'
            }).then(res => {
                this.retrievePopupsData = res.data.data
                if (res.data.data.length == 1) {
                    this.retrievePopupsSelect(this.retrievePopupsData[0])
                } else {
                    this.retrievePopupsType = true
                }
            })
        },
        // 多选回调
        handleSelectionChange(arr, dc) {
            if (dc == 'D') {
                this.multipleChoiceDArr = arr
            } else if (dc == 'C') {
                this.multipleChoiceCArr = arr
            }
        },
        //返回列表
        backToList() {
            if (contrastObj(this.form, this.oldForm)
                || contrastList(this.form.feeCenterListC, this.oldForm.feeCenterListC)
                || contrastList(this.form.feeCenterListD, this.oldForm.feeCenterListD)
                || contrastList(this.form.feeCenterList, this.oldForm.feeCenterList)
            ) {
                this.$confirm("数据发生变化未有提交记录, 是否提交?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        this.amendsSubmitfun('goBack')
                    })
                    .catch(() => {
                        this.$emit('goBack')
                    });
            } else {
                this.$emit('goBack')
            }
        },
        // 预览报表
        handleReportPreview(url, data) {
            console.log(url, 1670)
            console.log(data, 1671)
            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) {
                var consignerIndex2 = data.hshipperDetails.indexOf('\n')
                for (let i = 0; i < 4; i++) {
                    consignerIndex2 = data.hshipperDetails.indexOf('\n', consignerIndex2 + 1);
                }
                if (consignerIndex2 != -1) {
                    var hshipperDetails = data.hshipperDetails.substring(consignerIndex2 + 2, data.hshipperDetails.length)
                    data.hshipperDetails = data.hshipperDetails.substring(0, consignerIndex2) + ' *'
                    data.commodityDescr += '\n*' + hshipperDetails
                }
            }

            if (data.hconsigneeDetails) {
                var consigneeIndex2 = data.hconsigneeDetails.indexOf('\n')
                for (let i = 0; i < 3; i++) {
                    consigneeIndex2 = data.hconsigneeDetails.indexOf('\n', consigneeIndex2 + 1);
                }
                if (consigneeIndex2 != -1) {
                    var hconsigneeDetails = data.hconsigneeDetails.substring(consigneeIndex2 + 2, data.hconsigneeDetails.length)
                    data.hconsigneeDetails = data.hconsigneeDetails.substring(0, consigneeIndex2) + ' **'
                    data.commodityDescr += '\n**' + hconsigneeDetails
                }
            }

            if (data.hnotifyDetails) {
                var notifierIndex2 = data.hnotifyDetails.indexOf('\n')
                for (let i = 0; i < 3; i++) {
                    notifierIndex2 = data.hnotifyDetails.indexOf('\n', notifierIndex2 + 1);
                }
                if (notifierIndex2 != -1) {
                    var hnotifyDetails = data.hnotifyDetails.substring(notifierIndex2 + 2, data.hnotifyDetails.length)
                    data.hnotifyDetails = data.hnotifyDetails.substring(0, notifierIndex2) + ' ***'
                    data.commodityDescr += '\n***' + hnotifyDetails
                }
            }

            // 处理箱号
            if (this.isPrintTheBoxNumber) {
                data.commodityDescr += '\n.\n.\n'
            }

            // PLACE & DATE OF ISSUE
            data.placeAndDateOfIssue = ''
            if (data.issueAt) {
                data.placeAndDateOfIssue += data.issueAt
            }
            if (data.issueDate) {
                let date = new Date(data.issueDate.replace(/-/g, '/'));
                let yyyy = date.getFullYear();
                let mmmm = date.toDateString().split(" ")[1]
                let dd = date.getDate()
                data.placeAndDateOfIssue += ', ' + dd + '-' + mmmm + '-' + yyyy
            }

            // Total number of containers or packages received by the Carriers
            if (data.preContainersList) {
                let boxMap = new Map();
                for (let boxQuantity of data.preContainersList) {
                    if (boxMap.get(boxQuantity.cntrTypeCode)) {
                        let v = boxMap.get(boxQuantity.cntrTypeCode)
                        boxMap.set(boxQuantity.cntrTypeCode, v + boxQuantity.quantity)
                    } else {
                        boxMap.set(boxQuantity.cntrTypeCode, boxQuantity.quantity)
                    }
                }
                let boxs = ''
                boxMap.forEach(function (value, key, map) {
                    boxs += value + 'x' + key + ', '
                })
                boxs = boxs.substring(0, boxs.length - 2)

                data.boxQuantity = boxs + ' CONTAINER(S) ONLY'
            }

            // Number of original B/Ls
            if (data.numberOfObl) {
                data.numberOfObl += ' (' + data.numberOfOblDigit + ')'
            }

            if (data.commodityDescr) {
                var descriptionIndex2 = data.commodityDescr.indexOf('\n')
                for (let i = 0; i < 19; i++) {
                    descriptionIndex2 = data.commodityDescr.indexOf('\n', descriptionIndex2 + 1);
                }
                if (descriptionIndex2 != -1) {
                    data.pageOne = 'Page : 1 of 2'
                    data.pageTwo = 'Page : 2 of 2'
                    var extraLongText = data.commodityDescr.substring(descriptionIndex2 + 2, data.commodityDescr.length)
                    data.commodityDescr = data.commodityDescr.substring(0, descriptionIndex2)
                    data.extraLongTips = '** TO BE CONTINUED ON ATTACHED LIST **'
                    data.extraLongText = extraLongText
                }
            }

            // console.log(data.hshipperDetails, 'hshipperDetails2')

            // 创建一个 Stimulsoft 数据集（DataSet）的实例的代码
            var dataSet = new Stimulsoft.System.Data.DataSet(
                'reportData'
            )

            dataSet.readJson(data) // 用于将 JSON 格式的数据加载到数据集中。data 是包含报表数据的 JSON 对象。
            // 这是一个方法调用，用于在报表中注册数据源。参数 'reportData' 是数据源的名称，
            // 第二个 'reportData' 是数据源的别名，dataSet 则是之前创建的数据集实例
            report.regData('reportData', 'reportData', dataSet)
            // 从模版和数据加载报表
            // loadReport(report, '', {})

            // 这是将报表对象指定给报表查看器的属性。viewer 是报表查看器的实例，而 report 是之前创建的报表对象。
            viewer.report = report;

            this.$refs.reportContainer.showContainer(
                () => {
                    setTimeout(() => {
                        viewer.renderHtml('reportContainer')
                        this.createViewerButtons(viewer)
                    }, 50)
                },
                () => {
                },
            )
            console.log("加载成功完成!");
        },
        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()
            // }

        },
        // 更改表格颜色
        headerClassName(tab) {
            //颜色间隔
            let back = "back-one"
            // 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 lang="scss">
::v-deep.el-form-item {
    margin-bottom: 0;
}

.el-dialogDeep {
    ::v-deep .el-dialog {

        .el-dialog__body,
        .el-dialog__footer {
            padding-top: 0 !important;
        }
    }
}

::v-deep#out-table .back-one {
    background: #ecf5ff !important;
    text-align: center;
}

.disabledBox {
    display: flex;
    align-items: center;
}

.fontSize {
    font-size: 16px;
    color: #81B337;
}

.meetSize {
    font-size: 16px;
    color: #54BCBD;
}

::v-deep .el-card__body {
    padding: 6px 20px;
}
</style>