jp-education-student/pages/youth/sickNote/leave.vue

<template>
	<view>
		<u-navbar title="请假条申请"></u-navbar>
		<view class="infos">
			<view class="item" @click="classShow=true">
				<view class="title">
					<text class="asterisk">*</text>
					<text>所属班级</text>
				</view>
				<view class="value">
					<text v-if="className">{{className}}</text>
					<text style="color: #777777;" v-else>请选择班级</text>
					<text class="icon">
						<u-icon name="arrow-right" color="#c8c8c8"></u-icon>
					</text>
				</view>
			</view>
			<u-select v-model="classShow" mode="single-column" :list="classList" @confirm="classConfirm"></u-select>
			
			<view class="item" @click="courseShow=true">
				<view class="title">
					<text class="asterisk">*</text>
					<text>请假课次日期</text>
				</view>
				<view class="value">
					<text v-if="leaveDate">{{leaveDate}}</text>
					<text style="color: #777777;" v-else>请选择请假课次日期</text>
					<text class="icon">
						<u-icon name="arrow-right" color="#c8c8c8"></u-icon>
					</text>
				</view>
			</view>
			<u-select v-model="courseShow" mode="mutil-column-auto" :list="courseList" @confirm="courseConfirm"></u-select>
			<!-- <view class="item">
				<view class="title indent">
					<text>请假课次</text>
				</view>
				<view class="value">
					<text>第20节</text>
				</view>
			</view> -->
			<view class="item">
				<view class="title indent">
					<text>授课老师</text>
				</view>
				<view class="value">
					<text>{{teacherName}}</text>
				</view>
			</view>
		</view>

		<view class="infos">
			<!-- <view class="item">
				<view class="title">
					<text class="asterisk">*</text>
					<text>请假类型</text>
				</view>
				<view class="value">
					<text>病假</text>
					<text class="icon">
						<u-icon name="arrow-right" color="#c8c8c8"></u-icon>
					</text>
				</view>
			</view> -->
			<view class="reason">
				<view class="title">
					<text class="asterisk">*</text>
					<text>请假事由</text>
				</view>
				<view class="value">
					<textarea v-model="leaveReason" name="" id="" cols="30" rows="10" placeholder="请假申请"></textarea>
				</view>
			</view>
			<!-- <view class="upload-pictures">
				<view class="title indent">
					<text>上传图片</text>
				</view>
				<view class="value ">
					<img src="../../../assets/img/fas fa-camera Copy@1x.png" alt="">
				</view>
			</view> -->
		</view>

		<view class="btn">
			<button @click="leaveSubmit">提交请假条</button>
		</view>
	</view>
</template>

