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

<template>
  <div
    class="pb_content"
    style="background: unset; height: 100%"
    v-loading="loading"
  >
    <div
      class="pb_content_body"
      style="
        background: #fff;
        padding: 0px 25px;
        box-sizing: border-box;
        border-radius: 5px;
      "
    >
      <div class="pb_head">
        <span>通知公告</span>
        <div class="student_button">
          <el-button
            type="primary"
            @click="dialogVisibleAdd = true"
            v-if="role == '1'"
            >新建通知</el-button
          >
        </div>
      </div>
    </div>
    <div class="pb_content_body" style="height: calc(100% - 100px)">
      <div class="noneBox" v-if="!tableData.length">
        <img src="../../../assets/icon/isNoMessage.png" />
      </div>
      <div class="n_noticeBox" v-else>
        <div class="left">
          <div class="title">通知内容</div>
          <div class="content">
            <div
              class="noticeContent"
              v-for="(item, index) in tableData"
              :key="index"
              @click="(res = item), (activeId = item.id)"
              :class="{ active: item.id == activeId }"
            >
              <div class="n_title">
                <span>{{ item.title }}</span>
              </div>
              <div class="n_content">{{ snippet(item.content) }}</div>
              <div class="n_time">{{ item.creatTime }}</div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="title">通知详情</div>
          <div class="content">
            <img src="../../../assets/icon/notice/noticeBg.png" alt="" />
            <div class="r_n_content">
              <div class="r_n_title">
                <div class="r_title">
                  <span>{{ res.title }}</span>
                </div>
                <div class="r_time">
                  <span></span><span>{{ res.creatTime }}</span>
                </div>
              </div>
              <div class="r_n_main">
                <div class="notice_content cont" v-html="res.content"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="添加全站通知"
      :visible.sync="dialogVisibleAdd"
      width="700px"
      :before-close="handleClose"
      class="dialog_diy"
      center
    >
      <div>
        <div class="tian1">
          <span>通知标题</span>
          <el-input
            v-model="noticeTitle"
            style="width: 250px; margin: 15px 0px"
            placeholder="请输入通知标题"
          ></el-input>
        </div>
        <div class="tian1">
          <span>通知内容</span>
          <editor-bar v-model="detail" @change="change"></editor-bar>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addNotice">确认通知</el-button>
        <el-button @click="dialogVisibleAdd = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EditorBar from "../../../components/tools/wangEnduit";

