LabCenter/pages/record/StoTtransfer.vue

<template>
	<view class="box">
		<view class="table-list">
			<!-- 停调可弹框 -->
			<view class="prop-title">
				<view class="">
					课程名称：{{ detail.lesson ? detail.lesson.name : "--" }}
				</view>
				<view class="">
					指导教师：{{ detail.teacher ? detail.teacher.name : "--" }}
				</view>
				<view class="">
					授课内容：{{ detail.teach_title ? detail.teach_title : "--" }}
				</view>
				<view class="">
					上课时间：{{ detail.day}} / 第{{detail.week}}周 / {{detail.week_index}} / {{detail.time_id.name}}
				</view>
				<view class="">
					上课班级：{{ detail.grade ? detail.grade.name : "--" }}
				</view>
			</view>
			<view class="prop-content" v-if="zindex == 1">
				<!-- <image src="../../static/image/index/icon_6.png" mode="" class="prop-image"></image> -->
				<view style="width: 100%">
					<!-- <scroll-view scroll-y="true" style="height: 200px;"> -->
					<view class="content-item">
						<view class="prop-label"> 停调课类型： </view>
						<view class="prop-text">
							<u-radio-group v-model="type" @change="radioGroupChange">
								<u-radio @change="radioChange" v-for="(item, index) in list_sel" :key="index"
									:name="item.id">
									{{ item.name }}
								</u-radio>
							</u-radio-group>
						</view>
					</view>

					<view class="content-item" v-if="type == 2">
						<view class="prop-label"> 调课时间： </view>
						<view class="prop-text">
							<view class="change-time" @click="chaneTime"> 选择时间 </view>
						</view>
					</view>
					<view class="content-item" v-if="migrate_data.length > 0 && type == 2">
						<view class="prop-text">
							<view class="table-title">
								<view class="title-item"> 实验室 </view>
								<view class="title-item"> 日期 </view>
								<view class="title-item"> 节次 </view>
							</view>
							<view class="table-title" v-for="(item, index) in migrate_data" :key="index">
								<view class="title-item">
									{{ item.room_name }}
								</view>
								<view class="title-item">
									{{ item.day }} · 第{{ item.week }}周 · 星期{{
			                $transformWeek(item.week_index)
			              }}
								</view>
								<view class="title-item">
									{{ getTime(item.time_id) }}
								</view>
							</view>
						</view>
					</view>
					<view class="content-item">
						<view class="prop-label" @click="show = true"> 停调课原因：
							{{selIndex==null ? '请选择停调课原因':selector[selIndex].name}} </view>
						<u-picker mode="selector" v-model="show" :default-selector="[selIndex==null ? 0 : selIndex]"
							:range="list" @confirm="confirm" @cancel="cancel"></u-picker>
					</view>
					<view class="content-item" v-if="selector[selIndex].name=='其他'">
						<view class="prop-text">
							<textarea v-model="body" rows="2" placeholder="请输入停调课原因"></textarea>
							<!-- <u-input v-model="body" type="textarea" border height="150" auto-height /> -->
						</view>
					</view>
				</view>
				<!-- </scroll-view> -->
				<view class="pop-btn">
					<view @click="returns" style="
			          opacity: 1;
			          background: #f5f5f5;
			          color: #333333;
			        ">
						<text>取消</text>
					</view>
					<view style="background: #3665ff; color: #fff" @click="sureHandle">
						<text>确定</text>
					</view>
				</view>
			</view>
			<!-- 选择时间弹框 -->
			<view class="change-time-prop" v-if="simpleShow" @touchmove.stop.prevent="disabledScroll">
				<view
					style="font-size: #333333; font-weight: 550; font-size: 17px;padding-left: 10px;display:flex;align-items:center;">
					第{{ simple_week }}周
					<view style="font-weight: 550; font-size: 15px;color:red;padding-left: 10px;">
						*可用座位数:{{roomList[simple_currentRoom].use_student_nums}}
					</view>
				</view>
				<view class="table_1">
					<u-tabs :list="roomList" :current="simple_currentRoom" @change="simpleChangeRoom"></u-tabs>
					<view class="table-border">
						<view class="jie">
							<view class="jie-item" style="height: 55px; line-height: 20px">
							</view>
							<view class="jie-item" v-for="(item, index) in simple_left" :key="index">
								{{ item.name }}
							</view>
						</view>
						<view class="day">
							<view v-for="(item, index) in simple_weekList" :key="index" class="day-item"
								:class="[checkOld(item.day) ? 'day-item-1' : '']">
								<view class="time" :class="checkToday(item.day) ? 'today' : ''"
									style="height: 55px; line-height: 20px">
									<view style="padding-top: 8px">{{ item.week }}</view>
									<view>{{ item.day }}</view>
								</view>

								<view v-for="(course, index1) in simple_calendar[index].lists" :key="index1"
									class="jie-item">
									<!-- 时间段已过期 -->
									<view v-if="checkOld(item.day)"></view>
									<view v-else class="course" @click="selectTime(simple_calendar[index], index1)">
										<view v-if="!course.is_lesson" class="course kong" :class="
			                  checkIselect(
			                    simple_calendar[index].week_index,
			                    simple_jieList[index1].id
			                  )
			                    ? 'xuan'
			                    : ''
			                ">
											<view>{{
			                  checkIselect(
			                    simple_calendar[index].week_index,
			                    simple_jieList[index1].id
			                  )
			                    ? "已选"
			                    : "可选"
			                }}</view>
										</view>
										<view v-if="
			                  current_course.week == simple_week &&
			                  current_course.room_id == simple_room_id &&
			                  simple_calendar[index].week_index ==
			                    current_course.week_index &&
			                  current_course.time_id == simple_jieList[index1].id
			                " class="course current-course">
											当前课程
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="simple-week">
						<view :class="simple_week == 1 ? 'disable-buttom' : 'change-buttom'" @click="simpleLastWeek">
							上一周
						</view>

						<view :class="simple_week == maxWeek ? 'disable-buttom' : 'change-buttom'"
							@click="simpleNextWeek">
							下一周
						</view>
					</view>
					<view class="sure-buttom">
						<view class="cancel" @click="cancelSelectTime"> 取消 </view>
						<view class="sure" @click="sureSelectTime"> 确定 </view>
					</view>
				</view>
			</view>
			<!-- 补课弹框 -->
			<view class="prop-content" v-if="zindex==2">
				<!-- <image src="../../static/image/index/icon_6.png" mode="" class="prop-image"></image> -->
				<!-- <view class="prop-title">
						{{ detail.lesson ? detail.lesson.name : "--" }}
					</view> -->
				<view style="width: 100%">
					<!-- <scroll-view scroll-y="true" style="height: 200px;"> -->
					<view class="content-item" style="align-items: center;">
						<view class="prop-label"> 补课时间： </view>
						<view class="prop-text">
							<view class="change-time" @click="chaneTime"> 选择时间 </view>
						</view>
					</view>
					<view class="content-item" v-if="migrate_data.length > 0">
						<view class="prop-text">
							<view class="table-title">
								<view class="title-item"> 实验室 </view>
								<view class="title-item"> 日期 </view>
								<view class="title-item"> 节次 </view>
							</view>
							<view class="table-title" v-for="(item, index) in migrate_data" :key="index">
								<view class="title-item">
									{{ item.room_name }}
								</view>
								<view class="title-item">
									{{ item.day }} · 第{{ item.week }}周 · 星期{{
			                $transformWeek(item.week_index)
			              }}
								</view>
								<view class="title-item">
									{{ getTime(item.time_id) }}
								</view>
							</view>
						</view>
					</view>
					<view class="content-item">
						<view class="prop-label" @click="show = true"> 补课原因：
							{{selIndex==null ? '请选择补课原因':selector[selIndex].name}} </view>
						<u-picker mode="selector" v-model="show" :default-selector="[selIndex==null ? 0 : selIndex]"
							:range="list" @confirm="confirm" @cancel="cancel"></u-picker>
					</view>
					<view class="content-item" v-if="selector[selIndex].name=='其他'">
						<view class="prop-text">
							<textarea v-model="body" rows="2" placeholder="请输入补课原因"></textarea>
							<!-- <u-input v-model="body" type="textarea" border height="150" auto-height /> -->
						</view>
					</view>
				</view>
				<!-- </scroll-view> -->
				<view class="pop-btn">
					<view @click="returns" style="
			          opacity: 1;
			          background: #f5f5f5;
			          color: #333333;
			        ">
						<text>取消</text>
					</view>
					<view style="background: #3665ff; color: #fff" @click="make_les">
						<text>确定</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				meta: '',
				list_sel: [{
						id: 1,
						name: "停课",
					},
					{
						id: 2,
						name: "调课",
					},
				],
				type: "", //停调课类型、1停课，2调课
				detail: '',
				simple_week: 0,
				simple_currentRoom: 0,
				simpleShow: false,
				room_id: 18,
				week: 0,
				currentRoom: 0,
				migrate_data: [],
				simple_weekList: [],
				today: "", //今日日期
				selected: [], //已选择
				jieList: [],
				roomList: [],
				simple_left: [],
				body: '',
				maxWeek: 0,
				zindex: '',
				selector: [],
				selIndex: null,
				list: [],
				show: false
			}
		},
		onLoad(detail) {
			this.maxWeek = Number(this.vuex_term_weeks);
			this.getRoomList();
			this.user_id = this.vuex_user.id;
			this.detail = JSON.parse(detail.detail)
			this.zindex = Number(detail.type);
			this.$u.get('/base/category-select-options?key=du2r3YxK').then(res => {
				console.log(res)
				var data = res.data;
				var obj = {
					name: '其他',
					id: 0
				}
				data.push(obj)
				this.selector = data;
				var arr = []
				data.map(item => {
					arr.push(item.name)
				})
				this.list = arr;
				console.log(this.selector)
			})
		},
		methods: {
			//返回上一页
			returns() {
				uni.navigateBack()
			},
			//原因选择确定
			confirm(e) {
				this.selIndex = e[0];
				if (this.selector[this.selIndex].name != '其他') {
					this.body = this.list[this.selIndex]
				} else {
					this.body = ''
				}
			},
			cancel() {
				//原因选择取消
			},
			//获取实验室列表
			async getRoomList() {
				await this.$u
					.get("/school/room-select-options", {
						status: 1,
					})
					.then((res) => {
						this.roomList = res.data;
						this.room_id = res.data[this.currentRoom].id;
						this.simple_room_id = res.data[this.currentRoom].id;
					});
			},
			//获取时间选择列表
			getChangeTime() {
				this.$u
					.post("/school/schedule/calendar-simple", {
						room_id: this.simple_room_id,
						week: this.simple_week,
					})
					.then((res) => {
						this.simple_jieList = res.data.times;
						var head = res.data.headers;
						var xingqi = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
						for (var i = 0; i < head.length; i++) {
							head[i].week = xingqi[i];
							head[i].day = head[i].day.slice(5, 11).replace("-", "/");
						}
						this.simple_weekList = head;
						this.simple_calendar = res.data.calendar;
						this.simple_week = res.data.week;
						this.simple_left = res.data.times;
						// console.log(this.simple_jieList)
					});

			},
			//选择时间切换实验室
			simpleChangeRoom(item) {
				this.simple_currentRoom = item;
				this.simple_room_id = this.roomList[item].id;
				this.getChangeTime();
			},
			//点击选择时间
			chaneTime() {
				this.simpleShow = true;
				this.simple_room_id = this.room_id;
				this.simple_week = this.week;
				this.simple_currentRoom = this.currentRoom;
				this.getChangeTime();
			},
			//匹配节次
			getTime(time) {
				console.log(time)
				var time1 = "";
				this.simple_jieList.map((item) => {
					if (item.id == time) {
						time1 = item.name;
					}
				});
				return time1;
			},
			//判断是否已选择
			checkIselect(week_index, time_id) {
				var status = false;
				if (this.selected.length == 0) return false;
				this.selected.map((item) => {
					if (
						this.simple_week == item.week &&
						this.simple_room_id == item.room_id &&
						week_index == item.week_index &&
						time_id == item.time_id
					) {
						status = true;
					}
				});
				return status;
			},
			//选择时间点
			selectTime(row, index1) {
				this.selected = [];
				this.migrate_data = [];
				let id =
					row.week_index.toString() +
					this.simple_jieList[index1].id.toString() +
					this.simple_room_id.toString();
				let index = false;
				this.migrate_data.map((item) => {
					if (item.id == id) index = true;
				});
				console.log(index, "000", id);
				if (!index) {
					let arr1 = [{
						id: id,
						week: row.week,
						day: row.day,
						week_index: row.week_index,
						time_id: this.simple_jieList[index1].id,
						time_name: this.simple_jieList[index1].name,
						room_id: this.simple_room_id,
						room_name: this.roomList[this.simple_currentRoom].name,
					}, ];
					this.migrate_data = this.migrate_data.concat(arr1);
					let arr = [{
						id: row.week_index.toString() +
							this.simple_jieList[index1].id.toString() +
							this.simple_room_id.toString(),
						time_id: this.simple_jieList[index1].id,
						week_index: row.week_index,
						week: row.week,
						room_id: this.simple_room_id,
					}, ];
					// this.selected = this.selected.concat(arr) //开放预约可多选

					this.selected = arr;
					// this.$forceUpdate()
					// this.$set(this.selected, this.selected.concat(arr))
				} else {
					this.selected = this.selected.filter((item) => {
						return item.id !== id;
					});
					this.migrate_data = this.migrate_data.filter((item) => {
						return item.id !== id;
					});
				}
			},
			disabledScroll() {
				return;
			},
			foreach(lesson) {
				for (var i = 0; i < lesson.length; i++) {
					if (lesson[i].week_index == 0) {
						lesson[i].week_index = '星期一'
					}
					if (lesson[i].week_index == 1) {
						lesson[i].week_index = '星期二'
					}
					if (lesson[i].week_index == 2) {
						lesson[i].week_index = '星期三'
					}
					if (lesson[i].week_index == 3) {
						lesson[i].week_index = '星期四'
					}
					if (lesson[i].week_index == 4) {
						lesson[i].week_index = '星期五'
					}
					if (lesson[i].week_index == 5) {
						lesson[i].week_index = '星期六'
					}
					if (lesson[i].week_index == 6) {
						lesson[i].week_index = '星期日'
					}
				}
				return lesson;
			},
			radioGroupChange(e) {
				console.log(e);
			},
			radioChange(e) {
				//单选按钮事件
			},
			//判断是否为当天日期
			checkToday(tableDay) {
				var nowDay = Number(this.today.replace(/-/g, ""));
				//表格日期
				var day2 = Number(tableDay.replace(/-/g, ""));
				if (nowDay == day2) {
					return true;
				} else {
					return false;
				}
			},
			//选择时间上一周
			simpleLastWeek() {
				if (this.simple_week > 1) {
					this.simple_week--;
					this.getChangeTime();
				}
			},
			//选择时间下一周
			simpleNextWeek() {
				if (this.simple_week < this.maxWeek) {
					this.simple_week++;
					this.getChangeTime();
				}
			},
			//判断课程是否过期
			checkOld(tableDay) {
				var nowDay = Number(this.today.replace(/-/g, ""));
				//表格日期
				var day2 = Number(tableDay.replace(/-/g, ""));
				if (nowDay > day2) {
					return true;
				} else {
					return false;
				}
			},
			//取消选择时间
			cancelSelectTime() {
				(this.selected = []), (this.migrate_data = []);
				this.simpleShow = false;
			},
			//确定选择
			sureSelectTime() {
				this.simpleShow = false;
			},
			// 补课申请
			make_les() {
				if (this.migrate_data.length == 0) {
					uni.showToast({
						title: "请选择补课时间",
						icon: "none",
					})
					return;
				}
				if (this.selIndex == null) {
					uni.showToast({
						title: "请选择补课原因",
						icon: "none",
					});
					return;
				}
				if (!this.body) {
					uni.showToast({
						title: "请输入补课原因",
						icon: "none",
					});
					return;
				}
				let data = {
					type: 3,
					body: this.body,
					id: this.detail.id,
					migrate_data: this.migrate_data[0],
					apply_type: this.selector[this.selIndex].id
				};
				this.$u.post("/school/schedule/change", data).then((res) => {
					uni.showToast({
						title: "提交成功，请等待管理员审核!",
						icon: "none",
					})
					uni.navigateBack()
				});
			},
			//确定停调课
			sureHandle() {
				if (!this.type) {
					uni.showToast({
						title: "请选择类型",
						icon: "none",
					});
					return;
				}
				if (this.type == 2 && this.migrate_data.length == 0) {
					uni.showToast({
						title: "请选择调课时间",
						icon: "none",
					});
					return;
				}
				if (this.selIndex == null) {
					uni.showToast({
						title: "请选择停调课原因",
						icon: "none",
					});
					return;
				}
				if (!this.body) {
					uni.showToast({
						title: "请输入停调课原因",
						icon: "none",
					});
					return;
				}
				let data = {
					type: this.type,
					body: this.body,
					id: this.detail.id,
					migrate_data: this.migrate_data[0],
					apply_type: this.selector[this.selIndex].id
				};
				this.$u.post("/school/schedule/change", data).then((res) => {
					uni.showToast({
						title: "提交成功，请等待管理员审核!",
						icon: "none",
					});
					uni.navigateBack()
				});
			}, //取消停调可
		}
	}