<script>
	import * as sickNoteApi from '@/apis/youth/sickNote.js'
	import * as courseApi from '@/apis/youth/course.js'
	import * as classScheduleApi from '@/apis/youth/classSchedule.js'
	
	export default {
		data() {
			return {
				studentId: '',
				classList: [],
				classShow: false,
				teacherName: '',
				className: '',
				courseList: [],
				classId: '',
				list: [],
				courseShow: false,
				leaveDate: '',
				sheetId: '',
				leaveReason: '',
				startDate: '',
				endDate: ''
			}
		},
		onReady() {
			let myDate = new Date();
			let myDate2 = new Date();
			myDate2.setMonth(myDate2.getMonth() + 1);
			this.startDate = this.getData(myDate);
			this.endDate = this.getData(myDate2);
			
			if (this.carhelp.getNsStudentId()) {
				this.studentId = this.carhelp.getNsStudentId().studentId;
				this.getLoadMyBuyLog();
			}
		},
		methods: {
			getData(val) {
				var n = new Date(val);
				return n.toLocaleDateString().replace(/\//g, '-');
			},
			leaveSubmit() {
				if(!this.className) {
					uni.showToast({
						title: "请选择班级",
						icon: "none"
					})
					return;
				}
				if(!this.leaveDate) {
					uni.showToast({
						title: "请选择请假课次日期",
						icon: "none"
					})
					return
				}
				if(!this.leaveReason) {
					uni.showToast({
						title: "请填写请假事由",
						icon: "none"
					})
					return
				}
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				sickNoteApi.addLeave({
					studentId: this.studentId,
					scheduleId: this.sheetId,
					leaveReason: this.leaveReason
				}).then((res) => {
					uni.hideLoading();
					uni.navigateBack({
						
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			courseConfirm(e) {
				this.leaveDate = e[0].label + ' ' + e[1].label;
				this.sheetId = e[1].value;
			},
			getCourseList() {
				this.courseList = [];
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				classScheduleApi.loadMySchedule({
					studentId: this.studentId,
					classId: this.classId,
					startDate: this.startDate,
					endDate: this.endDate
				}).then((response) => {
					uni.hideLoading();
					var list = response.data;
					
					for (var i = 0; i < list.length; i++) {
						this.courseList.push({
							value: list[i].classId,
							label: list[i].courseDate,
							children: []
						})
					}
					
					for (var j = 0; j < list.length; j++) {
						for (var k = 0; k < this.courseList.length; k++) {
							if(this.courseList[k].label == list[j].courseDate) {
								if(this.courseList[k].children.length == 1) {
									var time1 = parseInt(this.courseList[k].children[0].label.slice(0,2));
									var time2 = parseInt(list[j].coursePeriods.slice(0,2));
									if(time1 > time2) {
										this.courseList[k].children.unshift({
											value: list[j].sheetId,
											label: list[j].coursePeriods
										})
									} else {
										this.courseList[k].children.push({
											value: list[j].sheetId,
											label: list[j].coursePeriods
										})
									}
								} else {
									this.courseList[k].children.push({
										value: list[j].sheetId,
										label: list[j].coursePeriods
									})
								}
							}
						}
					}
					
					for (var m = 0; m < this.courseList.length; m++) {
						for (var n = 0; n < this.courseList.length; n++) {
							if(this.courseList[m].label == this.courseList[n].label && m != n) {
								this.courseList.splice(n, 1);
							}
						}
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			classConfirm(e) {
				this.classId = e[0].value;
				this.className = e[0].label;
				for (var i = 0; i < this.list.length; i++) {
					if(this.list[i].classId == e[0].value) {
						this.teacherName = this.list[i].teacherName;
					}
				}
				this.getCourseList();
			},
			getLoadMyBuyLog() {
				this.classList = [];
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				courseApi.loadMyBuyLog({
					studentId: this.studentId,
					year: '',
					courseId: '',
					pageNum: 1,
					pageSize: 10000
				}).then((res) => {
					uni.hideLoading();
					this.list = res.data.data;
					var clist = res.data.data;
					for (var i = 0; i < clist.length; i++) {
						this.classList.push({
							value: clist[i].classId,
							label: clist[i].className,
						});
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.asterisk {
		color: rgba(244, 68, 68, 1);
	}
	.infos {
		padding: 0px 15px;
		background-color: #fff;
		margin-bottom: 12px;

		.item {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid rgba(244, 244, 244, 1);
			padding: 12px 0;

			.title {
				color: #333333;

				// .asterisk {
				// 	color: rgba(244, 68, 68, 1);
				// }
			}

			.value {
				color: rgba(51, 51, 51, 1);

				.icon {
					margin-left: 4px;
				}


			}

		}

		.reason {
			.title {
				margin-bottom: 12px;
			}

			uni-textarea {
				width: 696rpx;
				height: 120rpx;
				text-indent: 8px;
				font-size: 14px
			}
		}

		.upload-pictures {
			padding-bottom: 29px;

			.value {
				margin-top: 12px;
				width: 120rpx;
				height: 120rpx;
				border-radius: 8px;
				background-color: rgba(232, 232, 232, 1);
				text-align: center;
				padding: 36rpx;
				margin-left: 20rpx;

				img {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}

	.indent {
		text-indent: 8px;
	}

	.btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 10px 12px;
		background-color: #fff;

		button {
			border-radius: 50px;
			background-color: rgba(13, 186, 199, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 16px;
			line-height: 40px;
		}
	}
</style>