tire-platform-ui/src/views/iosBasicData/fininvoicesApplyfor/fininvoicesDetails.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" type="warning" plain  style="margin-right: 8px" :disabled="!form.id" v-if="form.status == 3"
                            :loading="saveLoading" @click="revokeFinInvoicesApprovefun">撤销
                </el-button>
                <el-button  size="small" type="success" plain  style="margin-right: 8px" :disabled="!form.id" v-else
                            :loading="saveLoading" @click="finInvoicesApprovefun">提交
                </el-button>
                <el-button  size="small" type="primary" style="margin-right: 8px" v-if="editSave"
                            :loading="saveLoading" @click="editHandle">编 辑
                </el-button>
                <el-button  size="small" type="primary" style="margin-right: 8px" v-else
                            :loading="saveLoading" @click="editCustomer">保 存
                </el-button>
            </div>
        </div>
        <div style="margin: 55px 5px 0px 5px;'">
            <el-form :model="form" ref="form" :rules="rules" label-width="90px" class="demo-ruleForm">
                <trade-card title="基础信息" styleIocup="color:#4b9fe9">
                    <el-row>
                        <el-col :span="10">
                            <div class="flexBoxLeft">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="发票号码" prop="invoiceNo">
                                            <el-input style="width: 100%;" v-model="form.invoiceNo"
                                                      size="small" autocomplete="off"
                                                      :disabled="true"
                                                      clearable placeholder="请输入发票号码" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="开票日期" prop="invoiceDate">
                                            <el-date-picker v-model="form.invoiceDate" clearable
                                                            style="width: 100%;"
                                                            type="date" size="small"
                                                            :disabled="true"
                                                            value-format="yyyy-MM-dd"
                                                            placeholder="选择开票日期">
                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-form-item label="开票单位" prop="invCorpCnName">
                                            <search-query :datalist="invCorpData"
                                                          :selectValue="form.invCorpCnName"
                                                          :clearable="true"
                                                          :disabled="editSave || !form.corpId"
                                                          :buttonIf="false"
                                                          :remote="true"
                                                          :filterable="true"
                                                          placeholder="请选择开票单位"
                                                          :forParameter="{ key:'id', label:'invoiceHeader', value:'id'}"
                                                          @corpChange="corpChange($event,'invCorpCnName')"
                                                          @remoteMethod="invcorpsinvoiceheaderListfun"
                                                          @corpFocus="invcorpsinvoiceheaderListfun" >
                                            </search-query>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="24">
                                        <el-form-item label="税号" prop="invCorpTaxNo">
                                            <el-input style="width: 100%;" v-model="form.invCorpTaxNo"
                                                      size="small" autocomplete="off"
                                                      :disabled="true"
                                                      clearable placeholder="请输入税号" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="美元银行" prop="invCorpAccountBankUsd">
                                            <el-input style="width: 100%;" v-model="form.invCorpAccountBankUsd"
                                                      size="small" autocomplete="off"
                                                      :disabled="true"
                                                      clearable placeholder="请输入美元银行" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="美元账户" prop="invCorpAccountNoUsd">
                                            <el-input style="width: 100%;" v-model="form.invCorpAccountNoUsd"
                                                      size="small" autocomplete="off"
                                                      :disabled="true"
                                                      clearable placeholder="请输入美元账户" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="人民币银行" prop="invCorpAccountBankCny">
                                            <el-input style="width: 100%;" v-model="form.invCorpAccountBankCny"
                                                      size="small" autocomplete="off"
                                                      :disabled="true"
                                                      clearable placeholder="请输入美元银行" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="人民币账户" prop="invCorpAccountNoCny">
                                            <el-input style="width: 100%;" v-model="form.invCorpAccountNoCny"
                                                      size="small" autocomplete="off"
                                                      :disabled="true"
                                                      clearable placeholder="请输入人民币账户" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="船名/航次" prop="vesselVoyno">
                                            <el-input style="width: 100%;" v-model="form.vesselVoyno"
                                                      size="small" autocomplete="off"
                                                      :disabled="editSave"
                                                      clearable placeholder="请输入船名/航次" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="开航日期" prop="etd">
                                            <el-date-picker v-model="form.etd" clearable
                                                            style="width: 100%;"
                                                            type="date" size="small"
                                                            :disabled="editSave"
                                                            value-format="yyyy-MM-dd HH:mm:ss"
                                                            placeholder="请输入开航日期">
                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="装货港" prop="pol">
                                            <search-query :datalist="polData"
                                                          :selectValue="form.pol"
                                                          :filterable="true"
                                                          :clearable="true"
                                                          :remote="true"
                                                          :disabled="editSave"
                                                          :buttonIf="false"
                                                          placeholder="请输入装货港"
                                                          :forParameter="{key:'id',label:'enName',value:'enName'}"
                                                          @corpChange="corpChange($event,'pol')"
                                                          @remoteMethod="polBportsListfun"
                                                          @corpFocus="polBportsListfun" >
                                            </search-query>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="卸货港" prop="pod">
                                            <search-query :datalist="podData"
                                                          :selectValue="form.pod"
                                                          :filterable="true"
                                                          :clearable="true"
                                                          :remote="true"
                                                          :disabled="editSave"
                                                          :buttonIf="false"
                                                          placeholder="请输入卸货港"
                                                          :forParameter="{key:'id',label:'enName',value:'enName'}"
                                                          @corpChange="corpChange($event,'pod')"
                                                          @remoteMethod="podBportsListfun"
                                                          @corpFocus="podBportsListfun" >
                                            </search-query>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="目的地" prop="destination">
                                            <search-query :datalist="destinationData"
                                                          :selectValue="form.destination"
                                                          :filterable="true"
                                                          :clearable="true"
                                                          :remote="true"
                                                          :disabled="editSave"
                                                          :buttonIf="false"
                                                          placeholder="请输入目的地"
                                                          :forParameter="{key:'id',label:'enName',value:'enName'}"
                                                          @corpChange="corpChange($event,'destination')"
                                                          @remoteMethod="destinationBportsListfun"
                                                          @corpFocus="destinationBportsListfun" >
                                            </search-query>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="箱型箱量" prop="containers">
                                            <el-input style="width: 100%;" v-model="form.containers"
                                                      size="small" autocomplete="off"
                                                      :disabled="editSave"
                                                      clearable placeholder="请输入箱型箱量" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="全电发票备注:" prop="invCurCode">
                                            <el-input style="width: 100%;" v-model="form.elecRemarks"
                                                      size="small" autocomplete="off"
                                                      :disabled="editSave"
                                                      clearable placeholder="请输入全电发票备注" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="开票合计:" prop="invCurCode">
                                            <span>¥{{form.amountLoc}}元</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                        <el-col :span="14">
                            <div class="flexBoxRight">
                                <el-row>
                                    <el-col :span="4">
                                        <el-switch
                                            v-model="form.stlMode"
                                            active-value="1"
                                            inactive-value="0"
                                            active-color="#66dd7a"
                                            inactive-color="#4ea6ea"
                                            active-text="票结"
                                            inactive-text="月结">
                                        </el-switch>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-checkbox style="margin-left: 10%" size="medium" :true-label="1" :false-label="0"
                                                     :disabled="editSave"
                                                     v-model="form.isDk">整票(不列费用明细)
                                        </el-checkbox>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-checkbox style="margin-left: 10%" size="medium" :true-label="1" :false-label="0"
                                                     :disabled="editSave"
                                                     v-model="form.isRp">只提取开票费用
                                        </el-checkbox>
                                    </el-col>
                                    <el-col :span="3">
                                        <el-checkbox style="margin-left: 10%" size="medium" :true-label="1" :false-label="0"
                                                     :disabled="editSave"
                                                     v-model="form.isExportMblno">主单号
                                        </el-checkbox>
                                    </el-col>
                                    <el-col :span="3">
                                        <el-checkbox style="margin-left: 10%" size="medium" :true-label="1" :false-label="0"
                                                     :disabled="editSave"
                                                     v-model="form.isExportVslvoy">船名航次
                                        </el-checkbox>
                                    </el-col>
                                    <el-col :span="3">
                                        <el-checkbox style="margin-left: 10%" size="medium" :true-label="1" :false-label="0"
                                                     :disabled="editSave"
                                                     v-model="form.isExportHblno">分单号
                                        </el-checkbox>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item label="结算单位" prop="corpCnName">
                                            <search-query :datalist="corpData"
                                                          :selectValue="form.corpCnName"
                                                          :clearable="true"
                                                          :disabled="editSave"
                                                          :buttonIf="false"
                                                          :remote="true"
                                                          :filterable="true"
                                                          placeholder="请输入结算单位"
                                                          :forParameter="{ key:'id', label:'cnName', value:'cnName'}"
                                                          @corpChange="corpChange($event,'corpCnName')"
                                                          @remoteMethod="corpBcorpsListfun"
                                                          @corpFocus="corpBcorpsListfun" >
                                            </search-query>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="开票日期" prop="invoiceDate">
                                            <el-date-picker v-model="form.invoiceDate" clearable
                                                            style="width: 100%;"
                                                            type="date" size="small"
                                                            :disabled="editSave"
                                                            value-format="yyyy-MM-dd"
                                                            placeholder="选择开票日期">
                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="税控发票号" prop="taxInvoiceNo">
                                            <el-input style="width: 100%;" v-model="form.taxInvoiceNo"
                                                      size="small" autocomplete="off"
                                                      :disabled="editSave"
                                                      clearable placeholder="请输入税控发票号" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="银行账号" prop="bankReceiptAccountNo">
                                            <search-query :datalist="bankReceiptData"
                                                          :selectValue="form.bankReceiptAccountNo"
                                                          :clearable="true"
                                                          :disabled="editSave || !form.corpId"
                                                          :buttonIf="false"
                                                          :remote="true"
                                                          :filterable="true"
                                                          placeholder="请输入银行账号"
                                                          :forParameter="{ key:'id', label:'accountNo', value:'accountNo'}"
                                                          @corpChange="corpChange($event,'bankReceiptAccountNo')"
                                                          @remoteMethod="bcorpsbankListfun">
                                            </search-query>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="银行名称" prop="bankReceiptBankName">
                                            <el-input style="width: 100%;" v-model="form.bankReceiptBankName"
                                                      size="small" autocomplete="off"
                                                      :disabled="editSave"
                                                      clearable placeholder="请输入银行名称" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="导出时间" prop="exportDate">
                                            <el-date-picker v-model="form.exportDate" clearable
                                                            style="width: 100%;"
                                                            type="date" size="small"
                                                            :disabled="editSave"
                                                            value-format="yyyy-MM-dd HH:mm"
                                                            placeholder="请选择导出时间">
                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="16">
                                        <el-form-item label="业务编号" prop="businessNo">
                                            <el-input style="width: 100%;" v-model="form.businessNo"
                                                      size="small" autocomplete="off"
                                                      :disabled="editSave"
                                                      clearable placeholder="请输入业务编号" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="导出人" prop="exportName">
                                            <el-input style="width: 100%;" v-model="form.exportName"
                                                      size="small" autocomplete="off"
                                                      :disabled="editSave"
                                                      clearable placeholder="请输入导出人" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="16">
                                        <el-form-item label="主单编号" prop="mblno">
                                            <el-input style="width: 100%;" v-model="form.mblno"
                                                      size="small" autocomplete="off"
                                                      :disabled="editSave"
                                                      clearable placeholder="请输入主单编号" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="导出汇率" prop="exrate">
                                            <el-input style="width: 100%;" v-model="form.exrate"
                                                      size="small" autocomplete="off"
                                                      :disabled="editSave"
                                                      clearable placeholder="请输入导出汇率" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="16">
                                        <el-form-item label="分单编号" prop="hblno">
                                            <el-input style="width: 100%;" v-model="form.hblno"
                                                      size="small" autocomplete="off"
                                                      :disabled="editSave"
                                                      clearable placeholder="请输入分单编号" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="发票类型" prop="invType">
                                            <search-query :datalist="invTypeData"
                                                          :selectValue="form.invType"
                                                          :clearable="true"
                                                          :disabled="editSave"
                                                          :buttonIf="false"
                                                          placeholder="请输入发票类型"
                                                          :forParameter="{ key:'dictKey', label:'dictValue', value:'dictKey'}"
                                                          @corpChange="corpChange($event,'isInvoice')"
                                                          @corpFocus="invTypeWorkDictsfun" >
                                            </search-query>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="无字段账单号" prop="bookingNo">
                                            <el-input style="width: 100%;" v-model="form.bookingNo"
                                                      size="small" autocomplete="off"
                                                      :disabled="editSave"
                                                      clearable placeholder="请输入账单号" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="对账单号" prop="checkNo">
                                            <el-input style="width: 100%;" v-model="form.checkNo"
                                                      size="small" autocomplete="off"
                                                      :disabled="editSave"
                                                      clearable placeholder="请输入对账单号" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="所属税种" prop="taxType">
                                            <el-input style="width: 100%;" v-model="form.taxType"
                                                      size="small" autocomplete="off"
                                                      :disabled="editSave"
                                                      clearable placeholder="请输入所属税种" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="BOOK NO" prop="bookingNo">
                                            <el-input style="width: 100%;" v-model="form.bookingNo"
                                                      size="small" autocomplete="off"
                                                      :disabled="editSave"
                                                      clearable placeholder="请输入BOOK NO" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="业务类型" prop="businessTypes">
                                            <search-query :datalist="businessTypesData"
                                                          :selectValue="form.businessTypes"
                                                          :clearable="true"
                                                          :disabled="editSave"
                                                          :buttonIf="false"
                                                          :multiple="true"
                                                          :collapseTags="true"
                                                          placeholder="请输入业务类型"
                                                          @corpChange="corpChange($event,'businessTypes')">
                                            </search-query>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="税率" prop="taxRate">
                                            <el-input style="width: 100%;" v-model="form.taxRate"
                                                      size="small" autocomplete="off"
                                                      :disabled="editSave"
                                                      clearable placeholder="请输入税率" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="选择币种" prop="curCode">
                                            <search-query :datalist="curData"
                                                          :selectValue="form.curCode"
                                                          :filterable="true"
                                                          :clearable="true"
                                                          :disabled="editSave"
                                                          :remote="true"
                                                          :buttonIf="false"
                                                          placeholder="请输入选择币种"
                                                          :forParameter="{key:'id',label:'code',value:'code'}"
                                                          @remoteMethod="getRateListfun"
                                                          @corpChange="corpChange($event,'curCode')"
                                                          @corpFocus="getRateListfun">
                                            </search-query>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-checkbox style="margin-left: 10%" size="medium" :true-label="1" :false-label="0"
                                                     :disabled="editSave"
                                                     v-model="form.isExchangeToCny">转换成人民币
                                        </el-checkbox>
                                        <el-checkbox v-model="appendType" false-label="检索" true-label="追加">追加</el-checkbox>
                                        <el-button type="primary"
                                                   size="small"
                                                   plain @click="finstlbillslistAccBillV1fun(appendType)">提取费用
                                        </el-button>
                                    </el-col>
                                    <el-col :span="8">
                                        <el-form-item label="邮箱" prop="checkNo">
                                            <el-input style="width: 100%;" v-model="form.checkNo"
                                                      size="small" autocomplete="off"
                                                      :disabled="editSave"
                                                      clearable placeholder="请输入邮箱" >
                                            </el-input>
                                        </el-form-item>
                                    </el-col>

                                </el-row>
                            </div>
                        </el-col>
                    </el-row>
                </trade-card>
                <el-card style="margin-top: 10px">
                    <el-tabs v-model="detailTabs" type="card">
                        <el-tab-pane label="费用明细" name="first">
                            <div style="margin-bottom: 10px;display: flex;">
                                <search-query :datalist="invoicingData"
                                              :selectValue="invoicingValue"
                                              :clearable="true"
                                              :buttonIf="false"
                                              :filterable="true"
                                              :forParameter="{key:'dictKey',label:'dictValue',value:'dictValue'}"
                                              placeholder="请输入开票项目"
                                              @corpChange="corpChange($event,'invoicingValue')"
                                              @corpFocus="invoicingWorkDictsfun" >
                                </search-query>
                                <el-button style="margin-left: 10px" size="small" type="primary" @click="invoicingfun" >开票</el-button>
                                <el-button size="small" type="danger" @click="batchDeletefun" >批量删除</el-button>
                            </div>
                            <fininvoicesitems :tableData="tableData"
                                              :handleSelectionData="handleSelectionData"
                                              :editSave="editSave"
                                              @handleSelectionChange="handleSelectionChange"
                                              @deletefun="detailsdeletionfun">
                            </fininvoicesitems>
                        </el-tab-pane>
                        <el-tab-pane label="开票明细" name="second">
                            <fininvoiceitemdetail :tableData="InvoicingList"
                                                  :handleSelectionData="[]">
                            </fininvoiceitemdetail>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
                <el-card class="box-card" style="margin-top: 10px">
                    <el-row>
                        <el-col :span="5">
                            <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="billDate">
                                <el-date-picker v-model="form.billDate" clearable
                                                style="width: 100%;"
                                                type="date" size="small"
                                                :disabled="true"
                                                value-format="yyyy-MM-dd HH:mm"
                                                placeholder="选择单据日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="制单人" prop="createUserName">
                                <el-input style="width: 100%;" v-model="form.createUserName"
                                          size="small" autocomplete="off"
                                          :disabled="true"
                                          clearable placeholder="请输入制单人" >
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="发票币种" prop="invCurCode">
                                <search-query :datalist="invCurCodeData"
                                              :selectValue="form.invCurCode"
                                              :filterable="true"
                                              :clearable="true"
                                              :disabled="editSave"
                                              :buttonIf="false"
                                              placeholder="请选择发票币种"
                                              :forParameter="{key:'id',label:'code',value:'code'}"
                                              @corpChange="corpChange($event,'invCurCode')"
                                              @corpFocus="invCurCodeRateListfun">
                                </search-query>
                            </el-form-item>
                        </el-col>
                        <!--<el-col :span="4">-->
                        <!--    <el-form-item label="打印次数" prop="invCurCode">-->
                        <!--        <el-input style="width: 100%;" v-model="form.invCurCode"-->
                        <!--                  size="small" autocomplete="off"-->
                        <!--                  :disabled="editSave"-->
                        <!--                  clearable placeholder="请输入打印次数" >-->
                        <!--        </el-input>-->
                        <!--    </el-form-item>-->
                        <!--</el-col>-->
                    </el-row>
                </el-card>
            </el-form>
        </div>



    </div>
