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

reactor：【system 系统管理】loginlog、maillog、smslog 的描述统一

pull/211/head
YunaiV 2025-09-10 00:29:08 +08:00
parent 68f64c9d67
commit 69b662bb53
14 changed files with 419 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web-antd/src/views/system/loginlog/data.ts
View File

@ -1,5 +1,6 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemLoginLogApi } from '#/api/system/login-log';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
@ -109,7 +110,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'logType',
label: '操作类型',
content: (data) => {
content: (data: SystemLoginLogApi.LoginLog) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_LOGIN_TYPE,
value: data?.logType,
@ -131,7 +132,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'result',
label: '登录结果',
content: (data) => {
content: (data: SystemLoginLogApi.LoginLog) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_LOGIN_RESULT,
value: data?.result,
@ -141,7 +142,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'createTime',
label: '登录日期',
content: (data) => formatDateTime(data?.createTime || '') as string,
content: (data: SystemLoginLogApi.LoginLog) => {
return formatDateTime(data?.createTime || '') as string;
},
},
];
}

4
apps/web-antd/src/views/system/loginlog/modules/detail.vue
View File

@ -11,7 +11,7 @@ import { useDetailSchema } from '../data';
const formData = ref<SystemLoginLogApi.LoginLog>();
const [Descriptions] = useDescription({
const [Description] = useDescription({
componentProps: {
bordered: true,
column: 1,
@ -48,6 +48,6 @@ const [Modal, modalApi] = useVbenModal({
:show-cancel-button="false"
:show-confirm-button="false"
>
<Descriptions :data="formData" />
<Description :data="formData" />
</Modal>
</template>

19
apps/web-antd/src/views/system/mail/log/data.ts
View File

@ -1,5 +1,6 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemMailLogApi } from '#/api/system/mail/log';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
@ -163,7 +164,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'createTime',
label: '创建时间',
content: (data) => formatDateTime(data?.createTime || '') as string,
content: (data: SystemMailLogApi.MailLog) => {
return formatDateTime(data?.createTime || '') as string;
},
},
{
field: 'fromMail',
@ -172,7 +175,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'userId',
label: '接收用户',
content: (data) => {
content: (data: SystemMailLogApi.MailLog) => {
if (data?.userType && data?.userId) {
return h('div', [
h(DictTag, {
@ -188,7 +191,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'toMails',
label: '接收信息',
content: (data) => {
content: (data: SystemMailLogApi.MailLog) => {
const lines: string[] = [];
if (data?.toMails && data.toMails.length > 0) {
lines.push(`收件：${data.toMails.join('、')}`);
@ -223,8 +226,8 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'templateContent',
label: '邮件内容',
content: (data) => {
// 渲染HTML内容
span: 2,
content: (data: SystemMailLogApi.MailLog) => {
return h('div', {
innerHTML: data?.templateContent || '',
});
@ -233,7 +236,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'sendStatus',
label: '发送状态',
content: (data) => {
content: (data: SystemMailLogApi.MailLog) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
value: data?.sendStatus,
@ -243,7 +246,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'sendTime',
label: '发送时间',
content: (data) => formatDateTime(data?.sendTime || '') as string,
content: (data: SystemMailLogApi.MailLog) => {
return formatDateTime(data?.sendTime || '') as string;
},
},
{
field: 'sendMessageId',

6
apps/web-antd/src/views/system/mail/log/modules/detail.vue
View File

@ -11,7 +11,7 @@ import { useDetailSchema } from '../data';
const formData = ref<SystemMailLogApi.MailLog>();
const [Descriptions] = useDescription({
const [Description] = useDescription({
componentProps: {
bordered: true,
column: 2,
@ -44,10 +44,10 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal
title="邮件日志详情"
class="w-1/2"
class="w-[1280px]"
:show-cancel-button="false"
:show-confirm-button="false"
>
<Descriptions :data="formData" />
<Description :data="formData" />
</Modal>
</template>

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

@ -1,16 +1,16 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemSmsLogApi } from '#/api/system/sms/log';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { formatDateTime } from '@vben/utils';
import { getSimpleSmsChannelList } from '#/api/system/sms/channel';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { getRangePickerDefaultProps } from '#/utils';
/** 列表的搜索表单 */
@ -93,10 +93,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'id',
title: '编号',
minWidth: 100,
},
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'mobile',
title: '手机号',
minWidth: 120,
},
{
field: 'templateContent',
@ -106,6 +114,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'sendStatus',
title: '发送状态',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS },
@ -114,11 +123,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'sendTime',
title: '发送时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'receiveStatus',
title: '接收状态',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS },
@ -127,11 +138,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'receiveTime',
title: '接收时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'channelCode',
title: '短信渠道',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE },
@ -140,10 +153,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'templateId',
title: '模板编号',
minWidth: 100,
},
{
field: 'templateType',
title: '短信类型',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE },
@ -152,6 +167,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
@ -169,7 +185,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'createTime',
label: '创建时间',
content: (data) => formatDateTime(data?.createTime || '') as string,
content: (data: SystemSmsLogApi.SmsLog) => {
return formatDateTime(data?.createTime || '') as string;
},
},
{
field: 'mobile',
@ -186,7 +204,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'templateType',
label: '模板类型',
content: (data) => {
content: (data: SystemSmsLogApi.SmsLog) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE,
value: data?.templateType,
@ -200,7 +218,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'sendStatus',
label: '发送状态',
content: (data) => {
content: (data: SystemSmsLogApi.SmsLog) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS,
value: data?.sendStatus,
@ -210,7 +228,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'sendTime',
label: '发送时间',
content: (data) => formatDateTime(data?.sendTime || '') as string,
content: (data: SystemSmsLogApi.SmsLog) => {
return formatDateTime(data?.sendTime || '') as string;
},
},
{
field: 'apiSendCode',
@ -223,7 +243,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'receiveStatus',
label: '接收状态',
content: (data) => {
content: (data: SystemSmsLogApi.SmsLog) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS,
value: data?.receiveStatus,
@ -233,7 +253,9 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'receiveTime',
label: '接收时间',
content: (data) => formatDateTime(data?.receiveTime || '') as string,
content: (data: SystemSmsLogApi.SmsLog) => {
return formatDateTime(data?.receiveTime || '') as string;
},
},
{
field: 'apiReceiveCode',
@ -242,6 +264,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
{
field: 'apiReceiveMsg',
label: 'API 接收消息',
span: 2,
},
{
field: 'apiRequestId',

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

@ -18,7 +18,7 @@ const [DetailModal, detailModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@ -54,6 +54,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
@ -69,7 +70,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DocAlert title="短信配置" url="https://doc.iocoder.cn/sms/" />
</template>
<DetailModal @success="onRefresh" />
<DetailModal @success="handleRefresh" />
<Grid table-title="短信日志列表">
<template #toolbar-tools>
<TableAction

6
apps/web-antd/src/views/system/sms/log/modules/detail.vue
View File

@ -11,7 +11,7 @@ import { useDetailSchema } from '../data';
const formData = ref<SystemSmsLogApi.SmsLog>();
const [Descriptions] = useDescription({
const [Description] = useDescription({
componentProps: {
bordered: true,
column: 2,
@ -44,10 +44,10 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal
title="短信日志详情"
class="w-1/2"
class="w-[1280px]"
:show-cancel-button="false"
:show-confirm-button="false"
>
<Descriptions :data="formData" />
<Description :data="formData" />
</Modal>
</template>

55
apps/web-ele/src/views/system/loginlog/data.ts
View File

@ -1,8 +1,14 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemLoginLogApi } from '#/api/system/login-log';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { DICT_TYPE } from '@vben/constants';
import { formatDateTime } from '@vben/utils';
import { DictTag } from '#/components/dict-tag';
import { getRangePickerDefaultProps } from '#/utils';
/** 列表的搜索表单 */
@ -93,3 +99,52 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
];
}
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'id',
label: '日志编号',
},
{
field: 'logType',
label: '操作类型',
content: (data: SystemLoginLogApi.LoginLog) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_LOGIN_TYPE,
value: data?.logType,
});
},
},
{
field: 'username',
label: '用户名称',
},
{
field: 'userIp',
label: '登录地址',
},
{
field: 'userAgent',
label: '浏览器',
},
{
field: 'result',
label: '登录结果',
content: (data: SystemLoginLogApi.LoginLog) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_LOGIN_RESULT,
value: data?.result,
});
},
},
{
field: 'createTime',
label: '登录日期',
content: (data: SystemLoginLogApi.LoginLog) => {
return formatDateTime(data?.createTime || '') as string;
},
},
];
}

56
apps/web-ele/src/views/system/loginlog/modules/detail.vue
View File

@ -1,18 +1,28 @@
<script lang="ts" setup>
<script setup lang="ts">
import type { SystemLoginLogApi } from '#/api/system/login-log';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { formatDateTime } from '@vben/utils';
import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
import { useDescription } from '#/components/description';
import { DictTag } from '#/components/dict-tag';
import { useDetailSchema } from '../data';
const formData = ref<SystemLoginLogApi.LoginLog>();
const [Description] = useDescription({
componentProps: {
border: true,
column: 1,
direction: 'horizontal',
title: '',
extra: '',
labelWidth: 110,
},
schema: useDetailSchema(),
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
@ -41,40 +51,6 @@ const [Modal, modalApi] = useVbenModal({
:show-cancel-button="false"
:show-confirm-button="false"
>
<ElDescriptions
border
:column="1"
size="default"
class="mx-4"
:label-style="{ width: '110px' }"
>
<ElDescriptionsItem label="日志编号">
{{ formData?.id }}
</ElDescriptionsItem>
<ElDescriptionsItem label="操作类型">
<DictTag
:type="DICT_TYPE.SYSTEM_LOGIN_TYPE"
:value="formData?.logType"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="用户名称">
{{ formData?.username }}
</ElDescriptionsItem>
<ElDescriptionsItem label="登录地址">
{{ formData?.userIp }}
</ElDescriptionsItem>
<ElDescriptionsItem label="浏览器">
{{ formData?.userAgent }}
</ElDescriptionsItem>
<ElDescriptionsItem label="登录结果">
<DictTag
:type="DICT_TYPE.SYSTEM_LOGIN_RESULT"
:value="formData?.result"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="登录日期">
{{ formatDateTime(formData?.createTime || '') }}
</ElDescriptionsItem>
</ElDescriptions>
<Description :data="formData" />
</Modal>
</template>

113
apps/web-ele/src/views/system/mail/log/data.ts
View File

@ -1,10 +1,16 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemMailLogApi } from '#/api/system/mail/log';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { formatDateTime } from '@vben/utils';
import { getSimpleMailAccountList } from '#/api/system/mail/account';
import { DictTag } from '#/components/dict-tag';
import { getRangePickerDefaultProps } from '#/utils';
/** 列表的搜索表单 */
@ -147,3 +153,110 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
];
}
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'id',
label: '编号',
},
{
field: 'createTime',
label: '创建时间',
content: (data: SystemMailLogApi.MailLog) => {
return formatDateTime(data?.createTime || '') as string;
},
},
{
field: 'fromMail',
label: '发送邮箱',
},
{
field: 'userId',
label: '接收用户',
content: (data: SystemMailLogApi.MailLog) => {
if (data?.userType && data?.userId) {
return h('div', [
h(DictTag, {
type: DICT_TYPE.USER_TYPE,
value: data.userType,
}),
` (${data.userId})`,
]);
}
return '无';
},
},
{
field: 'toMails',
label: '接收信息',
content: (data: SystemMailLogApi.MailLog) => {
const lines: string[] = [];
if (data?.toMails && data.toMails.length > 0) {
lines.push(`收件：${data.toMails.join('、')}`);
}
if (data?.ccMails && data.ccMails.length > 0) {
lines.push(`抄送：${data.ccMails.join('、')}`);
}
if (data?.bccMails && data.bccMails.length > 0) {
lines.push(`密送：${data.bccMails.join('、')}`);
}
return h(
'div',
{
style: { whiteSpace: 'pre-line' },
},
lines.join('\n'),
);
},
},
{
field: 'templateId',
label: '模板编号',
},
{
field: 'templateCode',
label: '模板编码',
},
{
field: 'templateTitle',
label: '邮件标题',
},
{
field: 'templateContent',
label: '邮件内容',
span: 2,
content: (data: SystemMailLogApi.MailLog) => {
return h('div', {
innerHTML: data?.templateContent || '',
});
},
},
{
field: 'sendStatus',
label: '发送状态',
content: (data: SystemMailLogApi.MailLog) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
value: data?.sendStatus,
});
},
},
{
field: 'sendTime',
label: '发送时间',
content: (data: SystemMailLogApi.MailLog) => {
return formatDateTime(data?.sendTime || '') as string;
},
},
{
field: 'sendMessageId',
label: '发送消息编号',
},
{
field: 'sendException',
label: '发送异常',
},
];
}

85
apps/web-ele/src/views/system/mail/log/modules/detail.vue
View File

@ -1,18 +1,28 @@
<script lang="ts" setup>
<script setup lang="ts">
import type { SystemMailLogApi } from '#/api/system/mail/log';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { formatDateTime } from '@vben/utils';
import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
import { useDescription } from '#/components/description';
import { DictTag } from '#/components/dict-tag';
import { useDetailSchema } from '../data';
const formData = ref<SystemMailLogApi.MailLog>();
const [Description] = useDescription({
componentProps: {
border: true,
column: 2,
direction: 'horizontal',
title: '',
extra: '',
labelWidth: 140,
},
schema: useDetailSchema(),
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
@ -37,71 +47,10 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal
title="邮件日志详情"
class="w-1/2"
class="w-[1280px]"
:show-cancel-button="false"
:show-confirm-button="false"
>
<div class="p-4">
<ElDescriptions :column="2" border :label-style="{ width: '140px' }">
<ElDescriptionsItem label="编号">{{ formData?.id }}</ElDescriptionsItem>
<ElDescriptionsItem label="创建时间">
{{ formatDateTime(formData?.createTime || '') }}
</ElDescriptionsItem>
<ElDescriptionsItem label="发送邮箱">
{{ formData?.fromMail }}
</ElDescriptionsItem>
<ElDescriptionsItem label="接收用户">
<div
v-if="formData?.userType && formData?.userId"
class="flex items-center gap-1"
>
<DictTag :type="DICT_TYPE.USER_TYPE" :value="formData.userType" />
<span>({{ formData.userId }})</span>
</div>
<div v-else>无</div>
</ElDescriptionsItem>
<ElDescriptionsItem label="接收信息" :span="2">
<div v-if="formData">
<div v-if="formData.toMails && formData.toMails.length > 0">
收件：{{ formData.toMails.join('、') }}
</div>
<div v-if="formData.ccMails && formData.ccMails.length > 0">
抄送：{{ formData.ccMails.join('、') }}
</div>
<div v-if="formData.bccMails && formData.bccMails.length > 0">
密送：{{ formData.bccMails.join('、') }}
</div>
</div>
</ElDescriptionsItem>
<ElDescriptionsItem label="模板编号">
{{ formData?.templateId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="模板编码">
{{ formData?.templateCode }}
</ElDescriptionsItem>
<ElDescriptionsItem label="邮件标题" :span="2">
{{ formData?.templateTitle }}
</ElDescriptionsItem>
<ElDescriptionsItem label="邮件内容" :span="2">
<!-- eslint-disable-next-line vue/no-v-html -->
<div v-html="formData?.templateContent"></div>
</ElDescriptionsItem>
<ElDescriptionsItem label="发送状态">
<DictTag
:type="DICT_TYPE.SYSTEM_MAIL_SEND_STATUS"
:value="formData?.sendStatus"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="发送时间">
{{ formatDateTime(formData?.sendTime || '') }}
</ElDescriptionsItem>
<ElDescriptionsItem label="发送消息编号">
{{ formData?.sendMessageId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="发送异常">
{{ formData?.sendException }}
</ElDescriptionsItem>
</ElDescriptions>
</div>
<Description :data="formData" />
</Modal>
</template>

132
apps/web-ele/src/views/system/sms/log/data.ts
View File

@ -1,16 +1,18 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemSmsLogApi } from '#/api/system/sms/log';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { useAccess } from '@vben/access';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { formatDateTime } from '@vben/utils';
import { getSimpleSmsChannelList } from '#/api/system/sms/channel';
import { DictTag } from '#/components/dict-tag';
import { getRangePickerDefaultProps } from '#/utils';
const { hasAccessByCodes } = useAccess();
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
@ -86,9 +88,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = SystemSmsLogApi.SmsLog>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
@ -165,26 +165,108 @@ export function useGridColumns<T = SystemSmsLogApi.SmsLog>(
},
},
{
field: 'operation',
title: '操作',
minWidth: 120,
align: 'center',
width: 80,
fixed: 'right',
cellRender: {
attrs: {
nameField: 'mobile',
nameTitle: '短信日志',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'detail',
text: '详情',
show: hasAccessByCodes(['system:sms-log:query']),
},
],
},
slots: { default: 'actions' },
},
];
}
/** 详情页的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'createTime',
label: '创建时间',
content: (data: SystemSmsLogApi.SmsLog) => {
return formatDateTime(data?.createTime || '') as string;
},
},
{
field: 'mobile',
label: '手机号',
},
{
field: 'channelCode',
label: '短信渠道',
},
{
field: 'templateId',
label: '模板编号',
},
{
field: 'templateType',
label: '模板类型',
content: (data: SystemSmsLogApi.SmsLog) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE,
value: data?.templateType,
});
},
},
{
field: 'templateContent',
label: '短信内容',
},
{
field: 'sendStatus',
label: '发送状态',
content: (data: SystemSmsLogApi.SmsLog) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS,
value: data?.sendStatus,
});
},
},
{
field: 'sendTime',
label: '发送时间',
content: (data: SystemSmsLogApi.SmsLog) => {
return formatDateTime(data?.sendTime || '') as string;
},
},
{
field: 'apiSendCode',
label: 'API 发送编码',
},
{
field: 'apiSendMsg',
label: 'API 发送消息',
},
{
field: 'receiveStatus',
label: '接收状态',
content: (data: SystemSmsLogApi.SmsLog) => {
return h(DictTag, {
type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS,
value: data?.receiveStatus,
});
},
},
{
field: 'receiveTime',
label: '接收时间',
content: (data: SystemSmsLogApi.SmsLog) => {
return formatDateTime(data?.receiveTime || '') as string;
},
},
{
field: 'apiReceiveCode',
label: 'API 接收编码',
},
{
field: 'apiReceiveMsg',
label: 'API 接收消息',
span: 2,
},
{
field: 'apiRequestId',
label: 'API 请求 ID',
},
{
field: 'apiSerialNo',
label: 'API 序列号',
},
];
}

68
apps/web-ele/src/views/system/sms/log/index.vue
View File

@ -1,17 +1,11 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemSmsLogApi } from '#/api/system/sms/log';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { Download } from '@vben/icons';
import { downloadFileFromBlobPart } from '@vben/utils';
import { ElButton } from 'element-plus';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { exportSmsLog, getSmsLogPage } from '#/api/system/sms/log';
import { $t } from '#/locales';
@ -24,40 +18,27 @@ const [DetailModal, detailModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
/** 导出表格 */
async function onExport() {
async function handleExport() {
const data = await exportSmsLog(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '短信日志.xls', source: data });
}
/** 查看短信日志详情 */
function onDetail(row: SystemSmsLogApi.SmsLog) {
function handleDetail(row: SystemSmsLogApi.SmsLog) {
detailModalApi.setData(row).open();
}
/** 表格操作按钮的回调函数 */
function onActionClick({
code,
row,
}: OnActionClickParams<SystemSmsLogApi.SmsLog>) {
switch (code) {
case 'detail': {
onDetail(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
@ -73,6 +54,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
@ -88,18 +70,34 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DocAlert title="短信配置" url="https://doc.iocoder.cn/sms/" />
</template>
<DetailModal @success="onRefresh" />
<DetailModal @success="handleRefresh" />
<Grid table-title="短信日志列表">
<template #toolbar-tools>
<ElButton
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['system:sms-log:export']"
>
<Download class="mr-2 size-5" />
{{ $t('ui.actionTitle.export') }}
</ElButton>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.export'),
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['system:sms-log:export'],
onClick: handleExport,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.detail'),
type: 'primary',
link: true,
icon: ACTION_ICON.VIEW,
auth: ['system:sms-log:query'],
onClick: handleDetail.bind(null, row),
},
]"
/>
</template>
</Grid>
</Page>

88
apps/web-ele/src/views/system/sms/log/modules/detail.vue
View File

@ -1,18 +1,28 @@
<script lang="ts" setup>
<script setup lang="ts">
import type { SystemSmsLogApi } from '#/api/system/sms/log';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { formatDateTime } from '@vben/utils';
import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
import { useDescription } from '#/components/description';
import { DictTag } from '#/components/dict-tag';
import { useDetailSchema } from '../data';
const formData = ref<SystemSmsLogApi.SmsLog>();
const [Description] = useDescription({
componentProps: {
border: true,
column: 2,
direction: 'horizontal',
title: '',
extra: '',
labelWidth: 140,
},
schema: useDetailSchema(),
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
@ -37,74 +47,10 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal
title="短信日志详情"
class="w-1/2"
class="w-[1280px]"
:show-cancel-button="false"
:show-confirm-button="false"
>
<ElDescriptions
border
:column="2"
size="default"
class="mx-4"
:label-style="{ width: '140px' }"
>
<ElDescriptionsItem label="创建时间">
{{ formatDateTime(formData?.createTime || '') }}
</ElDescriptionsItem>
<ElDescriptionsItem label="手机号">
{{ formData?.mobile }}
</ElDescriptionsItem>
<ElDescriptionsItem label="短信渠道">
{{ formData?.channelCode }}
</ElDescriptionsItem>
<ElDescriptionsItem label="模板编号">
{{ formData?.templateId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="模板类型">
<DictTag
:type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE"
:value="formData?.templateType"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="短信内容">
{{ formData?.templateContent }}
</ElDescriptionsItem>
<ElDescriptionsItem label="发送状态">
<DictTag
:type="DICT_TYPE.SYSTEM_SMS_SEND_STATUS"
:value="formData?.sendStatus"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="发送时间">
{{ formatDateTime(formData?.sendTime || '') }}
</ElDescriptionsItem>
<ElDescriptionsItem label="API 发送编码">
{{ formData?.apiSendCode }}
</ElDescriptionsItem>
<ElDescriptionsItem label="API 发送消息">
{{ formData?.apiSendMsg }}
</ElDescriptionsItem>
<ElDescriptionsItem label="接收状态">
<DictTag
:type="DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS"
:value="formData?.receiveStatus"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="接收时间">
{{ formatDateTime(formData?.receiveTime || '') }}
</ElDescriptionsItem>
<ElDescriptionsItem label="API 接收编码">
{{ formData?.apiReceiveCode }}
</ElDescriptionsItem>
<ElDescriptionsItem label="API 接收消息" :span="2">
{{ formData?.apiReceiveMsg }}
</ElDescriptionsItem>
<ElDescriptionsItem label="API 请求 ID">
{{ formData?.apiRequestId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="API 序列号">
{{ formData?.apiSerialNo }}
</ElDescriptionsItem>
</ElDescriptions>
<Description :data="formData" />
</Modal>
</template>