avue中实现消息的实时展示

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂。

前言

一个功能写了大半天，主要是数据表设计的有点复杂，且这个项目是10月份就写的放那的，里面有些东西都忘记了……先看数据库结构，然后理思路，最后实现功能。

效果如下：

​编辑

其实现在看看，也不是很难。

实现思路

1. 项目背景：大致就是给教练用的系统，这个消息功能就是XXX运动员完成了XX方案时，该系统就会实时通知（对了，忘记加定时了，，，发完文章之后就去加…）。
2. 方案表有一个方案的完成状态，通过该字段做判断，在前台展示消息。
3. 方案表新加了个更改时间字段，为了在前台展示完成该方案的时间。
4. 实现思路是将完成了的方案，封装成消息公告对象，最后添加在消息表中，展示在前台。每次去查询方案表中已完成了的方案时，都会执行添加消息的方法，这样就会造成添加重复，不管完成了的方案有没有被添加过，都会重新添加一次，所以又在方案表中新加了个作为区分的字段。
5. 在前台实现遍历消息公告表，遍历展示在指定位置。

代码实现

项目中用的是avue，HTML中的代码如下：

<avue-notice @click="handleClick"
            :data="noticeList"
                       :option="option"
                       @page-change="pageChange">

          </avue-notice>

methods中的代码如下：（主要是用来遍历消息）

getNoticeList(){
      getNoticeStsteByDeptId().then(res => {
        const data  = res.data.data;
        for (let i = 0; i < data.length; i++) {
          let listInfo =
          {
            title: '',
            subtitle: '',
            tag: '',
            status: 0,
            id:0,
          };
          listInfo.subtitle = data[i].createTime;
          listInfo.tag = "查看";
          listInfo.title = data[i].title+"已经完成了"+data[i].content+"训练方案";
          listInfo.status = data[i].status;
          listInfo.id = data[i].id;
          if(data[i].status===1) {
            this.weiduNoticeCount += 1;
          }
          this.noticeList.push(listInfo);
        }
        this.xiaoxiLabel = "消息("+this.weiduNoticeCount+")";
      });

    },

声明的变量：

data () {
    return {
      activeName: 'second',
      option: {
        props: {
          img: 'img',
          title: 'title',
          subtitle: 'subtitle',
          tag: 'tag',
          status: 'status',
          id:'id'
        },
      },
      //公告信息
      noticeList: [],
      //未读的公告
      weiduNoticeCount:0,
      //消息的文本
      xiaoxiLabel:"",

    }
  },

单击公告时，将状态修改为已读：

//单击时，修改状态为已完成
    handleClick(item){
      var id = item.id;
      //根据编号修改信息
      updateNew(id).then(() => {
        this.$message({
          type: "success",
          message: "已读!"
        });
        done();
        this.getNoticeList();
      }, error => {
        window.console.log(error);
        loading();
      });
    },

notice.js中的方法如下：

/**
 * 获取消息（已完成的，根据机构编号）
 * @param id
 * @returns {*}
 */
export const getNoticeStsteByDeptId = () => {
  return request({
    url: '/api/blade-desk/notice/getNoticeStsteByDeptId',
    method: 'get',
  })
}

/**
 * 修改状态，原来的那个看不懂……
 * @returns {*}
 * @param id
 */
export const updateNew = (id) => {
  return request({
    url: '/api/blade-desk/notice/updateNew',
    method: 'get',
    params: {
      id
    }
  })
}

最后就是后台控制器中的代码：

/**
  * 获取已完成的消息
  */
 @GetMapping("/getNoticeStsteByDeptId")
 @ApiOperationSupport(order = 1)
 @ApiOperation(value = "详情", notes = "传入notice")
 public R<List<Notice>> getNoticeStsteByDeptId() {
  //获取当前用户所在的部门
  Long deptId = Long.parseLong(WebUtil.getCookieVal("dept_id"));
  //根据部门和状态查询信息
  List<Programme> programmeList = programmeService.getPaogramStateBydeptId(2,deptId,0);
  //遍历方案集合，得到方案的修改时间、方案名称，完成方案的人，添加到公告表中
  for(Programme programme : programmeList){
   //方案民称
   String programName = programme.getPnme();
   //时间
   Date updatetime = programme.getUpdateTime();
   Athletes athletes = new Athletes();
   athletes.setId(programme.getPaid());
   Athletes detail = athletesService.getOne(Condition.getQueryWrapper(athletes));
   String athName = detail.getAname();
   //调用添加公告的方法
   Notice notice = new Notice();
   notice.setContent(programName);
   notice.setCreateTime(updatetime);
   notice.setTitle(athName);
   //公告状态，4已读.1未读，
   notice.setStatus(1);
   //添加
   noticeService.save(notice);
  }
  //查询公告里面的信息
  List<Notice> noticeList = noticeService.list();
  return R.data(noticeList);
 }


 /**
  * 修改信息
  */
 @GetMapping("/updateNew")
 @ApiOperation(value = "修改", notes = "传入notice")
 public R updateNew(Long id) {
  Notice notice = noticeService.getById(id);
  notice.setStatus(4);
  return R.status(noticeService.updateById(notice));
 }

OK，今天记录完毕！

​