</template>

<script>
import fininvoicesitems from "@/views/iosBasicData/fininvoicesApplyfor/assembly/fininvoicesitems.vue";
import fininvoiceitemdetail from "@/views/iosBasicData/fininvoicesApplyfor/assembly/fininvoiceitemdetail.vue";
import {getRateList} from "@/api/iosBasicData/rateManagement";
import {finstlbillsitemsRemove, finstlbillslistAccBillV1} from "@/api/iosBasicData/finstlbills";
import {bcorpsbankList, corpsinvoiceheaderList, getBcorpsList} from "@/api/iosBasicData/bcorps";
import {bportsList} from "@/api/iosBasicData/bports";
import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
import {
    finInvoicesApprove,
    fininvoicesDetail,
    revokeFinInvoicesApprove,
    fininvoicesSubmit, fininvoicesitemsRemove
} from "@/api/iosBasicData/fininvoices";
import {getWorkDicts} from "@/api/system/dictbiz";

export default {
        components:{ SearchQuery, fininvoicesitems,fininvoiceitemdetail},
        data() {
            return {
                invoicingData:[], // 开票项目数据
                invoicingValue:'', // 开票项目
                detailTabs:'first',
                appendType:'检索',
                pageLoading:false, // 全屏加载
                saveLoading:false, // 按钮加载
                form:{},
                tableData:[], // 费用明细数据
                InvoicingList:[], // 开票明细数据
                handleSelectionData:[], // 选择的数据
                corpData:[], // 结算单位数据
                invCorpData:[], // 开票单位
                bankReceiptData:[], // 结算单位银行账号数据
                // 业务类型
                businessTypesData:[
                    {
                        label:'海运出口',
                        value:'SE'
                    },{
                        label:'海运进口',
                        value:'SI'
                    }
                ],
                curData:[], // 币别
                destinationData:[], // 目的港
                podData:[], // 卸货港
                polData:[], // 装货港
                invCurCodeData:[], // 发票币种
                invTypeData:[], // 发票类型
                rules: {
                    corpCnName: [
                        {required: true, message: '请输入付费对象', trigger: 'blur'},
                    ],
                    invoiceDate: [
                        {required: true, message: '请输入开票日期', trigger: 'blur'},
                    ],
                    exrate: [
                        {required: true, message: '请输入导入汇率', trigger: 'blur'},
                    ],
                    taxType: [
                        {required: true, message: '请输入所属税种', trigger: 'blur'},
                    ],
                },
            }
        },
        props:{
            editSave:{
                type:Boolean,
                default:false
            }
        },
        methods:{
            // 开票信息
            invoicingfun(){
                this.detailTabs = 'second'
            },
            // 批量删除
            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.tableData) {
                            if (item.accBillNo == this.tableData[index].accBillNo) {
                                this.tableData.splice(index,1)
                            }
                        }
                    })
                    // 有id 的处理
                    if(itemsWithId.length != 0) {
                        fininvoicesitemsRemove(arrIds.join(',')).then(res=>{
                            this.$message.success('操作成功')
                        })
                    }
                })
            },
            // 单个删除
            detailsdeletionfun(id){
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(()=>{
                    if (id) {
                        fininvoicesitemsRemove(id).then(res=>{
                            this.$message.success('操作成功')
                        })
                    }
                    this.tableData.splice(index,1)
                })
            },
            // 下拉框的回调
            corpChange(value,name){
                // 结算单位
                if (name == 'corpCnName') {
                    if (!value) {
                        this.$set(this.form,'corpId','')
                        this.$set(this.form,'corpCnName','')
                        this.$set(this.form,'corpEnName','')
                        return
                    }
                    for(let item of this.corpData) {
                        if (item.cnName == value) {
                            this.$set(this.form,'corpId',item.id)
                            this.$set(this.form,'corpCnName',item.cnName)
                            this.$set(this.form,'corpEnName',item.enName)
                            bcorpsbankList(1,10,{pid:this.form.corpId}).then(res=>{
                                if (res.data.data.records.length != 0) {
                                    this.$set(this.form,'bankReceiptAccountNo',res.data.data.records[0].accountNo)
                                    this.$set(this.form,'bankReceiptBankName',res.data.data.records[0].accountBank)
                                }
                            })
                            // 带出开票单位数据
                            corpsinvoiceheaderList(1,20,{pid:this.form.corpId}).then(res=>{
                                if (res.data.data.records.length != 0) {
                                    this.$set(this.form,'invCorpId',res.data.data.records[0].id)
                                    this.$set(this.form,'invCorpCnName',res.data.data.records[0].invoiceHeader)
                                    this.$set(this.form,'invCorpTaxNo',res.data.data.records[0].uscc) // 税号
                                    this.$set(this.form,'invCorpAccountBankUsd',res.data.data.records[0].accountBankUsd) // 美元银行
                                    this.$set(this.form,'invCorpAccountNoUsd',res.data.data.records[0].accountNoUsd) // 美元账户
                                    this.$set(this.form,'invCorpAccountBankCny',res.data.data.records[0].accountBankUsd) // 人民币银行
                                    this.$set(this.form,'invCorpAccountNoCny',res.data.data.records[0].accountNoUsd) // 人民币账户
                                }
                            })
                        }
                    }
                }
                // 开票单位
                else if (name == 'invCorpCnName') {
                    this.$set(this.form,'invCorpAccountBankUsd','')
                    this.$set(this.form,'invCorpAccountNoUsd','')
                    this.$set(this.form,'invCorpAccountBankCny','')
                    this.$set(this.form,'invCorpAccountNoCny','')
                    if (!value) {
                        this.$set(this.form,'invCorpId','')
                        this.$set(this.form,'invCorpCnName','')
                        return
                    }
                    for(let item of this.invCorpData) {
                        if (item.id == value) {
                            this.$set(this.form,'invCorpId',item.id)
                            this.$set(this.form,'invCorpCnName',item.invoiceHeader)
                            this.$set(this.form,'invCorpTaxNo',item.uscc) // 税号
                            this.$set(this.form,'invCorpAccountBankUsd',item.accountBankUsd) // 美元银行
                            this.$set(this.form,'invCorpAccountNoUsd',item.accountNoUsd) // 美元账户
                            this.$set(this.form,'invCorpAccountBankCny',item.accountBankUsd) // 人民币银行
                            this.$set(this.form,'invCorpAccountNoCny',item.accountNoUsd) // 人民币账户
                        }
                    }
                }
                // 结算单位银行账户
                else if(name == 'bankReceiptAccountNo') {
                    for(let item of this.bankReceiptData) {
                        if (item.accountNo == value) {
                            this.$set(this.form,'bankReceiptAccountNo',item.accountNo)
                            this.$set(this.form,'bankReceiptBankName',item.accountBank)
                        }
                    }
                }
                else if (name == 'invoicingValue') {
                    this.invoicingValue = value
                }
                else {
                    this.$set(this.form,name,value)
                }

            },
            // 下面表格多选
            handleSelectionChange(arr){
                this.handleSelectionData = arr
            },
            // 编辑事件
            editHandle(){
                this.editSave = false
            },
            // 保存按钮事件
            editCustomer(){
                this.$refs.form.validate((valid) => {
                    if (!valid) return
                    if (!this.form.id) {
                        // 是否选择从表数据
                        if (this.handleSelectionData.length == 0) {
                            this.$message.warning('请选择结算数据');
                            return;
                        }
                    }
                    this.form.type = '销项'
                    this.form.billNoFormat = 'FPSQ'
                    this.form.businessTypeCode = 'FPSQ'
                    this.form.businessTypes = this.form.businessTypes?this.form.businessTypes.join(','):''
                    //开票日期
                    if(this.form.invoiceDate) {
                        this.form.invoiceDate = this.form.invoiceDate.slice(0,10) + ' 00:00:00'
                    }
                    this.form.finInvoicesItemsList = this.handleSelectionData.map(item=>{
                        if (item.currentCurCode == 'CNY') {
                            item.currentAmount = item.currentAmountCNY
                        }else {
                            item.currentAmount = item.currentAmountUSD
                        }
                        return item
                    })
                    this.saveLoading = true
                    this.fininvoicesSubmitfun(this.form)
                })
            },
            // 检索
            finstlbillslistAccBillV1fun(type){
                if (!this.form.corpId) {
                    this.$message.warning('请选择结算单位');
                    return
                }
                let obj = {}
                //开票日期
                if(this.form.invoiceDate) {
                    obj.invoiceDate = this.form.invoiceDate.slice(0,10) + ' 00:00:00'
                }
                obj.type = '3'
                obj.corpCnName = this.form.corpId // 结算单位
                obj.billNo = this.form.bookingNo // 账单号
                obj.businessBillNo = this.form.billNo // 业务编号
                obj.mblno = this.form.mblno // 主单编号
                obj.hblno = this.form.hblno // 分单编号
                obj.checkBillNo = this.form.checkNo // 对账单号
                obj.bookingNo = this.form.bookingNo // 订舱号(BOOK NO)
                obj.curCode = this.form.curCode // 币种
                obj.businessType = this.form.businessTypes?this.form.businessTypes.join(','):'' // 业务类型
                finstlbillslistAccBillV1(obj).then(res=>{
                    let arr = res.data.data.map((item,index)=>{
                        item.lineNo = Number(index) + 1 // 行号
                        item.accBillId = item.id
                        item.accBillNo = item.billNo
                        item.accDate = item.createTime
                        item.currentCurCode = item.curCode
                        item.currentExrate = item.exrate
                        if (item.currentCurCode == 'CNY') {
                            // 本次发票金额
                            item.currentAmountCNY = (Number(item.amount) - Number(item.stlTtlAmount) - Number(item.appliedAmount)).toFixed(2)
                        }else {
                            // 本次发票金额
                            item.currentAmountUSD = (Number(item.amount) - Number(item.stlTtlAmount) - Number(item.appliedAmount)).toFixed(2)
                        }
                        delete item.id
                        return item
                    })
                    if (type == '追加') {
                        let a = [...this.tableData,...arr,]
                        this.tableData = a.filter((obj, index) => {
                            return a.findIndex((elem) => {
                                return elem.accBillNo === obj.accBillNo
                            }) === index;
                        });
                    }else {
                        // 获取有id 的数据
                        const itemsWithId = this.tableData.filter(item => item.hasOwnProperty('id'));
                        let arrIds = itemsWithId.map(item=>item.id) // 获取id 数据
                        // 有id 的处理
                        if(itemsWithId.length != 0) {
                            fininvoicesitemsRemove(arrIds.join(',')).then(res=>{
                                this.$message.success('操作成功')
                            })
                        }
                        this.tableData = arr
                    }

                })
            },
            // 保存接口
            fininvoicesSubmitfun(obj){
                fininvoicesSubmit(obj).then(res=>{
                    this.saveLoading = false
                    this.$message.success('操作成功');
                    this.fininvoicesDetailfun(res.data.data.id)
                })
            },
            // 详情接口
            fininvoicesDetailfun(id){
                this.pageLoading = true
                fininvoicesDetail(id).then(res=>{
                    this.form = res.data.data
                    this.form.businessTypes = this.form.businessTypes?this.form.businessTypes.split(','):[] // 业务类型转换成数组显示
                    this.tableData = this.form.finInvoicesItemsList.map(item=>{
                        if (item.currentCurCode == 'CNY') {
                            item.currentAmountCNY = item.currentAmount
                        }else {
                            item.currentAmountUSD = item.currentAmount
                        }
                        return item
                    })
                    this.InvoicingList = this.form.finInvoiceItemDetailList
                    this.pageLoading = false
                })
            },
            // 确认申请
            finInvoicesApprovefun(){
                this.$confirm("确定进行申请操作?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(res=>{
                    this.pageLoading = true
                    this.form.businessTypes = this.form.businessTypes?this.form.businessTypes.join(','):''
                    finInvoicesApprove(this.form).then(res=>{
                        this.pageLoading = false
                        this.$message.success('操作成功');
                        this.fininvoicesDetailfun(res.data.data.id)
                    }).catch(err=>{
                        this.pageLoading = false
                    })
                })
            },
            // 撤销申请
            revokeFinInvoicesApprovefun(){
                this.$confirm("确定进行撤销申请操作?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(res=>{
                    this.pageLoading = true
                    this.form.businessTypes = this.form.businessTypes?this.form.businessTypes.join(','):''
                    revokeFinInvoicesApprove(this.form).then(res=>{
                        this.pageLoading = false
                        this.$message.success('操作成功');
                        this.fininvoicesDetailfun(res.data.data.id)
                    }).catch(err=>{
                        this.pageLoading = false
                    })
                })
            },
            //返回列表
            backToList() {
                this.$emit('goBack')
            },
            // 获取客户名称数据 往来单位数据
            corpBcorpsListfun(cnName){
                getBcorpsList(1,10,{cnName}).then(res=>{
                    this.corpData = res.data.data.records
                })
            },
            // 根据往来单位选择调用获取银行数据
            bcorpsbankListfun(accountNo){
                bcorpsbankList(1,10,{
                    // curNo:this.cntyCode,
                    pid:this.form.corpId,
                    accountNo:accountNo
                }).then(res=>{
                    this.bankReceiptData = res.data.data.records
                })
            },
            // 根据往来单位选择调用获取发票抬头数据 开票单位数据
            invcorpsinvoiceheaderListfun(cnName){
                corpsinvoiceheaderList(1,20,{pid:this.form.corpId,cnName}).then(res=>{
                    this.invCorpData = res.data.data.records
                })
            },
            // 获取币别数据
            getRateListfun(cnName){
                getRateList({current:1,size:10,cnName}).then(res=>{
                    this.curData = res.data.data.records
                })
            },
            // 获取发票币别数据
            invCurCodeRateListfun(cnName){
                getRateList({current:1,size:20,cnName}).then(res=>{
                    this.invCurCodeData = res.data.data.records
                })
            },
            // 目的地
            destinationBportsListfun(enName){
                bportsList(1,10,{enName}).then(res=>{
                    this.destinationData = res.data.data.records
                })
            },
            // 卸货港
            podBportsListfun(enName){
                bportsList(1,10,{enName}).then(res=>{
                    this.podData = res.data.data.records
                })
            },
            // 装货港
            polBportsListfun(enName){
                bportsList(1,10,{enName}).then(res=>{
                    this.polData = res.data.data.records
                })
            },
            // 发票类型字典数据
            invTypeWorkDictsfun(){
                getWorkDicts('inv_type_los').then(res=>{
                    this.invTypeData = res.data.data;
                })
            },
            invoicingWorkDictsfun(){
                getWorkDicts('Invoice_information_los').then(res=>{
                    this.invoicingData = res.data.data;
                })
            },

        },
    }
</script>

<style scoped>
::v-deep.el-form-item {
    margin-bottom: 0;
}
.cardBox {
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.flexBox {
    display: flex;
}
.flexBoxLeft {
    flex: 2;
    margin-right: 10px;
    //padding-bottom: 40px;
}
.flexBoxRight {
    flex: 3;
    //padding-bottom: 40px;
}
</style>