colin
1 year ago
13 changed files with 607 additions and 16 deletions
@ -0,0 +1,15 @@ |
|||
<script lang="ts" setup> |
|||
import { Page } from '@vben/common-ui'; |
|||
|
|||
import { MyNotificationTable } from '@abp/notifications'; |
|||
|
|||
defineOptions({ |
|||
name: 'MyNotifications', |
|||
}); |
|||
</script> |
|||
|
|||
<template> |
|||
<Page> |
|||
<MyNotificationTable /> |
|||
</Page> |
|||
</template> |
|||
@ -0,0 +1,2 @@ |
|||
export { useMyNotifilersApi } from './useMyNotifilersApi'; |
|||
export { useNotificationsApi } from './useNotificationsApi'; |
|||
@ -0,0 +1,57 @@ |
|||
import type { PagedResultDto } from '@abp/core'; |
|||
|
|||
import type { |
|||
GetMyNotifilerPagedListInput, |
|||
MarkReadStateInput, |
|||
UserNotificationDto, |
|||
} from '../types/my-notifilers'; |
|||
|
|||
import { useRequest } from '@abp/request'; |
|||
|
|||
export function useMyNotifilersApi() { |
|||
const { cancel, request } = useRequest(); |
|||
/** |
|||
* 获取我的通知列表 |
|||
* @param {GetMyNotifilerPagedListInput} input 参数 |
|||
* @returns {Promise<PagedResultDto<UserNotificationDto>>} 通知分页列表 |
|||
*/ |
|||
function getMyNotifilersApi( |
|||
input?: GetMyNotifilerPagedListInput, |
|||
): Promise<PagedResultDto<UserNotificationDto>> { |
|||
return request<PagedResultDto<UserNotificationDto>>( |
|||
'/api/notifications/my-notifilers', |
|||
{ |
|||
method: 'GET', |
|||
params: input, |
|||
}, |
|||
); |
|||
} |
|||
/** |
|||
* 删除我的通知 |
|||
* @param {string} id 通知id |
|||
* @returns {void} |
|||
*/ |
|||
function deleteMyNotifilerApi(id: string): Promise<void> { |
|||
return request(`/api/notifications/my-notifilers/${id}`, { |
|||
method: 'DELETE', |
|||
}); |
|||
} |
|||
/** |
|||
* 设置通知已读状态 |
|||
* @param {MarkReadStateInput} input 参数 |
|||
* @returns {void} |
|||
*/ |
|||
function markReadStateApi(input: MarkReadStateInput): Promise<void> { |
|||
return request(`/api/notifications/my-notifilers/mark-read-state`, { |
|||
data: input, |
|||
method: 'PUT', |
|||
}); |
|||
} |
|||
|
|||
return { |
|||
cancel, |
|||
deleteMyNotifilerApi, |
|||
getMyNotifilersApi, |
|||
markReadStateApi, |
|||
}; |
|||
} |
|||
@ -0,0 +1,76 @@ |
|||
import type { ListResultDto } from '@abp/core'; |
|||
|
|||
import type { |
|||
NotificationGroupDto, |
|||
NotificationTemplateDto, |
|||
} from '../types/definitions'; |
|||
import type { |
|||
NotificationSendInput, |
|||
NotificationTemplateSendInput, |
|||
} from '../types/notifications'; |
|||
|
|||
import { useRequest } from '@abp/request'; |
|||
|
|||
export function useNotificationsApi() { |
|||
const { cancel, request } = useRequest(); |
|||
/** |
|||
* 获取可用通知列表 |
|||
* @returns {Promise<ListResultDto<NotificationGroupDto>>} 可用通知列表 |
|||
*/ |
|||
function getAssignableNotifiersApi(): Promise< |
|||
ListResultDto<NotificationGroupDto> |
|||
> { |
|||
return request<ListResultDto<NotificationGroupDto>>( |
|||
'/api/notifications/assignables', |
|||
{ |
|||
method: 'GET', |
|||
}, |
|||
); |
|||
} |
|||
/** |
|||
* 获取可用通知模板列表 |
|||
* @returns {Promise<ListResultDto<NotificationTemplateDto>>} 可用通知模板列表 |
|||
*/ |
|||
function getAssignableTemplatesApi(): Promise< |
|||
ListResultDto<NotificationTemplateDto> |
|||
> { |
|||
return request<ListResultDto<NotificationTemplateDto>>( |
|||
'/api/notifications/assignable-templates', |
|||
{ |
|||
method: 'GET', |
|||
}, |
|||
); |
|||
} |
|||
/** |
|||
* 发送通知 |
|||
* @param input 参数 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
function sendNotiferApi(input: NotificationSendInput): Promise<void> { |
|||
return request('/api/notifications/send', { |
|||
data: input, |
|||
method: 'POST', |
|||
}); |
|||
} |
|||
/** |
|||
* 发送模板通知 |
|||
* @param input 参数 |
|||
* @returns {Promise<void>} |
|||
*/ |
|||
function sendTemplateNotiferApi( |
|||
input: NotificationTemplateSendInput, |
|||
): Promise<void> { |
|||
return request('/api/notifications/send/template', { |
|||
data: input, |
|||
method: 'POST', |
|||
}); |
|||
} |
|||
|
|||
return { |
|||
cancel, |
|||
getAssignableNotifiersApi, |
|||
getAssignableTemplatesApi, |
|||
sendNotiferApi, |
|||
sendTemplateNotiferApi, |
|||
}; |
|||
} |
|||
@ -0,0 +1 @@ |
|||
export { default as MyNotificationTable } from './my-notifilers/MyNotificationTable.vue'; |
|||
@ -0,0 +1,337 @@ |
|||
<script setup lang="ts"> |
|||
import type { VbenFormProps, VxeGridListeners, VxeGridProps } from '@abp/ui'; |
|||
import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface'; |
|||
|
|||
import type { Notification } from '../../types/notifications'; |
|||
|
|||
import { h, ref } from 'vue'; |
|||
|
|||
import { createIconifyIcon } from '@vben/icons'; |
|||
import { $t } from '@vben/locales'; |
|||
|
|||
import { formatToDateTime } from '@abp/core'; |
|||
import { useVbenVxeGrid } from '@abp/ui'; |
|||
import { DeleteOutlined, DownOutlined } from '@ant-design/icons-vue'; |
|||
import { Button, Dropdown, Menu, message, Modal } from 'ant-design-vue'; |
|||
|
|||
import { useMyNotifilersApi } from '../../api/useMyNotifilersApi'; |
|||
import { useNotificationSerializer } from '../../hooks'; |
|||
import { |
|||
NotificationReadState, |
|||
NotificationType, |
|||
} from '../../types/notifications'; |
|||
|
|||
defineOptions({ |
|||
name: 'MyNotificationTable', |
|||
}); |
|||
const { cancel, deleteMyNotifilerApi, getMyNotifilersApi, markReadStateApi } = |
|||
useMyNotifilersApi(); |
|||
|
|||
const { deserialize } = useNotificationSerializer(); |
|||
|
|||
const MenuItem = Menu.Item; |
|||
|
|||
const ReadIcon = createIconifyIcon('ic:outline-mark-email-read'); |
|||
const UnReadIcon = createIconifyIcon('ic:outline-mark-email-unread'); |
|||
const BookMarkIcon = createIconifyIcon('material-symbols:bookmark-outline'); |
|||
|
|||
const selectedKeys = ref<string[]>([]); |
|||
|
|||
const formOptions: VbenFormProps = { |
|||
// 默认展开 |
|||
collapsed: false, |
|||
schema: [ |
|||
{ |
|||
component: 'Select', |
|||
componentProps: { |
|||
allowClear: true, |
|||
options: [ |
|||
{ |
|||
label: $t('Notifications.Read'), |
|||
value: NotificationReadState.Read, |
|||
}, |
|||
{ |
|||
label: $t('Notifications.UnRead'), |
|||
value: NotificationReadState.UnRead, |
|||
}, |
|||
], |
|||
}, |
|||
defaultValue: NotificationReadState.UnRead, |
|||
fieldName: 'readState', |
|||
label: $t('Notifications.Notifications:State'), |
|||
}, |
|||
{ |
|||
component: 'Input', |
|||
componentProps: { |
|||
allowClear: true, |
|||
}, |
|||
fieldName: 'filter', |
|||
formItemClass: 'col-span-2 items-baseline', |
|||
label: $t('AbpUi.Search'), |
|||
}, |
|||
], |
|||
// 控制表单是否显示折叠按钮 |
|||
showCollapseButton: true, |
|||
// 按下回车时是否提交表单 |
|||
submitOnEnter: true, |
|||
}; |
|||
|
|||
const gridOptions: VxeGridProps<Notification> = { |
|||
columns: [ |
|||
{ |
|||
align: 'center', |
|||
type: 'checkbox', |
|||
width: 40, |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'type', |
|||
formatter({ cellValue }) { |
|||
const type = cellValue as NotificationType; |
|||
switch (type) { |
|||
case NotificationType.Application: { |
|||
return $t('Notifications.NotificationType:Application'); |
|||
} |
|||
case NotificationType.ServiceCallback: { |
|||
return $t('Notifications.NotificationType:ServiceCallback'); |
|||
} |
|||
case NotificationType.System: { |
|||
return $t('Notifications.NotificationType:System'); |
|||
} |
|||
case NotificationType.User: { |
|||
return $t('Notifications.NotificationType:User'); |
|||
} |
|||
} |
|||
}, |
|||
minWidth: 50, |
|||
title: $t('Notifications.Notifications:Type'), |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'creationTime', |
|||
formatter({ cellValue }) { |
|||
return cellValue ? formatToDateTime(cellValue) : ''; |
|||
}, |
|||
minWidth: 120, |
|||
title: $t('Notifications.Notifications:SendTime'), |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'title', |
|||
minWidth: 150, |
|||
slots: { default: 'title' }, |
|||
title: $t('Notifications.Notifications:Title'), |
|||
}, |
|||
{ |
|||
align: 'left', |
|||
field: 'message', |
|||
minWidth: 120, |
|||
slots: { default: 'message' }, |
|||
title: $t('Notifications.Notifications:Content'), |
|||
}, |
|||
{ |
|||
field: 'action', |
|||
fixed: 'right', |
|||
slots: { default: 'action' }, |
|||
title: $t('AbpUi.Actions'), |
|||
width: 200, |
|||
}, |
|||
], |
|||
exportConfig: {}, |
|||
keepSource: true, |
|||
proxyConfig: { |
|||
ajax: { |
|||
query: async ({ page }, formValues) => { |
|||
const { totalCount, items } = await getMyNotifilersApi({ |
|||
maxResultCount: page.pageSize, |
|||
skipCount: (page.currentPage - 1) * page.pageSize, |
|||
...formValues, |
|||
}); |
|||
return { |
|||
totalCount, |
|||
items: items.map((item) => { |
|||
const notification = deserialize(item); |
|||
return { |
|||
...notification, |
|||
id: item.id, |
|||
state: item.state, |
|||
}; |
|||
}), |
|||
}; |
|||
}, |
|||
}, |
|||
response: { |
|||
total: 'totalCount', |
|||
list: 'items', |
|||
}, |
|||
}, |
|||
toolbarConfig: { |
|||
custom: true, |
|||
export: true, |
|||
// import: true, |
|||
refresh: true, |
|||
zoom: true, |
|||
}, |
|||
}; |
|||
|
|||
const gridEvents: VxeGridListeners<Notification> = { |
|||
checkboxAll: (params) => { |
|||
selectedKeys.value = params.records.map((record) => record.id); |
|||
}, |
|||
checkboxChange: (params) => { |
|||
selectedKeys.value = params.records.map((record) => record.id); |
|||
}, |
|||
}; |
|||
|
|||
const [Grid, gridApi] = useVbenVxeGrid({ |
|||
formOptions, |
|||
gridEvents, |
|||
gridOptions, |
|||
}); |
|||
|
|||
/** 点击行标记已读 */ |
|||
async function onClickRead(row: Notification) { |
|||
await _onRead([row.id], NotificationReadState.Read); |
|||
} |
|||
|
|||
/** 行标记阅读状态 */ |
|||
async function onRowRead(row: Notification, info: MenuInfo) { |
|||
switch (info.key) { |
|||
case 'read': { |
|||
return await _onRead([row.id], NotificationReadState.Read); |
|||
} |
|||
case 'un-read': { |
|||
return await _onRead([row.id], NotificationReadState.UnRead); |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** 批量标记阅读状态 */ |
|||
async function onBulkRead(info: MenuInfo) { |
|||
switch (info.key) { |
|||
case 'read': { |
|||
await _onRead(selectedKeys.value, NotificationReadState.Read); |
|||
break; |
|||
} |
|||
case 'un-read': { |
|||
await _onRead(selectedKeys.value, NotificationReadState.UnRead); |
|||
break; |
|||
} |
|||
} |
|||
selectedKeys.value = []; |
|||
} |
|||
|
|||
async function _onRead(idList: string[], state: NotificationReadState) { |
|||
try { |
|||
gridApi.setLoading(true); |
|||
await markReadStateApi({ |
|||
idList, |
|||
state, |
|||
}); |
|||
await gridApi.reload(); |
|||
} finally { |
|||
gridApi.setLoading(false); |
|||
} |
|||
} |
|||
|
|||
const onDelete = (row: Notification) => { |
|||
Modal.confirm({ |
|||
centered: true, |
|||
content: $t('AbpUi.ItemWillBeDeletedMessageWithFormat', [row.title]), |
|||
onCancel: () => { |
|||
cancel(); |
|||
}, |
|||
onOk: async () => { |
|||
await deleteMyNotifilerApi(row.id); |
|||
message.success($t('AbpUi.SuccessfullyDeleted')); |
|||
await gridApi.query(); |
|||
}, |
|||
title: $t('AbpUi.AreYouSure'), |
|||
}); |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<Grid :table-title="$t('Notifications.Notifications')"> |
|||
<template #toolbar-tools> |
|||
<Dropdown v-if="selectedKeys.length > 0"> |
|||
<template #overlay> |
|||
<Menu @click="(info) => onBulkRead(info)"> |
|||
<MenuItem key="read"> |
|||
<div class="flex flex-row items-center gap-[4px]"> |
|||
<ReadIcon color="#00DD00" /> |
|||
{{ $t('Notifications.Read') }} |
|||
</div> |
|||
</MenuItem> |
|||
<MenuItem key="un-read"> |
|||
<div class="flex flex-row items-center gap-[4px]"> |
|||
<UnReadIcon color="#FF7744" /> |
|||
{{ $t('Notifications.UnRead') }} |
|||
</div> |
|||
</MenuItem> |
|||
</Menu> |
|||
</template> |
|||
<Button> |
|||
<div class="flex flex-row items-center gap-[4px]"> |
|||
<BookMarkIcon /> |
|||
{{ $t('Notifications.MarkAs') }} |
|||
<DownOutlined /> |
|||
</div> |
|||
</Button> |
|||
</Dropdown> |
|||
</template> |
|||
<template #title="{ row }"> |
|||
<div class="flex flex-row items-center gap-[4px]"> |
|||
<ReadIcon |
|||
v-if="row.state === NotificationReadState.Read" |
|||
class="size-5" |
|||
color="#00DD00" |
|||
/> |
|||
<UnReadIcon v-else class="size-5" color="#FF7744" /> |
|||
<a href="javascript:(0);" @click="onClickRead(row)">{{ row.title }}</a> |
|||
</div> |
|||
</template> |
|||
<template #message="{ row }"> |
|||
<a href="javascript:(0);" @click="onClickRead(row)">{{ row.message }}</a> |
|||
</template> |
|||
<template #action="{ row }"> |
|||
<div class="flex flex-row"> |
|||
<Button |
|||
:icon="h(DeleteOutlined)" |
|||
danger |
|||
type="link" |
|||
@click="onDelete(row)" |
|||
> |
|||
{{ $t('AbpUi.Delete') }} |
|||
</Button> |
|||
<Dropdown> |
|||
<template #overlay> |
|||
<Menu @click="(info) => onRowRead(row, info)"> |
|||
<MenuItem key="read"> |
|||
<div class="flex flex-row items-center gap-[4px]"> |
|||
<ReadIcon color="#00DD00" /> |
|||
{{ $t('Notifications.Read') }} |
|||
</div> |
|||
</MenuItem> |
|||
<MenuItem key="un-read"> |
|||
<div class="flex flex-row items-center gap-[4px]"> |
|||
<UnReadIcon color="#FF7744" /> |
|||
{{ $t('Notifications.UnRead') }} |
|||
</div> |
|||
</MenuItem> |
|||
</Menu> |
|||
</template> |
|||
<Button type="link"> |
|||
<div class="flex flex-row items-center gap-[4px]"> |
|||
<BookMarkIcon /> |
|||
{{ $t('Notifications.MarkAs') }} |
|||
<DownOutlined /> |
|||
</div> |
|||
</Button> |
|||
</Dropdown> |
|||
</div> |
|||
</template> |
|||
</Grid> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
@ -0,0 +1,25 @@ |
|||
import type { NotificationLifetime, NotificationType } from './notifications'; |
|||
|
|||
interface NotificationDto { |
|||
description: string; |
|||
displayName: string; |
|||
lifetime: NotificationLifetime; |
|||
name: string; |
|||
type: NotificationType; |
|||
} |
|||
|
|||
interface NotificationGroupDto { |
|||
displayName: string; |
|||
name: string; |
|||
notifications: NotificationDto[]; |
|||
} |
|||
|
|||
interface NotificationTemplateDto { |
|||
content?: string; |
|||
culture?: string; |
|||
description?: string; |
|||
name: string; |
|||
title: string; |
|||
} |
|||
|
|||
export type { NotificationDto, NotificationGroupDto, NotificationTemplateDto }; |
|||
@ -1 +1,2 @@ |
|||
export * from './my-notifilers'; |
|||
export * from './notifications'; |
|||
|
|||
@ -0,0 +1,48 @@ |
|||
import type { PagedAndSortedResultRequestDto } from '@abp/core'; |
|||
|
|||
import type { |
|||
NotificationContentType, |
|||
NotificationData, |
|||
NotificationLifetime, |
|||
NotificationReadState, |
|||
NotificationSeverity, |
|||
NotificationType, |
|||
} from './notifications'; |
|||
|
|||
interface GetMyNotifilerPagedListInput extends PagedAndSortedResultRequestDto { |
|||
filter?: string; |
|||
/** 已读状态 */ |
|||
readState?: NotificationReadState; |
|||
} |
|||
|
|||
interface MarkReadStateInput { |
|||
idList: string[]; |
|||
state: NotificationReadState; |
|||
} |
|||
|
|||
interface UserNotificationDto { |
|||
/** 内容类型 */ |
|||
contentType: NotificationContentType; |
|||
/** 创建时间 */ |
|||
creationTime: Date; |
|||
/** 数据 */ |
|||
data: NotificationData; |
|||
/** Id */ |
|||
id: string; |
|||
/** 生命周期 */ |
|||
lifetime: NotificationLifetime; |
|||
/** 名称 */ |
|||
name: string; |
|||
/** 紧急程度 */ |
|||
severity: NotificationSeverity; |
|||
/** 阅读状态 */ |
|||
state: NotificationReadState; |
|||
/** 类型 */ |
|||
type: NotificationType; |
|||
} |
|||
|
|||
export type { |
|||
GetMyNotifilerPagedListInput, |
|||
MarkReadStateInput, |
|||
UserNotificationDto, |
|||
}; |
|||
Loading…
Reference in new issue