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: 短信管理相关模块

pull/66/head
puhui999 2025-04-04 12:37:12 +08:00
parent ce18a22637
commit 28d1df74ad
8 changed files with 141 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,12 +27,16 @@ export function getSmsChannelPage(params: PageParam) {
/** 获得短信渠道精简列表 */ /** 获得短信渠道精简列表 */
export function getSimpleSmsChannelList() { export function getSimpleSmsChannelList() {
return requestClient.get<SystemSmsChannelApi.SmsChannel[]>('/system/sms-channel/simple-list'); return requestClient.get<SystemSmsChannelApi.SmsChannel[]>(
'/system/sms-channel/simple-list',
);
} }
/** 查询短信渠道详情 */ /** 查询短信渠道详情 */
export function getSmsChannel(id: number) { export function getSmsChannel(id: number) {
return requestClient.get<SystemSmsChannelApi.SmsChannel>(`/system/sms-channel/get?id=${id}`); return requestClient.get<SystemSmsChannelApi.SmsChannel>(
`/system/sms-channel/get?id=${id}`,
);
} }
/** 新增短信渠道 */ /** 新增短信渠道 */

13
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 SmsLogVO { export interface SmsLog {
id?: number; id?: number;
channelId?: number; channelId?: number;
channelCode: string; channelCode: string;
@ -18,22 +18,25 @@ export namespace SystemSmsLogApi {
userId?: number; userId?: number;
userType?: number; userType?: number;
sendStatus?: number; sendStatus?: number;
sendTime?: Date; sendTime?: string;
apiSendCode: string; apiSendCode: string;
apiSendMsg: string; apiSendMsg: string;
apiRequestId: string; apiRequestId: string;
apiSerialNo: string; apiSerialNo: string;
receiveStatus?: number; receiveStatus?: number;
receiveTime?: Date; receiveTime?: string;
apiReceiveCode: string; apiReceiveCode: string;
apiReceiveMsg: string; apiReceiveMsg: string;
createTime?: Date; createTime: string;
} }
} }
/** 查询短信日志列表 */ /** 查询短信日志列表 */
export function getSmsLogPage(params: PageParam) { export function getSmsLogPage(params: PageParam) {
return requestClient.get<PageResult<SystemSmsLogApi.SmsLogVO>>('/system/sms-log/page', { params }); return requestClient.get<PageResult<SystemSmsLogApi.SmsLog>>(
'/system/sms-log/page',
{ params },
);
} }
/** 导出短信日志 */ /** 导出短信日志 */

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

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

6
apps/web-antd/src/views/system/sms/log/data.ts
View File

