Vue3 重构：邮件账号的重构部分提交

Author: YunaiV

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

@@ -11,31 +11,31 @@ export interface MailAccountVO {
 }
 
 // 查询邮箱账号列表
-export const getMailAccountPageApi = async (params: PageParam) => {
+export const getMailAccountPage = async (params: PageParam) => {
   return await request.get({ url: '/system/mail-account/page', params })
 }
 
 // 查询邮箱账号详情
-export const getMailAccountApi = async (id: number) => {
+export const getMailAccount = async (id: number) => {
   return await request.get({ url: '/system/mail-account/get?id=' + id })
 }
 
 // 新增邮箱账号
-export const createMailAccountApi = async (data: MailAccountVO) => {
+export const createMailAccount = async (data: MailAccountVO) => {
   return await request.post({ url: '/system/mail-account/create', data })
 }
 
 // 修改邮箱账号
-export const updateMailAccountApi = async (data: MailAccountVO) => {
+export const updateMailAccount = async (data: MailAccountVO) => {
   return await request.put({ url: '/system/mail-account/update', data })
 }
 
 // 删除邮箱账号
-export const deleteMailAccountApi = async (id: number) => {
+export const deleteMailAccount = async (id: number) => {
   return await request.delete({ url: '/system/mail-account/delete?id=' + id })
 }
 
 // 获得邮箱账号精简列表
-export const getSimpleMailAccounts = async () => {
+export const getSimpleMailAccountList = async () => {
   return request.get({ url: '/system/mail-account/list-all-simple' })
 }

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

@@ -77,7 +77,6 @@ const crudSchemas = reactive<CrudSchema[]>([
   {
     label: '操作',
     field: 'action',
-    width: '260px',
     form: {
       show: false
     }

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

@@ -31,7 +31,7 @@ const openModal = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      const data = await MailAccountApi.getMailAccountApi(id)
+      const data = await MailAccountApi.getMailAccount(id)
       formRef.value.setValues(data)
     } finally {
       formLoading.value = false
@@ -52,10 +52,10 @@ const submitForm = async () => {
   try {
     const data = formRef.value.formModel as MailAccountApi.MailAccountVO
     if (formType.value === 'create') {
-      await MailAccountApi.createMailAccountApi(data)
+      await MailAccountApi.createMailAccount(data)
       message.success(t('common.createSuccess'))
     } else {
-      await MailAccountApi.updateMailAccountApi(data)
+      await MailAccountApi.updateMailAccount(data)
       message.success(t('common.updateSuccess'))
     }
     modelVisible.value = false

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

@@ -1,28 +1,31 @@
 <template>
+  <!-- 搜索工作栏 -->
   <ContentWrap>
-    <!-- TODO @芋艿：setSearchParams -->
-    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
+    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams">
+      <!-- 新增等操作按钮 -->
+      <template #actionMore>
+        <el-button
+          type="primary"
+          @click="openModal('create')"
+          v-hasPermi="['system:mail-account:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </template>
+    </Search>
   </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"
-      v-model:currentPage="tableObject.currentPage"
       :columns="allSchemas.tableColumns"
       :data="tableObject.tableList"
       :loading="tableObject.loading"
       :pagination="{
         total: tableObject.total
       }"
-      @register="register"
+      v-model:pageSize="tableObject.pageSize"
+      v-model:currentPage="tableObject.currentPage"
     >
       <template #action="{ row }">
         <el-button
@@ -37,7 +40,7 @@
           link
           type="danger"
           v-hasPermi="['system:mail-account:delete']"
-          @click="delList(row.id, false)"
+          @click="handleDelete(row.id)"
         >
           删除
         </el-button>
@@ -46,31 +49,37 @@
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <mail-account-form ref="modalRef" @success="getList" />
+  <MailAccountForm ref="modalRef" @success="getList" />
 </template>
 <script setup lang="ts" name="MailAccount">
 import { allSchemas } from './account.data'
 import { useTable } from '@/hooks/web/useTable'
 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,
-  delListApi: MailAccountApi.deleteMailAccountApi
+// https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/table.html#usetable
+// tableObject：表格的属性对象，可获得分页大小、条数等属性
+// tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
+const { tableObject, tableMethods } = useTable({
+  getListApi: MailAccountApi.getMailAccountPage, // 分页接口
+  delListApi: MailAccountApi.deleteMailAccount // 删除接口
 })
-
-const { getList, setSearchParams } = methods
-
-const { delList } = methods
+// 获得表格的各种操作
+const { getList, setSearchParams } = tableMethods
 
 /** 添加/修改操作 */
 const modalRef = ref()
 const openModal = (type: string, id?: number) => {
   modalRef.value.openModal(type, id)
 }
 
-getList()
+/** 删除按钮操作 */
+const handleDelete = (id: number) => {
+  tableMethods.delList(id, false)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
 </script>

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

@@ -91,7 +91,7 @@ const handleDetail = async (rowId: number) => {
 
 // ========== 初始化 ==========
 onMounted(() => {
-  MailAccountApi.getSimpleMailAccounts().then((data) => {
+  MailAccountApi.getSimpleMailAccountList().then((data) => {
     accountOptions.value = data
   })
 })

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

@@ -266,7 +266,7 @@ const sendTest = async () => {
 
 // ========== 初始化 ==========
 onMounted(() => {
-  MailAccountApi.getSimpleMailAccounts().then((data) => {
+  MailAccountApi.getSimpleMailAccountList().then((data) => {
     accountOptions.value = data
   })
 })