消息
This commit is contained in:
parent
3c28c19b6f
commit
aaf7df8700
@ -5,6 +5,7 @@
|
|||||||
:show-arrow="false"
|
:show-arrow="false"
|
||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
trigger="click"
|
trigger="click"
|
||||||
|
:width="350"
|
||||||
>
|
>
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<n-badge :max="15" :value="badgeValue" class="news-badge">
|
<n-badge :max="15" :value="badgeValue" class="news-badge">
|
||||||
@ -13,74 +14,30 @@
|
|||||||
</n-icon>
|
</n-icon>
|
||||||
</n-badge>
|
</n-badge>
|
||||||
</template>
|
</template>
|
||||||
<n-tabs class="news-table" type="line">
|
<n-tabs
|
||||||
<n-tab-pane name="oasis" tab="通知（1）">
|
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>
|
||||||
<n-list-item>
|
<n-list-item v-for="(item, index) in messageList" :key="index">
|
||||||
<template #prefix>
|
<n-thing :title="item.title">
|
||||||
<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
|
<template #description
|
||||||
><span class="text-gray-400">2019-05-08 14:33:18</span></template
|
><span class="text-gray-400">{{ item.createTime }}</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-thing>
|
||||||
</n-list-item>
|
</n-list-item>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-between">
|
||||||
<n-button text>
|
<n-button text>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<n-icon>
|
<n-icon>
|
||||||
@ -89,103 +46,15 @@
|
|||||||
</template>
|
</template>
|
||||||
清空通知
|
清空通知
|
||||||
</n-button>
|
</n-button>
|
||||||
</div>
|
<n-button text @click="router.push('/dashboard/message')">
|
||||||
</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>
|
<template #icon>
|
||||||
<n-icon>
|
<n-icon class="mr-2"><MoreOutlined /></n-icon>
|
||||||
<TagsOutlined />
|
|
||||||
</n-icon>
|
|
||||||
</template>
|
</template>
|
||||||
清空关注
|
查看更多
|
||||||
</n-button>
|
</n-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</n-list>
|
</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-tab-pane>
|
|
||||||
</n-tabs>
|
|
||||||
</n-popover>
|
</n-popover>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<n-icon size="18" @click="notifierProClick">
|
<n-icon size="18" @click="notifierProClick">
|
||||||
@ -195,31 +64,50 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
import {
|
import { MoreOutlined, BellOutlined, TagsOutlined } from '@vicons/antd';
|
||||||
BellOutlined,
|
import { useRouter } from 'vue-router';
|
||||||
FlagOutlined,
|
import { getMessageProfile, setRead } from '@/api/dashboard/message';
|
||||||
LikeOutlined,
|
const router = useRouter();
|
||||||
MailOutlined,
|
const messageTypeList = ref([
|
||||||
TagsOutlined,
|
{
|
||||||
} from '@vicons/antd';
|
name: '系统通知',
|
||||||
import schoolboy from '@/assets/images/schoolboy.png';
|
value: 1,
|
||||||
|
},
|
||||||
import { useMessage } from 'naive-ui';
|
{
|
||||||
|
name: '用户私信',
|
||||||
const message = useMessage();
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '代办事项',
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
const badgeValue = ref(28);
|
const badgeValue = ref(28);
|
||||||
|
const activeName = ref(1);
|
||||||
|
const messageList = ref([]);
|
||||||
|
|
||||||
function notifierProClick() {
|
const handleClick = async (e) => {
|
||||||
message.warning('还没有新消息呢！');
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.news-badge {
|
.news-badge {
|
||||||
:deep(.n-badge-sup) {
|
:deep(.n-badge-sup) {
|
||||||
top: -10px;
|
top: -10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.c-gray {
|
||||||
|
color: #dddddd;
|
||||||
|
}
|
||||||
|
.border-line {
|
||||||
|
border-bottom: 1px solid #dddddd;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -75,7 +75,7 @@ export const columns = [
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '操作来源',
|
title: '操作来源',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
render(record) {
|
render(record) {
|
||||||
return h('div', [
|
return h('div', [
|
||||||
|
|||||||
@ -76,7 +76,7 @@ export const columns = [
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '操作来源',
|
title: '操作来源',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
render(record) {
|
render(record) {
|
||||||
return h('div', [
|
return h('div', [
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user