DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/studentAttendance/single.vue

<template>
	<view class="page">
		<view class="timeTable_sec3">
			<view class="tSec3Box">
				<view class="tSec3Time"><text></text> {{ pageInfo.lessonDate }} 第{{ pageInfo.jc }}节 <text></text></view>
			</view>
		</view>

		<view class="timeTable_sec4">
			<view class="tSec4Box">
				<view class="tSec4T">
					<div>{{ pageInfo.curriculum }}</div>
				</view>
				<view class="tSec4Con">
					<view class="studSeeSec2Txt" id="shouldArrive">
						<text class="text-xxl cuIcon cuIcon-profile"></text> {{ pageInfo.teacher }}
						<text class="text-xxl cuIcon cuIcon-locationfill" style="margin-left: 10px;"></text>
						{{ pageInfo.classRoomNo }}
						<view><text>应到</text> {{ weekData.records }} </view>
					</view>
				</view>
			</view>
		</view>

		<view class="statusType">
			<view>
				<view class="statusTypeLi sStatue1"><text></text>准时</view>
				<view class="statusTypeLi sStatue2"><text></text>早退</view>
				<view class="statusTypeLi sStatue3"><text></text>旷课</view>
				<view class="statusTypeLi sStatue4"><text></text>病假</view>
				<view class="statusTypeLi sStatue5"><text></text>迟到</view>
				<view class="statusTypeLi sStatue6"><text></text>事假</view>
			</view>
		</view>
		<view class="timeTable_sec2">
			<view class="timeTableList">
				<view v-if="weekData.rows.length == 0">暂时没有信息</view>
				<view v-if="weekData.rows.length != 0">
					<view :class="timeTableClass(k.Sort)" class="timeTableLi" v-for="(k, i) in weekData.rows"
						:key="k.StuNo" @click="tapTimeTable(i, timeTableClass(k.Sort))">
						<view>{{ k.StuName }} <text class="text-xxl cuIcon cuIcon-ellipse"></text></view>
					</view>
				</view>
			</view>
		</view>
		<view class="timeTableAlert" :class="flag? 'active' : ''">
			<view class="timeTableAlertTop">
				<view class="timeTableAlertT">{{ weekData.rows[ind].StuName }}</view>
				<view class="timeTableAlertTxt">学号: {{ weekData.rows[ind].StuNo }} </view>
			</view>
			<view class="timeTableAlertList">
				<view v-for="(n, i) in Statue" :key="i"
					:class="n.className == className? 'active ' + n.className : n.className" class="timeTableAlertLi"
					@click="tapStatus(i)"><text></text>{{ n.txt }}</view>
		 </view>
		</view>
		<view class="timeTableAlertZ" v-show="flag" @click="flag = false"></view>
		<view class="timeTableBtn" @click="tapBtn">确定</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageInfo: {},
				weekData: {},
				flag: false,
				data: {},
				className: '',
				ind: 0,
				Statue: [{
						className: 'sStatue1',
						num: '0',
						txt: '准时'
					},
					{
						className: 'sStatue5',
						num: '1',
						txt: '迟到'
					},
					{
						className: 'sStatue2',
						num: '2',
						txt: '早退'
					},
					{
						className: 'sStatue4',
						num: '3',
						txt: '病假'
					},
					{
						className: 'sStatue6',
						num: '4',
						txt: '事假'
					},
					{
						className: 'sStatue3',
						num: '5',
						txt: '旷课'
					}
				]
			}
		},
		methods: {
			init() {
				let _this = this;
				let _postParam = {
					pagination: {
						rows: "1000",
						page: "1",
						sidx: 'ClassNo',
						sord: 'DESC'
					},
					queryJson: JSON.stringify({
						year: _this.pageInfo.academicyear,
						semester: _this.pageInfo.semester,
						empno: _this.pageInfo.empno,
						lessonNo: _this.pageInfo.lessonNo,
						teachClassNo: _this.pageInfo.teachClassNo,
						lessonTime: _this.pageInfo.lessonTime,
						LessonSortNo: _this.pageInfo.lessonSortNo,
					})
				};

				_this.LOADING('加载数据中…');
				_this.HTTP_GET('/teachattendance/students', _postParam, '加载数据时出错').then(res => {
					this.HIDE_LOADING();
					console.log(res);
					_this.weekData = _this.COPY(res);
				});
			},
			tapTimeTable(num, str) {
				this.className = str;
				this.ind = num;
				this.flag = true;
			},
			tapStatus(num) {
				this.weekData.rows[this.ind].Sort = this.Statue[num].txt;
				this.weekData.rows[this.ind].kqType = this.Statue[num].num;
				this.flag = false;
			},
			tapBtn() {
				let _this = this;
				_this.weekData.rows.forEach((n, i) => {
					n.kqType = n.kqType != null ? n.kqType : '0'
				});
				_this.LOADING('保存数据中…');
				_this.HTTP_POST('/Learun/adms/EducationalAdministration/StuAttendanceLeave/apply', {
					lessonTime: _this.pageInfo.lessonTime,
					lessonDate: _this.pageInfo.lessonDate,
					classRoomNo: _this.pageInfo.classRoomNo,
					dataJson: JSON.stringify(_this.weekData.rows)
				}, '加载数据时出错').then(res => {
					_this.HIDE_LOADING();
					console.log(res.Result);
					if (res) {
						_this.TOAST('提交成功', 'success',_this.init());
						// _this.init();
					}
				});
				// _this.CONFIRM('数字化校园提示', '无法获取小程序登录授权码', true).then(res => {
				// 	// console.log(_this.weekData.rows)
				// 	if(res){
				// 		_this.LOADING('保存数据中…');

				// 	}
				// })
			}
		},
		computed: {
			timeTableClass() {
				return str => {
					return !str ? 'sStatue1' : str == "准时" ? 'sStatue1' : str == "早退" ? 'sStatue2' : str == "旷课" ?
						'sStatue3' : str == "病假" ? 'sStatue4' : str == "迟到" ? 'sStatue5' : 'sStatue6';
				};
			}
		},
		created() {
			this.pageInfo = this.GET_PARAM(); //获取页面传递参数
			console.log(this.pageInfo)
			this.init();
		}
	}
