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
import './NoticeList.less'
import { List, Avatar } from "ant-design-vue";
import classNames from 'classnames';
export default {
props: ['data', 'title', 'locale', 'emptyText', 'emptyImage', 'showClear'],
methods: {
onClear() {
this.$emit('clear');
},
onClick(e){
this.$emit('click',e);
}
},
render() {
const { data = [], title, locale, emptyText, emptyImage, showClear = true ,onClear} = this
if (data.length === 0) {
return (
<div class="ai-notice notFound">
{emptyImage ? <img src={emptyImage} alt="not found" /> : null}
<div>{emptyText || locale.emptyText}</div>
</div>
);
}
return (
<div class="ai-notice">
<List class="list">
{data.map((item, i) => {
const itemCls = classNames('item', {
['read']: item.read,
});
// eslint-disable-next-line no-nested-ternary
const leftIcon = item.avatar ? (
typeof item.avatar === 'string' ? (
<Avatar class="avatar" src={item.avatar} />
) : (
item.avatar
)
) : null;
return (
<List.Item class={itemCls} rowKey={item.key || i} onClick={() => this.onClick(item)}>
<List.Item.Meta
class="meta"
avatar={<span class="iconElement">{leftIcon}</span>}
title={
<div class="title">
{item.title}
<div class="extra">{item.extra}</div>
</div>
}
description={
<div>
<div class="description" title={item.description}>
{item.description}
</div>
<div class="datetime">{item.datetime}</div>
</div>
}
/>
</List.Item>
)
})}
</List>
{showClear ? (
<div class="clear" onClick={onClear}>
{locale.clear}
{title}
</div>
) : null}
</div>
)
}
}