refactor: 短信管理相关模块
							parent
							
								
									ce18a22637
								
							
						
					
					
						commit
						28d1df74ad
					
				|  | @ -27,12 +27,16 @@ export function getSmsChannelPage(params: PageParam) { | |||
| 
 | ||||
| /** 获得短信渠道精简列表 */ | ||||
| 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) { | ||||
|   return requestClient.get<SystemSmsChannelApi.SmsChannel>(`/system/sms-channel/get?id=${id}`); | ||||
|   return requestClient.get<SystemSmsChannelApi.SmsChannel>( | ||||
|     `/system/sms-channel/get?id=${id}`, | ||||
|   ); | ||||
| } | ||||
| 
 | ||||
| /** 新增短信渠道 */ | ||||
|  |  | |||
|  | @ -4,7 +4,7 @@ import { requestClient } from '#/api/request'; | |||
| 
 | ||||
| export namespace SystemSmsLogApi { | ||||
|   /** 短信日志信息 */ | ||||
|   export interface SmsLogVO { | ||||
|   export interface SmsLog { | ||||
|     id?: number; | ||||
|     channelId?: number; | ||||
|     channelCode: string; | ||||
|  | @ -18,22 +18,25 @@ export namespace SystemSmsLogApi { | |||
|     userId?: number; | ||||
|     userType?: number; | ||||
|     sendStatus?: number; | ||||
|     sendTime?: Date; | ||||
|     sendTime?: string; | ||||
|     apiSendCode: string; | ||||
|     apiSendMsg: string; | ||||
|     apiRequestId: string; | ||||
|     apiSerialNo: string; | ||||
|     receiveStatus?: number; | ||||
|     receiveTime?: Date; | ||||
|     receiveTime?: string; | ||||
|     apiReceiveCode: string; | ||||
|     apiReceiveMsg: string; | ||||
|     createTime?: Date; | ||||
|     createTime: string; | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| /** 查询短信日志列表 */ | ||||
| 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 }, | ||||
|   ); | ||||
| } | ||||
| 
 | ||||
| /** 导出短信日志 */ | ||||
|  |  | |||
|  | @ -1,4 +1,4 @@ | |||
| import type { PageResult } from '@vben/request'; | ||||
| import type { PageParam, PageResult } from '@vben/request'; | ||||
| 
 | ||||
| import { requestClient } from '#/api/request'; | ||||
| 
 | ||||
|  | @ -20,7 +20,7 @@ export namespace SystemSmsTemplateApi { | |||
|   } | ||||
| 
 | ||||
|   /** 发送短信请求 */ | ||||
|   export interface SmsSendReqVO { | ||||
|   export interface SmsSendReq { | ||||
|     mobile: string; | ||||
|     templateCode: string; | ||||
|     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>>( | ||||
|     '/system/sms-template/page', | ||||
|     { params }, | ||||
|  | @ -37,7 +37,9 @@ export function getSmsTemplatePage(params: any) { | |||
| 
 | ||||
| /** 查询短信模板详情 */ | ||||
| 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) { | ||||
|   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); | ||||
| } | ||||
|  |  | |||
|  | @ -15,7 +15,7 @@ export function useGridFormSchema(): VbenFormSchema[] { | |||
|       componentProps: { | ||||
|         allowClear: true, | ||||
|         placeholder: '请输入手机号', | ||||
|       } | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       fieldName: 'channelId', | ||||
|  | @ -36,7 +36,7 @@ export function useGridFormSchema(): VbenFormSchema[] { | |||
|       componentProps: { | ||||
|         allowClear: true, | ||||
|         placeholder: '请输入模板编号', | ||||
|       } | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       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>, | ||||
| ): VxeTableGridOptions['columns'] { | ||||
|   return [ | ||||
|  |  | |||
|  | @ -1,18 +1,22 @@ | |||
| <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 { Button } from 'ant-design-vue'; | ||||
| 
 | ||||
| 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, | ||||
|  | @ -31,7 +35,7 @@ async function onExport() { | |||
| } | ||||
| 
 | ||||
| /** 查看短信日志详情 */ | ||||
| function onView(row: SystemSmsLogApi.SmsLogVO) { | ||||
| function onView(row: SystemSmsLogApi.SmsLog) { | ||||
|   formModalApi.setData(row).open(); | ||||
| } | ||||
| 
 | ||||
|  | @ -39,7 +43,7 @@ function onView(row: SystemSmsLogApi.SmsLogVO) { | |||
| function onActionClick({ | ||||
|   code, | ||||
|   row, | ||||
| }: OnActionClickParams<SystemSmsLogApi.SmsLogVO>) { | ||||
| }: OnActionClickParams<SystemSmsLogApi.SmsLog>) { | ||||
|   switch (code) { | ||||
|     case 'view': { | ||||
|       onView(row); | ||||
|  | @ -74,7 +78,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ | |||
|       refresh: { code: 'query' }, | ||||
|       search: true, | ||||
|     }, | ||||
|   } as VxeTableGridOptions<SystemSmsLogApi.SmsLogVO>, | ||||
|   } as VxeTableGridOptions<SystemSmsLogApi.SmsLog>, | ||||
| }); | ||||
| </script> | ||||
| 
 | ||||
|  |  | |||
|  | @ -1,11 +1,16 @@ | |||
| <script lang="ts" setup> | ||||
| import type { SystemSmsLogApi } from '#/api/system/sms/log'; | ||||
| 
 | ||||
| import { useVbenModal } from '@vben/common-ui'; | ||||
| 
 | ||||
| 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({ | ||||
|   async onOpenChange(isOpen: boolean) { | ||||
|  | @ -13,7 +18,7 @@ const [Modal, modalApi] = useVbenModal({ | |||
|       return; | ||||
|     } | ||||
|     // 加载数据 | ||||
|     const data = modalApi.getData<SystemSmsLogApi.SmsLogVO>(); | ||||
|     const data = modalApi.getData<SystemSmsLogApi.SmsLog>(); | ||||
|     if (!data || !data.id) { | ||||
|       return; | ||||
|     } | ||||
|  | @ -27,97 +32,78 @@ const [Modal, modalApi] = useVbenModal({ | |||
| }); | ||||
| </script> | ||||
| 
 | ||||
| <!-- TODO @puhui999:https://ant-design.antgroup.com/components/descriptions-cn 参考这个? --> | ||||
| <template> | ||||
|   <Modal title="短信日志详情"> | ||||
|     <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"> | ||||
|           <!-- TODO @puhui:格式不对 --> | ||||
|           <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"> | ||||
|           <!-- TODO @puhui:格式不对 --> | ||||
|           <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"> | ||||
|           <!-- TODO @puhui:格式不对 --> | ||||
|           <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> | ||||
|       <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> | ||||
| 
 | ||||
| <style scoped> | ||||
| .form-item { | ||||
|   @apply mb-2; | ||||
| } | ||||
| 
 | ||||
| .form-label { | ||||
|   @apply font-medium; | ||||
| } | ||||
| </style> | ||||
|  |  | |||
|  | @ -95,7 +95,7 @@ export function useFormSchema(): VbenFormSchema[] { | |||
|       component: 'Textarea', | ||||
|       componentProps: { | ||||
|         placeholder: '请输入备注', | ||||
|       } | ||||
|       }, | ||||
|     }, | ||||
|   ]; | ||||
| } | ||||
|  | @ -130,7 +130,7 @@ export function useGridFormSchema(): VbenFormSchema[] { | |||
|       componentProps: { | ||||
|         allowClear: true, | ||||
|         placeholder: '请输入模板编码', | ||||
|       } | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       fieldName: 'name', | ||||
|  | @ -139,7 +139,7 @@ export function useGridFormSchema(): VbenFormSchema[] { | |||
|       componentProps: { | ||||
|         allowClear: true, | ||||
|         placeholder: '请输入模板名称', | ||||
|       } | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       fieldName: 'channelId', | ||||
|  | @ -168,6 +168,14 @@ export function useGridFormSchema(): VbenFormSchema[] { | |||
| /** 发送短信表单 */ | ||||
| export function useSendSmsFormSchema(): VbenFormSchema[] { | ||||
|   return [ | ||||
|     { | ||||
|       fieldName: 'content', | ||||
|       label: '模板内容', | ||||
|       component: 'Textarea', | ||||
|       componentProps: { | ||||
|         disabled: true, | ||||
|       }, | ||||
|     }, | ||||
|     { | ||||
|       fieldName: 'mobile', | ||||
|       label: '手机号码', | ||||
|  |  | |||
|  | @ -1,10 +1,12 @@ | |||
| <script lang="ts" setup> | ||||
| import type { SystemSmsTemplateApi } from '#/api/system/sms/template'; | ||||
| 
 | ||||
| import { 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'; | ||||
| 
 | ||||
|  | @ -13,7 +15,6 @@ import { useSendSmsFormSchema } from '../data'; | |||
| const emit = defineEmits(['success']); | ||||
| const templateData = ref<SystemSmsTemplateApi.SmsTemplate>(); | ||||
| 
 | ||||
| // TODO @puhui999:貌似发送短信,少了参数展示 | ||||
| // 动态构建表单 | ||||
| const buildSchema = () => { | ||||
|   const schema = useSendSmsFormSchema(); | ||||
|  | @ -22,9 +23,12 @@ const buildSchema = () => { | |||
|   if (templateData.value?.params && templateData.value.params.length > 0) { | ||||
|     templateData.value.params.forEach((param) => { | ||||
|       schema.push({ | ||||
|         component: 'Input', | ||||
|         fieldName: `param_${param}`, | ||||
|         label: `参数 ${param}`, | ||||
|         component: 'Input', | ||||
|         componentProps: { | ||||
|           placeholder: '请输入', | ||||
|         }, | ||||
|         rules: 'required', | ||||
|       }); | ||||
|     }); | ||||
|  | @ -58,7 +62,7 @@ const [Modal, modalApi] = useVbenModal({ | |||
|     } | ||||
| 
 | ||||
|     // 构建发送短信请求 | ||||
|     const data: SystemSmsTemplateApi.SmsSendReqVO = { | ||||
|     const data: SystemSmsTemplateApi.SmsSendReq = { | ||||
|       mobile: values.mobile, | ||||
|       templateCode: templateData.value?.code || '', | ||||
|       templateParams: paramsObj, | ||||
|  | @ -92,7 +96,12 @@ const [Modal, modalApi] = useVbenModal({ | |||
|     templateData.value = data; | ||||
|     // 更新表单结构 | ||||
|     const schema = buildSchema(); | ||||
|     await formApi.updateSchema(schema); | ||||
|     formApi.setState({ schema }); | ||||
| 
 | ||||
|     // 设置表单初始值,包括模板内容 | ||||
|     await formApi.setValues({ | ||||
|       content: data.content, | ||||
|     }); | ||||
|   }, | ||||
| }); | ||||
| </script> | ||||
|  |  | |||
		Loading…
	
		Reference in New Issue
	
	 puhui999
						puhui999