58 lines
1.5 KiB
Vue
58 lines
1.5 KiB
Vue
<script lang="ts" setup>
|
||
import { ref } from 'vue';
|
||
|
||
import { useVbenModal } from '@vben/common-ui';
|
||
import {Avatar, List, ListItem, ListItemMeta, Tag} from "ant-design-vue";
|
||
|
||
const userList = ref([]);
|
||
const unreadCount = ref(0);
|
||
const title = ref('通知的用户列表');
|
||
const [Modal, modalApi] = useVbenModal({
|
||
fullscreenButton: false,
|
||
draggable: true,
|
||
footer: false,
|
||
onCancel() {
|
||
modalApi.close();
|
||
},
|
||
onConfirm: async () => {
|
||
modalApi.close();
|
||
},
|
||
onOpenChange(isOpen: boolean) {
|
||
if (isOpen) {
|
||
const { values, unread_count } = modalApi.getData<Record<string, any>>();
|
||
if (values) {
|
||
userList.value = values;
|
||
unreadCount.value = unread_count;
|
||
if (unread_count > 0) {
|
||
title.value = `通知的用户列表 - （${unread_count}个用户未读）`;
|
||
} else {
|
||
title.value = `通知的用户列表 - （全部已读）`;
|
||
}
|
||
}
|
||
}
|
||
},
|
||
});
|
||
</script>
|
||
<template>
|
||
<Modal :title="title" class="w-[60%]">
|
||
<List
|
||
:bordered="true"
|
||
>
|
||
<ListItem v-for="item in userList">
|
||
<ListItemMeta>
|
||
<template #avatar>
|
||
<Avatar :src="item.admin?.avatar">
|
||
{{ item.admin?.nick_name.slice(0, 2) }}
|
||
</Avatar>
|
||
</template>
|
||
<template #title>
|
||
{{ item.admin?.nick_name }}
|
||
</template>
|
||
</ListItemMeta>
|
||
<Tag v-if="item.status === 0" color="warning">未读</Tag>
|
||
<Tag v-else-if="item.status === 1" color="success">已读</Tag>
|
||
</ListItem>
|
||
</List>
|
||
</Modal>
|
||
</template>
|