jp-education-student/pages/teacher/leaveApproval/leaveApproval.vue

<template>
	<view>
		<u-navbar title="请假审批"></u-navbar>
		<view class="tabs">
			<u-tabs bar-width="80" inactive-color="#777777" active-color="#4F3C27"  :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		
		<view class="content">
			<view class="item" v-for="(item,index) in leaveList" :key="index"
				@click="gotoUrl('pages/teacher/leaveApproval/leaveDetails?id='+item.leaveId)">
				<view class="head">
					<view class="title">
						{{item.studentName}}的请假条
					</view>
					<view class="state1" v-if="item.status == 0">
						待处理
					</view>
					<view class="state2" v-if="item.status == 1">
						已审核
					</view>
				</view>
				<view class="bottom">
					<view class="class">
						{{item.className}}
					</view>
					<view class="time">
						{{getFormatDate(item.createTime)}}
					</view>
				</view>
			</view>
		</view>
		
		<u-divider v-if="leaveList.length == recordsTotal && recordsTotal != 0" style="margin-top: 10px">没有更多了</u-divider>
	</view>
</template>

<script>
	import * as leaveApprovalApi from '@/apis/teacher/leaveApproval.js'
	
	export default {
		data() {
			return {
				leaveList: [],
				auditedIf: 0,
				years: '',
				pageNum: 1,
				pageSize: 5,
				recordsTotal: 0,
				list: [{
					name: '待处理'
				}, {
					name: '已处理'
				}],
				current: 0
			}
		},
		onShow() {
			this.getLoadLeaveLogForAudit(true);
		},
		onReachBottom() {
			if (this.reCoursesList.length < this.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			myLoadmore() {
				this.pageNum += 1;
				this.getLoadLeaveLogForAudit();
			},
			getLoadLeaveLogForAudit(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.leaveList = [];
					this.pageNum = 1;
				}
				leaveApprovalApi.loadLeaveLogForAudit({
					auditedIf: this.auditedIf,
					yyyyMM: this.years,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then((res) => {
					uni.hideLoading();
					this.leaveList = [
						...this.leaveList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			change(index) {
				this.current = index;
				this.auditedIf = index;
				this.getLoadLeaveLogForAudit(true);
			},
			getFormatDate(val) {
				let date = new Date(val);
				let myyear = date.getFullYear();
				let mymonth = date.getMonth() + 1;
				let myweekday = date.getDate();
				let hour = date.getHours();
				let minute = date.getMinutes();
				let second = date.getSeconds();
				if (mymonth < 10) {
					mymonth = '0' + mymonth;
				}
				if (myweekday < 10) {
					myweekday = '0' + myweekday;
				}
				if(hour < 10) {
					hour = '0' + hour;
				}
				if(minute < 10) {
					minute = '0' + minute;
				}
				if(second < 10) {
					second = '0' + second;
				}
			
				return (myyear + '-' + mymonth + '-' + myweekday + ' ' + hour + ':' + minute + ':' + second);
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.tabs{
		padding: 0 170rpx;
		background-color: #fff;
		position:fixed;
		top: 88rpx;
		left: 0;
		right: 0;
		z-index: 999;
		::v-deep.u-tab-bar{
			background-color:#B5D0F4 !important;
			bottom: -6rpx;
		}
	}
	.content{
		margin-top: 112rpx;
	}
    
	.item{
		background-color: #fff;
		border-radius: 24px;
		margin: 24rpx 32rpx;
		padding: 32rpx 24rpx;
		.head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				font-weight: bold;
			}
			.state1{
				width: 120rpx;
				line-height: 48rpx;
				color: rgba(22, 119, 255, 1);
				font-size: 12px;
				text-align: center;
				font-family: Arial;
				border: 1px solid rgba(22, 119, 255, 1);
				border-radius: 100rpx;
			}
			.state2{
				width: 120rpx;
				line-height: 48rpx;
				color: rgba(0, 187, 170, 1);
				font-size: 12px;
				text-align: center;
				font-family: Arial;
				border: 1px solid rgba(0, 187, 170, 1);
				border-radius: 100rpx;
			}
		}
		.bottom{
			margin-top: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.class{
				color: rgba(51, 51, 51, 1);
			}
			.time{
				color: rgba(119, 119, 119, 1);
			}
			
		}
	}
</style>