@ -15,7 +15,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: { componentProps: {
allowClear: true, allowClear: true,
placeholder: '请输入手机号', placeholder: '请输入手机号',
} },
}, },
{ {
fieldName: 'channelId', fieldName: 'channelId',
@ -36,7 +36,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: { componentProps: {
allowClear: true, allowClear: true,
placeholder: '请输入模板编号', placeholder: '请输入模板编号',
} },
}, },
{ {
fieldName: 'sendStatus', fieldName: 'sendStatus',
@ -80,7 +80,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
} }
/** 列表的字段 */ /** 列表的字段 */
export function useGridColumns<T = SystemSmsLogApi.SmsLogVO>( export function useGridColumns<T = SystemSmsLogApi.SmsLog>(
onActionClick: OnActionClickFn<T>, onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] { ): VxeTableGridOptions['columns'] {
return [ return [

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

@ -1,18 +1,22 @@
<script lang="ts" setup> <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 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 Form from './modules/form.vue';
import { $t } from '#/locales'; import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table'; import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { exportSmsLog, getSmsLogPage } from '#/api/system/sms/log'; import { exportSmsLog, getSmsLogPage } from '#/api/system/sms/log';
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';
const [FormModal, formModalApi] = useVbenModal({ const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form, connectedComponent: Form,
@ -31,7 +35,7 @@ async function onExport() {
} }
/** 查看短信日志详情 */ /** 查看短信日志详情 */
function onView(row: SystemSmsLogApi.SmsLogVO) { function onView(row: SystemSmsLogApi.SmsLog) {
formModalApi.setData(row).open(); formModalApi.setData(row).open();
} }
@ -39,7 +43,7 @@ function onView(row: SystemSmsLogApi.SmsLogVO) {
function onActionClick({ function onActionClick({
code, code,
row, row,
}: OnActionClickParams<SystemSmsLogApi.SmsLogVO>) { }: OnActionClickParams<SystemSmsLogApi.SmsLog>) {
switch (code) { switch (code) {
case 'view': { case 'view': {
onView(row); onView(row);
@ -74,7 +78,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
refresh: { code: 'query' }, refresh: { code: 'query' },
search: true, search: true,
}, },
} as VxeTableGridOptions<SystemSmsLogApi.SmsLogVO>, } as VxeTableGridOptions<SystemSmsLogApi.SmsLog>,
}); });
</script> </script>

170
apps/web-antd/src/views/system/sms/log/modules/form.vue
View File

@ -1,11 +1,16 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { SystemSmsLogApi } from '#/api/system/sms/log'; import type { SystemSmsLogApi } from '#/api/system/sms/log';
import { useVbenModal } from '@vben/common-ui';
import { ref } from 'vue'; import { ref } from 'vue';
const formData = ref<SystemSmsLogApi.SmsLogVO>(); 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({ const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) { async onOpenChange(isOpen: boolean) {
@ -13,7 +18,7 @@ const [Modal, modalApi] = useVbenModal({
return; return;
} }
// 加载数据 // 加载数据
const data = modalApi.getData<SystemSmsLogApi.SmsLogVO>(); const data = modalApi.getData<SystemSmsLogApi.SmsLog>();
if (!data || !data.id) { if (!data || !data.id) {
return; return;
} }
@ -27,97 +32,78 @@ const [Modal, modalApi] = useVbenModal({
}); });
</script> </script>
<!-- TODO @puhui999：https://ant-design.antgroup.com/components/descriptions-cn 参考这个？ -->
<template> <template>
<Modal title="短信日志详情"> <Modal title="短信日志详情">
<div class="p-4"> <div class="p-4">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2"> <Descriptions
<div class="form-item"> :column="{ xxl: 3, xl: 3, lg: 3, md: 2, sm: 2, xs: 1 }"
<div class="form-label">编号：</div> bordered
<div>{{ formData?.id }}</div> >
</div> <Descriptions.Item label="创建时间">
<div class="form-item"> {{ formatDateTime(formData?.createTime || '') }}
<!-- TODO @puhui：格式不对 --> </Descriptions.Item>
<div class="form-label">创建时间：</div> <Descriptions.Item label="手机号">
<div>{{ formData?.createTime }}</div> {{ formData?.mobile }}
</div> </Descriptions.Item>
<div class="form-item"> <Descriptions.Item label="短信渠道">
<div class="form-label">手机号：</div> {{ formData?.channelCode }}
<div>{{ formData?.mobile }}</div> </Descriptions.Item>
</div> <Descriptions.Item label="模板编号">
<div class="form-item"> {{ formData?.templateId }}
<div class="form-label">短信渠道：</div> </Descriptions.Item>
<div>{{ formData?.channelCode }}</div> <Descriptions.Item label="模板类型">
</div> {{ formData?.templateType }}
<div class="form-item"> </Descriptions.Item>
<div class="form-label">模板编号：</div> <Descriptions.Item label="短信内容" :span="3">
<div>{{ formData?.templateId }}</div> {{ formData?.templateContent }}
</div> </Descriptions.Item>
<div class="form-item"> <Descriptions.Item label="发送状态">
<div class="form-label">模板类型：</div> <!-- TODO @芋艿: 数据字典-->
<div>{{ formData?.templateType }}</div> <Tag color="processing">
</div> {{
</div> getDictLabel(
DICT_TYPE.SYSTEM_SMS_SEND_STATUS,
<div class="mt-4"> formData?.sendStatus,
<div class="form-label">短信内容：</div> )
<div>{{ formData?.templateContent }}</div> }}
</div> </Tag>
</Descriptions.Item>
<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2"> <Descriptions.Item label="发送时间">
<div class="form-item"> {{ formatDateTime(formData?.sendTime || '') }}
<!-- TODO @puhui：格式不对 --> </Descriptions.Item>
<div class="form-label">发送状态：</div> <Descriptions.Item label="API发送编码">
<div>{{ formData?.sendStatus }}</div> {{ formData?.apiSendCode }}
</div> </Descriptions.Item>
<div class="form-item"> <Descriptions.Item label="API发送消息" :span="2">
<div class="form-label">发送时间：</div> {{ formData?.apiSendMsg }}
<div>{{ formData?.sendTime }}</div> </Descriptions.Item>
</div> <Descriptions.Item label="接收状态">
<div class="form-item"> <!-- TODO @芋艿: 数据字典-->
<div class="form-label">API发送编码：</div> <Tag color="processing">
<div>{{ formData?.apiSendCode }}</div> {{
</div> getDictLabel(
<div class="form-item"> DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS,
<div class="form-label">API发送消息：</div> formData?.receiveStatus,
<div>{{ formData?.apiSendMsg }}</div> )
</div> }}
<div class="form-item"> </Tag>
<!-- TODO @puhui：格式不对 --> </Descriptions.Item>
<div class="form-label">接收状态：</div> <Descriptions.Item label="接收时间">
<div>{{ formData?.receiveStatus }}</div> {{ formatDateTime(formData?.receiveTime || '') }}
</div> </Descriptions.Item>
<div class="form-item"> <Descriptions.Item label="API接收编码">
<div class="form-label">接收时间：</div> {{ formData?.apiReceiveCode }}
<div>{{ formData?.receiveTime }}</div> </Descriptions.Item>
</div> <Descriptions.Item label="API接收消息" :span="2">
<div class="form-item"> {{ formData?.apiReceiveMsg }}
<div class="form-label">API 接收编码：</div> </Descriptions.Item>
<div>{{ formData?.apiReceiveCode }}</div> <Descriptions.Item label="API请求ID">
</div> {{ formData?.apiRequestId }}
<div class="form-item"> </Descriptions.Item>
<div class="form-label">API 接收消息：</div> <Descriptions.Item label="API序列号">
<div>{{ formData?.apiReceiveMsg }}</div> {{ formData?.apiSerialNo }}
</div> </Descriptions.Item>
<div class="form-item"> </Descriptions>
<div class="form-label">API 请求 ID：</div>
<div>{{ formData?.apiRequestId }}</div>
</div>
<div class="form-item">
<div class="form-label">API 序列号：</div>
<div>{{ formData?.apiSerialNo }}</div>
</div>
</div>
</div> </div>
</Modal> </Modal>
</template> </template>
<style scoped>
.form-item {
@apply mb-2;
}
.form-label {
@apply font-medium;
}
</style>

14
apps/web-antd/src/views/system/sms/template/data.ts
View File

@ -95,7 +95,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Textarea', component: 'Textarea',
componentProps: { componentProps: {
placeholder: '请输入备注', placeholder: '请输入备注',
} },
}, },
]; ];
} }
@ -130,7 +130,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: { componentProps: {
allowClear: true, allowClear: true,
placeholder: '请输入模板编码', placeholder: '请输入模板编码',
} },
}, },
{ {
fieldName: 'name', fieldName: 'name',
@ -139,7 +139,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: { componentProps: {
allowClear: true, allowClear: true,
placeholder: '请输入模板名称', placeholder: '请输入模板名称',
} },
}, },
{ {
fieldName: 'channelId', fieldName: 'channelId',
@ -168,6 +168,14 @@ export function useGridFormSchema(): VbenFormSchema[] {
/** 发送短信表单 */ /** 发送短信表单 */
export function useSendSmsFormSchema(): VbenFormSchema[] { export function useSendSmsFormSchema(): VbenFormSchema[] {
return [ return [
{
fieldName: 'content',
label: '模板内容',
component: 'Textarea',
componentProps: {
disabled: true,
},
},
{ {
fieldName: 'mobile', fieldName: 'mobile',
label: '手机号码', label: '手机号码',

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

@ -1,10 +1,12 @@
<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 { ref } from 'vue';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-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';
@ -13,7 +15,6 @@ import { useSendSmsFormSchema } from '../data';
const emit = defineEmits(['success']); const emit = defineEmits(['success']);
const templateData = ref<SystemSmsTemplateApi.SmsTemplate>(); const templateData = ref<SystemSmsTemplateApi.SmsTemplate>();
// TODO @puhui999：貌似发送短信，少了参数展示
// 动态构建表单 // 动态构建表单
const buildSchema = () => { const buildSchema = () => {
const schema = useSendSmsFormSchema(); const schema = useSendSmsFormSchema();
@ -22,9 +23,12 @@ const buildSchema = () => {
if (templateData.value?.params && templateData.value.params.length > 0) { if (templateData.value?.params && templateData.value.params.length > 0) {
templateData.value.params.forEach((param) => { templateData.value.params.forEach((param) => {
schema.push({ schema.push({
component: 'Input',
fieldName: `param_${param}`, fieldName: `param_${param}`,
label: `参数 ${param}`, label: `参数 ${param}`,
component: 'Input',
componentProps: {
placeholder: '请输入',
},
rules: 'required', rules: 'required',
}); });
}); });
@ -58,7 +62,7 @@ const [Modal, modalApi] = useVbenModal({
} }
// 构建发送短信请求 // 构建发送短信请求
const data: SystemSmsTemplateApi.SmsSendReqVO = { const data: SystemSmsTemplateApi.SmsSendReq = {
mobile: values.mobile, mobile: values.mobile,
templateCode: templateData.value?.code || '', templateCode: templateData.value?.code || '',
templateParams: paramsObj, templateParams: paramsObj,
@ -92,7 +96,12 @@ const [Modal, modalApi] = useVbenModal({
templateData.value = data; templateData.value = data;
// 更新表单结构 // 更新表单结构
const schema = buildSchema(); const schema = buildSchema();
await formApi.updateSchema(schema); formApi.setState({ schema });
// 设置表单初始值，包括模板内容
await formApi.setValues({
content: data.content,
});
}, },
}); });
</script> </script>