wuxueyu
/
Industrial-image-management-system---web
1
0
Fork 2
Code Issues Pull Requests Packages Projects Releases Wiki Activity

把审批信息放在个人中心所在下拉框消息中心里，铃铛图标处改为聊天消息

This commit is contained in:
Mr.j 2025-08-12 14:25:58 +08:00
parent 3657b1914c
commit 6a531706e1
5 changed files with 425 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

297
src/components/NotificationCenter/ApprovalMessageItem.vue Normal file
View File

@ -0,0 +1,297 @@
<template>
<div
class="approval-message-item"
:class="{
'unread': !notification.read,
'urgent': notification.priority === 'URGENT',
'high': notification.priority === 'HIGH',
'action-required': notification.actionRequired
}"
@click="handleClick"
>
<!-- 消息图标 -->
<div class="message-icon">
<component :is="getIconByType(notification.type)" />
</div>
<!-- 消息内容 -->
<div class="message-content">
<div class="message-header">
<div class="message-title">
{{ notification.title }}
<a-tag
v-if="notification.actionRequired"
size="small"
color="red"
>
需操作
</a-tag>
<a-tag
v-if="notification.priority === 'URGENT'"
size="small"
color="red"
>
紧急
</a-tag>
<a-tag
v-if="notification.priority === 'HIGH'"
size="small"
color="orange"
>
重要
</a-tag>
</div>
<div class="message-time">
{{ formatTime(notification.createTime) }}
</div>
</div>
<div class="message-body">
{{ notification.content }}
</div>
<div class="message-footer">
<div class="message-meta">
<span class="category">{{ notification.category }}</span>
<span v-if="notification.source" class="source">{{ notification.source }}</span>
</div>
<div class="message-actions">
<a-button
type="text"
size="small"
@click.stop="handleView"
>
查看详情
</a-button>
<a-button
type="text"
size="small"
@click.stop="handleApprove"
v-if="canApprove"
>
审批
</a-button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import {
IconCheckCircle,
IconClockCircle,
IconApps,
IconSettings,
IconExclamationCircle
} from '@arco-design/web-vue/es/icon'
interface Props {
notification: {
id: string
type: string
title: string
content: string
priority?: string
category: string
source?: string
createTime: string
read: boolean
actionRequired: boolean
targetUrl?: string
metadata?: any
reminderTime?: string
reminderType?: string
lastReminderTime?: string
}
}
const props = defineProps<Props>()
const router = useRouter()
// 计算属性
const canApprove = computed(() => {
return props.notification.type.includes('APPROVAL') ||
props.notification.type === 'PENDING' ||
props.notification.type === 'PROCUREMENT'
})
// 根据消息类型获取图标
const getIconByType = (type: string) => {
const iconMap: Record<string, any> = {
'APPROVAL': IconCheckCircle,
'PENDING': IconClockCircle,
'PROCUREMENT': IconApps,
'EQUIPMENT_BORROW': IconApps,
'EQUIPMENT_RETURN': IconApps,
'EQUIPMENT_MAINTENANCE': IconSettings,
'EQUIPMENT_ALERT': IconExclamationCircle,
'PROCUREMENT_APPROVAL': IconApps,
'BORROW_APPROVAL': IconApps,
'RETURN_APPROVAL': IconApps
}
return iconMap[type] || IconCheckCircle
}
// 格式化时间
const formatTime = (time: string) => {
if (!time) return '-'
const date = new Date(time)
const now = new Date()
const diff = now.getTime() - date.getTime()
if (diff < 60000) return '刚刚'
if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
if (diff < 2592000000) return `${Math.floor(diff / 86400000)}天前`
return date.toLocaleDateString()
}
// 处理点击事件
const handleClick = () => {
if (props.notification.targetUrl) {
router.push(props.notification.targetUrl)
}
}
// 查看详情
const handleView = () => {
if (props.notification.targetUrl) {
router.push(props.notification.targetUrl)
}
}
// 审批操作
const handleApprove = () => {
if (props.notification.targetUrl) {
router.push(props.notification.targetUrl)
}
}
</script>
<style scoped lang="scss">
.approval-message-item {
display: flex;
align-items: flex-start;
padding: 20px;
border: 1px solid var(--color-border-2);
border-radius: 8px;
margin-bottom: 16px;
cursor: pointer;
transition: all 0.2s;
background: var(--color-bg-2);
&:hover {
background-color: var(--color-fill-2);
border-color: var(--color-primary-light-3);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
&.unread {
background-color: var(--color-primary-light-1);
border-color: var(--color-primary-light-3);
&:hover {
background-color: var(--color-primary-light-2);
}
}
&.urgent {
border-left: 4px solid var(--color-danger);
background-color: var(--color-danger-light-1);
}
&.high {
border-left: 4px solid var(--color-warning);
background-color: var(--color-warning-light-1);
}
&.action-required {
border-left: 4px solid var(--color-primary);
background-color: var(--color-primary-light-1);
}
.message-icon {
margin-right: 16px;
margin-top: 2px;
color: var(--color-text-2);
font-size: 20px;
}
.message-content {
flex: 1;
min-width: 0;
.message-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
.message-title {
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
color: var(--color-text-1);
font-size: 16px;
flex: 1;
margin-right: 16px;
}
.message-time {
font-size: 12px;
color: var(--color-text-3);
white-space: nowrap;
}
}
.message-body {
font-size: 14px;
color: var(--color-text-2);
margin-bottom: 16px;
line-height: 1.5;
}
.message-footer {
display: flex;
justify-content: space-between;
align-items: center;
.message-meta {
display: flex;
gap: 12px;
font-size: 12px;
color: var(--color-text-3);
.category {
background: var(--color-fill-3);
padding: 2px 8px;
border-radius: 4px;
font-weight: 500;
}
.source {
color: var(--color-text-4);
}
}
.message-actions {
display: flex;
gap: 8px;
opacity: 0;
transition: opacity 0.2s;
}
}
&:hover .message-actions {
opacity: 1;
}
}
}
</style>

