medical/pages/leave/index.vue

<template>
	<view>
		<view>
			<view class="topTwo">
				<!-- 头部导航 -->
				<view class="tesx">
					<view :class="tobu == 1 ? 'con' : ''" @click="to(1)" style="margin-right: 20rpx;">概览</view>
					<view :class="tobu == 2 ? 'con' : ''" @click="to(2)">记录</view>
				</view>
				
				<view class="choice" style="border: 0;" v-if="tobu == 1">
					<Sever v-if="classData.length != 0" :classData="classData" @search="search"></Sever>
					
					<div @click="shows=true">
						{{currentDateArray[0]}} <u-icon name="arrow-down" style="margin-left: 17rpx; display: inline-block;"></u-icon>
					</div>
					<u-popup :show="shows" mode="bottom" safe-area-inset-bottom :closeOnClickOverlay="true" @close="shows = false" >
						<timeSever @onDateClick="getSelectDatatemp" @onDayClick="onDayClicks"  />
					</u-popup>
				</view>
				
				<view class="choice" v-if="tobu == 2">
					<Sever v-if="classData.length != 0" :classData="classData" @search="searchTwo"></Sever>
					
					<div @click="timeShow=true" class="time-show">
						{{currentDateArray1[0]}}~{{currentDateArray2[0]}}
					</div>
					<!-- 时间范围选择 -->
					<!-- <u-popup :show="timeShow" mode="bottom" safe-area-inset-bottom :closeOnClickOverlay="true" @close="timeShow = false" >
						<timeSever @onDateClick="getSelectDatatemp" @onDayClick="onDayClicks1"  />
					</u-popup> -->
					<!-- <text style="float: left;"> ~ </text>
					<div @click="timeShow=true" class="time-show">
						{{currentDateArray2[0]}}
					</div> -->
					<!-- 时间范围选择 -->
					<u-popup :show="timeShow" mode="bottom" safe-area-inset-bottom :closeOnClickOverlay="true" @close="timeShow = false" >
						<timeSever2 @onDateClick="getSelectDatatemp1"  @onDayClick="onDayClicks2"  />
					</u-popup>
					<u-icon name="arrow-down" style="margin-left: 10rpx; display: inline-block;"></u-icon>
				</view>
			</view>
		</view>
		
		<view style="height: 235rpx;"></view>
		<!-- 概览 -->
		<view v-if="tobu == 1">
			<!-- <view class="choice" style="border: 0;">
				<Sever v-if="classData.length != 0" :classData="classData" @search="search"></Sever>
				
				<div @click="shows=true">
					{{currentDateArray[0]}} <u-icon name="arrow-down" style="margin-left: 17rpx; display: inline-block;"></u-icon>
				</div>
				<u-popup :show="shows" mode="bottom" safe-area-inset-bottom :closeOnClickOverlay="true" @close="shows = false" >
					<timeSever @onDateClick="getSelectDatatemp" @onDayClick="onDayClicks"  />
				</u-popup>
			</view> -->
			
			<!-- 总人数 -->
			<view class="total">
				<view style="margin-bottom: 5rpx">总请假人数</view>
				<text class="total-txt" style="font-size: 49rpx;">{{leaveData.hj || 0}}</text>人
				
				<view class="line">
					<view style="margin-right: 235rpx;">
						<view style="margin-bottom: 5rpx; color: rgba(0,0,0,0.60);">病假</view>
						<text class="total-txt" style="font-size: 36rpx;">{{leaveData.bj || 0}}</text>人
					</view>
					<view>
						<view style="margin-bottom: 5rpx; color: rgba(0,0,0,0.60);" >事假</view>
						<text class="total-txt" style="font-size: 36rpx;">{{leaveData.sj || 0}}</text>人
					</view>
				</view>
			</view>
			
			<view class="student">
				<text style="display: block; margin-bottom: 32rpx;">病假类型</text>
				<Echarts v-if="Chart.length != 0" :Chart="Chart"></Echarts>
			</view>
			
			<view class="student" style="margin-bottom: 20rpx;">
				<text style="display: block; margin-bottom: 32rpx;">请假学生</text>
				
				<view v-if="listData.length == 0">
					<view style="text-align: center; line-height: 150rpx;">
						暂无数据
					</view>
				</view>
				
				<Table v-if="listData.length < 3" :tableEye="tableEye" :eyeData="eyeDataOpen" />
				<Table v-else :tableEye="tableEye" :eyeData="tabelShow ? eyeDataOpen : eyeData" />
				
				<view class="icon" v-if="eyeDataOpen.length > 3">
					<u-icon v-if="tabelShow" name="arrow-up" @click="tabelOpen"></u-icon>
					<u-icon v-else name="arrow-down" @click="tabelOpen"></u-icon>
				</view>
			</view>
			
		</view>
		
		<!-- 记录 -->
		<view v-if="tobu == 2">
			
			<!-- <view class="choice">
				<Sever v-if="classData.length != 0" :classData="classData" @search="search"></Sever>
				
				<div @click="timeShow=true" class="time-show">
					{{currentDateArray1[0]}}
				</div>
				<text style="float: left;"> ~ </text>
				<div @click="timeShow=true" class="time-show">
					{{currentDateArray2[0]}}
				</div> -->
				<!-- 时间范围选择 -->
				<!-- <u-popup :show="timeShow" mode="bottom" safe-area-inset-bottom :closeOnClickOverlay="true" @close="timeShow = false" >
					<timeSever2 @onDateClick="getSelectDatatemp1"  @onDayClick="onDayClicks2"  />
				</u-popup>
				<u-icon name="arrow-down" style="margin-left: 17rpx; display: inline-block;"></u-icon>
			</view> -->
			
			<view v-if="listDataTwo.length != 0">
				<view class="record" v-for="item in listDataTwo">
					<view style="color: #000; font-weight: 600; margin-bottom: 23rpx;">
						{{item.studentName}}的请假
						<text style="color: rgba(0,0,0,0.60); font-weight: 500; float: right; display: inline-block;">{{item.applyTime}}</text>
					</view>
					
					<view class="information">
						<text>请假类型：</text>
						<text>{{item.leaveType}}</text>
					</view>
					
					<view class="information">
						<text>学生姓名：</text>
						<text>{{item.studentName}}</text>
					</view>
					
					<view class="information">
						<text>所在班级：</text>
						<text>{{item.className}}</text>
					</view>
					
					<view class="information">
						<text>开始时间：</text>
						<text>{{item.startTimeStr}}</text>
					</view>
					
					<view class="information">
						<text>结束时间：</text>
						<text>{{item.endTimeStr}}</text>
					</view>
					
					<view class="information">
						<text>请假天数：</text>
						<text>{{item.daysOff}}天</text>
					</view>
				</view>
			</view>
			
			<view v-else>
				<view class="noneData">
					<view style="text-align: center;">
						<image style="width: 79px;height: 94px;" src="../../static/nodata.png" mode=""></image>
						<br>暂无数据
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 悬浮按钮 -->
		<view class="suspension" @click="toAdd" v-if="tobu ==  1">
			<image src="../../static/icon.svg"></image>
		</view>
		
		<u-loading-page :loading="loading" loading-text="加载中" bg-color="rgba(0,0,0,0.60)" style="z-index: 999999;"></u-loading-page>
	</view>
