pbl-teacher/src/components/pages/worksDetail.vue

<template>
	<div class="pb_content">
		<div class="pb_head">
			<span>评价管理</span>
			<!-- <span>备注：教师可以根据课程、班级条件筛选学生并查看该学生信息</span> -->
		</div>
		<div class="pb_content_body">
			<div class="student_head">
				<div class="student_search">
					<div>项目筛选</div>
					<el-select
						v-model="subject"
						placeholder="请选择课程"
						@change="searchWork"
					>
						<el-option label="所有课程" value=""></el-option>
						<el-option
							v-for="(item, index) in subjectJuri"
							:key="index"
							:label="item.name"
							:value="item.id"
						></el-option>
					</el-select>
					<el-select
						v-model="sClass"
						placeholder="请选择班级"
						@change="searchWork"
					>
						<el-option label="所有班级" value=""></el-option>
						<el-option
							v-for="(item, index) in grade"
							:key="index"
							:label="item.name"
							:value="item.id"
						></el-option>
					</el-select>
				</div>
			</div>
			<div class="student_table">
				<el-table
					ref="table"
					:data="tableData"
					border
					:height="tableHeight"
					:fit="true"
					v-loading="isLoading"
					style="width: 100%"
					:header-cell-style="{ background: '#f1f1f1' }"
					:row-class-name="tableRowClassName"
					stripe
				>
					<el-table-column
						prop="sName"
						label="姓名"
						min-width="15"
						align="center"
					></el-table-column>
					<el-table-column
						prop="class"
						label="班级"
						min-width="20"
						align="center"
					></el-table-column>
					<el-table-column
						prop="course"
						label="课程"
						min-width="20"
						align="center"
					></el-table-column>
					<el-table-column
						prop="time"
						label="时间"
						min-width="15"
						align="center"
					></el-table-column>
					<el-table-column label="操作" min-width="30">
						<template slot-scope="scope">
							<el-button
								type="primary"
								size="small"
								@click="lookWork(scope.row.id)"
								>查看作业</el-button
							>
							<el-button
								class="de_button"
								type="primary"
								size="small"
								@click="deleteWork(scope.row.id)"
								>删除</el-button
							>
						</template>
					</el-table-column>
				</el-table>
				<el-dialog
					:visible.sync="dialogVisible"
					:append-to-body="true"
					width="700px"
					:before-close="handleClose"
					class="add_work"
				>
					<div slot="title" class="header-title">
						<div class="logoImg">
							<img src="../../assets/logo.png" alt="" />
						</div>
						<div class="title_add_student">查看作业</div>
					</div>
					<div class="top">
						<div>{{ this.courseByUser }}</div>
						<div>{{ this.userName }}</div>
					</div>
					<div class="first">
						<div class="one_top">
							<div>一、{{ this.courseByUser }} - {{ this.userName }}</div>
							<el-button>已评分</el-button>
						</div>
						<div class="work_Img">
							<img src="../../assets/workImg.png" alt="" />
						</div>
						<div class="work_input">
							<div>早梅</div>
						</div>
						<div class="poetry">
							一树寒梅白玉条，林村路傍溪桥.唐张谓《早梅》
						</div>
					</div>
					<div class="first">
						<div class="one_top">
							<div>一、{{ this.courseByUser }}2 - {{ this.userName }}</div>
							<el-button class="assess" @click="doingAssess"
								>进行评分</el-button
							>
						</div>
						<div class="work_Img">
							<img src="../../assets/workImg.png" alt="" />
						</div>
						<div class="work_input">
							<div>{{ this.answerName }}</div>
						</div>
						<div class="poetry">雨荒深院菊,霜倒半池莲.唐杜甫《宿赞公房》</div>
					</div>
				</el-dialog>
				<el-dialog
					:visible.sync="dialogVisible1"
					:append-to-body="true"
					width="700px"
					:before-close="handleClose"
					class="add_work"
				>
					<div slot="title" class="header-title">
						<div class="logoImg">
							<img src="../../assets/logo.png" alt="" />
						</div>
						<div class="title_add_student">查看作业</div>
					</div>
					<div class="assess_top">
						<div>{{ this.courseByUser }} - {{ this.userName }}</div>
					</div>
					<div class="assess_Img">
						<img src="../../assets/workImg.png" alt="" />
					</div>
					<div class="workName">{{ this.answerName }}</div>
					<div class="student_Answer">
						<div class="toux">
							<img src="../../assets/portal.png" alt="" />
						</div>
						<div class="nav">
							<div class="studentName">{{ this.userName }}</div>
							<div class="studentAnswer">{{ this.studentAnswer }}</div>
						</div>
					</div>
					<div class="comment">
						<div class="comment_title">
							评论<span>({{ this.commentCount }})</span>
						</div>
						<div class="other_Answer">
							<div class="toux">
								<img src="../../assets/portal.png" alt="" />
							</div>
							<div class="nav">
								<div class="nameAndTime">
									<div class="otherName">{{ this.commentName }}</div>
									<div class="time">{{ this.commentTime }}</div>
								</div>
								<div class="otherAnswer">{{ this.commentAnswer }}</div>
							</div>
						</div>
						<div class="other_Answer">
							<div class="toux">
								<img src="../../assets/portal.png" alt="" />
							</div>
							<div class="nav">
								<div class="nameAndTime">
									<div class="otherName">{{ this.commentName }}</div>
									<div class="time">{{ this.commentTime }}</div>
								</div>
								<div class="otherAnswer">{{ this.commentAnswer }}</div>
							</div>
						</div>
					</div>
					<div class="doingAssess" @click="giveScore">进行评分</div>
				</el-dialog>
				<el-dialog
					:visible.sync="dialogVisible2"
					:append-to-body="true"
					width="700px"
					:before-close="handleClose"
					class="add_work"
				>
					<div slot="title" class="header-title">
						<div class="logoImg">
							<img src="../../assets/logo.png" alt="" />
						</div>
						<div class="title_add_student">评分</div>
					</div>
					<div class="score_top">
						<div class="userTou">
							<img src="../../assets/portal.png" alt="" />
						</div>
						<div class="score_user_name">{{ this.userName }}</div>
					</div>
					<div class="course_top">
						<div>课程名称</div>
						<div>{{ this.courseByUser }}</div>
					</div>
					<div class="sd_score">
						<div class="score_box">
							<span>意识能力</span
							><el-rate
								v-model="rateList.ca"
								:disabled="rateParams[5] != '' && rateParams[5] != undefined"
							></el-rate>
						</div>
						<div class="score_box">
							<span>科学探究能力</span
							><el-rate
								v-model="rateList.sia"
								:disabled="rateParams[5] != '' && rateParams[5] != undefined"
							></el-rate>
						</div>
						<div class="score_box">
							<span>实践创新能力</span
							><el-rate
								v-model="rateList.eta"
								:disabled="rateParams[5] != '' && rateParams[5] != undefined"
							></el-rate>
						</div>
						<div class="score_box">
							<span>学习反思能力</span
							><el-rate
								v-model="rateList.pia"
								:disabled="rateParams[5] != '' && rateParams[5] != undefined"
							></el-rate>
						</div>
						<div class="score_box">
							<span>工程思维能力</span
							><el-rate
								v-model="rateList.lra"
								:disabled="rateParams[5] != '' && rateParams[5] != undefined"
							></el-rate>
						</div>
					</div>
					<div class="moreSay">更多评价</div>
					<div class="more_say_input">
						<el-input
							type="textarea"
							placeholder="还有要说的吗..."
							:rows="6"
							resize="none"
							v-model="rateList.content"
							:readonly="rateParams[5] != '' && rateParams[5] != undefined"
							style="background: #fafafa"
						></el-input>
					</div>
					<div class="assess_right" @click="right">确认</div>
				</el-dialog>
			</div>
			<div class="student_page">
				<el-pagination
					background
					layout="prev, pager, next"
					:page-size="10"
					:total="total"
					@current-change="handleCurrentChange"
				>
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableHeight: "500px",
				isLoading: false,
				formLabelWidth: "100px",
				dialogVisible: false,
				dialogVisible1: false,
				dialogVisible2: false,
				courseByUser: "诗词中的植物",
				userName: "林点",
				answerName: "宿赞公房",
				studentAnswer: "雨荒深院菊,霜倒半池莲.唐杜甫《宿赞公房》",
				commentCount: 2,
				commentName: "谭子松",
				commentTime: "2021/2/5",
				commentAnswer:
					"作为家长我很高兴看到孩子的进步，希望这个进步只是一个开始，在新学期能够继续延续，这样才能不负老师的期望",
				tableData: [],
				subject: "",
				sClass: "",
				subjectJuri: [],
				projectJuri: [],
				grade: [],
				projectchoose:"",
				rateList: {
					ca: 0,
					sia: 0,
					eta: 0,
					pia: 0,
					lra: 0,
					content: "",
				},
				rateParams: [],
				page: 1,
				total: 0,
			};
		},
		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 "";
				}
			},
			handleClose(done) {
				done();
			},
			tableRowClassName({ row, rowIndex }) {
				if ((rowIndex + 1) % 2 === 0) {
					return "even_row";
				} else {
					return "";
				}
			},
			handleCurrentChange(val) {
				this.page = val;
			},
			lookWork() {
				this.dialogVisible = true;
			},
			doingAssess() {
				this.dialogVisible1 = true;
			},
			giveScore() {
				this.dialogVisible2 = true;
			},
			//获取班级列表
			getClass() {
				this.isLoading = true;
				let params = {
					cu: "",
					cn: this.sClass,
					page: this.page,
				};
				this.ajax
					.get(this.$store.state.api + "selectClass", params)
					.then((res) => {
						this.isLoading = false;
						this.grade = res.data[0];
					})
					.catch((err) => {
						this.isLoading = false;
						console.error(err);
					});
			},
			//获取分组分类
			getGroup() {
				let params = {};
				this.ajax
					.get(this.$store.state.api + "getGroup", params)
					.then((res) => {
						this.subjectJuri = res.data[0];
						this.projectJuri = res.data[0];
					})
					.catch((err) => {
						console.error(err);
					});
			},
			searchWork() {
				this.page = 1;
				this.getWorks();
			},
			searchProject() {
				this.page = 1;
				this.getProject();
			},
			//获取作业
			getWorks() {
				this.isLoading = true;
				let params = {
					bid: this.$store.state.userInfo.organizeid,
					isRate: 1,
					classx: this.sClass,
					cid: this.subject,
					page: this.page,
				};
				this.ajax
					.get(this.$store.state.api + "getWorks", 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);
					});
			},
			right() {
				this.dialogVisible2 = false;
			},
		},
		created() {
			this.page = 1;
			this.getClass();
			this.getGroup();
			this.getWorks();
		},
	};
