fix: 修改系统公告

yangyin

2024-07-02 01d58158c1b257dd7941600cbf00c234444b70ee

 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>