ys-app/src/pages/business/CRM/leave/myApply.vue

<template>
	<view class="con-body">
		<view class="con-bg">
			<customHeader ref="customHeaderRef" :title="'我的表单'" :leftFlag="true">
			</customHeader>
			<!-- #ifdef H5 -->
			<view style="height:50rpx"></view>
			<!-- #endif -->

			<!-- 高度来避免头部遮挡 -->
			<view class="top-height"></view>

			<view class="white-bg">
				<view class="tabs-container">
					<view class="tabs-scorll">
						<view class="tabs-header">
							<view v-for="(tab, index) in tabList" :key="index"
								:class="['tab-item', { 'active': activeTab === index }]"
								@click="switchTab(index)">
								{{ tab }}
							</view>
						</view>
					</view>
					<view class="white-bg-2" v-for="item in detailList">
						<view class="report-list" @click="showDetail(item)">
							<view class="title" style="margin-top: 20rpx;font-size: 30rpx">
								{{ item.typeval=="1"?'全天':item.typeval=="2"?'前半个班次':'后半个班次' }}
								<label v-if="item.applyType=='请假'"
									style="float: right;color: #03ca03;">
									{{ item.applyType}}</label>
								<label v-if="item.applyType=='销假'"
									style="float: right;color: #eaa303;">
									{{ item.applyType}}</label>
							</view>
							<view class="r-list">
								<view class="r-left" style="font-size: 30rpx;font-weight: 500;">
									申请日期：{{ item.applyDate }}
									（ <label v-if="item.status=='待审批'"
										style="color: #03ca03;">{{ item.reviewStatus }}</label>
									<label v-if="item.status=='审批中'"
										style="color: #03ca03;">{{ item.reviewStatus }}</label>
									<label v-if="item.status=='驳回'"
										style="color: #fa3303;">{{ item.reviewStatus }}</label>
									<label v-if="item.status=='完成'"
										style="color: #03aaf3;">{{ item.reviewStatus }}</label>）
								</view>
							</view>
							<view class="r-list">
								<view class="r-left">休假日期</view>
								<view class="r-right">{{ item.startDate }} 至 {{ item.endDate }}
									（ <label v-if="item.applyType=='请假'" style="color: #03ca03;">
										{{ item.days.replace('.0','')}}天</label>
									<label v-if="item.applyType=='销假'" style="color: #eaa303;">
										{{ item.days.replace('.0','')}}天</label> ）
								</view>
							</view>
							<view class="r-list">
								<view class="r-left">详细说明</view>
								<view v-if="item.reason && item.reason.length <= 18"
									class="r-right">{{ item.reason }}</view>
							</view>
							<view class="border-bottom" style="margin: 20rpx 0;"></view>
						</view>
					</view>
					<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize"
							:current="pageCurrent" :total="total" @change="change" /></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import customHeader from '@/components/customHeader.vue'
	import {
		getNavBarPaddingTop
	} from '@/utils/system.js'

	import {
		getLeaveApplyList
	} from '@/api/crm/activity/activity';

	// 获取导航栏高度用于内容区域padding
	const navBarPaddingTop = ref(0);
	onMounted(() => {
		navBarPaddingTop.value = getNavBarPaddingTop() * 2;
		getlist();
	})

	onShow(() => {
		uni.$on('isRefresh', function() {
			getlist();
		})
	})

	const pageSize = ref(4);
	const pageCurrent = ref(1);
	const loading = ref(false);
	let tabList = ref([])

	let total = ref(0);
	const totalAll = ref(0);
	const totalReview = ref(0);
	const totalReject = ref(0);
	const totalPass = ref(0);


	let activeTab = ref(0);

	let detailList = ref([])
	let detailLists = ref([])

	let reviewList = ref([])
	let rejectList = ref([])
	let passList = ref([])

	const getlist = async () => {
		loading.value = true

		let res = await getLeaveApplyList();
		detailLists.value = res.rows;
		reviewList.value = res.rows.filter(t => t.status == '待审批' || t.status == '审批中')
		rejectList.value = res.rows.filter(t => t.status == '驳回')
		passList.value = res.rows.filter(t => t.status == '完成')

		total.value = res.total
		totalAll.value = res.total
		totalReview.value = reviewList.value.length
		totalReject.value = rejectList.value.length
		totalPass.value = passList.value.length

		change({
			current: 1
		})
		loading.value = false

		let all = '全部(' + totalAll.value + ')'
		let review = '审核中(' + totalReview.value + ')'
		let reject = '已驳回(' + totalReject.value + ')'
		let pass = '已通过(' + totalPass.value + ')'

		tabList.value = [all, review, reject, pass]
	}

	const switchTab = (index) => {
		activeTab.value = index

		change({
			current: 1
		})
	}

	// 分页触发
	let change = (e) => {
		pageCurrent.value = e.current

		let end = pageSize.value * e.current
		let start = end - pageSize.value

		if (activeTab.value == 0) {
			detailList.value = detailLists.value.slice(start, end)
			total.value = totalAll.value
		} else if (activeTab.value == 1) {
			detailList.value = reviewList.value.slice(start, end)
			total.value = totalReview.value
		} else if (activeTab.value == 2) {
			detailList.value = rejectList.value.slice(start, end)
			total.value = totalReject.value
		} else if (activeTab.value == 3) {
			detailList.value = passList.value.slice(start, end)
			total.value = totalPass.value
		}
	}

	// 跳转
	let showDetail = (item) => {
		uni.navigateTo({
			url: "/pages/business/CRM/leave/myApplyDetail?data=" + encodeURIComponent(JSON
				.stringify(item))
		})
	}
</script>

<style lang="scss" scoped>
	.apply-row {
		margin: 5px;
	}

	.border-bottom {
		margin: 5px;
		width: 100%;
	}

	.tabs-header {
		display: flex;
		height: 80rpx;
		background: #fff;
		border-bottom: 1rpx solid #eee;
	}

	.tab-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #666;
	}

	.tab-item.active {
		color: #007AFF;
		position: relative;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 150rpx;
		height: 4rpx;
		background-color: #007AFF;
	}

	:deep(.report-list .r-list) {
		padding: 0.5rem 0;
	}
</style>