yunsu/ys_vue/src/views/message.vue

<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-col :span="2">
          <el-form-item>消息中心</el-form-item>
        </el-col>
      </el-form>
    </el-col>

    <!--选项卡-->
    <el-col :span="24">
      <el-tabs v-model="activePage" @tab-click="handleClick" type="card">
        <el-tab-pane name="0" label="审批">
          <div class="message-div" v-for="item in messages[0]">
            <p>
              <span
                class="message-title"
                @click="locationHerf(item.refId, item.noticeType)"
              >{{item.projectName}}</span>
              <span class="message-time">{{item.indate}}</span>
            </p>
            <p class="message-article">{{item.content}}</p>
          </div>
        </el-tab-pane>
        <el-tab-pane name="1" label="警告">
          <div class="message-div" v-for="item in messages[1]">
            <p>
              <span
                class="message-title"
                @click="locationHerf(item.refId, item.noticeType)"
              >{{item.projectName}}</span>
              <span class="message-time">{{item.indate}}</span>
            </p>
            <p class="message-article">{{item.content}}</p>
          </div>
        </el-tab-pane>
        <el-tab-pane name="2" label="保养">
          <div class="message-div" v-for="item in messages[2]">
            <p>
              <span
                class="message-title"
                @click="locationHerf(item.refId, item.noticeType)"
              >{{item.projectName}}</span>
              <span class="message-time">{{item.indate}}</span>
            </p>
            <p class="message-article">{{item.content}}</p>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-col>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[20 , 50 , 80 , 100 , 200]"
        :page-size="20"
        layout="total, sizes, prev, pager, next"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </el-col>
  </section>
</template>

<script>
import util from "../common/js/util";
export default {
  data() {
    return {
      messages: [],
      page: 1,
      size: 20,
      total: 0,
      tableHeight: 0,
      activePage: 0
    };
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      this.page = val;
      this.loadNotice();
    },
    handleSizeChange(val) {
      this.size = val;
      this.loadNotice();
    },
    //标签页面切换时
    handleClick(tab, event) {
      this.activeTab = tab.name;
    },
    //读取消息提示
    loadNotice() {
      this.http.post(
        this.port.notice.list,
        {
          pageNum: this.page,
          pageSize: this.size
        },
        res => {
          if (res.code == "ok") {
            this.messages = [];
            this.messages.push(res.data[0].emergencyList.list);
            this.messages.push(res.data[1].emergencyList.list);
            this.messages.push(res.data[2].emergencyList.list);
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
    },
    //点击消息的跳转
    locationHerf(id, type) {
      this.http.post(
        this.port.notice.read,
        {
          id: id
        },
        res => {
          if (res.code == "ok") {
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
      if (type == 0) {
        //审批 跳转到模具详情
        this.$router.push("/moldList/" + id);
      } else if (type == 1) {
        //警告 跳转到运行监测
        this.$router.push("/detection");
      } else if (type == 2) {
        //保养 跳转到运行监测详情
        this.$router.push("/detection/" + id);
      }
    }
  },
  created() {
    let height = window.innerHeight;
    this.tableHeight = height - 260;
  },
  mounted() {
    this.loadNotice();
  }
};
</script>

<style scoped>
.message-div {
  padding: 5px 0;
}

.message-div > p {
  line-height: 25px;
  margin: 0;
}

.message-type {
  font-weight: 700;
}

.message-time {
  padding-left: 30px;
  color: #777;
}

.message-title {
  cursor: pointer;
  color: #409eff;
}

.message-article {
  color: #555;
}
</style>