|
|
@@ -1,46 +1,59 @@
|
|
|
<!-- 系统公告 -->
|
|
|
<template>
|
|
|
<app-drawer class="app-notice" title="系统公告" :width="800" v-model:show="show">
|
|
|
- <el-tabs class="app-notice__tabs" v-model="selectedTab" @tab-change="tabChange">
|
|
|
- <el-tab-pane label="公告" name="notice" />
|
|
|
- <el-tab-pane label="消息" name="message" />
|
|
|
- </el-tabs>
|
|
|
- <el-tabs class="app-notice__pane" tab-position="left" v-model="activeId" @tab-change="collapseChange"
|
|
|
- v-if="dataList.length">
|
|
|
- <template v-for="(item, index) in dataList" :key="index">
|
|
|
- <el-tab-pane :name="item.autoid">
|
|
|
- <template #label>
|
|
|
- <el-badge :is-dot="!item.readed" style="margin-right: 8px;" />
|
|
|
- <span>{{ formatDate(item.createtime, 'MM/DD HH:mm') }}</span>
|
|
|
- </template>
|
|
|
- <div style="padding:0 28px;">
|
|
|
+ <app-view>
|
|
|
+ <template #header>
|
|
|
+ <el-tabs class="app-notice-tabs" v-model="selectedTab" @tab-change="tabChange">
|
|
|
+ <el-tab-pane label="公告" name="notice" />
|
|
|
+ <el-tab-pane label="消息" name="message" />
|
|
|
+ </el-tabs>
|
|
|
+ </template>
|
|
|
+ <div class="app-notice-pane" v-if="tableList.length">
|
|
|
+ <el-scrollbar class="app-notice-pane__item" :max-height="400">
|
|
|
+ <ul v-infinite-scroll="loadMore">
|
|
|
+ <template v-for="(item, index) in tableList" :key="index">
|
|
|
+ <li :class="index === active ? 'is-active' : ''" @click="collapseChange(index)">
|
|
|
+ <el-badge :hidden="item.readed" is-dot />
|
|
|
+ <span>{{ formatDate(item.createtime, 'MM/DD HH:mm') }}</span>
|
|
|
+ </li>
|
|
|
+ </template>
|
|
|
+ </ul>
|
|
|
+ </el-scrollbar>
|
|
|
+ <el-scrollbar class="app-notice-pane__content" :height="400">
|
|
|
+ <section style="padding:0 28px;" v-if="selectedItem">
|
|
|
<h4 style="display: flex; flex-direction: column;">
|
|
|
- <span style="font-weight: bold;">{{ item.title }}</span>
|
|
|
+ <span style="font-weight: bold;">{{ selectedItem.title }}</span>
|
|
|
<span style="font-size: 12px; color: #999;margin: 8px 0;">
|
|
|
- {{ formatDate(item.createtime) }}
|
|
|
+ {{ formatDate(selectedItem.createtime) }}
|
|
|
</span>
|
|
|
</h4>
|
|
|
- <div style="line-height: 24px;color: #7a8a94;" v-html="formatHtmlString(item.content)"></div>
|
|
|
- </div>
|
|
|
- </el-tab-pane>
|
|
|
- </template>
|
|
|
- </el-tabs>
|
|
|
- <el-empty v-else />
|
|
|
+ <div style="line-height: 24px;color: #7a8a94;" v-html="formatHtmlString(selectedItem.content)">
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ <el-empty v-else />
|
|
|
+ </app-view>
|
|
|
</app-drawer>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { shallowRef, onMounted } from 'vue'
|
|
|
+import { shallowRef, onMounted, computed } from 'vue'
|
|
|
import { formatDate, formatHtmlString } from '@/filters'
|
|
|
+import { useLocalPagination } from '@/hooks/pagination'
|
|
|
import { useNoticeStore } from '@/stores'
|
|
|
import AppDrawer from '@pc/components/base/drawer/index.vue'
|
|
|
|
|
|
const noticeStore = useNoticeStore()
|
|
|
const show = shallowRef(true)
|
|
|
const selectedTab = shallowRef('notice')
|
|
|
-const activeId = shallowRef(0)
|
|
|
+const active = shallowRef(-1)
|
|
|
const dataList = shallowRef<Model.NoticeRsp[]>([])
|
|
|
|
|
|
+const { tableList, initTableData, loadMore } = useLocalPagination<Model.NoticeRsp>()
|
|
|
+
|
|
|
+const selectedItem = computed(() => dataList.value[active.value])
|
|
|
+
|
|
|
const tabChange = (tab: string) => {
|
|
|
switch (tab) {
|
|
|
case 'notice': {
|
|
|
@@ -52,15 +65,17 @@ const tabChange = (tab: string) => {
|
|
|
break
|
|
|
}
|
|
|
}
|
|
|
- const [firstItem] = dataList.value
|
|
|
- if (firstItem) {
|
|
|
- activeId.value = firstItem.autoid
|
|
|
- collapseChange(activeId.value)
|
|
|
+ initTableData(dataList.value)
|
|
|
+ if (tableList.value.length) {
|
|
|
+ active.value = 0
|
|
|
+ collapseChange(0)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const collapseChange = (id: number) => {
|
|
|
- noticeStore.updateNoticeReaded(id)
|
|
|
+const collapseChange = (index: number) => {
|
|
|
+ const item = tableList.value[index]
|
|
|
+ active.value = index
|
|
|
+ noticeStore.updateNoticeReaded(item.autoid)
|
|
|
}
|
|
|
|
|
|
onMounted(() => tabChange(selectedTab.value))
|