GTsoft/ruoyi-plus-soybean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(projects): 系统消息组件代码优化

Browse Source
This commit is contained in:
燕博文 2022-06-17 12:49:53 +08:00
parent afa0134fdd
commit 9518372fe0
2 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/layouts/common/GlobalHeader/components/MessageList.vue
View File

@ -2,10 +2,10 @@
<n-scrollbar class="max-h-360px"> <n-scrollbar class="max-h-360px">
<n-list> <n-list>
<n-list-item <n-list-item
v-for="item in list" v-for="(item, index) in list"
:key="item.id" :key="item.id"
class="cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-dark" class="cursor-pointer hover:bg-[#f6f6f6] dark:hover:bg-dark"
@click="handleRead(item)" @click="handleRead(index)"
> >
<n-thing class="px-15px" :class="{ 'opacity-30': item.isRead }"> <n-thing class="px-15px" :class="{ 'opacity-30': item.isRead }">
<template #avatar> <template #avatar>
@ -44,14 +44,19 @@ interface Props {
descRows?: number; descRows?: number;
} }
interface Emits {
(e: 'read', val: number): void;
}
withDefaults(defineProps<Props>(), { withDefaults(defineProps<Props>(), {
list: () => [], list: () => [],
titleRows: 1, titleRows: 1,
descRows: 2 descRows: 2
}); });
function handleRead(item: Message.List) { const emit = defineEmits<Emits>();
// eslint-disable-next-line no-param-reassign
item.isRead = true; function handleRead(index: number) {
emit('read', index);
} }
</script> </script>

36
src/layouts/common/GlobalHeader/components/SystemMessage.vue
View File

@ -31,18 +31,14 @@
:empty="item.list.length === 0" :empty="item.list.length === 0"
placeholder-class="bg-$n-color transition-background-color duration-300 ease-in-out" placeholder-class="bg-$n-color transition-background-color duration-300 ease-in-out"
> >
<message-list :list="item.list" /> <message-list :list="item.list" @read="handleRead" />
</loading-empty-wrapper> </loading-empty-wrapper>
</n-tab-pane> </n-tab-pane>
</n-tabs> </n-tabs>
<div v-if="tabData[currentTab].list.length > 0" class="flex cursor-pointer border-t border-$n-divider-color"> <div v-if="showAction" class="flex cursor-pointer border-t border-$n-divider-color">
<div class="py-10px text-center flex-1" @click="handleClear(currentTab)">清空</div> <div class="py-10px text-center flex-1" @click="handleClear">清空</div>
<div class="py-10px text-center flex-1 border-l border-$n-divider-color" @click="handleAllRead(currentTab)"> <div class="py-10px text-center flex-1 border-l border-$n-divider-color" @click="handleAllRead">全部已读</div>
全部已读 <div class="py-10px text-center flex-1 border-l border-$n-divider-color" @click="handleLoadMore">查看更多</div>
</div>
<div class="py-10px text-center flex-1 border-l border-$n-divider-color" @click="handleLoadMore(currentTab)">
查看更多
</div>
</div> </div>
</n-popover> </n-popover>
</template> </template>
@ -53,9 +49,9 @@ import { useThemeStore } from '@/store';
import { useBoolean } from '@/hooks'; import { useBoolean } from '@/hooks';
import MessageList from './MessageList.vue'; import MessageList from './MessageList.vue';
const currentTab = ref(0);
const theme = useThemeStore(); const theme = useThemeStore();
const { bool: loading, setBool: setLoading } = useBoolean(); const { bool: loading, setBool: setLoading } = useBoolean();
const currentTab = ref(0);
const tabData = ref<Message.Tab[]>([ const tabData = ref<Message.Tab[]>([
{ {
key: 1, key: 1,
@ -185,19 +181,25 @@ const count = computed(() => {
}, 0); }, 0);
}); });
function handleClear(index: number) { const showAction = computed(() => tabData.value[currentTab.value].list.length > 0);
tabData.value[index].list = [];
function handleRead(index: number) {
tabData.value[currentTab.value].list[index].isRead = true;
} }
function handleAllRead(index: number) { function handleAllRead() {
tabData.value[index].list.map(item => Object.assign(item, { isRead: true })); tabData.value[currentTab.value].list.map(item => Object.assign(item, { isRead: true }));
} }
function handleLoadMore(index: number) { function handleClear() {
const { list } = tabData.value[index]; tabData.value[currentTab.value].list = [];
}
function handleLoadMore() {
const { list } = tabData.value[currentTab.value];
setLoading(true); setLoading(true);
setTimeout(() => { setTimeout(() => {
list.push(...tabData.value[index].list); list.push(...tabData.value[currentTab.value].list);
setLoading(false); setLoading(false);
}, 1000); }, 1000);
} }