feat: 完成邮件相关功能

src/api/system/mail/template.ts

@@ -25,7 +25,30 @@ export function getMailTemplatePage(params) {
   return defHttp.get({ url: '/system/mail-template/page', params })
 }
 
+// 邮件模板
+export type MailTemplate = {
+  name: string // 标题
+  code: string // 编码
+  accountId: number
+  nickname: string // 发送人
+  title: string // 标题
+  content: string // 内容
+  status: number //
+  remark?: any // 备注
+  id: number
+  params: string[] // 模板里的参数
+  createTime: number
+}
+
+export type SendMailParams = {
+  mail: string
+  templateCode: string
+  templateParams: {
+    [key: string]: any
+  }
+}
+
 // 发送测试邮件
-export function sendMail(data) {
+export function sendMail(data: SendMailParams) {
   return defHttp.post({ url: '/system/mail-template/send-mail', data })
 }

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

@@ -0,0 +1,90 @@
+<template>
+  <BasicModal v-bind="$attrs" title="测试发送邮件" @register="innerRegister" @ok="submit">
+    <BasicForm @register="register" :schemas="reactiveSchemas" />
+  </BasicModal>
+</template>
+
+<script setup lang="ts">
+import { BasicModal, useModalInner } from '@/components/Modal'
+import { BasicForm, FormSchema, useForm } from '@/components/Form'
+import { reactive, ref } from 'vue'
+import { MailTemplate } from '@/api/system/mail/template'
+import { sendMail } from '@/api/system/mail/template'
+import { useMessage } from '@/hooks/web/useMessage'
+import { baseSendSchemas } from './template.data'
+
+defineOptions({ name: 'SendMailModal' })
+
+const { createMessage } = useMessage()
+let reactiveSchemas: FormSchema[] = reactive([])
+const templateCode = ref<string>('')
+
+const [register, { setFieldsValue, getFieldsValue, validateFields, resetFields, clearValidate, setProps }] = useForm({
+  labelWidth: 100,
+  // schemas: reactiveSchemas, 这里用动态绑定会有问题
+  baseColProps: {
+    span: 24
+  },
+  showSubmitButton: false,
+  showResetButton: false
+})
+
+const [innerRegister, { changeLoading, closeModal }] = useModalInner((data: MailTemplate) => {
+  resetForm()
+  data.params.forEach((item) => {
+    const dySchema: FormSchema = {
+      // 这里加上前缀 防止和content/mail字段重名
+      field: `key-${item}`,
+      label: `参数{${item}} `,
+      component: 'Input',
+      componentProps: {
+        placeholder: `输入{${item}}`
+      },
+      required: true
+    }
+    reactiveSchemas.push(dySchema)
+  })
+  const { content, code } = data
+  setFieldsValue({ content })
+  templateCode.value = code
+})
+
+const submit = async () => {
+  try {
+    setProps({ disabled: true })
+    changeLoading(true)
+    await validateFields()
+    const fields = getFieldsValue()
+    const data = {
+      mail: fields.mail,
+      templateCode: templateCode.value,
+      templateParams: {}
+    }
+    Object.keys(fields).forEach((key) => {
+      if (key === 'content' || key === 'mail') {
+        return
+      }
+      // 去掉 - 后的key
+      const realKey = key.split('-')[1]
+      data.templateParams[realKey] = fields[key]
+    })
+    await sendMail(data)
+    createMessage.success(`发送邮件到[${fields.mail}]成功`)
+    closeModal()
+  } finally {
+    setProps({ disabled: false })
+    changeLoading(false)
+  }
+}
+
+const resetForm = () => {
+  // 这里需要每次清空动态表单
+  reactiveSchemas.splice(0, reactiveSchemas.length)
+  reactiveSchemas.push(...baseSendSchemas)
+  // 清除上一次的表单校验和参数
+  resetFields()
+  clearValidate()
+}
+</script>
+
+<style scoped></style>

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

@@ -20,7 +20,7 @@ const emit = defineEmits(['success', 'register'])
 const isUpdate = ref(true)
 
 const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
-  labelWidth: 120,
+  labelWidth: 100,
   baseColProps: { span: 24 },
   schemas: formSchema,
   showActionButtonGroup: false,

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

@@ -38,7 +38,8 @@
         </template>
       </template>
     </BasicTable>
-    <TemplateModal @register="registerModal" @success="reload()" />
+    <TemplateModal @register="registerTemplateModal" @success="reload()" />
+    <SendMailModal @register="registerSendModal" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -46,16 +47,18 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { useModal } from '@/components/Modal'
 import TemplateModal from './TemplateModal.vue'
+import SendMailModal from './SendMailModal.vue'
 import { IconEnum } from '@/enums/appEnum'
 import { BasicTable, useTable, TableAction } from '@/components/Table'
-import { deleteMailTemplate, getMailTemplatePage, sendMail } from '@/api/system/mail/template'
+import { deleteMailTemplate, getMailTemplatePage } from '@/api/system/mail/template'
 import { columns, searchFormSchema } from './template.data'
 
 defineOptions({ name: 'SystemMailTemplate' })
 
 const { t } = useI18n()
 const { createMessage } = useMessage()
-const [registerModal, { openModal }] = useModal()
+const [registerTemplateModal, { openModal }] = useModal()
+const [registerSendModal, { openModal: openSenModal }] = useModal()
 const [registerTable, { reload }] = useTable({
   title: '邮件模板列表',
   api: getMailTemplatePage,
@@ -78,8 +81,7 @@ function handleCreate() {
 
 function handleSend(record: Recordable) {
   console.info(record)
-  // TODO
+  openSenModal(true, record)
-  sendMail(null)
 }
 
 function handleEdit(record: Recordable) {

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

@@ -143,7 +143,8 @@ export const formSchema: FormSchema[] = [
   {
     label: '模板内容',
     field: 'content',
-    component: 'InputTextArea'
+    component: 'Editor',
+    required: true
   },
   {
     label: '开启状态',
@@ -160,3 +161,31 @@ export const formSchema: FormSchema[] = [
     component: 'InputTextArea'
   }
 ]
+
+// 发送邮件
+export const baseSendSchemas: FormSchema[] = [
+  {
+    field: 'content',
+    component: 'Editor',
+    label: '模板内容 ',
+    required: false,
+    defaultValue: ''
+  },
+  {
+    field: 'mail',
+    label: '收件邮箱 ',
+    component: 'Input',
+    componentProps: {
+      placeholder: '输入收件邮箱'
+    },
+    required: true,
+    rules: [
+      {
+        required: true,
+        pattern: /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/,
+        trigger: 'blur',
+        message: '邮箱格式不正确'
+      }
+    ]
+  }
+]