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

<template>
	<div class="pb_content">
		<div class="pb_head">
			<span>通知公告</span>
		</div>
		<div class="pb_content_body">
			<div class="student_table">
				<el-table
					ref="table"
					:data="tableData"
					border
					:height="tableHeight"
					:fit="true"
					style="width: 100%"
					:header-cell-style="{ background: '#f1f1f1' }"
					:row-class-name="tableRowClassName"
					v-loading="loading"
				>
					<el-table-column
						prop="content"
						label="通知内容"
						min-width="35"
						align="center"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope"
							><div v-html="snippet(scope.row.content)"></div
						></template>
					</el-table-column>
					<el-table-column
						prop="creater"
						label="创建者"
						min-width="15"
						align="center"
						><template slot-scope="scope">
							{{ scope.row.creater ? scope.row.creater : "未知" }}
						</template>
					</el-table-column>
					<el-table-column
						prop="creatTime"
						label="创建时间"
						min-width="25"
						align="center"
					>
					</el-table-column>
					<el-table-column label="操作" min-width="20">
						<template slot-scope="scope">
							<el-button
								type="primary"
								size="small"
								@click="getNewDetail(scope.row.newsid)"
								>查看通知</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="50%"
			:before-close="handleClose"
			class="look_notice"
		>
			<div slot="title" class="header-title">
				<div class="logoImg">
					<img src="../../assets/logo.png" alt="" />
				</div>
				<div class="title_add_student">查看通知</div>
			</div>
			<div>
				<div class="pb_head">
					<span style="font-size: 20px">{{ res.title }}</span>
					<span style="font-size: 15px; line-height: 35px">{{
						res.creater ? res.creater : "未知"
					}}</span>
				</div>
				<div class="notice_content cont" v-html="res.newscontent"></div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button class="close" @click="dialogVisible = false" type="primary"
					>关闭</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableHeight: "500px",
				page: 1,
				total: 0,
				isLoading: false,
				formLabelWidth: "100px",
				dialogVisible: false,
				title: "",
				tableData: [],
				res: [],
			};
		},
		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 "";
				}
			},
			snippet(value) {
				return value.replace(/<[^>]*>/g, "");
			},
			tableRowClassName({ row, rowIndex }) {
				if ((rowIndex + 1) % 2 === 0) {
					return "even_row";
				} else {
					return "";
				}
			},
			handleCurrentChange(val) {
				this.page = val;
			},
			handleClose(done) {
				done();
			},
			getNewDetail(id) {
				this.dialogVisible = true;
				let params = { nid: id };
				this.ajax
					.get(this.$store.state.api + "selectNewDetail", params)
					.then((res) => {
						this.dialogVisible = true;
						this.res = res.data[0][0];
					})
					.catch((err) => {
						this.loading = false;
					});
			},

			getNews() {
				this.loading = true;
				let params = { uid: this.$store.state.userInfo.userid, page: this.page };
				this.ajax
					.get(this.$store.state.api + "getNewsTeacher", params)
					.then((res) => {
						this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
						this.loading = false;
						this.tableData = res.data[0];
					})
					.catch((err) => {
						this.loading = false;
					});
			},
		},
		created() {
			this.getNews();
		},
	};
</script>

<style scoped>
	.pb_head {
		display: flex;
		justify-content: space-between;
	}
	.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;
	}
	.header-title {
		display: flex;
	}
	.logoImg {
		width: 30px;
	}
	.logoImg > img {
		width: 100%;
		height: 100%;
	}
	.title_add_student {
		margin: 0 auto;
		color: #fff;
	}
	.look_notice >>> .el-dialog__header {
		padding: 20px 20px 10px;
		text-align: center;
		background: #32455b;
	}
	.look_notice >>> .el-dialog__title {
		font-size: 14px !important;
		color: #fff !important;
	}
	.look_notice >>> .el-dialog__headerbtn {
		font-size: 20px !important;
	}
	.look_notice >>> .el-form-item__label {
		margin-left: 65px;
	}
	.look_notice >>> .el-form-item {
		display: flex;
	}
	.look_notice >>> .el-form-item__content {
		margin: 0 !important;
	}
	.look_notice >>> .el-dialog__footer {
		text-align: center !important;
	}
	.notice_content {
		margin: 20px 0 0 20px;
		width: 850px;
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
		font-size: 18px;
		line-height: 35px;
		text-indent: 35px;
	}
	.close {
		width: 320px;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
		background: #0e72e6;
		padding: 0 !important;
	}
	/* table 样式 */
	.cont >>> table {
		border-top: 1px solid #ccc;
		border-left: 1px solid #ccc;
	}
	.cont >>> table td,
	.cont >>> table th {
		border-bottom: 1px solid #ccc;
		border-right: 1px solid #ccc;
		padding: 3px 5px;
	}
	.cont >>> table th {
		border-bottom: 2px solid #ccc;
		text-align: center;
	}
	/* blockquote 样式 */
	.cont >>> blockquote {
		display: block;
		border-left: 8px solid #d0e5f2;
		padding: 5px 10px;
		margin: 10px 0;
		line-height: 1.4;
		font-size: 100%;
		background-color: #f1f1f1;
	}
	/* code 样式 */
	.cont >>> code {
		display: inline-block;
		*display: inline;
		*zoom: 1;
		background-color: #f1f1f1;
		border-radius: 3px;
		padding: 3px 5px;
		margin: 0 3px;
	}
	.cont >>> pre code {
		display: block;
	}
	/* ul ol 样式 */
	.cont >>> ul,
	ol {
		margin: 10px 0 10px 20px;
	}
</style>