From 01d58158c1b257dd7941600cbf00c234444b70ee Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期二, 02 七月 2024 12:17:50 +0800
Subject: [PATCH] fix: 修改系统公告
---
src/layout/component/header/Header.vue | 68 ++++++++++++++++++++++++++++++++--
1 files changed, 64 insertions(+), 4 deletions(-)
diff --git a/src/layout/component/header/Header.vue b/src/layout/component/header/Header.vue
index f1cea30..daa62d6 100644
--- a/src/layout/component/header/Header.vue
+++ b/src/layout/component/header/Header.vue
@@ -18,15 +18,36 @@
<span>鏈�鏂板叕鍛�</span>
</div>
<div class="notice_box_body">
- <div class="notice_item" v-for="item in state.announcementList" :key="item.notify_id">
+ <div
+ class="notice_item"
+ v-for="item in state.announcementList"
+ :key="item.notify_id"
+ @click="announcementContentClick(item)"
+ >
<p>{{ item.notify_message }}</p>
- <p class="text-right mr-[23px]">
+ <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"
+ :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 +57,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).reverse().slice(0, 5);
};
const routerMeta = computed(() => router.currentRoute.value.meta);
const handleAnnouncementClick = () => {
@@ -50,6 +77,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();
@@ -115,14 +155,34 @@
.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;
}
}
}
}
+:deep(.el-dialog__header) {
+ padding: 20px 20px 10px;
+ background: none;
+ .el-dialog__headerbtn .el-dialog__close {
+ color: #909399;
+ }
+}
+.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