oa-system/src/components/expenseMobile.vue

<template>
    <div class="expenseMobile-all">
        <el-dialog top="20vh" custom-class="selfDialog" width="95%" title="详情" :visible.sync="expenseMobileVisible">
            <div class="dialog-title">详情</div>
            <div class="dialog-info">
                <div class="dialog-info-ms">费用描述：{{dailydata.instructions}}</div>
                <div class="dialog-info-zj">费用总计：{{townum(dailydata.sumPrice)}}</div>
                <div class="dialog-info-sh">
                    <div>财务审核：{{dailydata.fAuditDesc}}</div>
                    <div>总经理审核：{{dailydata.mAuditDesc}}</div>
                    <div>是否付款：{{ dailydata.isPay==1?'已付款':'未付款' }}</div>
                </div>
            </div>
            <div class="dialog-title">具体费用</div>
            <div class="dialog-list">
                <div v-for="(items,index) in dailydata.feeContents" :key="index" class="dialog-list-li">
                    <div>费用项目:{{items.priceName}}</div>
                    <div class="info-sl">
                        <div>数量:{{items.quantity}}</div>
                        <div>单价(CNY):{{townum(items.price)}}</div>
                        <div>小计(CNY):{{townum(items.itemTotal)}}</div>
                    </div>
                    <div>备注:{{items.remark}}</div>
                </div>
            </div>
        </el-dialog>
        <div v-if="platejudgment==1">
            <div class="expenseMobile-top">
                <div class="expenseMobile-title">{{a}}日常付款申请{{b}}</div>
                <div class="expenseMobile-search">
                    <el-input clearable placeholder="请输入费用描述" v-model="input" class="input-with-select">
                        <el-button @click="searchbtn" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </div>
            <div id="scroll-div" ref="element" class="daily-box">
                <div class="daily-card" v-for="(item,index) in tableData" :key="index">
                    <div class="card-description">费用描述：{{item.instructions}}</div>
                    <div class="card-date">申请时间：{{item.createTime}}</div>
                    <div class="card-expense">
                        <span>费用总计：{{townum(item.sumPrice)}}</span>
                        <span>申请人：{{item.createUser}}</span>
                    </div>
                    <div class="card-btn">
                        <el-button @click="infobtn(item)" size="mini">详情</el-button>
                        <el-button size="mini" @click="PostDelDailyPaymentAudit(item.id,1)" type="primary">通过</el-button>
                        <el-button size="mini" @click="PostDelDailyPaymentAudit(item.id,2)" type="danger">拒绝</el-button>
                    </div>
                </div>
            </div>
            <div id="tshezi" style="padding-bottom: 65px;">
                <div v-if="zwgd" class="expenseMobile-zwgd">暂无更多</div>
                <div v-if="!zwgd" class="expenseMobile-zwgd">加载中！</div>
            </div>
        </div>
        <div v-else>
            <div class="expenseMobile-top">
                <div class="expenseMobile-title">费用审核</div>
                <div class="expenseMobile-search">
                    <el-input clearable placeholder="请输入团组名称" v-model="value" class="input-with-select">
                        <el-button @click="searchexamine" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </div>
            <div id="examine-div" class="examine-box">
                <div v-for="(info,index) in groupData" :key="index" class="examine-card">
                    <div class="examine-card-name">团组名称：{{info.teamName}}</div>
                    <div class="examine-card-date">出访时间：{{cltade(info.visitDate)}}</div>
                    <div class="examine-card-client">客户名称：{{info.clientName}}</div>
                    <div class="examine-card-operator">
                        <div>天数/人数：{{info.visitDays}}/{{info.visitPNumber}}</div>
                        <div>接团操作人：{{info.jietuanOperator}}</div>
                    </div>
                    <div class="examine-card-btn">
                        <el-button @click="CheckCost(info)" size="mini" type="primary">查看费用</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="expenseMobile-tabtn">
            <div class="tabtn-box">
                <div @click="rcbtn">
                    <div  v-if="platejudgment==1"><i style="font-size:22px;" class="el-icon-s-goods"></i></div>
                    <div v-else><i style="font-size:20px;" class="el-icon-goods"></i></div>
                    <div style="font-size:14px;">日常</div>
                </div>
                <div @click="tzbtn">
                    <div v-if="platejudgment==2"><i style="font-size:22px;" class="el-icon-s-goods"></i></div>
                    <div v-else><i style="font-size:20px;" class="el-icon-goods"></i></div>
                    <div style="font-size:14px;">团组</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            tableData:[],
            input:'',
            expenseMobileVisible:false,
            dailydata:{},
            pageIndex:1,
            pageIndexExamine:1,
            loadflagExamine:false,
            loadflag:false,
            zwgd:false,
            platejudgment:2,
            value:'',
            groupData:[],
            a:0,
            b:0,
        }
    },
    methods:{
        //保留两位小数
        townum(val){
            val=Number(val);
            return val.toFixed(2);
        },
        //保留两位小数
        cltade(val){
            return val.split(" ")[0];
        },
        //翻页
        PageTurning(){
            this.pageIndex++;
            this.postPageDailyPaymentList();
        },
        //翻页Examine
        PageTurningExamine(){
            this.pageIndexExamine++;
            this.PostExpenseAuditGroupPageItems();
        },
        //获取列表
        postPageDailyPaymentList() {
            var url = "/api/Financial/PostPageSearchDailyPaymentList"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    pageIndex: that.pageIndex,
                    pageSize: 10,
                    companyId: -1,
                    financialAuditStatus: -1,//财务审核
                    managerAuditStatus: -1,  //总经理审核
                    feeTypeId: -1,           //费用类型
                    feeSubTypeId: -1,       //费用子类型
                    feeDesc: that.input,    //描述
                    createUserId: -1, //申请人
                    isPaySign:-1 //是否支付
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    var magarr=res.data.data.dataList;
                    if(magarr.length<10){
                        that.zwgd=true;
                    }
                    for(let j=0;j<magarr.length;j++){
                        that.tableData.push(magarr[j])
                    }
                    that.loadflag=true;
                    // that.tableData = res.data.data.dataList;
                }
            })
        },
        //审核
        PostDelDailyPaymentAudit(val1,val2){
            var url = "/api/Financial/PostDelDailyPaymentAudit"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    id: val1,
                    auditType:2,
                    auditStatus:val2
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                        offset:50
                    });
                }else{
                    that.$message.error(res.data.msg);
                }
            })
        },
        //详情按钮
        infobtn(val){
            this.expenseMobileVisible=true;
            this.dailydata={};
            this.getPostSearchDailyPaymentInfo(val.id);
        },
        //获取详情
        getPostSearchDailyPaymentInfo(val){
            var url = "/api/Financial/PostSearchDailyPaymentInfo"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    PortType: 1,
                    id:val
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.dailydata=res.data.data;
                }
            })
        },
        //搜索
        searchbtn(){
            this.zwgd=false;
            this.pageIndex=1;
            this.tableData=[];
            this.postPageDailyPaymentList();
        },
        //搜索examine
        searchexamine(){
            this.pageIndexExamine=1;
            this.groupData=[];
            this.PostExpenseAuditGroupPageItems();
            localStorage.setItem("Examinevalue",this.value );
        },
        scrollBottomExamine(e) {
            let scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
            let clientHeight=document.documentElement.clientHeight || document.body.clientHeight;
            let scrollHeight=document.documentElement.scrollHeight || document.body.scrollHeight;
            if (scrollTop + clientHeight == scrollHeight&&this.loadflagExamine) {
                this.PageTurningExamine()
            }
        },
        scrollBottom(e) {
            
            let scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
            let clientHeight=document.documentElement.clientHeight || document.body.clientHeight;
            // let scrollHeight=document.documentElement.scrollHeight || document.body.scrollHeight;
            let scrollHeight=document.getElementById('scroll-div').offsetHeight;

            // console.log(document.getElementById("tshezi").getBoundingClientRect().top);
            // console.log(scrollTop);
            // console.log(clientHeight);
            this.a=document.getElementById("tshezi").getBoundingClientRect().top;
            this.b=clientHeight-84;
            if(document.getElementById("tshezi").getBoundingClientRect().top==clientHeight-84&&this.loadflag){
                this.PageTurning()
            }
            // if (scrollTop + clientHeight > scrollHeight+83&&this.loadflag) {
            //     this.PageTurning()
            // }
        },
        //日常切换
        rcbtn(){
            this.loadflag=false;
            this.platejudgment=1;
            this.zwgd=false;
            this.pageIndex=1;
            this.tableData=[];
            window.addEventListener('scroll', this.scrollBottom, true);
            window.removeEventListener('scroll', this.scrollBottomExamine, true);
            this.postPageDailyPaymentList();
        },
        //tuanzhuqiehuan
        tzbtn(){
            this.loadflagExamine=false;
            this.platejudgment=2;
            this.pageIndexExamine=1;
            this.groupData=[];
            window.addEventListener('scroll', this.scrollBottomExamine, true);
            window.removeEventListener('scroll', this.scrollBottom, true);
            this.PostExpenseAuditGroupPageItems();
        },
        //费用审核列表
        PostExpenseAuditGroupPageItems(){
            var url = "/api/Groups/PostExpenseAuditGroupPageItems"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    pageId:47,
                    userId:21,
                    pageIndex: that.pageIndexExamine,
                    pageSize: 10,
                    isSure: -1,
                    searchCriteria: that.value,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    var groupDatas=res.data.data.data;
                    for(let j=0;j<groupDatas.length;j++){
                        that.groupData.push(groupDatas[j])
                    }
                    that.loadflagExamine=true;
                }
            })
        },
        //查看费用
        CheckCost(row){
            this.$router.push({path: '/expenseMobileinfo?id=' + row.id +''});
        }
    },
    watch:{
   
    },
    mounted(){
        // if(localStorage.getItem('Examinevalue')!=""){
        //     this.value=localStorage.getItem('Examinevalue');
        // }
        // console.log(localStorage.getItem('Examinevalue'));
        // this.token=JSON.parse(localStorage.getItem('Examinevalue'));
        if(this.platejudgment==1){
            window.addEventListener('scroll', this.scrollBottom, true)
            window.removeEventListener('scroll', this.scrollBottomExamine, true)
            this.postPageDailyPaymentList();
        }else{
            window.addEventListener('scroll', this.scrollBottomExamine, true)
            window.removeEventListener('scroll', this.scrollBottom, true)
            this.PostExpenseAuditGroupPageItems();
        }
    },
    destroyed(){
        window.removeEventListener('scroll', this.scrollBottomExamine, true);
        window.removeEventListener('scroll', this.scrollBottom, true);
    }
}
</script>
<style>
*{
    margin: 0;
    padding: 0;
}EntryDetails
.expenseMobile-all{
    background-color: #fff;
    color: #555;
}
.expenseMobile-all .el-dialog__header{
    display: none;
}
.expenseMobile-all .el-dialog__body{
    padding: 10px;
}
.daily-box{
    padding: 8px;
    padding-top: 93px;
}
.examine-box{
    padding: 8px;
    padding-top: 93px;
    padding-bottom: 65px;
}
.card-description{
    font-weight: 600;
}
.daily-card{
    padding: 8px;
    box-shadow: 0 0 10px #0005;
    border-radius:5px ;
    font-size: 14px;
    margin-bottom: 10px;
}
.examine-card{
    padding: 8px;
    box-shadow: 0 0 10px #0005;
    border-radius:5px ;
    font-size: 14px;
    margin-bottom: 10px;
}
.card-date{
    margin: 5px 0;
}
.card-expense{
    display: flex;
    justify-content: space-between;
}
.card-btn{
    margin-top: 10px;
    text-align: right;
}

