邮箱模块：vue3 邮箱账号的管理

YunaiV
1 parent 2c55d294
Showing 5 changed files with 259 additions and 1 deletions
README.md
yudao-ui-admin-vue3/src/api/system/mail/account/index.ts
yudao-ui-admin-vue3/src/views/system/mail/account/account.template.data.ts
yudao-ui-admin-vue3/src/views/system/mail/account/index.vue
yudao-ui-admin/src/views/system/mail/account/index.vue
@@ -91,6 +91,7 @@
 | 🚀  | 租户套餐  | 配置租户套餐，自定每个租户的菜单、操作、按钮的权限       |
 |     | 字典管理  | 对系统中经常使用的一些较为固定的数据进行维护          |
 | 🚀  | 短信管理  | 短信渠道、短息模板、短信日志，对接阿里云、腾讯云等主流短信平台 |
+| 🚀  | 邮件管理  | 邮箱账号、邮件模版、邮件发送日志，支持所有邮件平台       |
 | 🚀  | 操作日志  | 系统正常操作日志记录和查询，集成 Swagger 生成日志内容 |
 | ⭐️  | 登录日志  | 系统登录日志记录查询，包含登录异常               |
 | 🚀  | 错误码管理 | 系统所有错误码的管理，可在线修改错误提示，无需重启服务     |
