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/65/MERGE
YunaiV 2025-04-03 22:56:03 +08:00
parent 6d1513498e
commit 3d634b8cc4
25 changed files with 213 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web-antd/src/api/system/mail/account/index.ts
View File

@ -2,6 +2,7 @@ import type { PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
// TODO @puhui999：代码风格的统一
export namespace SystemMailAccountApi {
export interface MailAccountVO {
id: number;

1
apps/web-antd/src/api/system/mail/log/index.ts
View File

@ -2,6 +2,7 @@ import type { PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
// TODO @puhui999：代码风格的统一
export namespace SystemMailLogApi {
export interface MailLogVO {
id: number;

1
apps/web-antd/src/api/system/mail/template/index.ts
View File

@ -2,6 +2,7 @@ import type { PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
// TODO @puhui999：代码风格的统一
export namespace SystemMailTemplateApi {
export interface MailTemplateVO {
id: number;

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

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

9
apps/web-antd/src/api/system/sms/log/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';
@ -32,11 +32,8 @@ export namespace SystemSmsLogApi {
}
/** 查询短信日志列表 */
export function getSmsLogPage(params: any) {
return requestClient.get<PageResult<SystemSmsLogApi.SmsLogVO>>(
'/system/sms-log/page',
{ params },
);
export function getSmsLogPage(params: PageParam) {
return requestClient.get<PageResult<SystemSmsLogApi.SmsLogVO>>('/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 interface SmsTemplateVO {
export interface SmsTemplate {
id?: number;
type?: number;
status: number;
@ -20,7 +20,7 @@ export namespace SystemSmsTemplateApi {
}
/** 发送短信请求 */
export interface SendSmsReqVO {
export interface SmsSendReqVO {
mobile: string;
templateCode: string;
templateParams: Record<string, any>;
@ -29,7 +29,7 @@ export namespace SystemSmsTemplateApi {
/** 查询短信模板列表 */
export function getSmsTemplatePage(params: any) {
return requestClient.get<PageResult<SystemSmsTemplateApi.SmsTemplateVO>>(
return requestClient.get<PageResult<SystemSmsTemplateApi.SmsTemplate>>(
'/system/sms-template/page',
{ params },
);
@ -37,18 +37,16 @@ export function getSmsTemplatePage(params: any) {
/** 查询短信模板详情 */
export function getSmsTemplate(id: number) {
return requestClient.get<SystemSmsTemplateApi.SmsTemplateVO>(
`/system/sms-template/get?id=${id}`,
);
return requestClient.get<SystemSmsTemplateApi.SmsTemplate>(`/system/sms-template/get?id=${id}`);
}
/** 新增短信模板 */
export function createSmsTemplate(data: SystemSmsTemplateApi.SmsTemplateVO) {
export function createSmsTemplate(data: SystemSmsTemplateApi.SmsTemplate) {
return requestClient.post('/system/sms-template/create', data);
}
/** 修改短信模板 */
export function updateSmsTemplate(data: SystemSmsTemplateApi.SmsTemplateVO) {
export function updateSmsTemplate(data: SystemSmsTemplateApi.SmsTemplate) {
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.SendSmsReqVO) {
export function sendSms(data: SystemSmsTemplateApi.SmsSendReqVO) {
return requestClient.post('/system/sms-template/send-sms', data);
}

2
apps/web-antd/src/views/system/dept/modules/form.vue
View File

@ -47,7 +47,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock(false);
}
},
async onOpenChange(isOpen) {
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}

2
apps/web-antd/src/views/system/menu/modules/form.vue
View File

@ -47,7 +47,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock(false);
}
},
async onOpenChange(isOpen) {
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}

2
apps/web-antd/src/views/system/post/modules/form.vue
View File

@ -47,7 +47,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock(false);
}
},
async onOpenChange(isOpen) {
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}

2
apps/web-antd/src/views/system/role/modules/assign-data-permission-form.vue
View File

@ -59,7 +59,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock(false);
}
},
async onOpenChange(isOpen) {
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}

2
apps/web-antd/src/views/system/role/modules/assign-menu-form.vue
View File

@ -54,7 +54,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock(false);
}
},
async onOpenChange(isOpen) {
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}

2
apps/web-antd/src/views/system/role/modules/form.vue
View File

@ -47,7 +47,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock(false);
}
},
async onOpenChange(isOpen) {
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}

27
apps/web-antd/src/views/system/sms/channel/data.ts
View File

@ -11,7 +11,6 @@ export function useFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'id',
label: 'id',
component: 'Input',
dependencies: {
triggerFields: [''],
@ -22,6 +21,9 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'signature',
label: '短信签名',
component: 'Input',
componentProps: {
placeholder: '请输入短信签名',
},
rules: 'required',
},
{
@ -29,8 +31,9 @@ export function useFormSchema(): VbenFormSchema[] {
label: '渠道编码',
component: 'Select',
componentProps: {
class: 'w-full',
options: getDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, 'string'),
class: 'w-full',
placeholder: '请选择短信渠道',
},
rules: 'required',
},
@ -49,22 +52,34 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
}
},
{
fieldName: 'apiKey',
label: '短信 API 的账号',
component: 'Input',
componentProps: {
placeholder: '请输入短信 API 的账号',
},
rules: 'required',
},
{
fieldName: 'apiSecret',
label: '短信 API 的密钥',
component: 'Input',
componentProps: {
placeholder: '请输入短信 API 的密钥',
}
},
{
fieldName: 'callbackUrl',
label: '短信发送回调 URL',
component: 'Input',
componentProps: {
placeholder: '请输入短信发送回调 URL',
}
},
];
}
@ -76,6 +91,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
fieldName: 'signature',
label: '短信签名',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入短信签名',
}
},
{
fieldName: 'code',
@ -84,6 +103,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: {
allowClear: true,
options: getDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, 'string'),
placeholder: '请选择短信渠道',
},
},
{
@ -96,6 +116,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
},
},
{
// TODO @芋艿：怎么解决范围检索
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
@ -107,7 +128,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = SystemSmsChannelApi.SmsChannelVO>(
export function useGridColumns<T = SystemSmsChannelApi.SmsChannel>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
return [

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

@ -1,26 +1,18 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemSmsChannelApi } from '#/api/system/sms/channel';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import { Download, Plus } from '@vben/icons';
import Form from './modules/form.vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteSmsChannel,
exportSmsChannel,
getSmsChannelPage,
} from '#/api/system/sms/channel';
import { $t } from '#/locales';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getSmsChannelPage, deleteSmsChannel, exportSmsChannel } from '#/api/system/sms/channel';
import { downloadByData } from '#/utils/download';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
@ -44,12 +36,12 @@ function onCreate() {
}
/** 编辑短信渠道 */
function onEdit(row: SystemSmsChannelApi.SmsChannelVO) {
function onEdit(row: SystemSmsChannelApi.SmsChannel) {
formModalApi.setData(row).open();
}
/** 删除短信渠道 */
async function onDelete(row: SystemSmsChannelApi.SmsChannelVO) {
async function onDelete(row: SystemSmsChannelApi.SmsChannel) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.signature]),
duration: 0,
@ -71,16 +63,16 @@ async function onDelete(row: SystemSmsChannelApi.SmsChannelVO) {
function onActionClick({
code,
row,
}: OnActionClickParams<SystemSmsChannelApi.SmsChannelVO>) {
}: OnActionClickParams<SystemSmsChannelApi.SmsChannel>) {
switch (code) {
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
}
}
@ -110,7 +102,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<SystemSmsChannelApi.SmsChannelVO>,
} as VxeTableGridOptions<SystemSmsChannelApi.SmsChannel>,
});
</script>

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

