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

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

 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'
     }
   },
   {

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

@@ -31,6 +31,14 @@
         <el-button
           link
           type="primary"
+          @click="openSend(row.id)"
+          v-hasPermi="['system:mail-template:send-mail']"
+        >
+          测试
+        </el-button>
+        <el-button
+          link
+          type="primary"
           @click="openModal('update', row.id)"
           v-hasPermi="['system:mail-template:update']"
         >
@@ -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()

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

+<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) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+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>

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

 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'
   },