oa-system/src/components/statistics/Reportstbale.vue

<template>
    <div v-loading.fullscreen.lock="fullscreenLoading">
        
        <transition>
            <div class="gotop-index" v-show="btnFlag">
              <a href="javascript:;" class="gotop-a" @click="backTop"></a>
            </div>
        </transition>
        <div class="reportsbale-all">
            <!-- <WorldMap style="width: 100%;height:600px;" id="WorldMap"  ref="WorldMap" :chartData="worldChartData"></WorldMap> -->
            <!-- <world-chart :id="WorldMap"  ref="WorldMap" :chartData="worldChartData"/> -->
            <div class="reportsbale-info">
                <div style="display: flex;">
                    <div class="reportsbale-info-li">
                        <label>团 号：</label>
                        <span v-if="this.groupInfo.tourCode!=''">{{groupInfo=={}?'暂无':groupInfo.tourCode==""?'暂无':groupInfo.tourCode}}</span>
                    </div>
                    <div class="reportsbale-info-li">
                        <label>团组名：</label>
                        <span v-if="this.groupInfo.teamName!=''">{{groupInfo=={}?'暂无':groupInfo.teamName==""?'暂无':groupInfo.teamName}}</span>
                    </div>
                    <div class="reportsbale-info-li">
                        <label>客 户：</label>
                        <span>{{groupInfo=={}?'暂无':groupInfo.clientName==""?'暂无':groupInfo.clientName}}</span>
                    </div>
                    <div class="reportsbale-info-li">
                        <label>出访国家：</label>
                        <span>{{groupInfo=={}?'暂无':groupInfo.visitCountry==""?'暂无':groupInfo.visitCountry}}</span>
                    </div>
                    <div class="reportsbale-info-li">
                        <label>起止日期：</label>
                        <span>{{groupInfo.visitStartDate|filter_time}}~{{groupInfo.visitEndDate|filter_time}}</span>
                    </div>
                    <div class="reportsbale-info-li">
                        <label>天数/人数：</label>
                        <span>{{groupInfo=={}?'暂无':groupInfo.visitDays+'天/'+groupInfo.visitPNumber+'人'}}</span>
                    </div>
                </div>
                <div>
                    <el-button size="mini" type="primary" @click="goback()">返 回</el-button>
                </div>
            </div>
            <div v-html="feeTotalStr" class="zctitle"></div>
            <div class="reportsbale-table">
                <div class="reportsbale-table-biaoti">
                    <div>团组收入</div>
                </div>
                <div class="reportsbale-table-li">
                    <el-table
                    :data="receivables"
                    border
                    style="width: 100%;">
                        <el-table-column
                        label="应收报表"
                        width="180">
                            <el-table-column
                            prop="priceName"
                            label="费用名称">
                            </el-table-column>
                            <el-table-column
                            label="单价"
                            width="180">
                                <template slot-scope="scope">
                                    {{ scope.row.price.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="count"
                            label="数量"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="unit"
                            label="单位"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="currencyCode"
                            label="币种"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            label="汇率"
                            width="180">
                                <template slot-scope="scope">
                                    {{ scope.row.rate.toFixed(4)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="应收金额"
                            width="180">
                                <template slot-scope="scope">
                                    {{ scope.row.itemSumPrice.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="statusStr"
                            label="审核状态"
                            width="80">
                            </el-table-column>
                            <el-table-column
                            prop="auditorStr"
                            label="审核人"
                            width="80">
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="reportsbale-table-li">
                    <el-table
                    :data="proceedsReceivedViews"
                    border
                    style="width: 100%;">
                        <el-table-column
                        label="已收报表">
                            <el-table-column
                            prop="sectionTime"
                            label="到款时间"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            label="金额"
                            width="180">
                                <template slot-scope="scope">
                                    {{ scope.row.price.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="currencyCode"
                            label="币种"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="client"
                            label="付款单位">
                            </el-table-column>
                            <el-table-column
                            prop="receivablesTypeName"
                            label="收款类型"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="remark"
                            label="备注"
                            width="300">
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                    <div v-html="proceedsReceivedStr.split(/\\r\\n/g).join('<br/>')" class="reportsbale-table-text"></div>
                </div>
                <!-- <div class="reportsbale-table-li">
                    <el-table
                    :data="extraCostsViews"
                    border
                    style="width: 100%;">
                        <el-table-column
                        label="超支费用">
                            <el-table-column
                            prop="priceName"
                            label="费用名称">
                            </el-table-column>
                            <el-table-column
                            prop="paymentCurrency"
                            label="币种"
                            width="100">
                            </el-table-column>
                            <el-table-column
                            label="费用金额"
                            width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.payMoney.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="人民币"
                            width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.cnyPrice.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="当时汇率"
                            width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.dayRate.toFixed(4)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payee"
                            label="收款方"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="orbitalPrivateTransfer"
                            label="费用标识"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.orbitalPrivateTransfer==-1?'未选择':scope.row.orbitalPrivateTransfer==0?'公转':'私转' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payWay"
                            label="支付方式"
                            width="80">
                            </el-table-column>
                            <el-table-column
                            prop="cardType"
                            label="卡类型"
                            width="80">
                                <template slot-scope="scope">
                                    {{scope.row.payWay!="刷卡"?'—':scope.row.cardType}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="状态"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.isPay==-1?'未选择':scope.row.isPay==1?'已付款':'未付款' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="applicant"
                            label="申请人"
                            width="80">
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                    <div v-html="extraCostsStr.split(/\\r\\n/g).join('<br/>')" class="reportsbale-table-text"></div>
                </div> -->
                <div class="reportsbale-table-li">
                    <el-table
                    :data="paymentRefundAndOtherMoneyViews"
                    border
                    style="width: 100%;">
                        <el-table-column
                        label="收款退还">
                            <el-table-column
                            prop="priceName"
                            label="费用名称">
                            </el-table-column>
                            <el-table-column
                            prop="payCurrencyCode"
                            label="币种"
                            width="100">
                            </el-table-column>
                            <el-table-column
                            label="费用金额"
                            width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.price.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="人民币"
                            width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.cnyPrice.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="当时汇率"
                            width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.thisRate.toFixed(4)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payee"
                            label="收款方"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="payTime"
                            label="付款时间"
                            width="140">
                            </el-table-column>
                            <el-table-column
                            label="费用标识"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.orbitalPrivateTransfer==-1?'未选择':scope.row.orbitalPrivateTransfer==0?'公转':'私转' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payType"
                            label="支付方式"
                            width="80">
                            </el-table-column>
                            <el-table-column
                            label="状态"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.isPay==-1?'未选择':scope.row.isPay==1?'已付款':'未付款' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="applicant"
                            label="申请人"
                            width="80">
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                    <div v-html="paymentRefundAndOtherMoneyStr.split(/\\r\\n/g).join('<br/>')" class="reportsbale-table-text"></div>
                    <div v-html="groupIncomeStr.split(/\\r\\n/g).join('<br/>')" class="reportsbale-table-text"></div>
                </div>
                <div class="reportsbale-table-biaoti">
                    <div>团组支出</div>
                </div>
                <div class="reportsbale-table-li">
                    <el-table
                    :data="groupHotelFeeViews"
                    style="width: 100%"
                    :row-style="TableRowStyle">
                        <el-table-column
                        label="酒店预订费用">
                            <el-table-column
                            prop="city"
                            label="城市">
                            </el-table-column>
                            <el-table-column
                            prop="hotelName"
                            label="酒店名称">
                            </el-table-column>
                            <el-table-column
                            prop="checkInDate"
                            label="入住时间"
                            width="78">
                            </el-table-column>
                            <el-table-column
                            prop="checkOutDate"
                            label="退房时间"
                            width="78">
                            </el-table-column>
                            <!-- <el-table-column
                            prop="paymentCurrency"
                            label="币种"
                            width="40">
                            </el-table-column> -->
                            <el-table-column label="费用">
                                <el-table-column
                                    label="单间">
                                    <el-table-column
                                    label="单价"
                                    width="60">
                                    <template slot-scope="scope">
                                        {{ scope.row.singleRoomPrice.toFixed(2)}}
                                    </template>
                                    </el-table-column>
                                    <el-table-column
                                    prop="singleRoomCount"
                                    label="数量"
                                    width="35">
                                    </el-table-column>
                                </el-table-column>
                                <el-table-column
                                    label="双间">
                                    <el-table-column
                                    prop="doubleRoomPrice"
                                    label="单价"
                                    width="60">
                                    <template slot-scope="scope">
                                        {{ scope.row.doubleRoomPrice.toFixed(2)}}
                                    </template>
                                    </el-table-column>
                                    <el-table-column
                                    prop="doubleRoomCount"
                                    label="数量"
                                    width="35">
                                    </el-table-column>
                                </el-table-column>
                                <el-table-column
                                    label="套房">
                                    <el-table-column
                                    prop="suiteRoomPrice"
                                    label="单价"
                                    width="60">
                                    <template slot-scope="scope">
                                        {{ scope.row.suiteRoomPrice.toFixed(2)}}
                                    </template>
                                    </el-table-column>
                                    <el-table-column
                                    prop="suiteRoomCount"
                                    label="数量"
                                    width="35">
                                    </el-table-column>
                                </el-table-column>
                                <el-table-column
                                    label="其他房型">
                                    <el-table-column
                                    prop="otherRoomPrice"
                                    label="单价"
                                    width="60">
                                    <template slot-scope="scope">
                                        {{ scope.row.otherRoomPrice.toFixed(2)}}
                                    </template>
                                    </el-table-column>
                                    <el-table-column
                                    prop="otherRoomCount"
                                    label="数量"
                                    width="35">
                                    </el-table-column>
                                </el-table-column>
                                <el-table-column
                                    label="金额计算">
                                    <el-table-column
                                    label="总房费"
                                    width="100">
                                        <template slot-scope="scope">
                                            <el-popover
                                            placement="top"
                                            trigger="hover">
                                                <div v-html="scope.row.roomInfoTips"></div>
                                                <span slot="reference">{{ scope.row.roomPrice.toFixed(2)+' '+scope.row.roomPriceCurrency}}</span>
                                            </el-popover>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                    label="早餐"
                                    width="100">
                                        <template slot-scope="scope">
                                            <el-popover
                                            placement="top"
                                            trigger="hover">
                                                <div v-html="scope.row.breakfastInfoTips"></div>
                                                <span slot="reference">{{ scope.row.breakfastPrice.toFixed(2)+' '+scope.row.breakfastCurrency}}</span>
                                            </el-popover>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                    prop="governmentRent"
                                    label="地税"
                                    width="100">
                                        <template slot-scope="scope">
                                            <el-popover
                                            placement="top"
                                            trigger="hover">
                                                <div v-html="scope.row.governmentRentTips"></div>
                                                <span slot="reference">{{ scope.row.governmentRent.toFixed(2)+' '+scope.row.governmentRentCurrency}}</span>
                                            </el-popover>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                    prop="cityTax"
                                    label="城市税"
                                    width="100">
                                        <template slot-scope="scope">
                                            <el-popover
                                            placement="top"
                                            trigger="hover">
                                                <div v-html="scope.row.cityTaxTips"></div>
                                                <span slot="reference">{{ scope.row.cityTax.toFixed(2)+' '+scope.row.cityTaxCurrency}}</span>
                                            </el-popover>
                                            
                                        </template>
                                    </el-table-column>
                                    <!-- <el-table-column
                                    label="信用卡金额">
                                        <template slot-scope="scope">
                                            {{ scope.row.roomPrice.toFixed(2)+' '+scope.row.roomPriceCurrency}}
                                        </template>
                                    </el-table-column> -->
                                </el-table-column>
                                <el-table-column label="人民币">
                                    <el-table-column
                                    label="总金额">
                                        <template slot-scope="scope">
                                            {{ scope.row.payMoney.toFixed(2)+' '+scope.row.paymentCurrency}}
                                        </template>
                                    </el-table-column>
                                    <!-- <el-table-column
                                    prop="currencyRateStr"
                                    label="当时汇率">
                                    </el-table-column> -->
                                    <!-- <el-table-column
                                    prop="payee"
                                    label="收款方"
                                    width="70">
                                    </el-table-column> -->
                                    <!-- <el-table-column
                                    label="费用标识"
                                    width="40">
                                        <template slot-scope="scope">
                                            {{ scope.row.OrbitalPrivateTransfer==-1?'未选择':scope.row.OrbitalPrivateTransfer==0?'公转':'私转' }}
                                        </template>
                                    </el-table-column> -->
                                    <!-- <el-table-column
                                    prop="payWay" 
                                    label="支付方式"
                                    width="40">
                                    </el-table-column> -->
                                    <!-- <el-table-column
                                    prop="cardType"
                                    label="卡类型"
                                    width="50">
                                        <template slot-scope="scope">
                                            {{ scope.row.cardType=='其他'?'—':scope.row.cardType==''?'—':scope.row.cardType }}
                                        </template>
                                    </el-table-column> -->
                                    <el-table-column
                                    label="状态"
                                    width="50">
                                        <template slot-scope="scope">
                                            <el-popover
                                                placement="top"
                                                trigger="hover">
                                                <div v-html="scope.row.payTips"></div>
                                                    <span slot="reference">{{ scope.row.isPay==-1?'未选择':scope.row.isPay==1?'已付款':scope.row.isPay==2?'其它费用子项未付款':'未付款' }}</span>
                                            </el-popover>
                                        </template>
                                    </el-table-column>
                                    <!-- <el-table-column
                                    label="状态"
                                    width="50">
                                        <template slot-scope="scope">
                                            {{ scope.row.isPay==-1?'未选择':scope.row.isPay==1?'已付款':'未付款' }}
                                        </template>
                                    </el-table-column> -->
                                    <el-table-column
                                    prop="applicant"
                                    label="申请人"
                                    width="50">
                                    </el-table-column>
                                </el-table-column>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                    <div v-html="groupHotelFeeStr.split(/\\r\\n/g).join('<br/>')" class="reportsbale-table-text"></div>
                </div>
                <div class="reportsbale-table-li">
                    <el-table
                    :data="groupCTGGRFeeViews"
                    border
                    style="width: 100%;"
                    :row-style="TableRowStyle">
                        <el-table-column
                        label="地接费用">
                            <el-table-column
                            prop="area"
                            label="地区"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="priceName"
                            label="费用类型"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            label="费用金额"
                            width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.payMoney.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="paymentCurrency"
                            label="币种"
                            width="100">
                            </el-table-column>
                            <el-table-column
                            prop="priceContent"
                            label="费用明细"
                            width="100">
                            </el-table-column>
                            <el-table-column
                            label="付款百分比%"
                            width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.payPercentage+'%'}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="已付金额"
                            width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.amountPaid.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="尾款"
                            width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.balancePayment.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payee"
                            label="收款方">
                            </el-table-column>
                            <el-table-column
                            prop="auditGMDate"
                            label="付款时间"
                            width="140">
                            </el-table-column>
                            <el-table-column
                            label="费用标识"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.orbitalPrivateTransfer==-1?'未选择':scope.row.orbitalPrivateTransfer==0?'公转':'私转' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payWay"
                            label="支付方式"
                            width="80">
                            </el-table-column>
                            <el-table-column
                            label="状态"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.isPay==-1?'未选择':scope.row.isPay==1?'已付款':'未付款' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="applicant"
                            label="申请人"
                            width="80">
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                    <div v-html="groupCTGGRFeeStr.split(/\\r\\n/g).join('<br/>')" class="reportsbale-table-text"></div>
                </div>
                <div class="reportsbale-table-li">
                    <el-table
                    :data="groupAirFeeViews"
                    border
                    style="width: 100%;"
                    :row-style="TableRowStyle">
                        <el-table-column
                        label="机票费用">
                            <el-table-column
                            prop="flightsCode"
                            label="航班号"
                            width="120">
                            </el-table-column>
                            <el-table-column
                            prop="flightsCity"
                            label="城市A-B"
                            width="120">
                            </el-table-column>
                            <el-table-column
                            prop="flightsDate"
                            label="航班日期"
                            width="80">
                            </el-table-column>
                            <el-table-column
                            prop="flightsTime"
                            label="航班时间"
                            width="60">
                            </el-table-column>
                            <el-table-column
                            prop="clientName"
                            label="客人姓名"
                            width="200">
                            </el-table-column>
                            <el-table-column
                            prop="payMoneyCurrency"
                            label="币种"
                            width="50">
                            </el-table-column>
                            <el-table-column
                            label="机票预订费用"
                            width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.payMoney.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="人民币费用"
                            width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.cnyPrice.toFixed(2)+' 当时汇率('+scope.row.dayRate.toFixed(4)+')'}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payee"
                            label="收款方">
                            </el-table-column>
                            <el-table-column
                            prop="auditGMDate"
                            label="付款时间"
                            width="140">
                            </el-table-column>
                            <el-table-column
                            label="费用标识"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.orbitalPrivateTransfer==-1?'未选择':scope.row.orbitalPrivateTransfer==0?'公转':'私转' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payWay"
                            label="支付方式"
                            width="80">
                            </el-table-column>
                            <el-table-column
                            prop="cardType"
                            label="卡类型"
                            width="80">
                                <template slot-scope="scope">
                                    {{scope.row.payWay!="刷卡"?'—':scope.row.cardType}}
                                    <!-- {{ scope.row.cardType=='其他'?'—':scope.row.cardType==''?'—':scope.row.cardType }} -->
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="状态"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.isPay==-1?'未选择':scope.row.isPay==1?'已付款':'未付款' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="applicant"
                            label="申请人"
                            width="80">
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                    <div v-html="groupAirFeeStr.split(/\\r\\n/g).join('<br/>')" class="reportsbale-table-text"></div>
                </div>
                <div class="reportsbale-table-li">
                    <el-table
                    :data="groupVisaFeeViews"
                    border
                    style="width: 100%;"
                    :row-style="TableRowStyle">
                        <el-table-column
                        label="签证费用">
                            <el-table-column
                            prop="visaClient"
                            label="签证客户">
                            </el-table-column>
                            <el-table-column
                            prop="payMoneyCurrency"
                            label="币种"
                            width="100">
                            </el-table-column>
                            <el-table-column
                            label="签证费用"
                            width="120">
                                <template slot-scope="scope">
                                    {{ scope.row.payMoney.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="当时汇率"
                            width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.dayRate.toFixed(4)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payee"
                            label="收款方"
                            width="180">
                            </el-table-column>
                            <el-table-column
                            prop="auditGMDate"
                            label="付款时间"
                            width="140">
                            </el-table-column>
                            <el-table-column
                            label="费用标识"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.orbitalPrivateTransfer==-1?'未选择':scope.row.orbitalPrivateTransfer==0?'公转':'私转' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payWay"
                            label="支付方式"
                            width="80">
                            </el-table-column>
                            <el-table-column
                            prop="cardType"
                            label="卡类型"
                            width="80">
                                <template slot-scope="scope">
                                    {{scope.row.payWay!="刷卡"?'—':scope.row.cardType}}
                                    <!-- {{ scope.row.cardType=='其他'?'—':scope.row.cardType==''?'—':scope.row.cardType }} -->
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="状态"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.isPay==-1?'未选择':scope.row.isPay==1?'已付款':'未付款' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="applicant"
                            label="申请人"
                            width="80">
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                    <div v-html="groupVisaFeeStr.split(/\\r\\n/g).join('<br/>')" class="reportsbale-table-text"></div>
                </div>
                <div class="reportsbale-table-li">
                    <el-table
                    :data="groupInvitationalFeeViews"
                    border
                    style="width: 100%;"
                    :row-style="TableRowStyle">
                        <el-table-column
                        label="邀请/公务活动费用">
                            <el-table-column
                            prop="inviterArea"
                            label="邀请方地区">
                            </el-table-column>
                            <el-table-column
                            prop="inviter"
                            label="邀请方"
                            width="100">
                            </el-table-column>
                            <el-table-column
                            prop="inviteTime"
                            label="邀请时间"
                            width="80">
                            </el-table-column>
                            <el-table-column
                            label="邀请函费用"
                            width="120">
                                <template slot-scope="scope">
                                    {{ scope.row.inviteCost.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="快递费用"
                            width="120">
                                <template slot-scope="scope">
                                    {{ scope.row.sendCost.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="活动费用"
                            width="120">
                                <template slot-scope="scope">
                                    {{ scope.row.eventsCost.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="翻译费用"
                            width="120">
                                <template slot-scope="scope">
                                    {{ scope.row.translateCost.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="人民币"
                            width="120">
                                <template slot-scope="scope">
                                    {{ scope.row.cnyPrice.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="当时汇率"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.currencyRateStr}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payee"
                            label="收款方"
                            width="120">
                            </el-table-column>
                            <el-table-column
                            prop="auditGMDate"
                            label="付款时间"
                            width="140">
                            </el-table-column>
                            <el-table-column
                            label="费用标识"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.orbitalPrivateTransfer==-1?'未选择':scope.row.orbitalPrivateTransfer==0?'公转':'私转' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payWay"
                            label="支付方式"
                            width="80">
                            </el-table-column>
                            <el-table-column
                            label="状态"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.isPay==-1?'未选择':scope.row.isPay==1?'已付款':'未付款' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="applicant"
                            label="申请人"
                            width="80">
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                    <div v-html="groupInvitationalFeeStr.split(/\\r\\n/g).join('<br/>')" class="reportsbale-table-text"></div>
                </div>
                <div class="reportsbale-table-li">
                    <el-table
                    :data="groupInsuranceFeeViews"
                    border
                    style="width: 100%;"
                    :row-style="TableRowStyle">
                        <el-table-column
                        label="保险费用">
                            <el-table-column
                            prop="clientName"
                            label="客户姓名">
                            </el-table-column>
                            <el-table-column
                            prop="payMoneyCurrency"
                            label="币种"
                            width="100">
                            </el-table-column>
                            <el-table-column
                            label="保险费用"
                            width="120">
                                <template slot-scope="scope">
                                    {{ scope.row.payMoney.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payee"
                            label="收款方"
                            width="200">
                            </el-table-column>
                            <el-table-column
                            prop="auditGMDate"
                            label="付款时间"
                            width="140">
                            </el-table-column>
                            <el-table-column
                            label="费用标识"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.orbitalPrivateTransfer==-1?'未选择':scope.row.orbitalPrivateTransfer==0?'公转':'私转' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payWay"
                            label="支付方式"
                            width="80">
                            </el-table-column>
                            <el-table-column
                            label="状态"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.isPay==-1?'未选择':scope.row.isPay==1?'已付款':'未付款' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="applicant"
                            label="申请人"
                            width="80">
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                    <div v-html="groupInsuranceFeeStr.split(/\\r\\n/g).join('<br/>')" class="reportsbale-table-text"></div>
                </div>
                <div class="reportsbale-table-li">
                    <el-table
                    :data="groupDecreaseFeeViews"
                    border
                    style="width: 100%;"
                    :row-style="TableRowStyle">
                        <el-table-column
                        label="其他款项费用">
                            <el-table-column
                            prop="priceName"
                            label="费用名称">
                            </el-table-column>
                            <el-table-column
                            prop="payMoneyCurrency"
                            label="币种"
                            width="100">
                            </el-table-column>
                            <el-table-column
                            label="费用金额"
                            width="120">
                                <template slot-scope="scope">
                                    {{ scope.row.payMoney.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="人民币"
                            width="120">
                                <template slot-scope="scope">
                                    {{ scope.row.cnyPrice.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            label="当时汇率"
                            width="120">
                                <template slot-scope="scope">
                                    {{ scope.row.dayRate.toFixed(4)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payee"
                            label="收款方"
                            width="200">
                            </el-table-column>
                            <el-table-column
                            prop="auditGMDate"
                            label="付款时间"
                            width="140">
                            </el-table-column>
                            <el-table-column
                            label="费用标识"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.orbitalPrivateTransfer==-1?'未选择':scope.row.orbitalPrivateTransfer==0?'公转':'私转' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="payWay"
                            label="支付方式"
                            width="80">
                            </el-table-column>
                            <el-table-column
                            label="状态"
                            width="80">
                                <template slot-scope="scope">
                                    {{ scope.row.isPay==-1?'未选择':scope.row.isPay==1?'已付款':'未付款' }}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="applicant"
                            label="申请人"
                            width="80">
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                    <div v-html="groupDecreaseFeeStr.split(/\\r\\n/g).join('<br/>')" class="reportsbale-table-text"></div>
                </div>
                <div class="reportsbale-table-li">
                    <el-table
                    :data="groupcommission"
                    border
                    style="width: 100%;">
                        <el-table-column
                        label="提成详情">
                            <el-table-column
                            prop="royaltyUserName"
                            label="人员姓名"
                            width="100">
                            </el-table-column>
                            <el-table-column
                            label="金额"
                            width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.amount.toFixed(2)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="isConfrimText"
                            label="是否确认"
                            width="100">
                            </el-table-column>
                            <el-table-column
                            prop="isSeedText"
                            label="是否发放"
                            width="100">
                            </el-table-column>
                            <el-table-column
                            prop="createTime"
                            label="提成操作时间"
                            width="150">
                            </el-table-column>
                            <el-table-column
                            prop="overviewInfo"
                            label="提成描述"
                            >
                            </el-table-column>
                            <el-table-column
                            prop="detailedInfoText"
                            label="操作详细"
                            width='200'>
                                <template slot-scope="scope">
                                    <el-popover
                                    placement="top"
                                    width="400"
                                    trigger="hover">
                                        <div v-for="(items,index) in scope.row.detailedInfoText" :key="index">
                                            <div>{{ (index+1)+'、'+items+'。' }}</div><br>
                                        </div>
                                        <span style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;cursor: pointer;color: #48a2ff;" slot="reference">操作详细，移上查看</span>
                                    </el-popover>
                                </template>
                            </el-table-column>
                            
                        </el-table-column>
                    </el-table>
                    <div v-html="groupRoyaltyFeeStr.split(/\\r\\n/g).join('<br/>')" class="reportsbale-table-text"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import WorldMap from "../ConferenceModule/WorldMap.vue"; //引入地图组件
import "../../assets/js/world"
export default {
    components: { WorldMap },
    data () {
        return {
            groupInfo:{},
            diid:'',
            pageId:0,
            userid:'',
            token:'',
            receivables:[],//应收报表
            proceedsReceivedViews:[],//已收报表
            proceedsReceivedStr:'',//已收报表已收款合计
            extraCostsViews:[],//超支费用
            extraCostsStr:'',//超支费用 Str
            paymentRefundAndOtherMoneyViews:[],// 收款退还Items
            paymentRefundAndOtherMoneyStr:'',// 收款退还 Str
            groupIncomeStr:'',// 剩余尾款
            groupHotelFeeViews:[],//酒店预订费用 Items
            groupHotelFeeStr:'',//酒店预订费用 Str
            groupCTGGRFeeViews:[],//地接费用 Items
            groupCTGGRFeeStr:'',//地接费用 Str
            groupAirFeeViews:[],//机票费用 Items
            groupAirFeeStr:'',//机票费用 Str
            groupVisaFeeViews:[],//签证费用 Items
            groupVisaFeeStr:'',//签证费用 Str
            groupInvitationalFeeViews:[],//邀请费用 Items
            groupInvitationalFeeStr:'',//邀请费用 Str
            groupInsuranceFeeViews:[],//保险费用 Items
            groupInsuranceFeeStr:'',//保险费用 Str
            groupDecreaseFeeViews:[],//其他款项费用 Items
            groupDecreaseFeeStr:'',//其他款项费用 Str
            groupcommission:'',//团组提成
            groupRoyaltyFeeStr:'',//团组提成合计
            feeTotalStr:'',
            btnFlag: false,
            scrollTop:0,
            fullscreenLoading:false,
            worldChartData:{
                namemap:{}, // 自定义地区的名称映射,从官方world.json中获取
                dataArr: [], // 地图系列中的数据内容数组,从后台返回数据
            },
            isShow:false,
        }
    },
    methods:{
        //获取团组详情
        PostShareGroupInfo(){
            var url = "/api/Business/PostShareGroupInfo"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userid
                },
                data:{
                    portType:1,
                    id: that.diid
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.groupInfo=res.data.data;
                    that.PostGroupStatementDetails();
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("获取数据源失败！");
            });
        },
        //获取报表详情
        PostGroupStatementDetails(){
            this.fullscreenLoading=true;
            var url = "/api/Statistics/PostGroupStatementDetails"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data:{
                    portType:1,
                    userId: that.userid,
                    pageId: that.pageId,
                    diId: that.diid,
                    isAudit:true
                }
            }).then(function (res) {
                var resinif=res.data.data
                if(res.data.code==200){
                    that.feeTotalStr=resinif.feeTotalStr;
                    that.groupHotelFeeViews=resinif.groupExpenditure.groupHotelFeeViews;
                    that.groupHotelFeeStr=resinif.groupExpenditure.groupHotelFeeStr;
                    that.receivables=resinif.groupIncome.receivables;
                    that.proceedsReceivedViews=resinif.groupIncome.proceedsReceivedViews;
                    that.proceedsReceivedStr=resinif.groupIncome.proceedsReceivedStr;
                    that.extraCostsViews=resinif.groupIncome.extraCostsViews;
                    that.extraCostsStr=resinif.groupIncome.extraCostsStr;
                    that.paymentRefundAndOtherMoneyViews=resinif.groupIncome.paymentRefundAndOtherMoneyViews;
                    that.paymentRefundAndOtherMoneyStr=resinif.groupIncome.paymentRefundAndOtherMoneyStr;
                    that.groupIncomeStr=resinif.groupIncomeStr;
                    that.groupCTGGRFeeViews=resinif.groupExpenditure.groupCTGGRFeeViews;
                    that.groupCTGGRFeeStr=resinif.groupExpenditure.groupCTGGRFeeStr;
                    that.groupAirFeeViews=resinif.groupExpenditure.groupAirFeeViews;
                    that.groupAirFeeStr=resinif.groupExpenditure.groupAirFeeStr;
                    that.groupVisaFeeViews=resinif.groupExpenditure.groupVisaFeeViews;
                    that.groupVisaFeeStr=resinif.groupExpenditure.groupVisaFeeStr;
                    that.groupInvitationalFeeViews=resinif.groupExpenditure.groupInvitationalFeeViews;
                    that.groupInvitationalFeeStr=resinif.groupExpenditure.groupInvitationalFeeStr;
                    that.groupInsuranceFeeViews=resinif.groupExpenditure.groupInsuranceFeeViews;
                    that.groupInsuranceFeeStr=resinif.groupExpenditure.groupInsuranceFeeStr;
                    that.groupDecreaseFeeViews=resinif.groupExpenditure.groupDecreaseFeeViews;
                    that.groupDecreaseFeeStr=resinif.groupExpenditure.groupDecreaseFeeStr;
                    that.groupcommission=resinif.groupExpenditure.groupRoyaltyFeeViews;
                    that.groupRoyaltyFeeStr=resinif.groupExpenditure.groupRoyaltyFeeStr;
                    that.fullscreenLoading=false;
                }else{
                    that.$message.error(res.data.msg);
                    that.fullscreenLoading=false;
                }
            }).catch(function (error) {
                that.$message.error("获取详情失败！");
                that.fullscreenLoading=false;
            });
        },
        backTop() {
            const that = this;
            let timer = setInterval(() => {
                let ispeed = Math.floor(-that.scrollTop / 5);
                document.documentElement.scrollTop = document.body.scrollTop =
                that.scrollTop + ispeed;
                if (that.scrollTop === 0) {
                clearInterval(timer);
                }
            }, 16);
        },
        TableRowStyle({ row, rowIndex }) {
            // 注意，这里返回的是一个对象
            let rowBackground = {};
            if (row.isPay==1) {
                rowBackground.background = "#f0f9ff";
                return rowBackground;
            }else{
                rowBackground.background = "#FFFFFF";
                return rowBackground;
            }
        },
        // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
        scrollToTop() {
            const that = this;
            let scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;
            that.scrollTop = scrollTop;
            if (that.scrollTop > 30) {
                that.btnFlag = true;
            } else {
                that.btnFlag = false;
            }
        },

    },
    filters:{
        filter_time(value){
            if(value){
                return value.split(' ')[0];
            }
            return value
            
        },
        filter_city(value){
            return value
        },
        title_zc(value){
            var a='\\t'
            var b='&nbsp;'
            return value.replace(/\\t/g,"  ")
        },
        title_br(value){
            return value.split(/\\r\\n/g).join('<br/>')
        }
    },
    created(){
        
        
    },
    beforeRouteLeave(to, from, next) {
        if(to.name!='Groupreports'){
            localStorage.removeItem('tzbbval');
        }
        next()
    },
    mounted(){
        this.worldChartData.namemap=this.$store.state.worldjson.namemap;
        this.worldChartData.dataArr=this.$store.state.worldjson.dataArr;
        console.log(this.worldChartData);
        this.isShow=true;
        this.diid = Number(this.$route.query.id);
        this.token=JSON.parse(localStorage.getItem('userinif')).token;
        this.pageId=Number(localStorage.getItem('indexs').split('-')[1]);//页面id
        this.userid=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.PostShareGroupInfo();

        window.addEventListener("scroll", this.scrollToTop, true);
    },
    destroyed() {
        window.removeEventListener("scroll", this.scrollToTop, true);
    },
}
</script>
<style>
.reportsbale-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 840px;
}
.reportsbale-info{
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 2px;
    
}
.reportsbale-info-li{
    margin-right: 30px;
}
.reportsbale-info-li label{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}
.reportsbale-info-li span{
    color: #606266;
    font-size: 14px;
}
.reportsbale-table .el-table{
    font-size: 12px;
}
.reportsbale-table .el-table .cell{
    padding-right:5px ;
    padding-left: 5px;
}
.reportsbale-table .el-table th.el-table__cell>.cell{
    padding-right:5px ;
    padding-left: 5px;
}
.reportsbale-table .el-table .el-table__cell{
    padding: 5px 0;
    text-align: center;
}
.reportsbale-table .label{
    font-size: 17px;
    font-weight: 600;
}
.zctitle{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
}
.reportsbale-table-li{
    margin-bottom: 50px;
}
.reportsbale-table-text{
    font-size: 12px;
    font-weight: 600;
    color: #606266;
}
.reportsbale-table-biaoti{
    font-size: 22px;
    text-align: center;
    font-weight:600 ;
    color: #606266;
    margin-bottom: 10px;
}


/*返回顶部*/
.gotop-index {
    position: fixed;
    right: 0.6rem;
    bottom: 1.6rem;
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    background: #fff;
    box-shadow: 0px 0px 4px #ff0000;
    display: flex;
    border-radius: 50%;
    z-index: 999;
  }
  .gotop-a {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    background: url(../../assets/logo.png) no-repeat 0 0;
    background-size: 0.5rem;
    margin: auto;
  }
  
</style>