export default {
  components: {
    EditorBar,
  },
  data() {
    return {
      tableHeight: "500px",
      page: 1,
      total: 0,
      loading: false,
      formLabelWidth: "100px",
      dialogVisible: false,
      dialogVisibleAdd: false,
      title: "",
      tableData: [],
      res: {},
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      org: this.$route.query.org,
      role: this.$route.query.role,
      noticeTitle: "",
      detail: "",
      now: "",
      timer: null,
      activeId: "",
    };
  },
  mounted() {},
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
    next();
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    snippet(str) {
      str = str.replace(/<\/?[^>]*>/g, ""); //去除HTML tag
      str = str.replace(/[ | ]*\n/g, "\n"); //去除行尾空白
      //str = str.replace(/\n[\s| | ]*\r/g,'\n'); //去除多余空行
      str = str.replace(/&nbsp;/gi, ""); //去掉&nbsp;
      return str;
      // return value.replace(/<[^>]*>/g, "");
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getNews();
    },
    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.userid, oid: this.oid, org: this.org };
      this.ajax
        .get(this.$store.state.api + "selectNotice2", params)
        .then((res) => {
          this.loading = false;
          this.tableData = res.data[0];
          this.res = res.data[0][0];
          this.activeId = res.data[0][0].id;

          if (!this.timer) {
            this.timer = setInterval(() => {
              this.getNews2();
            }, 5000);
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    getNews2() {
      let params = { uid: this.userid, oid: this.oid, org: this.org };
      this.ajax
        .get(this.$store.state.api + "selectNotice2", params)
        .then((res) => {
          this.tableData = res.data[0];
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    change(val) {
      console.log(val);
    },
    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;
        }
      }
    },
    //添加通知
    addNotice() {
      if (this.noticeTitle === "") {
        this.$message.error("请输入文章标题");
        return;
      } else if (this.detail === "") {
        this.$message.error("请输入文章内容");
        return;
      }
      if (this.time()) {
        let params = [
          {
            t: this.noticeTitle,
            nc: this.detail.replace(/%/g, "%25"),
            oid: this.oid,
            org: this.org,
          },
        ];
        this.ajax
          .post(this.$store.state.api + "addNotice", params)
          .then((res) => {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.noticeTitle = "";
            this.detail = "";
            this.getNews();
            this.dialogVisibleAdd = false;
          })
          .catch((err) => {
            this.$message.error("添加失败");
            console.error(err);
          });
      }
    },
  },
  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;
}

.dialog_diy >>> .el-dialog__header {
  background: #454545 !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;
}

.notice_content {
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  font-size: 16px;
  line-height: 31px;
  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;
}

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

.student_page {
  margin-top: 10px;
}

.pb_head {
  margin: 0 !important;
  width: 100% !important;
}

.student_table >>> .el-table,
.student_table >>> .el-table__body-wrapper {
  height: auto !important;
}

.noneBox {
  height: 100%;
  width: 100%;
  background: rgb(242, 242, 242);
  display: flex;
  align-items: center;
  justify-content: center;
}

.noneBox img {
  width: 400px;
}

.n_noticeBox {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.n_noticeBox .left {
  width: 350px;
  height: 100%;
}

.n_noticeBox .left .title {
  background: rgb(241, 241, 241);
  width: 100%;
  font-weight: 700;
  color: rgb(153, 148, 143);
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-radius: 5px;
}

.n_noticeBox .left .content {
  height: calc(100% - 50px);
  margin-top: 10px;
  background: #fff;
  border-radius: 5px;
  overflow: auto;
}

.n_noticeBox .right {
  width: calc(100% - 370px);
}

.n_noticeBox .right .title {
  background: rgb(241, 241, 241);
  width: 100%;
  font-weight: 700;
  color: rgb(153, 148, 143);
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.n_noticeBox .right .content {
  height: calc(100% - 40px);
  background: #fff;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  position: relative;
}

.n_noticeBox .right .content > img {
  position: absolute;
  right: 20px;
  bottom: -30px;
  max-width: 100%;
}

.active {
  background: rgb(250, 250, 250) !important;
}

.noticeContent {
  padding: 15px 20px;
  cursor: pointer;
}

.noticeContent:hover {
  background: rgb(250, 250, 250) !important;
}

.noticeContent:nth-child(even) {
  background: rgb(247, 250, 255);
}

.n_title {
  width: 100%;
  display: flex;
  align-items: center;
}

.n_title span {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}

.n_title::before {
  content: "";
  display: block;
  background-image: url(../../../assets/icon/notice/doi.png);
  min-width: 25px;
  height: 25px;
  background-size: 100% 100%;
  margin-right: 5px;
  margin-left: -5px;
}

.n_content {
  font-size: 14px;
  color: rgb(126, 126, 126);
  margin-top: 5px;
  line-height: 1.5;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.n_time {
  font-size: 14px;
  color: rgb(61, 61, 61);
  margin-top: 5px;
}

.r_n_content {
  padding: 20px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.r_n_title {
}

.r_title {
  font-size: 25px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  /* padding-bottom: 10px; */
}

.r_title::before {
  content: "";
  display: block;
  background-image: url(../../../assets/icon/notice/notice.png);
  min-width: 40px;
  height: 40px;
  background-size: 100% 100%;
  margin-right: 5px;
  margin-left: -5px;
}

.r_time {
  display: flex;
  font-size: 15px;
  align-items: center;
  color: rgb(61, 61, 61);
}

.r_time span:nth-child(1) {
  height: 1px;
  width: 100%;
  background: #eee;
}

.r_time span:nth-child(2) {
  min-width: fit-content;
  margin: 0 30px;
}

.r_n_main {
  height: calc(100% - 120px);
  width: 100%;
  overflow: auto;
  margin-top: 20px;
  padding: 0 20px;
  box-sizing: border-box;
}
</style>