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

feat: 短信日志

pull/61/head
puhui999 2025-04-03 17:43:52 +08:00
parent 7f37ca4a6b
commit d288cd6be2
4 changed files with 437 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
apps/web-antd/src/api/system/sms/log/index.ts Normal file
View File

@ -0,0 +1,45 @@
import type { PageParam } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace SystemSmsLogApi {
/** 短信日志信息 */
export interface SmsLogVO {
id: null | number;
channelId: null | number;
channelCode: string;
templateId: null | number;
templateCode: string;
templateType: null | number;
templateContent: string;
templateParams: null | Record<string, any>;
apiTemplateId: string;
mobile: string;
userId: null | number;
userType: null | number;
sendStatus: null | number;
sendTime: Date | null;
apiSendCode: string;
apiSendMsg: string;
apiRequestId: string;
apiSerialNo: string;
receiveStatus: null | number;
receiveTime: Date | null;
apiReceiveCode: string;
apiReceiveMsg: string;
createTime: Date | null;
}
}
/** 查询短信日志列表 */
export function getSmsLogPage(params: PageParam) {
return requestClient.get<{
list: SystemSmsLogApi.SmsLogVO[];
total: number;
}>('/system/sms-log/page', { params });
}
/** 导出短信日志 */
export function exportSmsLog(params: SystemSmsLogApi.SmsLogVO) {
return requestClient.download('/system/sms-log/export-excel', { params });
}

172
apps/web-antd/src/views/system/sms/log/data.ts Normal file
View File

@ -0,0 +1,172 @@
import type { SystemSmsLogApi } from 'src/api/system/sms/log';
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import { getSimpleSmsChannelList } from 'src/api/system/sms/channel';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'mobile',
label: '手机号',
component: 'Input',
},
{
fieldName: 'channelId',
label: '短信渠道',
component: 'ApiSelect',
componentProps: {
api: async () => await getSimpleSmsChannelList(),
labelField: 'signature',
valueField: 'id',
allowClear: true,
},
},
{
fieldName: 'templateId',
label: '模板编号',
component: 'Input',
},
{
fieldName: 'sendStatus',
label: '发送状态',
component: 'Select',
componentProps: {
allowClear: true,
options: getDictOptions(DICT_TYPE.SYSTEM_SMS_SEND_STATUS, 'number'),
},
},
{
fieldName: 'sendTime',
label: '发送时间',
component: 'RangePicker',
componentProps: {
allowClear: true,
},
},
{
fieldName: 'receiveStatus',
label: '接收状态',
component: 'Select',
componentProps: {
allowClear: true,
options: getDictOptions(DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS, 'number'),
},
},
{
fieldName: 'receiveTime',
label: '接收时间',
component: 'RangePicker',
componentProps: {
allowClear: true,
},
},
];
}
/** 列表的字段 */
export function useGridColumns<T = SystemSmsLogApi.SmsLogVO>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '编号',
minWidth: 100,
},
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'mobile',
title: '手机号',
minWidth: 120,
},
{
field: 'templateContent',
title: '短信内容',
minWidth: 300,
},
{
field: 'sendStatus',
title: '发送状态',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS },
},
},
{
field: 'sendTime',
title: '发送时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'receiveStatus',
title: '接收状态',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS },
},
},
{
field: 'receiveTime',
title: '接收时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'channelCode',
title: '短信渠道',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE },
},
},
{
field: 'templateId',
title: '模板编号',
minWidth: 100,
},
{
field: 'templateType',
title: '短信类型',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE },
},
},
{
field: 'operation',
title: '操作',
minWidth: 120,
align: 'center',
fixed: 'right',
cellRender: {
attrs: {
nameField: 'mobile',
nameTitle: '短信日志',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'view',
text: '查看',
},
],
},
},
];
}

98
apps/web-antd/src/views/system/sms/log/index.vue Normal file
View File

@ -0,0 +1,98 @@
<script lang="ts" setup>
import type { SystemSmsLogApi } from 'src/api/system/sms/log';
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download } from '@vben/icons';
import { Button } from 'ant-design-vue';
import { exportSmsLog, getSmsLogPage } from 'src/api/system/sms/log';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { $t } from '#/locales';
import { downloadByData } from '#/utils/download';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 导出表格 */
async function onExport() {
const data = await exportSmsLog(await gridApi.formApi.getValues());
downloadByData(data, '短信日志.xls');
}
/** 查看短信日志详情 */
function onView(row: SystemSmsLogApi.SmsLogVO) {
formModalApi.setData(row).open();
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<SystemSmsLogApi.SmsLogVO>) {
switch (code) {
case 'view': {
onView(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getSmsLogPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<SystemSmsLogApi.SmsLogVO>,
});
</script>
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<Grid table-title="短信日志列表">
<template #toolbar-tools>
<Button type="primary" class="ml-2" @click="onExport">
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>
</template>
</Grid>
</Page>
</template>

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

@ -0,0 +1,122 @@
<script lang="ts" setup>
import type { SystemSmsLogApi } from 'src/api/system/sms/log';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
const formData = ref<SystemSmsLogApi.SmsLogVO>();
const getTitle = computed(() => {
return '短信日志详情';
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen) {
if (!isOpen) {
return;
}
// 加载数据
const data = modalApi.getData<SystemSmsLogApi.SmsLogVO>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = data;
} finally {
modalApi.lock(false);
}
},
});
</script>
<template>
<Modal :title="getTitle">
<div class="p-4">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="form-item">
<div class="form-label">编号：</div>
<div>{{ formData?.id }}</div>
</div>
<div class="form-item">
<div class="form-label">创建时间：</div>
<div>{{ formData?.createTime }}</div>
</div>
<div class="form-item">
<div class="form-label">手机号：</div>
<div>{{ formData?.mobile }}</div>
</div>
<div class="form-item">
<div class="form-label">短信渠道：</div>
<div>{{ formData?.channelCode }}</div>
</div>
<div class="form-item">
<div class="form-label">模板编号：</div>
<div>{{ formData?.templateId }}</div>
</div>
<div class="form-item">
<div class="form-label">模板类型：</div>
<div>{{ formData?.templateType }}</div>
</div>
</div>
<div class="mt-4">
<div class="form-label">短信内容：</div>
<div>{{ formData?.templateContent }}</div>
</div>
<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="form-item">
<div class="form-label">发送状态：</div>
<div>{{ formData?.sendStatus }}</div>
</div>
<div class="form-item">
<div class="form-label">发送时间：</div>
<div>{{ formData?.sendTime }}</div>
</div>
<div class="form-item">
<div class="form-label">API发送编码：</div>
<div>{{ formData?.apiSendCode }}</div>
</div>
<div class="form-item">
<div class="form-label">API发送消息：</div>
<div>{{ formData?.apiSendMsg }}</div>
</div>
<div class="form-item">
<div class="form-label">接收状态：</div>
<div>{{ formData?.receiveStatus }}</div>
</div>
<div class="form-item">
<div class="form-label">接收时间：</div>
<div>{{ formData?.receiveTime }}</div>
</div>
<div class="form-item">
<div class="form-label">API接收编码：</div>
<div>{{ formData?.apiReceiveCode }}</div>
</div>
<div class="form-item">
<div class="form-label">API接收消息：</div>
<div>{{ formData?.apiReceiveMsg }}</div>
</div>
<div class="form-item">
<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>
</Modal>
</template>
<style scoped>
.form-item {
@apply mb-2;
}
.form-label {
@apply font-medium;
}
</style>