Initial commit
This commit is contained in:
南宁网宿科技
@@ -0,0 +1,315 @@
|
||||
<!-- 顶栏消息通知 -->
|
||||
<template>
|
||||
<a-dropdown
|
||||
v-model:visible="visible"
|
||||
placement="bottom"
|
||||
:trigger="['click']"
|
||||
:overlay-style="{ padding: '0 10px' }"
|
||||
>
|
||||
<a-badge :count="unreadNum" class="ele-notice-trigger" :offset="[6, 4]">
|
||||
<bell-outlined style="padding: 8px 0" />
|
||||
</a-badge>
|
||||
<template #overlay>
|
||||
<div class="ant-dropdown-menu ele-notice-pop">
|
||||
<div @click.stop="">
|
||||
<a-tabs v-model:active-key="active" :centered="true">
|
||||
<a-tab-pane key="notice" :tab="noticeTitle">
|
||||
<a-list item-layout="horizontal" :data-source="notice">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<a-list-item-meta
|
||||
@click="openUrl('/user/notice?type=notice')"
|
||||
:title="item.title"
|
||||
:description="timeAgo(item.createTime)"
|
||||
>
|
||||
<template #avatar>
|
||||
<a-avatar :style="{ background: item.color }">
|
||||
<template #icon>
|
||||
<component :is="item.icon" />
|
||||
</template>
|
||||
</a-avatar>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<div v-if="notice.length" class="ele-cell ele-notice-actions">
|
||||
<div class="ele-cell-content" @click="clearNotice">
|
||||
清空通知
|
||||
</div>
|
||||
<a-divider type="vertical" />
|
||||
<router-link
|
||||
to="/user/notice?type=notice"
|
||||
class="ele-cell-content"
|
||||
>
|
||||
查看更多
|
||||
</router-link>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="letter" :tab="letterTitle">
|
||||
<a-list item-layout="horizontal" :data-source="letter">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<a-list-item-meta
|
||||
:title="item.title"
|
||||
@click="openUrl('/user/task')"
|
||||
>
|
||||
<template #avatar>
|
||||
<a-avatar :src="item.icon" />
|
||||
</template>
|
||||
<template #description>
|
||||
<div>{{ item.content }}</div>
|
||||
<div>{{ timeAgo(item.createTime) }}</div>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<div v-if="letter.length" class="ele-cell ele-notice-actions">
|
||||
<div class="ele-cell-content" @click="clearLetter">
|
||||
清空私信
|
||||
</div>
|
||||
<a-divider type="vertical" />
|
||||
<router-link
|
||||
to="/user/notice?type=letter"
|
||||
class="ele-cell-content"
|
||||
>
|
||||
查看更多
|
||||
</router-link>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="todo" :tab="todoTitle">
|
||||
<a-list item-layout="horizontal" :data-source="todo">
|
||||
<template #renderItem="{ item }">
|
||||
<a-list-item>
|
||||
<a-list-item-meta
|
||||
:description="`${item.content} ${timeAgo(
|
||||
item.createTime
|
||||
)}`"
|
||||
@click="openUrl('/user/task')"
|
||||
>
|
||||
<template #title>
|
||||
<div class="ele-cell">
|
||||
<div class="ele-cell-content">{{ item.title }}</div>
|
||||
<template
|
||||
v-for="(d, index) in taskProgress"
|
||||
:key="index"
|
||||
>
|
||||
<a-tag v-if="Number(d.value) === item.progress">
|
||||
{{ d.label }}
|
||||
</a-tag>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</template>
|
||||
</a-list>
|
||||
<div v-if="todo.length" class="ele-cell ele-notice-actions">
|
||||
<div class="ele-cell-content" @click="clearTodo">
|
||||
清空待办
|
||||
</div>
|
||||
<a-divider type="vertical" />
|
||||
<router-link
|
||||
to="/user/notice?type=todo"
|
||||
class="ele-cell-content"
|
||||
>
|
||||
查看更多
|
||||
</router-link>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import {
|
||||
getUnReadNum,
|
||||
pageLetters,
|
||||
pageNotices,
|
||||
pageTodos
|
||||
} from '@/api/user/message';
|
||||
import { getDictionaryOptions, openUrl } from '@/utils/common';
|
||||
import { timeAgo } from 'ele-admin-pro';
|
||||
|
||||
// 是否显示
|
||||
const visible = ref<boolean>(false);
|
||||
// 选项卡选中
|
||||
const active = ref<string>('notice');
|
||||
// 通知数据
|
||||
const notice = ref<any>([]);
|
||||
// 私信数据
|
||||
const letter = ref<any>([]);
|
||||
// 待办数据
|
||||
const todo = ref<any>([]);
|
||||
// 通知未读数量
|
||||
const unReadNotice = ref<any>(0);
|
||||
// 私信未读数量
|
||||
const unReadLetter = ref<any>(0);
|
||||
// 代办未读数量
|
||||
const unReadTodo = ref<any>(0);
|
||||
// 获取字典数据
|
||||
const taskProgress = getDictionaryOptions('taskProgress');
|
||||
|
||||
// 通知标题
|
||||
const noticeTitle = computed(() => {
|
||||
return '通知' + (unReadNotice.value > 0 ? `(${unReadNotice.value})` : '');
|
||||
});
|
||||
|
||||
// 私信标题
|
||||
const letterTitle = computed(() => {
|
||||
return '私信' + (unReadLetter.value > 0 ? `(${unReadLetter.value})` : '');
|
||||
});
|
||||
|
||||
// 待办标题
|
||||
const todoTitle = computed(() => {
|
||||
return '待办' + (unReadTodo.value > 0 ? `(${unReadTodo.value})` : '');
|
||||
});
|
||||
|
||||
// 未读数量
|
||||
const unreadNum = computed(() => {
|
||||
return unReadNotice.value + unReadLetter.value + unReadTodo.value;
|
||||
});
|
||||
|
||||
/* 查询数据 */
|
||||
const query = () => {
|
||||
pageNotices({ status: 0 })
|
||||
.then((result) => {
|
||||
notice.value = result?.list;
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
pageLetters({ status: 0 })
|
||||
.then((result) => {
|
||||
letter.value = result?.list;
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
pageTodos({ status: 0 })
|
||||
.then((result) => {
|
||||
todo.value = result?.list;
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
// getUnreadNotice()
|
||||
// .then((result) => {
|
||||
// notice.value = result.notice;
|
||||
// letter.value = result.letter;
|
||||
// todo.value = result.todo;
|
||||
// })
|
||||
// .catch((e) => {
|
||||
// message.error(e.message);
|
||||
// });
|
||||
};
|
||||
|
||||
/* 查询未读数量 */
|
||||
const queryUnReadNum = () => {
|
||||
getUnReadNum()
|
||||
.then((result) => {
|
||||
unReadNotice.value = result?.notice;
|
||||
unReadLetter.value = result?.letter;
|
||||
unReadTodo.value = result?.todo;
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
queryUnReadNum();
|
||||
|
||||
/* 清空通知 */
|
||||
const clearNotice = () => {
|
||||
unReadNotice.value = 0;
|
||||
};
|
||||
|
||||
/* 清空通知 */
|
||||
const clearLetter = () => {
|
||||
unReadLetter.value = 0;
|
||||
};
|
||||
|
||||
/* 清空通知 */
|
||||
const clearTodo = () => {
|
||||
unReadTodo.value = 0;
|
||||
};
|
||||
|
||||
query();
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
BellOutlined,
|
||||
NotificationFilled,
|
||||
PushpinFilled,
|
||||
VideoCameraFilled,
|
||||
CarryOutFilled,
|
||||
BellFilled
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
name: 'HeaderNotice',
|
||||
components: {
|
||||
BellOutlined,
|
||||
NotificationFilled,
|
||||
PushpinFilled,
|
||||
VideoCameraFilled,
|
||||
CarryOutFilled,
|
||||
BellFilled
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.ele-notice-trigger.ant-badge {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ele-notice-pop {
|
||||
&.ant-dropdown-menu {
|
||||
padding: 0;
|
||||
width: 336px;
|
||||
max-width: 100%;
|
||||
margin-top: 11px;
|
||||
}
|
||||
|
||||
// 内容
|
||||
.ant-list-item {
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: hsla(0, 0%, 60%, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tag {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// 操作按钮
|
||||
.ele-notice-actions {
|
||||
border-top: 1px solid hsla(0, 0%, 60%, 0.15);
|
||||
|
||||
& > .ele-cell-content {
|
||||
line-height: 46px;
|
||||
text-align: center;
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
background: hsla(0, 0%, 60%, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user