Vue3 重构：邮件模版的新增和修改操作

ba327cd8 · YunaiV · 4d03e461 · ba327cd8 · ba327cd8 · ba327cd8
Commit ba327cd8 authored Mar 18, 2023 by YunaiV
5 changed files
--- a/src/api/system/mail/template/index.ts
+++ b/src/api/system/mail/template/index.ts
@@ -13,14 +13,6 @@ export interface MailTemplateVO {
  remark: string
 }
-export interface MailTemplatePageReqVO extends PageParam {
-  name?: string
-  code?: string
-  accountId?: number
-  status?: number
-  createTime?: Date[]
-}
 export interface MailSendReqVO {
  mail: string
  templateCode: string
@@ -28,31 +20,31 @@ export interface MailSendReqVO {
 }
 // 查询邮件模版列表
-export const getMailTemplatePageApi = async (params: MailTemplatePageReqVO) => {
+export const getMailTemplatePage = async (params: PageParam) => {
  return await request.get({ url: '/system/mail-template/page', params })
 }
 // 查询邮件模版详情
-export const getMailTemplateApi = async (id: number) => {
+export const getMailTemplate = async (id: number) => {
  return await request.get({ url: '/system/mail-template/get?id=' + id })
 }
 // 新增邮件模版
-export const createMailTemplateApi = async (data: MailTemplateVO) => {
+export const createMailTemplate = async (data: MailTemplateVO) => {
  return await request.post({ url: '/system/mail-template/create', data })
 }
 // 修改邮件模版
-export const updateMailTemplateApi = async (data: MailTemplateVO) => {
+export const updateMailTemplate = async (data: MailTemplateVO) => {
  return await request.put({ url: '/system/mail-template/update', data })
 }
 // 删除邮件模版
-export const deleteMailTemplateApi = async (id: number) => {
+export const deleteMailTemplate = async (id: number) => {
  return await request.delete({ url: '/system/mail-template/delete?id=' + id })
 }
 // 发送邮件
-export const sendMailApi = (data: MailSendReqVO) => {
+export const sendMail = (data: MailSendReqVO) => {
  return request.post({ url: '/system/mail-template/send-mail', data })
 }
--- a/src/views/system/mail/account/form.vue
+++ b/src/views/system/mail/account/form.vue
@@ -25,7 +25,6 @@ const openModal = async (type: string, id?: number) => {
  modelVisible.value = true
  modelTitle.value = t('action.' + type)
  formType.value = type
-  // resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true

--- a/src/views/system/mail/template/form.vue
+++ b/src/views/system/mail/template/form.vue
+<template>
+  <Dialog :title="modelTitle" v-model="modelVisible" :scroll="true" :width="800" :max-height="500">
+    <Form ref="formRef" :schema="allSchemas.formSchema" :rules="rules" v-loading="formLoading" />
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="modelVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as MailTemplateApi from '@/api/system/mail/template'
+import { rules, allSchemas } from './template.data'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const modelVisible = ref(false) // 弹窗的是否展示
+const modelTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formRef = ref() // 表单 Ref
+/** 打开弹窗 */
+const openModal = async (type: string, id?: number) => {
+  modelVisible.value = true
+  modelTitle.value = t('action.' + type)
+  formType.value = type
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const data = await MailTemplateApi.getMailTemplate(id)
+      formRef.value.setValues(data)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.getElFormRef().validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formRef.value.formModel as MailTemplateApi.MailTemplateVO
+    if (formType.value === 'create') {
+      await MailTemplateApi.createMailTemplate(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await MailTemplateApi.updateMailTemplate(data)
+      message.success(t('common.updateSuccess'))
+    }
+    modelVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>
--- a/src/views/system/mail/template/index.vue
+++ b/src/views/system/mail/template/index.vue
@@ -49,28 +49,28 @@
  </content-wrap>
  <!-- 表单弹窗：添加/修改 -->
-  <!--  <mail-template-form ref="modalRef" @success="getList" />-->
+  <mail-template-form ref="modalRef" @success="getList" />
 </template>
 <script setup lang="ts" name="MailTemplate">
 import { allSchemas } from './template.data'
 import * as MailTemplateApi from '@/api/system/mail/template'
-// import MailAccountForm from './form.vue'
+import MailTemplateForm from './form.vue'
 // tableObject：表格的属性对象，可获得分页大小、条数等属性
 // tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
 // 详细可见：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/table.html#usetable
 const { tableObject, tableMethods } = useTable({
-  getListApi: MailTemplateApi.getMailTemplatePageApi, // 分页接口
+  getListApi: MailTemplateApi.getMailTemplatePage, // 分页接口
-  delListApi: MailTemplateApi.deleteMailTemplateApi // 删除接口
+  delListApi: MailTemplateApi.deleteMailTemplate // 删除接口
 })
 // 获得表格的各种操作
 const { getList, setSearchParams } = tableMethods
 /** 添加/修改操作 */
-// const modalRef = ref()
+const modalRef = ref()
-// const openModal = (type: string, id?: number) => {
+const openModal = (type: string, id?: number) => {
-//   modalRef.value.openModal(type, id)
+  modalRef.value.openModal(type, id)
-// }
+}
 /** 删除按钮操作 */
 const handleDelete = (id: number) => {

--- a/src/views/system/mail/template/template.data.ts
+++ b/src/views/system/mail/template/template.data.ts
@@ -42,14 +42,14 @@ const crudSchemas = reactive<CrudSchema[]>([
        span: 24
      },
      componentProps: {
-        valueHtml: ''
+        valueHtml: '',
+        height: 200
      }
    }
  },
  {
    label: '邮箱账号',
    field: 'accountId',
-    isSearch: true,
    width: '200px',
    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
      return accounts.find((account) => account.id === cellValue)?.mail
@@ -57,9 +57,17 @@ const crudSchemas = reactive<CrudSchema[]>([
    search: {
      show: true,
      component: 'Select',
-      api: () => {
+      api: () => accounts,
-        return accounts
+      componentProps: {
+        optionsAlias: {
+          labelField: 'mail',
+          valueField: 'id'
+        }
+      }
    },
+    form: {
+      component: 'Select',
+      api: () => accounts,
      componentProps: {
        optionsAlias: {
          labelField: 'mail',
@@ -104,6 +112,11 @@ const crudSchemas = reactive<CrudSchema[]>([
        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
      }
    }
+  },
+  {
+    label: '操作',
+    field: 'action',
+    isForm: false
  }
 ])
 export const { allSchemas } = useCrudSchemas(crudSchemas)