manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet-workshop/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 :style="heightString">
            <span v-if="messages[0].length == 0">目前暂无消息</span>
            <div
              class="message-div"
              v-for="item,index in messages[0]"
              :key="index"
              @click="locationHerf(item.id, item.refId, item.noticeType, item.belongType)"
            >
              <p>
                <span class="message-title isRead" v-if="item.isRead == 1">{{item.projectName}}</span>
                <span class="message-title" v-else>{{item.projectName}}</span>
                <span class="message-time">{{item.indate}}</span>
              </p>
              <p class="message-article">{{item.content}}</p>
            </div>
          </div>
          <!--分页1-->
          <el-col :span="24" class="toolbar">
            <el-pagination
              @size-change="handleSizeChange0"
              @current-change="handleCurrentChange0"
              :page-sizes="[20 , 50 , 80 , 100 , 200]"
              :page-size="20"
              layout="total, sizes, prev, pager, next"
              :total="total[0]"
              style="float:right;"
            ></el-pagination>
          </el-col>
        </el-tab-pane>
        <el-tab-pane name="1" label="警告">
          <div :style="heightString">
            <span v-if="messages[1].length == 0">目前暂无消息</span>
            <div
              class="message-div"
              v-for="item,index in messages[1]"
              :key="index"
              @click="locationHerf(item.id, item.refId, item.noticeType, null)"
            >
              <p>
                <span class="message-title isRead" v-if="item.isRead == 1">{{item.projectName}}</span>
                <span class="message-title" v-else>{{item.projectName}}</span>
                <span class="message-time">{{item.indate}}</span>
              </p>
              <p class="message-article">{{item.content}}</p>
            </div>
          </div>
          <!--分页2-->
          <el-col :span="24" class="toolbar">
            <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :page-sizes="[20 , 50 , 80 , 100 , 200]"
              :page-size="20"
              layout="total, sizes, prev, pager, next"
              :total="total[1]"
              style="float:right;"
            ></el-pagination>
          </el-col>
        </el-tab-pane>
        <el-tab-pane name="2" label="保养">
          <div :style="heightString">
            <span v-if="messages[2].length == 0">目前暂无消息</span>
            <div
              class="message-div"
              v-for="item,index in messages[2]"
              :key="index"
              @click="locationHerf(item.id, item.refId, item.noticeType, null)"
            >
              <p>
                <span class="message-title isRead" v-if="item.isRead == 1">{{item.projectName}}</span>
                <span class="message-title" v-else>{{item.projectName}}</span>
                <span class="message-time">{{item.indate}}</span>
              </p>
              <p class="message-article">{{item.content}}</p>
            </div>
          </div>
          <!--分页3-->
          <el-col :span="24" class="toolbar">
            <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :page-sizes="[20 , 50 , 80 , 100 , 200]"
              :page-size="20"
              layout="total, sizes, prev, pager, next"
              :total="total[2]"
              style="float:right;"
            ></el-pagination>
          </el-col>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </section>
</template>

<script>
import util from "../common/js/util";
export default {
  data() {
    return {
      messages: [[], [], []],
      page0: 1,
      page1: 1,
      page2: 1,
      size: 20,
      total: [0, 0, 0],
      tableHeight: 0,
      activePage: 0,
      heightString: ""
    };
  },
  methods: {
    //分页1
    handleCurrentChange0(val) {
      this.page0 = val;
      this.loadNotice();
    },
    handleSizeChange0(val) {
      this.size1 = val;
      this.loadNotice();
    },
    //分页2
    handleCurrentChange1(val) {
      this.page2 = val;
      this.loadNotice();
    },
    handleSizeChange1(val) {
      this.size = val;
      this.loadNotice();
    },
    //分页3
    handleCurrentChange2(val) {
      this.page = val;
      this.loadNotice();
    },
    handleSizeChange2(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].approvelList.list);
            this.messages.push(res.data[1].matainList.list);
            this.messages.push(res.data[2].emergencyList.list);
            this.total[0] = res.data[0].approvelList.total;
            this.total[1] = res.data[1].matainList.total;
            this.total[2] = res.data[2].emergencyList.total;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
    },
    //点击消息的跳转
    locationHerf(id, refid, type, approval) {
      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/" + refid + "/" + approval);
      } else if (type == 1) {
        //警告 跳转到运行监测
        this.$router.push("/detection");
      } else if (type == 2) {
        //保养 跳转到运行监测详情
        this.$router.push("/detection/" + refid);
      }
    }
  },
  created() {
    let height = window.innerHeight;
    this.tableHeight = height - 260;
    this.heightString = "height: " + this.tableHeight + "px";
  },
  mounted() {
    this.loadNotice();
  }
};
</script>

<style scoped>
.message-div {
  cursor: pointer;
  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 {
  color: #409eff;
}

.message-article {
  color: #555;
}

.isRead {
  color: #999 !important;
}
</style>