refactor:优化 sms 短信的实现

pull/67/MERGE
YunaiV 2025-04-04 18:20:59 +08:00
parent 9f352291d7
commit 5705098fc7
16 changed files with 175 additions and 212 deletions

View File

@ -4,7 +4,7 @@ import { requestClient } from '#/api/request';
export namespace SystemSmsChannelApi {
/** 短信渠道信息 */
export interface SmsChannel {
export interface SystemSmsChannel {
id?: number;
code: string;
status: number;
@ -19,7 +19,7 @@ export namespace SystemSmsChannelApi {
/** 查询短信渠道列表 */
export function getSmsChannelPage(params: PageParam) {
return requestClient.get<PageResult<SystemSmsChannelApi.SmsChannel>>(
return requestClient.get<PageResult<SystemSmsChannelApi.SystemSmsChannel>>(
'/system/sms-channel/page',
{ params },
);
@ -27,25 +27,21 @@ export function getSmsChannelPage(params: PageParam) {
/** 获得短信渠道精简列表 */
export function getSimpleSmsChannelList() {
return requestClient.get<SystemSmsChannelApi.SmsChannel[]>(
'/system/sms-channel/simple-list',
);
return requestClient.get<SystemSmsChannelApi.SystemSmsChannel[]>('/system/sms-channel/simple-list');
}
/** 查询短信渠道详情 */
export function getSmsChannel(id: number) {
return requestClient.get<SystemSmsChannelApi.SmsChannel>(
`/system/sms-channel/get?id=${id}`,
);
return requestClient.get<SystemSmsChannelApi.SystemSmsChannel>(`/system/sms-channel/get?id=${id}`);
}
/** 新增短信渠道 */
export function createSmsChannel(data: SystemSmsChannelApi.SmsChannel) {
export function createSmsChannel(data: SystemSmsChannelApi.SystemSmsChannel) {
return requestClient.post('/system/sms-channel/create', data);
}
/** 修改短信渠道 */
export function updateSmsChannel(data: SystemSmsChannelApi.SmsChannel) {
export function updateSmsChannel(data: SystemSmsChannelApi.SystemSmsChannel) {
return requestClient.put('/system/sms-channel/update', data);
}

View File

@ -4,7 +4,7 @@ import { requestClient } from '#/api/request';
export namespace SystemSmsLogApi {
/** 短信日志信息 */
export interface SmsLog {
export interface SystemSmsLog {
id?: number;
channelId?: number;
channelCode: string;
@ -33,10 +33,7 @@ export namespace SystemSmsLogApi {
/** 查询短信日志列表 */
export function getSmsLogPage(params: PageParam) {
return requestClient.get<PageResult<SystemSmsLogApi.SmsLog>>(
'/system/sms-log/page',
{ params },
);
return requestClient.get<PageResult<SystemSmsLogApi.SystemSmsLog>>('/system/sms-log/page', { params });
}
/** 导出短信日志 */

View File

@ -4,7 +4,7 @@ import { requestClient } from '#/api/request';
export namespace SystemSmsTemplateApi {
/** 短信模板信息 */
export interface SmsTemplate {
export interface SystemSmsTemplate {
id?: number;
type?: number;
status: number;
@ -20,7 +20,7 @@ export namespace SystemSmsTemplateApi {
}
/** 发送短信请求 */
export interface SmsSendReq {
export interface SystemSmsSendReqVO {
mobile: string;
templateCode: string;
templateParams: Record<string, any>;
@ -29,7 +29,7 @@ export namespace SystemSmsTemplateApi {
/** 查询短信模板列表 */
export function getSmsTemplatePage(params: PageParam) {
return requestClient.get<PageResult<SystemSmsTemplateApi.SmsTemplate>>(
return requestClient.get<PageResult<SystemSmsTemplateApi.SystemSmsTemplate>>(
'/system/sms-template/page',
{ params },
);
@ -37,18 +37,16 @@ export function getSmsTemplatePage(params: PageParam) {
/** 查询短信模板详情 */
export function getSmsTemplate(id: number) {
return requestClient.get<SystemSmsTemplateApi.SmsTemplate>(
`/system/sms-template/get?id=${id}`,
);
return requestClient.get<SystemSmsTemplateApi.SystemSmsTemplate>(`/system/sms-template/get?id=${id}`);
}
/** 新增短信模板 */
export function createSmsTemplate(data: SystemSmsTemplateApi.SmsTemplate) {
export function createSmsTemplate(data: SystemSmsTemplateApi.SystemSmsTemplate) {
return requestClient.post('/system/sms-template/create', data);
}
/** 修改短信模板 */
export function updateSmsTemplate(data: SystemSmsTemplateApi.SmsTemplate) {
export function updateSmsTemplate(data: SystemSmsTemplateApi.SystemSmsTemplate) {
return requestClient.put('/system/sms-template/update', data);
}
@ -59,12 +57,10 @@ export function deleteSmsTemplate(id: number) {
/** 导出短信模板 */
export function exportSmsTemplate(params: any) {
return requestClient.download('/system/sms-template/export-excel', {
params,
});
return requestClient.download('/system/sms-template/export-excel', { params });
}
/** 发送短信 */
export function sendSms(data: SystemSmsTemplateApi.SmsSendReq) {
export function sendSms(data: SystemSmsTemplateApi.SystemSmsSendReqVO) {
return requestClient.post('/system/sms-template/send-sms', data);
}

View File

@ -25,7 +25,7 @@ const [Modal, modalApi] = useVbenModal({
return;
}
modalApi.lock();
//
//
const values = await formApi.getValues();
const paramsObj: Record<string, string> = {};
if (formData.value?.params) {

View File

@ -30,7 +30,7 @@ const [Modal, modalApi] = useVbenModal({
return;
}
modalApi.lock();
//
//
const values = await formApi.getValues();
const paramsObj: Record<string, string> = {};
if (formData.value?.params) {

View File

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

View File

@ -36,12 +36,12 @@ function onCreate() {
}
/** 编辑短信渠道 */
function onEdit(row: SystemSmsChannelApi.SmsChannel) {
function onEdit(row: SystemSmsChannelApi.SystemSmsChannel) {
formModalApi.setData(row).open();
}
/** 删除短信渠道 */
async function onDelete(row: SystemSmsChannelApi.SmsChannel) {
async function onDelete(row: SystemSmsChannelApi.SystemSmsChannel) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.signature]),
duration: 0,
@ -63,7 +63,7 @@ async function onDelete(row: SystemSmsChannelApi.SmsChannel) {
function onActionClick({
code,
row,
}: OnActionClickParams<SystemSmsChannelApi.SmsChannel>) {
}: OnActionClickParams<SystemSmsChannelApi.SystemSmsChannel>) {
switch (code) {
case 'edit': {
onEdit(row);
@ -102,7 +102,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<SystemSmsChannelApi.SmsChannel>,
} as VxeTableGridOptions<SystemSmsChannelApi.SystemSmsChannel>,
});
</script>

View File

@ -12,7 +12,7 @@ import { getSmsChannel, createSmsChannel, updateSmsChannel } from '#/api/system/
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<SystemSmsChannelApi.SmsChannel>();
const formData = ref<SystemSmsChannelApi.SystemSmsChannel>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['短信渠道'])
@ -36,7 +36,7 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
//
const data = (await formApi.getValues()) as SystemSmsChannelApi.SmsChannel;
const data = (await formApi.getValues()) as SystemSmsChannelApi.SystemSmsChannel;
try {
await (formData.value?.id ? updateSmsChannel(data) : createSmsChannel(data));
//
@ -55,7 +55,7 @@ const [Modal, modalApi] = useVbenModal({
return;
}
//
const data = modalApi.getData<SystemSmsChannelApi.SmsChannel>();
const data = modalApi.getData<SystemSmsChannelApi.SystemSmsChannel>();
if (!data || !data.id) {
return;
}

View File

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

View File

@ -1,13 +1,9 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemSmsLogApi } from '#/api/system/sms/log';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download } from '@vben/icons';
import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
@ -16,10 +12,10 @@ import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import Detail from './modules/detail.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
const [DetailModal, detailModalApi] = useVbenModal({
connectedComponent: Detail,
destroyOnClose: true,
});
@ -35,15 +31,15 @@ async function onExport() {
}
/** 查看短信日志详情 */
function onView(row: SystemSmsLogApi.SmsLog) {
formModalApi.setData(row).open();
function onView(row: SystemSmsLogApi.SystemSmsLog) {
detailModalApi.setData(row).open();
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<SystemSmsLogApi.SmsLog>) {
}: OnActionClickParams<SystemSmsLogApi.SystemSmsLog>) {
switch (code) {
case 'view': {
onView(row);
@ -78,13 +74,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<SystemSmsLogApi.SmsLog>,
} as VxeTableGridOptions<SystemSmsLogApi.SystemSmsLog>,
});
</script>
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<DetailModal @success="onRefresh" />
<Grid table-title="">
<template #toolbar-tools>
<Button type="primary" class="ml-2" @click="onExport">

View File

@ -0,0 +1,95 @@
<script lang="ts" setup>
import type { SystemSmsLogApi } from '#/api/system/sms/log';
import { useVbenModal } from '@vben/common-ui';
import { Descriptions, Tag } from 'ant-design-vue';
import { ref } from 'vue';
import { formatDateTime } from '@vben/utils';
import { DICT_TYPE, getDictLabel } from '#/utils/dict';
const formData = ref<SystemSmsLogApi.SystemSmsLog>();
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
//
const data = modalApi.getData<SystemSmsLogApi.SystemSmsLog>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = data;
} finally {
modalApi.lock(false);
}
},
});
</script>
<template>
<Modal title="短信日志详情" class="w-1/2">
<Descriptions bordered :column="2" size="middle" class="mx-4">
<Descriptions.Item label="创建时间">
{{ formatDateTime(formData?.createTime || '') }}
</Descriptions.Item>
<Descriptions.Item label="手机号">
{{ formData?.mobile }}
</Descriptions.Item>
<Descriptions.Item label="短信渠道">
{{ formData?.channelCode }}
</Descriptions.Item>
<Descriptions.Item label="模板编号">
{{ formData?.templateId }}
</Descriptions.Item>
<Descriptions.Item label="模板类型">
<!-- TODO @芋艿: 数据字典-->
<Tag color="processing">
{{ getDictLabel(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, formData?.templateType) }}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="短信内容">
{{ formData?.templateContent }}
</Descriptions.Item>
<Descriptions.Item label="发送状态">
<!-- TODO @芋艿: 数据字典-->
<Tag color="processing">
{{ getDictLabel(DICT_TYPE.SYSTEM_SMS_SEND_STATUS, formData?.sendStatus) }}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="发送时间">
{{ formatDateTime(formData?.sendTime || '') }}
</Descriptions.Item>
<Descriptions.Item label="API 发送编码">
{{ formData?.apiSendCode }}
</Descriptions.Item>
<Descriptions.Item label="API 发送消息">
{{ formData?.apiSendMsg }}
</Descriptions.Item>
<Descriptions.Item label="接收状态">
<!-- TODO @芋艿: 数据字典-->
<Tag color="processing">
{{ getDictLabel(DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS, formData?.receiveStatus) }}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="接收时间">
{{ formatDateTime(formData?.receiveTime || '') }}
</Descriptions.Item>
<Descriptions.Item label="API 接收编码">
{{ formData?.apiReceiveCode }}
</Descriptions.Item>
<Descriptions.Item label="API 接收消息" :span="2">
{{ formData?.apiReceiveMsg }}
</Descriptions.Item>
<Descriptions.Item label="API 请求 ID">
{{ formData?.apiRequestId }}
</Descriptions.Item>
<Descriptions.Item label="API 序列号">
{{ formData?.apiSerialNo }}
</Descriptions.Item>
</Descriptions>
</Modal>
</template>

View File

@ -1,109 +0,0 @@
<script lang="ts" setup>
import type { SystemSmsLogApi } from '#/api/system/sms/log';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils';
import { Descriptions, Tag } from 'ant-design-vue';
import { DICT_TYPE, getDictLabel } from '#/utils/dict';
const formData = ref<SystemSmsLogApi.SmsLog>();
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
//
const data = modalApi.getData<SystemSmsLogApi.SmsLog>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = data;
} finally {
modalApi.lock(false);
}
},
});
</script>
<template>
<Modal title="短信日志详情">
<div class="p-4">
<Descriptions
:column="{ xxl: 3, xl: 3, lg: 3, md: 2, sm: 2, xs: 1 }"
bordered
>
<Descriptions.Item label="创建时间">
{{ formatDateTime(formData?.createTime || '') }}
</Descriptions.Item>
<Descriptions.Item label="手机号">
{{ formData?.mobile }}
</Descriptions.Item>
<Descriptions.Item label="短信渠道">
{{ formData?.channelCode }}
</Descriptions.Item>
<Descriptions.Item label="模板编号">
{{ formData?.templateId }}
</Descriptions.Item>
<Descriptions.Item label="模板类型">
{{ formData?.templateType }}
</Descriptions.Item>
<Descriptions.Item label="短信内容" :span="3">
{{ formData?.templateContent }}
</Descriptions.Item>
<Descriptions.Item label="发送状态">
<!-- TODO @芋艿: 数据字典-->
<Tag color="processing">
{{
getDictLabel(
DICT_TYPE.SYSTEM_SMS_SEND_STATUS,
formData?.sendStatus,
)
}}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="发送时间">
{{ formatDateTime(formData?.sendTime || '') }}
</Descriptions.Item>
<Descriptions.Item label="API发送编码">
{{ formData?.apiSendCode }}
</Descriptions.Item>
<Descriptions.Item label="API发送消息" :span="2">
{{ formData?.apiSendMsg }}
</Descriptions.Item>
<Descriptions.Item label="接收状态">
<!-- TODO @芋艿: 数据字典-->
<Tag color="processing">
{{
getDictLabel(
DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS,
formData?.receiveStatus,
)
}}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="接收时间">
{{ formatDateTime(formData?.receiveTime || '') }}
</Descriptions.Item>
<Descriptions.Item label="API接收编码">
{{ formData?.apiReceiveCode }}
</Descriptions.Item>
<Descriptions.Item label="API接收消息" :span="2">
{{ formData?.apiReceiveMsg }}
</Descriptions.Item>
<Descriptions.Item label="API请求ID">
{{ formData?.apiRequestId }}
</Descriptions.Item>
<Descriptions.Item label="API序列号">
{{ formData?.apiSerialNo }}
</Descriptions.Item>
</Descriptions>
</div>
</Modal>
</template>

View File

@ -198,7 +198,7 @@ export function useSendSmsFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = SystemSmsTemplateApi.SmsTemplate>(
export function useGridColumns<T = SystemSmsTemplateApi.SystemSmsTemplate>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
return [

View File

@ -42,17 +42,17 @@ function onCreate() {
}
/** 编辑短信模板 */
function onEdit(row: SystemSmsTemplateApi.SmsTemplate) {
function onEdit(row: SystemSmsTemplateApi.SystemSmsTemplate) {
formModalApi.setData(row).open();
}
/** 发送测试短信 */
function onSend(row: SystemSmsTemplateApi.SmsTemplate) {
function onSend(row: SystemSmsTemplateApi.SystemSmsTemplate) {
sendModalApi.setData(row).open();
}
/** 删除短信模板 */
async function onDelete(row: SystemSmsTemplateApi.SmsTemplate) {
async function onDelete(row: SystemSmsTemplateApi.SystemSmsTemplate) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
@ -74,7 +74,7 @@ async function onDelete(row: SystemSmsTemplateApi.SmsTemplate) {
function onActionClick({
code,
row,
}: OnActionClickParams<SystemSmsTemplateApi.SmsTemplate>) {
}: OnActionClickParams<SystemSmsTemplateApi.SystemSmsTemplate>) {
switch (code) {
case 'edit': {
onEdit(row);
@ -117,7 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<SystemSmsTemplateApi.SmsTemplate>,
} as VxeTableGridOptions<SystemSmsTemplateApi.SystemSmsTemplate>,
});
</script>

View File

@ -12,7 +12,7 @@ import { createSmsTemplate, getSmsTemplate, updateSmsTemplate } from '#/api/syst
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<SystemSmsTemplateApi.SmsTemplate>();
const formData = ref<SystemSmsTemplateApi.SystemSmsTemplate>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['短信模板'])
@ -37,7 +37,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
//
const data =
(await formApi.getValues()) as SystemSmsTemplateApi.SmsTemplate;
(await formApi.getValues()) as SystemSmsTemplateApi.SystemSmsTemplate;
try {
await (formData.value?.id
? updateSmsTemplate(data)
@ -58,7 +58,7 @@ const [Modal, modalApi] = useVbenModal({
return;
}
//
const data = modalApi.getData<SystemSmsTemplateApi.SmsTemplate>();
const data = modalApi.getData<SystemSmsTemplateApi.SystemSmsTemplate>();
if (!data || !data.id) {
return;
}

View File

@ -1,46 +1,24 @@
<script lang="ts" setup>
import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { sendSms } from '#/api/system/sms/template';
import { useSendSmsFormSchema } from '../data';
const emit = defineEmits(['success']);
const templateData = ref<SystemSmsTemplateApi.SmsTemplate>();
//
const buildSchema = () => {
const schema = useSendSmsFormSchema();
//
if (templateData.value?.params && templateData.value.params.length > 0) {
templateData.value.params.forEach((param) => {
schema.push({
fieldName: `param_${param}`,
label: `参数 ${param}`,
component: 'Input',
componentProps: {
placeholder: '请输入',
},
rules: 'required',
});
});
}
return schema;
};
const formData = ref<SystemSmsTemplateApi.SystemSmsTemplate>();
const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: buildSchema(),
showDefaultActions: false,
commonConfig: {
labelWidth: 120,
},
});
const [Modal, modalApi] = useVbenModal({
@ -50,24 +28,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: SystemSmsTemplateApi.SmsSendReq = {
const data: SystemSmsTemplateApi.SystemSmsSendReqVO = {
mobile: values.mobile,
templateCode: templateData.value?.code || '',
templateCode: formData.value?.code || '',
templateParams: paramsObj,
};
//
try {
await sendSms(data);
//
@ -88,22 +63,39 @@ const [Modal, modalApi] = useVbenModal({
return;
}
//
const data = modalApi.getData<SystemSmsTemplateApi.SmsTemplate>();
const data = modalApi.getData<SystemSmsTemplateApi.SystemSmsTemplate>();
if (!data) {
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,
});
},
});
/** 动态构建表单 schema */
const buildFormSchema = () => {
const schema = useSendSmsFormSchema();
if (formData.value?.params) {
formData.value.params.forEach((param) => {
schema.push({
fieldName: `param_${param}`,
label: `参数 ${param}`,
component: 'Input',
componentProps: {
placeholder: `请输入参数 ${param}`,
},
rules: 'required',
});
});
}
return schema;
};
</script>
<template>