jp-education-student/pages/teacher/callNames/classCall.vue

<template>
	<view>
		<u-navbar title="班级点名"></u-navbar>
		<view class="main">
			<view class="position">
				<view class="infos">
					<view class="class">
						{{classList.className}}
					</view>
					<view class="item">
						<view class="title">
							上课时间：
						</view>
						<view class="value">
							{{scheduleSheet.courseDate}} {{scheduleSheet.coursePeriods}}
				
						</view>
					</view>
					<view class="item">
						<view class="title">
							上课教室：
						</view>
						<view class="value">
							{{classRoom.name}}
						</view>
					</view>
					<view class="item">
						<view class="title">
							授课老师：
						</view>
						<view class="value">
							{{employee.employeeName}}
						</view>
					</view>
					<view class="item">
						<view class="title">
							学员总数：
						</view>
						<view class="value">
							{{studentList.length+stopStudentList.length}}人
						</view>
					</view>
					
				</view>
				<view class="tabs">
					<u-tabs bar-width="80" inactive-color="#777777" active-color="#4F3C27" :list="list" :is-scroll="false"
						:current="current" @change="change"></u-tabs>
				</view>
			</view>
			
			<view class="details">
				<view class="item" v-for="(item,index) in rollCallList" :key="index" @click="studentChecked(item)">
					<label class="radio">
						<radio value="" :checked="item.checked" /><text></text>
					</label>
					<view class="picture">
						<u-avatar class="avatar" mode="square"
							:src="item.headPhoto != null ? item.headPhoto : '../../assets/img/head.png'" size="112">
						</u-avatar>
					</view>
					<view class="info">
						<view class="name-tel">
							<view class="name">
								{{item.studentName}}
							</view>
							<view class="tel">
								<view class="img">
									<img src="../../../assets/img/riLine-smartphone-line@1x.png" alt="">
								</view>
								<view>
									{{item.firstContactPhone!=null ? getPhoneNum(item.firstContactPhone)
										: getPhoneNum(item.secondContactPhone)}}
								</view>
							</view>
						</view>
						<view class="else">
							<view class="remain">
								<view>剩余课时</view>
								<view class="num" v-if="item.courseAmountList != null">{{item.courseAmountList[0]}}</view>
							</view>
							<view class="leaved">
								
							</view>
						</view>
				
					</view>
					<view class="state">
						<view class="text" v-if="item.rollCallResult == '1'">到课</view>
						<view class="text" v-if="item.rollCallResult == '2'">请假</view>
						<view class="text" v-if="item.rollCallResult == '3'">旷课</view>
						<view class="text" v-if="item.rollCallResult == '4'">补课</view>
						<view class="text" v-if="item.rollCallResult == '5'">停课</view>
						<view class="text" v-if="item.rollCallResult == '6'">缺课</view>
					</view>
					<view class="iconBox" @click.stop="">
						<u-icon name="arrow-right" color="purple"   size="36" ></u-icon>
					</view>
					
				</view>
				
			</view>
		</view>
		
		<u-picker mode="selector" v-model="show" :default-selector="[0]" :range="selectorObj" range-key="cateName"
			@confirm="confirm"></u-picker>
			
		<!-- 底部 -->
		<view class="bottom">
			<view class="sign-result">
				<view class="title">
					签到结果
				</view>
				<view class="result">
					<view class="itemClass leave" @click="qbStudent">
						全部<text>{{studentList.length + stopStudentList.length}}</text>
					</view>
					<view class="itemClass arrive" @click="dkStudent">
						到课<text>{{dkNum}}</text>
					</view>
					<view class="itemClass arrive" @click="qjStudent">
						请假<text>{{qjNum}}</text>
					</view>
					<!-- <view class="itemClass leave" @click="qkStudent">
						缺课<text>{{qkNum}}</text>
					</view> -->
					<!-- <view class="itemClass truant">
						旷课<text>{{scheduleSheet.kkNum!=null?scheduleSheet.kkNum:'0'}}</text>
					</view> -->
					<!-- <view class="itemClass make-up">
						补课<text>{{scheduleSheet.bkNum!=null?scheduleSheet.bkNum:'0'}}</text>
					</view> -->
					<view class="itemClass stop">
						停课<text>{{tkNum}}</text>
					</view>
				</view>
			</view>
			<view class="set-btn">
				<!-- 全选 -->
				<label class="radio" @click="studentCheckedAll">
					<radio value="" :checked="checkedAll" /><text>全选</text>
				</label>
				<view class="set">
					<view class="set-text">批量点名</view>
					
					<view class="choose" @click="show = true">
						<view class="text">
							{{resultName}}
						</view>
						<view class="icon">
							<u-icon size="28" color="#cccccc" name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				<view class="btn">
					<button @click="save()">保存</button>
				</view>
			</view>
		</view>
		
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import * as callNamesApi from '@/apis/teacher/callNames.js'

	export default {
		data() {
			return {
				resultName: '请选择',
				resultId: '',
				studentId: '',
				studentResult: '',
				classList: {},
				classRoom: {},
				employee: {},
				scheduleSheet: {},
				studentList: [],
				sheetId: '',
				show: false,
				selectorObj: [{
						cateName: '到课',
						id: '1'
					},
					{
						cateName: '请假',
						id: '2'
					},
					{
						cateName: '取消点名',
						id: ''
					},
					// {
					// 	cateName: '缺课',
					// 	id: '6'
					// },
					// {
					// 	cateName: '旷课',
					// 	id: '3'
					// },
					// {
					// 	cateName: '补课',
					// 	id: '4'
					// }
				],
				list: [
					{name: '正常'},
					{name: '停课'}
				],
				current: 0,
				leaveStudentList: [],
				stopStudentList: [],
				lackStudentList: [],
				rollCallList: [],
				dkNum: 0,
				qkNum: 0,
				qjNum: 0,
				tkNum: 0,
				rollCallListAll: [],
				checkedAll: false
			}
		},
		onLoad(op) {
			if (op.id) {
				this.sheetId = op.id;
				this.getRollCallDetail();
			}
		},
		methods: {
			getPhoneNum(num) {
				if(num.length == 11) {
					return num.slice(0,3)+'****'+num.slice(-4);
				} else {
					return num;
				}
			},
			studentChecked(item) {
				item.checked = !item.checked;
				if(!item.checked) {
					this.checkedAll = false;
				}
				this.$forceUpdate();
			},
			studentCheckedAll() {
				this.checkedAll = !this.checkedAll;
				for (var i = 0; i < this.rollCallList.length; i++) {
					this.rollCallList[i].checked = this.checkedAll;
				}
			},
			qbStudent() {
				this.rollCallList = this.studentList;
			},
			dkStudent() {
				var list = [];
				for (var i = 0; i < this.studentList.length; i++) {
					if(this.studentList[i].rollCallResult == '1') {
						list.push(this.studentList[i]);
					}
				}
				this.rollCallList = list;
			},
			qjStudent() {
				var list = [];
				for (var i = 0; i < this.studentList.length; i++) {
					if(this.studentList[i].rollCallResult == '2') {
						list.push(this.studentList[i]);
					}
				}
				this.rollCallList = list;
			},
			// qkStudent() {
			// 	var list = [];
			// 	for (var i = 0; i < this.studentList.length; i++) {
			// 		if(this.studentList[i].rollCallResult == '6') {
			// 			list.push(this.studentList[i]);
			// 		}
			// 	}
			// 	this.rollCallList = list;
			// },
			getRollCallSignIn() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				callNamesApi.rollCallSignIn(this.sheetId, this.rollCallListAll).then((response) => {
					uni.hideLoading();
					
					this.rollCallListAll = [];
					this.resultName = '请选择';
					
					if(response.message != '') {
						this.$refs.uToast.show({
							title: response.message+'课程为0或已经停课，不能点名！',
							type: 'warning ',
							position: 'top',
							duration: 5000
						})
					}
					this.getRollCallDetail();
				}).catch(error => {
					this.rollCallListAll = [];
					this.resultName = '请选择';
					if(error != null) {
						this.$refs.uToast.show({
							title: error,
							type: 'warning ',
							position: 'top',
							duration: 5000
						})
					}
					this.getRollCallDetail();
				})
			},
			getRollCallDetail() {
				this.studentList = [];
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				callNamesApi.loadRollcallData({
					sheetId: this.sheetId
				}).then((response) => {
					uni.hideLoading();
					this.classList = response.data.class;
					this.classRoom = response.data.classRoom;
					this.employee = response.data.employee;
					this.scheduleSheet = response.data.scheduleSheet;
					
					var mList = []
					var mList2 = response.data.studentList;
					for (var m = 0; m < mList2.length; m++) {
						if(mList2[m].rollCallResult!=null && mList2[m].rollCallResult!='' || mList2[m].courseAmountList[0]!=0) {
							mList.push(mList2[m]);
						}
					}
					this.studentList = mList;
					
					this.stopStudentList = response.data.stopStudentList;
					
					for (var n = 0; n < this.stopStudentList.length; n++) {
						var key = "checked";
						var value = false;
						this.stopStudentList[n][key] = value;
						
						if(this.stopStudentList[n].rollCallResult == null) {
							this.stopStudentList[n].rollCallResult = '5';
						}
					}
					
					this.list[0].name = '正常' + this.studentList.length;
					this.list[1].name = '停课' + this.stopStudentList.length;
					
					this.dkNum = 0;
					this.qjNum = 0;
					// this.qkNum = 0;
					this.tkNum = this.stopStudentList.length;
					for (var i = 0; i < this.studentList.length; i++) {
						var key = "checked";
						var value = false;
						this.studentList[i][key] = value;
						
						if(this.studentList[i].rollCallResult == '1') {
							this.dkNum += 1;
						}
						if(this.studentList[i].rollCallResult == '2') {
							this.qjNum += 1;
						}
						// if(this.studentList[i].rollCallResult == '6') {
						// 	this.qkNum += 1;
						// }
					}
					
					this.rollCallList = this.studentList;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			save() {
				for (var i = 0; i < this.rollCallList.length; i++) {
					if(this.rollCallList[i].checked) {
						this.rollCallListAll.push(this.rollCallList[i]);
					}
				}
				
				if(this.current == 1) {
					uni.showToast({
						title: "移动端无法更改‘停课学生’的点名状态",
						icon: "none"
					})
					return;
				}
				if(this.rollCallListAll.length == 0) {
					uni.showToast({
						title: "请先选择学生",
						icon: "none"
					})
					return;
				}
				
				this.getRollCallSignIn();
			},
			confirm(obj) {
				this.resultName = this.selectorObj[obj[0]].cateName;
				for (var i = 0; i < this.rollCallList.length; i++) {
					if(this.rollCallList[i].checked) {
						this.rollCallList[i].rollCallResult = this.selectorObj[obj[0]].id;
					}
				}
			},
			change(index) {
				this.current = index;
				if(index == 1) {
					this.rollCallList = this.stopStudentList;
				} else {
					this.rollCallList = this.studentList;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 200px;
	}
	
	.main {

		background: linear-gradient(180deg, rgba(13, 186, 199, 1) 0%, rgba(244, 246, 246, 1) 100%);
        .position{
			background-color: rgba(13, 186, 199, 1);
			position: fixed;
			top: 88rpx;
			left: 0;
			right: 0;
			z-index: 999;
		}
		.infos {
			color: #fff;
			padding: 32rpx;
			

			.class {
				color: rgba(255, 255, 255, 1);
				font-size: 48rpx;
				font-weight: bold;
				margin-bottom: 16rpx;
			}
            
			.item {
				display: flex;
				margin-top: 16rpx;

				.value {
					margin-left: 8rpx;
				}
			}
		}

		.tabs {
			border-radius: 16px 16px 0px 0px;
			background-color: rgba(255, 255, 255, 1);
			height: 88rpx;
			padding: 0 170rpx;
		}

		.details {
			background-color: #fff;
            margin-top: 424rpx;
			
			.item {
				padding: 24rpx 32rpx;
				display: flex;
				border-top: 1px solid rgba(229, 231, 234, 1);

				.picture {
					width: 112rpx;
					height: 112rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.name-tel {
						display: flex;
						align-items: center;

						.name {
							color: rgba(51, 51, 51, 1);
							font-size: 18px;
							font-weight: bold
						}

						.tel {
							color: rgba(119, 119, 119, 1);
							display: flex;
							align-items: center;
							line-height: 32rpx;
							margin-left: 24rpx;

							.img {
								width: 32rpx;
								height: 32rpx;
								margin-right: 8rpx;

								img {
									width: 100%;
									height: 100%;

								}
							}
						}
					}

					.else {
						display: flex;
						align-items: center;

						.remain,
						.leaved {
							display: flex;
							color: rgba(119, 119, 119, 1);
							align-items: center;
							margin-right: 24rpx;

							.num {
								width: 50rpx;
								height: 32rpx;
								line-height: 32rpx;
								border-radius: 4px;
								background-color: rgba(153, 153, 153, 1);
								color: rgba(255, 255, 255, 1);
								font-size: 24rpx;
								text-align: center;
								margin-left: 8rpx;
							}
						}

					}

				}

				.state {
					display: flex;
					align-items: end;
					margin-left: 40rpx;

					.text {
						color: rgba(51, 51, 51, 1);
					}

					.icon {
						margin-left: 8rpx;
						
					}
				}
				.iconBox{
					margin-left: auto;
					// width: 80rpx;
					// border: 1px solid #cccccc;
					border-radius: 4px;
					display: flex;
					align-items: center;
					justify-content: center;
					
				}
			}
		}
	}


 // 单选框
 /deep/.radio{
 	display: flex ;
 	align-items: center;
 }
 /deep/.uni-radio-input{
 	width: 32rpx;
 	height: 32rpx;
 }
	/deep/.u-cell_title {
		color: rgba(119, 119, 119, 1);
	}

	/deep/.u-cell__value {
		color: #333333;
	}

	.teacher {
		/deep/.u-cell__value {
			color: #00BAC8;
		}
	}

	.student-details {
		padding: 12px 16px;
		background-color: #fff;
		display: flex;
		position: relative;
		border-bottom: 1px solid rgba(229, 231, 234, 1);
		;

		.photo {
			width: 56px;
			height: 56px;
			border-radius: 4px;
			overflow: hidden;
			margin-right: 11px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.details {
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.name-tel {
				display: flex;

				.name {
					margin-right: 12px;
					color: rgba(51, 51, 51, 1);
					font-size: 18px;
				}

				.tel {
					color: rgba(119, 119, 119, 1);
					display: flex;
					align-items: center;
				}
			}

			.class-leave {
				color: rgba(119, 119, 119, 1);
				display: flex;

				.class {
					margin-right: 12px;
					line-height: 14px;
					display: flex;
					align-items: center;
				}

				.leave {
					display: flex;
					align-items: center;
				}

				text {
					display: inline-block;
					width: 16px;
					height: 16px;
					line-height: 16px;
					border-radius: 4px;
					background-color: rgba(153, 153, 153, 1);
					color: rgba(255, 255, 255, 1);
					font-size: 12px;
					text-align: center;
					margin-left: 4px;

				}

			}

		}

		.to-class {
			color: #333333;
			position: absolute;
			bottom: 34rpx;
			right: 24rpx;
		}
	}

	// 底部
	.bottom {
		padding: 12px 16px;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		.sign-result {
			display: flex;
			justify-content: space-between;
			padding-bottom: 22rpx;
			border-bottom: 2rpx solid rgba(229, 231, 234, 1);

			.title {
				color: rgba(119, 119, 119, 1);
				line-height: 40rpx;
			}

			.result {
				display: flex;
				justify-content: space-between;

				.itemClass {
					font-size: 32rpx;
					display: flex;
					align-items: center;
					margin-left: 24rpx;

					text {
						display: inline-block;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 8rpx;
						background-color: rgba(22, 132, 252, 1);
						color: rgba(255, 255, 255, 1);
						font-size: 24rpx;
						text-align: center;
						margin-left: 6rpx;
					}
				}

				.arrive {
					color: rgba(22, 132, 252, 1);
				}

				.leave {
					color: rgba(129, 97, 255, 1);

					text {
						background-color: rgba(129, 97, 255, 1);
					}
				}

				.truant {
					color: rgba(255, 61, 0, 1);

					text {
						background-color: rgba(255, 61, 0, 1);
					}
				}

				.make-up {
					color: rgba(0, 187, 170, 1);

					text {
						background-color: rgba(0, 187, 170, 1);
					}
				}

				.stop {
					color: rgba(238, 49, 56, 1);

					text {
						background-color: rgba(238, 49, 56, 1);
						;
					}
				}
			}
		}

		.set-btn {
			display: flex;
			margin-top: 20rpx;

			.set {
				display: flex;
				align-items: center;
				margin-left: auto;

				.set-text {
					color: rgba(51, 51, 51, 1);
				}

				.choose {
					margin-left: 34rpx;
					display: flex;
					align-items: center;
					height: 20px;

					.text {
						color: rgba(13, 186, 199, 1);
						font-weight: bold;
					}

					.icon {
						margin-left: 8rpx;
					}
				}
			}

			.btn {
				width: 200rpx;
				margin-left: 16rpx;
			}

			button {

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