BJ_ZTEITS-Developers / parking-cloud-yudao

Commit bdd8229c970acaff85394761cf1304ee4ca1514a

Authored by xingyu
1 parent 664c6258

perf: message

Inline Side-by-side
Showing 1 changed file with 40 additions and 42 deletions
yudao-ui-admin-vue3/src/layout/components/Message/src/Message.vue
  View file @bdd8229
  1 +<script setup lang="ts">
  2 +import { ref } from 'vue'
  3 +import { ElTabs, ElTabPane, ElPopover, ElBadge } from 'element-plus'
  4 +
  5 +const activeName = ref('notice')
  6 +
  7 +const noticeList = ref([
  8 + { id: 1, title: '版本升级1', date: '2022-12-12 10:00:00' },
  9 + { id: 2, title: '版本升级2', date: '2022-12-12 10:00:00' },
  10 + { id: 3, title: '版本升级3', date: '2022-12-12 10:00:00' },
  11 + { id: 4, title: '版本升级4', date: '2022-12-12 10:00:00' },
  12 + { id: 5, title: '版本升级5', date: '2022-12-12 10:00:00' }
  13 +])
  14 +const messageList = ref([
  15 + { id: 1, title: '加班1', date: '2022-12-12 10:00:00' },
  16 + { id: 2, title: '加班2', date: '2022-12-12 10:00:00' },
  17 + { id: 3, title: '加班3', date: '2022-12-12 10:00:00' },
  18 + { id: 4, title: '加班4', date: '2022-12-12 10:00:00' },
  19 + { id: 5, title: '加班5', date: '2022-12-12 10:00:00' }
  20 +])
  21 +const needList = ref([
  22 + { id: 1, title: '审批1', date: '2022-12-12 10:00:00' },
  23 + { id: 2, title: '审批2', date: '2022-12-12 10:00:00' },
  24 + { id: 3, title: '审批3', date: '2022-12-12 10:00:00' },
  25 + { id: 4, title: '审批4', date: '2022-12-12 10:00:00' },
  26 + { id: 5, title: '审批5', date: '2022-12-12 10:00:00' }
  27 +])
  28 +</script>
1 <template> 29 <template>
2 <div class="message"> 30 <div class="message">
3 - <el-popover placement="bottom" :width="310" trigger="click"> 31 + <ElPopover placement="bottom" :width="310" trigger="click">
4 <template #reference> 32 <template #reference>
5 - <el-badge :value="noticeList.length" class="item"> 33 + <ElBadge :value="noticeList.length" class="item">
6 <Icon icon="ep:bell" :size="18" class="cursor-pointer" /> 34 <Icon icon="ep:bell" :size="18" class="cursor-pointer" />
7 - </el-badge> 35 + </ElBadge>
8 </template> 36 </template>
9 - <el-tabs v-model="activeName">  
10 - <el-tab-pane label="通知(5)" name="first"> 37 + <ElTabs v-model="activeName">
  38 + <ElTabPane label="通知(5)" name="notice">
11 <div class="message-list"> 39 <div class="message-list">
12 <template v-for="item in noticeList" :key="item.id"> 40 <template v-for="item in noticeList" :key="item.id">
13 <div class="message-item"> 41 <div class="message-item">
@@ -19,8 +47,8 @@ @@ -19,8 +47,8 @@
19 </div> 47 </div>
20 </template> 48 </template>
21 </div> 49 </div>
22 - </el-tab-pane>  
23 - <el-tab-pane label="消息(0)" name="second"> 50 + </ElTabPane>
  51 + <ElTabPane label="消息(0)" name="message">
24 <div class="message-list"> 52 <div class="message-list">
25 <template v-for="item in messageList" :key="item.id"> 53 <template v-for="item in messageList" :key="item.id">
26 <div class="message-item"> 54 <div class="message-item">
@@ -32,8 +60,8 @@ @@ -32,8 +60,8 @@
32 </div> 60 </div>
33 </template> 61 </template>
34 </div> 62 </div>
35 - </el-tab-pane>  
36 - <el-tab-pane label="代办(0)" name="third"> 63 + </ElTabPane>
  64 + <ElTabPane label="代办(0)" name="need">
37 <div class="message-list"> 65 <div class="message-list">
38 <template v-for="item in needList" :key="item.id"> 66 <template v-for="item in needList" :key="item.id">
39 <div class="message-item"> 67 <div class="message-item">
@@ -45,41 +73,11 @@ @@ -45,41 +73,11 @@
45 </div> 73 </div>
46 </template> 74 </template>
47 </div> 75 </div>
48 - </el-tab-pane>  
49 - </el-tabs>  
50 - </el-popover> 76 + </ElTabPane>
  77 + </ElTabs>
  78 + </ElPopover>
51 </div> 79 </div>
52 </template> 80 </template>
53 -  
54 -<script setup lang="ts">  
55 -import { ref } from 'vue'  
56 -import { ElTabs, ElTabPane, ElPopover, ElBadge } from 'element-plus'  
57 -  
58 -const activeName = ref('first')  
59 -  
60 -const noticeList = ref([  
61 - { id: 1, title: '版本升级1', date: '2022-12-12 10:00:00' },  
62 - { id: 2, title: '版本升级2', date: '2022-12-12 10:00:00' },  
63 - { id: 3, title: '版本升级3', date: '2022-12-12 10:00:00' },  
64 - { id: 4, title: '版本升级4', date: '2022-12-12 10:00:00' },  
65 - { id: 5, title: '版本升级5', date: '2022-12-12 10:00:00' }  
66 -])  
67 -const messageList = ref([  
68 - { id: 1, title: '加班1', date: '2022-12-12 10:00:00' },  
69 - { id: 2, title: '加班2', date: '2022-12-12 10:00:00' },  
70 - { id: 3, title: '加班3', date: '2022-12-12 10:00:00' },  
71 - { id: 4, title: '加班4', date: '2022-12-12 10:00:00' },  
72 - { id: 5, title: '加班5', date: '2022-12-12 10:00:00' }  
73 -])  
74 -const needList = ref([  
75 - { id: 1, title: '审批1', date: '2022-12-12 10:00:00' },  
76 - { id: 2, title: '审批2', date: '2022-12-12 10:00:00' },  
77 - { id: 3, title: '审批3', date: '2022-12-12 10:00:00' },  
78 - { id: 4, title: '审批4', date: '2022-12-12 10:00:00' },  
79 - { id: 5, title: '审批5', date: '2022-12-12 10:00:00' }  
80 -])  
81 -</script>  
82 -  
83 <style scoped lang="scss"> 81 <style scoped lang="scss">
84 .message-empty { 82 .message-empty {
85 display: flex; 83 display: flex;