+import request from '@/config/axios'
+
+export interface MailAccountVO {
+  id: number
+  mail: string
+  username: string
+  password: string
+  host: string
+  port: number
+  sslEnable: boolean
+}
+
+export interface MailAccountPageReqVO extends PageParam {
+  mail?: string
+  username?: string
+}
+
+// 查询邮箱账号列表
+export const getMailAccountPageApi = async (params: MailAccountPageReqVO) => {
+  return await request.get({ url: '/system/mail-account/page', params })
+}
+
+// 查询邮箱账号详情
+export const getMailAccountApi = async (id: number) => {
+  return await request.get({ url: '/system/mail-account/get?id=' + id })
+}
+
+// 新增邮箱账号
+export const createMailAccountApi = async (data: MailAccountVO) => {
+  return await request.post({ url: '/system/mail-account/create', data })
+}
+
+// 修改邮箱账号
+export const updateMailAccountApi = async (data: MailAccountVO) => {
+  return await request.put({ url: '/system/mail-account/update', data })
+}
+
+// 删除邮箱账号
+export const deleteMailAccountApi = async (id: number) => {
+  return await request.delete({ url: '/system/mail-account/delete?id=' + id })
+}
+import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
+
+// 表单校验
+export const rules = reactive({
+  mail: [required],
+  username: [required],
+  password: [required],
+  host: [required],
+  port: [required],
+  sslEnable: [required]
+})
+
+// CrudSchema
+const crudSchemas = reactive<VxeCrudSchema>({
+  primaryKey: 'id', // 默认的主键 ID
+  primaryTitle: '编号',
+  primaryType: 'id',
+  action: true,
+  actionWidth: '200', // 3 个按钮默认 200，如有删减对应增减即可
+  columns: [
+    {
+      title: '邮箱',
+      field: 'mail',
+      isSearch: true
+    },
+    {
+      title: '用户名',
+      field: 'username',
+      isSearch: true
+    },
+    {
+      title: '密码',
+      field: 'password',
+      isTable: false
+    },
+    {
+      title: 'SMTP 服务器域名',
+      field: 'host'
+    },
+    {
+      title: 'SMTP 服务器端口',
+      field: 'port',
+      form: {
+        component: 'InputNumber',
+        value: 465
+      }
+    },
+    {
+      title: '是否开启 SSL',
+      field: 'sslEnable',
+      dictType: DICT_TYPE.INFRA_BOOLEAN_STRING,
+      dictClass: 'boolean'
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      isForm: false,
+      formatter: 'formatDate',
+      table: {
+        width: 180
+      }
+    }
+  ]
+})
+export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
+<template>
+  <ContentWrap>
+    <!-- 列表 -->
+    <XTable @register="registerTable">
+      <template #toolbar_buttons>
+        <!-- 操作：新增 -->
+        <XButton
+          type="primary"
+          preIcon="ep:zoom-in"
+          :title="t('action.add')"
+          v-hasPermi="['system:mail-account:create']"
+          @click="handleCreate()"
+        />
+      </template>
+      <template #actionbtns_default="{ row }">
+        <!-- 操作：修改 -->
+        <XTextButton
+          preIcon="ep:edit"
+          :title="t('action.edit')"
+          v-hasPermi="['system:mail-account:update']"
+          @click="handleUpdate(row.id)"
+        />
+        <!-- 操作：详情 -->
+        <XTextButton
+          preIcon="ep:view"
+          :title="t('action.detail')"
+          v-hasPermi="['system:mail-account:query']"
+          @click="handleDetail(row.id)"
+        />
+        <!-- 操作：删除 -->
+        <XTextButton
+          preIcon="ep:delete"
+          :title="t('action.del')"
+          v-hasPermi="['system:mail-account:delete']"
+          @click="deleteData(row.id)"
+        />
+      </template>
+    </XTable>
+  </ContentWrap>
+  <!-- 弹窗 -->
+  <XModal id="mailAccountModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
+    <!-- 表单：添加/修改 -->
+    <Form
+      ref="formRef"
+      v-if="['create', 'update'].includes(actionType)"
+      :schema="allSchemas.formSchema"
+      :rules="rules"
+    />
+    <!-- 表单：详情 -->
+    <Descriptions
+      v-if="actionType === 'detail'"
+      :schema="allSchemas.detailSchema"
+      :data="detailData"
+    />
+    <template #footer>
+      <!-- 按钮：保存 -->
+      <XButton
+        v-if="['create', 'update'].includes(actionType)"
+        type="primary"
+        :title="t('action.save')"
+        :loading="actionLoading"
+        @click="submitForm()"
+      />
+      <!-- 按钮：关闭 -->
+      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
+    </template>
+  </XModal>
+</template>
+<script setup lang="ts" name="MailAccount">
+import { FormExpose } from '@/components/Form'
+// 业务相关的 import
+import { rules, allSchemas } from './account.template.data'
+import * as MailAccountApi from '@/api/system/mail/account'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+// 列表相关的变量
+const [registerTable, { reload, deleteData }] = useXTable({
+  allSchemas: allSchemas,
+  getListApi: MailAccountApi.getMailAccountPageApi,
+  deleteApi: MailAccountApi.deleteMailAccountApi
+})
+
+// 弹窗相关的变量
+const modelVisible = ref(false) // 是否显示弹出层
+const modelTitle = ref('edit') // 弹出层标题
+const modelLoading = ref(false) // 弹出层loading
+const actionType = ref('') // 操作按钮的类型
+const actionLoading = ref(false) // 按钮 Loading
+const formRef = ref<FormExpose>() // 表单 Ref
+const detailData = ref() // 详情 Ref
+
+// 设置标题
+const setDialogTile = (type: string) => {
+  modelLoading.value = true
+  modelTitle.value = t('action.' + type)
+  actionType.value = type
+  modelVisible.value = true
+}
+
+// 新增操作
+const handleCreate = () => {
+  setDialogTile('create')
+  modelLoading.value = false
+}
+
+// 修改操作
+const handleUpdate = async (rowId: number) => {
+  setDialogTile('update')
+  // 设置数据
+  const res = await MailAccountApi.getMailAccountApi(rowId)
+  unref(formRef)?.setValues(res)
+  modelLoading.value = false
+}
+
+// 详情操作
+const handleDetail = async (rowId: number) => {
+  setDialogTile('detail')
+  const res = await MailAccountApi.getMailAccountApi(rowId)
+  detailData.value = res
+  modelLoading.value = false
+}
+
+// 提交按钮
+const submitForm = async () => {
+  const elForm = unref(formRef)?.getElFormRef()
+  if (!elForm) return
+  elForm.validate(async (valid) => {
+    if (valid) {
+      actionLoading.value = true
+      // 提交请求
+      try {
+        const data = unref(formRef)?.formModel as MailAccountApi.MailAccountVO
+        if (actionType.value === 'create') {
+          await MailAccountApi.createMailAccountApi(data)
+          message.success(t('common.createSuccess'))
+        } else {
+          await MailAccountApi.updateMailAccountApi(data)
+          message.success(t('common.updateSuccess'))
+        }
+        modelVisible.value = false
+      } finally {
+        actionLoading.value = false
+        // 刷新列表
+        await reload()
+      }
+    }
+  })
+}
+</script>
@@ -27,7 +27,7 @@
  
     <!-- 列表 -->
     <el-table v-loading="loading" :data="list">
-      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="编号" align="center" prop="id" />
       <el-table-column label="邮箱" align="center" prop="mail" />
       <el-table-column label="用户名" align="center" prop="username" />
       <el-table-column label="SMTP 服务器域名" align="center" prop="host" />