|
@@ -1,33 +1,33 @@
|
|
|
-import { useEffect, useState } from 'react';
|
|
|
-import { Tag, message } from 'antd';
|
|
|
-import { groupBy } from 'lodash';
|
|
|
-import moment from 'moment';
|
|
|
-import { useModel } from 'umi';
|
|
|
-import { getNotices } from '@/services/ant-design-pro/api';
|
|
|
+import { useEffect, useState } from 'react'
|
|
|
+import { Tag, message } from 'antd'
|
|
|
+import { groupBy } from 'lodash'
|
|
|
+import moment from 'moment'
|
|
|
+import { useModel } from 'umi'
|
|
|
+import { getNotices } from '@/services/user/api'
|
|
|
|
|
|
-import NoticeIcon from './NoticeIcon';
|
|
|
-import styles from './index.less';
|
|
|
+import NoticeIcon from './NoticeIcon'
|
|
|
+import styles from './index.less'
|
|
|
|
|
|
export type GlobalHeaderRightProps = {
|
|
|
- fetchingNotices?: boolean;
|
|
|
- onNoticeVisibleChange?: (visible: boolean) => void;
|
|
|
- onNoticeClear?: (tabName?: string) => void;
|
|
|
-};
|
|
|
+ fetchingNotices?: boolean
|
|
|
+ onNoticeVisibleChange?: (visible: boolean) => void
|
|
|
+ onNoticeClear?: (tabName?: string) => void
|
|
|
+}
|
|
|
|
|
|
const getNoticeData = (notices: API.NoticeIconItem[]): Record<string, API.NoticeIconItem[]> => {
|
|
|
if (!notices || notices.length === 0 || !Array.isArray(notices)) {
|
|
|
- return {};
|
|
|
+ return {}
|
|
|
}
|
|
|
|
|
|
- const newNotices = notices.map((notice) => {
|
|
|
- const newNotice = { ...notice };
|
|
|
+ const newNotices = notices.map(notice => {
|
|
|
+ const newNotice = { ...notice }
|
|
|
|
|
|
if (newNotice.datetime) {
|
|
|
- newNotice.datetime = moment(notice.datetime as string).fromNow();
|
|
|
+ newNotice.datetime = moment(notice.datetime as string).fromNow()
|
|
|
}
|
|
|
|
|
|
if (newNotice.id) {
|
|
|
- newNotice.key = newNotice.id;
|
|
|
+ newNotice.key = newNotice.id
|
|
|
}
|
|
|
|
|
|
if (newNotice.extra && newNotice.status) {
|
|
@@ -35,92 +35,90 @@ const getNoticeData = (notices: API.NoticeIconItem[]): Record<string, API.Notice
|
|
|
todo: '',
|
|
|
processing: 'blue',
|
|
|
urgent: 'red',
|
|
|
- doing: 'gold',
|
|
|
- }[newNotice.status];
|
|
|
+ doing: 'gold'
|
|
|
+ }[newNotice.status]
|
|
|
newNotice.extra = (
|
|
|
<Tag
|
|
|
color={color}
|
|
|
style={{
|
|
|
- marginRight: 0,
|
|
|
- }}
|
|
|
- >
|
|
|
+ marginRight: 0
|
|
|
+ }}>
|
|
|
{newNotice.extra}
|
|
|
</Tag>
|
|
|
- ) as any;
|
|
|
+ ) as any
|
|
|
}
|
|
|
|
|
|
- return newNotice;
|
|
|
- });
|
|
|
- return groupBy(newNotices, 'type');
|
|
|
-};
|
|
|
+ return newNotice
|
|
|
+ })
|
|
|
+ return groupBy(newNotices, 'type')
|
|
|
+}
|
|
|
|
|
|
const getUnreadData = (noticeData: Record<string, API.NoticeIconItem[]>) => {
|
|
|
- const unreadMsg: Record<string, number> = {};
|
|
|
- Object.keys(noticeData).forEach((key) => {
|
|
|
- const value = noticeData[key];
|
|
|
+ const unreadMsg: Record<string, number> = {}
|
|
|
+ Object.keys(noticeData).forEach(key => {
|
|
|
+ const value = noticeData[key]
|
|
|
|
|
|
if (!unreadMsg[key]) {
|
|
|
- unreadMsg[key] = 0;
|
|
|
+ unreadMsg[key] = 0
|
|
|
}
|
|
|
|
|
|
if (Array.isArray(value)) {
|
|
|
- unreadMsg[key] = value.filter((item) => !item.read).length;
|
|
|
+ unreadMsg[key] = value.filter(item => !item.read).length
|
|
|
}
|
|
|
- });
|
|
|
- return unreadMsg;
|
|
|
-};
|
|
|
+ })
|
|
|
+ return unreadMsg
|
|
|
+}
|
|
|
|
|
|
const NoticeIconView = () => {
|
|
|
- const { initialState } = useModel('@@initialState');
|
|
|
- const { currentUser } = initialState || {};
|
|
|
- const [notices, setNotices] = useState<API.NoticeIconItem[]>([]);
|
|
|
+ const { initialState } = useModel('@@initialState')
|
|
|
+ const { currentUser } = initialState || {}
|
|
|
+ const [notices, setNotices] = useState<API.NoticeIconItem[]>([])
|
|
|
|
|
|
useEffect(() => {
|
|
|
- getNotices().then(({ data }) => setNotices(data || []));
|
|
|
- }, []);
|
|
|
+ getNotices().then(({ data }) => setNotices(data || []))
|
|
|
+ }, [])
|
|
|
|
|
|
- const noticeData = getNoticeData(notices);
|
|
|
- const unreadMsg = getUnreadData(noticeData || {});
|
|
|
+ const noticeData = getNoticeData(notices)
|
|
|
+ const unreadMsg = getUnreadData(noticeData || {})
|
|
|
|
|
|
const changeReadState = (id: string) => {
|
|
|
setNotices(
|
|
|
- notices.map((item) => {
|
|
|
- const notice = { ...item };
|
|
|
+ notices.map(item => {
|
|
|
+ const notice = { ...item }
|
|
|
if (notice.id === id) {
|
|
|
- notice.read = true;
|
|
|
+ notice.read = true
|
|
|
}
|
|
|
- return notice;
|
|
|
- }),
|
|
|
- );
|
|
|
- };
|
|
|
+ return notice
|
|
|
+ })
|
|
|
+ )
|
|
|
+ }
|
|
|
|
|
|
const clearReadState = (title: string, key: string) => {
|
|
|
setNotices(
|
|
|
- notices.map((item) => {
|
|
|
- const notice = { ...item };
|
|
|
+ notices.map(item => {
|
|
|
+ const notice = { ...item }
|
|
|
if (notice.type === key) {
|
|
|
- notice.read = true;
|
|
|
+ notice.read = true
|
|
|
}
|
|
|
- return notice;
|
|
|
- }),
|
|
|
- );
|
|
|
- message.success(`${'清空了'} ${title}`);
|
|
|
- };
|
|
|
+ return notice
|
|
|
+ })
|
|
|
+ )
|
|
|
+ message.success(`${'清空了'} ${title}`)
|
|
|
+ }
|
|
|
|
|
|
return (
|
|
|
<NoticeIcon
|
|
|
className={styles.action}
|
|
|
count={currentUser && currentUser.unreadCount}
|
|
|
- onItemClick={(item) => {
|
|
|
- changeReadState(item.id!);
|
|
|
+ onItemClick={item => {
|
|
|
+ changeReadState(item.id!)
|
|
|
}}
|
|
|
onClear={(title: string, key: string) => clearReadState(title, key)}
|
|
|
loading={false}
|
|
|
clearText="清空"
|
|
|
viewMoreText="查看更多"
|
|
|
onViewMore={() => message.info('Click on view more')}
|
|
|
- clearClose
|
|
|
- >
|
|
|
+ clearClose>
|
|
|
<NoticeIcon.Tab
|
|
|
tabKey="notification"
|
|
|
count={unreadMsg.notification}
|
|
@@ -146,7 +144,7 @@ const NoticeIconView = () => {
|
|
|
showViewMore
|
|
|
/>
|
|
|
</NoticeIcon>
|
|
|
- );
|
|
|
-};
|
|
|
+ )
|
|
|
+}
|
|
|
|
|
|
-export default NoticeIconView;
|
|
|
+export default NoticeIconView
|