.expenseMobile-top{
    position: fixed;
    top: 0;
    background-color: #fff;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #ede8e8;
}
.expenseMobile-title{
    margin: 10px;
    margin-bottom:0px;
    font-size: 17px;
    font-weight:600 ;
}
.expenseMobile-search{
    padding: 8px;
}
.expenseMobile-tabtn{
    position: fixed;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    padding: 8px;
    text-align: center;
    border-top: 1px solid #ede8e8;
}
.tabtn-box{
    display: flex;
    justify-content: space-around;
}
.tabtn-box div{
    width: 15%;
}
.tabtn-box div div{
    width: 100%;
}
.expenseMobile-all .dialog-title{
    font-weight: 600;
    margin-bottom: 10px;
}
.expenseMobile-all .dialog-info{
    margin-bottom: 10px;
}
.dialog-info-zj{
    margin: 5px 0;
}
.dialog-info-sh{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
}
.dialog-info-sh div{
    margin-bottom: 5px;
}
.info-sl{
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap ;
}
.dialog-list-li{
    padding: 5px 0;
    border-top: 1px dotted #afadad;
}
.dialog-list-li:last-child{
    border-bottom: 1px dotted #afadad;
}
.expenseMobile-all .dialog-list{
    max-height: 240px;
    overflow: auto;
}
.expenseMobile-zwgd{
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
.examine-card-operator{
    display: flex;
    justify-content: space-between;
}
.examine-card-btn{
    text-align: right;
}
.examine-card-date{
    margin: 5px 0;
}
.examine-card-operator{
    margin: 5px 0;
}
.examine-card-name{
    font-weight: 600;
}

</style>