oa-system/src/components/Finance/Overspendedit.vue

<template>
    <div>
        <div class="overspendedit-all">
            <div class="overspendedit-form">
                <el-form ref="form" :rules="rules" :model="form" label-width="100px">
                    <el-form-item label="团队名称">
                        <el-select filterable  @change="getheadtitle" :disabled="disableds" v-model="DiId" placeholder="请选择团队名称">
                            <el-option v-for="(item,index) in cTablelist" :key="index" :label="item.teamName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="团 号">
                        <el-input disabled v-model="form.tourNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="客 户">
                        <el-input disabled v-model="form.customers"></el-input>
                    </el-form-item>
                    <el-form-item label="出访国家">
                        <el-input disabled v-model="form.countriesVisited"></el-input>
                    </el-form-item>
                    <el-form-item prop="priceName"  label="费用名称">
                        <el-input v-model="form.priceName"></el-input>
                    </el-form-item>
                    <el-form-item prop="nation" label="地区">
                        <el-select filterable v-model="form.nation" placeholder="请选择地区">
                            <el-option v-for="(item,index) in nationarr" :key="index" :label="item.country+'-'+item.city" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="currency" label="费用金额">
                        <div style="display: flex;justify-content: space-between;">
                            <el-input-number style="width:60%" :precision="2" placeholder="费用金额" v-model="form.price" :controls='false'>
                            </el-input-number>
                            <el-select  style="width:38%" v-model="form.currency" filterable  placeholder="币种">
                                <el-option v-for="(item,index) in currencyType" :key="index" :label="item.currencyCode" :value="item.currencyId"></el-option>
                            </el-select>
                        </div>
                    </el-form-item>
                    <el-form-item prop="priceCount" label="数量">
                        <el-input-number style="width:100%" :precision="0" placeholder="数量" v-model="form.priceCount" :controls='false'>
                        </el-input-number>
                    </el-form-item>
                    <el-form-item prop="priceDt" label="产生日期">
                        <el-date-picker
                        style="width:100%"
                        v-model="form.priceDt"
                        type="date"
                        placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item prop="payee" label="收款方">
                        <el-input v-model="form.payee"></el-input>
                    </el-form-item>
                    <el-form-item prop="costSign" label="费用标识">
                        <el-select v-model="form.costSign" placeholder="请选择费用标识">
                            <el-option label="公转" value='0'></el-option>
                            <el-option label="私转" value='1'></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="payType" label="支付方式">
                        <el-select v-model="form.payType" placeholder="请选择支付方式">
                            <el-option v-for="(item,index) in payment" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="form.payType==72" prop="payCardId" label="卡类型:">
                        <el-select v-model="form.payCardId" placeholder="请选择卡类型">
                            <el-option v-for="(item,index) in cardType" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="priceType" label="费用类型">
                        <el-select @change="priceTypechanges" v-model="form.priceType" placeholder="请选择费用类型">
                            <el-option v-for="(item,index) in priceType" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="priceDetailType" v-if="priceDetailTypes.length>0" label="详细类型">
                        <el-select @change="xxtypechange()" v-model="form.priceDetailType" placeholder="请选择详细类型">
                            <el-option v-for="(item,index) in priceDetailTypes" :key="index" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-show="userId==22" prop="coefficient" label="费用系数">
                        <el-input-number style="width:100%" :precision="2" placeholder="费用系数" v-model="form.coefficient" :controls='false'>
                        </el-input-number>
                    </el-form-item>
                    <el-form-item style="width:100%" label="备注">
                        <el-input type="textarea" :rows="5" v-model="form.remark"></el-input>
                    </el-form-item>
                    <el-form-item style="width:100%;text-align: right;">
                        <el-button type="primary" @click="submitForm('form')">保 存</el-button>
                        <el-button @click="returnbtn">返 回</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            disableds:true,
            DiId:'',
            Id:'',
            pageId:'',
            token:'',
            userId:'',
            form: {
                tourNumber:'',//团号
                customers:'',//客户
                countriesVisited:'',//出访国家
                priceName:'',//费用名称
                price:0,//金额
                priceType:'',//费用类型Id
                priceDetailType:'',//费用详细类型Id
                coefficient:1,//系数
                currency:'',//费用币种
                payee:'',//收款方
                costSign:'',//费用标识
                payType:'',//支付方式
                payCardId:'',//卡类型，支付方式为刷卡时有效
                filePath:'',//附件路径
                remark:'',//备注
                createUser:'',//操作人员
                priceCount:1,//数量
                priceDt:'',//产生日期
                nation:''//国家
            },
            nationarr:[],
            payment:[],
            priceType:[],
            priceDetailType:[],
            priceDetailTypes:[],
            cardType:[],
            currencyType:[],
            cTablelist:[],
            rules: {
                priceName: [
                    { required: true, message: '请输入费用名称', trigger: 'blur' },
                ],
                currency: [
                    { required: true, message: '请选择币种', trigger: 'change' }
                ],
                payee: [
                    { required: true, message: '请输入收款方', trigger: 'blur' }
                ],
                costSign: [
                    { required: true, message: '请选择费用标识', trigger: 'change' }
                ],
                payType: [
                    {required: true, message: '请选择支付方式', trigger: 'change' }
                ],
                payCardId: [
                    { required: true, message: '请选择卡类型', trigger: 'change' }
                ],
                priceType: [
                    { required: true, message: '请选择费用类型', trigger: 'change' }
                ],
                priceDetailType: [
                    { required: true, message: '请选择详细类型', trigger: 'change' }
                ],
                coefficient: [
                    { required: true, message: '请输入费用系数', trigger: 'blur' }
                ]
                ,
                priceCount: [
                    { required: true, message: '请输入数量', trigger: 'blur' }
                ]
                ,
                priceDt: [
                    { required: true, message: '请选择日期费', trigger: 'change' }
                ],
                nation:[
                    {required: true, message: '国家', trigger: 'change'}
                ]
            },
            coefficientarr:[]
        }
    },
    methods: {
        onSubmit() {
            this.datetime(this.form.priceDt)
        },
        //处理日期
        datetime(val){
            var date=new Date(val);
            var y=date.getFullYear();
            var m=date.getMonth()+1>=10?date.getMonth()+1:'0'+(date.getMonth()+1).toString();
            var d=date.getDate()>=10?date.getDate():'0'+(date.getDate()).toString();
            return y+'-'+m+'-'+d
        },
        //获取国家基础数据
        OpCarCityResult(){
            var url = "/api/Groups/OpCarCityResult"
            var that = this
            this.$axios({
                method: 'get',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },
            }).then(function (res) {
                if(res.data.code==200){
                   that.nationarr=res.data.data;
                }else{
                    that.$message({
                        message:res.data.msg ,
                        type: 'warning',
                    });
                }
            })
        },
        //切换详细类型
        xxtypechange(){
            console.log(this.form.priceDetailType);
            for(let i=0;i<this.coefficientarr.length;i++){
                if(this.form.priceDetailType==this.coefficientarr[i].id){
                    this.form.coefficient=this.coefficientarr[i].coefficient;
                }
            }
        },
        //获取系数
        QueryCoefficientConfig(){
            var url = "/api/Financial/QueryCoefficientConfig"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer '
                },

            }).then(function (res) {
                if(res.data.code==200){
                   that.coefficientarr=res.data.data;
                }else{
                    that.$message({
                        message:res.data.msg ,
                        type: 'warning',
                    });
                }
            })
        },
        //获取超支基础数据
        PostGroupExtraCost_ListDataInit(){
            var url = "/api/Financial/PostGroupExtraCost_ListDataInit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data:{
                    portType:1,
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.payment=res.data.data.payment;
                    that.priceDetailType=res.data.data.priceDetailType;
                    that.priceType=res.data.data.priceType;
                    that.cardType=res.data.data.card;
                    that.OpCarCityResult();
                    that.QueryCoefficientConfig();
                }else{
                    that.$message({
                        message:res.data.msg ,
                        type: 'warning',
                    });
                }
            })
        },
        //费用类型changes
        priceTypechanges(val){
            this.form.coefficient=1;
            this.form.priceDetailType='',
            this.priceDetailTypes=[];
            var priceDetailTypearr=[];
            for(var i=0;i<this.priceDetailType.length;i++){
                if(val+''==this.priceDetailType[i].remark){
                    priceDetailTypearr.push(this.priceDetailType[i])
                }
            }
            this.priceDetailTypes=priceDetailTypearr;
        },
        //费用类型change
        priceTypechange(val){
            console.log(val)
            // this.form.priceDetailType='',
            this.priceDetailTypes=[];
            var priceDetailTypearr=[];
            for(var i=0;i<this.priceDetailType.length;i++){
                if(val+''==this.priceDetailType[i].remark){
                    priceDetailTypearr.push(this.priceDetailType[i])
                }
            }
            this.priceDetailTypes=priceDetailTypearr;
        },
        //获取团号
        getheadtitle(){
            for(let i=0;i<this.cTablelist.length;i++){
                if(this.DiId==this.cTablelist[i].id){
                    this.form.tourNumber=this.cTablelist[i].tourCode;
                    this.form.customers=this.cTablelist[i].clientName;
                    this.form.countriesVisited=this.cTablelist[i].visitCountry;
                }
            }
        },
        //获取cTable
        PostPageLinkCTable(){
            var url = "/api/Business/PostPageLinkCTable"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data:{
                    pageId:that.pageId,
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.cTable=res.data.data.cTable;
                    //调用获取币种、
                    that.PostGroupTeamRateByDiIdAndCTableId()
                    //调用获取可以操作的团
                    that.PostGroupListByCTableAndUserId();
                }else{
                    that.$message({
                        message:res.data.msg ,
                        type: 'warning',
                    });
                }
            })
        },
        //获取可操作的团
        PostGroupListByCTableAndUserId(){
            var url = "/api/Business/PostGroupListByCTableAndUserId"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data:{
                    portType:1,
                    pageIndex:1,
                    pageSize:10000,
                    cTable:that.cTable,
                    userId:that.userId
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.cTablelist=res.data.data;
                    that.getheadtitle();
                }else{
                    that.$message({
                        message:res.data.msg ,
                        type: 'warning',
                    });
                }
            })
        },
        //获取详情
        PostGroupExtraCost_Detail(){
            if(this.Id!=this.Id){
                return
            }
            var url = "/api/Financial/PostGroupExtraCost_Detail"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data:{
                    portType:1,
                    id:that.Id,
                }
            }).then(function (res) {
                if(res.data.code){
                    that.form.coefficient=res.data.data.coefficient;
                    that.form.payee=res.data.data.payee;
                    that.form.price=res.data.data.price;
                    that.form.currency=res.data.data.priceCurrency;
                    that.form.priceName=res.data.data.priceName;
                    that.form.priceType=res.data.data.priceType;
                    that.form.priceDetailType=res.data.data.priceDetailType;
                    that.form.payType=res.data.data.payDId;
                    that.form.costSign=res.data.data.orbitalPrivateTransfer+'';
                    that.form.payCardId=res.data.data.ctdId==0?'':res.data.data.ctdId;
                    that.form.priceCount=res.data.data.priceCount;
                    that.form.remark=res.data.data.remark;
                    that.form.priceDt=res.data.data.priceDt;
                    that.form.nation=res.data.data.area;
                    that.priceTypechange(that.form.priceType)

                    
                    // setTimeout(that.priceTypechange(that.form.priceType),5000)
                }else{
                    that.$message({
                        message:res.data.msg ,
                        type: 'warning',
                    });
                }
            })
        },
        //获取币种
        PostGroupTeamRateByDiIdAndCTableId(){
            var url = "/api/Business/PostGroupTeamRateByDiIdAndCTableId"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data:{
                    portType:1,
                    diId:that.DiId,
                    cTable:that.cTable,
                }
            }).then(function (res) {
                if(res.data.code){
                    that.currencyType=res.data.data.teamRates;
                    if(that.currencyType.length==0){
                        that.$message({
                            message:'未设置超支汇率' ,
                            type: 'warning',
                        });
                    }
                }else{
                    that.$message({
                        message:res.data.msg ,
                        type: 'warning',
                    });
                }
            })
        },
        //超支费用api
        PostGroupExtraCost_Operator(){
            var url = "/api/Financial/PostGroupExtraCost_Operator"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userId
                },
                data:{
                    portType:1,
                    editType:that.Id!=that.Id?1:2,
                    id:that.Id!=that.Id?0:that.Id,
                    diId:that.DiId,
                    priceName:that.form.priceName,
                    price:that.form.price,
                    priceType:that.form.priceType,
                    priceDetailType:that.priceDetailTypes.length!=0?that.form.priceDetailType:0,
                    coefficient:that.form.coefficient,
                    currency:that.form.currency,
                    payee:that.form.payee,
                    costSign:Number(that.form.costSign),
                    payType:that.form.payType,
                    payCardId:that.form.payType==72?that.form.payCardId:0,
                    filePath:'',
                    remark:that.form.remark,
                    createUser:that.userId,
                    priceCount:that.form.priceCount,
                    area :that.form.nation,
                    priceDt:that.datetime(that.form.priceDt),
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    setTimeout(that.returnbtn,1000)
                }else{
                    that.$message({
                        message:res.data.msg ,
                        type: 'warning',
                    });
                }
            })
        },
        //保存
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.PostGroupExtraCost_Operator();
                } else {
                    this.$message({
                        message:'请将红框补充完整！',
                        type: 'warning',
                    });
                }
            });
        },
        //返回
        returnbtn(){
            this.$router.push({
                path: "/home/Overspend",
                query: {
                    DiId: this.DiId,
                }
            })
        }
    },
    created(){
        this.pageId = localStorage.getItem('indexs').split('-')[1];
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.DiId = Number(this.$route.query.DiId);
        this.Id = Number(this.$route.query.Id);
        if(this.Id!=this.Id){
            this.disableds=false
        }else{
            this.disableds=true
        }
        //调用获取超支基础数据
        this.PostGroupExtraCost_ListDataInit();
    },
    mounted(){
        //hguoquctb
        this.PostPageLinkCTable();
        //调用获取详情
        this.PostGroupExtraCost_Detail();
        
    }   

}
</script>
<style>
.overspendedit-all{
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    height: 100%;
    min-height: 830px;
}
.overspendedit-form .el-form-item{
    width:25%;
    min-width:370px;
}
.overspendedit-form .el-form{
    display: flex;
    flex-wrap: wrap;
    
}
.overspendedit-form .el-select{
    width: 100%;
}
.overspendedit-form .el-input-number.is-without-controls .el-input__inner{
    text-align: left;
}
</style>.