yichael_zhongchuang_front_2/components/user/stuManage.vue

<template>
	<view class="m_right">
		<view class="stu_box" v-show="!isShowAdd">
			<view class="m_right_hander">
				<button size="mini" class="m_btn_red" @click="onClick_addStudent">添加学生</button>
			</view>
			<view class="m_right_container">
				<table style="width: 100%;border: 1px solid #DDDDDD;border-collapse: collapse">
					<thead class="m-table-hander">
						<tr>
							<th>用户名</th>
							<th>姓名</th>
							<th>班级</th>
							<th>试验进度</th>
							<th>成绩</th>
							<th>实验情况</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(student,studentI) in dataUsers_all" :key="studentI">
							<!-- <th style="color: #EA252C;">{{student.userName}}</th>
							<th>{{student.name}}</th>
							<th>{{student.class}}</th>
							<th>{{student.progress}}</th>
							<th>{{student.score}}</th> -->
							<th style="color: #EA252C;">{{student.IlabAccount}}</th>
							<th>{{student.Name}}</th>
							<th>{{student.Class}}</th>
							<th>{{student.progress}}</th>
							<th>{{student.Scores.Score}}</th>
							<th style="position: relative;">
								<button type="default" size="mini" class="m_delete" @click="onClick_XSSYQK(studentI)">实验情况</button>
							</th>
						</tr>
					</tbody>
				</table>
			</view>
			<!-- <view class="m_right_footer">
				<view class="m_paging">
					<text selectable="true"class="m_paging_item m_paging_upper" @click="onClick_last" v-show="currentPage>1">上一页</text>
					<text selectable="true"class="m_paging_item" :key="i" v-for="i in currentPage" @click="paging(i)" :class="i==currentPage?'p_act':''">
						{{i}}
					</text>
					<text selectable="true"class="m_paging_item m_paging_lower" @click="onClick_next" v-show="currentPage>1">下一页</text>
				</view>
			</view> -->
			<view class="m_right_footer">
				<view class="m_paging">
					<text class="m_paging_item m_paging_upper" v-show="bShowLastPageBtn" @click="onClick_last()">上一页</text>
					<text class="m_paging_item" v-for="i in pageTotalNum" @click="paging(i)" :key="i" :class="i==currentPage?'p_act':''">
						{{i}}
					</text>
					<text class="m_paging_item m_paging_lower" v-show="bShowNextPageBtn" @click="paging(i)">下一页</text>
				</view>
			</view>
		</view>
		<view class="df" v-show="isShowAdd">
			<view class="addStu-box df fdc aic">
				<view class="box2-table-box-left df fdc aic ">
					<view class="box2-table-box-left-item df fdr aic jcsb">
						<view class="table-title">用户名</view>
						<!-- <textarea class="addStu-textarea" :placeholder="addStuRule" v-model="addStudentData.IlabAccount"></textarea> -->
						<input class="form-input" name="input" placeholder="请输入" v-model="addStudentData.IlabAccount" />
					</view>
				</view>
				<view class="addStu-addBox df jcfe">
					<button class="addStu-addBtn df jcc aic" @click="onClick_addStu_add">添加</button>
					<button class="addStu-addBtn df jcc aic" @click="onClick_cancel">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "manager_user",
		data() {
			return {
				isShowAdd: false,
				
				pageTotalNum:1,
				currentPage:1,
				totalItem:7,
				// dataUsers_all: [],
				bShowLastPageBtn:false,
				bShowNextPageBtn:false,
				
				//当前页数
				// index: 1,
				//总计页数
				// currentPage: 0,
				//所有学生
				// allStudent: null,
				//当前页学生
				curPageStudentList: [{
					"userName": '',
					"name": '',
					"class": '',
					"progress": '',
					"score": '',
				}],
				//老师添加学生数据例
				addStudentData: {
					"IlabAccount": ""
				},

				addStuRule: '请输入用户名，多个用户名之间请用“;”符号隔开',
				dataUsers_all: [],
			}
		},
		methods: {
			paging(i) {
				uni.showLoading({
				    title: '加载中'  
				});
				
				let fromIndex = this.totalItem*(i-1);
				let toIndex = fromIndex+this.totalItem;
			
				let data = {
					"UserID": mydata_userInfo.UserID,
					"BeginNum": fromIndex, //用户数组索引
					"EndNum": toIndex, //用户数组索引结束
				}
		
				uni.request({
					header: {
						'Content-Type': 'application/json;charset=UTF-8'
					},
					url: mydata_api + '/user/getallstudent',
					method: 'POST',
					data: data,
					dataType: 'json',
					success: (res) => {
						//100成功
						if (res.data.Code == 100) {
							console.log("请求全部学生", res);
							// this.allStudent = res.data.Items;
							
							this.dataUsers_all = res.data.Students;
							this.pageTotalNum = Math.ceil(res.data.AllNumOfList/this.totalItem);
							console.log('this.pageTotalNum=',this.pageTotalNum)
							this.currentPage = i;					
							this.showNextOrLastPageBtn();
						}
						//200失败
						else {
							console.log('suc200', res);
						}
						uni.hideLoading();					
					},
					fail: (res) => {
						console.log("请求失败****");	
						uni.hideLoading();
					}
				});
			},
			initPage() {
				this.paging(1);
			},
			onClick_last()
			{
				this.currentPage--;
				this.paging(this.currentPage);
			},
			onClick_next()
			{
				this.currentPage++;
				this.paging(this.currentPage);
			},
			showNextOrLastPageBtn()
			{
				if(this.pageTotalNum==this.currentPage)
				{
					this.bShowLastPageBtn = true;
					this.bShowNextPageBtn = false;
				}
				else if(1==this.currentPage)
				{
					this.bShowLastPageBtn = false;
					this.bShowNextPageBtn = true;
				}
				else
				{
					this.bShowLastPageBtn = true;
					this.bShowNextPageBtn = true;
				}
				
				if(this.pageTotalNum==1){
					this.bShowLastPageBtn = false;
					this.bShowNextPageBtn = false;
				}
			},
			onClick_addStudent() {
				this.isShowAdd = true;
			},
			// updateInfo() {
			// 	// this.index = 1;
			// 	this.allStudent = userController.studentList;
			// 	// console.log('this.allStudent=',this.allStudent)
			// 	// this.currentPage = Math.ceil(this.allStudent.length / 7);
			// 	this.updateTable();
			// 	// console.log("学生管理，更新页面", this.allStudent);
			// },
			// updateTable() {
			// 	this.curPageStudentList = [];
			// 	for (let i = 0; i < 7; i++) {
			// 		let student = this.allStudent[(this.currentPage - 1) * 7 + i];
			// 		if (student) {
			// 			let astudent = {
			// 				"userName": student.IlabAccount,
			// 				"name": student.Name,
			// 				"class": student.Class,
			// 				"progress": '',
			// 				"score": student.Scores.Score,
			// 			}
			// 			this.curPageStudentList.push(astudent);
			// 		}
			// 	}
			// 	// console.log("当前页学生列表", this.curPageStudentList);
			// },
			onClick_addStu_add() {
				// console.log(this.addStudentData);
				let self = this;
				
				MyRequest.AddUsers([this.addStudentData], function(res) {
					console.log("请求添加成功，返回值", res);
					
					if(res.data.Users[0].State == 2)
					{
						alert("该学生不存在");
						
						return;
					}
					
					// self.updateInfo();
					self.isShowAdd = false;
					self.addStudentData = {};
					userController.updateStudentList(self.updateInfo,null)
				}, null);
			},
			onClick_cancel(){
				this.isShowAdd = false;
				this.addStudentData = {};
				userController.updateStudentList(this.updateInfo,null)
			},
			onClick_XSSYQK(studentI){
				// console.log("实验情况studentI=",studentI);
				let UserID = this.allStudent[studentI].UserID;
				// console.log("UserID=",this.allStudent[studentI].UserID);
				this.$emit('onClick_XSSYQK',UserID);	
			}
		}
	}
