ylrz_his_scrm_companyUI/src/views/crm/components/msg.vue

<template>
  <div class="msg">
      <div class="msg-title">通知消息
        <el-button round size="small"  @click="setAllRead()">全部已读</el-button>
      </div>
      
      <div class="msg-type">
        <div class="msg-type-item" v-for="(item, index) in msgType" @click="getMsgList(item.msgType)">
            <el-badge :value="item.total" :max="99" :hidden="item.total==0" class="item"  >
              <el-button round size="small">{{item.msgTypeName}}</el-button>
            </el-badge>
        </div>
          
      </div>
      <div class="mst-list">
        <el-timeline   >
          <el-timeline-item  :timestamp="item.createTime" placement="top" v-for="(item, index) in list">
            <el-card>
              <h4>{{item.title}}</h4>
              <p>{{item.content}}</p>
              <div><el-button type="text" v-if="item.isRead==0" @click="setRead(item)">标记为已读</el-button></div>
            </el-card>
          </el-timeline-item>
         
        </el-timeline>
        <div v-if="isMore" class="more" @click="loadMore()"><el-button type="text">加载更多</el-button></div>
      </div>
         
  </div>
</template>

<script>

import { setAllRead,getMsg,getMsgList,getMsgCount,setRead } from "@/api/crm/msg";

export default {
  name: "msg",
  components: {  },
  data() {
    return {
      isMore:false,
      currentTypeId:undefined,
      msgType:[],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产品表格数据
      list: [],
       queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
      
      this.getMsg();
  },
  mounted() {
   
  },
  methods: {
    loadMore () {
        this.queryParams.pageNum += 1;
        this.getList();
    },
    getMsg(){
      getMsg().then(response => {
          this.msgType = response.counts;
          if(this.currentTypeId==undefined){
            this.currentTypeId=this.msgType[0].msgType;
          }
          this.list =[];
          this.getList();
      });
    },
    setAllRead(){
        setAllRead().then(response => {
            this.getMsg();
            //更新父组件的数量
            this.$emit('update-count');
        });
        
    },
    setRead(row){
        row.isRead=1;
        setRead(row).then(response => {
            this.getMsg();
            //更新父组件的数量
            this.$emit('update-count');
        });
        
    },
    getMsgList(typeId){
        this.currentTypeId=typeId;
        this.queryParams.pageNum=1;
         this.list =[];
        this.getList();
    },
    getList() {
      
      this.loading = true;
      this.queryParams.type=this.currentTypeId;
      getMsgList(this.queryParams).then(response => {
        this.list=this.list.concat( response.data.list);
        this.total = response.data.total;
        this.loading = false;
        this.isMore=response.data.hasNextPage;
      });
    },
    getMsgType() {
      getMsg().then(response => {
        this.msgType = response.counts;
      });
    },
    
    
  }
};
</script>
<style  scoped>
.msg{
  padding:15px;
}
 .dialog-footer{
   margin-top: 30px;
   float: right;
 }
 .msg-type{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;

 }
 .msg-type-item {
   margin: 10px;
 }
.mst-list{
  margin: 10px 0px;
}

</style>
<style >
 
 .el-drawer__header{
   margin-bottom: 10px;
 }
 .more{
   text-align: center;
   font-size: 14px;
   color: #909399;
 }
 .msg-title{
   margin: 10px 10px 20px 10px;
   font-size: 16px;
 }
</style>