yf-admin-ui/src/views/iosBasicData/financialManagement/computationCenter/detailsPage.vue

<template>
    <div class="borderless">
        <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>
                <el-button v-if="form.id && pageIds.length" type="text" @click="lastPage">上一票</el-button>
                <el-button v-if="form.id && pageIds.length" type="text" @click="nextPage">下一票</el-button>
            </div>
            <div class="add-customer-btn">

                <el-button size="small" :disabled="!form.id" @click="previewreportfun">预 览
                </el-button>
                <el-button size="small" v-if="roleName.indexOf('admin') != -1" :disabled="!form.id"
                    @click="DesignreportDialog = true">报表设计
                </el-button>
                <el-button type="success" size="small" :disabled="!form.id" plain @click="newbill">新建账单
                </el-button>
                <el-button size="small" type="danger" plain :disabled="!form.id || editPower"
                    v-if="form.status == '3'"
                    @click="allClick('撤销结算')">撤销结算
                </el-button>
                <el-button v-if="form.status == '0' || form.status == '4'" size="small" type="success" plain
                    @click="allClick('确认结算')">确认结算
                </el-button>
                <el-button size="small" type="primary" v-if="editButton" @click="inEdit">编 辑
                </el-button>
                <el-button size="small" type="primary" v-else @click="submit()">保 存
                </el-button>
            </div>
        </div>

        <div style="margin: 55px 5px 0px 5px;'">
            <el-tabs type="border-card">
                <el-tab-pane label="基础信息">
                    <el-row>
                        <el-col :span="8">
                            <trade-card title="基础信息">
                                <avue-form :option="optionForm" v-model="form" ref="form">
                                    <tempalte slot="branchName">
                                        <dic-select v-model="form.branchName" placeholder="所属公司" key="id"
                                            label="deptName" url="/blade-system/dept/top-list" :filterable="true"
                                            :remote="true" dataName="deptName"
                                            :disabled="editDisabled || !(roleName.includes('admin') || roleName.includes('总部')) || form.finStlBillsItemsList.length"
                                            @selectChange="dicChange('branchName', $event)"></dic-select>
                                    </tempalte>
                                    <tempalte slot="corpCnName">
                                        <dic-select v-model="form.corpCnName" placeholder="结算单位" key="id" res="records"
                                            label="cnName" url="/blade-los/bcorps/selectList?status=0&current=1&size=5"
                                            :filterable="true" :remote="true" dataName="cnName"
                                            :disabled="editDisabled || form.finStlBillsItemsList.length"
                                            @selectChange="dicChange('corpCnName', $event)">
                                        </dic-select>
                                    </tempalte>
                                    <tempalte slot="isExchangeToCny">
                                        <el-checkbox size="medium" true-label="1" false-label="0"
                                            :disabled="editDisabled || form.finStlBillsItemsList.length"
                                            v-model="form.isExchangeToCny">
                                        </el-checkbox>
                                    </tempalte>
                                    <tempalte slot="remarks">
                                        <el-input type="textarea" :rows="5" placeholder="请输入 备注" v-model="form.remarks">
                                        </el-input>
                                    </tempalte>
                                </avue-form>
                            </trade-card>
                        </el-col>
                        <el-col :span="16">
                            <trade-card title="费用信息">
                                <avue-crud :option="option" :data="pageData" id="out-table" ref="crud"
                                    @selection-change="handleSelectionChange" :header-cell-style="tableHeaderCellStyle"
                                    :row-class-name="rowClassName" :cell-style="cellStyle" :page.sync="page"
                                    @size-change="sizeChange" @current-change="currentChange"
                                    @resetColumn="resetColumn('crud', 'option', 'optionBack', 528)"
                                    @saveColumn="saveColumn('crud', 'option', 'optionBack', 528)">
                                    <template slot="menuLeft">
                                        <el-button v-if="!form.requestNo" size="small" type="danger"
                                            style="margin-left: 10px"
                                            :disabled="editDisabled || handleSelectionData.length == 0"
                                            @click="batchDeletefun">选定删除
                                        </el-button>
                                        <el-button v-if="!form.requestNo" size="small" type="danger"
                                            style="margin-left: 10px" :disabled="editDisabled" @click="allDelete">全部删除
                                        </el-button>
                                        <el-button size="small" type="danger" :disabled="!form.id"
                                            v-if="form.requestNo && form.status == 0" @click="allClick('撤销生成')">全部删除
                                        </el-button>
                                        <span style="font-size:18px;font-weight:600;margin-left:10px;">
                                            <span style="color: #67C23A;margin-right: 10px;">
                                                应收本币:{{ form.amountDr || 0 }}元
                                            </span>
                                            <span style="color: #E6A23C;margin-right: 10px;">
                                                应付本币:{{ form.amountCr || 0 }}元
                                            </span>
                                            <span style="color: #67C23A;margin-right: 10px;">
                                                应收外币:{{ form.amountDrUsd || 0 }}元
                                            </span>
                                            <span style="color: #E6A23C;margin-right: 10px;">
                                                应付外币:{{ form.amountCrUsd || 0 }}元
                                            </span>
                                        </span>
                                    </template>
                                </avue-crud>
                            </trade-card>
                        </el-col>
                    </el-row>
                    <el-row v-if="!form.requestNo">
                        <el-col :span="18">
                            <trade-card title="业务费用信息">
                                <avue-crud :option="option2" :data="pageData2" id="out-table" ref="crud2"
                                    @selection-change="selectionChange" :header-cell-style="tableHeaderCellStyle"
                                    :row-class-name="rowClassName" :cell-style="cellStyle" :search.sync="search"
                                    @search-change="searchChange" @search-reset="searchReset" :page.sync="page2"
                                    @size-change="sizeChange2" @current-change="currentChange2"
                                    @row-click="handleRowClick"
                                    @resetColumn="resetColumn('crud2', 'option2', 'optionBack2', 527)"
                                    @saveColumn="saveColumn('crud2', 'option2', 'optionBack2', 527)">
                                    <template slot="menuLeft">
                                        <el-button size="small" type="success" style="margin-right: 8px"
                                            :disabled="editDisabled || selectionList.length == 0"
                                            @click="allClick('单据加入')">单据加入
                                        </el-button>
                                        <span style="font-size:18px;font-weight:600;margin-left:10px;">
                                            <span style="color: #67C23A;margin-right: 10px;">
                                                应收本币:{{ sumDRMB.toFixed(2) }}元
                                            </span>
                                            <span style="color: #E6A23C;margin-right: 10px;">
                                                应付本币:{{ sumCRMB.toFixed(2) }}元
                                            </span>
                                            <span style="color: #67C23A;margin-right: 10px;">
                                                应收外币:{{ sumDUSD.toFixed(2) }}元
                                            </span>
                                            <span style="color: #E6A23C;margin-right: 10px;">
                                                应付外币:{{ sumCUSD.toFixed(2) }}元
                                            </span>
                                        </span>
                                    </template>
                                    <template slot-scope="{disabled,size}" slot="feeCnNameSearch">
                                        <dic-select v-model="search.feeCnName" placeholder="费用名称" label="cnName"
                                            url="/blade-los/bfees/listAll" dataType="string" :filterable="true"
                                            :multiple="true" :collapseTags="true"></dic-select>
                                    </template>
                                    <template slot-scope="{disabled,size}" slot="curCodeSearch">
                                        <dic-select v-model="search.curCode" placeholder="币别" label="code"
                                            :url="'/blade-los/bcurrency/obtainRate?deptId=' + form.branchId + '&date=' + form.billDate + '&type=2'"
                                            :filterable="true"></dic-select>
                                    </template>
                                    <tempalte slot="vesselEnNameSearch" slot-scope="{ row }">
                                        <dic-select v-model="search.vesselEnName" placeholder="船名" label="enName"
                                            res="records" url="/blade-los/bvessels/list?status=0&current=1&size=5"
                                            :filterable="true" :remote="true" dataName="enName" :slotRight="true"
                                            rightLabel="code"></dic-select>
                                    </tempalte>
                                </avue-crud>
                            </trade-card>
                        </el-col>
                        <el-col :span="6">
                            <trade-card title="费用明细">
                                <avue-crud :option="feeOption" :data="finAccBillsVOList" id="out-table" ref="crud3"
                                    @selection-change="itemSelectionChange" :header-cell-style="tableHeaderCellStyle"
                                    :row-class-name="rowClassName" :cell-style="cellStyle">
                                    <template slot="menuLeft">
                                        <el-button size="small" type="success" style="margin-right: 8px"
                                            :disabled="editDisabled || itemSelectionList.length == 0"
                                            @click="allClick('明细加入')">明细加入
                                        </el-button>
                                        <span style="font-size:18px;font-weight:600;margin-left:10px;">
                                            <span style="color: #67C23A;margin-right: 10px;">
                                                金额合计:{{ amountSum.toFixed(2) }}元
                                            </span>
                                        </span>
                                    </template>
                                    <tempalte slot="reconciliationCurrentAmount" slot-scope="{ row }">
                                        <el-input-number v-model="row.reconciliationCurrentAmount"
                                            @change="armbChange(row)" :controls="false" placeholder="请输入 金额" size="mini"
                                            style="width: 100%;"></el-input-number>
                                    </tempalte>
                                </avue-crud>
                            </trade-card>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="文件中心">
                    <containerTitle title="上传附件"></containerTitle>
                    <c-upload :data="form.fileList" :enumerationValue="76" deleteUrl="/api/blade-los/filescenter/remove"
                        display :pId="form.id" @upDate="upDate" :saveBtn="true"></c-upload>
                </el-tab-pane>
            </el-tabs>
        </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">
                    <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" businessValue="JSZX"></reports>
        </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 {
    finstlbillsDetail,
    listAccBillV2,
    generateFinStlBillsV1C,
    revokeGenerateFinStlBillsV1C,
    generateFinStlBillsV1D,
    revokeGenerateFinStlBillsV1D,
    finstlbillsSubmit,
    feeItemsSynchronize,
    confirmSettlementV1,
    revokeSettlementV1,
    feeItemsDelete,
    finstlbillslistAccBillByCorp,
    finstlbillsAdd
} from '@/api/iosBasicData/finstlbills'
import expand from "@/components/basic-container/expand.vue";
import finstlbillsitems from "@/views/iosBasicData/finstlbills/assembly/finstlbillsitems.vue";
import { dateFormat } from "@/util/date";
import reports from "@/views/iosBasicData/SeafreightExportF/bills/assembly/reports.vue";
import reportformsList from "@/views/iosBasicData/SeafreightExportF/bills/assembly/reportformsList.vue";
import reportContainer from "@/views/iosBasicData/report-container/report-container.vue";
import { getList as getreportsList, reportsGetReportData } from "@/api/iosBasicData/reports";
import dicSelect from "@/components/dicSelect/main";
export default {
    components: { reportContainer, reportformsList, reports, SearchQuery, expand, finstlbillsitems, dicSelect },
    props: {
        detailData: {
            type: Object
        },
        pageIds: {
            type: Array, // 指定 prop 的类型为 Array
            default: () => [], // 提供一个默认值，这里使用函数形式返回一个空数组
        }
    },
    data() {
        return {
            submitType: true,
            sumDRMB: 0,
            sumCRMB: 0,
            sumDUSD: 0,
            sumCUSD: 0,
            amountSum: 0,
            selectionList: [],
            itemSelectionList: [],
            handleSelectionData: [],
            editButton: false,
            editDisabled: false,
            pageData: [],
            pageData2: [],
            tableData: [],
            finAccBillsVOList: [],
            form: {
                branchId: JSON.parse(localStorage.getItem('sysitemData')).deptId,
                branchName: JSON.parse(localStorage.getItem('sysitemData')).deptName,
                billDate: dateFormat(new Date(), "yyyy-MM-dd") + ' 00:00:00', // 结算日期 默认 当天
                isExchangeToCny: '0',
                finStlBillsItemsList: [],
                fileList: []
            },
            search: {
                mblno: null,
                hblno: null,
                accountDc: "D",
                feeCnName: null,
                curCode: this.getLocalCurrency(),
                businessDateStart: null,
                businessDateEnd: null,
                vesselCnName: null,
                voyageNo: null
            },
            optionForm: {
                menuBtn: false,
                span: 24,
                disabled: false,
                labelWidth: 100,
                column: [
                    {
                        label: "所属公司 ",
                        prop: 'branchName',
                        disabled: false
                    },
                    {
                        label: '结算单位',
                        prop: 'corpCnName',
                        disabled: false
                    },
                    {
                        label: '结算日期',
                        prop: 'billDate',
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd 00:00:00",
                        span: 16,
                        rules: [{
                            required: true,
                            message: " ",
                            trigger: "blur"
                        }],
                        disabled: false
                    },
                    {
                        label: "转换成本币",
                        prop: "isExchangeToCny",
                        span: 8,
                        labelWidth: 80,
                        disabled: false
                    },
                    {
                        label: '单据编号',
                        prop: 'billNo',
                        disabled: true
                    },
                    {
                        label: '备注',
                        prop: 'remarks',
                        type: 'textarea',
                        minRows: 2,
                    }]
            },
            option: {},
            optionBack: {
                maxHeight: '200px',
                calcHeight: 30,
                menuWidth: 60,
                tip: false,
                menu: false,
                border: true,
                addBtn: false,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                refreshBtn: false,
                index: true,
                selection: true,
                align: 'center',
                column: [
                    {
                        label: "所属公司",
                        prop: "branchName",
                        width: 120,
                        overHidden: true
                    },
                    {
                        label: "客户名称",
                        prop: "corpCnName",
                        width: 120,
                        overHidden: true
                    },
                    {
                        label: "收付",
                        prop: "dc",
                        width: 60,
                        type: 'select',
                        dicData: [{
                            label: '收',
                            value: 'D'
                        }, {
                            label: '付',
                            value: 'C'
                        }],
                        overHidden: true,
                    },
                    {
                        label: "费用名称",
                        prop: "feeCnName",
                        width: 80,
                        overHidden: true
                    },
                    {
                        label: "结算金额",
                        prop: "currentStlAmount",
                        width: 100,
                        overHidden: true
                    },
                    {
                        label: "币别",
                        prop: "currentStlCurCode",
                        width: 60,
                        overHidden: true
                    },
                    {
                        label: "汇率",
                        prop: "currentStlExrate",
                        width: 80,
                        overHidden: true
                    },
                    {
                        label: "MB/L NO",
                        prop: "mblno",
                        width: 100,
                        overHidden: true
                    },
                    {
                        label: "HB/L NO",
                        prop: "hblno",
                        width: 100,
                        overHidden: true
                    },

                    {
                        label: "起运港",
                        prop: "polCnName",
                        width: 100,
                        overHidden: true
                    },
                    {
                        label: "目的港",
                        prop: "podCnName",
                        width: 80,
                        overHidden: true
                    },
                    {
                        label: "箱型箱量",
                        prop: "quantityCntrDescr",
                        width: 80,
                        overHidden: true
                    },
                    {
                        label: "船名",
                        prop: "vesselEnName",
                        width: 80,
                        overHidden: true
                    },
                    {
                        label: "航次",
                        prop: "voyageNo",
                        width: 80,
                        overHidden: true
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        width: 120,
                        overHidden: true
                    }
                ]
            },
            dcOptions: [{
                label: '收',
                value: 'D'
            }, {
                label: '付',
                value: 'C'
            }],
            option2: {},
            optionBack2: {
                maxHeight: '300px',
                calcHeight: 30,
                menuWidth: 60,
                searchShow: true,
                searchMenuSpan: 18,
                searchIcon: true,
                searchIndex: 3,
                tip: false,
                menu: false,
                border: true,
                addBtn: false,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                refreshBtn: false,
                index: true,
                selection: true,
                align: 'center',
                column: [
                    {
                        label: "所属公司",
                        prop: "branchName",
                        width: 120,
                        overHidden: true
                    },
                    {
                        label: "客户名称",
                        prop: "corpCnName",
                        width: 120,
                        overHidden: true
                    },
                    {
                        label: "JOB NO",
                        prop: "businessBillNo",
                        width: 100,
                        overHidden: true
                    },
                    {
                        label: "MB/L NO",
                        prop: "mblno",
                        width: 100,
                        search: true,
                        overHidden: true
                    },
                    {
                        label: "HB/L NO",
                        prop: "hblno",
                        width: 100,
                        search: true,
                        overHidden: true
                    },
                    {
                        label: "币别",
                        prop: "curCode",
                        width: 60,
                        search: true,
                        overHidden: true
                    },
                    {
                        label: "收付",
                        prop: "accountDc",
                        width: 60,
                        search: true,
                        searchValue: 'D',
                        type: 'select',
                        dicData: [{
                            label: '收',
                            value: 'D'
                        }, {
                            label: '付',
                            value: 'C'
                        }],
                        overHidden: true,
                    },
                    {
                        label: "费用名称",
                        prop: "feeCnName",
                        width: 80,
                        search: true,
                        hide: true,
                        overHidden: true
                    },
                    {
                        label: "金额",
                        prop: "reconciliationCurrentAmount",
                        width: 100,
                        overHidden: true
                    },
                    {
                        label: "汇率",
                        prop: "exrate",
                        width: 80,
                        overHidden: true
                    },
                    {
                        label: "起运港",
                        prop: "polCnName",
                        width: 100,
                        overHidden: true
                    },
                    {
                        label: "目的港",
                        prop: "podCnName",
                        width: 80,
                        overHidden: true
                    },
                    {
                        label: "箱型箱量",
                        prop: "quantityCntrDescr",
                        width: 80,
                        overHidden: true
                    },
                    {
                        label: "业务类型",
                        prop: "businessType",
                        width: 80,
                        type: 'select',
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=fm_businessStatus",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        overHidden: true
                    },
                    {
                        label: "业务开始",
                        prop: "businessDateStart",
                        width: 80,
                        search: true,
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd 00:00:00",
                        hide: true,
                        overHidden: true
                    },
                    {
                        label: "业务结束",
                        prop: "businessDateEnd",
                        width: 80,
                        search: true,
                        type: "date",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd 00:00:00",
                        hide: true,
                        overHidden: true
                    },
                    {
                        label: "船名",
                        prop: "vesselEnName",
                        width: 80,
                        search: true,
                        overHidden: true
                    },
                    {
                        label: "航次",
                        prop: "voyageNo",
                        width: 80,
                        search: true,
                        overHidden: true
                    },
                    {
                        label: "业务日期",
                        prop: "businessDate",
                        width: 80,
                        overHidden: true
                    },
                    {
                        label: "备注",
                        prop: "remarks",
                        width: 120,
                        overHidden: true
                    }
                ]
            },
            page: {
                currentPage: 1,
                total: 0,
                pageSize: 10
            },
            page2: {
                currentPage: 1,
                total: 0,
                pageSize: 20,
                pageSizes: [20, 50, 100, 200, 500]
            },
            feeOption: {
                height: '280px',
                calcHeight: 30,
                menu: false,
                border: true,
                addBtn: false,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                refreshBtn: false,
                columnBtn: false,
                tip: false,
                selection: true,
                align: 'center',
                column: [
                    {
                        label: "收付",
                        prop: "accountDc",
                        width: 60,
                        type: 'select',
                        dicData: [{
                            label: '收',
                            value: 'D'
                        }, {
                            label: '付',
                            value: 'C'
                        }],
                        overHidden: true
                    },
                    {
                        label: "费用名称",
                        prop: "feeCnName",
                        overHidden: true
                    },
                    {
                        label: "金额",
                        prop: "reconciliationCurrentAmount",
                        width: 100,
                        overHidden: true
                    },
                    {
                        label: "币别",
                        prop: "curCode",
                        width: 60,
                        overHidden: true
                    },
                    {
                        label: "汇率",
                        prop: "exrate",
                        width: 60,
                        overHidden: true
                    },
                ]
            },
            roleName: localStorage.getItem('roleName').split(','), // 当前的角色权限
            saberUserInfo: JSON.parse(localStorage.getItem('saber-userInfo')).content, // 当前登录人信息
            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: "cnName",
                        overHidden: true,
                    },
                    {
                        label: "客户英文名",
                        prop: "cnName",
                        overHidden: true,
                    },
                    {
                        label: "代收客户中文名",
                        prop: "bookingAgentCnName",
                        overHidden: true,
                    },
                    {
                        label: "代收客户英文名",
                        prop: "bookingAgentEnName",
                        overHidden: true,
                    },
                ]
            },
            DesignreportDialog: false, // 设计报表弹窗
            selectPrintingDialog: false, // 预览报表
        }
    },
    async created() {
        this.option = await this.getColumnData(this.getColumnName(528), this.optionBack);
        this.option2 = await this.getColumnData(this.getColumnName(527), this.optionBack2);
        this.saveLocalCurrency(JSON.parse(localStorage.getItem('sysitemData')).deptId)
        if (this.detailData && this.detailData.id) {
            this.editButton = true
            this.editDisabled = true
            this.optionForm.disabled = true
            this.getDetail(this.detailData.id)
        }
        this.$nextTick(() => {
            this.$refs.crud2.dicInit();
        });
    },
    methods: {
        inEdit() {
            this.editButton = false
            if (this.form.status == 1 || this.form.status == 3) return
            this.editDisabled = false
            this.optionForm.disabled = false
            if (this.form.requestNo) {
                this.editDisabled = true
                this.optionForm.column.forEach(item => {
                    if (item.prop == 'billDate') {
                        item.disabled = false
                    } else {
                        item.disabled = true
                    }
                })
            }
        },
        lastPage() {
            if (this.pageIds.length) {
                const index = this.pageIds.indexOf(this.form.id)
                if (index == 0) {
                    return this.$message.error('没有上一票了');
                }
                const lastIndex = index - 1
                // if (this.form.id) {
                //     this.unLock({
                //         moduleName: "SE",
                //         tableName: "SE_order",
                //         billId: this.form.id,
                //         billNo: this.form.mblno
                //     });
                // }
                this.getDetail(this.pageIds[lastIndex])
            }
        },
        nextPage() {
            if (this.pageIds.length) {
                const index = this.pageIds.indexOf(this.form.id)
                if (this.pageIds[this.pageIds.length - 1] == this.form.id) {
                    return this.$message.error('没有下一票了');
                }
                const nextIndex = index + 1
                // if (this.form.id) {
                //     this.unLock({
                //         moduleName: "SE",
                //         tableName: "SE_order",
                //         billId: this.form.id,
                //         billNo: this.form.mblno
                //     });
                // }
                this.getDetail(this.pageIds[nextIndex])
            }
        },
        sizeChange(val) {
            this.page.currentPage = 1
            this.page.pageSize = val
            this.getList()
        },
        currentChange(val) {
            this.page.currentPage = val
            this.getList()
        },
        sizeChange2(val) {
            this.page2.currentPage = 1
            this.page2.pageSize = val
            this.getList2()
        },
        currentChange2(val) {
            this.page2.currentPage = val
            this.getList2()
        },
        getList() {
            const start = (this.page.currentPage - 1) * this.page.pageSize
            const end = start + this.page.pageSize
            this.pageData = this.form.finStlBillsItemsList.slice(start, end)
        },
        getList2() {
            const start = (this.page2.currentPage - 1) * this.page2.pageSize
            const end = start + this.page2.pageSize
            this.pageData2 = this.tableData.slice(start, end)
        },
        getRefresh() {
            for (let item of this.selectionList) {
                this.tableData = this.tableData.filter(row => item.id != row.id)
            }
        },
        searchChange(params, done) {
            this.page2 = {
                currentPage: 1,
                total: 0,
                pageSize: 20,
                pageSizes: [20, 50, 100, 200, 500]
            }
            this.pageData2 = []
            this.tableData = []
            this.finAccBillsVOList = []
            done()
            if (!this.form.id) {
                return this.$message.error("请保存数据");
            }
            if (!this.form.corpId && (this.search.hblno || this.search.mblno)) {
                this.finstlbillslistAccBillByCorpfun()
            } else {
                if (!this.form.corpId) {
                    return this.$message.error('请填写结算单位')
                }
                this.form.billNoFormat = 'STL'
                this.form.businessTypeCode = 'STL'
                this.form.businessType = 'STL' // 结算
                let obj = {
                    ...this.form,
                    dc: this.search.accountDc,
                    curCode: this.search.curCode // 币别
                }
                finstlbillsAdd(obj)
                this.finstlbillslistAccBillV1fun()
            }
        },
        searchReset() {
            this.search = {
                mblno: null,
                hblno: null,
                accountDc: null,
                feeCnName: null,
                curCode: null,
                businessDateStart: null,
                businessDateEnd: null,
                vesselCnName: null,
                voyageNo: null
            }
        },
        allClick(name) {
            if (name == '单据加入') {
                let itemData = []
                for (let item of this.selectionList) {
                    if (item.finAccBillsVOList) {
                        itemData = itemData.concat(item.finAccBillsVOList)
                    }
                }
                if (itemData.length == 0) {
                    return this.$message.error("费用明细暂无数据,请重新选择");
                }
                let obj = {
                    id: this.form.id,
                    finAccBillsVOList: itemData,
                    type: 3
                }
                const loading = this.$loading({
                    lock: true,
                    text: '加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255,255,255,0.7)'
                });
                feeItemsSynchronize(obj).then(res => {
                    this.itemSelectionList = []
                    this.finAccBillsVOList = []
                    this.getDetail(this.form.id, 'search1')
                }).finally(() => {
                    loading.close();
                })
            }
            if (name == '明细加入') {
                let obj = {
                    id: this.form.id,
                    finAccBillsVOList: this.itemSelectionList,
                    type: 3
                }
                const loading = this.$loading({
                    lock: true,
                    text: '加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255,255,255,0.7)'
                });
                feeItemsSynchronize(obj).then(res => {
                    this.selectionList = []
                    this.itemSelectionList = []
                    this.page2 = {
                        currentPage: 1,
                        total: 0,
                        pageSize: 20,
                        pageSizes: [20, 50, 100, 200, 500]
                    }
                    this.pageData2 = []
                    this.tableData = []
                    this.finAccBillsVOList = []
                    this.getDetail(this.form.id, 'search2')
                }).finally(() => {
                    loading.close();
                })
            }
            if (name == '确认结算') {
                this.$refs.form.validate((valid, done) => {
                    done()
                    if (!valid) return
                    // 结算单位
                    if (!this.form.corpId) {
                        return this.$message.error('请选择结算单位');

                    }
                    this.form.billNoFormat = 'STL'
                    this.form.businessTypeCode = 'STL'
                    this.form.businessType = 'STL' // 结算
                    this.form.url = '/iosBasicData/financialManagement/computationCenter/index'
                    this.form.pageStatus = "this.$store.getters.SettlementCenterF"
                    this.form.pageLabel = "结算中心(N)"
                    let obj = {
                        ...this.form
                    }
                    this.$confirm('是否确认结算?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const loading = this.$loading({
                            lock: true,
                            text: '加载中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(255,255,255,0.7)'
                        });
                        confirmSettlementV1(obj).then(res => {
                            this.getDetail(res.data.data.id)
                        }).finally(() => {
                            loading.close();
                        })
                    })

                });
            }
            if (name == '撤销结算') {
                this.$refs.form.validate((valid, done) => {
                    done()
                    if (!valid) return
                    // 结算单位
                    if (!this.form.corpId) {
                        return this.$message.error('请选择结算单位');

                    }
                    this.form.billNoFormat = 'STL'
                    this.form.businessTypeCode = 'STL'
                    this.form.businessType = 'STL' // 结算
                    let obj = {
                        ...this.form
                    }
                    this.$confirm('是否撤销结算?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const loading = this.$loading({
                            lock: true,
                            text: '加载中',
                            spinner: 'el-icon-loading',
                            background: 'rgba(255,255,255,0.7)'
                        });
                        revokeSettlementV1(obj).then(res => {
                            this.getDetail(res.data.data.id)
                        }).finally(() => {
                            loading.close();
                        })
                    })

                });
            }
            if (name == '撤销生成') {
                let obj = {
                    billId: this.form.id
                }
                if (this.form.dc == 'C') {
                    const loading = this.$loading({
                        lock: true,
                        text: '加载中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255,255,255,0.7)'
                    });
                    revokeGenerateFinStlBillsV1C(obj).then(res => {
                        if (this.editButton == false) {
                            this.editDisabled = false
                            this.optionForm.disabled = false
                        }
                        this.optionForm.column.forEach(item => {
                            if (item.prop == 'billNo') {
                                item.disabled = true
                            } else {
                                item.disabled = false
                            }
                        })
                        this.form = res.data.data
                        this.getDetail(this.form.id)
                    }).finally(() => {
                        loading.close();
                    })
                }
                if (this.form.dc == 'D') {
                    const loading = this.$loading({
                        lock: true,
                        text: '加载中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255,255,255,0.7)'
                    });
                    revokeGenerateFinStlBillsV1D(obj).then(res => {
                        if (this.editButton == false) {
                            this.editDisabled = false
                            this.optionForm.disabled = false
                        }
                        this.optionForm.column.forEach(item => {
                            if (item.prop == 'billNo') {
                                item.disabled = true
                            } else {
                                item.disabled = false
                            }
                        })
                        this.form = res.data.data
                        this.getDetail(this.form.id)
                    }).finally(() => {
                        loading.close();
                    })
                }
            }
        },
        armbChange(row) {
            if (Number(row.reconciliationCurrentAmountOriginal) > 0) {
                if (Number(row.reconciliationCurrentAmount) > Number(row.reconciliationCurrentAmountOriginal)) {
                    this.$nextTick(() => {
                        row.reconciliationCurrentAmount = Number(row.reconciliationCurrentAmountOriginal)
                    })

                    return this.$message.error("本次结算金额不能超过未结算金额");
                }
            }
            if (Number(row.reconciliationCurrentAmountOriginal) < 0) {
                if (Number(row.reconciliationCurrentAmount) < Number(row.reconciliationCurrentAmountOriginal)) {
                    this.$nextTick(() => {
                        row.reconciliationCurrentAmount = Number(row.reconciliationCurrentAmountOriginal)
                    })
                    return this.$message.error("本次结算金额不能超过未结算金额");
                }
            }
        },
        upDate(list) {
            this.form.fileList = list
        },
        dicChange(name, row) {
            if (name == 'branchName') {
                if (row) {
                    this.form.branchId = row.id
                    this.saveLocalCurrency(row.id)
                } else {
                    this.form.branchId = null
                    this.form.branchName = null
                }
            }
            if (name == 'corpCnName') {
                if (row) {
                    this.form.corpId = row.id
                    this.form.corpEnName = row.enName
                    this.form.corpArgreementNo = row.enName
                } else {
                    this.form.corpId = null
                    this.form.corpEnName = null
                    this.form.corpCnName = null
                    this.form.corpArgreementNo = null
                }

            }
        },
        // 打印
        reportRadio(val) {
            // 获取报表数据
            reportsGetReportData({
                billId: this.form.id,
                reportCode: val.classifyCode,
                groupCode: val.groupCode,
                type: 'JSZX'
            }).then(res => {
                this.handleReportPreview(val.url, res.data.data.data)
            })
        },
        // 报表预览
        previewreportfun() {
            getreportsList(1, 10, {
                businessType: 'JSZX',
                // classifyCode:'结算中心',
                // groupCode:'付费结算'
            }).then(res => {
                if (res.data.data.records.length == 1) {
                    this.reportRadio(res.data.data.records[0])
                } else {
                    this.selectPrintingDialog = true
                    let page = {
                        pageSize: 10,
                        currentPage: 1,
                        total: 0
                    }
                    this.$nextTick(() => {
                        this.$refs.reportformsList.onLoad(page, {
                            businessType: 'JSZX',
                            // classifyCode:'结算中心',
                            // groupCode:'付费结算'
                        })
                    })
                }
            })
        },
        newbill() {
            this.$emit('toAddEdit')
        },
        submit() {
            this.$refs.form.validate((valid, done) => {
                done()
                if (!valid) return
                // 结算单位
                // if (!this.form.corpId) {
                //     return this.$message.error('请选择结算单位');

                // }
                this.form.billNoFormat = 'STL'
                this.form.businessTypeCode = 'STL'
                this.form.businessType = 'STL' // 结算
                let obj = {
                    ...this.form,
                    dc: this.search.accountDc,
                    curCode: this.search.curCode // 币别
                }
                const loading = this.$loading({
                    lock: true,
                    text: '加载中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(255,255,255,0.7)'
                });
                finstlbillsSubmit(obj).then(res => {
                    this.getDetail(res.data.data.id)
                }).finally(() => {
                    loading.close();
                })
            });

        },
        generateFinStlBills(ids, row, dc) {
            let obj = {
                billId: ids,
                ...row
            }
            const loading = this.$loading({
                lock: true,
                text: '加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(255,255,255,0.7)'
            });
            if (dc == 'C') {
                generateFinStlBillsV1C(obj).then(res => {
                    this.getDetail(res.data.data.id)
                }).finally(() => {
                    loading.close();
                })
            }
            if (dc == 'D') {
                generateFinStlBillsV1D(obj).then(res => {
                    this.getDetail(res.data.data.id)
                }).finally(() => {
                    loading.close();
                })
            }
        },
        // 详情接口
        getDetail(id, type) {
            const loading = this.$loading({
                lock: true,
                text: '加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(255,255,255,0.7)'
            });
            finstlbillsDetail(id).then(res => {
                if (res.data.data.status == 1 || res.data.data.status == 3) {
                    this.editButton = true
                    this.editDisabled = true
                    this.optionForm.disabled = true
                }
                if (!(res.data.data.status == 1 || res.data.data.status == 3) && this.editButton == false) {
                    this.editDisabled = false
                    this.optionForm.disabled = false
                }
                if (res.data.data.requestNo) {
                    this.editDisabled = true
                    this.optionForm.column.forEach(item => {
                        if (item.prop == 'billDate') {
                            item.disabled = false
                        } else {
                            item.disabled = true
                        }
                    })
                }
                this.form = res.data.data
                this.search.accountDc = res.data.data.dc
                this.search.curCode = res.data.data.curCode
                this.page.total = res.data.data.finStlBillsItemsList.length
                this.saveLocalCurrency(res.data.data.branchId)
                if (type == 'search1') {
                    this.getRefresh()
                }
                if (type == 'search2') {
                    this.finstlbillslistAccBillV1fun()
                }
            }).finally(() => {
                loading.close();
            })
        },
        // 弹窗选择
        retrievePopupsSelect(row) {
            // this.form = row
            this.$set(this.form, 'corpId', row.id)
            this.$set(this.form, 'corpCnName', row.cnName)
            this.$set(this.form, 'corpEnName', row.enName)
            this.$set(this.form, 'corpArgreementNo', row.enName)
            this.retrievePopupsType = false
            this.form.billNoFormat = 'STL'
            this.form.businessTypeCode = 'STL'
            this.form.businessType = 'STL' // 结算
            let obj = {
                ...this.form,
                dc: this.search.accountDc,
                curCode: this.search.curCode // 币别
            }
            finstlbillsAdd(obj).then(res => {
                this.finstlbillslistAccBillV1fun()
            })
        },
        // 检索出的弹窗
        finstlbillslistAccBillByCorpfun() {
            // delete this.form.id
            // let obj = JSON.parse(JSON.stringify(this.form))
            let obj = {}
            obj.type = '2'
            obj.branchId = this.form.branchId
            obj.branchName = this.form.branchName
            obj.corpCnName = this.form.corpId ? this.form.corpId : null
            obj.isExchangeToCny = this.form.isExchangeToCny
            obj.dc = this.search.accountDc // 收付 D=收 C=付
            obj.curCode = this.search.curCode // 币别
            obj.mblno = this.search.mblno // MB/L NO
            obj.hblno = this.search.hblno // HB/L NO
            obj.vesselCnName = this.search.vesselEnName // 中文船名
            obj.voyageNo = this.search.voyageNo // 航次
            obj.feeCnName = this.search.feeCnName//
            obj.businessDateStart = this.search.businessDateStart
            obj.businessDateEnd = this.search.businessDateEnd
            finstlbillslistAccBillByCorp(obj).then(res => {
                this.retrievePopupsType = true
                this.retrievePopupsData = res.data.data
            })
        },
        // 检索接口
        finstlbillslistAccBillV1fun() {
            let obj = {}
            obj.type = '2'
            obj.branchId = this.form.branchId
            obj.branchName = this.form.branchName
            obj.corpCnName = this.form.corpId // 结算单位
            obj.isExchangeToCny = this.form.isExchangeToCny
            obj.dc = this.search.accountDc // 收付 D=收 C=付
            obj.curCode = this.search.curCode // 币别
            obj.mblno = this.search.mblno // MB/L NO
            obj.hblno = this.search.hblno // HB/L NO
            obj.vesselCnName = this.search.vesselEnName // 中文船名
            obj.voyageNo = this.search.voyageNo // 航次
            obj.feeCnName = this.search.feeCnName//
            obj.businessDateStart = this.search.businessDateStart
            obj.businessDateEnd = this.search.businessDateEnd
            const loading = this.$loading({
                lock: true,
                text: '加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(255,255,255,0.7)'
            });
            listAccBillV2(obj).then(res => {
                this.page2.total = res.data.data.length
                this.tableData = res.data.data
                if (this.tableData.length == 0) {
                    this.$message.warning('当前检索暂无数据！')
                }
            }).finally(() => {
                loading.close();
            })
        },
        // 全部删除
        batchDeletefun() {
            if (this.handleSelectionData.length == 0) {
                return this.$message.warning('请选择要删除的数据')
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                // 获取有id 的数据
                const itemsWithId = this.handleSelectionData.filter(item => item.hasOwnProperty('id'));
                let arrIds = itemsWithId.map(item => item.id) // 获取id 数据
                // 把选中的删除掉
                this.handleSelectionData.forEach((item) => {
                    for (let index in this.pageData) {
                        if (item.accBillNo == this.pageData[index].accBillNo) {
                            this.pageData.splice(Number(index), 1)
                        }
                    }
                })
                // 有id 的处理
                if (itemsWithId.length != 0) {
                    let obj = {
                        id: this.form.id,
                        ids: arrIds.join(','),
                        type: 3,
                    }
                    const loading = this.$loading({
                        lock: true,
                        text: '加载中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255,255,255,0.7)'
                    });
                    feeItemsDelete(obj).then(res => {
                        this.$message.success("删除成功");
                        this.getDetail(this.form.id)
                    }).finally(() => {
                        loading.close();
                    })
                }
            })
        },
        allDelete() {
            if (this.form.finStlBillsItemsList.length == 0) {
                return this.$message.error("暂无数据");
            }
            let ids = []
            for (let item of this.form.finStlBillsItemsList) {
                ids.push(item.id)
            }
            let obj = {
                id: this.form.id,
                ids: ids.join(','),
                type: 3,
            }
            const loading = this.$loading({
                lock: true,
                text: '加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(255,255,255,0.7)'
            });
            feeItemsDelete(obj).then(res => {
                this.$message.success("删除成功");
                this.getDetail(this.form.id)
            }).finally(() => {
                loading.close();
            })
        },
        // 下面表格多选
        handleSelectionChange(list) {
            this.handleSelectionData = list
        },
        selectionChange(list) {
            this.sumDRMB = 0
            this.sumCRMB = 0
            this.sumDUSD = 0
            this.sumCUSD = 0
            if (list.length) {
                list.forEach(item => {
                    if (item.curCode == this.getLocalCurrency()) {
                        if (item.accountDc == 'D') {
                            this.sumDRMB += Number(item.reconciliationCurrentAmount ? item.reconciliationCurrentAmount : 0)
                        }
                        if (item.accountDc == 'C') {
                            this.sumCRMB += Number(item.reconciliationCurrentAmount ? item.reconciliationCurrentAmount : 0)
                        }
                    }
                    if (item.curCode != this.getLocalCurrency()) {
                        if (item.accountDc == 'D') {
                            this.sumDUSD += Number(item.reconciliationCurrentAmount ? item.reconciliationCurrentAmount : 0)
                        }
                        if (item.accountDc == 'C') {
                            this.sumCUSD += Number(item.reconciliationCurrentAmount ? item.reconciliationCurrentAmount : 0)
                        }
                    }
                })
            }
            this.selectionList = list
        },
        itemSelectionChange(list) {
            this.amountSum = 0
            if (list.length) {
                list.forEach(item => {
                    this.amountSum += Number(item.reconciliationCurrentAmount ? item.reconciliationCurrentAmount : 0)
                })
            }
            this.itemSelectionList = list
        },
        handleRowClick(row, event) {
            this.finAccBillsVOList = row.finAccBillsVOList
            this.$refs.crud3.$refs.table.toggleAllSelection()
        },
        //返回列表
        backToList() {
            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()
            // }

        },
        cellStyle({ row, rowIndex, columnIndex }) {
            let rowStyle = ''
            if (row.accountDc == 'D' || row.dc == 'D') {
                rowStyle = 'color:#8cb24b;'
            } else if (row.accountDc == 'C' || row.dc == 'C') {
                rowStyle = 'color:#F56C6C;'
            }
            return rowStyle + 'padding:0px;fontSize:12px'
        },
        //自定义列保存
        async saveColumn(ref, option, optionBack, code) {
            const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
            if (inSave) {
                this.$message.success("保存成功");
                //关闭窗口
                this.$refs[ref].$refs.dialogColumn.columnBox = false;
            }
        },
        //自定义列重置
        async resetColumn(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;
            }
        },
    },
    watch: {
        'form.finStlBillsItemsList': {
            // 执行方法
            handler(oldValue, newValue) {
                this.page.total = oldValue.length
                this.getList()
            },
            deep: true, // 深度监听
            immediate: true  // 第一次改变就执行,
        },
        tableData: {
            // 执行方法
            handler(oldValue, newValue) {
                this.page2.total = oldValue.length
                this.getList2()
            },
            deep: true, // 深度监听
            immediate: true  // 第一次改变就执行,
        }
    }
}
</script>

<style scoped>
::v-deep .el-form-item__error {
    display: none;
}

::v-deep .el-form-item {
    margin-bottom: 0;
}

::v-deep .el-card__body {
    padding: 4px;
}

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

.weightfont {
    font-size: 20px;
    font-weight: bold;
}

.weightnum {
    font-size: 15px;
    font-weight: 500;
}
</style>