Skip to content

Commit e8d83d4

Browse files
YunaiVYunaiV
committed
Vue3 重构：基本完善完 邮件模版 的重构
1 parent 7d22328 commit e8d83d4

File tree

4 files changed

+136
-23
lines changed

4 files changed

+136
-23
lines changed

‎src/views/system/mail/account/account.data.ts

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
2-
import { DictTag } from '@/components/DictTag'
3-
import { TableColumn } from '@/types/table'
42
import { dateFormatter } from '@/utils/formatTime'
5-
import { getBoolDictOptions } from '@/utils/dict'
63

74
const { t } = useI18n() // 国际化
85

@@ -55,17 +52,10 @@ const crudSchemas = reactive<CrudSchema[]>([
5552
{
5653
label: '是否开启 SSL',
5754
field: 'sslEnable',
58-
formatter: (_: Recordable, __: TableColumn, cellValue: boolean) => {
59-
return h(DictTag, {
60-
type: DICT_TYPE.INFRA_BOOLEAN_STRING,
61-
value: cellValue
62-
})
63-
},
55+
dictType: DICT_TYPE.INFRA_BOOLEAN_STRING,
56+
dictClass: 'boolean',
6457
form: {
65-
component: 'Radio',
66-
componentProps: {
67-
options: getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)
68-
}
58+
component: 'Radio'
6959
}
7060
},
7161
{

‎src/views/system/mail/template/index.vue

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,14 @@
2828
v-model:currentPage="tableObject.currentPage"
2929
>
3030
<template #action="{ row }">
31+
<el-button
32+
link
33+
type="primary"
34+
@click="openSend(row.id)"
35+
v-hasPermi="['system:mail-template:send-mail']"
36+
>
37+
测试
38+
</el-button>
3139
<el-button
3240
link
3341
type="primary"
@@ -50,11 +58,15 @@
5058

5159
<!-- 表单弹窗：添加/修改 -->
5260
<mail-template-form ref="modalRef" @success="getList" />
61+
62+
<!-- 表单弹窗：发送测试 -->
63+
<mail-template-send ref="sendRef" />
5364
</template>
5465
<script setup lang="ts" name="MailTemplate">
5566
import { allSchemas } from './template.data'
5667
import * as MailTemplateApi from '@/api/system/mail/template'
5768
import MailTemplateForm from './form.vue'
69+
import MailTemplateSend from './send.vue'
5870
5971
// tableObject：表格的属性对象，可获得分页大小、条数等属性
6072
// tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
@@ -77,6 +89,12 @@ const handleDelete = (id: number) => {
7789
tableMethods.delList(id, false)
7890
}
7991
92+
/** 发送测试操作 */
93+
const sendRef = ref()
94+
const openSend = (id: number) => {
95+
sendRef.value.openModal(id)
96+
}
97+
8098
/** 初始化 **/
8199
onMounted(() => {
82100
getList()

‎src/views/system/mail/template/send.vue

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

‎src/views/system/mail/template/template.data.ts

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
22
import { dateFormatter } from '@/utils/formatTime'
33
import { TableColumn } from '@/types/table'
4-
import { DictTag } from '@/components/DictTag'
54
import * as MailAccountApi from '@/api/system/mail/account'
65

76
const accounts = await MailAccountApi.getSimpleMailAccountList()
@@ -38,9 +37,6 @@ const crudSchemas = reactive<CrudSchema[]>([
3837
field: 'content',
3938
form: {
4039
component: 'Editor',
41-
colProps: {
42-
span: 24
43-
},
4440
componentProps: {
4541
valueHtml: '',
4642
height: 200
@@ -84,12 +80,6 @@ const crudSchemas = reactive<CrudSchema[]>([
8480
label: '开启状态',
8581
field: 'status',
8682
isSearch: true,
87-
formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
88-
return h(DictTag, {
89-
type: DICT_TYPE.COMMON_STATUS,
90-
value: cellValue
91-
})
92-
},
9383
dictType: DICT_TYPE.COMMON_STATUS,
9484
dictClass: 'number'
9585
},

0 commit comments

Comments
 (0)