From aaf7df87009caf6ae7cfa3d2f79d3c7ff7f608a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E7=BA=A2=E4=B8=BD?= <1181930680@qq.com>
Date: Fri, 22 Nov 2024 14:34:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=88=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Header/NotifierProPlus.vue     | 264 +++++-------------
 src/views/system/logger/loginLog/columns.ts   |   2 +-
 src/views/system/logger/operLog/columns.ts    |   2 +-
 3 files changed, 78 insertions(+), 190 deletions(-)

diff --git a/src/layout/components/Header/NotifierProPlus.vue b/src/layout/components/Header/NotifierProPlus.vue
index 2a19707..1d72b04 100644
--- a/src/layout/components/Header/NotifierProPlus.vue
+++ b/src/layout/components/Header/NotifierProPlus.vue
@@ -5,6 +5,7 @@
     :show-arrow="false"
     placement="bottom-end"
     trigger="click"
+    :width="350"
   >
     <template #trigger>
       <n-badge :max="15" :value="badgeValue" class="news-badge">
@@ -13,179 +14,47 @@
         </n-icon>
       </n-badge>
     </template>
-    <n-tabs class="news-table" type="line">
-      <n-tab-pane name="oasis" tab="通知（1）">
-        <n-list>
-          <n-list-item>
-            <template #prefix>
-              <n-avatar
-                :style="{
-                  color: '#fff',
-                  backgroundColor: '#2d8cf0',
-                }"
-                round
-                size="large"
-              >
-                <n-icon size="18">
-                  <MailOutlined />
-                </n-icon>
-              </n-avatar>
-            </template>
-            <n-thing title="约翰.维尔逊回复了你的邮件">
-              <template #description
-                ><span class="text-gray-400">2019-05-08 14:33:18</span></template
-              >
-            </n-thing>
-          </n-list-item>
-          <n-list-item>
-            <template #prefix>
-              <n-avatar
-                :style="{
-                  color: '#fff',
-                  backgroundColor: '#5cdbd3',
-                }"
-                round
-                size="large"
-              >
-                <n-icon size="18">
-                  <FlagOutlined />
-                </n-icon>
-              </n-avatar>
-            </template>
-            <n-thing title="约翰.维廉邀请您参加会议">
-              <template #description
-                ><span class="text-gray-400">2021-08-20 14:33:18</span></template
-              >
-            </n-thing>
-          </n-list-item>
-          <n-list-item>
-            <template #prefix>
-              <n-avatar
-                :style="{
-                  color: '#fff',
-                  backgroundColor: '#ff9c6e',
-                }"
-                round
-                size="large"
-              >
-                <n-icon size="18">
-                  <LikeOutlined />
-                </n-icon>
-              </n-avatar>
-            </template>
-            <n-thing title="罗德里格斯点赞了您的文章">
-              <template #description
-                ><span class="text-gray-400">2021-08-21 15:33:18</span></template
-              >
-            </n-thing>
-          </n-list-item>
-          <template #footer>
-            <div class="flex justify-center">
-              <n-button text>
-                <template #icon>
-                  <n-icon>
-                    <TagsOutlined />
-                  </n-icon>
-                </template>
-                清空通知
-              </n-button>
-            </div>
-          </template>
-        </n-list>
-      </n-tab-pane>
-      <n-tab-pane name="the beatles" tab="关注（2）">
-        <n-list>
-          <n-list-item>
-            <template #prefix>
-              <n-avatar round size="large" :src="schoolboy" />
-            </template>
-            <n-thing title="约翰.维尔逊关注了你">
-              <template #description
-                ><span class="text-gray-400">2019-05-08 14:33:18</span></template
-              >
-            </n-thing>
-          </n-list-item>
-          <n-list-item>
-            <template #prefix>
-              <n-avatar round size="large" :src="schoolboy" />
-            </template>
-            <n-thing title="约翰.维廉关注了你">
-              <template #description
-                ><span class="text-gray-400">2021-08-20 14:33:18</span></template
-              >
-            </n-thing>
-          </n-list-item>
-          <n-list-item>
-            <template #prefix>
-              <n-avatar round size="large" :src="schoolboy" />
-            </template>
-            <n-thing title="罗德里格斯关注了你">
-              <template #description
-                ><span class="text-gray-400">2021-08-21 15:33:18</span></template
-              >
-            </n-thing>
-          </n-list-item>
-          <template #footer>
-            <div class="flex justify-center">
-              <n-button text>
-                <template #icon>
-                  <n-icon>
-                    <TagsOutlined />
-                  </n-icon>
-                </template>
-                清空关注
-              </n-button>
-            </div>
-          </template>
-        </n-list>
-      </n-tab-pane>
-      <n-tab-pane name="jay chou" tab="待办（3）">
-        <n-list>
-          <n-list-item>
-            <n-thing title="技术部约翰.维尔逊申请离职">
-              <template #description
-                ><span class="text-gray-400">请在24小时之前完成</span></template
-              >
-            </n-thing>
-            <template #suffix>
-              <n-tag type="error"> 即将超时</n-tag>
-            </template>
-          </n-list-item>
-          <n-list-item>
-            <n-thing title="统计年后人员和物资">
-              <template #description
-                ><span class="text-gray-400">请在2021-08-31号之前完成</span></template
-              >
-            </n-thing>
-            <template #suffix>
-              <n-tag type="info"> 进行中</n-tag>
-            </template>
-          </n-list-item>
-          <n-list-item>
-            <n-thing title="回访上月全部客户">
-              <template #description
-                ><span class="text-gray-400">请在2021-08-28号之前完成</span></template
-              >
-            </n-thing>
-            <template #suffix>
-              <n-tag> 未开始</n-tag>
-            </template>
-          </n-list-item>
-          <template #footer>
-            <div class="flex justify-center">
-              <n-button text>
-                <template #icon>
-                  <n-icon>
-                    <TagsOutlined />
-                  </n-icon>
-                </template>
-                清空待办
-              </n-button>
-            </div>
-          </template>
-        </n-list>
+    <n-tabs
+      v-model="activeName"
+      class="my-tabs"
+      @update:value="handleClick"
+      justify-content="space-between"
+    >
+      <n-tab-pane
+        v-for="(item, index) in messageTypeList"
+        :key="index"
+        :tab="item.name"
+        :name="item.value"
+      >
       </n-tab-pane>
     </n-tabs>
