medical/pages/addLeave/index.vue

<template>
	<view>
		
		<view class="title">
			学生信息
		</view>
		
		<!-- 基本信息 -->
		<template>
			<view class="content">
			   <u-cell :value="classId.label || '请选择'" isLink @click="classShow=true">
				   <view
						slot="title"
						class="u-slot-title"
					>
						<text class="u-cell-text">
							<RedDot text="班级" :required="true"></RedDot>
						</text>
					</view>
			   </u-cell>
			   <SeverOne v-if="classData.length != 0" :classData="classData" :classShow="classShow" @search="search" @cancelClass="cancelClass"></SeverOne>
			</view>
			
			<view class="content">
			   <u-cell :value="studentId.label || '请选择'" isLink @click="nameClik">
				   <view
						slot="title"
						class="u-slot-title"
					>
						<text class="u-cell-text">
							<RedDot text="姓名" :required="true"></RedDot>
						</text>
					</view>
			   </u-cell>
			   <u-picker
					:show="nameShow" 
					:columns="nameList" 
					keyName="label" 
					@cancel="nameShow=false" 
					@confirm="choiceName"
					:closeOnClickOverlay="true" 
					@close="nameShow=false"
				></u-picker>
			</view>
		</template>
		
		<!-- 请假类型 -->
		<template>
			<view class="content">
			   <u-cell :value="LeaveTypeData || '请选择'" isLink @click="leaveTypeShow=true">
				   <view
						slot="title"
						class="u-slot-title"
					>
						<text class="u-cell-text">
							<RedDot text="请假类型" :required="true"></RedDot>
						</text>
					</view>
			   </u-cell>
			   <u-picker
					:show="leaveTypeShow"
					:columns="leaveType"
					keyName="name"
					@cancel="leaveTypeShow=false"
					:closeOnClickOverlay="true"
					@close="leaveTypeShow=false"
					@confirm="choiceLeaveType"
				></u-picker>
			</view>
			
			<view class="content" v-if="LeaveTypeData == '病假'">
			   <u-cell :value="formData.VerData.type || '请选择'" isLink @click="VerShow=true">
				   <view
						slot="title"
						class="u-slot-title"
					>
						<text class="u-cell-text">
							<RedDot text="病假类型" :required="true"></RedDot>
						</text>
					</view>
			   </u-cell>
			   <u-picker :show="VerShow" :columns="leaveData" keyName="type" @cancel="VerShow=false" @confirm="choiceVer"></u-picker>
			</view>
			
			<view class="content" v-if="LeaveTypeData == '病假'">
			   <u-cell>
				   <view
						slot="title"
						class="u-slot-title"
						style="position: relative;"
					>
						<text class="u-cell-text">
							<RedDot text="体温" :required="true"></RedDot>
							<input
							    placeholder="请输入"
							    border="none"
							    v-model="formData.temperature"
								style="width: 150rpx; position: absolute; top:10rpx; left:520rpx; float: right; text-align: right; overflow: hidden;"
							  ></input>
						</text>
					</view>
			   </u-cell>
			</view>
		</template>
		
		<view class="title">
			请假时间
		</view>
		
		<!-- 请假时间 -->
		<template>
			<view class="content">
			   <u-cell :value="startTime || '请选择'" isLink @click="timeShow1=true">
				   <view
						slot="title"
						class="u-slot-title"
					>
						<text class="u-cell-text">
							<RedDot text="开始时间" :required="true"></RedDot>
						</text>
					</view>
			   </u-cell>
			   <u-popup :show="timeShow1" mode="bottom" safe-area-inset-bottom :closeOnClickOverlay="true" @close="timeShow1 = false">
					<timeSever @onDateClick="getSelectDatatemp"  @onDayClick="onDayClicks" :itemData="currentDateArray[0]"  />
			   </u-popup>
			</view>
			
			<view class="content">
			   <u-cell :value="formData.dayData || '请选择'" isLink @click="dayShow=true">
				   <view
						slot="title"
						class="u-slot-title"
					>
						<text class="u-cell-text">
							<RedDot text="天数" :required="true"></RedDot>
						</text>
					</view>
			   </u-cell>
			   <u-picker
					:show="dayShow"
					:columns="dayList" 
					@cancel="dayShow=false" 
					@confirm="choiceDay"
					:closeOnClickOverlay="true"
					@close="dayShow=false"
				></u-picker>
			</view>
			
			<view class="content">
			   <u-cell :value="endTime || ' '" >
				   <view
						slot="title"
						class="u-slot-title"
					>
						<text class="u-cell-text">
							结束时间
						</text>
					</view>
			   </u-cell>
			  <!-- <u-popup :show="timeShow2" mode="bottom" safe-area-inset-bottom>
			   		<timeSever @onDateClick="getSelectDatatemp"  @onDayClick="onDayClicks1"  />
			   </u-popup> -->
			</view>
		</template>
		
		<!-- 请假事由 -->
		<view class="symptom">
			<text class="u-cell-text">
				<!-- 请假事由 -->
				<RedDot text="请假事由" :required="true"></RedDot>
			</text>
			
			<u--textarea border="none" style="margin: 32rpx 0 72rpx 0; padding: 0;" v-model="formData.reason" placeholder="请输入" autoHeight ></u--textarea>
		</view>
		
		<!-- 照片 -->
		<view class="symptom">
			<text class="u-cell-text" style="color: rgba(0,0,0,0.60);">
				照片
			</text>
			
			<upImage :img="symptomImgs" @addImg='addImg'></upImage>
		</view>
		
		
		<!-- 提交按钮 -->
		<view class="submit">
			<u-button
				@click="add"
				shape="circle"
				type="primary"
				text="提交"
				color="#7B5DF0"
				style="width: 550rpx;"
			></u-button>
		</view>
		
		<!-- 选择上午下午 -->
			
			<u-picker
				:closeOnClickOverlay="true"
				@close="timeShow=false"
				:show="timeShow"
				:columns="timeOptions"
				keyName="name"
				@cancel="timeShow=false"
				@confirm="timeSelect"
			></u-picker>
			
			<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 RedDot from '../../conponents/red-dot.vue'
	import Sever from "../../conponents/Sever/SeverTwo.vue"
	import SeverOne from "../../conponents/Sever/severOne.vue"
	import timeSever from "../../conponents/Sever/timeSever.vue"
	import upImage from '../../conponents/upload/upImage.vue'
	export default {
		components:{
			RedDot,
			Sever,
			SeverOne,
			timeSever,
			upImage,
		},
		data() {
			return {
				user:"请选择",
				show:false,
				nameShow: false, // 姓名选择显隐
				symptom: "", // 症状文本
				currentDateArray: [], // 时间
				timeShow1: false, // 开始时间选择显隐
				timeShow2: false, // 结束时间选择显隐
				classData: [], // 班级数据
				classId: {},
				classShow: false, // 班级显隐
				
				startStr: '', // 开始时间
				endStr: '', // 开始时间
				startTime: '', // 开始时间
				endTime: '', // 结束时间
				timeData: '', // 上午或者下午
				dayData: '', // 天数
				tempEnd: '',
				
				timeShow: false, // 显示上下午弹窗
				timeOptions:[[{name:'上午'},{name:'下午'}]], // 上下午选择
				
				symptomImgs: [], // 照片
				img: [],
				
				fileList3: [{
					url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}],
				columns:[],
				
				leaveTypeShow: false, // 请假类型显隐
				LeaveTypeData: '', // 请假类型
				leaveType: [
					[{name: '事假',},{name: '病假',},]
				], // 请假类型
				
				leaveData: [], 
				VerShow: false, 
				
				studentId: {}, // 学生id
				nameList: [],
				
				dayShow: false, // 天数显隐
				dayList: [], // 天数选择
				formData: {
					temperature: '', // 体温
					VerData: '',
					reason: '', // 请假事由
				},
				
				loading: false, // 加载动画
			}
		},
		created() {
			this.getClass()
			this.leavetype()
			this.day()
		},
		methods: {
         choiceUser(e){
			 console.log("e==>",e)
			 this.show=false;
			 this.user=e.value[0].name;
		 },
		 
		 // 请假类型确定
		 choiceLeaveType(e){
			 console.log("e==>",e)
			 this.leaveTypeShow=false;
			 this.LeaveTypeData=e.value[0].name;
			 if(e.value[0].name == '事假'){
				 this.formData.VerData = ''
			 }
		 },
		 
		 choiceVer(e){
			 console.log("e==>",e)
			 this.VerShow=false;
			 this.formData.VerData=e.value[0];
		 },
		 
		 // 天数选择
		 choiceDay(e){
			 console.log("e==>",e)
			 this.dayShow=false;
			 this.formData.dayData = e.value[0];
			 this.dayData = e.value[0];
			 
			 // this.currentDateArray[1] = this.time(this.currentDateArray[0], e.value)
			 this.timeSelect()
		 },
		 
		 // 学生选择
		 choiceName(e){
			 this.nameShow = false
			 this.studentId = e.value[0]
		 },
		 
		 onDayClicks(data) {
		 	this.currentDateArray[0] = data.date
		 	this.timeShow1 = false
		 	console.log('时间' , this.currentDateArray[0])
			this.thimeST()
		 },
		 
		 onDayClicks1(data) {
		 	this.currentDateArray[1] = data.date
		 	this.timeShow2 = false
		 	console.log('时间' , this.currentDateArray[1])
		 },
		 
		 // 获取学校年级班级等数据
		 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

		 	}).catch(err=>{
		 		console.log('err' , err)
		 	})
		 },
		 
		 getName(){
			 this.$request({
			 	url: this.$api.addHandle.getNameSelectVos,
			 	header: {
			 	    contentType: "application/json"
			 	},
			 	data:{
			 		classId: this.classId.id
			 	}
			 }).then(res=>{
				this.nameList = []
				this.nameList.push(res.data)
			 
			 })
		 },
		 
		 leavetype(){
			 this.$request({
			 	url: this.$api.leave.leavetype,
			 	header: {
			 	    contentType: "application/json"
			 	},
			 	data:{
			 		current: 1,
			 		size: 999,
			 	}
			 }).then(res=>{
			 	this.leaveData.push(res.data.records)
			 })
		 },
		 
		 addImg(img){
		 		console.log('img' , img)
				this.img = []
				for(let item of img){
					this.img.push(item.url)
				}
		 },
		 
		 add(){
			 // wx.chooseImage({})
			 // return
			 if(!this.classId.label){
			 	this.$u.toast('未选择班级')
			 	return
			 }else if(!this.studentId.value){
				 this.$u.toast('未选择学生')
				 return
			 }else if(this.LeaveTypeData == ''){
				 this.$u.toast('未选择请假类型')
				 return
			 }else if(this.LeaveTypeData == '病假' && !this.formData.VerData.type){
				 this.$u.toast('未选择病症类型')
				 return
			 }else if(this.LeaveTypeData == '病假' && this.formData.temperature == ''){
				 this.$u.toast('未输入体温')
				 return
			 }else if(!this.currentDateArray[0]){
				 this.$u.toast('未选择开始时间')
				 return
			 }else if(this.dayData == ''){
				 this.$u.toast('未选择请假天数')
				 return
			 }else if(this.formData.reason == ''){
				 this.$u.toast('填写请假事由')
				 return
			 }

			 // return
			 
			 const date = new Date()
			 const y = date.getFullYear()
			 const m = (date.getMonth()+1)<10? `0${date.getMonth()+1}`: date.getMonth()+1
			 const d = (date.getDate())<10? `0${date.getDate()}`: date.getDate()
			 const h = (date.getHours())<10? `0${date.getHours()}` : date.getHours()
			 const mm = (date.getMinutes())<10?  `0${date.getMinutes()}` : date.getMinutes()
			 const ss =(date.getSeconds())<10? `0${date.getSeconds()}`: date.getSeconds()
			 const applyTime = `${y}-${m}-${d} ${h}:${mm}:${ss}`
			 
			 this.$request({
			 	url: this.$api.leave.add,
			 	header: {
			 	    contentType: "application/json"
			 	},
				method: 'POST',
			 	data:{
			 		daysOff: this.dayData,
			 		startStr: this.timeData,
			 		endStr: this.endTime.split(' ')[1],
			 		startTime: this.currentDateArray[0] + ' 00:00:00',
			 		temperature: this.formData.temperature,
			 		endTime: this.tempEnd,
			 		enclosure: this.img.join(','),
			 		applyTime: applyTime,
			 		reason: this.formData.reason,
			 		studentId: this.studentId.value,
			 		leaveType: this.LeaveTypeData,
			 		disease: this.formData.VerData.type,	
					
			 	}
			 }).then(res=>{
			 	this.$u.toast('添加成功')
				setTimeout(()=>{
					uni.switchTab({
						url: '/pages/leave/index'
					});
				}, 2000)
			 }).catch(err => {
				 this.$u.toast(err.msg)
			 })
		 },
		 
		 // 选择班级触发获取数据
		 search(data){
		 	console.log(data)
			this.classShow = false
		 	this.classId = data
			this.getName()
		 },
		 
		 cancelClass(){
			 this.classShow = false
		 },
		 
		 // 循环生成天数
		 day(){
			 let arr = []
			 var da = 0
			 for(var i = 1; i<=60; i++){
				 arr.push(da += 0.5)
			 }
			 this.dayList.push(arr)
		 },
		 
		 time(time, data){
			 var x = new Date(time);
			 var time1 = x.getTime();
			 let date = time1 + data * 86400000
			
			let item = new Date(date)
			var year = item.getFullYear();  //getFullYear()代替getYear()
			var month = item.getMonth() + 1;//月 getMonth()：0 ~ 11
			var day = item.getDate();//日 getDate()：(1 ~ 31)
			var time = year + '-' + this.addZero(month) + '-' + this.addZero(day);
	
			return time
		 },
		 
		 addZero(time) {
		     return time < 10 ? ('0' + time) : time;
		 },
		 
		 
		 nameClik(){
			 if(this.classId.label == undefined){
				this.$u.toast('请先选择班级信息')
				return
			 }
			 this.nameShow = true
		 },
		 
		 
		 thimeST(){
			 this.timeShow = true
		 },
		 
		 // 选择上午下午
		 timeSelect(val){
			 if(val){
				 this.timeData = val.value[0].name
			 }
		 	this.startTime = this.currentDateArray[0] +' ' + this.timeData
			// console.log(this.timeData , this.currentDateArray[0], 'time')
			if(this.dayData){
		 		const day = parseFloat(this.dayData)
		 		let endTimes = new Date(this.currentDateArray[0] + ' 00:00:00').getTime()
		 		if(this.timeData === '上午'){
		 			if(day > 0.5){
						endTimes = (endTimes + day*24*60*60*1000) - 1000
					}else{
						endTimes = endTimes + day*24*60*60*1000
					}
		 		} else {
		 			endTimes = (endTimes + 12*60*60*1000 + day*24*60*60*1000) - 1000
		 		}
				console.log(endTimes)
		 		endTimes = new Date(endTimes)
		 		const y = endTimes.getFullYear()
		 		const m = (endTimes.getMonth()+1)<10? `0${endTimes.getMonth()+1}` : endTimes.getMonth()+1
		 		const d = (endTimes.getDate())<10? `0${endTimes.getDate()}` : endTimes.getDate()
		 		const h = endTimes.getHours()
		 		const M = endTimes.getMinutes()<10? `0${endTimes.getMinutes()}` : endTimes.getMinutes()
		 		const s = endTimes.getSeconds()<10? `0${endTimes.getSeconds()}` : endTimes.getSeconds()
		 		this.tempEnd = `${y}-${m}-${d} ${h}:${M}:${s}`
				console.log('itme', this.tempEnd, h)
		 		if(h<=12){
		 			this.endTime = `${y}-${m}-${d} 上午`
					console.log(`${y}年${m}月${d}日 上午`)
		 		} else {
		 			this.endTime = `${y}-${m}-${d}日- 下午`
					console.log(`${y}年${m}月${d}日 下午`)
		 		}
			}
		 	this.timeShow = false
		 },
		 
		}
	}
