1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
| import { NzMessageService } from 'ng-zorro-antd';
| import { Component, OnInit, Input } from '@angular/core';
| import { Observable } from 'rxjs/Observable';
| import { ArrayObservable } from 'rxjs/observable/ArrayObservable';
| import { map, groupBy, concatMap, mergeMap, flatMap, delay, tap, toArray } from 'rxjs/operators';
| import * as moment from 'moment';
| import { NoticeItem } from '@delon/abc';
| import { SettingsService } from '@delon/theme';
|
| /**
| * 菜单通知
| */
| @Component({
| selector: 'header-notify',
| template: `
| <notice-icon
| [data]="data"
| [count]="count"
| [loading]="loading"
| (select)="select($event)"
| (clear)="clear($event)"
| (popupVisibleChange)="loadData($event)"></notice-icon>
| `
| })
| export class HeaderNotifyComponent implements OnInit {
|
| data: NoticeItem[] = [
| { title: '通知', list: [], emptyText: '你已查看所有通知', emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg' },
| { title: '消息', list: [], emptyText: '您已读完所有消息', emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/sAuJeJzSKbUmHfBQRzmZ.svg' },
| { title: '待办', list: [], emptyText: '你已完成所有待办', emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/HsIsxMZiWKrNUavQUXqx.svg' }
| ];
| count = 0;
| loading = false;
|
| constructor(private msg: NzMessageService, private settings: SettingsService) {}
|
| ngOnInit() {
| // mock data
| this.count = this.settings.user.notifyCount || 12;
| }
|
| private parseGroup(data: Observable<any[]>) {
| console.log('parseGroup');
| data.pipe(
| concatMap((i: any) => i),
| map((i: any) => {
| if (i.datetime) i.datetime = moment(i.datetime).fromNow();
| // change to color
| if (i.status) {
| i.color = ({
| todo: '',
| processing: 'blue',
| urgent: 'red',
| doing: 'gold',
| })[i.status];
| }
| return i;
| }),
| groupBy((x: any) => x.type),
| mergeMap(g => g.pipe(toArray())),
| tap((ls: any) => {
| this.data.find(w => w.title === ls[0].type).list = ls;
| })
| ).subscribe(res => this.loading = false);
| }
|
| loadData(res) {
| if (!res || this.loading) return;
| this.loading = true;
| // region: mock http request
| this.parseGroup(ArrayObservable.of([{
| id: '000000001',
| avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
| title: '你收到了 14 份新周报',
| datetime: '2017-08-09',
| type: '通知',
| }, {
| id: '000000002',
| avatar: 'https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png',
| title: '你推荐的 曲妮妮 已通过第三轮面试',
| datetime: '2017-08-08',
| type: '通知',
| }, {
| id: '000000003',
| avatar: 'https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png',
| title: '这种模板可以区分多种通知类型',
| datetime: '2017-08-07',
| read: true,
| type: '通知',
| }, {
| id: '000000004',
| avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
| title: '左侧图标用于区分不同的类型',
| datetime: '2017-08-07',
| type: '通知',
| }, {
| id: '000000005',
| avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
| title: '内容不要超过两行字，超出时自动截断',
| datetime: '2017-08-07',
| type: '通知',
| }, {
| id: '000000006',
| avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
| title: '曲丽丽 评论了你',
| description: '描述信息描述信息描述信息',
| datetime: '2017-08-07',
| type: '消息',
| }, {
| id: '000000007',
| avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
| title: '朱偏右 回复了你',
| description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
| datetime: '2017-08-07',
| type: '消息',
| }, {
| id: '000000008',
| avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
| title: '标题',
| description: '这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像',
| datetime: '2017-08-07',
| type: '消息',
| }, {
| id: '000000009',
| title: '任务名称',
| description: '任务需要在 2017-01-12 20:00 前启动',
| extra: '未开始',
| status: 'todo',
| type: '待办',
| }, {
| id: '000000010',
| title: '第三方紧急代码变更',
| description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
| extra: '马上到期',
| status: 'urgent',
| type: '待办',
| }, {
| id: '000000011',
| title: '信息安全考试',
| description: '指派竹尔于 2017-01-09 前完成更新并发布',
| extra: '已耗时 8 天',
| status: 'doing',
| type: '待办',
| }, {
| id: '000000012',
| title: 'ABCD 版本发布',
| description: '冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务',
| extra: '进行中',
| status: 'processing',
| type: '待办',
| }
| ]).pipe(delay(1000)));
| // endregion
| }
|
| clear(type: string) {
| this.msg.success(`清空了 ${type}`);
| }
|
| select(res: any) {
| this.msg.success(`点击了 ${res.title} 的 ${res.item.title}`);
| }
| }
|
|
