Vue3 重构：邮件日志的列表

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

@@ -1,98 +1,59 @@
 <template>
-  <ContentWrap>
+  <!-- 搜索工作栏 -->
+  <content-wrap>
+    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
+  </content-wrap>
+
   <!-- 列表 -->
-    <XTable @register="registerTable">
-      <template #accountId_search>
-        <el-select v-model="queryParams.accountId">
-          <el-option :key="undefined" label="全部" :value="undefined" />
-          <el-option
-            v-for="item in accountOptions"
-            :key="item.id"
-            :label="item.mail"
-            :value="item.id"
-          />
-        </el-select>
-      </template>
-      <template #toMail_default="{ row }">
-        <div>{{ row.toMail }}</div>
-        <div v-if="row.userType && row.userId">
-          <DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />{{ '(' + row.userId + ')' }}
-        </div>
-      </template>
-      <template #actionbtns_default="{ row }">
-        <!-- 操作：详情 -->
-        <XTextButton
-          preIcon="ep:view"
-          :title="t('action.detail')"
+  <content-wrap>
+    <Table
+      :columns="allSchemas.tableColumns"
+      :data="tableObject.tableList"
+      :loading="tableObject.loading"
+      :pagination="{
+        total: tableObject.total
+      }"
+      v-model:pageSize="tableObject.pageSize"
+      v-model:currentPage="tableObject.currentPage"
+    >
+      <template #action="{ row }">
+        <el-button
+          link
+          type="primary"
+          @click="openModal('update', row.id)"
           v-hasPermi="['system:mail-log:query']"
-          @click="handleDetail(row.id)"
-        />
+        >
+          详情
+        </el-button>
       </template>
-    </XTable>
-  </ContentWrap>
-  <!-- 弹窗 -->
-  <XModal id="mailLogModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
-    <!-- 表单：详情 -->
-    <Descriptions
-      v-if="actionType === 'detail'"
-      :schema="allSchemas.detailSchema"
-      :data="detailData"
-    />
-    <template #footer>
-      <!-- 按钮：关闭 -->
-      <XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
-    </template>
-  </XModal>
+    </Table>
+  </content-wrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <!--  <mail-account-form ref="modalRef" @success="getList" />-->
 </template>
 <script setup lang="ts" name="MailLog">
-// 业务相关的 import
-import { DICT_TYPE } from '@/utils/dict'
 import { allSchemas } from './log.data'
 import * as MailLogApi from '@/api/system/mail/log'
-import * as MailAccountApi from '@/api/system/mail/account'
+// import MailAccountForm from './form.vue'
 
