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 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 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-lable">
                        <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-lable">
                        <div class="li-lable">二、国际旅费合计：</div>
                        <div style="display: flex;">
                            <div class="li-lable">
                                <label>（经济舱）</label>
                                <div class="sub-boxs">{{TotalExpenses.EconomyClasstotal=(TotalExpenses.EconomyClass+TotalExpenses.TravellingExpenses)|numFilter}}</div>
                                <span>元/人</span>
                            </div>
                            &nbsp;&nbsp;                         
                            <div class="li-lable">
                                <label>（公务舱）</label>
                                <div class="sub-boxs">{{TotalExpenses.EconomyClasstotal=(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="2" v-model="item.rate"></el-input-number>
                        </div>
                    </div>
                </div>
                <div class="Entry-form-li">
                    <div class="Entry-li-lable">
                        <div class="li-lable">三、住宿费：</div>
                        <div style="display: flex;">
                            <div class="li-lable">
                                <label>合计:</label>
                                <div class="sub-boxs">{{TotalExpenses.EconomyClasstotal=(TotalExpenses.EconomyClass+TotalExpenses.TravellingExpenses)|numFilter}}</div>
                                <span>元/人</span>
                            </div>
                        </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-input size="mini" v-model="scope.row.city"></el-input>
                                </template>
                                <!-- <template slot-scope="scope">
                                    <el-select size="mini" v-model="scope.row.place" filterable placeholder="请选择">
                                        <el-option
                                            v-for="item in placeinif"
                                            :key="item.id"
                                            :label="item.city=='所有城市'?item.country:item.city"
                                            :value="item.city=='所有城市'?item.country:item.city"
                                            >
                                            <span style="float: left">{{item.city}}</span>
                                            <span style="float: right; color: #8492a6; font-size: 13px">{{item.country}}</span>
                                        </el-option>
                                    </el-select>
                                </template> -->
                            </el-table-column>
                            <el-table-column
                            prop="cost"
                            label=" 费用标准"
                            width="180">
                                <template slot-scope="scope">
                                    <el-input-number 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-lable">
                        <div class="li-lable">四、伙食费：</div>
                        <div style="display: flex;">
                            <div class="li-lable">
                                <label>合计:</label>
                                <div class="sub-boxs">{{TotalExpenses.EconomyClasstotal=(TotalExpenses.EconomyClass+TotalExpenses.TravellingExpenses)|numFilter}}</div>
                                <span>元/人</span>
                            </div>
                        </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" v-model="scope.row.place" filterable placeholder="请选择">
                                        <el-option
                                            v-for="item in placeinif"
                                            :key="item.id"
                                            :label="item.city=='所有城市'?item.country:item.city"
                                            :value="item.city=='所有城市'?item.country:item.city"
                                            >
                                            <span style="float: left">{{item.city}}</span>
                                            <span style="float: right; color: #8492a6; font-size: 13px">{{item.country}}</span>
                                        </el-option>
                                    </el-select>
                                </template> -->
                            </el-table-column>
                            <el-table-column
                            prop="cost"
                            label=" 费用标准"
                            width="180">
                                <template slot-scope="scope">
                                    <el-input-number 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-lable">
                        <div class="li-lable">五、公杂费：</div>
                        <div style="display: flex;">
                            <div class="li-lable">
                                <label>合计:</label>
                                <div class="sub-boxs">{{TotalExpenses.EconomyClasstotal=(TotalExpenses.EconomyClass+TotalExpenses.TravellingExpenses)|numFilter}}</div>
                                <span>元/人</span>
                            </div>
                        </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 size="mini" v-model="scope.row.place" filterable placeholder="请选择">
                                        <el-option
                                            v-for="item in placeinif"
                                            :key="item.id"
                                            :label="item.city=='所有城市'?item.country:item.city"
                                            :value="item.city=='所有城市'?item.country:item.city"
                                            >
                                            <span style="float: left">{{item.city}}</span>
                                            <span style="float: right; color: #8492a6; font-size: 13px">{{item.country}}</span>
                                        </el-option>
                                    </el-select>
                                </template> -->
                            </el-table-column>
                            <el-table-column
                            prop="cost"
                            label=" 费用标准"
                            width="180">
                                <template slot-scope="scope">
                                    <el-input-number 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-lable">
                        <div class="li-lable">六、培训费</div>
                        <div style="display: flex;">
                            <div class="li-lable">
                                <label>合计:</label>
                                <div class="sub-boxs">{{TotalExpenses.EconomyClasstotal=(TotalExpenses.EconomyClass+TotalExpenses.TravellingExpenses)|numFilter}}</div>
                                <span>元/人</span>
                            </div>
                        </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 size="mini" v-model="scope.row.place" filterable placeholder="请选择">
                                        <el-option
                                            v-for="item in placeinif"
                                            :key="item.id"
                                            :label="item.city=='所有城市'?item.country:item.city"
                                            :value="item.city=='所有城市'?item.country:item.city"
                                            >
                                            <span style="float: left">{{item.city}}</span>
                                            <span style="float: right; color: #8492a6; font-size: 13px">{{item.country}}</span>
                                        </el-option>
                                    </el-select>
                                </template> -->
                            </el-table-column>
                            <el-table-column
                            prop="cost"
                            label=" 费用标准"
                            width="180">
                                <template slot-scope="scope">
                                    <el-input-number 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>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            value:'',
            options:[],
            Visafees:'',
            Visadepicted:'',
            currencys: [],
            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,//公务舱合计
            },
            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",
            },
        }
    },
    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.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)
                if(res.data.code==200){
                    that.placeinif=res.data.data;
                    console.log(that.placeinif)
                }
            })
        },
        GetEnterExitCostInfobyDiId(){
            var url = "/api/Groups/GetEnterExitCostInfobyDiId"
            var that = this
            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;
                    //住宿费
                    that.quarterageData=res.data.data.quarterageData;
                    //伙食费
                    that.boardWagesData=res.data.data.boardWagesData;
                    //公杂费
                    that.miscellaneousFeeData=res.data.data.miscellaneousFeeData;
                    //培训费
                    that.trainingExpenseData=res.data.data.trainingExpenseData;
                }
            })
        },
        //下拉
        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)
        }
    },
    filters: {
        numFilter (value) {
            // 截取当前数据到小数点后两位
            let realVal = parseFloat(value).toFixed(2)
            return realVal
        }
    },
    watch: {
        //境内费用
        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.GetEnterExitCostDataSource();
        this.GetNationalTravelFeeData();
    }
}
</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;
    margin: 10px 0;
}
.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);
}
.opc-city{
    
}
</style>