From 000a3de9ab2dca060af1bd0d828c0a2adae6a047 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 19 八月 2024 14:44:17 +0800
Subject: [PATCH] select last
---
src/layout/component/header/Header.vue | 91 ++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 84 insertions(+), 7 deletions(-)
diff --git a/src/layout/component/header/Header.vue b/src/layout/component/header/Header.vue
index f1cea30..23f5564 100644
--- a/src/layout/component/header/Header.vue
+++ b/src/layout/component/header/Header.vue
@@ -18,15 +18,41 @@
<span>鏈�鏂板叕鍛�</span>
</div>
<div class="notice_box_body">
- <div class="notice_item" v-for="item in state.announcementList" :key="item.notify_id">
- <p>{{ item.notify_message }}</p>
- <p class="text-right mr-[23px]">
+ <div
+ class="notice_item"
+ v-for="item in state.announcementList"
+ :key="item.notify_id"
+ @click="announcementContentClick(item)"
+ >
+ <div class="flex items-center">
+ <p class="set-circle"></p>
+ <p>{{ item.notify_message }}</p>
+ </div>
+
+ <p class="text-right mr-[19px]">
<span>{{ item.notify_time }}</span>
</p>
</div>
</div>
</div>
</div>
+ <el-dialog
+ v-model="state.isAnnouncementDialog"
+ width="500"
+ :before-close="handleCloseAnnouncement"
+ :modal="false"
+ title="鍏憡鍐呭"
+ :align-center="true"
+ >
+ <div class="set-content">
+ <span class="notice-content">{{ state.announcementContent }}</span>
+ </div>
+ <template #footer>
+ <p class="text-right text-[#555]">
+ <span>{{ state.announcementTime }}</span>
+ </p>
+ </template>
+ </el-dialog>
</div>
</template>
@@ -36,12 +62,18 @@
import router from '/@/router';
let state = reactive({
isShowAnnouncement: false,
+ isAnnouncementDialog: false,
announcementList: [],
+ announcementContent: '',
+ announcementTime: '',
});
const getSystemNotify = async () => {
const res = await systemNotifyList();
- state.announcementList = res.messages || [];
+ res.messages?.forEach((element) => {
+ element.notify_time = element.notify_time.slice(0, 10);
+ });
+ state.announcementList = res.messages?.sort(sortData).slice(0, 5) ??[];
};
const routerMeta = computed(() => router.currentRoute.value.meta);
const handleAnnouncementClick = () => {
@@ -50,6 +82,19 @@
const goBack = () => {
router.back();
+};
+//鏍规嵁鎸囧畾瀛楁 瑙勫垯鎺掑簭 杩欓噷鏄幏鍙栨椂闂寸殑鏃堕棿鎴崇劧鍚庢瘮杈�
+function sortData(a, b) {
+ return new Date(b.notify_time).getTime() - new Date(a.notify_time).getTime();
+}
+//鍏憡鍐呭鐐瑰嚮浜嬩欢
+const announcementContentClick = (item) => {
+ state.announcementContent = item.notify_message;
+ state.announcementTime = item.notify_time.slice(0, 10);
+ state.isAnnouncementDialog = true;
+};
+const handleCloseAnnouncement = () => {
+ state.isAnnouncementDialog = false;
};
onMounted(() => {
getSystemNotify();
@@ -78,7 +123,8 @@
}
.notice_box_show {
width: 300px !important;
- height: 400px !important;
+ height: 470px !important;
+ // height: 100% !important;
padding: 0 20px 10px;
::-webkit-scrollbar {
height: 0;
@@ -111,18 +157,49 @@
}
&_body {
height: calc(100% - 40px);
- overflow: auto;
+ // overflow: auto;
.notice_item {
cursor: pointer;
padding: 10px;
- width: 280px;
+ width: 272px;
border-top: 1px solid #efefef;
color: #767a97;
position: relative;
+ box-sizing: border-box;
line-height: 19px;
font-size: 12px;
+ .set-circle {
+ width: 3px;
+ height: 3px;
+ position: absolute;
+ top: 17px;
+ left: 0;
+ transform: scale(0.8) translate(50%, -50%);
+ display: block;
+ padding: 2px;
+ min-width: 3px;
+ min-height: 3px;
+ text-align: center;
+ border-radius: 50%;
+ background: #ff423d;
+ color: #fff;
+ font-size: 12px;
+ }
}
}
}
}
+
+.set-content {
+ padding: 0px 20px;
+ .notice-content {
+ white-space: pre-wrap;
+ font-size: 14px;
+ }
+}
+:deep(.el-dialog__footer) {
+ border-top: unset;
+ padding: 10px 20px 20px;
+ box-sizing: border-box;
+}
</style>
--
Gitblit v1.9.3