reactor:【system 系统管理】notify/my 进一步统一代码风格

pull/210/head
YunaiV 2025-09-06 16:39:52 +08:00
parent 11f507ed2b
commit 965ccdbea1
6 changed files with 196 additions and 161 deletions

View File

@ -4,12 +4,11 @@ import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { formatDateTime } from '@vben/utils';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { getRangePickerDefaultProps } from '#/utils';
/** 列表的搜索表单 */
@ -21,8 +20,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
allowClear: true,
placeholder: '请选择是否已读',
allowClear: true,
},
},
{
@ -30,8 +29,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '发送时间',
component: 'RangePicker',
componentProps: {
allowClear: true,
...getRangePickerDefaultProps(),
allowClear: true,
},
},
];
@ -48,15 +47,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'templateNickname',
title: '发送人',
minWidth: 180,
},
{
field: 'createTime',
title: '发送时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'templateType',
title: '类型',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE },
@ -65,10 +67,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'templateContent',
title: '消息内容',
minWidth: 300,
},
{
field: 'readStatus',
title: '是否已读',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
@ -77,6 +81,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'readTime',
title: '阅读时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{

View File

@ -2,7 +2,10 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import { ref } from 'vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { isEmpty } from '@vben/utils';
import { message } from 'ant-design-vue';
@ -22,7 +25,7 @@ const [DetailModal, detailModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@ -33,22 +36,19 @@ function handleDetail(row: SystemNotifyMessageApi.NotifyMessage) {
/** 标记一条站内信已读 */
async function handleRead(row: SystemNotifyMessageApi.NotifyMessage) {
message.loading({
const hideLoading = message.loading({
content: '正在标记已读...',
duration: 0,
key: 'action_process_msg',
});
//
await updateNotifyMessageRead([row.id]);
//
message.success({
content: '标记已读成功',
key: 'action_process_msg',
});
onRefresh();
//
handleDetail(row);
try {
await updateNotifyMessageRead([row.id]);
message.success('标记已读成功');
handleRefresh();
//
handleDetail(row);
} finally {
hideLoading();
}
}
/** 标记选中的站内信为已读 */
@ -62,39 +62,40 @@ async function handleMarkRead() {
const ids = rows.map((row: SystemNotifyMessageApi.NotifyMessage) => row.id);
const hideLoading = message.loading({
content: '正在标记已读...',
key: 'action_key_msg',
duration: 0,
});
try {
//
await updateNotifyMessageRead(ids);
//
message.success({
content: '标记已读成功',
key: 'action_key_msg',
});
checkedIds.value = [];
message.success('标记已读成功');
await gridApi.grid.setAllCheckboxRow(false);
onRefresh();
handleRefresh();
} finally {
hideLoading();
}
}
const checkedIds = ref<number[]>([]);
function handleRowCheckboxChange({
records,
}: {
records: SystemNotifyMessageApi.NotifyMessage[];
}) {
checkedIds.value = records.map((item) => item.id);
}
/** 标记所有站内信为已读 */
async function handleMarkAllRead() {
const hideLoading = message.loading({
content: '正在标记全部已读...',
key: 'action_key_msg',
duration: 0,
});
try {
//
await updateAllNotifyMessageRead();
//
message.success({
content: '全部标记已读成功',
key: 'action_key_msg',
});
message.success('全部标记已读成功');
checkedIds.value = [];
await gridApi.grid.setAllCheckboxRow(false);
onRefresh();
handleRefresh();
} finally {
hideLoading();
}
@ -121,6 +122,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
@ -132,6 +134,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
highlight: true,
},
} as VxeTableGridOptions<SystemNotifyMessageApi.NotifyMessage>,
gridEvents: {
checkboxAll: handleRowCheckboxChange,
checkboxChange: handleRowCheckboxChange,
},
});
</script>
<template>
@ -140,7 +146,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DocAlert title="站内信配置" url="https://doc.iocoder.cn/notify/" />
</template>
<DetailModal @success="onRefresh" />
<DetailModal @success="handleRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<TableAction
@ -148,13 +154,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
{
label: '标记已读',
type: 'primary',
icon: 'mdi:checkbox-marked-circle-outline',
icon: ACTION_ICON.ADD,
disabled: isEmpty(checkedIds),
onClick: handleMarkRead,
},
{
label: '全部已读',
type: 'primary',
icon: 'mdi:checkbox-marked-circle-outline',
icon: ACTION_ICON.ADD,
onClick: handleMarkAllRead,
},
]"
@ -174,7 +181,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
label: '已读',
type: 'link',
ifShow: !row.readStatus,
icon: ACTION_ICON.DELETE,
icon: ACTION_ICON.ADD,
onClick: handleRead.bind(null, row),
},
]"

