mteacher/src/views/teacher/Approval.vue

<template>
    <div class="approval">
        <m-header />
        <van-tabs :swipeable="true" :animated="true">
            <van-tab title="待处理">
                <van-list v-model="dataSection.loading" v-if="dataSection.show" key="data"
                    :finished="dataSection.finished"
                    finished-text="我是有底线的"
                    @load="getClassGroupList">
                    <div v-for="(item, index) in dataSection.dataList" :key="index" class="app-item">
                        <div class="hd">
                            <span class="orangeStatus">待处理</span>
                            <span>2019-09-01</span>
                        </div>
                        <div class="bd">
                            <p>申请人：黄青筝</p>
                            <p>审批事项：调休</p>
                            <p>开始时间：2019-09-01  9:00</p>
                            <p>结束时间：2019-09-01  18:00</p>
                            <p>备注：家中急事，调休一天</p>
                        </div>
                    </div>
                </van-list>
                <m-empty v-else key="data" />
            </van-tab>
            <van-tab title="已处理">
                <van-list v-model="recordSection.loading"  v-if="recordSection.show" key="records"
                    :finished="recordSection.finished"
                    finished-text="我是有底线的"
                    @load="getStudentAttendanceList">
                    <div v-for="i in 6" :key="i" class="app-item">
                        <div class="hd">
                            <span class="orangeStatus">待处理</span>
                            <span>2019-09-01</span>
                        </div>
                        <div class="bd">
                            <p>申请人：黄青筝</p>
                            <p>审批事项：调休</p>
                            <p>开始时间：2019-09-01  9:00</p>
                            <p>结束时间：2019-09-01  18:00</p>
                            <p>备注：家中急事，调休一天</p>
                        </div>
                    </div>
                </van-list>
                <m-empty v-else key="records" />
            </van-tab>
        </van-tabs>

    </div>
</template>
<script>
import MHeader from '@/components/MHeader'
import MEmpty from '@/components/MEmpty'
import { queryWaitList, queryProcessedList } from '@/api/teacher'
export default {
    name: 'approval',
    components: { MHeader, MEmpty },
    data() {
        return {
            dataSection: {
                show: true, // 判断是否有数据
                dataList: [],
                loading: false,
                finished: false,
                params: {
                    groupId: this.$route.params.groupId,
                    pageNo: 1,
                    pageSize: 10
                }
            },
            recordSection: {
                show: true, // 判断是否有数据
                recordList: [],
                loading: false,
                finished: false,
                params: {
                    groupId: this.$route.params.groupId,
                    pageNo: 1,
                    pageSize: 10
                }
            }
        }
    },
    methods: {
        getClassGroupList() { 
            let dataSection = this.dataSection
            let params = dataSection.params
            queryWaitList(params).then(res => {
                let result = res.data
                dataSection.loading = false
                if(result.code == 200) {
                    dataSection.dataList = dataSection.dataList.concat(result.data.result)
                    if(params.pageNo >= result.data.totalPages) {
                        dataSection.finished = true
                    }
                    dataSection.params.pageNo++
                } else {
                    dataSection.finished = true
                }
                if(dataSection.dataList.length <= 0) {
                    dataSection.show = false
                }
            })
        },
        getStudentAttendanceList() { 
            let recordSection = this.recordSection
            let params = recordSection.params
            queryProcessedList(params).then(res => {
                let result = res.data
                recordSection.loading = false
                if(result.returnCode == 200) {
                    this.recordTotal = result.total
                    recordSection.recordList = recordSection.recordList.concat(result.records)
                    if(params.pageNo >= result.pages) {
                        recordSection.finished = true
                    }
                    recordSection.params.pageNo++
                } else {
                    recordSection.finished = true
                }
                if(recordSection.recordList.length <= 0) {
                    recordSection.show = false
                }
            })
        },
    }
}
</script>
<style lang='less' scoped>
@import url("../../assets/commonLess/variable.less");
.approval {
    min-height: 100vh;
}
/deep/.van-tab--active {
    color: #EF5A50;
}
/deep/.van-tabs__line {
    background-color: @mColor;
}
.app-item {
    margin: 0 .16rem .1rem;
    background: @whiteColor;
    border-radius: .1rem;
    font-size: .14rem;
    &:first-child {
        margin-top: .1rem;
    }
    .hd {
        padding: .1rem .15rem .1rem .19rem;
        border-bottom: 1px solid #f5f5f5;
        color: @tFontColor;
        display: flex;
        justify-content: space-between;
    }
    .bd {
        padding: .12rem .15rem .2rem .19rem;
        line-height: .2rem;
    }
}
</style>