tire-platform-ui/src/views/iosBasicData/reportClose/SEreportClose/bgdetails.vue

<template>
    <div class="borderless" v-loading="pageLoading">
        <div class="customer-head">
            <div class="customer-back">
                <el-button type="danger" style="border: none;background: none;color: red"
                           icon="el-icon-arrow-left"
                           @click="backToList">返回列表
                </el-button>
            </div>
            <div class="add-customer-btn">
                <el-button size="small" style="margin-right: 8px"
                           :loading="saveLoading" :disabled="!form.id" @click="previewreportfun" >预 览
                </el-button>
                <el-button size="small" style="margin-right: 8px" v-if="roleName.indexOf('admin') != -1"
                           :loading="saveLoading" :disabled="!form.id" @click="DesignreportDialog = true" >报表设计
                </el-button>
                <el-button size="small" type="warning" :disabled="!form.id" v-if="form.status == 1"
                           @click.stop="revokeDocumentApproval">撤销单据请核
                </el-button>
                <el-button size="small" type="success" :disabled="!form.id || detailData.seeDisabled"
                           v-if="form.status == 0 || form.status == 4"
                           @click.stop="DocumentApproval">单据请核
                </el-button>
                <el-button  size="small" type="primary" style="margin-right: 8px"
                            :loading="saveLoading" @click="savefun">保 存
                </el-button>
            </div>
        </div>

        <div style="margin-top: 65px">
            <el-tabs type="border-card" v-model="bigtabs" @tab-click="bigHandleClick">
                <el-tab-pane label="委托信息" name="wt">
                    <el-form :model="form" ref="form" label-width="90px" class="demo-ruleForm">
                        <basic-container :showBtn="true">
                            <el-row>
                                <el-col :span="4">
                                    <el-form-item label="业务编号" prop="billNo" label-width="70px">
                                        <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="4">
                                    <el-form-item label="接单日期" prop="billDate" label-width="70px">
                                        <el-date-picker v-model="form.billDate" clearable style="width: 100%;"
                                                        type="date" size="small" :disabled="true"
                                                        value-format="yyyy-MM-dd HH:mm:ss"
                                                        placeholder="选择日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="贸易类型" prop="businessType" label-width="70px">
                                        <search-query :datalist="businessTypeData"
                                                      :selectValue="form.businessType"
                                                      :clearable="true"
                                                      :disabled="true"
                                                      :buttonIf="false"
                                                      placeholder="贸易类型"
                                                      :forParameter="{key:'value',label:'label',value:'value'}"
                                                      @corpChange="corpChange($event,'billNo')">
                                        </search-query>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="制单人" prop="createUserName" label-width="70px">
                                        <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="4">
                                    <el-form-item label="源操作" prop="srcOperation" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.srcOperation"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入源操作" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="对账约号" prop="reconciliationAgreementNumber" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.reconciliationAgreementNumber"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入对账约号" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item label="代理公司" prop="agencyCompanytId" label-width="70px">
                                        <el-row type="flex" justify="space-between" :gutter="10">
                                            <el-col :span="8">
                                                <search-query :datalist="agencyCompanytData"
                                                              :selectValue="form.agencyCompanytCnName"
                                                              :filterable="true"
                                                              :clearable="true"
                                                              :remote="true"
                                                              :disabled="detailData.seeDisabled"
                                                              :buttonIf="false"
                                                              :forParameter="{key:'id',label:'cnName',value:'cnName'}"
                                                              placeholder="请选择代理公司"
                                                              @remoteMethod="agencyCompanytBcorpsListfun"
                                                              @corpChange="corpChange($event,'agencyCompanytCnName')"
                                                              @corpFocus="agencyCompanytBcorpsListfun">
                                                </search-query>
                                            </el-col>
                                            <el-col :span="16">
                                                <el-input style="width: 100%;" v-model="form.agencyCompanytCode"
                                                          size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                          clearable placeholder="代理公司" ></el-input>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="提单号:" prop="mblno" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.mblno"
                                                  size="small" autocomplete="off"
                                                  :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入提单号" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="5">
                                    <el-form-item label="业务来源:" prop="srcType" label-width="70px">
                                        <el-row type="flex" justify="space-between" :gutter="10" >
                                            <el-col :span="12">
                                                <search-query :datalist="srcTypeData"
                                                              :selectValue="form.srcType"
                                                              :clearable="true"
                                                              :buttonIf="false"
                                                              :disabled="detailData.seeDisabled"
                                                              placeholder="请选择业务来源"
                                                              :forParameter="{key:'dictKey',label:'dictValue',value:'dictKey'}"
                                                              @remoteMethod="srcTypeWorkDictsfun"
                                                              @corpChange="corpChange($event,'srcType')"
                                                              @corpFocus="srcTypeWorkDictsfun">
                                                </search-query>
                                            </el-col>
                                            <el-col :span="12">
                                                <search-query :datalist="srcData"
                                                              :selectValue="form.srcCnName"
                                                              :filterable="true"
                                                              :clearable="true"
                                                              :remote="true"
                                                              :buttonIf="false"
                                                              :disabled="!form.srcType || detailData.seeDisabled"
                                                              :forParameter="srcForParameter"
                                                              placeholder="请选择详情"
                                                              @remoteMethod="srcfun"
                                                              @corpChange="corpChange($event,'srcCnName')"
                                                              @corpFocus="srcfun">
                                                </search-query>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="5">
                                    <el-form-item label="申报方式:" prop="declarationMethodName" label-width="70px">
                                        <el-row type="flex" justify="space-between" :gutter="10" >
                                            <el-col :span="12">
                                                <search-query :datalist="declarationMethodData"
                                                              :selectValue="form.declarationMethodName"
                                                              :clearable="true"
                                                              :buttonIf="false"
                                                              :disabled="detailData.seeDisabled"
                                                              placeholder="请选择申报方式"
                                                              :forParameter="{key:'dictValue',label:'dictValue',value:'dictValue'}"
                                                              @remoteMethod="declarationMethodWorkDictsfun"
                                                              @corpChange="corpChange($event,'declarationMethodName')"
                                                              @corpFocus="declarationMethodWorkDictsfun">
                                                </search-query>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-input style="width: 100%;" v-model="form.declarationMethodCode"
                                                          size="small" autocomplete="off" :disabled="true"
                                                          clearable placeholder="申报方式" ></el-input>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <el-form-item label="经营单位" prop="agencyCompanytId" label-width="70px">
                                        <el-row type="flex" justify="space-between" :gutter="10">
                                            <el-col :span="8">
                                                <search-query :datalist="corpData"
                                                              :selectValue="form.corpCnName"
                                                              :filterable="true"
                                                              :clearable="true"
                                                              :remote="true"
                                                              :disabled="detailData.seeDisabled"
                                                              :buttonIf="false"
                                                              placeholder="请选择经营单位"
                                                              :forParameter="{key:'id',label:'cnName',value:'cnName'}"
                                                              @remoteMethod="corpBcorpsListfun"
                                                              @corpChange="corpChange($event,'corpCnName')"
                                                              @corpFocus="corpBcorpsListfun">
                                                </search-query>
                                            </el-col>
                                            <el-col :span="16">
                                                <el-input style="width: 100%;" v-model="form.corpEnName"
                                                          size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                          clearable placeholder="经营单位" ></el-input>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item label="企业名称:" prop="enterpriseCnName" label-width="80px">
                                        <search-query :datalist="enterpriseData"
                                                      :selectValue="form.enterpriseCnName"
                                                      :filterable="true"
                                                      :clearable="true"
                                                      :remote="true"
                                                      :buttonIf="false"
                                                      :disabled="detailData.seeDisabled"
                                                      placeholder="请选择企业名称"
                                                      :forParameter="{key:'id',label:'cnName',value:'cnName'}"
                                                      @remoteMethod="enterpriseCnNameBcorpsListfun"
                                                      @corpChange="corpChange($event,'enterpriseCnName')"
                                                      @corpFocus="enterpriseCnNameBcorpsListfun">
                                        </search-query>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="7">
                                    <el-form-item label="企业海关编码:" prop="billNo" label-width="100px">
                                        <el-input style="width: 100%;" v-model="form.enterpriseCode"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入企业海关编码" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="订舱号" prop="bookingNo" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.bookingNo"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入订舱号" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="船名" prop="vesselEnName" label-width="70px">
                                        <search-query :datalist="vesselData"
                                                      :selectValue="form.vesselEnName"
                                                      :filterable="true"
                                                      :clearable="true"
                                                      :remote="true"
                                                      :buttonIf="false"
                                                      :disabled="detailData.seeDisabled"
                                                      placeholder="请选择船名"
                                                      :forParameter="{key:'id',label:'enName',value:'enName'}"
                                                      @remoteMethod="vesselBvesselsListfun"
                                                      @corpChange="corpChange($event,'vessel')"
                                                      @corpFocus="vesselBvesselsListfun" >
                                        </search-query>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="三检单号" prop="tripleInspectionNumber" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.tripleInspectionNumber"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入三检单号" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="报检日期" prop="inspectionDeclarationDate" label-width="70px">
                                        <el-date-picker v-model="form.inspectionDeclarationDate" clearable style="width: 100%;"
                                                        type="date" size="small" :disabled="detailData.seeDisabled"
                                                        value-format="yyyy-MM-dd HH:mm:ss"
                                                        placeholder="请选择报检日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="ETD" prop="etdDate" label-width="70px">
                                        <el-date-picker v-model="form.etdDate" clearable style="width: 100%;"
                                                        type="date" size="small" :disabled="detailData.seeDisabled"
                                                        value-format="yyyy-MM-dd HH:mm:ss"
                                                        placeholder="请选择ETD日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="发票号码" prop="invoiceNumber" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.invoiceNumber"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入发票号码" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="贸易方式:" prop="tradeMethodName" label-width="70px">
                                        <el-row type="flex" justify="space-between" :gutter="10">
                                            <el-col :span="12">
                                                <search-query :datalist="tradeMethodData"
                                                              :selectValue="form.tradeMethodName"
                                                              :filterable="true"
                                                              :clearable="true"
                                                              :remote="true"
                                                              :buttonIf="false"
                                                              :disabled="detailData.seeDisabled"
                                                              placeholder="请选择贸易方式"
                                                              :forParameter="{key:'id',label:'cnName',value:'cnName'}"
                                                              @remoteMethod="tradeMethodBtrademodesListfun"
                                                              @corpChange="corpChange($event,'tradeMethodName')"
                                                              @corpFocus="tradeMethodBtrademodesListfun">
                                                </search-query>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-input style="width: 100%;" v-model="form.tradeMethodCode"
                                                          size="small" autocomplete="off" :disabled="true"
                                                          clearable placeholder="贸易方式" ></el-input>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="运抵国(地区):" prop="destinationCountryCnName" label-width="90px">
                                        <search-query :datalist="destinationCountryData"
                                                      :selectValue="form.destinationCountryCnName"
                                                      :filterable="true"
                                                      :clearable="true"
                                                      :remote="true"
                                                      :buttonIf="false"
                                                      :disabled="detailData.seeDisabled"
                                                      placeholder="请选择运抵国"
                                                      :forParameter="{key:'id',label:'cnName',value:'cnName'}"
                                                      @remoteMethod="destinationCountrybcountrysListfun"
                                                      @corpChange="corpChange($event,'destinationCountryCnName')"
                                                      @corpFocus="destinationCountrybcountrysListfun">
                                        </search-query>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="指运港:" prop="portOfDestinationEnName" label-width="70px">
                                        <search-query :datalist="portOfDestinationData"
                                                      :selectValue="form.portOfDestinationEnName"
                                                      :filterable="true"
                                                      :clearable="true"
                                                      :remote="true"
                                                      :buttonIf="false"
                                                      :disabled="detailData.seeDisabled"
                                                      placeholder="请选择指运港"
                                                      :forParameter="{key:'id',label:'enName',value:'enName'}"
                                                      @remoteMethod="portOfDestinationBportsListfun"
                                                      @corpChange="corpChange($event,'portOfDestinationEnName')"
                                                      @corpFocus="portOfDestinationBportsListfun">
                                        </search-query>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="出口口岸:" prop="exportPortEnName" label-width="70px">
                                        <search-query :datalist="exportPortData"
                                                      :selectValue="form.exportPortEnName"
                                                      :filterable="true"
                                                      :clearable="true"
                                                      :remote="true"
                                                      :buttonIf="false"
                                                      :disabled="detailData.seeDisabled"
                                                      placeholder="请选择出口口岸"
                                                      :forParameter="{key:'id',label:'enName',value:'enName'}"
                                                      @remoteMethod="exportPortBportsListfun"
                                                      @corpChange="corpChange($event,'exportPortEnName')"
                                                      @corpFocus="exportPortBportsListfun">
                                        </search-query>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="报关单号:" prop="customsDeclarationNumber" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.customsDeclarationNumber"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入报关单号" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="备案号:" prop="recordNumber" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.recordNumber"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入备案号" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="ReferenceNO" prop="refno" label-width="90px">
                                        <el-input style="width: 100%;" v-model="form.refno"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入Reference NO" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="申报日期:" prop="declareDate" label-width="70px">
                                        <el-date-picker v-model="form.declareDate" clearable style="width: 100%;"
                                                        type="date" size="small" :disabled="detailData.seeDisabled"
                                                        value-format="yyyy-MM-dd HH:mm:ss"
                                                        placeholder="请选择申报日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="预录日期:" prop="preRrecordingDate" label-width="70px">
                                        <el-date-picker v-model="form.preRrecordingDate" clearable style="width: 100%;"
                                                        type="date" size="small" :disabled="detailData.seeDisabled"
                                                        value-format="yyyy-MM-dd HH:mm:ss"
                                                        placeholder="请选择预录日期">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="提运单号:" prop="contractAgreementNumber" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.contractAgreementNumber"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入提运单号" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="发货单位:" prop="deliveryCnName" label-width="70px">
                                        <search-query :datalist="deliveryData"
                                                      :selectValue="form.deliveryCnName"
                                                      :filterable="true"
                                                      :clearable="true"
                                                      :remote="true"
                                                      :disabled="detailData.seeDisabled"
                                                      :buttonIf="false"
                                                      placeholder="请选择发货单位"
                                                      :forParameter="{key:'id',label:'cnName',value:'cnName'}"
                                                      @remoteMethod="deliveryBcorpsListfun"
                                                      @corpChange="corpChange($event,'deliveryCnName')"
                                                      @corpFocus="deliveryBcorpsListfun">
                                        </search-query>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="结汇方式:" prop="exchangeSettlementMethod" label-width="70px">
                                        <search-query :datalist="exchangeSettlementMethodData"
                                                      :selectValue="form.exchangeSettlementMethod"
                                                      :clearable="true"
                                                      :buttonIf="false"
                                                      :disabled="detailData.seeDisabled"
                                                      placeholder="请选择结汇方式"
                                                      :forParameter="{key:'dictValue',label:'dictValue',value:'dictValue'}"
                                                      @remoteMethod="exchangeSettlementMethodWorkDictsfun"
                                                      @corpChange="corpChange($event,'exchangeSettlementMethod')"
                                                      @corpFocus="exchangeSettlementMethodWorkDictsfun">
                                        </search-query>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="成交方式:" prop="dealMethod" label-width="70px">
                                        <search-query :datalist="dealMethodData"
                                                      :selectValue="form.dealMethod"
                                                      :clearable="true"
                                                      :buttonIf="false"
                                                      :disabled="detailData.seeDisabled"
                                                      placeholder="请选择成交方式"
                                                      :forParameter="{key:'dictValue',label:'dictValue',value:'dictValue'}"
                                                      @remoteMethod="dealMethodWorkDictsfun"
                                                      @corpChange="corpChange($event,'dealMethod')"
                                                      @corpFocus="dealMethodWorkDictsfun">
                                        </search-query>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="运费:" prop="amountFreight" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.amountFreight"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入运费" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="保费:" prop="amountPremium" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.amountPremium"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入保费" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="杂费:" prop="amountMiscellaneousExpenses" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.amountMiscellaneousExpenses"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入杂费" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="境内货源地:" prop="domesticSourceOfGoods" label-width="80px">
                                        <el-input style="width: 100%;" v-model="form.domesticSourceOfGoods"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入境内货源地" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="合同协议号:" prop="deliveryNumbers" label-width="80px">
                                        <el-input style="width: 100%;" v-model="form.deliveryNumbers"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入合同协议号" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="件数:" prop="quantity" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.quantity"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入件数" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="包装种类:" prop="packingUnit" label-width="70px">
                                        <search-query :datalist="packingUnitData"
                                                      :selectValue="form.packingUnit"
                                                      :filterable="true"
                                                      :clearable="true"
                                                      :remote="true"
                                                      :buttonIf="false"
                                                      placeholder="请选择包装种类"
                                                      :forParameter="{key:'id',label:'cnName',value:'cnName'}"
                                                      @remoteMethod="packingUnitBunitsListfun"
                                                      @corpChange="corpChange($event,'packingUnit')"
                                                      @corpFocus="packingUnitBunitsListfun">
                                        </search-query>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="毛重:" prop="grossWeight" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.grossWeight"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入毛重" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="净重:" prop="netWeight" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.netWeight"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入净重" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="4">
                                    <el-form-item label="货物金额:" prop="amountGoods" label-width="80px">
                                        <el-input style="width: 100%;" v-model="form.amountGoods"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入货物金额" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="唛码及备注:" prop="marks" label-width="110px">
                                        <el-input style="width: 100%;" v-model="form.marks" type="textarea"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入唛码及备注" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="备注:" prop="remarks" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.remarks" type="textarea"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入备注" ></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="随附单据:" prop="documentsAttached" label-width="70px">
                                        <el-checkbox size="medium" true-label="fp" :false-label="null" :disabled="detailData.seeDisabled" v-model="comprehensiveForm.fp">发票</el-checkbox>
                                        <el-checkbox size="medium" true-label="xd" :false-label="null" :disabled="detailData.seeDisabled" v-model="comprehensiveForm.xd">箱单</el-checkbox>
                                        <el-checkbox size="medium" true-label="ht" :false-label="null" :disabled="detailData.seeDisabled" v-model="comprehensiveForm.ht">合同</el-checkbox>
                                        <el-checkbox size="medium" true-label="sjtgd" :false-label="null" :disabled="detailData.seeDisabled" v-model="comprehensiveForm.sjtgd">商检通过单</el-checkbox>
                                        <el-checkbox size="medium" true-label="xyz" :false-label="null" :disabled="detailData.seeDisabled" v-model="comprehensiveForm.xyz">信用证</el-checkbox>
                                        <el-checkbox size="medium" true-label="hzpz" :false-label="null" :disabled="detailData.seeDisabled" v-model="comprehensiveForm.hzpz">换证凭单</el-checkbox>
                                        <el-checkbox size="medium" true-label="cjd" :false-label="null" :disabled="detailData.seeDisabled" v-model="comprehensiveForm.cjd">厂检单</el-checkbox>
                                        <el-checkbox size="medium" true-label="bzxnjgd" :false-label="null" :disabled="detailData.seeDisabled" v-model="comprehensiveForm.bzxnjgd">包装性能结果单</el-checkbox>
                                        <el-checkbox size="medium" true-label="xkz" :false-label="null" :disabled="detailData.seeDisabled" v-model="comprehensiveForm.xkz">许可证</el-checkbox>
                                        <el-checkbox size="medium" true-label="wtdj" :false-label="null" :disabled="detailData.seeDisabled" v-model="comprehensiveForm.wtdj">委托单据</el-checkbox>
                                    </el-form-item>
                                    <el-form-item label="其他:" prop="documentsAttachedOther" label-width="70px">
                                        <el-input style="width: 100%;" v-model="form.documentsAttachedOther"
                                                  size="small" autocomplete="off" :disabled="detailData.seeDisabled"
                                                  clearable placeholder="请输入其他" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </basic-container>
                    </el-form>
                    <basic-container>
                        <table-details :tableData="form.customsDeclarationGoodsList" :form="form" :roleName="roleName"
                                       :disabled="detailData.seeDisabled"
                                       @billsDetailfun="customsdeclarationDetailfun(this.form.id)" ></table-details>
                    </basic-container>
                </el-tab-pane>
                <el-tab-pane label="费用信息" name="fy"
                             v-if="roleName.indexOf('admin') != -1?true:roleName.indexOf('应收修改') != -1 || roleName.indexOf('应付修改') != -1 || roleName.indexOf('应收查看') != -1 || roleName.indexOf('应付查看') != -1" >
                    <feecenter :assemblyForm="form" :detailData="detailData"
                               :pleasereviewType="pleasereviewType" :pid="form.id"
                               @billsDetailfun="customsdeclarationDetailfun(form.id)"></feecenter>
                </el-tab-pane>
            </el-tabs>
        </div>

        <!--设计报表弹窗-->
        <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="BGSE" classifyCode="BGSE" ></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 {getBcorpslistByType} from "@/api/iosBasicData/bcorps";
    import {getWorkDicts} from "@/api/system/dictbiz";
    import {getList as userGetList} from '@/api/system/user'
    import {getDeptLazyTree} from "@/api/system/dept";
    import {getBvesselsList} from "@/api/iosBasicData/bvessels";
    import TableDetails from "./assembly/TableDetails.vue";
    import feecenter from "./assembly/feecenter.vue";
    import {getBtrademodesList} from "@/api/iosBasicData/btrademodes";
    import {bcountrysList} from "@/api/iosBasicData/bcountrys";
    import {bportsList} from "@/api/iosBasicData/bports";
    import {
        checkCustomsDeclaration, copyCustomsDeclaration,
        customsdeclarationDetail,
        customsdeclarationSubmit, revokeCheckCustomsDeclaration
    } from "@/api/iosBasicData/customsdeclaration";
    import {popupReminder} from "@/util/messageReminder";
    import {getBunitsList} from "@/api/iosBasicData/bunits";
    import reports from "@/views/iosBasicData/SeafreightExportF/bills/assembly/reports.vue";
    import {reportsGetReportData} from "@/api/iosBasicData/reports";
    import {getList as getreportsList} from "@/api/iosBasicData/reports";
    import reportContainer from "@/views/iosBasicData/report-container/report-container.vue";
    import reportformsList from "@/views/iosBasicData/SeafreightExportF/bills/assembly/reportformsList.vue";

    export default {
        components: {reportformsList, reportContainer, reports, feecenter, SearchQuery,TableDetails},
        props:{
            detailData:{
                type:Object,
                default:{},
            }
        },
        data(){
            return {
                DesignreportDialog:false, // 报表设计弹窗
                selectPrintingDialog:false, // 预览弹窗
                pageLoading:false, // 动画加载
                saveLoading:false, // 按钮动画加载
                roleName:[], // 当前的角色权限
                saberUserInfo:[], // 当前登录人的数据
                // 绑定的数据
                form:{
                    businessType:'BGSE',
                    createUser:'', // 制单人id
                    createUserName:'', // 制单人名称
                    customsDeclarationGoodsList:[],
                    feeCenterListD:[],
                    feeCenterListC:[],
                },
                bigtabs:'wt', // tabs切换
                corpData:[], // 经营单位数据
                agencyCompanytData:[], // 代理公司数据
                businessTypeData:[
                    {
                        label:'海运出口报关',
                        value:'BGSE'
                    },
                    {
                        label:'海运进口报关',
                        value:'BGSI'
                    },
                    {
                        label:'空运出口报关',
                        value:'BGAE'
                    },
                    {
                        label:'空运进口报关',
                        value:'BGAI'
                    }
                ], // 贸易类型
                srcTypeData:[], // 业务来源数据
                srcData:[], // 来源详情数据
                srcForParameter:{ key:'id', label:'title', value:'title'}, // 来源详情配置项数据
                declarationMethodData:[], // 申报方式字典数据
                enterpriseData:[], // 企业数据
                vesselData:[], // 船名数据
                tradeMethodData:[], // 贸易条款数据
                destinationCountryData:[], // 运抵国数据
                portOfDestinationData:[], // 指运港
                dealMethodData:[], // 成交方式
                exportPortData:[], // 出口口岸
                deliveryData:[], // 发货单位
                exchangeSettlementMethodData:[], // 结汇方式
                packingUnitData:[], // 包装种类
                comprehensiveForm:{}, // 多选集合
                pleasereviewType:false, // 请核之后禁用
                // 需要加判断是否必填的数据
                messageData:[
                    {
                        name:'经营单位',
                        value:'corpCnName',
                    },
                    {
                        name:'业务来源',
                        value:'srcType',
                    },
                    {
                        name:'提单号',
                        value:'mblno',
                    },
                    {
                        name:'报关单号',
                        value:'customsDeclarationNumber',
                    },
                    {
                        name:'ETD',
                        value:'etdDate',
                    },
                    {
                        name:'申报日期',
                        value:'declareDate',
                    },
                    {
                        name:'运抵国',
                        value:'destinationCountryCnName',
                    },
                    {
                        name:'指运港',
                        value:'portOfDestinationEnName',
                    },
                    {
                        name:'船名',
                        value:'vesselEnName',
                    },
                    {
                        name:'件数',
                        value:'quantity',
                    }
                ],
            }
        },
        created() {
            this.roleName =  localStorage.getItem('roleName').split(',')
            // 获取当前登录人个人信息
            this.saberUserInfo = JSON.parse(localStorage.getItem('saber-userInfo')).content
            this.form.createUser = this.saberUserInfo.user_id
            this.form.createUserName = this.saberUserInfo.user_name
            this.srcTypeWorkDictsfun() // 业务来源
        },
        methods:{
            // 报表预览
            previewreportfun(){
                getreportsList(1,10,{
                    businessType:'BGSE',
                    classifyCode:'BGSE',
                    groupCode:'SE'
                }).then(res=>{
                    if (res.data.data.records.length == 1) {
                        this.reportRadio(res.data.data.records[0])
                    }else {
                        this.saveLoading = true
                        this.selectPrintingDialog = true
                        this.saveLoading = false
                        let page = {
                            pageSize: 10,
                            currentPage: 1,
                            total: 0
                        }
                        this.$nextTick(()=>{
                            this.$refs.reportformsList.onLoad(page,{
                                businessType:'BGSE',
                                classifyCode:'BGSE',
                                groupCode:'SE'
                            })
                        })
                    }
                })
            },
            // 预览里的打印
            reportRadio(val){
                // 获取报表数据
                reportsGetReportData({
                    billId:this.form.id,
                    reportCode:val.classifyCode,
                    groupCode:val.groupCode,
                    type:'BGSE'
                }).then(res=>{
                    this.handleReportPreview(val.url,res.data.data.data)
                })
            },
            // 单据请核
            DocumentApproval(){
                if (popupReminder(this.form,this.messageData)){
                    this.$confirm(popupReminder(this.form,this.messageData), {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                }
                if (popupReminder(this.form,this.messageData)) {
                    return;
                }
                if (this.form.feeCenterListC.length == 0 && this.form.feeCenterListD == 0) {
                    return this.$message.warning('请添加费用信息')
                }
                this.$confirm("确定要请核数据?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(()=>{
                    this.pageLoading = true
                    checkCustomsDeclaration({
                        id:this.form.id,
                        url: '/iosBasicData/reportClose/SEreportClose/index',
                        pageStatus: "this.$store.getters.SEreportClose",
                        pageLabel: "海运出口报关",
                    }).then(res=>{
                        this.pageLoading = false
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                        // 详情
                        this.customsdeclarationDetailfun(this.form.id)
                    })
                })
            },
            // 撤销请核
            revokeDocumentApproval(){
                this.$confirm("确定要撤销请核数据?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(()=>{
                    this.pageLoading = true
                    revokeCheckCustomsDeclaration({
                        id:this.form.id
                    }).then(res=>{
                        this.pageLoading = false
                        this.$message({
                            type: "success",
                            message: "操作成功!"
                        });
                        // 详情
                        this.customsdeclarationDetailfun(this.form.id)
                    })
                })
            },
            // 大保存
            savefun(){
                // 经营单位
                if (!this.form.corpId) {
                    return this.$message.warning('请填写经营单位！')
                }
                let multiArr = []
                for (let i in this.comprehensiveForm) {
                    if (this.comprehensiveForm[i]) {
                        multiArr.push(this.comprehensiveForm[i])
                    }
                }
                // 多选集合转换成字符串赋值
                this.form.documentsAttached = multiArr.join(',')
                this.form.customsDeclarationGoodsList.map((item,index)=>{
                    item.sort = Number(index) + 1
                    item.pid = this.form.id
                })
                this.form.feeCenterListD.map((row,index)=>{
                    row.dc = 'D'
                    row.sort = Number(index) + 1
                    row.businessType = this.form.businessType // 业务类型
                    row.billNo = this.form.billNo // 单据编号
                    row.billDate = this.form.billDate
                    row.billCorpId = this.form.corpId // 主表客户 id
                    row.billCorpCnName = this.form.corpCnName // 主表客户中文名称
                    row.billCorpEnName = this.form.corpEnName // 主表客户英文名称
                    row.vesselId = this.form.vesselId // 船名 id
                    row.vesselCnName = this.form.vesselCnName // 中文船名
                    row.vesselEnName = this.form.vesselEnName // 英文船名
                    row.mblno = this.form.mblno // MB/L NO
                    row.etd = this.form.etdDate // 开船日期
                    // 数量 * 单价 = 净额
                    // 总税率 = 税率 + 附件税率
                    // 税额 = 净额 * 总税率
                    // 含税
                    if (row.curCode == 'CNY') {
                        row.amount = row.rmbAmount?row.rmbAmount:(Number(row.quantity) * Number(row.price)).toFixed(2)
                    }else {
                        row.amount = row.usdAmount?row.usdAmount:(Number(row.quantity) * Number(row.price)).toFixed(2)
                    }
                    // 净额
                    if (row.curCode == 'CNY') {
                        row.amountNet = row.rmbAmountNet?row.rmbAmountNet:(Number(row.quantity) * Number(row.price)).toFixed(2)
                    }else {
                        row.amountNet = row.usdAmountNet?row.usdAmountNet:(Number(row.quantity) * Number(row.price)).toFixed(2)
                    }
                })
                this.form.feeCenterListC.map((row,index)=>{
                    row.dc = 'C'
                    row.sort = Number(index) + 1
                    row.businessType = this.form.businessType // 业务类型
                    row.billNo = this.form.billNo // 单据编号
                    row.billDate = this.form.billDate
                    row.billCorpId = this.form.corpId // 主表客户 id
                    row.billCorpCnName = this.form.corpCnName // 主表客户中文名称
                    row.billCorpEnName = this.form.corpEnName // 主表客户英文名称
                    row.vesselId = this.form.vesselId // 船名 id
                    row.vesselCnName = this.form.vesselCnName // 中文船名
                    row.vesselEnName = this.form.vesselEnName // 英文船名
                    row.mblno = this.form.mblno // MB/L NO
                    row.etd = this.form.etdDate // 开船日期
                    // 数量 * 单价 = 净额
                    // 总税率 = 税率 + 附件税率
                    // 税额 = 净额 * 总税率
                    // 含税
                    if (row.curCode == 'CNY') {
                        row.amount = row.rmbAmount?row.rmbAmount:(Number(row.quantity) * Number(row.price)).toFixed(2)
                    }else {
                        row.amount = row.usdAmount?row.usdAmount:(Number(row.quantity) * Number(row.price)).toFixed(2)
                    }
                    // 净额
                    if (row.curCode == 'CNY') {
                        row.amountNet = row.rmbAmountNet?row.rmbAmountNet:(Number(row.quantity) * Number(row.price)).toFixed(2)
                    }else {
                        row.amountNet = row.usdAmountNet?row.usdAmountNet:(Number(row.quantity) * Number(row.price)).toFixed(2)
                    }
                })
                this.customsdeclarationSubmitfun()
            },
            // 保存接口
            customsdeclarationSubmitfun(){
                this.form.billNoFormat = 'BG-HYCK'
                this.form.businessTypeCode = 'BGSE'
                this.pageLoading = true
                customsdeclarationSubmit(this.form).then(res=>{
                    this.pageLoading = false
                    this.$message.success('操作成功！')
                    this.customsdeclarationDetailfun(res.data.data.id)
                })
            },
            // 复制单据
            copyCustomsDeclarationfun(id){
                copyCustomsDeclaration({id}).then(res=>{
                    this.form = res.data.data;
                    this.pageLoading = false
                    // 处理多选数据
                    for (let item of this.form.documentsAttached.split(',')) {
                        this.$set(this.comprehensiveForm,item,item)
                    }
                    // 处理明细数据
                    this.form.customsDeclarationGoodsList = []
                    // 应收
                    for(let item of this.form.feeCenterListD) {
                        if (item.curCode == 'CNY') {
                            this.$set(item,'rmbAmount',item.amount)
                            this.$set(item,'usdAmount','')
                            this.$set(item,'rmbAmountNet',item.amountNet)
                            this.$set(item,'usdAmountNet','')
                        }else {
                            this.$set(item,'usdAmount',item.amount)
                            this.$set(item,'rmbAmount','')
                            this.$set(item,'usdAmountNet',item.amountNet)
                            this.$set(item,'rmbAmountNet','')
                        }
                        item.edit = false
                    }
                    // 应付
                    for(let item of this.form.feeCenterListC) {
                        if (item.curCode == 'CNY') {
                            this.$set(item,'rmbAmount',item.amount)
                            this.$set(item,'usdAmount','')
                            this.$set(item,'rmbAmountNet',item.amountNet)
                            this.$set(item,'usdAmountNet','')
                        }else {
                            this.$set(item,'usdAmount',item.amount)
                            this.$set(item,'rmbAmount','')
                            this.$set(item,'usdAmountNet',item.amountNet)
                            this.$set(item,'rmbAmountNet','')
                        }
                        item.edit = false
                    }
                })
            },
            // 详情
            customsdeclarationDetailfun(id){
                customsdeclarationDetail(id).then(res=>{
                    this.pageLoading = false
                    this.form = res.data.data
                    if (this.form.status == 1 || this.form.status == 2 || this.form.status == 3) {
                        this.pleasereviewType = true // 请核禁用

                        this.detailData.seeDisabled = true
                    }else {
                        this.pleasereviewType = false
                        this.detailData.seeDisabled = false
                    }
                    // 处理多选数据
                    for (let item of this.form.documentsAttached.split(',')) {
                        this.$set(this.comprehensiveForm,item,item)
                    }
                    // 处理费用数据
                    for(let item of this.form.feeCenterListD) {
                        if (item.curCode == 'CNY') {
                            this.$set(item,'rmbAmount',item.amount)
                            this.$set(item,'usdAmount','')
                            this.$set(item,'rmbAmountNet',item.amountNet)
                            this.$set(item,'usdAmountNet','')
                        }else {
                            this.$set(item,'usdAmount',item.amount)
                            this.$set(item,'rmbAmount','')
                            this.$set(item,'usdAmountNet',item.amountNet)
                            this.$set(item,'rmbAmountNet','')
                        }
                        item.edit = false
                    }
                    for(let item of this.form.feeCenterListC) {
                        if (item.curCode == 'CNY') {
                            this.$set(item,'rmbAmount',item.amount)
                            this.$set(item,'usdAmount','')
                            this.$set(item,'rmbAmountNet',item.amountNet)
                            this.$set(item,'usdAmountNet','')
                        }else {
                            this.$set(item,'usdAmount',item.amount)
                            this.$set(item,'rmbAmount','')
                            this.$set(item,'usdAmountNet',item.amountNet)
                            this.$set(item,'rmbAmountNet','')
                        }
                        item.edit = false
                    }
                    // 处理明细数据
                    for (let item of this.form.customsDeclarationGoodsList) {
                        item.edit = false
                    }

                })
            },
            // 下拉回调
            corpChange(value,name){
                // 经营单位
                if (name == 'corpCnName') {
                    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)
                        }
                    }
                }
                // 代理公司
                else if(name == 'agencyCompanytCnName') {
                    for (let item of this.agencyCompanytData) {
                        if (item.cnName == value) {
                            this.$set(this.form,'agencyCompanytId',item.id)
                            this.$set(this.form,'agencyCompanytCode',item.code)
                            this.$set(this.form,'agencyCompanytCnName',item.cnName)
                            this.$set(this.form,'agencyCompanytEnName',item.enName)
                        }
                    }
                }
                // 来源详情
                else if (name == 'srcCnName') {
                    for(let item of this.srcData) {
                        if (item[this.srcForParameter.value] == value) {
                            if (this.form.srcType == 'SALES') {
                                // 业务员
                                this.$set(this.form,'srcId',item.id)
                                this.$set(this.form,'srcCnName',item.name)
                                this.$set(this.form,'srcEnName',item.name)
                            }else if (this.form.srcType == 'AGENT') {
                                // 代理
                                this.$set(this.form,'srcId',item.id)
                                this.$set(this.form,'srcCnName',item.cnName)
                                this.$set(this.form,'srcEnName',item.enName)
                            }else if (this.form.srcType == 'OWN') {
                                // 公司
                                this.$set(this.form,'srcId',item.id)
                                this.$set(this.form,'srcCnName',item.title)
                                this.$set(this.form,'srcEnName',item.title)
                            }else {}
                        }
                    }
                }
                // 申报方式
                else if (name == 'declarationMethodName') {
                    for(let item of this.declarationMethodData) {
                        if (item.dictValue == value) {
                            this.$set(this.form,'declarationMethodCode',item.dictKey)
                            this.$set(this.form,'declarationMethodName',item.dictValue)
                        }
                    }
                }
                // 企业
                else if(name == 'enterpriseCnName') {
                    for (let item of this.enterpriseData) {
                        if (item.cnName == value) {
                            this.$set(this.form,'enterpriseId',item.id)
                            this.$set(this.form,'enterpriseCode',item.code)
                            this.$set(this.form,'enterpriseCnName',item.cnName)
                            this.$set(this.form,'enterpriseEnName',item.enName)
                        }
                    }
                }
                // 船名
                else if (name == 'vessel') {
                    for(let item of this.vesselData) {
                        if (item.enName == value) {
                            this.$set(this.form,'vesselId',item.id)
                            this.$set(this.form,'vesselCnName',item.cnName)
                            this.$set(this.form,'vesselEnName',item.enName)
                        }
                    }
                }
                // 贸易条款
                else if (name == 'tradeMethodName') {
                    for (let item of this.tradeMethodData) {
                        if (item.cnName == value) {
                            this.$set(this.form,'tradeMethodId',item.id)
                            this.$set(this.form,'tradeMethodCode',item.code)
                            this.$set(this.form,'tradeMethodName',item.cnName)
                        }
                    }
                }
                // 运抵国
                else if (name == 'destinationCountryCnName') {
                    for (let item of this.destinationCountryData) {
                        if (item.cnName == value) {
                            this.$set(this.form,'destinationCountryId',item.id)
                            this.$set(this.form,'destinationCountryCnName',item.cnName)
                            this.$set(this.form,'destinationCountryEnName',item.cnName)
                        }
                    }
                }
                // 指运港
                else if (name == 'portOfDestinationEnName') {
                    for (let item of this.portOfDestinationData) {
                        if (item.enName == value) {
                            this.$set(this.form,'portOfDestinationId',item.id)
                            this.$set(this.form,'portOfDestinationCnName',item.cnName)
                            this.$set(this.form,'portOfDestinationEnName',item.enName)
                        }
                    }
                }
                // 出口口岸
                else if (name == 'exportPortEnName') {
                    for (let item of this.exportPortData) {
                        if (item.enName == value) {
                            this.$set(this.form,'exportPortId',item.id)
                            this.$set(this.form,'exportPortCnName',item.cnName)
                            this.$set(this.form,'exportPortEnName',item.enName)
                        }
                    }
                }
                // 发货单位
                else if (name == 'deliveryCnName') {
                    for (let item of this.deliveryData) {
                        if (item.cnName == value) {
                            this.$set(this.form,'deliveryId',item.id)
                            this.$set(this.form,'deliveryCnName',item.cnName)
                            this.$set(this.form,'deliveryEnName',item.enName)
                        }
                    }
                }
                // 包装种类
                else if (name == 'packingUnit') {
                    for (let item of this.packingUnitData) {
                        if (item.cnName == value) {
                            this.$set(this.form,'packingUnitId',item.id)
                            this.$set(this.form,'packingUnit',item.cnName)
                        }
                    }
                }
                else {
                    this.$set(this.form,name,value)
                }
            },
            // 业务来源搜索和聚焦
            srcfun(value){
                if (this.form.srcType == 'SALES') {
                    // 业务员
                    this.srcForParameter = { key:'id', label:'name', value:'name'}
                    this.salesUserGetListfun(value)
                }else if (this.form.srcType == 'AGENT') {
                    // 代理
                    this.srcForParameter = { key:'id', label:'cnName', value:'cnName'}
                    this.agentBcorpsListfun(value)
                }else if (this.form.srcType == 'OWN') {
                    // 公司
                    this.srcForParameter = { key:'id', label:'title', value:'title'}
                    this.ownDeptLazyTreefun()
                }else {}
            },
            // 接口数据获取🥲🥲🥲🥲🥲🥲🥲🥲🥲🥲
            // 经营单位
            corpBcorpsListfun(cnName){
                getBcorpslistByType(1,10,{cnName}).then(res=>{
                    this.corpData = res.data.data.records
                })
            },
            // 获取代理公司数据
            agencyCompanytBcorpsListfun(cnName){
                let corpType = '1712285382575398914,1712285645314990082,1712285842321448962,1712286433378574338'
                getBcorpslistByType(1,10,{cnName,corpType}).then(res=>{
                    this.agencyCompanytData = res.data.data.records
                })
            },
            // 获取业务来源数据
            srcTypeWorkDictsfun(){
                getWorkDicts('src_type_los').then(res=>{
                    this.srcTypeData = res.data.data
                })
            },
            // 获取业务来源代理数据
            agentBcorpsListfun(cnName){
                let corpType = '1712285382575398914,1712285645314990082,1712285842321448962,1712286433378574338'
                getBcorpslistByType(1,10,{cnName,corpType}).then(res=>{
                    this.srcData = res.data.data.records
                })
            },
            // 获取业务来源业务员数据
            salesUserGetListfun(account){
                userGetList(1,10,{account}).then(res=>{
                    this.srcData = res.data.data.records
                })
            },
            // 获取公司名称 用户管理左侧
            ownDeptLazyTreefun(){
                getDeptLazyTree(0).then(res=>{
                    this.srcData = res.data.data
                })
            },
            // 申报方式字典数据
            declarationMethodWorkDictsfun(){
                getWorkDicts('declaration_method_los').then(res=>{
                    this.declarationMethodData = res.data.data
                })
            },
            // 获取企业数据
            enterpriseCnNameBcorpsListfun(cnName){
                let corpType = '1752603229734072321'
                getBcorpslistByType(1,10,{cnName,corpType}).then(res=>{
                    this.enterpriseData = res.data.data.records
                })
            },
            // 船名
            vesselBvesselsListfun(cnName){
                getBvesselsList(1,10,{cnName}).then(res=>{
                    this.vesselData = res.data.data.records
                })
            },
            // 贸易条款
            tradeMethodBtrademodesListfun(cnName){
                getBtrademodesList(1,10,{cnName}).then(res=>{
                    this.tradeMethodData = res.data.data.records
                })
            },
            // 运抵国
            destinationCountrybcountrysListfun(cnName){
                bcountrysList(1,10,{cnName}).then(res=>{
                    this.destinationCountryData = res.data.data.records
                })
            },
            // 指运港
            portOfDestinationBportsListfun(enName){
                bportsList(1,10,{enName}).then(res=>{
                    this.portOfDestinationData = res.data.data.records
                })
            },
            // 成交方式
            dealMethodWorkDictsfun(){
                getWorkDicts('transaction_method_los').then(res=>{
                    this.dealMethodData = res.data.data
                })
            },
            // 出口口岸
            exportPortBportsListfun(enName){
                bportsList(1,10,{enName}).then(res=>{
                    this.exportPortData = res.data.data.records
                })
            },
            // 发货单位
            deliveryBcorpsListfun(cnName){
                getBcorpslistByType(1,10,{cnName}).then(res=>{
                    this.deliveryData = res.data.data.records
                })
            },
            // 结汇方式
            exchangeSettlementMethodWorkDictsfun(){
                getWorkDicts('settlement_exchange_los').then(res=>{
                    this.exchangeSettlementMethodData = res.data.data
                })
            },
            // 包装种类
            packingUnitBunitsListfun(cnName){
                getBunitsList(1,10,{cnName}).then(res=>{
                    this.packingUnitData = res.data.data.records
                })
            },
            // 预览报表
            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()
                // }

            },
            //返回列表
            backToList() {
                this.$emit('goBack')
            },
        }
    }
</script>

<style scoped>
.borderless {
    height: 100%;
    box-sizing: border-box
}
.demo-ruleForm {
    font-size: 14px;
}
::v-deep.el-form-item {
    margin-bottom: 0;
}
</style>