Blame view

src/layouts/default/header/components/notify/NoticeList.vue 5.11 KB
chen-xt authored
1
<template>
2
  <a-list :class="prefixCls" bordered :pagination="getPagination">
3
    <template v-for="item in getData" :key="item.id">
vben authored
4
5
      <a-list-item class="list-item">
        <a-list-item-meta>
chen-xt authored
6
7
          <template #title>
            <div class="title">
8
9
              <a-typography-paragraph
                @click="handleTitleClick(item)"
10
                style="width: 100%; margin-bottom: 0 !important"
11
12
13
14
15
16
17
                :style="{ cursor: isTitleClickable ? 'pointer' : '' }"
                :delete="!!item.titleDelete"
                :ellipsis="
                  $props.titleRows > 0 ? { rows: $props.titleRows, tooltip: item.title } : false
                "
                :content="item.title"
              />
chen-xt authored
18
              <div class="extra" v-if="item.extra">
vben authored
19
                <a-tag class="tag" :color="item.color">
chen-xt authored
20
                  {{ item.extra }}
vben authored
21
                </a-tag>
chen-xt authored
22
23
24
              </div>
            </div>
          </template>
vben authored
25
chen-xt authored
26
          <template #avatar>
vben authored
27
            <a-avatar v-if="item.avatar" class="avatar" :src="item.avatar" />
chen-xt authored
28
29
            <span v-else> {{ item.avatar }}</span>
          </template>
vben authored
30
chen-xt authored
31
32
          <template #description>
            <div>
33
34
              <div class="description" v-if="item.description">
                <a-typography-paragraph
35
                  style="width: 100%; margin-bottom: 0 !important"
36
37
38
39
40
41
42
                  :ellipsis="
                    $props.descRows > 0
                      ? { rows: $props.descRows, tooltip: item.description }
                      : false
                  "
                  :content="item.description"
                />
43
44
45
46
              </div>
              <div class="datetime">
                {{ item.datetime }}
              </div>
chen-xt authored
47
48
            </div>
          </template>
vben authored
49
50
        </a-list-item-meta>
      </a-list-item>
chen-xt authored
51
    </template>
vben authored
52
  </a-list>
chen-xt authored
53
54
</template>
<script lang="ts">
55
  import { computed, defineComponent, PropType, ref, watch, unref } from 'vue';
chen-xt authored
56
  import { ListItem } from './data';
vben authored
57
  import { useDesign } from '/@/hooks/web/useDesign';
58
59
  import { List, Avatar, Tag, Typography } from 'ant-design-vue';
  import { isNumber } from '/@/utils/is';
chen-xt authored
60
  export default defineComponent({
vben authored
61
62
63
64
65
    components: {
      [Avatar.name]: Avatar,
      [List.name]: List,
      [List.Item.name]: List.Item,
      AListItemMeta: List.Item.Meta,
66
      ATypographyParagraph: Typography.Paragraph,
vben authored
67
68
      [Tag.name]: Tag,
    },
chen-xt authored
69
70
    props: {
      list: {
vben authored
71
        type: Array as PropType<ListItem[]>,
chen-xt authored
72
73
        default: () => [],
      },
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
      pageSize: {
        type: [Boolean, Number] as PropType<Boolean | Number>,
        default: 5,
      },
      currentPage: {
        type: Number,
        default: 1,
      },
      titleRows: {
        type: Number,
        default: 1,
      },
      descRows: {
        type: Number,
        default: 2,
      },
      onTitleClick: {
        type: Function as PropType<(Recordable) => void>,
      },
chen-xt authored
93
    },
94
95
    emits: ['update:currentPage'],
    setup(props, { emit }) {
vben authored
96
      const { prefixCls } = useDesign('header-notify-list');
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
      const current = ref(props.currentPage || 1);
      const getData = computed(() => {
        const { pageSize, list } = props;
        console.log('refreshData', list);
        if (pageSize === false) return [];
        let size = isNumber(pageSize) ? pageSize : 5;
        return list.slice(size * (unref(current) - 1), size * unref(current));
      });
      watch(
        () => props.currentPage,
        (v) => {
          current.value = v;
        }
      );
      const isTitleClickable = computed(() => !!props.onTitleClick);
      const getPagination = computed(() => {
        const { list, pageSize } = props;
        if (pageSize > 0 && list && list.length > pageSize) {
          return {
            total: list.length,
            pageSize,
118
            //size: 'small',
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
            current: unref(current),
            onChange(page) {
              current.value = page;
              emit('update:currentPage', page);
            },
          };
        } else {
          return false;
        }
      });

      function handleTitleClick(item: ListItem) {
        props.onTitleClick && props.onTitleClick(item);
      }

      return { prefixCls, getPagination, getData, handleTitleClick, isTitleClickable };
vben authored
135
    },
chen-xt authored
136
137
138
  });
</script>
<style lang="less" scoped>
vben authored
139
140
141
  @prefix-cls: ~'@{namespace}-header-notify-list';

  .@{prefix-cls} {
chen-xt authored
142
143
144
145
    &::-webkit-scrollbar {
      display: none;
    }
146
147
148
149
    ::v-deep(.ant-pagination-disabled) {
      display: inline-block !important;
    }
vben authored
150
    &-item {
chen-xt authored
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
      padding: 6px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s;

      .title {
        margin-bottom: 8px;
        font-weight: normal;

        .extra {
          float: right;
          margin-top: -1.5px;
          margin-right: 0;
          font-weight: normal;

          .tag {
            margin-right: 0;
          }
        }

        .avatar {
          margin-top: 4px;
        }

        .description {
          font-size: 12px;
          line-height: 18px;
        }

        .datetime {
          margin-top: 4px;
          font-size: 12px;
          line-height: 18px;
        }
      }
    }
  }
</style>