oa-system/src/components/expenseMobileinfo.vue

<template>
    <div class="expenseMobileinfo-all" v-loading.fullscreen.lock="fullscreenLoading">
        <el-dialog top="20vh" custom-class="selfDialog" width="95%" title="详情" :visible.sync="fymxVisible">
            <div class="dialog-title">费用明细</div>
            <div class="fymxinfo" v-html="fymx"></div>
            
        </el-dialog>
        <div class="expenseMobileinfo-top">
            <div @click="back" class="back"><i style="font-weight:600 ;font-size: 16px;" class="el-icon-arrow-left"></i>子项返回</div>
            <div class="expenseMobileinfo-title">费用清单</div>
        </div>
        <div class="expenseMobileinfo-box">
            <div class="expenseMobileinfo-group">
                <div class="expenseMobileinfo-group-name">团队名称：{{GroupInfo.teamName}}</div>
                <div class="expenseMobileinfo-group-client">客户：{{GroupInfo.clientName}}</div>
                <div class="expenseMobileinfo-group-nation">出访国家：{{GroupInfo.visitCountry}}</div>
                <div style="display: flex;justify-content: space-between;flex-wrap:wrap;">
                    <div class="expenseMobileinfo-group-date">起止日期：{{chuli(GroupInfo.visitStartDate)}}~{{chuli(GroupInfo.visitEndDate)}}</div>
                    <div class="expenseMobileinfo-group-day">天数/人数：{{GroupInfo.visitDays}}天 / {{GroupInfo.visitPNumber}}人</div>
                </div>
                <div class="expenseMobileinfo-group-btn">
                    <el-button @click="PostAuditGrpCreditCardPayment(1)" size="mini" type="primary">通过</el-button>
                    <el-button @click="PostAuditGrpCreditCardPayment(2)" size="mini" type="danger">驳回</el-button>
                    <el-button @click="PostAuditGrpCreditCardPayment(2)" size="mini" type="warning">取消通过</el-button>
                </div>
            </div>
            <div class="expenseMobileinfo-content">
                <div class="expenseMobileinfo-menu">
                    <div v-show="item.name!='文档下载'" @click="menuliclick(item.id,index)" class="expenseMobileinfo-menu-li" v-for="(item,index) in classify" :key="index">{{item.name}}</div>
                </div>
                <div class="expenseMobileinfo-list">
                    <div v-for="(items,index) in tabledata" :key="index" class="expenseMobileinfo-list-card">
                        <el-checkbox-group @change="lookformtype" v-model="formtype">
                            <el-checkbox :label="items.id"></el-checkbox>
                        </el-checkbox-group>
                        <div class="ex-card-name">费用名称：<span @click="expensedetail(items.priceMsgContent)" style="color: #409eff;text-decoration-line:underline">{{items.priceNameContent}}</span></div>
                        <div class="ex-card-module">费用模块：{{items.priceName}}</div>
                        <div v-if="thisID==79" class="ex-card-copewith">Bus名称：{{items.busName}}</div>
                        <div class="ex-card-copewith">应付款金额：{{items.waitPay}}</div>
                        <div class="ex-card-payment">此次付款金额：{{items.currPay}}</div>
                        <div class="ex-card-balance">剩余尾款：{{items.balance}}</div>
                        <div class="ex-card-applicant">申请人：{{items.operatorName}}</div>
                        <div class="ex-card-auditor">审核人：{{items.auditOperatorName}}</div>
                        <div class="ex-card-budget">超预算比例：{{items.overBudget}}</div>
                        <div class="ex-card-paymethod">支付方式：{{items.payType}}</div>
                        <div class="ex-card-cardtype">卡类型：{{items.cardType}}</div>
                        <div class="ex-card-btn">
                            <el-button @click="passbtn(items.id,1)" v-if='items.isAuditGM == 0 || items.isAuditGM == 2' size="mini" type="primary">通过</el-button>
                            <el-button @click="nopassbtn(items.id,2)" size="mini" type="danger" v-if='items.isAuditGM == 0'>驳回</el-button>
                            <el-button @click="nopassbtn(items.id,2)" v-if='items.isAuditGM == 1|| items.isAuditGM == 3' size="mini" type="warning">取消通过</el-button>
                        </div>
                    </div>
                    <div style="text-align: center;" v-if="tabledata.length==0">暂无数据</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            uid:'',
            classify:[],
            diid:'',
            GroupInfo:{},
            tabledata:[],
            fullscreenLoading:false,
            thisID:0,
            fymx:'',
            fymxVisible:false,
            formtype:[],
            formtypestring:"",
        }
    },
    methods:{
        //chili
        chuli(val){
            val=val+""
            return val.split(' ')[0]
        },
        //获取分类
        PostGroupDirectionalClassificationInit() {
            this.fullscreenLoading=true;
            var url = "/api/Business/PostGroupDirectionalClassificationInit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.classify=res.data.data;
                    setTimeout(function () {
                        that.thisID=that.classify[0].id;
                        that.menuliclick(that.thisID,0)
                    },500)
                }else{
                    that.fullscreenLoading=false;
                }
            })
        },
        //获取团组详情
        PostShareGroupInfo(){
            var url = "/api/Business/PostShareGroupInfo"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.userid
                },
                data:{
                    portType:1,
                    id: that.diid
                }
            }).then(function (res) {
                if(res.data.code==200){
                    that.GroupInfo=res.data.data;
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        //menu-li click
        menuliclick(id,index){
            this.formtype=[];
            this.tabledata=[];
            this.thisID=id;
            var boxes = document.getElementsByClassName('expenseMobileinfo-menu-li');
            for(let i=0;i<boxes.length;i++){
                boxes[index].style.backgroundColor="#ede8e8";
                boxes[index].style.color="#000";
                boxes[i].style.color="#555";
                boxes[i].style.backgroundColor="#FFF";
            }
            this.getPostSearchGrpCreditCardPayment(this.thisID);
        },
        //获取详情
        getPostSearchGrpCreditCardPayment(val) {
            this.fullscreenLoading=true;
            var url = "/api/Groups/PostSearchGrpCreditCardPayment"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType: 1,
                    userId: 21,
                    pageId: 47,
                    diId: that.diid,
                    label: val,
                    auditStatus: -1
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.tabledata=res.data.data.data.detailList;
                    let divbox=(document.getElementsByClassName('expenseMobileinfo-group')[0].offsetHeight)+62;
                    document.getElementsByClassName('expenseMobileinfo-content')[0].style.height=(document.documentElement.clientHeight)-divbox+'px' || (document.body.clientHeight)-divbox+'px'
                    that.fullscreenLoading=false;
                }else{
                    that.fullscreenLoading=false;
                }
            })
        },
        back(){
            this.$router.back();
            // this.$router.push({path: '/expenseMobile'});
        },
        passbtn(val,type){
            this.noPostAuditGrpCreditCardPayment(val,type)
        },
        nopassbtn(val,type){
            this.noPostAuditGrpCreditCardPayment(val,type)
        },
        //单独审批
        noPostAuditGrpCreditCardPayment(val, num) {
            if(this.uid==undefined||this.uid!=21||this.uid==22){
                return  this.$message.error("无审核权限");
            }
            var url = "/api/Groups/PostAuditGrpCreditCardPayment"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType:1,
                    userId:that.uid,
                    pageId:47,
                    CreditIdStr: val + '',
                    auditCode: num,//1审核通过，2审核未通过
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                        offset: 50
                    });
                    that.getPostSearchGrpCreditCardPayment(that.thisID);
                }else{
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                        offset: 50
                    });
                }
            })
        },
        //多选审批
        PostAuditGrpCreditCardPayment(val) {
            if(this.formtypestring==""){
                this.$message({
                    message: "未勾选费用",
                    type: 'warning',
                    offset: 50
                });
                return
            }
            if(this.uid==undefined||this.uid!=21||this.uid==22){
                return  this.$message.error("无审核权限");
            }
            var url = "/api/Groups/PostAuditGrpCreditCardPayment"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType:1,
                    userId:that.uid,
                    pageId:47,
                    CreditIdStr: that.formtypestring,
                    auditCode: val,//1审核通过，2审核未通过
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.formtype=[],
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                        offset: 50
                    });
                    that.getPostSearchGrpCreditCardPayment(that.thisID);
                }else{
                    that.$message({
                        message: res.data.msg,
                        type: 'warning',
                        offset: 50
                    });
                }
            })
        },
        //费用明细
        expensedetail(val){
            this.fymxVisible=true;
            this.fymx=val;
        },
        lookformtype(){
            this.formtypestring='';
            for (var i = 0; i < this.formtype.length; i++) {
                this.formtypestring += this.formtype[i] + ','
            }
            this.formtypestring = this.formtypestring.substring(0, this.formtypestring.length - 1)
        }
    },
    mounted(){
        this.diid = this.$route.query.id;
        this.uid = this.$route.query.uid;
        this.PostShareGroupInfo();
        this.PostGroupDirectionalClassificationInit();
        
        // document.getElementsByClassName('expenseMobileinfo-list')[0].style.height=(document.documentElement.clientHeight)-divbox+'px' || (document.body.clientHeight)-divbox+'px'
    }
}
</script>
<style>
*{
    margin: 0;
    padding: 0;
}
.expenseMobileinfo-all{
    background-color: #fff;
    font-size: 14px;
    color: #555;
}
.expenseMobileinfo-top{
    position: fixed;
    top: 0;
    background-color: #fff;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #ede8e8; 
}
.back{
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 16px;
}
.expenseMobileinfo-title{
    margin: 10px 0;
    font-size: 17px;
    font-weight:600 ;
}
.expenseMobileinfo-box{
    padding-top: 43px;
}
.expenseMobileinfo-menu{
    width: 100px;
    border-bottom: 1px solid #ede8e8;
    border-right: 1px solid #ede8e8;
    border-left: 1px solid #ede8e8;
    overflow: auto;
}
.expenseMobileinfo-menu-li{
    text-align: center;
    padding: 10px 0;

}
.expenseMobileinfo-menu-li{
    border-bottom: 1px solid #ede8e8;
}
.expenseMobileinfo-group{
    padding: 5px;
    border-bottom: 1px solid #ede8e8;
}
.expenseMobileinfo-group-client{
    margin: 5px 0;
}
.expenseMobileinfo-group-date{
    margin: 5px 0;
}
.expenseMobileinfo-content{
    display: flex;
}
.expenseMobileinfo-list-card{
    padding: 5px;
    border-radius:5px ;
    box-shadow: 0 0 10px #0005;
    margin-top:5px ;
}
.expenseMobileinfo-list{
    overflow: auto;
    padding: 5px;
    flex: 2;
}
.expenseMobileinfo-list-card div{
    margin-bottom: 5px;
}
.ex-card-btn{
    text-align: right;
}
.expenseMobileinfo-all .el-dialog__header{
    display: none;
}
.expenseMobileinfo-all .el-dialog__body{
    padding: 10px;
}
.fymxinfo{
    max-height: 300px;
    overflow: auto;
}
.expenseMobileinfo-all .dialog-title{
    margin-bottom: 10px;
}
.expenseMobileinfo-list .el-checkbox__label{
    display: none;
}
.expenseMobileinfo-group-btn{
    text-align: right;
}
</style>