54
src/components/NotificationCenter/index.vue
View File

@ -1,15 +1,13 @@
<template>
<div class="notification-center">
<!-- 消息中心图标和徽章 -->
<div class="notification-trigger" @click="toggleDropdown">
<a-badge :count="unreadCount" :dot="hasUrgentNotifications">
<a-button type="text" class="notification-btn" title="消息中心">
<!-- 聊天信息图标 -->
<div class="notification-trigger">
<a-button type="text" class="notification-btn" title="聊天信息">
<template #icon>
<IconNotification />
</template>
<span class="notification-text">消息中心</span>
<span class="notification-text">聊天信息</span>
</a-button>
</a-badge>
</div>
<!-- 消息中心弹窗 -->
@ -229,16 +227,37 @@ const reminderForm = ref({
// 计算属性
const notifications = computed(() => notificationService.getAllNotifications())
const unreadCount = computed(() => notificationService.unreadCount.value)
const unreadCount = computed(() => {
const count = notificationService.unreadCount.value
// 确保返回有效的数字，避免NaN
if (typeof count === 'number' && !isNaN(count) && isFinite(count)) {
return count
}
return 0
})
const totalCount = computed(() => notifications.value.length)
const pendingCount = computed(() => notificationService.pendingCount.value)
const equipmentCount = computed(() =>
notificationService.equipmentBorrowCount.value +
notificationService.equipmentReturnCount.value +
notificationService.equipmentMaintenanceCount.value +
notificationService.equipmentAlertCount.value
)
const urgentCount = computed(() => notificationService.urgentCount.value)
const pendingCount = computed(() => {
const count = notificationService.pendingCount.value
if (typeof count === 'number' && !isNaN(count) && isFinite(count)) {
return count
}
return 0
})
const equipmentCount = computed(() => {
const borrowCount = notificationService.equipmentBorrowCount.value || 0
const returnCount = notificationService.equipmentReturnCount.value || 0
const maintenanceCount = notificationService.equipmentMaintenanceCount.value || 0
const alertCount = notificationService.equipmentAlertCount.value || 0
return borrowCount + returnCount + maintenanceCount + alertCount
})
const urgentCount = computed(() => {
const count = notificationService.urgentCount.value
if (typeof count === 'number' && !isNaN(count) && isFinite(count)) {
return count
}
return 0
})
const hasUrgentNotifications = computed(() => urgentCount.value > 0)
// 过滤后的消息列表
@ -644,6 +663,11 @@ onUnmounted(() => {
clearInterval(reminderCheckInterval)
}
})
// 暴露方法给父组件
defineExpose({
toggleDropdown
})
</script>
<style scoped lang="scss">

101
src/layout/components/HeaderRightBar/index.vue
View File

@ -34,7 +34,9 @@
<a-dropdown trigger="hover">
<a-row align="center" :wrap="false" class="user">
<!-- 管理员头像 -->
<a-badge :count="unreadMessageCount > 0 ? unreadMessageCount : undefined" :dot="false">
<Avatar :src="userStore.avatar" :name="userStore.nickname" :size="32" />
</a-badge>
<span class="username">{{ userStore.nickname }}</span>
<icon-down />
</a-row>
@ -42,8 +44,14 @@
<a-doption @click="router.push('/user/profile')">
<span>个人中心</span>
</a-doption>
<a-doption @click="router.push('/user/message')">
<a-doption @click="showNotificationCenter">
<span>消息中心</span>
<a-badge
v-if="unreadMessageCount > 0"
:count="unreadMessageCount"
:dot="false"
class="dropdown-notification-badge"
/>
</a-doption>
<a-divider :margin="0" />
<a-doption @click="logout">
@ -78,7 +86,14 @@ const { breakpoint } = useBreakpoint()
const notificationCenterRef = ref()
// 使用通知服务的未读消息数量
const unreadMessageCount = computed(() => notificationService.unreadCount.value)
const unreadMessageCount = computed(() => {
const count = notificationService.unreadCount.value
// 确保返回有效的数字，避免NaN
if (typeof count === 'number' && !isNaN(count) && isFinite(count)) {
return count
}
return 0
})
// 语音提示功能
const playNotificationSound = () => {
@ -224,6 +239,27 @@ const router = useRouter()
const userStore = useUserStore()
const SettingDrawerRef = ref<InstanceType<typeof SettingDrawer>>()
// 显示消息中心弹窗
const showNotificationCenter = () => {
console.log('showNotificationCenter 被调用')
console.log('notificationCenterRef.value:', notificationCenterRef.value)
if (notificationCenterRef.value) {
console.log('调用 toggleDropdown 方法')
try {
notificationCenterRef.value.toggleDropdown()
} catch (error) {
console.error('调用 toggleDropdown 失败:', error)
// 备选方案：直接设置弹窗状态
if (notificationCenterRef.value.modalVisible !== undefined) {
notificationCenterRef.value.modalVisible = true
}
}
} else {
console.error('notificationCenterRef.value 为空')
}
}
// 退出登录
const logout = () => {
Modal.warning({
@ -262,22 +298,6 @@ onMounted(() => {
transform: rotate(180deg);
}
.user {
cursor: pointer;
color: var(--color-text-1);
.username {
margin-left: 10px;
white-space: nowrap;
}
.arco-icon-down {
transition: all 0.3s;
margin-left: 2px;
}
}
// 通知徽章样式
.notification-badge {
.arco-badge-dot {
background-color: #f53f3f;
@ -328,4 +348,49 @@ onMounted(() => {
transform: translate3d(0, -2px, 0);
}
}
// 下拉菜单中的消息中心徽章样式
.dropdown-notification-badge {
margin-left: 8px;
:deep(.arco-badge-count) {
background-color: #f53f3f;
font-weight: bold;
font-size: 12px;
min-width: 18px;
height: 18px;
line-height: 18px;
border-radius: 9px;
animation: bounce 0.6s ease-in-out;
}
}
// 头像处的消息徽章样式
.user {
cursor: pointer;
color: var(--color-text-1);
.username {
margin-left: 10px;
white-space: nowrap;
}
.arco-icon-down {
transition: all 0.3s;
margin-left: 2px;
}
// 头像徽章样式
:deep(.arco-badge-count) {
background-color: #f53f3f;
font-weight: bold;
font-size: 11px;
min-width: 16px;
height: 16px;
line-height: 16px;
border-radius: 8px;
animation: bounce 0.6s ease-in-out;
box-shadow: 0 2px 4px rgba(245, 63, 63, 0.3);
}
}
</style>

2
src/types/auto-imports.d.ts vendored
View File

@ -70,6 +70,6 @@ declare global {
// for type re-export
declare global {
// @ts-ignore
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
import('vue')
}

61
src/types/components.d.ts vendored
View File

@ -7,68 +7,7 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
ApprovalAssistant: typeof import('./../components/ApprovalAssistant/index.vue')['default']
Avatar: typeof import('./../components/Avatar/index.vue')['default']
Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
CellCopy: typeof import('./../components/CellCopy/index.vue')['default']
Chart: typeof import('./../components/Chart/index.vue')['default']
ColumnSetting: typeof import('./../components/GiTable/src/components/ColumnSetting.vue')['default']
CronForm: typeof import('./../components/GenCron/CronForm/index.vue')['default']
CronModal: typeof import('./../components/GenCron/CronModal/index.vue')['default']
DateRangePicker: typeof import('./../components/DateRangePicker/index.vue')['default']
DayForm: typeof import('./../components/GenCron/CronForm/component/day-form.vue')['default']
FilePreview: typeof import('./../components/FilePreview/index.vue')['default']
GiCellAvatar: typeof import('./../components/GiCell/GiCellAvatar.vue')['default']
GiCellGender: typeof import('./../components/GiCell/GiCellGender.vue')['default']
GiCellStatus: typeof import('./../components/GiCell/GiCellStatus.vue')['default']
GiCellTag: typeof import('./../components/GiCell/GiCellTag.vue')['default']
GiCellTags: typeof import('./../components/GiCell/GiCellTags.vue')['default']
GiCodeView: typeof import('./../components/GiCodeView/index.vue')['default']
GiDot: typeof import('./../components/GiDot/index.tsx')['default']
GiEditTable: typeof import('./../components/GiEditTable/GiEditTable.vue')['default']
GiFooter: typeof import('./../components/GiFooter/index.vue')['default']
GiForm: typeof import('./../components/GiForm/src/GiForm.vue')['default']
GiIconBox: typeof import('./../components/GiIconBox/index.vue')['default']
GiIconSelector: typeof import('./../components/GiIconSelector/index.vue')['default']
GiIframe: typeof import('./../components/GiIframe/index.vue')['default']
GiOption: typeof import('./../components/GiOption/index.vue')['default']
GiOptionItem: typeof import('./../components/GiOptionItem/index.vue')['default']
GiPageLayout: typeof import('./../components/GiPageLayout/index.vue')['default']
GiSpace: typeof import('./../components/GiSpace/index.vue')['default']
GiSplitButton: typeof import('./../components/GiSplitButton/index.vue')['default']
GiSplitPane: typeof import('./../components/GiSplitPane/index.vue')['default']
GiSplitPaneFlexibleBox: typeof import('./../components/GiSplitPane/components/GiSplitPaneFlexibleBox.vue')['default']
GiSvgIcon: typeof import('./../components/GiSvgIcon/index.vue')['default']
GiTable: typeof import('./../components/GiTable/src/GiTable.vue')['default']
GiTag: typeof import('./../components/GiTag/index.tsx')['default']
GiThemeBtn: typeof import('./../components/GiThemeBtn/index.vue')['default']
HourForm: typeof import('./../components/GenCron/CronForm/component/hour-form.vue')['default']
Icon403: typeof import('./../components/icons/Icon403.vue')['default']
Icon404: typeof import('./../components/icons/Icon404.vue')['default']
Icon500: typeof import('./../components/icons/Icon500.vue')['default']
IconBorders: typeof import('./../components/icons/IconBorders.vue')['default']
IconTableSize: typeof import('./../components/icons/IconTableSize.vue')['default']
IconTreeAdd: typeof import('./../components/icons/IconTreeAdd.vue')['default']
IconTreeReduce: typeof import('./../components/icons/IconTreeReduce.vue')['default']
ImageImport: typeof import('./../components/ImageImport/index.vue')['default']
ImageImportWizard: typeof import('./../components/ImageImportWizard/index.vue')['default']
IndustrialImageList: typeof import('./../components/IndustrialImageList/index.vue')['default']
JsonPretty: typeof import('./../components/JsonPretty/index.vue')['default']
MinuteForm: typeof import('./../components/GenCron/CronForm/component/minute-form.vue')['default']
MonthForm: typeof import('./../components/GenCron/CronForm/component/month-form.vue')['default']
NotificationCenter: typeof import('./../components/NotificationCenter/index.vue')['default']
ParentView: typeof import('./../components/ParentView/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SecondForm: typeof import('./../components/GenCron/CronForm/component/second-form.vue')['default']
SplitPanel: typeof import('./../components/SplitPanel/index.vue')['default']
TextCopy: typeof import('./../components/TextCopy/index.vue')['default']
TurbineGrid: typeof import('./../components/TurbineGrid/index.vue')['default']
UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
Verify: typeof import('./../components/Verify/index.vue')['default']
VerifyPoints: typeof import('./../components/Verify/Verify/VerifyPoints.vue')['default']
VerifySlide: typeof import('./../components/Verify/Verify/VerifySlide.vue')['default']
WeekForm: typeof import('./../components/GenCron/CronForm/component/week-form.vue')['default']
YearForm: typeof import('./../components/GenCron/CronForm/component/year-form.vue')['default']
}
}