@@ -61,6 +63,7 @@
import { ListItem } from './data';
import { useDesign } from '/@/hooks/web/useDesign';
import { List, Avatar, Tag, Typography } from 'ant-design-vue';
+ import { NotificationContentType } from "/@/api/messages/model/notificationsModel";
import { isNumber } from '/@/utils/is';
export default defineComponent({
components: {
@@ -95,6 +98,9 @@
onTitleClick: {
type: Function as PropType<(Recordable) => void>,
},
+ onContentClick: {
+ type: Function as PropType<(Recordable) => void>,
+ },
},
emits: ['update:currentPage'],
setup(props, { emit }) {
@@ -103,9 +109,22 @@
const getData = computed(() => {
const { pageSize, list } = props;
if (pageSize === false) return [];
- let size = isNumber(pageSize) ? pageSize : 5;
+ let size = isNumber(pageSize) ? pageSize : 10;
return list.slice(size * (unref(current) - 1), size * unref(current));
});
+ const getContent = computed(() => {
+ return (item: ListItem) => {
+ switch (item.contentType) {
+ default:
+ case NotificationContentType.Text:
+ return item.description;
+ case NotificationContentType.Html:
+ case NotificationContentType.Json:
+ case NotificationContentType.Markdown:
+ return item.title;
+ }
+ };
+ });
watch(
() => props.currentPage,
(v) => {
@@ -113,12 +132,15 @@
},
);
const isTitleClickable = computed(() => !!props.onTitleClick);
+ const isContentClickable = computed(() => !!props.onContentClick);
const getPagination = computed(() => {
const { list, pageSize } = props;
- if (pageSize > 0 && list && list.length > pageSize) {
+ if (pageSize === false) return false;
+ const size = isNumber(pageSize) ? pageSize : 5;
+ if (size > 0 && list && list.length > size) {
return {
total: list.length,
- pageSize,
+ pageSize: size,
//size: 'small',
current: unref(current),
onChange(page) {
@@ -135,7 +157,20 @@
props.onTitleClick && props.onTitleClick(item);
}
- return { prefixCls, getPagination, getData, handleTitleClick, isTitleClickable };
+ function handleContentClick(item: ListItem) {
+ props.onContentClick && props.onContentClick(item);
+ }
+
+ return {
+ prefixCls,
+ getPagination,
+ getData,
+ getContent,
+ handleTitleClick,
+ isTitleClickable,
+ handleContentClick,
+ isContentClickable,
+ };
},
});
diff --git a/apps/vue/src/layouts/default/header/components/notify/data.ts b/apps/vue/src/layouts/default/header/components/notify/data.ts
index 15d524d7b..1ade95497 100644
--- a/apps/vue/src/layouts/default/header/components/notify/data.ts
+++ b/apps/vue/src/layouts/default/header/components/notify/data.ts
@@ -1,3 +1,5 @@
+import { NotificationContentType } from "/@/api/messages/model/notificationsModel";
+
export interface ListItem {
id: string;
avatar: string;
@@ -12,6 +14,7 @@ export interface ListItem {
clickClose?: boolean;
extra?: string;
color?: string;
+ contentType?: NotificationContentType;
}
export interface TabItem {
diff --git a/apps/vue/src/layouts/default/header/components/notify/index.vue b/apps/vue/src/layouts/default/header/components/notify/index.vue
index d16703f98..9ca63a84c 100644
--- a/apps/vue/src/layouts/default/header/components/notify/index.vue
+++ b/apps/vue/src/layouts/default/header/components/notify/index.vue
@@ -1,6 +1,37 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+