</script>

<style lang="less" scoped>
	#semester2 {
		margin-bottom: 10px;
	}

	#weekTime2 text {
		margin: 0 10px;
	}

	.timeTable_sec2 {
		margin-bottom: 30px;
		background-color: #fff;
	}

	.noHtml {
		height: 100%;
		line-height: 60px;
		text-align: center;
		font-size: 14px;
	}

	.timeTable_sec3 {
		padding: 0px 12px 1px;
		text-align: center;
		background: #0c86d8;
		height: 35px;
	}

	.tSec3Time {
		text-align: center;
		line-height: 24px;
		font-size: 14px;
		color: #fff;
	}

	.tSec3Time text {
		display: inline-block;
		background-color: #b8e2ff;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		vertical-align: middle;
		position: relative;
		top: -2px;
		margin: 0 10px;
	}

	.timeTable_sec4 {
		padding: 0 12px;
		/* margin-top: -65px; */
		margin-bottom: 10px;
		background: #0075c4;
	}

	.tSec4T {
		/* text-align: center; */
		margin-bottom: 10px;
		overflow: hidden;
		font-size: 16px;
		color: #fff;
		padding-top: 10px;
	}

	.tSec4Con {
		padding-bottom: 10px;
	}

	.tSec4Con .studSeeSec2Line {
		height: 25px;
		width: 1px;
		background: #d6dfe2;
		margin: 0 40px;
	}

	.tSec4Con .studSeeSec2Txt {
		color: #4fb1f3;
		font-size: 14px;
	}

	.tSec4Con .studSeeSec2Txt .text-xxl {
		margin-right: 5px;
		font-size: 16px;
	}

	.tSec4Con .studSeeSec2Txt view {
		float: right;
		font-size: 20px;
		margin-top: -2px;
	}

	.tSec4Con .studSeeSec2Txt view text {
		display: inline-block;
		line-height: 20px;
		font-size: 12px;
		padding: 0 10px;
		position: relative;
		background: #4fb1f3;
		color: #0075c4;
		border-radius: 2px;
		top: -3px;
		margin-right: 10px;
	}

	.tSec4Con .studSeeSec2Txt view text:after {
		content: '';
		position: absolute;
		border: 3px solid #4fb1f3;
		border-right-color: transparent;
		border-top-color: transparent;
		border-bottom-color: transparent;
		right: -6px;
		top: 50%;
		margin-top: -3px;
	}

	.timeTableList {
		overflow: hidden;
		padding: 3px 7px 18px;
	}

	.timeTableLi {
		width: 33.333333%;
		float: left;
		font-size: 14px;
		line-height: 16px;
		margin-top: 14px;
		padding: 0 7px;
	}

	.timeTableLi view {
		border: 1px solid #daeffd;
		padding: 13px 0;
		text-align: center;
		overflow: hidden;
	}

	.timeTableLi text {
		font-size: 12px;
		border-radius: 50%;
		height: 14px;
		width: 14px;
		line-height: 12px;
		position: relative;
		top: -1px;
		margin-left: 6px;
	}

	.timeTableBtn {
		font-size: 16px;
		margin: 10px 12px 20px;
		background: #0c86d8;
		border-radius: 4px;
		text-align: center;
		line-height: 40px;
		height: 40px;
		color: #fff;
	}

	.statusType {
		padding: 10px 12px;
		background: #fff;
		overflow: hidden;
		margin-bottom: 10px;
	}

	.statusTypeLi {
		width: 16.666667%;
		float: left;
		/* text-align: center; */
		font-size: 14px;
		line-height: 16px;
	}

	.statusType text {
		display: inline-block;
		color: #fff;
		line-height: 14px;
		font-size: 12px;
		border: 1px solid #cacaca;
		border-radius: 50%;
		height: 9px;
		width: 9px;
		line-height: 12px;
		margin-right: 5px;
		position: relative;
		top: 0px;
	}

	/*正常*/
	.sStatue1 text {
		background: #0089fe;
		color: #0089fe;
		border-color: #0089fe;
	}

	/*早退*/
	.sStatue2 text {
		background: #f2b60a;
		color: #f2b60a;
		border-color: #f2b60a;
	}

	/*3旷课*/
	.sStatue3 text {
		background: #e24545;
		color: #e24545;
		border-color: #e24545;
	}

	/*病假*/
	.sStatue4 text {
		background: #29cf41;
		color: #29cf41;
		border-color: #29cf41;
	}

	/*迟到*/
	.sStatue5 text {
		background: #ad5151;
		color: #ad5151;
		border-color: #ad5151;
	}

	/*事假*/
	.sStatue6 text {
		background: #84f193;
		color: #84f193;
		border-color: #84f193;
	}

	.timeTableAlertZ {
		width: 100%;
		height: 100%;
		z-index: 99;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		// display: none;
	}

	.timeTableAlert {
		z-index: -1;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 80%;
		height: 70%;
		background: #fff;
		border-radius: 4px;
		filter: alpha(opacity=0);
		-moz-opacity: 0;
		-khtml-opacity: 0;
		opacity: 0;
		transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		-webkit-transition: all 0.3s;
		overflow: hidden;
	}

	.timeTableAlert.active {
		z-index: 999;
		filter: alpha(opacity=100);
		-moz-opacity: 1;
		-khtml-opacity: 1;
		opacity: 1;
	}

	.timeTableAlertTop {
		background-color: #0c86d8;
		padding: 10px 12px;
	}

	.timeTableAlertT {
		color: #fff;
		font-size: 16px;
	}

	.timeTableAlertTxt {
		font-size: 14px;
		color: #b8e2ff;
		text-align: right;
		margin-top: 5px;
	}

	.timeTableAlertList {
		overflow: auto;
		max-height: calc(100% - 62px);
	}

	.timeTableAlertLi {
		line-height: 40px;
		text-align: center;
		font-size: 14px;
		color: #1a1a1a;
	}

	.timeTableAlertLi.active {
		background-color: #d1ecff !important;
	}

	.timeTableAlertLi:nth-child(2n) {
		background-color: #fbfdff;
	}

	.timeTableAlertLi:nth-child(2n - 1) {
		background-color: #ffffff;
	}
</style>