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 curPageStudentList" :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="position: relative;"><button type="default" size="mini" class="m_delete">实验情况</button></th>
						</tr>
					</tbody>
				</table>
			</view>
			<view class="m_right_footer">
				<view class="m_paging">
					<text class="m_paging_item m_paging_upper" @click="onClick_last" v-show="pageCount>1">上一页</text>
					<text class="m_paging_item" :key="i" v-for="i in pageCount" @click="paging(i)" :class="i==index?'p_act':''">
						{{i}}
					</text>
					<text class="m_paging_item m_paging_lower" @click="onClick_next" v-show="pageCount>1">下一页</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>
				</view>
			</view>
		</view>
	</view>
</template>

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

				addStuRule: '请输入用户名，多个用户名之间请用“;”符号隔开',
			}
		},
		methods: {
			paging(index) {
				this.index = index;
				this.updateTable();
			},
			onClick_last() {
				if (this.index > 1) {
					this.index--;
					this.updateTable();
				}
			},
			onClick_next() {
				if (this.index < this.pageCount) {
					this.index++;
					this.updateTable();
				}
			},
			onClick_addStudent() {
				this.isShowAdd = true;
			},
			updateInfo() {
				this.index = 1;
				this.allStudent = userController.studentList;
				this.pageCount = 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.index - 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;
				// let data=[
				// 	{
				// 		"IlabAccount":'test'
				// 	},
				// 	{
				// 		"IlabAccount":'mj_2728179'
				// 	}
				// ]
				// let addData=this.addStudentData.IlabAccount;


				MyRequest.AddUsers([this.addStudentData], function(res) {
					// console.log("请求添加成功，返回值", res);
					// self.updateInfo();
					self.isShowAdd = false;
					self.addStudentData = {};
					userController.updateStudentList(self.updateInfo,null)
				}, null);
			}
		}
	}
</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>