</script>

<style scoped>
	.pb_head > span:nth-child(2) {
		font-size: 16px;
		margin-left: 80px;
		color: #ab582f;
	}
	.student_head {
		margin-bottom: 20px;
	}
	.student_search {
		display: flex;
	}
	.student_search > div:nth-child(1) {
		line-height: 35px;
		font-size: 14px;
	}
	.student_search >>> .el-input__inner {
		width: 190px;
		height: 35px;
		margin-left: 10px;
	}
	.student_table >>> .el-table--border td {
		border-right: 0px !important;
	}
	.add_work >>> .el-dialog__header {
		padding: 20px 20px 10px;
		text-align: center;
		background: #32455b;
	}
	.add_work >>> .el-dialog__title {
		font-size: 14px !important;
		color: #fff !important;
	}
	.add_work >>> .el-dialog__headerbtn {
		font-size: 20px !important;
	}
	.add_work >>> .el-form-item__label {
		margin-left: 65px;
	}
	.add_work >>> .el-form-item {
		display: flex;
	}
	.add_work >>> .el-form-item__content {
		margin: 0 !important;
	}
	.add_work >>> .el-dialog__footer {
		text-align: center !important;
	}
	.header-title {
		display: flex;
	}
	.logoImg {
		width: 30px;
	}
	.logoImg > img {
		width: 100%;
		height: 100%;
	}
	.title_add_student {
		margin: 0 auto;
		color: #fff;
	}
	.top {
		display: flex;
		justify-content: space-between;
		padding-bottom: 10px;
		border-bottom: 2px solid #eee;
	}
	.top > div:nth-child(1) {
		font-size: 18px;
	}
	.top > div:nth-child(2) {
		font-size: 14px;
		line-height: 28px;
	}
	.first {
		margin-top: 25px;
		border-bottom: 1px solid #c5c5c5;
	}
	.one_top {
		display: flex;
		justify-content: space-between;
	}
	.one_top > div:nth-child(1) {
		color: #2490bf;
		font-size: 16px;
	}
	.one_top > button {
		width: 100px;
		background: #24a0a4;
		height: 30px;
		color: #e0e0e0;
		font-size: 13px;
		padding: 0 !important;
	}
	.work_Img {
		width: 150px;
		margin: 10px 0;
	}
	.assess_Img {
		width: 400px;
		margin: 0 auto;
		padding: 15px 0;
	}
	.work_Img > img,
	.assess_Img > img {
		width: 100%;
		height: 100%;
	}
	.work_input {
		border: 1px solid;
		width: 135px;
		height: 20px;
		line-height: 20px;
		font-size: 13px;
		padding: 5px;
	}
	.poetry {
		margin: 10px 0 15px 0;
	}
	.assess {
		background: #169bd5 !important;
	}
	.assess_top {
		border-bottom: 2px solid #eee;
		padding-bottom: 10px;
	}
	.assess_top > div:nth-child(1) {
		color: #2490bf;
		font-size: 16px;
	}
	.student_Answer {
		display: flex;
		margin: 5px 10px;
		border-bottom: 1px solid #ccc;
		padding-bottom: 25px;
	}
	.workName {
		font-size: 18px;
		font-weight: bold;
		margin: 5px 10px;
	}
	.toux {
		width: 25px;
		margin: auto 0;
		height: 25px;
	}
	.toux > img {
		width: 100%;
		height: 100%;
	}
	.nav {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		flex-direction: column;
	}
	.studentName {
		margin-left: 10px;
		font-size: 13px;
	}
	.studentAnswer {
		font-size: 12px;
		margin: 5px 0 0 10px;
	}
	.comment {
		margin: 20px 0 0 10px;
	}
	.comment > .comment_title {
		font-size: 18px;
	}
	.comment > .comment_title > span {
		font-size: 14px;
	}
	.other_Answer {
		display: flex;
		margin: 5px 10px;
		border-bottom: 1px solid #ccc;
		padding-bottom: 15px;
	}
	.nav {
		margin-left: 5px;
	}
	.nameAndTime {
		display: flex;
	}
	.otherName {
		font-weight: bold;
		margin-left: 10px;
		font-size: 13px;
	}
	.time {
		margin-left: 25px;
		font-size: 12px;
		margin-top: 3px;
	}
	.otherAnswer {
		width: 400px;
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
		font-size: 12px;
		margin: 5px 0 0 10px;
	}
	.doingAssess {
		margin: 0 auto;
		width: 300px;
		background: #169bd5;
		height: 35px;
		line-height: 35px;
		border-radius: 3px;
		font-size: 13px;
		text-align: center;
		color: #fff;
		margin-top: 30px;
		cursor: pointer;
	}
	.score_top {
		display: flex;
		margin-left: 15px;
	}
	.userTou {
		width: 50px;
	}
	.userTou > img {
		width: 100%;
		height: 100%;
	}
	.score_user_name {
		line-height: 53px;
		margin-left: 15px;
	}
	.course_top {
		display: flex;
		margin: 30px 0 0 20px;
	}
	.course_top > div:nth-child(1) {
		line-height: 25px;
	}
	.course_top > div:nth-child(2) {
		border: 1px solid #ccc;
		width: 250px;
		text-align: center;
		height: 25px;
		line-height: 25px;
		margin-left: 30px;
	}
	.sd_score {
		font-size: 15px;
		background: #fff;
		padding: 18px 25px 1px;
		width: 310px;
		margin-bottom: 15px;
	}
	.sd_score .score_box {
		display: flex;
		align-items: center;
		margin-bottom: 18px;
	}
	.sd_score span {
		width: 100px;
		text-align: justify;
		text-align-last: justify;
		display: block;
		margin-right: 20px;
	}
	.moreSay {
		margin: 0px 0 5px 20px;
	}
	.more_say_input {
		margin-left: 20px;
		width: 90%;
	}
	.more_say_input >>> .el-input__inner {
		height: 75px;
		font-size: 13px;
		padding: 0 0 0 10px;
	}
	.assess_right {
		width: 200px;
		background: #666666;
		color: #fff;
		text-align: center;
		height: 25px;
		line-height: 25px;
		border-radius: 5px;
		margin: 0 auto;
		margin-top: 20px;
		font-size: 13px;
		cursor: pointer;
	}
</style>