pbl-teacher-table/src/components/pages/class.vue

<template>
	<div class="pb_content">
		<div class="pb_head">
			<span>班级管理</span>
		</div>
		<div class="pb_content_body">
			<div class="student_head">
				<div class="student_search">
					<span>
						<el-input
							placeholder="请输入班级名称"
							v-model="sClassName"
							clearable
						>
						</el-input>
					</span>
					<el-button type="primary" @click="searchClass">查询</el-button>
				</div>
				<div class="student_button">
					<el-button type="primary" @click="dialogVisible = true"
						>添加班级</el-button
					>
				</div>
			</div>
			<div class="student_table">
				<el-table
					ref="table"
					:data="tableData"
					border
					:height="tableHeight"
					:fit="true"
					v-loading="isLoading"
					style="width: 100%; height: 60%"
					:header-cell-style="{ background: '#f1f1f1' }"
					:row-class-name="tableRowClassName"
				>
					<el-table-column
						prop="name"
						label="班级名称"
						min-width="80%"
						align="center"
					>
					</el-table-column>
					<el-table-column label="操作" min-width="20%">
						<template slot-scope="scope">
							<el-button
								type="primary"
								size="small"
								@click="deleteClass(scope.row.id)"
								>删除</el-button
							>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="student_page">
				<el-pagination
					background
					layout="prev, pager, next"
					:page-size="10"
					:total="total"
					@current-change="handleCurrentChange"
				>
				</el-pagination>
			</div>
		</div>
		<el-dialog
			title="添加学生"
			:visible.sync="dialogVisible"
			:append-to-body="true"
			width="25%"
			:before-close="handleClose"
			class="dialog_diy"
		>
			<el-form>
				<el-form-item label="班级名称" :label-width="formLabelWidth">
					<el-input
						v-model="className"
						auto-complete="off"
						placeholder="请输入班级..."
					></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="insertClass">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableHeight: "500px",
				isLoading: false,
				formLabelWidth: "100px",
				sClassName: "",
				className: "",
				dialogVisible: false,
				tableData: [],
				page: 1,
				total: 0,
				userid: this.$route.query.userid,
				oid: this.$route.query.oid,
			};
		},
		created() {
			this.page = 1;
			this.getClass();
		},
		mounted() {
			this.$nextTick(function () {
				this.tableHeight =
					window.innerHeight - this.$refs.table.$el.offsetTop - 200;
				if (this.tableHeight <= 530) {
					this.tableHeight = 530;
				}
				// 监听窗口大小变化
				let self = this;
				window.onresize = function () {
					self.tableHeight =
						window.innerHeight - self.$refs.table.$el.offsetTop - 200;
					if (self.tableHeight <= 530) {
						self.tableHeight = 530;
					}
				};
			});
		},
		methods: {
			tableRowClassName({ row, rowIndex }) {
				if ((rowIndex + 1) % 2 === 0) {
					return "even_row";
				} else {
					return "";
				}
			},
			handleCurrentChange(val) {
				this.page = val;
			},
			handleClose(done) {
				done();
			},
			time() {
				if (!this.now) {
					this.now = new Date().getTime();
					return true;
				} else {
					let time = new Date().getTime();
					if (time - this.now > 3000) {
						this.now = time;
						return true;
					} else {
						return false;
					}
				}
			},
			searchClass() {
				this.page = 1;
				this.getClass();
			},
			//新增班级
			insertClass() {
				let params = {
					name: this.className,
					oid: this.oid,
					uid: this.userid,
				};
				this.ajax
					.get(this.$store.state.api + "insertClass", params)
					.then((res) => {
						this.$message({
							message: "新增成功",
							type: "success",
						});
						this.dialogVisible = false;
						this.sClassName = "";
						this.getClass();
						this.className = "";
					})
					.catch((err) => {
						this.$message({
							message: "新增失败",
							type: "error",
						});
						console.error(err);
					});
			},
			//获取班级列表
			getClass() {
				this.isLoading = true;
				let params = {
					// username: this.$store.state.userInfo.userid,
					cu: "",
					oid:this.oid,
					cn: this.sClassName,
					page: this.page,
				};
				this.ajax
					.get(this.$store.state.api + "selectClass", params)
					.then((res) => {
						this.isLoading = false;
						this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
						this.tableData = res.data[0];
					})
					.catch((err) => {
						this.isLoading = false;
						console.error(err);
					});
			},
			//删除班级
			deleteClass(id) {
				let params = {
					id: id,
				};
				if (this.time()) {
					this.$confirm("确定删除此课程吗?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
						.then(() => {
							this.ajax
								.get(this.$store.state.api + "deleteClass", params)
								.then((res) => {
									this.$message({
										message: "删除成功",
										type: "success",
									});
									if (this.page != 1 && this.tableData.length == 1) {
										this.page - 1;
									}
									this.getClass();
								})
								.catch((err) => {
									this.$message.error("删除失败");
									console.error(err);
								});
						})
						.catch(() => {});
				}
			},
		},
	};
</script>

<style scoped>
	.dialog_diy >>> .el-dialog__header {
		background: #3d67bc !important;
		padding: 15px 20px;
	}
	.dialog_diy >>> .el-dialog__title {
		color: #fff;
	}
	.student_table >>> .el-table--border td {
		border-right: 0px !important;
	}
	.dialog_diy >>> .el-dialog__headerbtn {
		top: 19px;
	}
	.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
		color: #fff;
	}
	.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
		color: #fff;
	}
	.student_head >>> .el-button--primary {
		background-color: #2268bc;
	}
	.xls_button {
		font-size: 14px;
		cursor: pointer;
		text-decoration: underline;
		color: rgb(34, 104, 188);
	}
	.student_head {
		display: flex;
		justify-content: space-between;
	}
	.student_search {
		display: flex;
		width: 300px;
	}
	.student_search span {
		margin: 0 10px 0 0;
	}
	.student_button {
		display: flex;
		overflow: hidden;
		height: 40px;
	}
	.student_button .el-button--primary {
		/* margin-right: 10px; */
	}
	.upload-demo {
		display: flex;
		flex-direction: column;
		align-items: end;
		/* position: relative; */
		width: 100px;
		overflow: hidden;
	}
	.student_table {
		margin: 20px 0;
	}

	.el-table >>> .even_row {
		background-color: #f1f1f1;
	}
</style>