</script>

<style scoped lang="scss">
	.table-item {
		padding: 15px 12px;
		border-top: solid 1px #F2F2F2;
		display: flex;
		width: 100%;
		box-sizing: border-box;
		.room-name {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #333333;
			font-size: 13px;
			font-weight: 800;
		}

		.teacher {
			display: flex;
			flex-wrap: wrap;
			color: #333;
			width: 100%;
			font-size: 13px;
			text {
				width: 100%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				padding-top: 5px;
			}
		}

		.right {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			view {
				width: 64px;
				height: 28px;
				border-radius: 14px;
				opacity: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				color: #FFFFFF;
				font-weight: 400;
			}
		}
	}

	.prop-title {
		font-size: 15px;
		margin: 0 auto;
		margin-bottom: 20px;
		font-weight: 550;
		color: #333333;
		width: 90%;

		view {
			padding-top: 6px;
		}
	}

	.prop-content {
		padding: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.content-item {
			display: flex;
			color: #333333;
			margin-top: 8px;
			width: 100%;

			.prop-label {
				font-size: 15px;
				font-weight: 550;
			}

			.prop-text {
				flex: 1;

				.change-time {
					display: inline-block;
					padding: 0 8px;
					line-height: 30px;
					height: 30px;
					font-size: 12px;
					color: #ffffff;
					background-color: #3665ff;
					border-radius: 5px;
				}

				.table-title {
					display: flex;
					border-left: solid 1px#b3b3b3;

					.title-item {
						flex: 1;
						padding: 5px 0;
						text-align: center;
						border-right: solid 1px #b3b3b3;
						border-bottom: solid 1px#b3b3b3;
					}
				}

				.table-title:first-child {
					background-color: #e3e3e3;
					border-top: solid 1px #b3b3b3;
				}

				textarea {
					border: solid 1px #b3b3b3;
					width: auto;
					border-radius: 8px;
					padding: 8px;
					height: 100px;
				}
			}

			.prop-content {
				font-size: 15px;
			}
		}

		.prop-srue {
			width: 279px;
			height: 44px;
			background: #3665ff;
			text-align: center;
			margin-top: 30px;
			line-height: 44px;
			color: #ffffff;
			border-radius: 22px;
			font-size: 16px;
			margin-bottom: 5px;
		}

		.pop-btn {
			// margin-top: 40px;
			width: 84%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			bottom: 46px;

			view {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 130px;
				height: 44px;
				font-size: 16px;
				font-weight: bold;
				border-radius: 22px;
				opacity: 1;
			}
		}
	}

	//时间选择弹框
	.change-time-prop {
		// height: 100%;
		height: 100vh;
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99999999999;
		overflow-y: auto;

		.table_1 {
			.simple-week {
				text-align: right;
				padding: 10px;
				background-color: #fff;
				border-bottom: solid 1px #dddcdc;

				.change-buttom,
				.disable-buttom {
					display: inline-block;
					padding: 8px 30px;
					background-color: #3665ff;
					color: #ffffff;
					// margin-left: 10px;
					border-radius: 18px;
				}

				.week-text {
					display: inline-block;
					font-size: 15px;
					margin: 0 10px;
					font-weight: bold;
				}

				.disable-buttom {
					background-color: #dddcdc;
					color: #7c7b7b;
				}
			}

			.sure-buttom {
				text-align: center;
				margin-top: 20px;

				.cancel {
					display: inline-block;

					width: 150px;
					height: 45px;
					line-height: 45px;
					border: solid 1px #3665ff;
					color: #3665ff;
					border-radius: 22px;
				}

				.sure {
					display: inline-block;
					width: 150px;
					height: 45px;
					line-height: 45px;
					background-color: #3665ff;
					color: #ffffff;
					margin-left: 10px;
					border-radius: 22px;
				}
			}

			.table-border {
				display: flex;

				.week {
					display: flex;
					padding: 8px;
					color: #333333;
					font-size: 12px;
					border-bottom: solid 1px #f2f2f2;
					border-top: solid 1px #f2f2f2;
					background-color: #fbfcff;

					.week-item {
						flex: 1;
						text-align: center;

						.week-day {
							margin-top: 3px;
						}
					}
				}

				.jie {
					text-align: center;
					background-color: #fbfcff;
				}

				.jie-item:first-child {
					background-color: #fbfcff;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.jie-item {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px dashed #f2f2f2;
					border-right: none;
					border-top: none;
					height: 50px;
					border-left: none;
					text-align: center;
				}

				.kong {
					text-align: center;
					// background-color: #0077ff;
					color: #0077ff;
					cursor: pointer;
					// border-bottom: solid 1px #fff;
				}

				.course {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 50px;
					border-left: none;
					text-align: center;
					width: 100%;
				}

				.current-course {
					text-align: center;
					background-color: #0077ff;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.xuan {
					text-align: center;
					background-color: #00b315;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.jie-item:last-child {
					border-bottom: none;
				}

				.day {
					flex: 1;
					display: flex;
					text-align: center;

					.day-item {
						flex: 1;

						.time {
							border-bottom: 1px dashed #f2f2f2;
							background-color: #fbfcff;
						}

						.today {
							color: #df4d76;
						}

						background-color: #fff;
						border: 1px dashed #f2f2f2;
					}

					.day-item-1 {
						background-color: #cdced0;
					}
				}
			}
		}
	}
</style>