Blame view

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

  .@{prefix-cls} {
chen-xt authored
143
144
145
146
    &::-webkit-scrollbar {
      display: none;
    }
147
148
149
150
    ::v-deep(.ant-pagination-disabled) {
      display: inline-block !important;
    }
vben authored
151
    &-item {
chen-xt authored
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
189
      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>