+    <n-list>
+      <n-list-item v-for="(item, index) in messageList" :key="index">
+        <n-thing :title="item.title">
+          <template #description
+            ><span class="text-gray-400">{{ item.createTime }}</span></template
+          >
+        </n-thing>
+      </n-list-item>
+      <template #footer>
+        <div class="flex justify-between">
+          <n-button text>
+            <template #icon>
+              <n-icon>
+                <TagsOutlined />
+              </n-icon>
+            </template>
+            清空通知
+          </n-button>
+          <n-button text @click="router.push('/dashboard/message')">
+            <template #icon>
+              <n-icon class="mr-2"><MoreOutlined /></n-icon>
+            </template>
+            查看更多
+          </n-button>
+        </div>
+      </template>
+    </n-list>
   </n-popover>
   <template v-else>
     <n-icon size="18" @click="notifierProClick">
@@ -195,31 +64,50 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
-  import {
-    BellOutlined,
-    FlagOutlined,
-    LikeOutlined,
-    MailOutlined,
-    TagsOutlined,
-  } from '@vicons/antd';
-  import schoolboy from '@/assets/images/schoolboy.png';
-
-  import { useMessage } from 'naive-ui';
-
-  const message = useMessage();
+  import { ref, onMounted } from 'vue';
+  import { MoreOutlined, BellOutlined, TagsOutlined } from '@vicons/antd';
+  import { useRouter } from 'vue-router';
+  import { getMessageProfile, setRead } from '@/api/dashboard/message';
+  const router = useRouter();
+  const messageTypeList = ref([
+    {
+      name: '系统通知',
+      value: 1,
+    },
+    {
+      name: '用户私信',
+      value: 2,
+    },
+    {
+      name: '代办事项',
+      value: 3,
+    },
+  ]);
 
   const badgeValue = ref(28);
+  const activeName = ref(1);
+  const messageList = ref([]);
 
-  function notifierProClick() {
-    message.warning('还没有新消息呢！');
-  }
+  const handleClick = async (e) => {
+    activeName.value = e;
+    const res = await getMessageProfile({ type: activeName.value, pageNo: 1, pageSize: 10 });
+    messageList.value = res.records ? res.records : [];
+  };
+  onMounted(async () => {
+    const res = await getMessageProfile({ type: activeName.value, pageNo: 1, pageSize: 10 });
+    messageList.value = res.records ? res.records : [];
+  });
 </script>
-
 <style lang="less" scoped>
   .news-badge {
     :deep(.n-badge-sup) {
       top: -10px;
     }
   }
+  .c-gray {
+    color: #dddddd;
+  }
+  .border-line {
+    border-bottom: 1px solid #dddddd;
+  }
 </style>
diff --git a/src/views/system/logger/loginLog/columns.ts b/src/views/system/logger/loginLog/columns.ts
index a59154b..018a201 100644
--- a/src/views/system/logger/loginLog/columns.ts
+++ b/src/views/system/logger/loginLog/columns.ts
@@ -75,7 +75,7 @@ export const columns = [
     },
   },
   {
-    label: '操作来源',
+    title: '操作来源',
     align: 'left',
     render(record) {
       return h('div', [
diff --git a/src/views/system/logger/operLog/columns.ts b/src/views/system/logger/operLog/columns.ts
index ead2b2b..740f011 100644
--- a/src/views/system/logger/operLog/columns.ts
+++ b/src/views/system/logger/operLog/columns.ts
@@ -76,7 +76,7 @@ export const columns = [
     },
   },
   {
-    label: '操作来源',
+    title: '操作来源',
     align: 'left',
     render(record) {
       return h('div', [