消息
This commit is contained in:
parent
3c28c19b6f
commit
aaf7df8700
@ -5,6 +5,7 @@
|
||||
:show-arrow="false"
|
||||
placement="bottom-end"
|
||||
trigger="click"
|
||||
:width="350"
|
||||
>
|
||||
<template #trigger>
|
||||
<n-badge :max="15" :value="badgeValue" class="news-badge">
|
||||
@ -13,179 +14,47 @@
|
||||
</n-icon>
|
||||
</n-badge>
|
||||
</template>
|
||||
<n-tabs class="news-table" type="line">
|
||||
<n-tab-pane name="oasis" tab="通知（1）">
|
||||
<n-list>
|
||||
<n-list-item>
|
||||
<template #prefix>
|
||||
<n-avatar
|
||||
:style="{
|
||||
color: '#fff',
|
||||
backgroundColor: '#2d8cf0',
|
||||
}"
|
||||
round
|
||||
size="large"
|
||||
>
|
||||
<n-icon size="18">
|
||||
<MailOutlined />
|
||||
</n-icon>
|
||||
</n-avatar>
|
||||
</template>
|
||||
<n-thing title="约翰.维尔逊回复了你的邮件">
|
||||
<template #description
|
||||
><span class="text-gray-400">2019-05-08 14:33:18</span></template
|
||||
>
|
||||
</n-thing>
|
||||
</n-list-item>
|
||||
<n-list-item>
|
||||
<template #prefix>
|
||||
<n-avatar
|
||||
:style="{
|
||||
color: '#fff',
|
||||
backgroundColor: '#5cdbd3',
|
||||
}"
|
||||
round
|
||||
size="large"
|
||||
>
|
||||
<n-icon size="18">
|
||||
<FlagOutlined />
|
||||
</n-icon>
|
||||
</n-avatar>
|
||||
</template>
|
||||
<n-thing title="约翰.维廉邀请您参加会议">
|
||||
<template #description
|
||||
><span class="text-gray-400">2021-08-20 14:33:18</span></template
|
||||
>
|
||||
</n-thing>
|
||||
</n-list-item>
|
||||
<n-list-item>
|
||||
<template #prefix>
|
||||
<n-avatar
|
||||
:style="{
|
||||
color: '#fff',
|
||||
backgroundColor: '#ff9c6e',
|
||||
}"
|
||||
round
|
||||
size="large"
|
||||
>
|
||||
<n-icon size="18">
|
||||
<LikeOutlined />
|
||||
</n-icon>
|
||||
</n-avatar>
|
||||
</template>
|
||||
<n-thing title="罗德里格斯点赞了您的文章">
|
||||
<template #description
|
||||
><span class="text-gray-400">2021-08-21 15:33:18</span></template
|
||||
>
|
||||
</n-thing>
|
||||
</n-list-item>
|
||||
<template #footer>
|
||||
<div class="flex justify-center">
|
||||
<n-button text>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<TagsOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
清空通知
|
||||
</n-button>
|
||||
</div>
|
||||
</template>
|
||||
</n-list>
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="the beatles" tab="关注（2）">
|
||||
<n-list>
|
||||
<n-list-item>
|
||||
<template #prefix>
|
||||
<n-avatar round size="large" :src="schoolboy" />
|
||||
</template>
|
||||
<n-thing title="约翰.维尔逊关注了你">
|
||||
<template #description
|
||||
><span class="text-gray-400">2019-05-08 14:33:18</span></template
|
||||
>
|
||||
</n-thing>
|
||||
</n-list-item>
|
||||
<n-list-item>
|
||||
<template #prefix>
|
||||
<n-avatar round size="large" :src="schoolboy" />
|
||||
</template>
|
||||
<n-thing title="约翰.维廉关注了你">
|
||||
<template #description
|
||||
><span class="text-gray-400">2021-08-20 14:33:18</span></template
|
||||
>
|
||||
</n-thing>
|
||||
</n-list-item>
|
||||
<n-list-item>
|
||||
<template #prefix>
|
||||
<n-avatar round size="large" :src="schoolboy" />
|
||||
</template>
|
||||
<n-thing title="罗德里格斯关注了你">
|
||||
<template #description
|
||||
><span class="text-gray-400">2021-08-21 15:33:18</span></template
|
||||
>
|
||||
</n-thing>
|
||||
</n-list-item>
|
||||
<template #footer>
|
||||
<div class="flex justify-center">
|
||||
<n-button text>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<TagsOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
清空关注
|
||||
</n-button>
|
||||
</div>
|
||||
</template>
|
||||
</n-list>
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="jay chou" tab="待办（3）">
|
||||
<n-list>
|
||||
<n-list-item>
|
||||
<n-thing title="技术部约翰.维尔逊申请离职">
|
||||
<template #description
|
||||
><span class="text-gray-400">请在24小时之前完成</span></template
|
||||
>
|
||||
</n-thing>
|
||||
<template #suffix>
|
||||
<n-tag type="error"> 即将超时</n-tag>
|
||||
</template>
|
||||
</n-list-item>
|
||||
<n-list-item>
|
||||
<n-thing title="统计年后人员和物资">
|
||||
<template #description
|
||||
><span class="text-gray-400">请在2021-08-31号之前完成</span></template
|
||||
>
|
||||
</n-thing>
|
||||
<template #suffix>
|
||||
<n-tag type="info"> 进行中</n-tag>
|
||||
</template>
|
||||
</n-list-item>
|
||||
<n-list-item>
|
||||
<n-thing title="回访上月全部客户">
|
||||
<template #description
|
||||
><span class="text-gray-400">请在2021-08-28号之前完成</span></template
|
||||
>
|
||||
</n-thing>
|
||||
<template #suffix>
|
||||
<n-tag> 未开始</n-tag>
|
||||
</template>
|
||||
</n-list-item>
|
||||
<template #footer>
|
||||
<div class="flex justify-center">
|
||||
<n-button text>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<TagsOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
清空待办
|
||||
</n-button>
|
||||
</div>
|
||||
</template>
|
||||
</n-list>
|
||||
<n-tabs
|
||||
v-model="activeName"
|
||||
class="my-tabs"
|
||||
@update:value="handleClick"
|
||||
justify-content="space-between"
|
||||
>
|
||||
<n-tab-pane
|
||||
v-for="(item, index) in messageTypeList"
|
||||
:key="index"
|
||||
:tab="item.name"
|
||||
:name="item.value"
|
||||
>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
<n-list>
|
||||
<n-list-item v-for="(item, index) in messageList" :key="index">
|
||||
<n-thing :title="item.title">
|
||||
<template #description
|
||||
><span class="text-gray-400">{{ item.createTime }}</span></template
|
||||
>
|
||||
</n-thing>
|
||||
</n-list-item>
|
||||
<template #footer>
|
||||
<div class="flex justify-between">
|
||||
<n-button text>
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<TagsOutlined />
|
||||
</n-icon>
|
||||
</template>
|
||||
清空通知
|
||||
</n-button>
|
||||
<n-button text @click="router.push('/dashboard/message')">
|
||||
<template #icon>
|
||||
<n-icon class="mr-2"><MoreOutlined /></n-icon>
|
||||
</template>
|
||||
查看更多
|
||||
</n-button>
|
||||
</div>
|
||||
</template>
|
||||
</n-list>
|
||||
</n-popover>
|
||||
<template v-else>
|
||||
<n-icon size="18" @click="notifierProClick">
|
||||
@ -195,31 +64,50 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
BellOutlined,
|
||||
FlagOutlined,
|
||||
LikeOutlined,
|
||||
MailOutlined,
|
||||
TagsOutlined,
|
||||
} from '@vicons/antd';
|
||||
import schoolboy from '@/assets/images/schoolboy.png';
|
||||
|
||||
import { useMessage } from 'naive-ui';
|
||||
|
||||
const message = useMessage();
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { MoreOutlined, BellOutlined, TagsOutlined } from '@vicons/antd';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getMessageProfile, setRead } from '@/api/dashboard/message';
|
||||
const router = useRouter();
|
||||
const messageTypeList = ref([
|
||||
{
|
||||
name: '系统通知',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
name: '用户私信',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
name: '代办事项',
|
||||
value: 3,
|
||||
},
|
||||
]);
|
||||
|
||||
const badgeValue = ref(28);
|
||||
const activeName = ref(1);
|
||||
const messageList = ref([]);
|
||||
|
||||
function notifierProClick() {
|
||||
message.warning('还没有新消息呢！');
|
||||
}
|
||||
const handleClick = async (e) => {
|
||||
activeName.value = e;
|
||||
const res = await getMessageProfile({ type: activeName.value, pageNo: 1, pageSize: 10 });
|
||||
messageList.value = res.records ? res.records : [];
|
||||
};
|
||||
onMounted(async () => {
|
||||
const res = await getMessageProfile({ type: activeName.value, pageNo: 1, pageSize: 10 });
|
||||
messageList.value = res.records ? res.records : [];
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.news-badge {
|
||||
:deep(.n-badge-sup) {
|
||||
top: -10px;
|
||||
}
|
||||
}
|
||||
.c-gray {
|
||||
color: #dddddd;
|
||||
}
|
||||
.border-line {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -75,7 +75,7 @@ export const columns = [
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '操作来源',
|
||||
title: '操作来源',
|
||||
align: 'left',
|
||||
render(record) {
|
||||
return h('div', [
|
||||
|
||||
@ -76,7 +76,7 @@ export const columns = [
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '操作来源',
|
||||
title: '操作来源',
|
||||
align: 'left',
|
||||
render(record) {
|
||||
return h('div', [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user