Skip to content

Commit 6e90bbe

Browse files
author
puhui999
committed
add: 改造vue2中的短信模板到vue3中
1 parent c1b1ffa commit 6e90bbe

File tree

6 files changed

+602
-326
lines changed

6 files changed

+602
-326
lines changed

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@ export interface SmsChannelVO {
1212
createTime: Date
1313
}
1414

15+
export interface SmsChannelListVO {
16+
id: number
17+
code: string
18+
signature: string
19+
}
20+
1521
export interface SmsChannelPageReqVO extends PageParam {
1622
signature?: string
1723
code?: string

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
import request from '@/config/axios'
22

33
export interface SmsTemplateVO {
4-
id: number
5-
type: number
6-
status: number
4+
id: number | null
5+
type: number | null
6+
status: number | null
77
code: string
88
name: string
99
content: string
1010
remark: string
1111
apiTemplateId: string
12-
channelId: number
13-
channelCode: string
14-
params: string[]
15-
createTime: Date
12+
channelId: number | null
13+
channelCode?: string
14+
params?: string[]
15+
createTime?: Date
1616
}
1717

1818
export interface SendSmsReqVO {
@@ -21,13 +21,13 @@ export interface SendSmsReqVO {
2121
templateParams: Map<String, Object>
2222
}
2323

24-
export interface SmsTemplatePageReqVO {
25-
type?: number
26-
status?: number
24+
export interface SmsTemplatePageReqVO extends PageParam {
25+
type?: number | null
26+
status?: number | null
2727
code?: string
2828
content?: string
2929
apiTemplateId?: string
30-
channelId?: number
30+
channelId?: number | null
3131
createTime?: Date[]
3232
}
3333

‎src/locales/zh-CN.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,14 @@ export default {
302302
dialog: {
303303
dialog: '弹窗',
304304
open: '打开',
305-
close: '关闭'
305+
close: '关闭',
306+
sms: {
307+
template: {
308+
addTitle: '添加短信模板',
309+
updtaeTitle: '修改短信模板',
310+
sendSms: '发送短信'
311+
}
312+
}
306313
},
307314
sys: {
308315
api: {

‎src/views/system/sms/smsTemplate/form.vue

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
<template>
2+
<Dialog :title="modelTitle" v-model="modelVisible">
3+
<el-form
4+
v-if="['template.addTitle', 'template.updtaeTitle'].includes(formType)"
5+
ref="formRef"
6+
:model="formData"
7+
:rules="formRules"
8+
label-width="140px"
9+
>
10+
<el-form-item label="短信渠道编号" prop="channelId">
11+
<el-select v-model="formData.channelId" placeholder="请选择短信渠道编号">
12+
<el-option
13+
v-for="channel in channelOptions"
14+
:key="channel.id"
15+
:value="channel.id"
16+
:label="
17+
channel.signature + optionLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, channel.code)
18+
"
19+
/>
20+
</el-select>
21+
</el-form-item>
22+
<el-form-item label="短信类型" prop="type">
23+
<el-select v-model="formData.type" placeholder="请选择短信类型">
24+
<el-option
25+
v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE)"
26+
:key="dict.value"
27+
:label="dict.label"
28+
:value="parseInt(dict.value)"
29+
/>
30+
</el-select>
31+
</el-form-item>
32+
<el-form-item label="模板编号" prop="code">
33+
<el-input v-model="formData.code" placeholder="请输入模板编号" />
34+
</el-form-item>
35+
<el-form-item label="模板名称" prop="name">
36+
<el-input v-model="formData.name" placeholder="请输入模板名称" />
37+
</el-form-item>
38+
<el-form-item label="模板内容" prop="content">
39+
<el-input type="textarea" v-model="formData.content" placeholder="请输入模板内容" />
40+
</el-form-item>
41+
<el-form-item label="开启状态" prop="status">
42+
<el-radio-group v-model="formData.status">
43+
<el-radio
44+
v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS)"
45+
:key="dict.value"
46+
:label="parseInt(dict.value)"
47+
>{{ dict.label }}</el-radio
48+
>
49+
</el-radio-group>
50+
</el-form-item>
51+
<el-form-item label="短信 API 模板编号" prop="apiTemplateId">
52+
<el-input v-model="formData.apiTemplateId" placeholder="请输入短信 API 的模板编号" />
53+
</el-form-item>
54+
<el-form-item label="备注" prop="remark">
55+
<el-input v-model="formData.remark" placeholder="请输入备注" />
56+
</el-form-item>
57+
</el-form>
58+
<el-form
59+
v-if="formType === 'template.sendSms'"
60+
ref="sendSmsFormRef"
61+
:model="sendSmsForm"
62+
:rules="sendSmsRules"
63+
>
64+
<el-form-item label="模板内容" prop="content">
65+
<el-input
66+
v-model="sendSmsForm.content"
67+
type="textarea"
68+
placeholder="请输入模板内容"
69+
readonly
70+
/>
71+
</el-form-item>
72+
<el-form-item label="手机号" prop="mobile">
73+
<el-input v-model="sendSmsForm.mobile" placeholder="请输入手机号" />
74+
</el-form-item>
75+
<el-form-item
76+
v-for="param in sendSmsForm.params"
77+
:key="param"
78+
:label="'参数 {' + param + '}'"
79+
:prop="'templateParams.' + param"
80+
>
81+
<el-input
82+
v-model="sendSmsForm.templateParams[param]"
83+
:placeholder="'请输入 ' + param + ' 参数'"
84+
/>
85+
</el-form-item>
86+
</el-form>
87+
<template #footer>
88+
<div class="dialog-footer">
89+
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
90+
<el-button @click="modelVisible = false">取 消</el-button>
91+
</div>
92+
</template>
93+
</Dialog>
94+
</template>
95+
<script setup lang="ts" name="SmsTemplateFrom">
96+
import { DICT_TYPE, getDictOptions, getDictLabel } from '@/utils/dict'
97+
import * as templateApi from '@/api/system/sms/smsTemplate'
98+
import * as SmsChannelApi from '@/api/system/sms/smsChannel'
99+
const { t } = useI18n() // 国际化
100+
const message = useMessage() // 消息弹窗
101+
102+
defineProps({
103+
channelOptions: {
104+
type: Array as PropType<SmsChannelApi.SmsChannelListVO[]>,
105+
define: () => {}
106+
}
107+
})
108+
109+
const modelVisible = ref(false) // 弹窗的是否展示
110+
const modelTitle = ref('') // 弹窗的标题
111+
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
112+
const formType = ref('') // 表单的类型
113+
const formData = ref<templateApi.SmsTemplateVO>({
114+
id: null,
115+
type: null,
116+
status: null,
117+
code: '',
118+
name: '',
119+
content: '',
120+
remark: '',
121+
apiTemplateId: '',
122+
channelId: null
123+
})
124+
const formRules = reactive({
125+
type: [{ required: true, message: '短信类型不能为空', trigger: 'change' }],
126+
status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
127+
code: [{ required: true, message: '模板编码不能为空', trigger: 'blur' }],
128+
name: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }],
129+
content: [{ required: true, message: '模板内容不能为空', trigger: 'blur' }],
130+
apiTemplateId: [{ required: true, message: '短信 API 的模板编号不能为空', trigger: 'blur' }],
131+
channelId: [{ required: true, message: '短信渠道编号不能为空', trigger: 'change' }]
132+
})
133+
134+
const formRef = ref() // 表单 Ref
135+
const optionLabel = computed(
136+
() => (type: string, code: string) => `【${getDictLabel(type, code)}】`
137+
)
138+
// 发送短信表单相关
139+
const sendSmsForm = ref({
140+
content: '',
141+
params: {},
142+
mobile: '',
143+
templateCode: '',
144+
templateParams: {}
145+
})
146+
const sendSmsRules = reactive({
147+
mobile: [{ required: true, message: '手机不能为空', trigger: 'blur' }],
148+
templateCode: [{ required: true, message: '模版编码不能为空', trigger: 'blur' }],
149+
templateParams: {}
150+
})
151+
const sendSmsFormRef = ref()
152+
/** 打开弹窗 */
153+
interface openModalOption {
154+
type: string
155+
id?: ''
156+
row?: any
157+
}
158+
const openModal = async (option: openModalOption) => {
159+
modelVisible.value = true
160+
modelTitle.value = t('dialog.sms.' + option.type)
161+
formType.value = option.type
162+
resetForm()
163+
resetSendSms()
164+
// 短信测试
165+
if (option.row) {
166+
sendSmsForm.value.content = option.row.content
167+
sendSmsForm.value.params = option.row.params
168+
sendSmsForm.value.templateCode = option.row.code
169+
sendSmsForm.value.templateParams = option.row.params.reduce(function (obj, item) {
170+
obj[item] = undefined
171+
return obj
172+
}, {})
173+
sendSmsRules.templateParams = option.row.params.reduce(function (obj, item) {
174+
obj[item] = { required: true, message: '参数 ' + item + ' 不能为空', trigger: 'change' }
175+
return obj
176+
}, {})
177+
}
178+
179+
// 修改时，设置数据
180+
if (option.id) {
181+
formLoading.value = true
182+
try {
183+
formData.value = await templateApi.getSmsTemplateApi(option.id)
184+
} finally {
185+
formLoading.value = false
186+
}
187+
}
188+
}
189+
defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
190+
191+
/** 提交表单 */
192+
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
193+
const submitForm = async () => {
194+
if (['template.addTitle', 'template.updtaeTitle'].includes(formType.value)) {
195+
// 校验表单
196+
if (!formRef) return
197+
const valid = await formRef.value.validate()
198+
if (!valid) return
199+
// 提交请求
200+
formLoading.value = true
201+
try {
202+
const data = formData.value as templateApi.SmsTemplateVO
203+
if (formType.value === 'template.addTitle') {
204+
await templateApi.createSmsTemplateApi(data)
205+
message.success(t('common.createSuccess'))
206+
} else {
207+
await templateApi.updateSmsTemplateApi(data)
208+
message.success(t('common.updateSuccess'))
209+
}
210+
modelVisible.value = false
211+
// 发送操作成功的事件
212+
emit('success')
213+
} finally {
214+
formLoading.value = false
215+
}
216+
}
217+
if (formType.value === 'template.sendSms') {
218+
sendSmsTest()
219+
}
220+
}
221+
222+
/** 重置表单 */
223+
const resetForm = () => {
224+
formData.value = {
225+
id: null,
226+
type: null,
227+
status: null,
228+
code: '',
229+
name: '',
230+
content: '',
231+
remark: '',
232+
apiTemplateId: '',
233+
channelId: null
234+
}
235+
formRef.value?.resetFields()
236+
}
237+
/** 重置发送短信的表单 */
238+
const resetSendSms = () => {
239+
// 根据 row 重置表单
240+
sendSmsForm.value = {
241+
content: '',
242+
params: {},
243+
mobile: '',
244+
templateCode: '',
245+
templateParams: {}
246+
}
247+
sendSmsFormRef.value?.resetFields()
248+
}
249+
/** 发送短信 */
250+
const sendSmsTest = async () => {
251+
const data: templateApi.SendSmsReqVO = {
252+
mobile: sendSmsForm.value.mobile,
253+
templateCode: sendSmsForm.value.templateCode,
254+
templateParams: sendSmsForm.value.templateParams as unknown as Map<string, Object>
255+
}
256+
const res = await templateApi.sendSmsApi(data)
257+
if (res) {
258+
message.success('提交发送成功！发送结果，见发送日志编号：' + res)
259+
}
260+
formLoading.value = false
261+
}
262+
</script>

0 commit comments

Comments
 (0)