Vue3 重构:基本完善完 邮件模版 的重构

This commit is contained in:
YunaiV 2023-03-18 11:40:55 +08:00
parent 7d22328d69
commit e8d83d4718
4 changed files with 136 additions and 23 deletions

View File

@ -1,8 +1,5 @@
import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
import { DictTag } from '@/components/DictTag'
import { TableColumn } from '@/types/table'
import { dateFormatter } from '@/utils/formatTime'
import { getBoolDictOptions } from '@/utils/dict'
const { t } = useI18n() // 国际化
@ -55,17 +52,10 @@ const crudSchemas = reactive<CrudSchema[]>([
{
label: '是否开启 SSL',
field: 'sslEnable',
formatter: (_: Recordable, __: TableColumn, cellValue: boolean) => {
return h(DictTag, {
type: DICT_TYPE.INFRA_BOOLEAN_STRING,
value: cellValue
})
},
dictType: DICT_TYPE.INFRA_BOOLEAN_STRING,
dictClass: 'boolean',
form: {
component: 'Radio',
componentProps: {
options: getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)
}
component: 'Radio'
}
},
{

View File

@ -28,6 +28,14 @@
v-model:currentPage="tableObject.currentPage"
>
<template #action="{ row }">
<el-button
link
type="primary"
@click="openSend(row.id)"
v-hasPermi="['system:mail-template:send-mail']"
>
测试
</el-button>
<el-button
link
type="primary"
@ -50,11 +58,15 @@
<!-- 表单弹窗添加/修改 -->
<mail-template-form ref="modalRef" @success="getList" />
<!-- 表单弹窗发送测试 -->
<mail-template-send ref="sendRef" />
</template>
<script setup lang="ts" name="MailTemplate">
import { allSchemas } from './template.data'
import * as MailTemplateApi from '@/api/system/mail/template'
import MailTemplateForm from './form.vue'
import MailTemplateSend from './send.vue'
// tableObject
// tableMethods
@ -77,6 +89,12 @@ const handleDelete = (id: number) => {
tableMethods.delList(id, false)
}
/** 发送测试操作 */
const sendRef = ref()
const openSend = (id: number) => {
sendRef.value.openModal(id)
}
/** 初始化 **/
onMounted(() => {
getList()

View File

@ -0,0 +1,115 @@
<template>
<Dialog title="测试" v-model="modelVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="120px"
v-loading="formLoading"
>
<el-form-item label="模板内容" prop="content">
<Editor :model-value="formData.content" readonly height="150px" />
</el-form-item>
<el-form-item label="收件邮箱" prop="mail">
<el-input v-model="formData.mail" placeholder="请输入收件邮箱" />
</el-form-item>
<el-form-item
v-for="param in formData.params"
:key="param"
:label="'参数 {' + param + '}'"
:prop="'templateParams.' + param"
>
<el-input
v-model="formData.templateParams[param]"
:placeholder="'请输入 ' + param + ' 参数'"
/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="submitForm" type="primary" :disabled="formLoading"> </el-button>
<el-button @click="modelVisible = false"> </el-button>
</div>
</template>
</Dialog>
</template>
<script setup lang="ts">
import * as MailTemplateApi from '@/api/system/mail/template'
const message = useMessage() //
const modelVisible = ref(false) //
const formLoading = ref(false) // 12
const formData = ref({
content: '',
params: {},
mail: '',
templateCode: '',
templateParams: new Map()
})
const formRules = reactive({
mail: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
templateCode: [{ required: true, message: '模版编号不能为空', trigger: 'blur' }],
templateParams: {}
})
const formRef = ref() // Ref
/** 打开弹窗 */
const openModal = async (id: number) => {
modelVisible.value = true
resetForm()
//
formLoading.value = true
try {
const data = await MailTemplateApi.getMailTemplate(id)
//
formData.value.content = data.content
formData.value.params = data.params
formData.value.templateCode = data.code
formData.value.templateParams = data.params.reduce((obj, item) => {
obj[item] = '' //
return obj
}, {})
formRules.templateParams = data.params.reduce((obj, item) => {
obj[item] = { required: true, message: '参数 ' + item + ' 不能为空', trigger: 'blur' }
return obj
}, {})
} finally {
formLoading.value = false
}
}
defineExpose({ openModal }) // openModal
/** 提交表单 */
const submitForm = async () => {
//
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
//
formLoading.value = true
try {
const data = formData.value as MailTemplateApi.MailSendReqVO
const logId = await MailTemplateApi.sendMail(data)
if (logId) {
message.success('提交发送成功!发送结果,见发送日志编号:' + logId)
}
modelVisible.value = false
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
content: '',
params: {},
mail: '',
templateCode: '',
templateParams: new Map()
}
formRules.templateParams = {}
formRef.value?.resetFields()
}
</script>

View File

@ -1,7 +1,6 @@
import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
import { dateFormatter } from '@/utils/formatTime'
import { TableColumn } from '@/types/table'
import { DictTag } from '@/components/DictTag'
import * as MailAccountApi from '@/api/system/mail/account'
const accounts = await MailAccountApi.getSimpleMailAccountList()
@ -38,9 +37,6 @@ const crudSchemas = reactive<CrudSchema[]>([
field: 'content',
form: {
component: 'Editor',
colProps: {
span: 24
},
componentProps: {
valueHtml: '',
height: 200
@ -84,12 +80,6 @@ const crudSchemas = reactive<CrudSchema[]>([
label: '开启状态',
field: 'status',
isSearch: true,
formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
return h(DictTag, {
type: DICT_TYPE.COMMON_STATUS,
value: cellValue
})
},
dictType: DICT_TYPE.COMMON_STATUS,
dictClass: 'number'
},