</script>

<style lang="scss" scoped>
	page{
		/* background-color: #D9D9D9; */
		background-color: #F5F5F5 !important;
	}
	
	.title{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 23rpx;
		color: rgba(0,0,0,0.60);
		background: #f5f6f7;
		color: rgba(0,0,0,0.60);
		padding-left: 32rpx;
		box-sizing: border-box;
	}
	
	.u-cell{
		background-color: #fff;
		height: 112rpx;
		line-height: 73rpx;
	}
	
	.u-cell-text {
		font-size: 32rpx;
		overflow: hidden;
	}
	
	.u-cell-text image{
		width: 10rpx;
		height: 28rpx;
		margin-left: 15rpx	;
	}
	
	.symptom{
		margin-top: 20rpx;
		padding: 32rpx 32rpx;
		box-sizing: border-box;
		background-color: #fff;
	}
	
	.upImage{
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
		border: 2rpx solid #d9d9d9;
		display: flex;
		justify-content: center;
	}
	
	.choice{
		height: 178rpx;
		background-color: #fff;
		margin-top: 20rpx;
		padding-top: 36rpx;
		box-sizing: border-box;
	}
	
	.submit{
		height: 240rpx;
		padding-top: 49rpx;
		box-sizing: border-box;
	}
	
</style>