gdy_pc_8/src/views/inform.vue

<template>
	<div class="box boxMinHeight">
		<header class="header flex-box-ce">
			<div class="header-title" >
				<div class="flex-box-ce" style="cursor: pointer;width: 200px;"  @click="$router.go(-1)">
					<i class="el-icon-arrow-left fontColorC"></i>
					<div class="text fontColorB font-flex-word">公告列表</div>
				</div>
			</div>
			<el-button type="primary" style="margin-left: 20px;" size="small" @click="app()" v-if="isAdministrator">发布公告</el-button>
		</header>
		<div class="main flex-box">
			<div class="main-left scroll-bar">
				<div v-for="(item, index) in announcement"	:key="index"	class="font-flex-word"
					:class="item.id == articleOne.id ? 'active' : ''"
					@click="dept_click(item)"
					style="height: 56px;line-height: 56px;padding: 0 10px;border-bottom: 1px solid #f1f1f1;"
				>
					{{ item.name }}
				</div>
				<noData v-show="announcement.length == 0" content="暂无数据" imgW="60%" imgH="auto" isSolt>
					<el-button v-if="isAdministrator" type="primary" size="small" style="margin-right: 20px;" @click="app()">发布公告</el-button>
				</noData>
			</div>
			<div class="main-right flex-1" v-loading="noticeLoad">
				<div class="title" style="position: relative;" v-if="announcement.length>0">
					<span class="fontColorC" style="position: absolute;"><span v-if="detaliData.tag[0]" :class="detaliData.tag[0]=='公告'? 'spanBox':'spanBox2'">{{detaliData.tag[0]}}</span>  {{ detaliData.create_time ? detaliData.create_time : '' }} {{detaliData.employee_name}}发布</span>
					<div style="font-size: 18px;padding-right: 10px;text-align: center;">{{ detaliData.name ? detaliData.name : '' }}</div>
					<div style="position: absolute;right:20px;top:0px" v-if="isAdministrator">
						<el-button type="danger" plain size="small" @click="deteleItem">删除</el-button>
						<el-button type="primary" v-if="detaliData.content.html" plain size="small" @click="compile">编辑</el-button>
					</div>
				</div>
				<div class="RuleRight scroll-bar">
					<template v-if="aAtripOfDetails">
						<div v-html="aAtripOfDetails"></div>
            <template v-for="(item,index) in detaliData.file_list" v-if="detaliData.file_list.length>0">
                <el-image :src="item" style="margin-top: 20px;" :preview-src-list="[item]"/>
            </template>
					</template>
					<noData v-else></noData>
				</div>
			</div>
		</div>
		<SuggestHtml :visible.sync="isShowJy"  :detaliData="detaliData" :isAdd="isAdd"></SuggestHtml>
	</div>
</template>

<script>
import { setCache } from '@/utils/auth';
import SuggestHtml from '@/components/SuggestHtml';
export default {
	components: { SuggestHtml },
	name: 'update_notice',
	data() {
		return {
			articleOne: {tag:[]},
			announcement: [],
			noticeLoad: false,
			defaultProps: {
				label: 'name'
			},
			aAtripOfDetails: '',
			isShowJy: false,
			detaliData:{content:{},tag:[]},
			isAdd:true,
      isAdministrator:this.$getIsAdministrator(),
		};
	},
	created() {
		setCache('inform', true);
    if(this.$route.query.id){
      this.articleOne.id=this.$route.query.id;
    }
		this.noticeList();
	},
	methods: {
		deteleItem() {
			this.$confirm('此操作将永久删除该公告, 是否删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axiosUser('POST', '/api/pro/information/delete', {id:this.articleOne.id}).then(res => {
					if (res.data.code == 1) {
						this.$message.success("已删除")
            this.articleOne={tag:[]};
						this.noticeList();
					}
				});
			}).catch(() => {});
		},
		compile() {
			this.isAdd=false
			this.isShowJy = true;
		},
		app() {
			this.isAdd=true
			this.isShowJy = true;
		},
		noticeList() {
			let params = {
				page: 1,
				page_size: 2000
			};
			this.$axiosUser('get', '/api/pro/information/list/page', params).then(res => {
					let list = res.data.data.list;
          this.announcement = list;
          if(this.articleOne.id){
            let is=false
            list.forEach(item=>{
              if(item.id==this.articleOne.id){
                is=true;
              }
            })
            if(is){
              this.noticeDetails();
            }else if(list[0]){
              this.articleOne = list[0];
              this.noticeDetails();
            }
            this.noticeDetails();
          }else if(list[0]){
            this.articleOne = list[0];
            this.noticeDetails();
          }
			});
		},
		noticeDetails() {
			if (!this.articleOne.id) {
				return false;
			}
			this.noticeLoad = true;
			this.aAtripOfDetails='';
			this.$axiosUser('get', '/api/pro/information/info', { id: this.articleOne.id }).then(res => {
        this.aAtripOfDetails = res.data.data.content.html|| res.data.data.content.content;
        let data=res.data.data
        if(data.file_list){
          data.file_list=data.file_list.split(",");
        }
        this.detaliData=data;
      }).finally(() => {
        this.noticeLoad = false;
      });
		},
		dept_click(item) {
			this.articleOne = item;
			this.noticeDetails();
		}
	}
};
</script>

