通知

xiangpei

2024-07-15 94fe108996bec7944bd24fda997c553737509bad

通知

 src/api/notify.js

New file
@@ -0,0 +1,6 @@
import { get,post } from '@/utils/request'

export default {
  getAdminNotify: () => get('/api/admin/notify/admin'),
  read: data => post('/api/admin/notify/read', data)
}

 src/layout/components/Navbar.vue

@@ -5,28 +5,50 @@
    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />

    <div class="right-menu">
      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
        <div class="avatar-wrapper">
          <span>{{userName}}</span>
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/profile/index">
            <el-dropdown-item>个人信息</el-dropdown-item>
          </router-link>
          <router-link to="/">
            <el-dropdown-item>主页</el-dropdown-item>
          </router-link>
          <el-dropdown-item  @click.native="logout"  divided>退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div>
        <el-badge :value="notify.total" class="item">
          <el-button @click="notifyShow = true" class="share-button" icon="el-icon-bell" type="primary" circle></el-button>
        </el-badge>
      </div>
      <div>
        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
          <span>{{userName}}<i class="el-icon-caret-bottom" /></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="$router.push('/profile/index')">个人信息</el-dropdown-item>
            <el-dropdown-item @click.native="$router.push('/dashboard')">主页</el-dropdown-item>
            <el-dropdown-item  @click.native="logout" divided>退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <el-dialog
      title="通知"
      :visible.sync="notifyShow"
      width="400px"
      :modal="false"
    >
      <div class="notify-warp" v-if="notify.feedBack && notify.feedBack > 0">
        {{notify.feedBack}}条<el-link @click="jump('/exam/feedback/list')" class="core" type="primary">错题反馈</el-link>等待您的处理！
      </div>
      <div class="notify-warp" v-if="notify.mobilize && notify.mobilize > 0">
        {{notify.mobilize}}条<el-link @click="jump('/user/departmentExamine/list')" class="core" type="primary">部门调动审核</el-link>等待您的处理！
      </div>
      <div class="notify-warp" v-if="notify.status && notify.status > 0">
        {{notify.status}}条<el-link @click="jump('/user/UserConditionExamine/list')" class="core" type="primary">状态审核</el-link>等待您的处理！
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="this.notify.ids && this.notify.ids.length > 0" type="success" @click="allRead">一键全读</el-button>
        <el-button type="primary" @click="notifyShow = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import loginApi from '@/api/login'
import NotifyApi from '@/api/notify'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'

@@ -42,7 +64,40 @@
      'userName'
    ])
  },
  data() {
    return {
      notifyShow: false,
      notify: {
        total: null,
        feedBack: null,
        mobilize: null,
        status: null,
        ids: []
      }
    }
  },
  mounted() {
    this.getAdminNotify()
  },
  methods: {
    jump(path) {
      this.$router.push(path)
    },
    allRead() {
      if (this.notify.ids && this.notify.ids.length > 0) {
        NotifyApi.read(this.notify.ids).then(res => {
          this.$message.success("一键已读完成")
          this.notifyShow = false
          this.getAdminNotify()
        })
      }
    },
    getAdminNotify() {
      NotifyApi.getAdminNotify().then(res => {
        res.response.total === 0 ? res.response.total = null : res.response.total
        this.notify = res.response;
      })
    },
    toggleSideBar () {
      this.$store.dispatch('app/toggleSideBar')
    },
@@ -61,8 +116,15 @@
</script>

<style lang="scss" scoped>
.core {
  margin: 0 5px;
}
.notify-warp {
  display: flex;
  flex-direction: row;
}
.navbar {
  height: 50px;
  height: 60px;
  overflow: hidden;
  position: relative;
  background: #fff;
@@ -91,10 +153,11 @@
  }

  .right-menu {
    float: right;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    height: 100%;
    line-height: 50px;

    padding-right: 20px;
    &:focus {
      outline: none;
    }