From e42a9aa60cebbc6462ed9e34230f61e3fee727aa Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 17 Mar 2023 23:24:21 +0800
Subject: [PATCH] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A=E5=9F=BA?=
 =?UTF-8?q?=E6=9C=AC=E5=AE=8C=E5=96=84=E5=AE=8C=20=E9=82=AE=E4=BB=B6?=
 =?UTF-8?q?=E8=B4=A6=E5=8F=B7=20=E7=9A=84=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/mail/account/account.data.ts |  2 +-
 src/views/system/mail/account/form.vue        |  5 ++---
 src/views/system/mail/account/index.vue       | 10 +++++-----
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/views/system/mail/account/account.data.ts b/src/views/system/mail/account/account.data.ts
index 31856296..85a27d85 100644
--- a/src/views/system/mail/account/account.data.ts
+++ b/src/views/system/mail/account/account.data.ts
@@ -23,7 +23,7 @@ export const rules = reactive({
   sslEnable: [required]
 })
 
-// CrudSchema
+// CrudSchema：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/hooks/useCrudSchemas.html
 const crudSchemas = reactive<CrudSchema[]>([
   {
     label: '邮箱',
diff --git a/src/views/system/mail/account/form.vue b/src/views/system/mail/account/form.vue
index 6160dd98..70683830 100644
--- a/src/views/system/mail/account/form.vue
+++ b/src/views/system/mail/account/form.vue
@@ -1,7 +1,6 @@
 <template>
   <Dialog :title="modelTitle" v-model="modelVisible">
-    <!-- TODO 芋艿：loading -->
-    <Form ref="formRef" :schema="allSchemas.formSchema" :rules="rules" :isCol="false" />
+    <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>
@@ -12,7 +11,6 @@
 import * as MailAccountApi from '@/api/system/mail/account'
 import { rules, allSchemas } from './account.data'
 
-const formRef = ref() // 表单 Ref
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
@@ -20,6 +18,7 @@ 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) => {
diff --git a/src/views/system/mail/account/index.vue b/src/views/system/mail/account/index.vue
index bb1a0a2a..1f80684f 100644
--- a/src/views/system/mail/account/index.vue
+++ b/src/views/system/mail/account/index.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 搜索工作栏 -->
-  <ContentWrap>
+  <content-wrap>
     <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams">
       <!-- 新增等操作按钮 -->
       <template #actionMore>
@@ -13,10 +13,10 @@
         </el-button>
       </template>
     </Search>
-  </ContentWrap>
+  </content-wrap>
 
   <!-- 列表 -->
-  <ContentWrap>
+  <content-wrap>
     <Table
       :columns="allSchemas.tableColumns"
       :data="tableObject.tableList"
@@ -46,10 +46,10 @@
         </el-button>
       </template>
     </Table>
-  </ContentWrap>
+  </content-wrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <MailAccountForm ref="modalRef" @success="getList" />
+  <mail-account-form ref="modalRef" @success="getList" />
 </template>
 <script setup lang="ts" name="MailAccount">
 import { allSchemas } from './account.data'