gdy_pc_8/src/views/update_notice.vue

<template>
  <div class="box boxMinHeight">
    <PageHeadTwo title="系统通知列表"></PageHeadTwo>
    <div class="main flex-box">
      <div class="main-left scroll-bar">
        <el-tree
          v-show="announcement.length != 0"
          ref="tree"
          :data="announcement"
          :props="defaultProps"
          node-key="id"
          @node-click="dept_click"
          :expand-on-click-node="false"
          :highlight-current="true"
          class="cate-tree"
        ></el-tree>
        <noData v-show="announcement.length == 0" content="暂无数据" imgW="120px" imgH="80px"></noData>
      </div>
      <div class="main-right flex-1" v-loading="noticeLoad">
        <div class="title">
          <span class="fontColorC" style="position: absolute;">{{aAtripOfDetails.publish_time}}</span>
          <div style="font-size: 18px;padding-right: 10px;text-align: center;">{{ aAtripOfDetails.title}}</div>
        </div>
        <div class="RuleRight scroll-bar">
          <div v-html="html"></div>
          <NoData v-if="!html"></NoData>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeadTwo from '@/components/PageHeadTwo';
export default {
  name: 'update_notice',
  components: { PageHeadTwo },
  data() {
    return {
      id:0,
      announcement: [],
      noticeLoad: false,
      defaultProps: {
        label: 'title'
      },
      aAtripOfDetails:{},
      html:'',
    };
  },
  created() {
    if(this.$route.query.id){
      this.id=this.$route.query.id;
    }
    this.noticeList();
  },
  methods: {
    noticeList() {
      this.noticeLoad = true;
      let params = {page:1,page_size:2000,type:0};
      this.$axiosUser('get', 'api/pro/announcement/list',params).then(res => {
          if (res.data.code == 1) {
            let list = res.data.data.list;
            this.announcement = list;
            this.$nextTick(() => {
              if(!this.id&&list[0]) {
                this.id = list[0].id;
              }
              this.$refs.tree.setCurrentKey(this.id);
              this.noticeDetails();
            });
          }
      }).finally(() => {
        this.noticeLoad = false;
      });
    },
    noticeDetails() {
      if(!this.id){
        return false
      }
      this.html='';
      this.noticeLoad = true;
      this.$axiosUser('get', '/api/pro/announcement/info', { announcement_id: this.id }).then(res => {
          this.aAtripOfDetails = res.data.data;
          this.html = res.data.data.focus + res.data.data.update_msg;
      }).finally(() => {
        this.noticeLoad = false;
      });
    },
    dept_click(item) {
      this.id = item.id;
      setTimeout(() => {
        this.noticeDetails();
      }, 500);
    }
  }
};
</script>

<style scoped lang="scss">
.title {
  background-color: #fff;
  height: 56px;
  line-height: 56px;
  border-bottom: 1px solid #f1f1f1;
}
.RuleRight {
  height: 690px;
  overflow-y: auto;
}
::v-deep .el-tree-node__label {
      display: inline-block;
      width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}
::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: 40px;
}
/* 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>