-const { t } = useI18n() // 国际化
-
-// 列表相关的变量
-const queryParams = reactive({
-  accountId: null
+// tableObject：表格的属性对象，可获得分页大小、条数等属性
+// tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
+// 详细可见：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/table.html#usetable
+const { tableObject, tableMethods } = useTable({
+  getListApi: MailLogApi.getMailLogPageApi // 分页接口
 })
-const [registerTable] = useXTable({
-  allSchemas: allSchemas,
-  topActionSlots: false,
-  params: queryParams,
-  getListApi: MailLogApi.getMailLogPageApi
-})
-const accountOptions = ref<any[]>([]) // 账号下拉选项
+// 获得表格的各种操作
+const { getList, setSearchParams } = tableMethods
 
-// 弹窗相关的变量
-const modelVisible = ref(false) // 是否显示弹出层
-const modelTitle = ref('edit') // 弹出层标题
-const modelLoading = ref(false) // 弹出层loading
-const actionType = ref('') // 操作按钮的类型
-const actionLoading = ref(false) // 按钮 Loading
-const detailData = ref() // 详情 Ref
-
-// 设置标题
-const setDialogTile = (type: string) => {
-  modelLoading.value = true
-  modelTitle.value = t('action.' + type)
-  actionType.value = type
-  modelVisible.value = true
+/** 添加/修改操作 */
+const modalRef = ref()
+const openModal = (type: string, id?: number) => {
+  modalRef.value.openModal(type, id)
 }
 
-// 详情操作
-const handleDetail = async (rowId: number) => {
-  setDialogTile('detail')
-  const res = await MailLogApi.getMailLogApi(rowId)
-  detailData.value = res
-  modelLoading.value = false
-}
-
-// ========== 初始化 ==========
+/** 初始化 **/
 onMounted(() => {
-  MailAccountApi.getSimpleMailAccountList().then((data) => {
-    accountOptions.value = data
-  })
+  getList()
 })
 </script>

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

@@ -1,46 +1,42 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
+import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
+import { dateFormatter } from '@/utils/formatTime'
+import * as MailAccountApi from '@/api/system/mail/account'
 
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id',
-  primaryTitle: '编号',
-  primaryType: 'id',
-  action: true,
-  actionWidth: '70',
-  columns: [
+// 邮箱账号的列表
+const accounts = await MailAccountApi.getSimpleMailAccountList()
+
+// CrudSchema：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/hooks/useCrudSchemas.html
+const crudSchemas = reactive<CrudSchema[]>([
   {
-      title: '发送时间',
-      field: 'sendTime',
-      table: {
-        width: 180
+    label: '编号',
+    field: 'id'
   },
-      formatter: 'formatDate',
+  {
+    label: '发送时间',
+    field: 'sendTime',
+    formatter: dateFormatter,
     search: {
       show: true,
-        itemRender: {
-          name: 'XDataTimePicker'
+      component: 'DatePicker',
+      componentProps: {
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        type: 'daterange',
+        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
       }
     }
   },
   {
-      title: '接收邮箱',
-      field: 'toMail',
-      isSearch: true,
-      table: {
-        width: 180,
-        slots: {
-          default: 'toMail_default'
-        }
-      }
+    label: '接收邮箱',
+    field: 'toMail'
   },
   {
-      title: '用户编号',
+    label: '用户编号',
     field: 'userId',
     isSearch: true,
     isTable: false
   },
   {
-      title: '用户类型',
+    label: '用户类型',
     field: 'userType',
     dictType: DICT_TYPE.USER_TYPE,
     dictClass: 'number',
@@ -48,74 +44,84 @@ const crudSchemas = reactive<VxeCrudSchema>({
     isTable: false
   },
   {
-      title: '邮件标题',
+    label: '邮件标题',
     field: 'templateTitle'
   },
   {
-      title: '邮件内容',
+    label: '邮件内容',
     field: 'templateContent',
     isTable: false
   },
   {
-      title: '邮箱参数',
+    label: '邮箱参数',
     field: 'templateParams',
     isTable: false
   },
   {
-      title: '发送状态',
+    label: '发送状态',
     field: 'sendStatus',
     dictType: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
     dictClass: 'string',
     isSearch: true
   },
   {
-      title: '邮箱账号',
+    label: '邮箱账号',
     field: 'accountId',
-      isSearch: true,
     isTable: false,
     search: {
-        slots: {
-          default: 'accountId_search'
+      show: true,
+      component: 'Select',
+      api: () => accounts,
+      componentProps: {
+        optionsAlias: {
+          labelField: 'mail',
+          valueField: 'id'
+        }
       }
     }
   },
   {
-      title: '发送邮箱地址',
+    label: '发送邮箱地址',
     field: 'fromMail',
     table: {
-        title: '邮箱账号'
+      label: '邮箱账号'
     }
   },
   {
-      title: '模板编号',
+    label: '模板编号',
     field: 'templateId',
     isSearch: true
   },
   {
-      title: '模板编码',
+    label: '模板编码',
     field: 'templateCode',
     isTable: false
   },
   {
-      title: '模版发送人名称',
+    label: '模版发送人名称',
     field: 'templateNickname',
     isTable: false
   },
   {
-      title: '发送返回的消息编号',
+    label: '发送返回的消息编号',
     field: 'sendMessageId',
     isTable: false
   },
   {
-      title: '发送异常',
+    label: '发送异常',
     field: 'sendException',
     isTable: false
   },
   {
-      title: '创建时间',
+    label: '创建时间',
     field: 'createTime',
-      isTable: false
+    isTable: false,
+    formatter: dateFormatter
+  },
+  {
+    label: '操作',
+    field: 'action',
+    isForm: false
   }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)

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

@@ -3,6 +3,7 @@ import { dateFormatter } from '@/utils/formatTime'
 import { TableColumn } from '@/types/table'
 import * as MailAccountApi from '@/api/system/mail/account'
 
+// 邮箱账号的列表
 const accounts = await MailAccountApi.getSimpleMailAccountList()
 
 // 表单校验