vue3 重构：邮件账号的新增 + 修改 + 删除

Author: YunaiV

src/api/system/mail/account/index.ts

@@ -10,13 +10,8 @@ export interface MailAccountVO {
   sslEnable: boolean
 }
 
-export interface MailAccountPageReqVO extends PageParam {
-  mail?: string
-  username?: string
-}
-
 // 查询邮箱账号列表
-export const getMailAccountPageApi = async (params: MailAccountPageReqVO) => {
+export const getMailAccountPageApi = async (params: PageParam) => {
   return await request.get({ url: '/system/mail-account/page', params })
 }
 

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

@@ -2,6 +2,7 @@ import { CrudSchema, useCrudSchemas } 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() // 国际化
 
@@ -59,13 +60,27 @@ const crudSchemas = reactive<CrudSchema[]>([
         type: DICT_TYPE.INFRA_BOOLEAN_STRING,
         value: cellValue
       })
+    },
+    form: {
+      component: 'Radio',
+      componentProps: {
+        options: getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)
+      }
     }
   },
   {
     label: '创建时间',
     field: 'createTime',
     isForm: false,
     formatter: dateFormatter
+  },
+  {
+    label: '操作',
+    field: 'action',
+    width: '260px',
+    form: {
+      show: false
+    }
   }
 ])
 export const { allSchemas } = useCrudSchemas(crudSchemas)

src/views/system/mail/account/form.vue

@@ -0,0 +1,68 @@
+<template>
+  <Dialog :title="modelTitle" v-model="modelVisible">
+    <!-- TODO 芋艿：loading -->
+    <Form ref="formRef" :schema="allSchemas.formSchema" :rules="rules" :isCol="false" />
+    <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 MailAccountApi from '@/api/system/mail/account'
+import { rules, allSchemas } from './account.data'
+
+const formRef = ref() // 表单 Ref
+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 openModal = async (type: string, id?: number) => {
+  modelVisible.value = true
+  modelTitle.value = t('action.' + type)
+  formType.value = type
+  // resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const data = await MailAccountApi.getMailAccountApi(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 MailAccountApi.MailAccountVO
+    if (formType.value === 'create') {
+      await MailAccountApi.createMailAccountApi(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await MailAccountApi.updateMailAccountApi(data)
+      message.success(t('common.updateSuccess'))
+    }
+    modelVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>

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

@@ -1,8 +1,17 @@
 <template>
   <ContentWrap>
+    <!-- TODO @芋艿：setSearchParams -->
     <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
   </ContentWrap>
 
+  <el-button
+    type="primary"
+    @click="openModal('create')"
+    v-hasPermi="['system:mail-account:create']"
+  >
+    <Icon icon="ep:plus" class="mr-5px" /> 新增
+  </el-button>
+
   <ContentWrap>
     <Table
       v-model:pageSize="tableObject.pageSize"
@@ -16,18 +25,37 @@
       @register="register"
     >
       <template #action="{ row }">
-        <ElButton type="danger" @click="delData(row, false)">
-          {{ t('exampleDemo.del') }}
-        </ElButton>
+        <el-button
+          link
+          type="primary"
+          @click="openModal('update', row.id)"
+          v-hasPermi="['system:mail-account:update']"
+        >
+          编辑
+        </el-button>
+        <el-button
+          link
+          type="danger"
+          v-hasPermi="['system:mail-account:delete']"
+          @click="delList(row.id, false)"
+        >
+          删除
+        </el-button>
       </template>
     </Table>
   </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <mail-account-form ref="modalRef" @success="getList" />
 </template>
 <script setup lang="ts" name="MailAccount">
 import { allSchemas } from './account.data'
 import { useTable } from '@/hooks/web/useTable'
-import { Table } from '@/components/Table'
 import * as MailAccountApi from '@/api/system/mail/account'
+import MailAccountForm from './form.vue'
+
+// const { t } = useI18n() // 国际化
+// const message = useMessage() // 消息弹窗
 
 const { register, tableObject, methods } = useTable<MailAccountApi.MailAccountVO>({
   getListApi: MailAccountApi.getMailAccountPageApi,
@@ -36,5 +64,13 @@ const { register, tableObject, methods } = useTable<MailAccountApi.MailAccountVO
 
 const { getList, setSearchParams } = methods
 
+const { delList } = methods
+
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = (type: string, id?: number) => {
+  modalRef.value.openModal(type, id)
+}
+
 getList()
 </script>