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>
			   <Sever v-if="classData.length != 0" :classData="classData" :classShow="classShow" @search="search" @cancelClass="cancelClass"></Sever>
			</view>
			
			<view class="content">
			   <u-cell :value="studentId.label" isLink @click="nameShow=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="nameShow" 
					:columns="nameList" 
					keyName="label" 
					@cancel="nameShow=false" 
					@confirm="choiceName"
					:closeOnClickOverlay="true" 
					@close="nameShow=false"
				></u-picker>
			</view>
		</template>
		
		<!-- 请假类型 -->
		<template>
			<view class="content" style="margin-top: 20rpx;">
			   <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">
			   <u-cell>
				   <view
						slot="title"
						class="u-slot-title"
					>
						<text class="u-cell-text">
							<RedDot text="体温" :required="true"></RedDot>
							<u--input
							    placeholder="请输入"
							    border="none"
							    v-model="formData.temperature"
								style="width: 200rpx; position: absolute; top:10rpx; left:570rpx; float: right;"
							  ></u--input>
						</text>
					</view>
			   </u-cell>
			</view>
		</template>
		
		<view class="title">
			请假时间
		</view>
		
		<!-- 请假时间 -->
		<template>
			<view class="content">
			   <u-cell :value="currentDateArray[0]" 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>
					<timeSever @onDateClick="getSelectDatatemp"  @onDayClick="onDayClicks"  />
			   </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="currentDateArray[1]" isLink>
				   <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">
				请假事由
			</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>
		
	</view>

</template>

<script>
	import RedDot from '../../conponents/red-dot.vue'
	import Sever from "../../conponents/Sever/SeverTwo.vue"
	import timeSever from "../../conponents/Sever/timeSever.vue"
	import upImage from '../../conponents/upload/upImage.vue'
	export default {
		components:{
			RedDot,
			Sever,
			timeSever,
			upImage,
		},
		data() {
			return {
				user:"请选择",
				show:false,
				nameShow: false, // 姓名选择显隐
				symptom: "", // 症状文本
				currentDateArray: ['请选择', '请选择'], // 时间
				timeShow1: false, // 开始时间选择显隐
				timeShow2: false, // 结束时间选择显隐
				classData: [], // 班级数据
				classId: {
					label: '请选择'
				},
				classShow: false, // 班级显隐
				
				symptomImgs: [], // 照片
				img: [],
				
				fileList3: [{
					url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}],
				columns:[],
				
				leaveTypeShow: false, // 请假类型显隐
				LeaveTypeData: '请选择', // 请假类型
				leaveType: [
					[{name: '事假',},{name: '病假',},]
				], // 请假类型
				
				leaveData: [], 
				VerShow: false, 
				
				studentId: {
					label: '请选择'
				}, // 学生id
				nameList: [],
				
				dayShow: false, // 天数显隐
				dayList: [], // 天数选择
				formData: {
					temperature: '', // 体温
					VerData: '',
					reason: '', // 请假事由
				},
			}
		},
		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;
		 },
		 
		 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.currentDateArray[1] = this.time(this.currentDateArray[0], e.value)
		 },
		 
		 // 学生选择
		 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])
		 },
		 
		 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.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(){
			 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.formData.dayData,
			 		startStr: '上午',
			 		endStr: '上午',
			 		startTime: this.currentDateArray[0] + ' 00:00:00',
			 		temperature: this.formData.temperature,
			 		endTime: this.currentDateArray[1] + ' 00:00:00',
			 		enclosure: this.img.join(','),
			 		applyTime: applyTime,
			 		reason: this.formData.reason,
			 		studentId: this.studentId.value,
			 		leaveType: this.LeaveTypeData,
			 		disease: this.formData.VerData.id,	
					
			 	}
			 }).then(res=>{
			 	this.$u.toast('添加成功')
			 	uni.switchTab({
			 		url: '/pages/leave/index'
			 	});
			 })
		 },
		 
		 // 选择班级触发获取数据
		 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;
		 },
		 
		}
	}
</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;
		position: relative;
	}
	
	.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>