@ -1,24 +1,18 @@
<script lang="ts" setup>
import type { SystemSmsChannelApi } from '#/api/system/sms/channel';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import {
createSmsChannel,
getSmsChannel,
updateSmsChannel,
} from '#/api/system/sms/channel';
import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { getSmsChannel, createSmsChannel, updateSmsChannel } from '#/api/system/sms/channel';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<SystemSmsChannelApi.SmsChannelVO>();
const formData = ref<SystemSmsChannelApi.SmsChannel>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['短信渠道'])
@ -29,6 +23,9 @@ const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
commonConfig: {
labelWidth: 120
}
});
const [Modal, modalApi] = useVbenModal({
@ -39,12 +36,9 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as SystemSmsChannelApi.SmsChannelVO;
const data = (await formApi.getValues()) as SystemSmsChannelApi.SmsChannel;
try {
await (formData.value?.id
? updateSmsChannel(data)
: createSmsChannel(data));
await (formData.value?.id ? updateSmsChannel(data) : createSmsChannel(data));
// 关闭并提示
await modalApi.close();
emit('success');
@ -56,12 +50,12 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock(false);
}
},
async onOpenChange(isOpen) {
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
// 加载数据
const data = modalApi.getData<SystemSmsChannelApi.SmsChannelVO>();
const data = modalApi.getData<SystemSmsChannelApi.SmsChannel>();
if (!data || !data.id) {
return;
}

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

@ -12,6 +12,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
fieldName: 'mobile',
label: '手机号',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入手机号',
}
},
{
fieldName: 'channelId',
@ -22,23 +26,30 @@ export function useGridFormSchema(): VbenFormSchema[] {
labelField: 'signature',
valueField: 'id',
allowClear: true,
placeholder: '请选择短信渠道',
},
},
{
fieldName: 'templateId',
label: '模板编号',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入模板编号',
}
},
{
fieldName: 'sendStatus',
label: '发送状态',
component: 'Select',
componentProps: {
allowClear: true,
options: getDictOptions(DICT_TYPE.SYSTEM_SMS_SEND_STATUS, 'number'),
allowClear: true,
placeholder: '请选择发送状态',
},
},
{
// TODO @芋艿：怎么解决范围检索
fieldName: 'sendTime',
label: '发送时间',
component: 'RangePicker',
@ -51,11 +62,13 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '接收状态',
component: 'Select',
componentProps: {
allowClear: true,
options: getDictOptions(DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS, 'number'),
allowClear: true,
placeholder: '请选择接收状态',
},
},
{
// TODO @芋艿：怎么解决范围检索
fieldName: 'receiveTime',
label: '接收时间',
component: 'RangePicker',

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

@ -1,22 +1,18 @@
<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 Form from './modules/form.vue';
import { $t } from '#/locales';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { exportSmsLog, getSmsLogPage } from '#/api/system/sms/log';
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,

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

@ -1,17 +1,14 @@
<script lang="ts" setup>
import type { SystemSmsLogApi } from '#/api/system/sms/log';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ref } from 'vue';
const formData = ref<SystemSmsLogApi.SmsLogVO>();
const getTitle = computed(() => {
return '短信日志详情';
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen) {
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
@ -30,8 +27,9 @@ const [Modal, modalApi] = useVbenModal({
});
</script>
<!-- TODO @puhui999：https://ant-design.antgroup.com/components/descriptions-cn 参考这个？ -->
<template>
<Modal :title="getTitle">
<Modal title="短信日志详情">
<div class="p-4">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="form-item">
@ -39,6 +37,7 @@ const [Modal, modalApi] = useVbenModal({
<div>{{ formData?.id }}</div>
</div>
<div class="form-item">
<!-- TODO @puhui：格式不对 -->
<div class="form-label">创建时间：</div>
<div>{{ formData?.createTime }}</div>
</div>
@ -67,6 +66,7 @@ const [Modal, modalApi] = useVbenModal({
<div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
<div class="form-item">
<!-- TODO @puhui：格式不对 -->
<div class="form-label">发送状态：</div>
<div>{{ formData?.sendStatus }}</div>
</div>
@ -83,6 +83,7 @@ const [Modal, modalApi] = useVbenModal({
<div>{{ formData?.apiSendMsg }}</div>
</div>
<div class="form-item">
<!-- TODO @puhui：格式不对 -->
<div class="form-label">接收状态：</div>
<div>{{ formData?.receiveStatus }}</div>
</div>
@ -91,19 +92,19 @@ const [Modal, modalApi] = useVbenModal({
<div>{{ formData?.receiveTime }}</div>
</div>
<div class="form-item">
<div class="form-label">API接收编码：</div>
<div class="form-label">API 接收编码：</div>
<div>{{ formData?.apiReceiveCode }}</div>
</div>
<div class="form-item">
<div class="form-label">API接收消息：</div>
<div class="form-label">API 接收消息：</div>
<div>{{ formData?.apiReceiveMsg }}</div>
</div>
<div class="form-item">
<div class="form-label">API请求ID：</div>
<div class="form-label">API 请求 ID：</div>
<div>{{ formData?.apiRequestId }}</div>
</div>
<div class="form-item">
<div class="form-label">API序列号：</div>
<div class="form-label">API 序列号：</div>
<div>{{ formData?.apiSerialNo }}</div>
</div>
</div>

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

@ -12,7 +12,6 @@ export function useFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'id',
label: 'id',
component: 'Input',
dependencies: {
triggerFields: [''],
@ -24,8 +23,9 @@ export function useFormSchema(): VbenFormSchema[] {
label: '短信类型',
component: 'Select',
componentProps: {
class: 'w-full',
options: getDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, 'number'),
class: 'w-full',
placeholder: '请选择短信类型',
},
rules: 'required',
},
@ -33,12 +33,18 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'name',
label: '模板名称',
component: 'Input',
componentProps: {
placeholder: '请输入模板名称',
},
rules: 'required',
},
{
fieldName: 'code',
label: '模板编码',
component: 'Input',
componentProps: {
placeholder: '请输入模板编码',
},
rules: 'required',
},
{
@ -50,6 +56,7 @@ export function useFormSchema(): VbenFormSchema[] {
class: 'w-full',
labelField: 'signature',
valueField: 'id',
placeholder: '请选择短信渠道',
},
rules: 'required',
},
@ -68,17 +75,27 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'content',
label: '模板内容',
component: 'Textarea',
componentProps: {
placeholder: '请输入模板内容',
},
rules: 'required',
},
{
fieldName: 'apiTemplateId',
label: '短信 API 的模板编号',
component: 'Input',
componentProps: {
placeholder: '请输入短信 API 的模板编号',
},
rules: 'required',
},
{
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
}
},
];
}
@ -91,8 +108,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '短信类型',
component: 'Select',
componentProps: {
allowClear: true,
options: getDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, 'number'),
allowClear: true,
placeholder: '请选择短信类型',
},
},
{
@ -100,19 +118,28 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '开启状态',
component: 'Select',
componentProps: {
allowClear: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
allowClear: true,
placeholder: '请选择开启状态',
},
},
{
fieldName: 'code',
label: '模板编码',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入模板编码',
}
},
{
fieldName: 'name',
label: '模板名称',
component: 'Input',
componentProps: {
allowClear: true,
placeholder: '请输入模板名称',
}
},
{
fieldName: 'channelId',
@ -123,8 +150,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
labelField: 'signature',
valueField: 'id',
allowClear: true,
placeholder: '请选择短信渠道',
},
},
// TODO @芋艿：范围检索的处理
{
fieldName: 'createTime',
label: '创建时间',
@ -143,6 +172,9 @@ export function useSendSmsFormSchema(): VbenFormSchema[] {
fieldName: 'mobile',
label: '手机号码',
component: 'Input',
componentProps: {
placeholder: '请输入手机号码',
},
rules: 'required',
},
{
@ -158,7 +190,7 @@ export function useSendSmsFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = SystemSmsTemplateApi.SmsTemplateVO>(
export function useGridColumns<T = SystemSmsTemplateApi.SmsTemplate>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
return [
@ -228,7 +260,7 @@ export function useGridColumns<T = SystemSmsTemplateApi.SmsTemplateVO>(
{
field: 'operation',
title: '操作',
minWidth: 300,
minWidth: 180,
align: 'center',
fixed: 'right',
cellRender: {

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

@ -1,27 +1,19 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download, Plus } from '@vben/icons';
import { Button, message } from 'ant-design-vue';
import Form from './modules/form.vue';
import SendForm from './modules/send-form.vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteSmsTemplate,
exportSmsTemplate,
getSmsTemplatePage,
} from '#/api/system/sms/template';
import { $t } from '#/locales';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteSmsTemplate, exportSmsTemplate, getSmsTemplatePage } from '#/api/system/sms/template';
import { downloadByData } from '#/utils/download';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
import SendForm from './modules/send-form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
@ -50,17 +42,17 @@ function onCreate() {
}
/** 编辑短信模板 */
function onEdit(row: SystemSmsTemplateApi.SmsTemplateVO) {
function onEdit(row: SystemSmsTemplateApi.SmsTemplate) {
formModalApi.setData(row).open();
}
/** 发送测试短信 */
function onSend(row: SystemSmsTemplateApi.SmsTemplateVO) {
function onSend(row: SystemSmsTemplateApi.SmsTemplate) {
sendModalApi.setData(row).open();
}
/** 删除短信模板 */
async function onDelete(row: SystemSmsTemplateApi.SmsTemplateVO) {
async function onDelete(row: SystemSmsTemplateApi.SmsTemplate) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.name]),
duration: 0,
@ -82,16 +74,16 @@ async function onDelete(row: SystemSmsTemplateApi.SmsTemplateVO) {
function onActionClick({
code,
row,
}: OnActionClickParams<SystemSmsTemplateApi.SmsTemplateVO>) {
}: OnActionClickParams<SystemSmsTemplateApi.SmsTemplate>) {
switch (code) {
case 'delete': {
onDelete(row);
break;
}
case 'edit': {
onEdit(row);
break;
}
case 'delete': {
onDelete(row);
break;
}
case 'sms-send': {
onSend(row);
break;
@ -125,7 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<SystemSmsTemplateApi.SmsTemplateVO>,
} as VxeTableGridOptions<SystemSmsTemplateApi.SmsTemplate>,
});
</script>

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

@ -1,24 +1,18 @@
<script lang="ts" setup>
import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import {
createSmsTemplate,
getSmsTemplate,
updateSmsTemplate,
} from '#/api/system/sms/template';
import { $t } from '#/locales';
import { computed, ref } from 'vue';
import { useVbenForm } from '#/adapter/form';
import { createSmsTemplate, getSmsTemplate, updateSmsTemplate } from '#/api/system/sms/template';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<SystemSmsTemplateApi.SmsTemplateVO>();
const formData = ref<SystemSmsTemplateApi.SmsTemplate>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['短信模板'])
@ -29,6 +23,9 @@ const [Form, formApi] = useVbenForm({
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
commonConfig: {
labelWidth: 140
}
});
const [Modal, modalApi] = useVbenModal({
@ -40,7 +37,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as SystemSmsTemplateApi.SmsTemplateVO;
(await formApi.getValues()) as SystemSmsTemplateApi.SmsTemplate;
try {
await (formData.value?.id
? updateSmsTemplate(data)
@ -56,12 +53,12 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock(false);
}
},
async onOpenChange(isOpen) {
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
// 加载数据
const data = modalApi.getData<SystemSmsTemplateApi.SmsTemplateVO>();
const data = modalApi.getData<SystemSmsTemplateApi.SmsTemplate>();
if (!data || !data.id) {
return;
}

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

@ -1,24 +1,19 @@
<script lang="ts" setup>
import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { sendSms } from '#/api/system/sms/template';
import { $t } from '#/locales';
import { useSendSmsFormSchema } from '../data';
const emit = defineEmits(['success']);
const templateData = ref<SystemSmsTemplateApi.SmsTemplateVO>();
const getTitle = computed(() => {
return $t('ui.actionTitle.send', ['短信']);
});
const templateData = ref<SystemSmsTemplateApi.SmsTemplate>();
// TODO @puhui999：貌似发送短信，少了参数展示
// 动态构建表单
const buildSchema = () => {
const schema = useSendSmsFormSchema();
@ -63,7 +58,7 @@ const [Modal, modalApi] = useVbenModal({
}
// 构建发送短信请求
const data: SystemSmsTemplateApi.SendSmsReqVO = {
const data: SystemSmsTemplateApi.SmsSendReqVO = {
mobile: values.mobile,
templateCode: templateData.value?.code || '',
templateParams: paramsObj,
@ -84,12 +79,12 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock(false);
}
},
async onOpenChange(isOpen) {
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
// 获取数据
const data = modalApi.getData<SystemSmsTemplateApi.SmsTemplateVO>();
const data = modalApi.getData<SystemSmsTemplateApi.SmsTemplate>();
if (!data) {
return;
}
@ -103,7 +98,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle">
<Modal title="发送短信">
<Form class="mx-4" />
</Modal>
</template>

2
apps/web-antd/src/views/system/tenant/modules/form.vue
View File

@ -47,7 +47,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock(false);
}
},
async onOpenChange(isOpen) {
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}

43
apps/web-antd/src/views/system/user/data.ts
View File

@ -103,17 +103,26 @@ export function useGridFormSchema(): VbenFormSchema[] {
fieldName: 'username',
label: '用户名称',
component: 'Input',
componentProps: {
placeholder: '请输入用户名称',
allowClear: true,
},
},
{
fieldName: 'mobile',
label: '手机号码',
component: 'Input',
componentProps: {
placeholder: '请输入手机号码',
allowClear: true,
},
},
{
fieldName: 'status',
label: '状态',
component: 'Select',
componentProps: {
placeholder: '请输入用户状态',
allowClear: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
@ -124,6 +133,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'RangePicker',
componentProps: {
allowClear: true,
showTime: true,
format: 'YYYY-MM-DD HH:mm:ss',
placeholder: ['开始日期', '结束日期'],
},
},
];
@ -150,7 +162,7 @@ export function useGridColumns<T = SystemUserApi.SystemUser>(
minWidth: 120,
},
{
field: 'deptId',
field: 'deptName',
title: '部门',
minWidth: 120,
},
@ -159,13 +171,18 @@ export function useGridColumns<T = SystemUserApi.SystemUser>(
title: '手机号码',
minWidth: 120,
},
// TODO @芋艿：switch 的接入
{
field: 'status',
title: '状态',
minWidth: 100,
align: 'center',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
name: 'CellSwitch',
props: {
activeValue: 0,
inactiveValue: 1
},
},
},
{
@ -177,16 +194,28 @@ export function useGridColumns<T = SystemUserApi.SystemUser>(
{
field: 'operation',
title: '操作',
minWidth: 180,
align: 'center',
minWidth: 160,
fixed: 'right',
align: 'center',
cellRender: {
attrs: {
nameField: 'username',
nameTitle: '用户',
nameField: 'name',
nameTitle: '角色',
onClick: onActionClick,
},
name: 'CellOperation',
options: [
'edit', // 默认的编辑按钮
'delete', // 默认的删除按钮
{
code: 'assign-data-permission',
text: '数据权限',
},
{
code: 'assign-menu',
text: '菜单权限',
}
],
},
},
];

2
apps/web-antd/src/views/system/user/modules/form.vue
View File

@ -47,7 +47,7 @@ const [Modal, modalApi] = useVbenModal({
modalApi.lock(false);
}
},
async onOpenChange(isOpen) {
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}