Skip to content

Commit 74aeffe

Browse files
YunaiVYunaiV
committed
Vue3 重构：REVIEW 短信模版
1 parent 6b194bb commit 74aeffe

File tree

6 files changed

+426
-459
lines changed

6 files changed

+426
-459
lines changed

‎src/api/system/sms/smsTemplate/index.ts

Lines changed: 12 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import request from '@/config/axios'
33
export interface SmsTemplateVO {
44
id: number | null
55
type: number | null
6-
status: number | null
6+
status: number
77
code: string
88
name: string
99
content: string
@@ -21,60 +21,40 @@ export interface SendSmsReqVO {
2121
templateParams: Map<String, Object>
2222
}
2323

24-
export interface SmsTemplatePageReqVO extends PageParam {
25-
type?: number | null
26-
status?: number | null
27-
code?: string
28-
content?: string
29-
apiTemplateId?: string
30-
channelId?: number | null
31-
createTime?: Date[]
32-
}
33-
34-
export interface SmsTemplateExportReqVO {
35-
type?: number
36-
status?: number
37-
code?: string
38-
content?: string
39-
apiTemplateId?: string
40-
channelId?: number
41-
createTime?: Date[]
42-
}
43-
4424
// 查询短信模板列表
45-
export const getSmsTemplatePageApi = (params: SmsTemplatePageReqVO) => {
25+
export const getSmsTemplatePage = (params: PageParam) => {
4626
return request.get({ url: '/system/sms-template/page', params })
4727
}
4828

4929
// 查询短信模板详情
50-
export const getSmsTemplateApi = (id: number) => {
30+
export const getSmsTemplate = (id: number) => {
5131
return request.get({ url: '/system/sms-template/get?id=' + id })
5232
}
5333

5434
// 新增短信模板
55-
export const createSmsTemplateApi = (data: SmsTemplateVO) => {
35+
export const createSmsTemplate = (data: SmsTemplateVO) => {
5636
return request.post({ url: '/system/sms-template/create', data })
5737
}
5838

5939
// 修改短信模板
60-
export const updateSmsTemplateApi = (data: SmsTemplateVO) => {
40+
export const updateSmsTemplate = (data: SmsTemplateVO) => {
6141
return request.put({ url: '/system/sms-template/update', data })
6242
}
6343

6444
// 删除短信模板
65-
export const deleteSmsTemplateApi = (id: number) => {
45+
export const deleteSmsTemplate = (id: number) => {
6646
return request.delete({ url: '/system/sms-template/delete?id=' + id })
6747
}
6848

69-
// 发送短信
70-
export const sendSmsApi = (data: SendSmsReqVO) => {
71-
return request.post({ url: '/system/sms-template/send-sms', data })
72-
}
73-
7449
// 导出短信模板
75-
export const exportPostApi = (params: SmsTemplateExportReqVO) => {
50+
export const exportSmsTemplate = (params) => {
7651
return request.download({
7752
url: '/system/sms-template/export-excel',
7853
params
7954
})
8055
}
56+
57+
// 发送短信
58+
export const sendSms = (data: SendSmsReqVO) => {
59+
return request.post({ url: '/system/sms-template/send-sms', data })
60+
}

‎src/views/system/sms/log/index.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
plain
103103
@click="handleExport"
104104
:loading="exportLoading"
105-
v-hasPermi="['infra:config:export']"
105+
v-hasPermi="['system:sms-log:export']"
106106
>
107107
<Icon icon="ep:download" class="mr-5px" /> 导出
108108
</el-button>

‎src/views/system/sms/template/SmsTemplateForm.vue

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
<template>
2+
<Dialog :title="modelTitle" v-model="modelVisible">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="140px"
8+
v-loading="formLoading"
9+
>
10+
<el-form-item label="短信渠道编号" prop="channelId">
11+
<el-select v-model="formData.channelId" placeholder="请选择短信渠道编号">
12+
<el-option
13+
v-for="channel in channelList"
14+
:key="channel.id"
15+
:value="channel.id"
16+
:label="
17+
channel.signature +
18+
`【 ${getDictLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, channel.code)}】`
19+
"
20+
/>
21+
</el-select>
22+
</el-form-item>
23+
<el-form-item label="短信类型" prop="type">
24+
<el-select v-model="formData.type" placeholder="请选择短信类型">
25+
<el-option
26+
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE)"
27+
:key="dict.value"
28+
:label="dict.label"
29+
:value="dict.value"
30+
/>
31+
</el-select>
32+
</el-form-item>
33+
<el-form-item label="模板编号" prop="code">
34+
<el-input v-model="formData.code" placeholder="请输入模板编号" />
35+
</el-form-item>
36+
<el-form-item label="模板名称" prop="name">
37+
<el-input v-model="formData.name" placeholder="请输入模板名称" />
38+
</el-form-item>
39+
<el-form-item label="模板内容" prop="content">
40+
<el-input type="textarea" v-model="formData.content" placeholder="请输入模板内容" />
41+
</el-form-item>
42+
<el-form-item label="开启状态" prop="status">
43+
<el-radio-group v-model="formData.status">
44+
<el-radio
45+
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
46+
:key="dict.value"
47+
:label="parseInt(dict.value)"
48+
>
49+
{{ dict.label }}
50+
</el-radio>
51+
</el-radio-group>
52+
</el-form-item>
53+
<el-form-item label="短信 API 模板编号" prop="apiTemplateId">
54+
<el-input v-model="formData.apiTemplateId" placeholder="请输入短信 API 的模板编号" />
55+
</el-form-item>
56+
<el-form-item label="备注" prop="remark">
57+
<el-input v-model="formData.remark" placeholder="请输入备注" />
58+
</el-form-item>
59+
</el-form>
60+
<template #footer>
61+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
62+
<el-button @click="modelVisible = false">取 消</el-button>
63+
</template>
64+
</Dialog>
65+
</template>
66+
<script setup lang="ts">
67+
import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
68+
import * as SmsTemplateApi from '@/api/system/sms/smsTemplate'
69+
import * as SmsChannelApi from '@/api/system/sms/smsChannel'
70+
import { CommonStatusEnum } from '@/utils/constants'
71+
const { t } = useI18n() // 国际化
72+
const message = useMessage() // 消息弹窗
73+
74+
const modelVisible = ref(false) // 弹窗的是否展示
75+
const modelTitle = ref('') // 弹窗的标题
76+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
77+
const formType = ref('') // 表单的类型
78+
const formData = ref<SmsTemplateApi.SmsTemplateVO>({
79+
id: null,
80+
type: null,
81+
status: CommonStatusEnum.ENABLE,
82+
code: '',
83+
name: '',
84+
content: '',
85+
remark: '',
86+
apiTemplateId: '',
87+
channelId: null
88+
})
89+
const formRules = reactive({
90+
type: [{ required: true, message: '短信类型不能为空', trigger: 'change' }],
91+
status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
92+
code: [{ required: true, message: '模板编码不能为空', trigger: 'blur' }],
93+
name: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
94+
content: [{ required: true, message: '模板内容不能为空', trigger: 'blur' }],
95+
apiTemplateId: [{ required: true, message: '短信 API 的模板编号不能为空', trigger: 'blur' }],
96+
channelId: [{ required: true, message: '短信渠道编号不能为空', trigger: 'change' }]
97+
})
98+
const formRef = ref() // 表单 Ref
99+
const channelList = ref([]) // 短信渠道列表
100+
101+
const open = async (type: string, id?: number) => {
102+
modelVisible.value = true
103+
modelTitle.value = t('action.' + type)
104+
formType.value = type
105+
resetForm()
106+
// 修改时，设置数据
107+
if (id) {
108+
formLoading.value = true
109+
try {
110+
formData.value = await SmsTemplateApi.getSmsTemplate(id)
111+
} finally {
112+
formLoading.value = false
113+
}
114+
}
115+
// 加载渠道列表
116+
channelList.value = await SmsChannelApi.getSimpleSmsChannelList()
117+
}
118+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
119+
120+
/** 提交表单 */
121+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
122+
const submitForm = async () => {
123+
// 校验表单
124+
if (!formRef) return
125+
const valid = await formRef.value.validate()
126+
if (!valid) return
127+
formLoading.value = true
128+
try {
129+
const data = formData.value as SmsTemplateApi.SmsTemplateVO
130+
if (formType.value === 'create') {
131+
await SmsTemplateApi.createSmsTemplate(data)
132+
message.success(t('common.createSuccess'))
133+
} else {
134+
await SmsTemplateApi.updateSmsTemplate(data)
135+
message.success(t('common.updateSuccess'))
136+
}
137+
modelVisible.value = false
138+
// 发送操作成功的事件
139+
emit('success')
140+
} finally {
141+
formLoading.value = false
142+
}
143+
}
144+
145+
/** 重置表单 */
146+
const resetForm = () => {
147+
formData.value = {
148+
id: null,
149+
type: null,
150+
status: CommonStatusEnum.ENABLE,
151+
code: '',
152+
name: '',
153+
content: '',
154+
remark: '',
155+
apiTemplateId: '',
156+
channelId: null
157+
}
158+
formRef.value?.resetFields()
159+
}
160+
</script>

‎src/views/system/sms/template/SmsTemplateSendForm.vue

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<template>
2+
<Dialog title="测试" v-model="modelVisible">
3+
<el-form
4+
ref="formRef"
5+
:model="formData"
6+
:rules="formRules"
7+
label-width="140px"
8+
v-loading="formLoading"
9+
>
10+
<el-form-item label="模板内容" prop="content">
11+
<el-input
12+
v-model="formData.content"
13+
type="textarea"
14+
placeholder="请输入模板内容"
15+
readonly
16+
/>
17+
</el-form-item>
18+
<el-form-item label="手机号" prop="mobile">
19+
<el-input v-model="formData.mobile" placeholder="请输入手机号" />
20+
</el-form-item>
21+
<el-form-item
22+
v-for="param in formData.params"
23+
:key="param"
24+
:label="'参数 {' + param + '}'"
25+
:prop="'templateParams.' + param"
26+
>
27+
<el-input
28+
v-model="formData.templateParams[param]"
29+
:placeholder="'请输入 ' + param + ' 参数'"
30+
/>
31+
</el-form-item>
32+
</el-form>
33+
<template #footer>
34+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
35+
<el-button @click="modelVisible = false">取 消</el-button>
36+
</template>
37+
</Dialog>
38+
</template>
39+
<script setup lang="ts">
40+
import * as SmsTemplateApi from '@/api/system/sms/smsTemplate'
41+
const message = useMessage() // 消息弹窗
42+
43+
const modelVisible = ref(false) // 弹窗的是否展示
44+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
45+
46+
// 发送短信表单相关
47+
const formData = ref({
48+
content: '',
49+
params: {},
50+
mobile: '',
51+
templateCode: '',
52+
templateParams: new Map()
53+
})
54+
const formRules = reactive({
55+
mobile: [{ required: true, message: '手机不能为空', trigger: 'blur' }],
56+
templateCode: [{ required: true, message: '模版编码不能为空', trigger: 'blur' }],
57+
templateParams: {}
58+
})
59+
const formRef = ref() // 表单 Ref
60+
61+
const open = async (id: number) => {
62+
modelVisible.value = true
63+
resetForm()
64+
// 设置数据
65+
formLoading.value = true
66+
try {
67+
const data = await SmsTemplateApi.getSmsTemplate(id)
68+
// 设置动态表单
69+
formData.value.content = data.content
70+
formData.value.params = data.params
71+
formData.value.templateCode = data.code
72+
formData.value.templateParams = data.params.reduce((obj, item) => {
73+
obj[item] = '' // 给每个动态属性赋值，避免无法读取
74+
return obj
75+
}, {})
76+
formRules.templateParams = data.params.reduce((obj, item) => {
77+
obj[item] = { required: true, message: '参数 ' + item + ' 不能为空', trigger: 'blur' }
78+
return obj
79+
}, {})
80+
} finally {
81+
formLoading.value = false
82+
}
83+
}
84+
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
85+
86+
/** 提交表单 */
87+
const submitForm = async () => {
88+
// 校验表单
89+
if (!formRef) return
90+
const valid = await formRef.value.validate()
91+
if (!valid) return
92+
// 提交请求
93+
formLoading.value = true
94+
try {
95+
const data = formData.value as SmsTemplateApi.SendSmsReqVO
96+
const logId = await SmsTemplateApi.sendSms(data)
97+
if (logId) {
98+
message.success('提交发送成功！发送结果，见发送日志编号：' + logId)
99+
}
100+
modelVisible.value = false
101+
} finally {
102+
formLoading.value = false
103+
}
104+
}
105+
106+
/** 重置表单 */
107+
const resetForm = () => {
108+
formData.value = {
109+
content: '',
110+
params: {},
111+
mobile: '',
112+
templateCode: '',
113+
templateParams: new Map()
114+
}
115+
formRef.value?.resetFields()
116+
}
117+
</script>

0 commit comments

Comments
 (0)