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

<template>
    <div class="visaAgencyfee-all">
        <div class="visaAgencyfee-head">
            <div class="visaAgencyfee-head-title">签证代办</div>
            <div class="visaAgencyfee-head-select">
                <el-select filterable @change="PostGroupListByCTableAndUserId" style="width:300px" v-model="diid"
                    placeholder="请选择团组">
                    <el-option v-for="(item,index) in Options" :label="item.teamName" :value="item.id"
                        :key="index"></el-option>
                </el-select>
                <el-button @click="PostVisaFeeAddAndUpdate" type="primary">保存</el-button>
            </div>
        </div>
        <div style="margin:10px 0;color:#606266;">
            <span style="font-weight: bold;font-size:15px;">团队名称：</span>
            <span style="color:#606266;font-size:14px;">{{ delegationInfo.teamName }}&nbsp;&nbsp;&nbsp;</span>
            <span style="font-weight: bold;font-size:15px;">客户：</span>
            <span style="color:#606266;font-size:14px;">{{ delegationInfo.clientName }}&nbsp;&nbsp;&nbsp; {{
                }}&nbsp;&nbsp;&nbsp;</span>
            <span style="font-weight: bold;font-size:15px;">出访国家：</span>
            <span style="color:#606266;font-size:14px;">{{ delegationInfo.visitCountry }}&nbsp;&nbsp;&nbsp;</span>
            <span style="font-weight: bold;font-size:15px;">起止日期：</span>
            <span style="color:#606266;font-size:14px;">{{ delegationInfo.visitStartDate }}—{{
                delegationInfo.visitEndDate
                }}&nbsp;&nbsp;&nbsp;</span>
            <span style="font-weight: bold;font-size:15px;">天数/人数：</span>
            <span style="color:#606266;font-size:14px;">{{ delegationInfo.visitDays }}天/{{ delegationInfo.visitPNumber
                }}人</span>
        </div>
        <div class="visaAgencyfee-table">
            <el-table border :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                    <template slot-scope="scope">
                        <el-checkbox :true-label="1" :false-label="0" v-model="scope.row.isChecked">
                        </el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column prop="country" label="国家" width="180">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.country" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="visaFee" label="公务类型" width="180">
                    <template slot-scope="scope">
                        <el-select style="width:100%" filterable 
                            v-model="scope.row.obType" placeholder="请选择团组">
                            <el-option  label="大公务" :value=1 key='1'></el-option>
                            <el-option  label="小公务" :value=2 key='2'></el-option>
                            <!-- <el-option  label="未选择" :value=0 key='0'></el-option> -->
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column prop="visaFee" label="签证费" width="180">
                    <template slot-scope="scope">
                        <el-input-number style="width:100%;" :controls="false" v-model="scope.row.visaFee"
                            :precision="2"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="agencyFee" label="代办费" width="180">
                    <template slot-scope="scope">
                        <el-input-number style="width:100%;" :controls="false" v-model="scope.row.agencyFee"
                            :precision="2"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="otherFee" label="其他费用" width="180">
                    <template slot-scope="scope">
                        <el-input-number style="width:100%;" :controls="false" v-model="scope.row.otherFee"
                            :precision="2"></el-input-number>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="otherFee" label="备注">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.country" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column> -->
            </el-table>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            diid:0,
            tableData:[],
            tableDatas: [{
                id: 0,
                isChecked: 0,
                country: '',
                visaFee: 0,
                obType:1,
                agencyFee: 0,
                otherFee: 0,
            }, {
                id: 0,
                isChecked: 0,
                country: '',
                visaFee: 0,
                obType:1,
                agencyFee: 0,
                otherFee: 0,
            }, {
                id: 0,
                isChecked: 0,
                country: '',
                visaFee: 0,
                obType:1,
                agencyFee: 0,
                otherFee: 0,
            }, {
                id: 0,
                isChecked: 0,
                country: '',
                visaFee: 0,
                obType:1,
                agencyFee: 0,
                otherFee: 0,
            }, {
                id: 0,
                isChecked: 0,
                country: '',
                visaFee: 0,
                obType:1,
                agencyFee: 0,
                otherFee: 0,
            }, {
                id: 0,
                isChecked: 0,
                country: '',
                visaFee: 0,
                obType:1,
                agencyFee: 0,
                otherFee: 0,
            }],
            token:'',
            userId:'',
            Options:[],
            delegationInfo:{},
            multipleSelection:[]
        }
    },
    methods:{
        //团组下拉框
        PostGroupListByCTableAndUserId() {
            var url = "/api/Business/PostGroupListByCTableAndUserId"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType: 1,
                    pageIndex: 1,
                    pageSize: 10000,
                    cTable: 80,
                    userId: that.userId,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.Options=res.data.data;
                    if(that.diid==0){
                        that.diid=that.Options[0].id;
                    }
                    for(var i=0;i<that.Options.length;i++){
                        if(that.diid==that.Options[i].id){
                            that.delegationInfo=that.Options[i]
                        }
                    }
                    that.PostVisaFeeList();
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error(error);
            });
        },
        //详细
        PostVisaFeeList() {
            var url = "/api/Groups/PostVisaFeeList"
            var that = this                                                           
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType: 1,
                    diId:that.diid
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    if(res.data.data.length>0){
                        that.tableData=res.data.data;
                    }else{
                        console.log(that.tableDatas)
                        that.tableData = [
                            {
                                id: 0,
                                isChecked: 0,
                                country: '',
                                visaFee: 0,
                                obType:1,
                                agencyFee: 0,
                                otherFee: 0,
                            }, {
                                id: 0,
                                isChecked: 0,
                                country: '',
                                visaFee: 0,
                                obType:1,
                                agencyFee: 0,
                                otherFee: 0,
                            }, {
                                id: 0,
                                isChecked: 0,
                                country: '',
                                visaFee: 0,
                                obType:1,
                                agencyFee: 0,
                                otherFee: 0,
                            }, {
                                id: 0,
                                isChecked: 0,
                                country: '',
                                visaFee: 0,
                                obType:1,
                                agencyFee: 0,
                                otherFee: 0,
                            }, {
                                id: 0,
                                isChecked: 0,
                                country: '',
                                visaFee: 0,
                                obType:1,
                                agencyFee: 0,
                                otherFee: 0,
                            }, {
                                id: 0,
                                isChecked: 0,
                                country: '',
                                visaFee: 0,
                                obType:1,
                                agencyFee: 0,
                                otherFee: 0,
                            }
                        ]
                        var delegationInfos=[]
                        delegationInfos=[]
                        delegationInfos=that.delegationInfo.visitCountry.split("|")
                        for(var k=0;k<delegationInfos.length;k++){
                            that.tableData[k].country=delegationInfos[k];
                            that.tableData[k].isChecked=1;
                        }
                    }
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error(error);
            });
        },
        //保存
        PostVisaFeeAddAndUpdate() {
            var newsarr=[];
            for(var a=0;a<this.tableData.length;a++){
                if(this.tableData[a].country!=""){
                    newsarr.push(this.tableData[a])
                }
            }
            var url = "/api/Groups/PostVisaFeeAddAndUpdate"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType: 1,
                    opUserId: that.userId,
                    diId: that.diid,
                    visaFeeInfos: newsarr,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    that.PostVisaFeeList();
                }else{
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error(error);
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(this.multipleSelection);
        }
    },
    created(){
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
    },
    mounted(){
        this.PostGroupListByCTableAndUserId();
    }
}
</script>
<style>
.visaAgencyfee-all {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 830px;
}
.visaAgencyfee-head-title{
    font-size: 17px;
    font-weight: 600;
    color: #555;
}
.visaAgencyfee-head-select{
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}
.visaAgencyfee-table{
    margin-top: 10px;
}
</style>