</template>

<script>
	import Table from "../../conponents/table/tabel.vue"
	import Echarts from "../../conponents/Echar/ring.vue"
	import Sever from "../../conponents/Sever/Sever.vue"
	import timeSever from "../../conponents/Sever/timeSever.vue"
	import timeSever2 from "../../conponents/Sever/timeSever2.vue"
	export default {
		components:{
			Table,
			Echarts,
			Sever,
			timeSever,
			timeSever2,
		},
		computed: {
			// 计算时间
			dateRange() {
				let startName = this.currentDateArray[0]
				return [startName]
			},
		},
		data() {
			return {
				providerList: [],
				version: '',
				handle: 'Mba',
				tobu: '1',
				dato: [{}, {}],
				shows: false, // 时间选择
				timeShow: false, // 时间范围选择一 显隐
				timeShow2: false, // 时间范围选择二 显隐
				currentDateArray: [], // 时间选择
				currentDateArray1: [], // 时间范围选择 开始值
				currentDateArray2: [], // 时间范围选择 结束值
				classData: [], // 班级信息
				classId: '', // 选中范围id
				leaveData: '', // 请假数据
				listData: [], // 列表数据
				listDataTwo: [], // 记录列表数据
				
				tableEye: [
					{label: '班级', span: 4, title: 'className',},
					{label: '姓名', span: 3, title: 'studentName',},
					{label: '类型', span: 3, title: 'leaveType',},
					{label: '请假天数', span: 2, title: 'daysOff',},
				], // 眼科 屈光度 列表头部  !label为表头名字  span为此列占据位置  title为数据的键
				
				eyeDataOpen: [], // 眼科 屈光度 列表头部 数据   !注意该条数据前面加个空值用于循环渲染出表格表头
				// 表格展开数据
				
				eyeData: [],
				// 表格折叠时数据
				
				tabelShow: false, // 控制表格显隐
				
				loading: false, // 加载动画
			
				Chart: [

				], // 图表
			}
		},
		onShow() {
			this.getClass()
			this.getTime()
			
		},
		methods: {
			// 获取数据
			getData(){
				this.loading = true
				this.$request({
					url: this.$api.leave.orgStudentWork,
					header: {
					    contentType: "application/json"
					},
					data:{
						classId: this.classId,
						endTime: this.currentDateArray[0],
						startTime: this.currentDateArray[0],
					}
				}).then(res=>{
					console.log('res', res)
					// this.leaveData = res.data[0]
					if(this.classId){
						this.leaveData = res.data[1]
					}else{
						this.leaveData = res.data[0]
					}
					setTimeout(()=> {
						this.loading = false
					}, 1000)
				}).catch(err=>{
					console.log('err' , err)
					setTimeout(()=> {
						this.loading = false
					}, 1000)
				})
			},
			
			// 获取学校年级班级等数据
			getClass(){
				let tenantId = localStorage.getItem('tenant_id')
				this.$request({
					url: this.$api.classesTree.getClassesTree,
					header: {
					    contentType: "application/json"
					},
					data:{
						tenantId: tenantId
					}
				}).then(res=>{
					let arr = res.data[0].children
					arr.unshift({
						label: res.data[0].label,
						id: res.data[0].id,
						children: [''],
					})
					this.classData = arr
					// this.classId = arr[0].id
					
					// 获取班级信息之后请求数据
					this.getData()
					this.getStati()
					this.getList()
					// console.log(this.classData)
				}).catch(err=>{
					console.log('err' , err)
				})
			},
			
			// 获取统计数据
			getStati(){
				let tenantId = localStorage.getItem('tenant_id')
				this.$request({
					url: this.$api.leave.orgStudentWorkDistri,
					header: {
					    contentType: "application/json"
					},
					data:{
						classId: this.classId,
						endTime: this.currentDateArray[0],
						startTime: this.currentDateArray[0],
					}
				}).then(res=>{
					// console.log('res', res)
					let arr = []
					for(let item of res.data.list){
						if(item.num != 0){
							arr.push({
								name: item.type,
								value: item.num
							})
						}
					}
					if(arr.length == 0){
						this.Chart = []
						this.Chart.push({
							name: '暂无数据',
							value: 0
						})
					}else{
						this.Chart = arr
					}
				}).catch(err=>{
					console.log('err' , err)
				})
			},
			
			// 获取列表数据
			getList(){
				let tenantId = localStorage.getItem('tenant_id')
				this.$request({
					url: this.$api.leave.page,
					header: {
					    contentType: "application/json"
					},
					data:{
						classId: this.classId,
						endTimeStr: this.currentDateArray[0],
						startTimeStr: this.currentDateArray[0],
						size: 10,
						current: 1,
						status: 1,
					}
				}).then(res=>{
					// console.log('res', res)
					this.listData = res.data.records
					this.eyeDataOpen = res.data.records
					if(this.listData.length > 2){
						this.eyeData = [
							this.listData[0],
							this.listData[1]
						]
					}
					
					console.log('listData', this.listData, res)
					// this.eyeData.unshift({})
					// this.eyeDataOpen.unshift({})
				}).catch(err=>{
					console.log('err' , err)
				})
			},
			
			// 记录获取列表数据
			getListTwo(){
				this.loading = true
				let tenantId = localStorage.getItem('tenant_id')
				this.$request({
					url: this.$api.leave.page,
					header: {
					    contentType: "application/json"
					},
					data:{
						classId: this.classId,
						startTimeStr: this.currentDateArray1[0],
						endTimeStr: this.currentDateArray2[0],
						size: 999,
						current: 1,
						status: 1,
					}
				}).then(res=>{
					// console.log('res', res)
					this.listDataTwo = res.data.records
					setTimeout(()=> {
						this.loading = false
					}, 1000)
				}).catch(err=>{
					console.log('err' , err)
					setTimeout(()=> {
						this.loading = false
					}, 1000)
				})
			},
			
			
			// 选择范围触发获取数据
			search(data){
				console.log(data)
				this.classId = data
				
				this.getData()
				this.getStati()
				this.getList()
				// this.getListTwo()
				
			},
			
			searchTwo(data){
				console.log(data)
				this.classId = data
				this.getListTwo()
			},
			
			// 点击改变是否观察或者处理记录
			to(data){
				this.tobu = data
				// this.getListTwo()
				if(data == 1){
					this.getList()
				}else if(data == 2){
					this.getListTwo()
				}
			},

			// 跳转新增
			toAdd(){
				uni.navigateTo({
					url: '/pages/addLeave/index'
				})
			},
			
			tabelOpen(){
				this.tabelShow = !this.tabelShow 
			},
			
			// 获取当前时间
			getTime(){
				var date = new Date();//年 getFullYear()：四位数字返回年份
				var year = date.getFullYear();  //getFullYear()代替getYear()
				var month = date.getMonth() + 1;//月 getMonth()：0 ~ 11
				var day = date.getDate();//日 getDate()：(1 ~ 31)
				var time = year + '-' + this.addZero(month) + '-' + this.addZero(day);

				this.currentDateArray[0] = time
				this.currentDateArray1[0] = time
				this.currentDateArray2[0] = time
			},
			addZero(time) {
			    return time < 10 ? ('0' + time) : time;
			},
			
			onDayClicks(data) {
				this.currentDateArray[0] = data.date
				this.shows = false
				console.log('时间' , this.currentDateArray[0])
				this.getData()
				this.getList()
				this.getStati()
				// this.getListTwo()
			},
			
			onDayClicks1(data){
				this.currentDateArray1[0] = data.date
				this.timeShow = false
				this.getListTwo()
			},
			
			onDayClicks2(data){
				this.currentDateArray1[0] = data[0]
				this.currentDateArray2[0] = data[1]
				this.timeShow = false
				this.getListTwo()
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		// padding: 0 32rpx;
		/* background-color: #D9D9D9; */
		background-color: #F5F5F5 !important;
	}
	
	.topTwo{
		position: fixed;
		top: -2rpx;
		background-color: #f5f5f5;
		padding-bottom: 10rpx;
		z-index: 999;
		width: 100%;
		box-sizing: border-box;
	}
	
	// 暂无数据
	.noneData{
		padding-top: 200rpx;
		display: flex;
		justify-content: center;
	}
	
	.tesx{
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: rgba(0,0,0,0.60);
		height: 128rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
	}
	
	.con{
		font-size: 40rpx;
		font-weight: 600;
		color: #000;
	}
	
	.choice{
		height: 96rpx;
		line-height: 96rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(0,0,0,0.10);
	}
	
	.choice-left{
		float: left;
		overflow: hidden;
		display: flex;
		width: 250rpx;
	}
	
	// 概览
	.total{
		height: 302rpx;
		box-sizing: border-box;
		padding: 32rpx 32rpx;
		background-color: #fff;
		border-radius: 32rpx;
		margin: 20rpx 32rpx 0;
		font-size: 25rpx;
	}
	
	.total-txt{
		 font-weight: 600;
		 margin-top: 6rpx;
		 margin-right: 15rpx;
		 display: inline-block;
	}
	
	// 记录
	.record{
		padding: 32rpx 37rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: rgba(0,0,0,0.60);
		border-bottom: 1px solid rgba(0,0,0,0.10);
	}
	
	.information{
		height: 47rpx;
		line-height: 47rpx;
	}
	
	
	.suspension{
		width: 96rpx;
		height: 96rpx;
		border-radius: 50px;
		background-color: #7b5df0;
		position:fixed;
		right: 32rpx;
		bottom: 168rpx;
	}
	
	.suspension image{
		width: 100%;
		height: 100%;
	}
	
	.line{
		margin-top: 25rpx;
		border-top: 1rpx solid #F0F0F0;
		display: flex;
		padding-top: 20rpx;
	}
	
	.student{
		box-sizing: border-box;
		padding: 36rpx 32rpx 6rpx 32rpx;
		background-color: #fff;
		border-radius: 32rpx;
		margin: 32rpx 32rpx 0;
		font-size: 25rpx;
		
		text{
			font-size: 32rpx;
			font-weight: 600;
			color: rgba(0,0,0,0.90);;
		}
		
		.icon{
			width: 50rpx;
			height: 50rpx;
			margin: 0 auto;
			line-height: 50rpx;
			display: flex;
			justify-content: center;
		}
	}
	
	.time-show{
		display: inline-block;
		float: left;
	}
</style>