refactor:优化 notify 站内信的实现

pull/67/MERGE
YunaiV 2025-04-04 18:02:02 +08:00
parent a59c3bed8a
commit 9f352291d7
15 changed files with 106 additions and 150 deletions

View File

@ -4,7 +4,7 @@ import { requestClient } from '#/api/request';
export namespace SystemNotifyMessageApi {
/** 站内信消息信息 */
export interface NotifyMessage {
export interface SystemNotifyMessage {
id: number;
userId: number;
userType: number;
@ -22,7 +22,7 @@ export namespace SystemNotifyMessageApi {
/** 查询站内信消息列表 */
export function getNotifyMessagePage(params: PageParam) {
return requestClient.get<PageResult<SystemNotifyMessageApi.NotifyMessage>>(
return requestClient.get<PageResult<SystemNotifyMessageApi.SystemNotifyMessage>>(
'/system/notify-message/page',
{ params },
);
@ -30,7 +30,7 @@ export function getNotifyMessagePage(params: PageParam) {
/** 获得我的站内信分页 */
export function getMyNotifyMessagePage(params: PageParam) {
return requestClient.get<PageResult<SystemNotifyMessageApi.NotifyMessage>>(
return requestClient.get<PageResult<SystemNotifyMessageApi.SystemNotifyMessage>>(
'/system/notify-message/my-page',
{ params },
);
@ -48,9 +48,7 @@ export function updateAllNotifyMessageRead() {
/** 获取当前用户的最新站内信列表 */
export function getUnreadNotifyMessageList() {
return requestClient.get<SystemNotifyMessageApi.NotifyMessage[]>(
'/system/notify-message/get-unread-list',
);
return requestClient.get<SystemNotifyMessageApi.SystemNotifyMessage[]>('/system/notify-message/get-unread-list');
}
/** 获得当前用户的未读站内信数量 */

View File

@ -4,7 +4,7 @@ import { requestClient } from '#/api/request';
export namespace SystemNotifyTemplateApi {
/** 站内信模板信息 */
export interface NotifyTemplate {
export interface SystemNotifyTemplate {
id?: number;
name: string;
nickname: string;
@ -17,7 +17,7 @@ export namespace SystemNotifyTemplateApi {
}
/** 发送站内信请求 */
export interface NotifySendReq {
export interface SystemNotifySendReqVO {
userId: number;
templateCode: string;
templateParams: Record<string, any>;
@ -26,7 +26,7 @@ export namespace SystemNotifyTemplateApi {
/** 查询站内信模板列表 */
export function getNotifyTemplatePage(params: PageParam) {
return requestClient.get<PageResult<SystemNotifyTemplateApi.NotifyTemplate>>(
return requestClient.get<PageResult<SystemNotifyTemplateApi.SystemNotifyTemplate>>(
'/system/notify-template/page',
{ params },
);
@ -34,22 +34,16 @@ export function getNotifyTemplatePage(params: PageParam) {
/** 查询站内信模板详情 */
export function getNotifyTemplate(id: number) {
return requestClient.get<SystemNotifyTemplateApi.NotifyTemplate>(
`/system/notify-template/get?id=${id}`,
);
return requestClient.get<SystemNotifyTemplateApi.SystemNotifyTemplate>(`/system/notify-template/get?id=${id}`);
}
/** 新增站内信模板 */
export function createNotifyTemplate(
data: SystemNotifyTemplateApi.NotifyTemplate,
) {
export function createNotifyTemplate(data: SystemNotifyTemplateApi.SystemNotifyTemplate) {
return requestClient.post('/system/notify-template/create', data);
}
/** 修改站内信模板 */
export function updateNotifyTemplate(
data: SystemNotifyTemplateApi.NotifyTemplate,
) {
export function updateNotifyTemplate(data: SystemNotifyTemplateApi.SystemNotifyTemplate) {
return requestClient.put('/system/notify-template/update', data);
}
@ -60,12 +54,10 @@ export function deleteNotifyTemplate(id: number) {
/** 导出站内信模板 */
export function exportNotifyTemplate(params: any) {
return requestClient.download('/system/notify-template/export-excel', {
params,
});
return requestClient.download('/system/notify-template/export-excel', { params });
}
/** 发送站内信 */
export function sendNotify(data: SystemNotifyTemplateApi.NotifySendReq) {
export function sendNotify(data: SystemNotifyTemplateApi.SystemNotifySendReqVO) {
return requestClient.post('/system/notify-template/send-notify', data);
}

View File

@ -3,15 +3,15 @@ import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-tab
import type { SystemMailLogApi } from '#/api/system/mail/log';
import { Page, useVbenModal } from '@vben/common-ui';
import Form from './modules/form.vue';
import Detail from './modules/detail.vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getMailLogPage } from '#/api/system/mail/log';
import { useGridColumns, useGridFormSchema } from './data';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
const [DetailModal, detailModalApi] = useVbenModal({
connectedComponent: Detail,
destroyOnClose: true,
});
@ -22,7 +22,7 @@ function onRefresh() {
/** 查看邮件日志 */
function onView(row: SystemMailLogApi.SystemMailLog) {
formModalApi.setData(row).open();
detailModalApi.setData(row).open();
}
/** 表格操作按钮的回调函数 */
@ -69,7 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
</script>
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<DetailModal @success="onRefresh" />
<Grid table-title="">
<template #toolbar-tools> </template>
</Grid>

View File

@ -78,7 +78,7 @@ const [Modal, modalApi] = useVbenModal({
/** 动态构建表单 schema */
const buildFormSchema = () => {
const schema = useSendMailFormSchema();
if (formData.value?.params?.length > 0) {
if (formData.value?.params) {
formData.value.params?.forEach((param: string) => {
schema.push({
fieldName: `param_${param}`,

View File

@ -60,7 +60,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = SystemNotifyMessageApi.NotifyMessage>(
export function useGridColumns<T = SystemNotifyMessageApi.SystemNotifyMessage>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
return [
@ -98,6 +98,7 @@ export function useGridColumns<T = SystemNotifyMessageApi.NotifyMessage>(
title: '模版内容',
minWidth: 200,
},
// TODO @puhui999这个参数展示不对
{
field: 'templateParams',
title: '模版参数',

View File

@ -1,17 +1,14 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
import { Page, useVbenModal } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getNotifyMessagePage } from '#/api/system/notify/message';
import Detail from './modules/detail.vue';
import { useGridColumns, useGridFormSchema } from './data';
import Detail from './modules/detail.vue';
const [DetailModal, detailModalApi] = useVbenModal({
connectedComponent: Detail,
@ -24,7 +21,7 @@ function onRefresh() {
}
/** 查看站内信详情 */
function onView(row: SystemNotifyMessageApi.NotifyMessage) {
function onView(row: SystemNotifyMessageApi.SystemNotifyMessage) {
detailModalApi.setData(row).open();
}
@ -32,7 +29,7 @@ function onView(row: SystemNotifyMessageApi.NotifyMessage) {
function onActionClick({
code,
row,
}: OnActionClickParams<SystemNotifyMessageApi.NotifyMessage>) {
}: OnActionClickParams<SystemNotifyMessageApi.SystemNotifyMessage>) {
switch (code) {
case 'view': {
onView(row);
@ -67,9 +64,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<SystemNotifyMessageApi.NotifyMessage>,
} as VxeTableGridOptions<SystemNotifyMessageApi.SystemNotifyMessage>,
});
</script>
<template>
<Page auto-content-height>
<DetailModal @success="onRefresh" />

View File

@ -8,7 +8,7 @@ import { ref } from 'vue';
import { formatDateTime } from '@vben/utils';
import { DICT_TYPE, getDictLabel } from '#/utils/dict';
const messageData = ref<SystemNotifyMessageApi.NotifyMessage>();
const messageData = ref<SystemNotifyMessageApi.SystemNotifyMessage>();
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
@ -16,7 +16,7 @@ const [Modal, modalApi] = useVbenModal({
return;
}
//
const data = modalApi.getData<SystemNotifyMessageApi.NotifyMessage>();
const data = modalApi.getData<SystemNotifyMessageApi.SystemNotifyMessage>();
if (!data || !data.id) {
return;
}
@ -31,7 +31,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal title="站内信详情">
<Modal title="站内信详情" class="w-1/2">
<Descriptions bordered :column="1" size="middle" class="mx-4">
<Descriptions.Item label="编号">{{ messageData?.id }}</Descriptions.Item>
<Descriptions.Item label="用户类型">
@ -61,23 +61,13 @@ const [Modal, modalApi] = useVbenModal({
<Descriptions.Item label="模版类型">
<!-- TODO @芋艿: 数据字典-->
<Tag color="processing">
{{
getDictLabel(
DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
messageData?.templateType,
)
}}
{{ getDictLabel(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE, messageData?.templateType) }}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="是否已读">
<!-- TODO @芋艿: 数据字典-->
<Tag color="processing">
{{
getDictLabel(
DICT_TYPE.INFRA_BOOLEAN_STRING,
messageData?.readStatus,
)
}}
{{ getDictLabel(DICT_TYPE.INFRA_BOOLEAN_STRING, messageData?.readStatus) }}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="阅读时间">

View File

@ -29,7 +29,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = SystemNotifyMessageApi.NotifyMessage>(
export function useGridColumns<T = SystemNotifyMessageApi.SystemNotifyMessage>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
return [

View File

@ -1,4 +1,5 @@
<script lang="ts" setup>
// TODO @puhui999vben vben
import type {
OnActionClickParams,
VxeTableGridOptions,
@ -30,7 +31,7 @@ function onRefresh() {
}
/** 查看站内信详情 */
function onView(row: SystemNotifyMessageApi.NotifyMessage) {
function onView(row: SystemNotifyMessageApi.SystemNotifyMessage) {
//
if (!row.readStatus) {
handleReadOne(row.id);
@ -55,7 +56,7 @@ async function onMarkRead() {
return;
}
const ids = rows.map((row: SystemNotifyMessageApi.NotifyMessage) => row.id);
const ids = rows.map((row: SystemNotifyMessageApi.SystemNotifyMessage) => row.id);
const hideLoading = message.loading({
content: '正在标记已读...',
duration: 0,
@ -98,7 +99,7 @@ async function onMarkAllRead() {
function onActionClick({
code,
row,
}: OnActionClickParams<SystemNotifyMessageApi.NotifyMessage>) {
}: OnActionClickParams<SystemNotifyMessageApi.SystemNotifyMessage>) {
switch (code) {
case 'view': {
onView(row);
@ -108,7 +109,7 @@ function onActionClick({
}
//
function checkboxConfig(params: { row: SystemNotifyMessageApi.NotifyMessage }) {
function checkboxConfig(params: { row: SystemNotifyMessageApi.SystemNotifyMessage }) {
return !params.row.readStatus;
}
@ -141,7 +142,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
checkboxConfig: {
checkMethod: checkboxConfig,
},
} as VxeTableGridOptions<SystemNotifyMessageApi.NotifyMessage>,
} as VxeTableGridOptions<SystemNotifyMessageApi.SystemNotifyMessage>,
});
</script>
<template>

View File

@ -8,7 +8,7 @@ import { ref } from 'vue';
import { formatDateTime } from '@vben/utils';
import { DICT_TYPE, getDictLabel } from '#/utils/dict';
const messageData = ref<SystemNotifyMessageApi.NotifyMessage>();
const messageData = ref<SystemNotifyMessageApi.SystemNotifyMessage>();
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
@ -16,7 +16,7 @@ const [Modal, modalApi] = useVbenModal({
return;
}
//
const data = modalApi.getData<SystemNotifyMessageApi.NotifyMessage>();
const data = modalApi.getData<SystemNotifyMessageApi.SystemNotifyMessage>();
if (!data || !data.id) {
return;
}

View File

@ -155,15 +155,6 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
disabled: true,
},
},
{
fieldName: 'userId',
label: '用户编号',
component: 'Input',
componentProps: {
placeholder: '请输入用户编号',
},
rules: 'required',
},
{
fieldName: 'templateCode',
label: '模板编码',
@ -173,6 +164,15 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
show: () => false,
},
},
{
fieldName: 'userId',
label: '用户编号',
component: 'Input',
componentProps: {
placeholder: '请输入用户编号',
},
rules: 'required',
},
{
fieldName: 'templateParams',
label: '模板参数',
@ -186,7 +186,7 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = SystemNotifyTemplateApi.NotifyTemplate>(
export function useGridColumns<T = SystemNotifyTemplateApi.SystemNotifyTemplate>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
return [
@ -258,9 +258,9 @@ export function useGridColumns<T = SystemNotifyTemplateApi.NotifyTemplate>(
},
name: 'CellOperation',
options: [
{ code: 'edit', text: '编辑' },
{ code: 'notify-send', text: '测试' },
{ code: 'delete', text: '删除' },
'edit', // 默认的编辑按钮
{ code: 'send', text: '测试' },
'delete', // 默认的删除按钮
],
},
},

View File

@ -1,8 +1,5 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
import { Page, useVbenModal } from '@vben/common-ui';
@ -11,13 +8,9 @@ import { Button, message } from 'ant-design-vue';
import Form from './modules/form.vue';
import SendForm from './modules/send-form.vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteNotifyTemplate,
exportNotifyTemplate,
getNotifyTemplatePage,
} from '#/api/system/notify/template';
import { $t } from '#/locales';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteNotifyTemplate, exportNotifyTemplate, getNotifyTemplatePage } from '#/api/system/notify/template';
import { downloadByData } from '#/utils/download';
import { useGridColumns, useGridFormSchema } from './data';
@ -49,17 +42,17 @@ function onCreate() {
}
/** 编辑站内信模板 */
function onEdit(row: SystemNotifyTemplateApi.NotifyTemplate) {
function onEdit(row: SystemNotifyTemplateApi.SystemNotifyTemplate) {
formModalApi.setData(row).open();
}
/** 发送测试站内信 */
function onSend(row: SystemNotifyTemplateApi.NotifyTemplate) {
function onSend(row: SystemNotifyTemplateApi.SystemNotifyTemplate) {
sendModalApi.setData(row).open();
}
/** 删除站内信模板 */
async function onDelete(row: SystemNotifyTemplateApi.NotifyTemplate) {
async function onDelete(row: SystemNotifyTemplateApi.SystemNotifyTemplate) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
@ -81,17 +74,17 @@ async function onDelete(row: SystemNotifyTemplateApi.NotifyTemplate) {
function onActionClick({
code,
row,
}: OnActionClickParams<SystemNotifyTemplateApi.NotifyTemplate>) {
}: OnActionClickParams<SystemNotifyTemplateApi.SystemNotifyTemplate>) {
switch (code) {
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
case 'notify-send': {
case 'delete': {
onDelete(row);
break;
}
case 'send': {
onSend(row);
break;
}
@ -124,9 +117,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<SystemNotifyTemplateApi.NotifyTemplate>,
} as VxeTableGridOptions<SystemNotifyTemplateApi.SystemNotifyTemplate>,
});
</script>
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />

View File

@ -7,16 +7,12 @@ import { message } from 'ant-design-vue';
import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import {
createNotifyTemplate,
getNotifyTemplate,
updateNotifyTemplate,
} from '#/api/system/notify/template';
import { createNotifyTemplate, getNotifyTemplate, updateNotifyTemplate } from '#/api/system/notify/template';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<SystemNotifyTemplateApi.NotifyTemplate>();
const formData = ref<SystemNotifyTemplateApi.SystemNotifyTemplate>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['站内信模板'])
@ -27,9 +23,6 @@ const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
commonConfig: {
labelWidth: 120,
},
});
const [Modal, modalApi] = useVbenModal({
@ -40,12 +33,9 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
//
const data =
(await formApi.getValues()) as SystemNotifyTemplateApi.NotifyTemplate;
const data = (await formApi.getValues()) as SystemNotifyTemplateApi.SystemNotifyTemplate;
try {
await (formData.value?.id
? updateNotifyTemplate(data)
: createNotifyTemplate(data));
await (formData.value?.id ? updateNotifyTemplate(data) : createNotifyTemplate(data));
//
await modalApi.close();
emit('success');
@ -62,7 +52,7 @@ const [Modal, modalApi] = useVbenModal({
return;
}
//
const data = modalApi.getData<SystemNotifyTemplateApi.NotifyTemplate>();
const data = modalApi.getData<SystemNotifyTemplateApi.SystemNotifyTemplate>();
if (!data || !data.id) {
return;
}

View File

@ -4,7 +4,7 @@ import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { computed, ref } from 'vue';
import { ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { sendNotify } from '#/api/system/notify/template';
import { $t } from '#/locales';
@ -12,39 +12,17 @@ import { $t } from '#/locales';
import { useSendNotifyFormSchema } from '../data';
const emit = defineEmits(['success']);
const templateData = ref<SystemNotifyTemplateApi.NotifyTemplate>();
const getTitle = computed(() => {
return $t('ui.actionTitle.send', ['站内信']);
});
//
const buildSchema = () => {
const schema = useSendNotifyFormSchema();
//
if (templateData.value?.params) {
templateData.value.params.forEach((param) => {
schema.push({
fieldName: `param_${param}`,
label: `参数 ${param}`,
component: 'Input',
rules: 'required',
});
});
}
return schema;
};
const formData = ref<SystemNotifyTemplateApi.SystemNotifyTemplate>();
const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: buildSchema(),
showDefaultActions: false,
commonConfig: {
labelWidth: 120,
},
});
// TODO @puhui999
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
@ -52,24 +30,21 @@ const [Modal, modalApi] = useVbenModal({
return;
}
modalApi.lock();
//
//
const values = await formApi.getValues();
//
const paramsObj: Record<string, string> = {};
if (templateData.value?.params) {
templateData.value.params.forEach((param) => {
if (formData.value?.params) {
formData.value.params.forEach((param) => {
paramsObj[param] = values[`param_${param}`];
});
}
//
const data: SystemNotifyTemplateApi.NotifySendReq = {
const data: SystemNotifyTemplateApi.SystemNotifySendReqVO = {
userId: values.userId,
templateCode: templateData.value?.code || '',
templateCode: formData.value?.code || '',
templateParams: paramsObj,
};
//
try {
await sendNotify(data);
//
@ -90,27 +65,44 @@ const [Modal, modalApi] = useVbenModal({
return;
}
//
const data = modalApi.getData<SystemNotifyTemplateApi.NotifyTemplate>();
const data = modalApi.getData<SystemNotifyTemplateApi.SystemNotifyTemplate>();
if (!data || !data.id) {
return;
}
templateData.value = data;
//
const schema = buildSchema();
formData.value = data;
// form schema
const schema = buildFormSchema();
formApi.setState({ schema });
//
// values
await formApi.setValues({
content: data.content,
templateCode: data.code,
});
},
});
/** 动态构建表单 schema */
const buildFormSchema = () => {
const schema = useSendNotifyFormSchema();
if (formData.value?.params) {
formData.value.params.forEach((param: string) => {
schema.push({
fieldName: `param_${param}`,
label: `参数 ${param}`,
component: 'Input',
rules: 'required',
componentProps: {
placeholder: `请输入参数 ${param}`,
}
});
});
}
return schema;
};
</script>
<template>
<Modal :title="getTitle">
<Modal title="测试发送站内信">
<Form class="mx-4" />
</Modal>
</template>