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.LessonTime.substring(1) }}节 <text></text></view>
		    </view>
		</view>
		
		<view class="timeTable_sec4">
		    <view class="tSec4Box">
		        <view class="tSec4T">
					<div>{{ pageInfo.LessonName }}</div>
				</view>
		        <view class="tSec4Con">
		            <view class="studSeeSec2Txt" id="shouldArrive">
						<text class="text-xxl cuIcon cuIcon-profile"></text> {{ pageInfo.EmpName }}
						<text class="text-xxl cuIcon cuIcon-locationfill" style="margin-left: 10px;"></text> {{ pageInfo.ClassroomName }} 
						<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.CONFIRM('数字化校园提示', '无法获取小程序登录授权码', true).then(res => {
				// console.log(_this.weekData.rows)
				if(res){
					_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);
						if (res) {
						    _this.TOAST('删除成功', 'success');
						    _this.init();
						}
					});
				}
			})
		}
	},
	computed: {
		timeTableClass() {
			return str => {
				return !str ? 'sStatue1' : str == "准时" ? 'sStatue1' : str == "早退" ? 'sStatue2' : str == "旷课" ? 'sStatue3' : str == "病假" ? 'sStatue4' : str == "迟到" ? 'sStatue5' : 'sStatue6';
			};
		}
	},
	created() {
		this.pageInfo = this.GET_PARAM(); //获取页面传递参数
		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>