消息管理，系统消息，我的消息

guoshilong

2024-02-02 d38ab21933f28fc646e128bcbf637c3f311eb5f2

 src/page/index/top/top-notice.vue

@@ -1,92 +1,138 @@
<template>
    <div class="noticeBtn" @click="noticeBtn">
        <el-badge v-if="!view">
            <img src="img/notice/xiaoxi-png.png" style="width: 26px;height: 26px; display: flex;" />
        </el-badge>
        <el-badge v-if="view">
            <!-- <i class="el-icon-bell"></i> -->
            <img src="img/notice/xiaoxi-gif.gif" style="width: 26px;height: 26px; display: flex;" />
        </el-badge>
    </div>
    <!-- <el-popover placement="bottom"
              width="0"
              trigger="click"> -->
<!--    <div class="noticeBtn" @click="noticeBtn">-->
<!--        <el-badge v-if="!view">-->
<!--            <img src="img/notice/xiaoxi-png.png" style="width: 26px;height: 26px; display: flex;" />-->
<!--        </el-badge>-->
<!--        <el-badge v-if="view">-->
<!--            &lt;!&ndash; <i class="el-icon-bell"></i> &ndash;&gt;-->
<!--            <img src="img/notice/xiaoxi-gif.gif" style="width: 26px;height: 26px; display: flex;" />-->
<!--        </el-badge>-->
<!--    </div>-->

    <!-- <el-tabs v-model="activeName">
      <el-tab-pane label="邮件(1)"
                   name="first"></el-tab-pane>
      <el-tab-pane label="消息(2)"
                   name="second"></el-tab-pane>
      <el-tab-pane label="通知"
                   name="third"></el-tab-pane>

  <el-popover placement="bottom" width="350" trigger="click">
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="未读" name="2"></el-tab-pane>
      <el-tab-pane label="已读" name="1"></el-tab-pane>
    </el-tabs>
    <el-scrollbar style="height:300px">
      <avue-notice :data="data"
                   :option="option"
                   @page-change="pageChange"></avue-notice>
    </el-scrollbar> -->
    <!-- <div slot="reference">
      <avue-notice :data="data" :option="option" :finish="finish" @page-change="pageChange" @click="handleClick"></avue-notice>
    </el-scrollbar>
    <div slot="reference">
      <el-badge is-dot>
        <i class="el-icon-bell"></i>
      </el-badge>
    </div> -->
    <!-- </el-popover> -->
<!--      <el-badge :value="number" :max="99" class="item">-->
<!--        <i class="el-icon-bell"></i>-->
<!--      </el-badge>-->
    </div>
    <messageContent ref="messageContent" @reflushList="reflushList" />
  </el-popover>




</template>

<script>
import { updateView, getList } from "@/api/task/reportForRepairs"
let list = [{
    img: '/img/bg/vip1.png',
    title: '史蒂夫·乔布斯 关注了你',
    subtitle: '05-08 15:08',
    tag: '已经开始',
    status: 0
}, {
    img: '/img/bg/vip2.png',
    title: '斯蒂夫·沃兹尼亚克 关注了你',
    subtitle: '05-08 15:08',
    tag: '未开始',
    status: 1
}, {
    img: '/img/bg/vip3.png',
    title: '蒂姆·库克 关注了你',
    subtitle: '05-08 15:08',
    status: 3,
    tag: '有错误'
}, {
    img: '/img/bg/vip4.png',
    title: '比尔·费尔南德斯 关注了你',
    subtitle: '05-08 15:08',
    status: 4,
    tag: '已完成'
}]
import {getMyMessage} from "@/api/messageRecord/messageUser";
import {mapGetters} from "vuex";
import MessageContent from "@/page/index/top/components/messageContent.vue";
export default {
    name: "top-notice",
  components: {MessageContent},
    data () {
        return {
            finish: false,
            baseUrl: "https://sk.hubeishuiyi.cn",
            total: 0,
            view: false,
            activeName: 'first',
            activeName: '2',
            page:{
              current:1,
              pageSize:5
            },
            option: {
                props: {
                    img: 'img',
                    title: 'title',
                    subtitle: 'subtitle',
                    tag: 'tag',
                    status: 'status'
                    subtitle: 'time',
                    tag: "tag",
                    status: "s",
                },
            },
            data: list,
            data: [],

          number:"",
        }
    },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
  },
    created () {
        this.getNoticeNumber()
        // this.getNoticeNumber()

      this.getMessage(this.page)


    },
    mounted () {
        this.createEventSource()
    },
    methods: {
      // 刷新
      reflushList () {
        // this.getNotReadNumber();
        this.getMessage(this.page)
      },
      // tab 点击事件
        handleTabClick (tab, event) {
        this.page = 1
        this.activeName = tab.name
          this.getMessage(this.page)
      },
      // 行点击
      handleClick (row) {
        // 弹窗
        this.$nextTick(() => {
          this.$refs.messageContent.init(row)
        })
      },

        getMessage(page,params={}){
          params.messageType = 'receive'
          params.isRead = this.activeName
          params.userId = this.userInfo.user_id

          getMyMessage(page.current,page.size,params).then(res=>{
            const data = res.data.data
            const record = data.records
            record.forEach((item) => {
              item["tag"] = "查看"
              item["s"] = "查看"
            })

            this.data = record

            if (params.isRead == 2){
              this.number = data.total

              if (data.total == 0){
                this.number = ""
              }

            }

            if (data.total < 6) {
              this.finish = true
            } else {
              this.finish = false
            }
          })

        },

        getNoticeNumber () {
            var values = {
                viewType: 2
@@ -151,11 +197,25 @@
            }
        },
        pageChange (page, done) {
            setTimeout(() => {
                this.$message.success('页码' + page)
                this.data = this.data.concat(list)
                done()
            }, 1000)
          let params = {}

          params.messageType = 'receive'
          params.isRead = this.activeName
          params.userId = this.userInfo.user_id

          getMyMessage(page,page.size,params).then(res=>{
            const data = res.data.data
            const record = data.records
            record.forEach((item) => {
              item["tag"] = "查看"
              item["s"] = "查看"
            })
            this.data = this.data.concat(record)
            if (this.data.length == data.total) {
              this.finish = true
            }
            done()
          })

        },
    }