View File

@ -1,6 +1,5 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
@ -38,9 +37,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = SystemNotifyMessageApi.NotifyMessage>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
title: '',
@ -88,31 +85,10 @@ export function useGridColumns<T = SystemNotifyMessageApi.NotifyMessage>(
formatter: 'formatDateTime',
},
{
field: 'operation',
title: '操作',
minWidth: 180,
align: 'center',
width: 130,
fixed: 'right',
cellRender: {
attrs: {
nameField: 'id',
nameTitle: '站内信',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'detail',
text: '查看',
show: (row: any) => row.readStatus,
},
{
code: 'read',
text: '已读',
show: (row: any) => !row.readStatus,
},
],
},
slots: { default: 'actions' },
},
];
}

View File

@ -1,16 +1,15 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import { ref } from 'vue';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { MdiCheckboxMarkedCircleOutline } from '@vben/icons';
import { isEmpty } from '@vben/utils';
import { ElButton, ElMessage } from 'element-plus';
import { ElLoading, ElMessage } from 'element-plus';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
getMyNotifyMessagePage,
updateAllNotifyMessageRead,
@ -26,35 +25,33 @@ const [DetailModal, detailModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
/** 查看站内信详情 */
function onDetail(row: SystemNotifyMessageApi.NotifyMessage) {
function handleDetail(row: SystemNotifyMessageApi.NotifyMessage) {
detailModalApi.setData(row).open();
}
/** 标记一条站内信已读 */
async function onRead(row: SystemNotifyMessageApi.NotifyMessage) {
const loadingInstance = ElMessage({
message: '正在标记已读...',
type: 'info',
duration: 0,
async function handleRead(row: SystemNotifyMessageApi.NotifyMessage) {
const loadingInstance = ElLoading.service({
text: '正在标记已读...',
});
//
await updateNotifyMessageRead([row.id]);
//
loadingInstance.close();
ElMessage.success('标记已读成功');
onRefresh();
//
onDetail(row);
try {
await updateNotifyMessageRead([row.id]);
ElMessage.success('标记已读成功');
handleRefresh();
//
handleDetail(row);
} finally {
loadingInstance.close();
}
}
/** 标记选中的站内信为已读 */
async function onMarkRead() {
async function handleMarkRead() {
const rows = gridApi.grid.getCheckboxRecords();
if (!rows || rows.length === 0) {
ElMessage.warning('请选择需要标记的站内信');
@ -62,50 +59,42 @@ async function onMarkRead() {
}
const ids = rows.map((row: SystemNotifyMessageApi.NotifyMessage) => row.id);
const loadingInstance = ElMessage({
message: '正在标记已读...',
type: 'info',
duration: 0,
const loadingInstance = ElLoading.service({
text: '正在标记已读...',
});
//
await updateNotifyMessageRead(ids);
//
loadingInstance.close();
ElMessage.success('标记已读成功');
await gridApi.grid.setAllCheckboxRow(false);
onRefresh();
try {
await updateNotifyMessageRead(ids);
checkedIds.value = [];
ElMessage.success('标记已读成功');
await gridApi.grid.setAllCheckboxRow(false);
handleRefresh();
} finally {
loadingInstance.close();
}
}
const checkedIds = ref<number[]>([]);
function handleRowCheckboxChange({
records,
}: {
records: SystemNotifyMessageApi.NotifyMessage[];
}) {
checkedIds.value = records.map((item) => item.id);
}
/** 标记所有站内信为已读 */
async function onMarkAllRead() {
const loadingInstance = ElMessage({
message: '正在标记全部已读...',
type: 'info',
duration: 0,
async function handleMarkAllRead() {
const loadingInstance = ElLoading.service({
text: '正在标记全部已读...',
});
//
await updateAllNotifyMessageRead();
//
loadingInstance.close();
ElMessage.success('全部标记已读成功');
await gridApi.grid.setAllCheckboxRow(false);
onRefresh();
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<SystemNotifyMessageApi.NotifyMessage>) {
switch (code) {
case 'detail': {
onDetail(row);
break;
}
case 'read': {
onRead(row);
break;
}
try {
await updateAllNotifyMessageRead();
ElMessage.success('全部标记已读成功');
checkedIds.value = [];
await gridApi.grid.setAllCheckboxRow(false);
handleRefresh();
} finally {
loadingInstance.close();
}
}
@ -114,7 +103,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
@ -130,6 +119,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
@ -141,6 +131,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
highlight: true,
},
} as VxeTableGridOptions<SystemNotifyMessageApi.NotifyMessage>,
gridEvents: {
checkboxAll: handleRowCheckboxChange,
checkboxChange: handleRowCheckboxChange,
},
});
</script>
<template>
@ -149,17 +143,48 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DocAlert title="站内信配置" url="https://doc.iocoder.cn/notify/" />
</template>
<DetailModal @success="onRefresh" />
<DetailModal @success="handleRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<ElButton type="primary" @click="onMarkRead">
<MdiCheckboxMarkedCircleOutline />
标记已读
</ElButton>
<ElButton type="primary" class="ml-2" @click="onMarkAllRead">
<MdiCheckboxMarkedCircleOutline />
全部已读
</ElButton>
<TableAction
:actions="[
{
label: '标记已读',
type: 'primary',
icon: ACTION_ICON.ADD,
disabled: isEmpty(checkedIds),
onClick: handleMarkRead,
},
{
label: '全部已读',
type: 'primary',
icon: ACTION_ICON.ADD,
onClick: handleMarkAllRead,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: '查看',
type: 'primary',
link: true,
ifShow: row.readStatus,
icon: ACTION_ICON.VIEW,
onClick: handleDetail.bind(null, row),
},
{
label: '已读',
type: 'primary',
link: true,
ifShow: !row.readStatus,
icon: ACTION_ICON.ADD,
onClick: handleRead.bind(null, row),
},
]"
/>
</template>
</Grid>
</Page>

View File

@ -1,26 +1,22 @@
<script lang="ts" setup>
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { formatDateTime } from '@vben/utils';
// TODO puhui999:
// import { useDescription } from '#/components/description';
import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
// import { useDetailSchema } from '../data';
//
// const [Description, descApi] = useDescription({
// componentProps: {
// bordered: true,
// column: 1,
// size: 'middle',
// class: 'mx-4',
// },
// schema: useDetailSchema(),
// });
import { DictTag } from '#/components/dict-tag';
const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
//
@ -30,7 +26,7 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
try {
// descApi.setState({ data });
formData.value = data;
} finally {
modalApi.unlock();
}
@ -40,10 +36,36 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal
title="消息详情"
title="站内信详情"
class="w-1/3"
:show-cancel-button="false"
:show-confirm-button="false"
>
<!-- <Description />-->
<ElDescriptions border :column="1" size="default" class="mx-4">
<ElDescriptionsItem label="发送人">
{{ formData?.templateNickname }}
</ElDescriptionsItem>
<ElDescriptionsItem label="发送时间">
{{ formatDateTime(formData?.createTime || '') }}
</ElDescriptionsItem>
<ElDescriptionsItem label="消息类型">
<DictTag
:type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE"
:value="formData?.templateType"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="是否已读">
<DictTag
:type="DICT_TYPE.INFRA_BOOLEAN_STRING"
:value="formData?.readStatus"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="阅读时间">
{{ formatDateTime(formData?.readTime || '') }}
</ElDescriptionsItem>
<ElDescriptionsItem label="消息内容">
{{ formData?.templateContent }}
</ElDescriptionsItem>
</ElDescriptions>
</Modal>
</template>

View File

@ -7,7 +7,7 @@ import { ref } from 'vue';
import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
import { ElMessage } from 'element-plus';
import {ElLoading, ElMessage} from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
@ -60,8 +60,8 @@ function handleSend(row: SystemNotifyTemplateApi.NotifyTemplate) {
/** 删除站内信模板 */
async function handleDelete(row: SystemNotifyTemplateApi.NotifyTemplate) {
const loadingInstance = ElMessage({
message: $t('ui.actionMessage.deleting', [row.name]),
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
});
try {
await deleteNotifyTemplate(row.id as number);
@ -75,8 +75,8 @@ async function handleDelete(row: SystemNotifyTemplateApi.NotifyTemplate) {
/** 批量删除站内信模板 */
async function handleDeleteBatch() {
await confirm($t('ui.actionMessage.deleteBatchConfirm'));
const loadingInstance = ElMessage({
message: $t('ui.actionMessage.deletingBatch'),
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deletingBatch'),
});
try {
await deleteNotifyTemplateList(checkedIds.value);