</script>

<style lang="scss">
	.addStu-box {
		// margin-left: px2vw(100);
		margin-top: px2vw(50);
	}

	.addStu-table {
		margin-top: px2vw(50);
		width: 100%;
		border: 1px solid #DDDDDD;
		border-collapse: collapse;
		background: #f9f9f9;
	}

	.addStu-input {
		// border: solid 1px #DDDDDD;
		width: 100%;
		height: 100%;
	}

	.addStu-addBox {
		width: 100%;
		margin-top: px2vw(20);
	}

	.addStu-addBtn {
		width: px2vw(158);
		height: px2vw(48);
		background: #EA252C;
		border-radius: px2vw(8);
		font-size: px2vw(18);
		color: #FFFFFF;
		line-height: px2vw(24);
		margin-top: px2vw(31);
		margin-bottom: px2vw(65);
	}

	.form-input {
		width: px2vw(355);
		height: px2vw(54);
		padding: px2vw(14) px2vw(20);

		font-size: px2vw(20);
		color: #070707;
		line-height: px2vw(26);

		background: #FFFFFF;
		border-radius: px2vw(4);
		border: 1px solid #B4B4B4;
	}

	.box2-table-box-left {
		// width: px2vw(1000);
		width: px2vw(500);
	}

	.box2-table-box-left-item {
		width: 100%;
		margin-top: px2vw(30);
	}

	.table-title {
		font-size: px2vw(22);
		color: #555555;
		line-height: px2vw(29);
	}

	.addStu-textarea {
		width: px2vw(800);
		height: px2vw(500);
		padding: px2vw(14) px2vw(20);

		font-size: px2vw(20);
		color: #070707;
		line-height: px2vw(26);

		background: #FFFFFF;
		border-radius: px2vw(4);
		border: 1px solid #B4B4B4;
	}

	.m_right {
		width: 100%;
		height: 100%;
		margin-top: 5rpx;
		padding: 0 150rpx;
		background-color: #fff;
		box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);

		.m_right_hander {
			text-align: right;
			height: 250rpx;
			position: relative;

			.m_btn_red {
				position: absolute;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 40rpx;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				background: #EA252C;
				color: #fff;
			}
		}

	}

	tbody tr {
		border-top: 2rpx solid #DDDDDD !important;

	}

	tbody tr th {
		font-weight: 400 !important;
		height: 140rpx;
		line-height: 140rpx;
	}

	// tbody tr:hover {
	// 	// color: #fff;
	// 	background: #FDEBEC;
	// 	// opacity: 0.08;
	// }

	.m-table-hander {
		background-color: #FFF8F7;
		height: 140rpx;
		line-height: 140rpx;
		font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
		font-weight: bold;
	}

	.m_edit {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgb(67, 127, 250);
		color: rgb(255, 255, 255);
		min-width: 130rpx;
	}

	.m_delete {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 130rpx;
		transform: translate(-50%, -50%);
		background: rgb(234, 37, 44);
		color: rgb(255, 255, 255);
	}

	.m_right_footer {
		margin-top: 80rpx;
		margin-bottom: 80rpx;
	}

	.m_paging {
		text-align: right;

		.m_paging_item {
			padding: 10rpx 18rpx;
			border: 1rpx solid #DDDDDD;
			border-radius: 8rpx;
			margin-right: 10rpx;
		}

		.p_act {
			background: #EA252C;
			color: #fff;
			border: inherit;
		}
	}

	.m_paging_item:hover {
		background: #EA252C;
		color: #fff;
		border: inherit;
	}

	.m_act1 {
		color: #FF0019;
	}

	.m_right_container {
		// width: px2vw(1377);
	}

	.stu_box {
		width: px2vw(1377);
	}
</style>