From 3f2a77f2d239f3e4d43818fe651f25cb0a5d55b7 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 17 Mar 2023 22:33:30 +0800
Subject: [PATCH] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A=E9=82=AE?=
 =?UTF-8?q?=E4=BB=B6=E8=B4=A6=E5=8F=B7=E7=9A=84=E9=87=8D=E6=9E=84=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/mail/account/index.ts          | 12 ++--
 src/views/system/mail/account/account.data.ts |  1 -
 src/views/system/mail/account/form.vue        |  6 +-
 src/views/system/mail/account/index.vue       | 61 +++++++++++--------
 src/views/system/mail/log/index.vue           |  2 +-
 src/views/system/mail/template/index.vue      |  2 +-
 6 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/src/api/system/mail/account/index.ts b/src/api/system/mail/account/index.ts
index 7f3b5382..9e10c92a 100644
--- a/src/api/system/mail/account/index.ts
+++ b/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' })
 }
diff --git a/src/views/system/mail/account/account.data.ts b/src/views/system/mail/account/account.data.ts
index 5d018cb9..24017dc0 100644
--- a/src/views/system/mail/account/account.data.ts
+++ b/src/views/system/mail/account/account.data.ts
@@ -77,7 +77,6 @@ const crudSchemas = reactive<CrudSchema[]>([
   {
     label: '操作',
     field: 'action',
-    width: '260px',
     form: {
       show: false
     }
diff --git a/src/views/system/mail/account/form.vue b/src/views/system/mail/account/form.vue
index ba6a31d8..6160dd98 100644
--- a/src/views/system/mail/account/form.vue
+++ b/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
diff --git a/src/views/system/mail/account/index.vue b/src/views/system/mail/account/index.vue
index 8bc29f6d..ec88d60b 100644
--- a/src/views/system/mail/account/index.vue
+++ b/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,7 +49,7 @@
   </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'
@@ -54,17 +57,15 @@ 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()
@@ -72,5 +73,13 @@ const openModal = (type: string, id?: number) => {
   modalRef.value.openModal(type, id)
 }
 
-getList()
+/** 删除按钮操作 */
+const handleDelete = (id: number) => {
+  tableMethods.delList(id, false)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
 </script>
diff --git a/src/views/system/mail/log/index.vue b/src/views/system/mail/log/index.vue
index e147c52c..bbc0ba00 100644
--- a/src/views/system/mail/log/index.vue
+++ b/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
   })
 })
diff --git a/src/views/system/mail/template/index.vue b/src/views/system/mail/template/index.vue
index cb4a7e5d..fab6dc67 100644
--- a/src/views/system/mail/template/index.vue
+++ b/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
   })
 })