Vue3 重构：邮件模版的列表

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

@@ -1,98 +1,106 @@
-import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
+import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
+import { dateFormatter } from '@/utils/formatTime'
+import { TableColumn } from '@/types/table'
+import { DictTag } from '@/components/DictTag'
+import * as MailAccountApi from '@/api/system/mail/account'
+
+const accounts = await MailAccountApi.getSimpleMailAccountList()
 
 // 表单校验
 export const rules = reactive({
   name: [required],
   code: [required],
   accountId: [required],
-  title: [required],
+  label: [required],
   content: [required],
   params: [required],
   status: [required]
 })
 
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id', // 默认的主键ID
-  primaryTitle: '编号', // 默认显示的值
-  primaryType: null,
-  action: true,
-  actionWidth: '260',
-  columns: [
-    {
-      title: '模板编码',
-      field: 'code',
-      isSearch: true
-    },
-    {
-      title: '模板名称',
-      field: 'name',
-      isSearch: true
-    },
-    {
-      title: '模板标题',
-      field: 'title'
-    },
-    {
-      title: '模板内容',
-      field: 'content',
-      form: {
-        component: 'Editor',
-        colProps: {
-          span: 24
-        },
-        componentProps: {
-          valueHtml: ''
-        }
-      }
-    },
-    {
-      title: '邮箱账号',
-      field: 'accountId',
-      isSearch: true,
-      table: {
-        width: 200,
-        slots: {
-          default: 'accountId_default'
-        }
+// CrudSchema：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/hooks/useCrudSchemas.html
+const crudSchemas = reactive<CrudSchema[]>([
+  {
+    label: '模板编码',
+    field: 'code',
+    isSearch: true
+  },
+  {
+    label: '模板名称',
+    field: 'name',
+    isSearch: true
+  },
+  {
+    label: '模板标题',
+    field: 'title'
+  },
+  {
+    label: '模板内容',
+    field: 'content',
+    form: {
+      component: 'Editor',
+      colProps: {
+        span: 24
       },
-      search: {
-        slots: {
-          default: 'accountId_search'
-        }
+      componentProps: {
+        valueHtml: ''
       }
+    }
+  },
+  {
+    label: '邮箱账号',
+    field: 'accountId',
+    isSearch: true,
+    width: '200px',
+    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
+      return accounts.find((account) => account.id === cellValue)?.mail
     },
-    {
-      title: '发送人名称',
-      field: 'nickname'
-    },
-    {
-      title: '开启状态',
-      field: 'status',
-      isSearch: true,
-      dictType: DICT_TYPE.COMMON_STATUS,
-      dictClass: 'number'
-    },
-    {
-      title: '备注',
-      field: 'remark',
-      isTable: false
-    },
-    {
-      title: '创建时间',
-      field: 'createTime',
-      isForm: false,
-      formatter: 'formatDate',
-      table: {
-        width: 180
+    search: {
+      show: true,
+      component: 'Select',
+      api: () => {
+        return accounts
       },
-      search: {
-        show: true,
-        itemRender: {
-          name: 'XDataTimePicker'
+      componentProps: {
+        optionsAlias: {
+          labelField: 'mail',
+          valueField: 'id'
         }
       }
     }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
+  },
+  {
+    label: '发送人名称',
+    field: 'nickname'
+  },
+  {
+    label: '开启状态',
+    field: 'status',
+    isSearch: true,
+    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
+      return h(DictTag, {
+        type: DICT_TYPE.COMMON_STATUS,
+        value: cellValue
+      })
+    },
+    dictType: DICT_TYPE.COMMON_STATUS,
+    dictClass: 'number'
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    isTable: false
+  },
+  {
+    label: '创建时间',
+    field: 'createTime',
+    isForm: false,
+    formatter: dateFormatter,
+    search: {
+      show: true,
+      itemRender: {
+        name: 'XDataTimePicker'
+      }
+    }
+  }
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)