pbl-teacher-table/src/components/pages/noticeCenter/component/received.vue

<template>
  <div class="received">
    <div class="r_header">
      <div class="r_h_title">已收通知</div>
      <div class="r_h_right">
        <div class="r_h_r_total">
          共(
          <div>{{ pageData.total }}</div>
          )封
        </div>
        <el-input
          style="width: 250px;"
          placeholder="请输入关键词"
          v-model="searchValue"
        >
          <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer;font-size: 18px;color: #000;" @click="getData()"></i>
        </el-input>
      </div>
    </div>
    <div class="r_content" v-loading="tableLoading">
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#f1f1f1', fontSize: '17px' }"
        style="width: 100%"
        @row-click="showNoticeDetail"
        :row-style="{cursor:'pointer'}"
        height="calc(100%)"
      >
        <el-table-column
          fixed
          prop="title"
          label="通知标题"
          width="auto"
          min-width="200"
        >
          <template slot-scope="scope">
            <span v-html="scope.row.title"></span>
          </template>
        </el-table-column>
        <el-table-column label="状态 " width="150" align="center">
          <template slot-scope="scope">
            <span class="status" :class="`status_${scope.row.status}`">{{
              status[scope.row.status]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型 " width="150" align="center">
        </el-table-column>
        <el-table-column
          prop="create_at"
          label="时间 "
          width="250"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="publisherName"
          label="发布者 "
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="source"
          label="发布来源"
          width="200"
          align="center"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="r_bottom">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.nowPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageData.size"
        layout="sizes, prev, pager, next"
        :total="pageData.total"
      >
      </el-pagination>
    </div>
    <noticeDetailDialog ref="noticeDetailDialogRef"/>
  </div>
</template>

<script>
import noticeDetailDialog from '../dialog/noticeDetailDialog.vue';
export default {
  components: {
    noticeDetailDialog
  },
  data() {
    return {
      userId: this.$route.query.userid,
      org: this.$route.query.org,
      oid: this.$route.query.oid,
      tableLoading: false,
      status: ["未读", "已读"],
      searchValue: "",
      tableData: [],
      copyData: [],
      pageData: {
        nowPage: 1,
        total: 0,
        size: 20
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageData.size = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageData.nowPage = val;
      this.getData();
    },
    getData() {
      if (this.tableLoading) return;
      this.tableLoading = true;
      let params = [
        {
          uid: this.userId,
          status: "",
          type: "",
          source: "",
          pUid: "",
          searchValue: this.searchValue,
          pageNum: this.pageData.nowPage,
          pageSize: this.pageData.size
        }
      ];

      this.ajax
        .post(this.$store.state.api + "select_noticeCenter", params)
        .then(res => {
          let _resData = res.data[0];
          if (_resData.length > 0) {
            _resData.forEach(item => {
              item.content = JSON.parse(item.content);
            })
            this.copyData = _resData;
            this.tableData = _resData;
            this.pageData.total = res.data[1][0].total;
          } else {
            this.copyData = [];
            this.pageData.total = 0;
            this.pageData.nowPage = 1;
          }
          this.tableLoading = false;
          // this.tableData = res.data.list
          // this.pageData.total = res.data.total
        })
        .catch(e => {
          console.log(e);
          this.$message.error("获取通知失败");
          this.tableLoading = false;
        });
    },
    showNoticeDetail(row){
      this.$refs.noticeDetailDialogRef.open(row)
      if(row.status!=1){
        this.changeStatus(row.id,1)
      }
    },
    changeStatus(id,newStatus){
      let params = [{
        uid:this.userId,
        id:id,
        status:newStatus
      }]

      this.ajax.post(this.$store.state.api+"update_noticeCenter_statusByid",params).then(res=>{
        if(res.data==1){
          this.tableData.find(i=>i.id===id).status = newStatus;
          console.log("更新状态成功");
        }
      }).catch(err=>{
        console.log("更新状态失败",err);
      })
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style scoped>
.received {
  width: calc(100%);
  height: 100%;
  padding: 20px 20px;
  background: #fff;
  border: solid 1px #dfdfe0;
  border-radius: 4px;
  box-sizing: border-box;
}

.r_header {
  width: 100%;
  height: 80px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
}

.r_h_right {
  width: fit-content;
  display: flex;
  align-items: center;
}

.r_h_r_total {
  width: fit-content;
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.r_h_r_total > div {
  display: flex;
  color: #5398e3;
}

.r_h_title {
  font-size: 28px;
  font-weight: bold;
}

.r_content {
  width: 100%;
  height: calc(100% - 80px - 40px);
  overflow: auto;
  box-sizing: border-box;
  padding: 20px 0px;
  border-top: solid 1px #dfdfe0;
}

.status {
  padding: 0px 10px;
  border-radius: 4px;
  height: 30px;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.status_0 {
  background: #f3f4f6;
  color: #4d5765;
  border: solid 1px #d4d8dd;
}

.status_1 {
  background: #ecfdf5;
  color: #10664e;
  border: solid 1px #abf4d3;
}

.r_bottom {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>