新功能: 顶部加入消息通知图标

web/src/layout/header-aside/components/header-message/components/msg-list/index.vue

@@ -0,0 +1,55 @@
+<template>
+<div>
+  <el-divider content-position="left">消息中心</el-divider>
+  <div v-if="msgObj">
+     <h3>{{msgObj.title}}</h3>
+    <div class="content-style">{{msgObj.content}}</div>
+  </div>
+  <div v-else>
+    <el-empty :image-size="100"></el-empty>
+  </div>
+  <el-divider></el-divider>
+  <div style="text-align: center">
+    <el-button type="text" @click="toPage">前往通知中心</el-button>
+  </div>
+</div>
+</template>
+
+<script>
+import {mapActions} from 'vuex'
+export default {
+  name: 'msgList',
+  props: {
+    msgObj: {
+      type: Object,
+      default: null
+    }
+  },
+  methods: {
+    ...mapActions('d2admin/page', [
+      'open'
+    ]),
+    toPage () {
+      // this.open({name:'messageCenter'})
+      this.$router.push({
+        name:'messageCenter'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .msg-list{
+    padding: 5px 0px;
+    border-bottom: 1px solid #eeeeee;
+  }
+  .content-style{
+    width: 370px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3; /*3表示只显示3行*/
+    -webkit-box-orient: vertical;
+  }
+</style>

web/src/layout/header-aside/components/header-message/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+
+    <el-tooltip
+      effect="dark"
+      content="通知"
+      placement="bottom">
+      <el-popover
+        placement="bottom"
+        width="400"
+        trigger="click">
+        <msg-list :msgObj="msgObj"></msg-list>
+      <el-button
+        class="d2-ml-0 d2-mr btn-text can-hover"
+        type="text"
+        slot="reference"  @click="getList">
+        <d2-icon
+
+          name="bell-o"
+          style="font-size: 16px"/>
+      </el-button>
+    </el-popover>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+import msgList from './components/msg-list'
+import { request } from '@/api/service'
+export default {
+  components:{
+    msgList
+  },
+  data () {
+    return {
+      msgObj:null
+    }
+  },
+  methods:{
+    getList () {
+      request({
+        url: '/api/system/message_center/get_newest_msg/',
+        method: 'get',
+        params: {}
+      }).then(res => {
+        const {data} = res
+        this.msgObj = data
+      })
+    }
+  }
+}
+</script>