feat：邮箱模版的读取，放到 data.ts

apps/web-antd/src/views/system/mail/template/data.ts

@@ -1,7 +1,6 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemMailTemplateApi } from '#/api/system/mail/template';
-import type { ComputedRef } from 'vue';
 
 import { z } from '#/adapter/form';
 import { getSimpleMailAccountList } from '#/api/system/mail/account';
@@ -192,9 +191,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
+const accountList = await getSimpleMailAccountList();
 export function useGridColumns<T = SystemMailTemplateApi.SystemMailTemplate>(
-  onActionClick: OnActionClickFn<T>,
+  onActionClick: OnActionClickFn<T>
-  getAccountName: ComputedRef<(cellValue: number) => string>,
 ): VxeTableGridOptions['columns'] {
   return [
     {
@@ -221,7 +220,7 @@ export function useGridColumns<T = SystemMailTemplateApi.SystemMailTemplate>(
       field: 'accountId',
       title: '邮箱账号',
       minWidth: 120,
-      formatter: ({ cellValue }) => getAccountName.value(cellValue),
+      formatter: ({ cellValue }) => accountList.find((account) => account.id === cellValue)?.mail || '-',
     },
     {
       field: 'nickname',

apps/web-antd/src/views/system/mail/template/index.vue

@@ -1,20 +1,17 @@
 <script lang="ts" setup>
 import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { SystemMailAccountApi } from '#/api/system/mail/account';
 import type { SystemMailTemplateApi } from '#/api/system/mail/template';
 
-import { DocAlert } from '#/components/doc-alert';
 import Form from './modules/form.vue';
 import SendForm from './modules/send-form.vue';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Plus } from '@vben/icons';
 import { Button, message } from 'ant-design-vue';
+import { DocAlert } from '#/components/doc-alert';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getSimpleMailAccountList } from '#/api/system/mail/account';
 import { deleteMailTemplate, getMailTemplatePage } from '#/api/system/mail/template';
 import { $t } from '#/locales';
-import { computed, ref } from 'vue';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
@@ -70,30 +67,27 @@ async function onDelete(row: SystemMailTemplateApi.SystemMailTemplate) {
 /** 表格操作按钮的回调函数 */
 function onActionClick({ code, row }: OnActionClickParams<SystemMailTemplateApi.SystemMailTemplate>) {
   switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
     case 'edit': {
       onEdit(row);
       break;
     }
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
     case 'send': {
       onSend(row);
       break;
     }
   }
 }
-const mailAccountList = ref<SystemMailAccountApi.SystemMailAccount[]>([]);
+
-const getAccountName = computed(
-  () => (cellValue: number) => mailAccountList.value.find((item) => item.id === cellValue)?.mail || '',
-);
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick, getAccountName),
+    columns: useGridColumns(onActionClick),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -116,18 +110,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<SystemMailTemplateApi.SystemMailTemplate>,
 });
-
-/** 获取邮箱账号精简列表 */
-async function initMailAccountList() {
-  try {
-    mailAccountList.value = await getSimpleMailAccountList();
-  } catch (error) {
-    console.error('获取邮箱账号精简列表失败', error);
-  }
-}
-
-/** 初始化 */
-initMailAccountList();
 </script>
 <template>
   <Page auto-content-height>