yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/web-antd/src/api/system/sms/channel/index.ts
View File

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

7
apps/web-antd/src/api/system/sms/log/index.ts
View File

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

20
apps/web-antd/src/api/system/sms/template/index.ts
View File

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

2
apps/web-antd/src/views/system/mail/template/modules/send-form.vue
View File

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

2
apps/web-antd/src/views/system/notify/template/modules/send-form.vue
View File

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

2
apps/web-antd/src/views/system/sms/channel/data.ts
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>, onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] { ): VxeTableGridOptions['columns'] {
return [ return [

8
apps/web-antd/src/views/system/sms/channel/index.vue
View File

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

6
apps/web-antd/src/views/system/sms/channel/modules/form.vue
View File

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

2
apps/web-antd/src/views/system/sms/log/data.ts
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>, onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] { ): VxeTableGridOptions['columns'] {
return [ return [

22
apps/web-antd/src/views/system/sms/log/index.vue
View File

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

95
apps/web-antd/src/views/system/sms/log/modules/detail.vue Normal file
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>

109
apps/web-antd/src/views/system/sms/log/modules/form.vue
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>

2
apps/web-antd/src/views/system/sms/template/data.ts
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>, onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] { ): VxeTableGridOptions['columns'] {
return [ return [

10
apps/web-antd/src/views/system/sms/template/index.vue
View File

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

6
apps/web-antd/src/views/system/sms/template/modules/form.vue
View File

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

78
apps/web-antd/src/views/system/sms/template/modules/send-form.vue
View File

@ -1,46 +1,24 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { SystemSmsTemplateApi } from '#/api/system/sms/template'; import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { ref } from 'vue';
import { useVbenForm } from '#/adapter/form'; import { useVbenForm } from '#/adapter/form';
import { sendSms } from '#/api/system/sms/template'; import { sendSms } from '#/api/system/sms/template';
import { useSendSmsFormSchema } from '../data'; import { useSendSmsFormSchema } from '../data';
const emit = defineEmits(['success']); const emit = defineEmits(['success']);
const templateData = ref<SystemSmsTemplateApi.SmsTemplate>(); const formData = ref<SystemSmsTemplateApi.SystemSmsTemplate>();
// 动态构建表单
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 [Form, formApi] = useVbenForm({ const [Form, formApi] = useVbenForm({
layout: 'horizontal', layout: 'horizontal',
schema: buildSchema(),
showDefaultActions: false, showDefaultActions: false,
commonConfig: {
labelWidth: 120,
},
}); });
const [Modal, modalApi] = useVbenModal({ const [Modal, modalApi] = useVbenModal({
@ -50,24 +28,21 @@ const [Modal, modalApi] = useVbenModal({
return; return;
} }
modalApi.lock(); modalApi.lock();
// 获取表单数据 // 构建发送请求
const values = await formApi.getValues(); const values = await formApi.getValues();
// 提取参数
const paramsObj: Record<string, string> = {}; const paramsObj: Record<string, string> = {};
if (templateData.value?.params) { if (formData.value?.params) {
templateData.value.params.forEach((param) => { formData.value.params.forEach((param) => {
paramsObj[param] = values[`param_${param}`]; paramsObj[param] = values[`param_${param}`];
}); });
} }
const data: SystemSmsTemplateApi.SystemSmsSendReqVO = {
// 构建发送短信请求
const data: SystemSmsTemplateApi.SmsSendReq = {
mobile: values.mobile, mobile: values.mobile,
templateCode: templateData.value?.code || '', templateCode: formData.value?.code || '',
templateParams: paramsObj, templateParams: paramsObj,
}; };
// 提交表单
try { try {
await sendSms(data); await sendSms(data);
// 关闭并提示 // 关闭并提示
@ -88,22 +63,39 @@ const [Modal, modalApi] = useVbenModal({
return; return;
} }
// 获取数据 // 获取数据
const data = modalApi.getData<SystemSmsTemplateApi.SmsTemplate>(); const data = modalApi.getData<SystemSmsTemplateApi.SystemSmsTemplate>();
if (!data) { if (!data) {
return; return;
} }
formData.value = data;
templateData.value = data; // 更新 form schema
// 更新表单结构 const schema = buildFormSchema();
const schema = buildSchema();
formApi.setState({ schema }); formApi.setState({ schema });
// 设置到 values
// 设置表单初始值，包括模板内容
await formApi.setValues({ await formApi.setValues({
content: data.content, 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> </script>
<template> <template>