oa-system/src/components/OP/EntryDetails.vue

<template>
    <div>
        <div class="Entry-all">
            <div class="Entry-head">
                <div class="Entry-head-li">
                    <label>团组名称:</label>
                    <el-select style="width:250px" @change="chengvalue()" v-model="value" filterable placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.groupName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="Entry-head-li">
                    <el-button type="primary">计算费用</el-button>
                    <el-button type="primary">全部清空</el-button>
                    <el-button @click="storage()" type="primary">保存</el-button>
                    <el-button type="primary">导出所选明细表</el-button>
                    <el-button type="primary">导出下拉所选表格</el-button>
                </div>
            </div>
            <div class="Entry-form">
                <div class="Entry-form-li">
                    <div class="Entry-li-lables">
                        <el-checkbox v-model="choiceOne"></el-checkbox>
                        <div class="li-lable">一、境内费用(其他费用)</div>
                        <div class="li-lable">
                            <span class="redzhu">(注：填好数值鼠标点击其他区域计算合计)</span>
                            <label>合计:</label>
                            <div class="sub-boxs">{{DomesticFees.total=(DomesticFees.visafees+DomesticFees.vaccinefees+DomesticFees.nucleicfees+DomesticFees.serviceCharge+DomesticFees.insurance+DomesticFees.ticketsExhibitionL)|numFilter}}</div>
                            <span>元/人</span>
                        </div>
                    </div>
                    <div class="Entry-li-inif">
                        <div class="Entry-inif-box">
                            <label>签证费:</label>
                            <el-input-number size="mini"  :controls="false" :precision="2" v-model="DomesticFees.visafees"></el-input-number>
                            <span>元/人</span>
                        </div>
                        <div class="Entry-inif-box">
                            <label>签证费用描述:</label>
                            <el-input style="width:250px" size="mini" v-model="DomesticFees.visafeesDescription"></el-input>
                            <span class="redzhu">* 例：日本：200元/人;加拿大：767.5元/人;</span>
                        </div>
                    </div>
                    <div class="Entry-li-inif">
                        <div class="Entry-inif-box">
                            <label>疫苗费:</label>
                            <el-input-number size="mini"  :controls="false" :precision="2" v-model="DomesticFees.vaccinefees"></el-input-number>
                            <span>元/人</span>
                        </div>
                        <div class="Entry-inif-box">
                            <label>核酸检测费:</label>
                            <el-input-number size="mini"  :controls="false" :precision="2" v-model="DomesticFees.nucleicfees"></el-input-number>
                            <span>元/人;</span>
                        </div>
                        <div class="Entry-inif-box">
                            <label> 服务费:</label>
                            <el-input-number size="mini"  :controls="false" :precision="2" v-model="DomesticFees.serviceCharge"></el-input-number>
                            <span>元/人;</span>
                        </div>
                    </div>
                    <div class="Entry-li-inif">
                        <div class="Entry-inif-box">
                            <label>保险费:</label>
                            <el-input-number size="mini"  :controls="false" :precision="2" v-model="DomesticFees.insurance"></el-input-number>
                            <span>元/人</span>
                        </div>
                        <div class="Entry-inif-box">
                            <label>参展门票:</label>
                            <el-input-number size="mini"  :controls="false" :precision="2" v-model="DomesticFees.ticketsExhibitionL"></el-input-number>
                            <span>元/人;</span>
                        </div>
                    </div>
                </div>
                <div class="Entry-form-li">
                    <div class="Entry-li-lables">
                        <el-checkbox v-model="choiceTwo"></el-checkbox>
                        <div class="li-lable">二、国际旅费合计：</div>
                        <div style="display: flex;">
                            <div class="li-lable">
                                <el-checkbox style="margin-right: -10px;" v-model="sumJJC"></el-checkbox>
                                <label>(经济舱)</label>
                                <div class="sub-boxs">{{TotalExpenses.EconomyClasstotal=(TotalExpenses.EconomyClass+TotalExpenses.TravellingExpenses)|numFilter}}</div>
                                <span>元/人</span>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;                          
                            <div class="li-lable">
                                <el-checkbox style="margin-right: -10px;" v-model="sumGWC"></el-checkbox>
                                <label>(公务舱)</label>
                                <div class="sub-boxs">{{TotalExpenses.BusinessClasstotal=(TotalExpenses.BusinessClass+TotalExpenses.TravellingExpenses)|numFilter}}</div>
                                <span>元/人</span>
                            </div>
                        </div>
                    </div>
                    <div class="Entry-li-inif">
                        <label>国际机票:&nbsp; &nbsp; &nbsp; </label>
                        <div class="Entry-inif-box">
                            <label>（经济舱）:</label>
                            <el-input-number size="mini"  :controls="false" :precision="2" v-model="TotalExpenses.EconomyClass"></el-input-number>
                            <span>元/人</span>
                        </div>
                        <div class="Entry-inif-box">
                            <label>（公务舱）:</label>
                            <el-input-number size="mini"  :controls="false" :precision="2" v-model="TotalExpenses.BusinessClass"></el-input-number>
                            <span>元/人;</span>
                        </div>
                    </div>
                    <div class="Entry-li-inif">
                        <div class="Entry-inif-box">
                            <label>城市区间交通费:</label>
                            <el-input-number size="mini"  :controls="false" :precision="2" v-model="TotalExpenses.TravellingExpenses"></el-input-number>
                            <span>元/人;</span>
                        </div>
                    </div>
                    <div class="Entry-li-inif">
                        <div v-for="(item,index) in currencys" :key="index" class="Entry-inif-box">
                            <label>{{item.currencyName}}汇率:</label>
                            <el-input-number size="mini"  :controls="false" :precision="4" v-model="item.rate"></el-input-number>
                        </div>
                    </div>
                </div>
                <div class="Entry-form-li">
                    <div class="Entry-li-lable">
                        <div style="display: flex;align-items: center;">
                            <el-checkbox v-model="choiceThree"></el-checkbox>
                            <div class="li-lable">三、住宿费：</div>
                            <div style="display: flex;">
                                <div class="li-lable">
                                    <label>合计:</label>
                                    <div class="sub-boxs">{{TotalAccommodationFee|numFilter}}</div>
                                    <span>元/人</span>
                                </div>
                            </div>
                        </div>
                        <div class="btn-Entry">
                            <el-button type="primary" @click="addlist('住宿费')" size="mini">新 增</el-button>
                        </div>
                    </div>
                    <div class="Entry-li-inif">
                        <el-table
                            :data="quarterageData"
                            border
                            style="width: 100%">
                            <el-table-column
                            prop="days"
                            label="第几晚"
                            width="180">
                                <template slot-scope="scope">
                                    <el-input-number size="mini"  :controls="false" v-model="scope.row.days"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column
                            style="position: relative;"
                            prop="city"
                            label="城 市"
                            width="180">
                                <template slot-scope="scope">
                                    <el-select size="mini" @change="changeSelect(scope.row,$event)" v-model="scope.row.nationalTravelFeeId" filterable placeholder="请选择">
                                        <el-option
                                            v-for="item in placeinif"
                                            :key="item.id"
                                            :label="item.cityname"
                                            :value="item.id"
                                            >
                                            <span style="float: left">{{item.cityname}}</span>
                                            <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{item.city}}</span> -->
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="cost"
                            label=" 费用标准"
                            width="180">
                                <template slot-scope="scope">
                                    <el-input-number disabled size="mini" :precision="2" :controls="false" v-model="scope.row.cost"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="currencyName"
                            label=" 币 种"
                            width="180">
                                <template slot-scope="scope">
                                    <el-input disabled size="mini" v-model="scope.row.currencyName"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="subTotal"
                            label="费用小计"
                            width="180">
                                <template slot-scope="scope">
                                    <div class="sub-boxs">{{scope.row.subTotal|numFilter}}</div>&nbsp;CNY
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="操 作">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="Entry-form-li">
                    <div class="Entry-li-lable">
                        <div style="display: flex;align-items: center;">
                            <el-checkbox v-model="choiceFour"></el-checkbox>
                            <div class="li-lable">四、伙食费：</div>
                            <div style="display: flex;">
                                <div class="li-lable">
                                    <label>合计:</label>
                                    <div class="sub-boxs">{{TotalMeals|numFilter}}</div>
                                    <span>元/人</span>
                                </div>
                            </div>
                        </div>
                        <div class="btn-Entry">
                            <el-button type="primary" @click="addlist('伙食费')" size="mini">新 增</el-button>
                        </div>
                    </div>
                    <div class="Entry-li-inif">
                        <el-table
                            :data="boardWagesData"
                            border
                            style="width: 100%">
                            <el-table-column
                            prop="days"
                            label="第几晚"
                            width="180">
                                <template slot-scope="scope">
                                    <el-input-number size="mini"  :controls="false" v-model="scope.row.days"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column
                            style="position: relative;"
                            prop="city"
                            label="城 市"
                            width="180">
                                <!-- <template slot-scope="scope">
                                    <el-input size="mini" v-model="scope.row.city"></el-input>
                                </template> -->
                                <template slot-scope="scope">
                                    <el-select size="mini" @change="mealschangeSelect(scope.row,$event)" v-model="scope.row.nationalTravelFeeId" filterable placeholder="请选择">
                                        <el-option
                                            v-for="item in placeinif"
                                            :key="item.id"
                                            :label="item.cityname"
                                            :value="item.id"
                                            >
                                            <span style="float: left">{{item.cityname}}</span>
                                            <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{item.city}}</span> -->
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="cost"
                            label=" 费用标准"
                            width="180">
                                <template slot-scope="scope">
                                    <el-input-number disabled size="mini" :precision="2" :controls="false" v-model="scope.row.cost"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="currencyName"
                            label=" 币 种"
                            width="180">
                                <template slot-scope="scope">
                                    <el-input disabled size="mini" v-model="scope.row.currencyName"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="subTotal"
                            label="费用小计"
                            width="180">
                                <template slot-scope="scope">
                                    <div class="sub-boxs">{{scope.row.subTotal|numFilter}}</div>&nbsp;CNY
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="操 作">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="Entry-form-li">
                    <div class="Entry-li-lable">
                        <div style="display: flex;align-items: center;">
                            <el-checkbox v-model="choiceFive"></el-checkbox>
                            <div class="li-lable">五、公杂费：</div>
                            <div style="display: flex;">
                                <div class="li-lable">
                                    <label>合计:</label>
                                    <div class="sub-boxs">{{TotalMiscellaneous|numFilter}}</div>
                                    <span>元/人</span>
                                </div>
                            </div>
                        </div>
                        <div class="btn-Entry">
                            <el-button type="primary" @click="addlist('公杂费')" size="mini">新 增</el-button>
                        </div>
                    </div>
                    <div class="Entry-li-inif">
                        <el-table
                            :data="miscellaneousFeeData"
                            border
                            style="width: 100%">
                            <el-table-column
                            prop="days"
                            label="第几晚"
                            width="180">
                                <template slot-scope="scope">
                                    <el-input-number size="mini"  :controls="false" v-model="scope.row.days"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column
                            style="position: relative;"
                            prop="city"
                            label="城 市"
                            width="180">
                                <!-- <template slot-scope="scope">
                                    <el-input size="mini" v-model="scope.row.city"></el-input>
                                </template> -->
                                <template slot-scope="scope">
                                    <el-select @change="MiscellaneouschangeSelect(scope.row,$event)" size="mini" v-model="scope.row.nationalTravelFeeId" filterable placeholder="请选择">
                                        <el-option
                                            v-for="item in placeinif"
                                            :key="item.id"
                                            :label="item.cityname"
                                            :value="item.id"
                                            >
                                            <span style="float: left">{{item.cityname}}</span>
                                            <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{item.city}}</span> -->
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="cost"
                            label=" 费用标准"
                            width="180">
                                <template slot-scope="scope">
                                    <el-input-number disabled size="mini" :precision="2" :controls="false" v-model="scope.row.cost"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="currencyName"
                            label=" 币 种"
                            width="180">
                                <template slot-scope="scope">
                                    <el-input disabled size="mini" v-model="scope.row.currencyName"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="subTotal"
                            label="费用小计"
                            width="180">
                                <template slot-scope="scope">
                                    <div class="sub-boxs">{{scope.row.subTotal|numFilter}}</div>&nbsp;CNY
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="操 作">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="Entry-form-li">
                    <div class="Entry-li-lable">
                        <div style="display: flex;align-items: center;">
                            <el-checkbox v-model="choiceSix"></el-checkbox>
                            <div class="li-lable">六、培训费：</div>
                            <div style="display: flex;">
                                <div class="li-lable">
                                    <label>合计:</label>
                                    <div class="sub-boxs">{{trainingExpense|numFilter}}</div>
                                    <span>元/人</span>
                                </div>
                            </div>
                        </div>
                        <div class="btn-Entry">
                            <el-button type="primary" @click="addlist('培训费')" size="mini">新 增</el-button>
                        </div>
                    </div>
                    <div class="Entry-li-inif">
                        <el-table
                            :data="trainingExpenseData"
                            border
                            style="width: 100%">
                            <el-table-column
                            prop="days"
                            label="第几晚"
                            width="180">
                                <template slot-scope="scope">
                                    <el-input-number size="mini"  :controls="false" v-model="scope.row.days"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column
                            style="position: relative;"
                            prop="city"
                            label="城 市"
                            width="180">
                                <!-- <template slot-scope="scope">
                                    <el-input size="mini" v-model="scope.row.city"></el-input>
                                </template> -->
                                <template slot-scope="scope">
                                    <el-select @change="TrainingExpenseDataSelect(scope.row,$event)" size="mini" v-model="scope.row.nationalTravelFeeId" filterable placeholder="请选择">
                                        <el-option
                                            v-for="item in placeinif"
                                            :key="item.id"
                                            :label="item.cityname"
                                            :value="item.id"
                                            >
                                            <span style="float: left">{{item.cityname}}</span>
                                            <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{item.city}}</span> -->
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="cost"
                            label=" 费用标准"
                            width="180">
                                <template slot-scope="scope">
                                    <el-input-number @input="Traininginput(scope.row)" size="mini" :precision="2" :controls="false" v-model="scope.row.cost"></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="currencyName"
                            label=" 币 种"
                            width="180">
                                <template slot-scope="scope">
                                    <el-input size="mini" v-model="scope.row.currencyName"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="subTotal"
                            label="费用小计"
                            width="180">
                                <template slot-scope="scope">
                                    <div class="sub-boxs">{{scope.row.subTotal|numFilter}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                            prop="address"
                            label="操 作">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="Entry-form-li">
                    <div class="Entry-li-lables">
                        <div class="li-lable">七、费用总计：</div>
                        <div style="display: flex;">
                            <div class="li-lable">
                                <el-checkbox style="margin-right: -10px;" v-model="airJJC_Checked"></el-checkbox>
                                <label>(经济舱)</label>
                                <div class="sub-boxs">{{jjctotal|numFilter}}</div>
                                <span>元/人</span>
                            </div>
                            &nbsp;&nbsp;&nbsp;&nbsp;                          
                            <div class="li-lable">
                                <el-checkbox style="margin-right: -10px;" v-model="airGWC_Checked"></el-checkbox>
                                <label>(公务舱)</label>
                                <div class="sub-boxs">{{gwctotal|numFilter}}</div>
                                <span>元/人</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            //是否计算Checkbox
            choiceOne:false,//境内费用(其他费用)选择框
            choiceTwo:false,//国际旅费合计选择框
            choiceThree:false,//住宿费合计选择框
            choiceFour:false,//伙食费合计选择框
            choiceFive:false,//公杂费合计选择框
            choiceSix:false,//培训费用选择框
            sumJJC:false,//经济舱小计选择框
            sumGWC:false,//公务舱小计选择框
            airJJC_Checked:false,//经济舱选择框
            airGWC_Checked:false,//公务舱选择框

            userId:'',
            value:'',
            options:[],
            Visafees:'',
            Visadepicted:'',
            currencys: [],
            currencyss: [],
            DomesticFees:{
                visafees:'',//签证费
                visafeesDescription:'',//签证费用描述
                vaccinefees:0,//疫苗费
                nucleicfees:0,//核酸检测费
                serviceCharge:0,//服务费
                insurance:0,//保险费
                ticketsExhibitionL:0,//参展门票
                total:0
            },
            TotalExpenses:{
                EconomyClass:0,//经济舱
                BusinessClass:0,//公务舱
                TravellingExpenses:0,//城市区间交通费
                EconomyClasstotal:0,//经济舱合计
                BusinessClasstotal:0,//公务舱合计
            },

            TotalAccommodationFee:0,//住宿费合计
            TotalMeals:0,//伙食费合计
            TotalMiscellaneous:0,//公杂费合计
            trainingExpense:0,//培训费合计

            quarterageData: [],
            boardWagesData:[],
            miscellaneousFeeData:[],
            trainingExpenseData:[],
            placeinif:[],
            //下拉框
            treeData: "",
            treeDataValue: "",
            data: [
                {
                id: 1,
                name: "一级 1",
                children: [
                    {
                    id: 4,
                    label: "二级 1-1",
                    },
                ],
                },
                {
                id: 2,
                name: "一级 2",
                children: [
                    {
                    id: 5,
                    name: "二级 2-1",
                    },
                    {
                    id: 6,
                    name: "二级 2-2",
                    },
                ],
                },
                {
                id: 3,
                name: "一级 3",
                children: [
                    {
                    id: 7,
                    name: "二级 3-1",
                    },
                    {
                    id: 8,
                    name: "二级 3-2",
                    },
                ],
                },
            ],
            defaultProps: {
                children: "cityData",
                label:"city",
                // label: "country",
            },

            jjctotal:0,//经济舱合计
            gwctotal:0,//公务舱合计

            storageid:0,
        }
    },
    methods:{
        //获取团组
        GetEnterExitCostDataSource(){
            var url = "/api/Groups/GetEnterExitCostDataSource"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    portType: 1
                }
            }).then(function (res) {
                console.log(res)
                if(res.data.code==200){
                    that.options=res.data.data.groupNameData;
                    that.currencys=res.data.data.currencyInit;
                    that.value=res.data.data.groupNameData[0].id;
                    that.placeinif=res.data.data.nationalTravelFeeData;
                    that.GetEnterExitCostInfobyDiId()
                }
            })
        },
        //获取费用标注
        GetNationalTravelFeeData(){
            var url = "/api/Groups/GetNationalTravelFeeData"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    portType: 1
                }
            }).then(function (res) {
                console.log(res)
                let placeinifarr=[];
                if(res.data.code==200){
                    for(let i=0;i<res.data.data.length;i++){
                        res.data.data[i]['cityname']=res.data.data[i].country+'-'+res.data.data[i].city;
                        placeinifarr.push(res.data.data[i]);
                    }
                    that.placeinif=placeinifarr;
                    console.log(that.placeinif)
                    console.log(placeinifarr)
                }
            })
        },
        GetEnterExitCostInfobyDiId(){
            //初始化数据
            // this.currencys=[]
            this.DomesticFees={
                visafees:'',//签证费
                visafeesDescription:'',//签证费用描述
                vaccinefees:0,//疫苗费
                nucleicfees:0,//核酸检测费
                serviceCharge:0,//服务费
                insurance:0,//保险费
                ticketsExhibitionL:0,//参展门票
                total:0
            }
            this.TotalExpenses={
                EconomyClass:0,//经济舱
                BusinessClass:0,//公务舱
                TravellingExpenses:0,//城市区间交通费
                EconomyClasstotal:0,//经济舱合计
                BusinessClasstotal:0,//公务舱合计
            }
            this.choiceOne=false//境内费用(其他费用)选择框
            this.choiceTwo=false//国际旅费合计选择框
            this.choiceThree=false//住宿费合计选择框
            this.choiceFour=false//伙食费合计选择框
            this.choiceFive=false//公杂费合计选择框
            this.choiceSix=false//培训费用选择框
            this.sumJJC=false//经济舱小计选择框
            this.sumGWC=false//公务舱小计选择框
            this.airJJC_Checked=false//经济舱选择框
            this.airGWC_Checked=false//公务舱选择框

            this.quarterageData= []
            this.boardWagesData=[]
            this.miscellaneousFeeData=[]
            this.trainingExpenseData=[]

            var url = "/api/Groups/GetEnterExitCostInfobyDiId"
            var that = this
            console.log(that.value)
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data:{
                    portType: 1,
                    diId: that.value
                }
            }).then(function (res) {
                if(res.data.code==200){
                    console.log(res)
                    //汇率
                    that.currencys=res.data.data.currencys;
                    //境内费用
                    that.DomesticFees.visafees=res.data.data.visa;
                    that.DomesticFees.visafeesDescription=res.data.data.visaRemark;
                    that.DomesticFees.vaccinefees=res.data.data.yiMiao;
                    that.DomesticFees.nucleicfees=res.data.data.heSuan;
                    that.DomesticFees.serviceCharge=res.data.data.service;
                    that.DomesticFees.insurance=res.data.data.safe;
                    that.DomesticFees.ticketsExhibitionL=res.data.data.ticket;
                    //国际旅费
                    that.TotalExpenses.EconomyClass=res.data.data.outsideJJPay;
                    that.TotalExpenses.BusinessClass=res.data.data.outsaideGWPay;
                    that.TotalExpenses.TravellingExpenses=res.data.data.cityTranffic;

                    //是否计算Checkbox
                    that.choiceOne=res.data.data.choiceOne==1?true:false
                    that.choiceTwo=res.data.data.choiceTwo==1?true:false
                    that.choiceThree=res.data.data.choiceThree==1?true:false
                    that.choiceFour=res.data.data.choiceFour==1?true:false
                    that.choiceFive=res.data.data.choiceFive==1?true:false
                    that.choiceSix=res.data.data.choiceSix==1?true:false
                    that.sumJJC=res.data.data.sumJJC==1?true:false
                    that.sumGWC=res.data.data.sumGWC==1?true:false
                    that.airJJC_Checked=res.data.data.airJJC_Checked==1?true:false
                    that.airGWC_Checked=res.data.data.airGWC_Checked==1?true:false
                    //住宿费
                    that.quarterageData=res.data.data.quarterageData;
                    for(let a=0;a<res.data.data.quarterageData.length;a++){
                        that.TotalAccommodationFee+=res.data.data.quarterageData[a].subTotal
                    }
                    //伙食费
                    that.boardWagesData=res.data.data.boardWagesData;
                    for(let b=0;b<res.data.data.boardWagesData.length;b++){
                        that.TotalMeals+=res.data.data.boardWagesData[b].subTotal
                    }
                    //公杂费
                    that.miscellaneousFeeData=res.data.data.miscellaneousFeeData;
                    for(let c=0;c<res.data.data.miscellaneousFeeData.length;c++){
                        that.TotalMiscellaneous+=res.data.data.miscellaneousFeeData[c].subTotal
                    }
                    //培训费
                    that.trainingExpenseData=res.data.data.trainingExpenseData;
                    for(let d=0;d<res.data.data.trainingExpenseData.length;d++){
                        that.trainingExpense+=res.data.data.trainingExpenseData[d].subTotal
                    }
                    that.storageid=res.data.data.id;
                }
            })
        },
        //下拉
        handNodeClick(data,node,e){
            console.log(data)
            console.log(node)
            console.log(e)
            this.treeDataValue= data.name
            this.treeData= data.name
            console.log(this.treeData)
        },
        //住宿地区选择
        changeSelect(val,item){
            console.log(val);
            var rate=0
            var obj={}
            obj= this.placeinif.find(function(i){
                return i.id ===item
            });
            //在change中获取到整条对象数据
            console.log(obj);
            val.currencyName=obj.currencyName;
            val.currency=obj.currency;
            val.cost=obj.roomCost;
            console.log(this.currencys)
            for(let j=0;j<this.currencys.length;j++){
                if(this.currencys[j].currencyCode==obj.currencyCode){
                    rate=this.currencys[j].rate;
                }
            }
            console.log(val.cost,rate)
            val.subTotal=Number(val.cost)*Number(rate);
            this.TotalAccommodationFee=0;
            for(let a=0;a<this.quarterageData.length;a++){
                this.TotalAccommodationFee+=this.quarterageData[a].subTotal
            }
        },
        //伙食地区选择
        mealschangeSelect(val,item){
            console.log(val);
            var rate=0
            var obj={}
            obj= this.placeinif.find(function(i){
                return i.id ===item
            });
            //在change中获取到整条对象数据
            console.log(obj);
            val.currencyName=obj.currencyName;
            val.currency=obj.currency;
            val.cost=obj.foodCost;
            for(let j=0;j<this.currencys.length;j++){
                if(this.currencys[j].currencyCode==obj.currencyCode){
                    rate=this.currencys[j].rate;
                }
            }
            val.subTotal=Number(val.cost)*Number(rate);
            this.TotalMeals=0;
            for(let a=0;a<this.boardWagesData.length;a++){
                this.TotalMeals+=this.boardWagesData[a].subTotal
            }
        },
        //公杂费地区选择
        MiscellaneouschangeSelect(val,item){
            console.log(val);
            var rate=0
            var obj={}
            obj= this.placeinif.find(function(i){
                return i.id ===item
            });
            //在change中获取到整条对象数据
            console.log(obj);
            val.currencyName=obj.currencyName;
            val.currency=obj.currency;
            val.cost=obj.publicCost;
            for(let j=0;j<this.currencys.length;j++){
                if(this.currencys[j].currencyCode==obj.currencyCode){
                    rate=this.currencys[j].rate;
                }
            }
            val.subTotal=Number(val.cost)*Number(rate);
            this.TotalMiscellaneous=0;
            for(let a=0;a<this.miscellaneousFeeData.length;a++){
                this.TotalMiscellaneous+=this.miscellaneousFeeData[a].subTotal
            }
        },
        //培训费费用标准值改变
        Traininginput(val){
            console.log(val)
            var rate=0
            for(let j=0;j<this.currencys.length;j++){
                if(this.currencys[j].currencyName==val.currencyName){
                    rate=this.currencys[j].rate;
                }
            }
            val.subTotal=Number(val.cost)*Number(rate);
            this.trainingExpense=0;
            for(let a=0;a<this.trainingExpenseData.length;a++){
                this.trainingExpense+=this.trainingExpenseData[a].subTotal
            }
        },
        //培训费地区选择
        TrainingExpenseDataSelect(val,item){
            console.log(val);
            console.log(this.trainingExpenseData);
            var rate=0//汇率
            var obj={}
            obj= this.placeinif.find(function(i){
                return i.id ===item
            });
            //在change中获取到整条对象数据
            console.log(obj);
            val.currencyName=obj.currencyName;
            val.currency=obj.currency;
            for(let j=0;j<this.currencys.length;j++){
                if(this.currencys[j].currencyCode==obj.currencyCode){
                    rate=this.currencys[j].rate;
                }
            }
            val.subTotal=Number(val.cost)*Number(rate);
            this.trainingExpense=0;
            for(let a=0;a<this.trainingExpenseData.length;a++){
                this.trainingExpense+=this.trainingExpenseData[a].subTotal
            }
        },
        //新增list
        addlist(text){
            if(text=="住宿费"){
                this.quarterageData.push({
                    id:0,
                    diId:this.value,
                    type:1,
                    days:this.quarterageData.length!=0?(this.quarterageData[this.quarterageData.length-1].days)+1:1,
                    nationalTravelFeeId:'',
                    cost:0,
                    currency:0,
                    subTotal:0,
                    remark:0,
                })
            }
            if(text=="伙食费"){
                this.boardWagesData.push({
                    id:0,
                    diId:this.value,
                    type:2,
                    days:this.boardWagesData.length!=0?(this.boardWagesData[this.boardWagesData.length-1].days)+1:1,
                    nationalTravelFeeId:'',
                    cost:0,
                    currency:0,
                    subTotal:0,
                    remark:0,
                })
            }
            if(text=="公杂费"){
                this.miscellaneousFeeData.push({
                    id:0,
                    diId:this.value,
                    type:3,
                    days:this.miscellaneousFeeData.length!=0?(this.miscellaneousFeeData[this.miscellaneousFeeData.length-1].days)+1:1,
                    nationalTravelFeeId:'',
                    cost:0,
                    currency:0,
                    subTotal:0,
                    remark:0,
                })
            }
            if(text=="培训费"){
                console.log(this.trainingExpenseData)
                this.trainingExpenseData.push({
                    id:0,
                    diId:this.value,
                    type:4,
                    days:this.trainingExpenseData.length!=0?(this.trainingExpenseData[this.trainingExpenseData.length-1].days)+1:1,
                    nationalTravelFeeId:'',
                    cost:0,
                    currency:0,
                    subTotal:0,
                    remark:'',
                })
            }
        },
        //保存
        storage(){
            //住宿费
            var quarterageDatas=[];
            for(let m=0;m<this.quarterageData.length;m++){
                quarterageDatas.push({
                    id:this.quarterageData[m].id,
                    diId:this.quarterageData[m].diId,
                    type:this.quarterageData[m].type,
                    days:this.quarterageData[m].days,
                    nationalTravelFeeId:this.quarterageData[m].nationalTravelFeeId,
                    cost:this.quarterageData[m].cost,
                    currency:this.quarterageData[m].currency,
                    subTotal:this.quarterageData[m].subTotal,
                    remark:this.quarterageData[m].remark,
                })
            }
            //伙食费
            var boardWagesDatas=[];
            for(let n=0;n<this.boardWagesData.length;n++){
                boardWagesDatas.push({
                    id:this.boardWagesData[n].id,
                    diId:this.boardWagesData[n].diId,
                    type:this.boardWagesData[n].type,
                    days:this.boardWagesData[n].days,
                    nationalTravelFeeId:this.boardWagesData[n].nationalTravelFeeId,
                    cost:this.boardWagesData[n].cost,
                    currency:this.boardWagesData[n].currency,
                    subTotal:this.boardWagesData[n].subTotal,
                    remark:this.boardWagesData[n].remark,
                })
            }
            //公杂费miscellaneousFeeData
            var miscellaneousFeeDatas=[];
            for(let b=0;b<this.miscellaneousFeeData.length;b++){
                miscellaneousFeeDatas.push({
                    id:this.miscellaneousFeeData[b].id,
                    diId:this.miscellaneousFeeData[b].diId,
                    type:this.miscellaneousFeeData[b].type,
                    days:this.miscellaneousFeeData[b].days,
                    nationalTravelFeeId:this.miscellaneousFeeData[b].nationalTravelFeeId,
                    cost:this.miscellaneousFeeData[b].cost,
                    currency:this.miscellaneousFeeData[b].currency,
                    subTotal:this.miscellaneousFeeData[b].subTotal,
                    remark:this.miscellaneousFeeData[b].remark,
                })
            }
            //培训费
            var trainingExpenseDatas=[];
            for(let p=0;p<this.trainingExpenseData.length;p++){
                trainingExpenseDatas.push({
                    id:this.trainingExpenseData[p].id,
                    diId:this.trainingExpenseData[p].diId,
                    type:this.trainingExpenseData[p].type,
                    days:this.trainingExpenseData[p].days,
                    nationalTravelFeeId:this.trainingExpenseData[p].nationalTravelFeeId,
                    cost:this.trainingExpenseData[p].cost,
                    currency:this.trainingExpenseData[p].currency,
                    subTotal:this.trainingExpenseData[p].subTotal,
                    remark:this.trainingExpenseData[p].remark,
                })
            }
            console.log(quarterageDatas)
            console.log(boardWagesDatas)
            console.log(miscellaneousFeeDatas)
            console.log(trainingExpenseDatas)
            console.log(this.DomesticFees.total+this.TotalAccommodationFee+this.TotalMeals+this.TotalMiscellaneous+this.trainingExpense)
            this.storageAPI(quarterageDatas,boardWagesDatas,miscellaneousFeeDatas,trainingExpenseDatas)
        },
        //保存API
        storageAPI(arrthre,arrfour,arrfive,arrsix){
            var url = "/api/Groups/PostEnterExitCostOperate"
            var that = this
            console.log(that.value)
            var data={
                    portType: 1,
                    userId: that.userId,
                    id: that.storageid,
                    diId: that.value,
                    choiceOne: that.choiceOne?1:0,
                    insidePay:0,
                    visa: that.DomesticFees.visafees,
                    visaRemark: that.DomesticFees.visafeesDescription,
                    yiMiao: that.DomesticFees.vaccinefees,
                    heSuan: that.DomesticFees.nucleicfees,
                    service: that.DomesticFees.serviceCharge,
                    ticket: that.DomesticFees.ticketsExhibitionL,
                    safe: that.DomesticFees.insurance,
                    choiceTwo: that.choiceTwo?1:0,
                    sumJJC:that.sumJJC?1:0,
                    sumGWC:that.sumGWC?1:0,
                    outsideJJPay:that.TotalExpenses.EconomyClasstotal,
                    outsaideGWPay:this.TotalExpenses.BusinessClasstotal,
                    airJJ:that.jjctotal,
                    airGW:that.gwctotal,
                    cityTranffic: that.TotalExpenses.TravellingExpenses,
                    currencys: that.currencys,
                    choiceThree:that.choiceThree?1:0,
                    quarterageData: arrthre,
                    choiceFour:that.choiceFour?1:0,
                    boardWagesData: arrfour,
                    choiceFive:that.choiceFive?1:0,
                    miscellaneousFeeData:arrfive,
                    choiceSix:that.choiceSix?1:0,
                    trainingExpenseData:arrsix,
                    airJJC_Checked:that.airJJC_Checked?1:0,
                    airGWC_Checked:that.airGWC_Checked?1:0,
                }
                console.log(data)
                console.log(JSON.stringify (data))
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token,
                    contentType:'application/json'
                },
                data:{
                    portType: 1,
                    userId: that.userId,
                    id: that.storageid,
                    diId: that.value,
                    choiceOne: that.choiceOne?1:0,
                    insidePay:0,
                    visa: that.DomesticFees.visafees,
                    visaRemark: that.DomesticFees.visafeesDescription,
                    yiMiao: that.DomesticFees.vaccinefees,
                    heSuan: that.DomesticFees.nucleicfees,
                    service: that.DomesticFees.serviceCharge,
                    ticket: that.DomesticFees.ticketsExhibitionL,
                    safe: that.DomesticFees.insurance,
                    choiceTwo: that.choiceTwo?1:0,
                    sumJJC:that.sumJJC?1:0,
                    sumGWC:that.sumGWC?1:0,
                    outsideJJPay:that.TotalExpenses.EconomyClasstotal,
                    outsaideGWPay:this.TotalExpenses.BusinessClasstotal,
                    airJJ:that.jjctotal,
                    airGW:that.gwctotal,
                    cityTranffic: that.TotalExpenses.TravellingExpenses,
                    currencys: that.currencys,
                    choiceThree:that.choiceThree?1:0,
                    quarterageData: arrthre,
                    choiceFour:that.choiceFour?1:0,
                    boardWagesData: arrfour,
                    choiceFive:that.choiceFive?1:0,
                    miscellaneousFeeData:arrfive,
                    choiceSix:that.choiceSix?1:0,
                    trainingExpenseData:arrsix,
                    airJJC_Checked:that.airJJC_Checked?1:0,
                    airGWC_Checked:that.airGWC_Checked?1:0,
                }
            }).then(function (res) {
                if(res.data.code==200){
                    console.log(res)
                    that.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    that.GetEnterExitCostInfobyDiId()
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error(error.message);
            });
        },
        //选择团组名称调用
        chengvalue(){
            this.GetEnterExitCostInfobyDiId()
        }
    },
    filters: {
        numFilter (value) {
            // 截取当前数据到小数点后两位
            let realVal = parseFloat(value).toFixed(2)
            return realVal
        }
    },
    watch: {
        'DomesticFees.total':{
            handler(newVal,oldVal) {
                this.jjctotal=this.DomesticFees.total+this.TotalAccommodationFee+this.TotalMeals+this.TotalMiscellaneous+this.trainingExpense+this.TotalExpenses.EconomyClasstotal;
                this.gwctotal=this.DomesticFees.total+this.TotalAccommodationFee+this.TotalMeals+this.TotalMiscellaneous+this.trainingExpense+this.TotalExpenses.BusinessClasstotal;
            },
        },
        TotalAccommodationFee:{
            handler(newVal,oldVal) {
                this.jjctotal=this.DomesticFees.total+this.TotalAccommodationFee+this.TotalMeals+this.TotalMiscellaneous+this.trainingExpense+this.TotalExpenses.EconomyClasstotal;
                this.gwctotal=this.DomesticFees.total+this.TotalAccommodationFee+this.TotalMeals+this.TotalMiscellaneous+this.trainingExpense+this.TotalExpenses.BusinessClasstotal;
            },
            
        },
        TotalMeals:{
            handler(newVal,oldVal) {
                this.jjctotal=this.DomesticFees.total+this.TotalAccommodationFee+this.TotalMeals+this.TotalMiscellaneous+this.trainingExpense+this.TotalExpenses.EconomyClasstotal;
                this.gwctotal=this.DomesticFees.total+this.TotalAccommodationFee+this.TotalMeals+this.TotalMiscellaneous+this.trainingExpense+this.TotalExpenses.BusinessClasstotal;
            },
        },
        TotalMiscellaneous:{
            handler(newVal,oldVal) {
                this.jjctotal=this.DomesticFees.total+this.TotalAccommodationFee+this.TotalMeals+this.TotalMiscellaneous+this.trainingExpense+this.TotalExpenses.EconomyClasstotal;
                this.gwctotal=this.DomesticFees.total+this.TotalAccommodationFee+this.TotalMeals+this.TotalMiscellaneous+this.trainingExpense+this.TotalExpenses.BusinessClasstotal;
            },
        },
        trainingExpense:{
            handler(newVal,oldVal) {
                this.jjctotal=this.DomesticFees.total+this.TotalAccommodationFee+this.TotalMeals+this.TotalMiscellaneous+this.trainingExpense+this.TotalExpenses.EconomyClasstotal;
                this.gwctotal=this.DomesticFees.total+this.TotalAccommodationFee+this.TotalMeals+this.TotalMiscellaneous+this.trainingExpense+this.TotalExpenses.BusinessClasstotal;
            },
        },
        'TotalExpenses.EconomyClasstotal':{
            handler(newVal,oldVal) {
                this.jjctotal=this.DomesticFees.total+this.TotalAccommodationFee+this.TotalMeals+this.TotalMiscellaneous+this.trainingExpense+this.TotalExpenses.EconomyClasstotal;
                this.gwctotal=this.DomesticFees.total+this.TotalAccommodationFee+this.TotalMeals+this.TotalMiscellaneous+this.trainingExpense+this.TotalExpenses.BusinessClasstotal;
            },
        },
        'TotalExpenses.BusinessClasstotal':{
            handler(newVal,oldVal) {
                this.jjctotal=this.DomesticFees.total+this.TotalAccommodationFee+this.TotalMeals+this.TotalMiscellaneous+this.trainingExpense+this.TotalExpenses.EconomyClasstotal;
                this.gwctotal=this.DomesticFees.total+this.TotalAccommodationFee+this.TotalMeals+this.TotalMiscellaneous+this.trainingExpense+this.TotalExpenses.BusinessClasstotal;
                // console.log(this.DomesticFees.total+this.TotalAccommodationFee+this.TotalMeals+this.TotalMiscellaneous+this.trainingExpense+this.TotalExpenses.BusinessClasstotal)
            },
        },
        //境内费用非空处理
        DomesticFees: {
            handler(newVal, oldVal) {
                if(newVal.insurance==undefined){
                    newVal.insurance=0
                }
                if(newVal.nucleicfees==undefined){
                    newVal.nucleicfees=0
                }
                if(newVal.serviceCharge==undefined){
                    newVal.serviceCharge=0
                }
                if(newVal.ticketsExhibitionL==undefined){
                    newVal.ticketsExhibitionL=0
                }
                if(newVal.vaccinefees==undefined){
                    newVal.vaccinefees=0
                }
                if(newVal.visafees==undefined){
                    newVal.visafees=0
                }
            },
            immediate: true,
            deep: true // 可以深度检测到 person 对象的属性值的变化
        },
        //国际旅费非空处理
        TotalExpenses: {
            handler(newVal, oldVal) {
                if(newVal.EconomyClass==undefined){
                    newVal.EconomyClass=0
                }
                if(newVal.BusinessClass==undefined){
                    newVal.BusinessClass=0
                }
                if(newVal.TravellingExpenses==undefined){
                    newVal.TravellingExpenses=0
                }
            },
            immediate: true,
            deep: true // 可以深度检测到 person 对象的属性值的变化
        }
    },
    mounted(){
        this.userId=JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.GetEnterExitCostDataSource();
        this.GetNationalTravelFeeData();
        console.log(this.currencys)
    }
}
</script>
<style>
.Entry-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 840px;
}
.Entry-head-li label{
    color: #606266;
    font-size: 15px;
    font-weight: 600;
}
.Entry-head{
    display: flex;
    justify-content: space-between;
}
.Entry-form{
    margin-top: 10px;
    border-top:2px solid #409EFF;
}
.Entry-li-inif{
    display: flex;
    width: 100%;
    border-top:1px solid #ebeef5;
    padding: 5px 0;
}
.Entry-li-inif:last-child{
    border-bottom:1px solid #ebeef5;
}
.Entry-li-lable{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
    margin-top: 20px;
}
.Entry-li-lables{
    display: flex;
    align-items: center;
    margin: 10px 0;
    margin-top: 20px;
}
.Entry-inif-box .depipt{
    display: inline-block;
    width: 240px;
}
.Entry-inif-box{
    margin-right: 20px;
}
.Entry-li-inif label{
    font-size: 14px;
    color: #606266;
}
.Entry-li-inif span{
    font-size: 14px;
    color: #606266;
}
.Entry-form .redzhu{
    font-size: 14px;
    color: red;
}
.sub-boxs{
    -ms-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    font-size: 14px;
    user-select: none;
    font-family: cursive;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.btn-Entry{
    text-align: right;
}
.Entry-all .el-checkbox__inner{
    width: 18px;
    height: 18px;
    margin-right: 10px;
}
.Entry-all .el-checkbox__inner::after{
    height: 10px;
    left: 6px;
}
</style>