<style scoped lang="scss">
.active {
	color: #26a2ff;
	background-color: #ecf5ff;
}
.spanBox{
  color: #26a2ff;
  background-color: #fff;
  border:1px solid #26a2ff;
  border-radius: 4px;
  padding: 0 4px;
}
.spanBox2 {
  color: #FF9600;
  background-color: #fff;
  border:1px solid #FF9600;
  border-radius: 4px;
  padding: 0 4px;
}

/* 表格 */
table {
	border-collapse: collapse;
}
table th,
table td {
	border: 1px solid #ccc;
	min-width: 50px;
	height: 20px;
	text-align: left;
}
table th {
	background-color: #f1f1f1;
	text-align: center;
}

/* 代码块 */
pre > code {
	display: block;
	border: 1px solid hsl(0, 0%, 91%);
	border-radius: 4px 4px;
	text-indent: 0;
	background-color: #fafafa;
	padding: 10px;
	font-size: 14px;
}

/* 引用 */
blockquote {
	display: block;
	border-left: 8px solid #d0e5f2;
	padding: 10px 10px;
	margin: 10px 0;
	background-color: #f1f1f1;
}

/* 列表 */
ul,
ol {
	margin: 10px 0 10px 20px;
}
::v-deep p{
	    margin-block-start: 1em;
	    margin-block-end: 1em;
}

/* 分割线 */
hr {
	display: block;
	width: 90%;
	margin: 20px auto;
	border: 0;
	height: 1px;
	background-color: #ccc;
}
.header {
	border-bottom: 1px solid #f1f1f1;
	padding-bottom: 10px;
	padding-right: 20px;
}
.header-title {
	box-sizing: border-box;
	position: relative;
	width: 200px;
}
.el-icon-arrow-left {
	font-size: 20px;
}
.header-title:hover .el-icon-arrow-left {
	background-color: #f5f7fa;
	color: #222;
}
.text {
	font-size: 16px;
	padding-left: 30px;
}
.text::before {
	position: absolute;
	content: '';
	width: 1px;
	height: 60px;
	background-color: #ebebeb;
	left: 34px;
	top: 50%;
	margin-top: -18px;
}
.title {
	background-color: #fff;
	height: 56px;
	line-height: 56px;
	border-bottom: 1px solid #f1f1f1;
}
.RuleRight {
	height: 690px;
	overflow-y: auto;
	position: relative;
}
::v-deep .el-tree--highlight-current {
	.el-tree-node {
		border-bottom: 1px #f0f0f0 solid;
	}
	.el-tree-node__content {
		background-color: #fff;
		height: 56px;
		line-height: 56px;
	}
	.is-current {
		.el-tree-node__content {
			.el-icon-caret-right {
				// color:#409eff !important;
			}
			.el-tree-node__label {
				color: #409eff !important;
			}
		}
		.el-tree-node__children {
			.el-icon-caret-right {
				color: #c0c4cc !important;
			}
			.el-tree-node__label {
				color: #606266 !important;
			}
		}
	}
}
.tabs ::v-deep.el-badge__content.is-fixed {
	position: absolute;
	top: 50%;
	right: -2px;
}
.box {
	padding: 20px;
	font-size: 14px;
	position: relative;
	background-color: #fff;
}
.main {
	margin-top: 30px;
}
/* bug： 我在flex布局的元素中使用了elementui的table组件，饿了么的table上会被加一个动态的宽度， 当第一次改变flex元素宽度的时候。table的动态宽度会变化，第二次和以后就不会变化了。*/
/* 给使用flex的元素加上 overflow-x：hidden */
.main-right {
	margin-left: 20px;
	overflow-x: hidden;
}
.main-left {
	width: 200px;
	border-radius: 3px;
	box-sizing: border-box;
	// padding-right: 20px;
	max-height: 700px;
	overflow: auto;
}
.main-left::after {
	position: absolute;
	content: '';
	width: 1px;
	height: auto;
	left: 220px;
	top: 0;
	bottom: 0;
	background-color: #f1f1f1;
}
::v-deep .has-gutter {
	display: none;
}
.li {
	height: 53px;
	line-height: 53px;
	padding: 0 20px;
	border-bottom: 1px solid #f1f1f1;
	color: #777777;
	width: 100%;
}
.li:hover {
	background-color: #f5f7fa;
}
.li:hover .el-icon-more {
	display: block;
}
.index-name {
	width: 170px;
}
.ul {
	max-height: calc(100vh - 230px);
	overflow: auto;
	width: 200px;
}
.isActiveLi {
	background-color: #f5f7fa;
	color: #409eff !important;
	position: relative;
}
.isActiveLi::after {
	width: 3px;
	content: ' ';
	background-color: #409eff;
	left: 0;
	bottom: 0;
	top: 0;
	position: absolute;
}
.item {
	font-size: 14px;
	cursor: pointer;
	padding: 8px;
	border-bottom: 1px solid #e8e8e8;
}
.item:hover {
	background-color: #f5f7fa;
}
.content {
	padding: 0 10px;
}
</style>