Vue3 重构：邮件模版的列表

src/views/infra/dataSourceConfig/form.vue

@@ -30,7 +30,6 @@
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
 import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
 import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
-import { DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
 
 
 const { t } = useI18n() // 国际化
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const message = useMessage() // 消息弹窗
@@ -39,7 +38,7 @@ const modelVisible = ref(false) // 弹窗的是否展示
 const modelTitle = ref('') // 弹窗的标题
 const modelTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref<DataSourceConfigVO>({
+const formData = ref<DataSourceConfigApi.DataSourceConfigVO>({
   id: undefined,
   id: undefined,
   name: '',
   name: '',
   url: '',
   url: '',

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

@@ -77,9 +77,7 @@ const crudSchemas = reactive<CrudSchema[]>([
   {
   {
     label: '操作',
     label: '操作',
     field: 'action',
     field: 'action',
-    form: {
-      show: false
-    }
+    isForm: false
   }
   }
 ])
 ])
 export const { allSchemas } = useCrudSchemas(crudSchemas)
 export const { allSchemas } = useCrudSchemas(crudSchemas)

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

-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({
 export const rules = reactive({
   name: [required],
   name: [required],
   code: [required],
   code: [required],
   accountId: [required],
   accountId: [required],
-  title: [required],
+  label: [required],
   content: [required],
   content: [required],
   params: [required],
   params: [required],
   status: [required]
   status: [required]
 })
 })
 
 
-// CrudSchema
-const crudSchemas = reactive<VxeCrudSchema>({
-  primaryKey: 'id', // 默认的主键ID
-  primaryTitle: '编号', // 默认显示的值
-  primaryType: null,
-  action: true,
-  actionWidth: '260',
-  columns: [
+// CrudSchema：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/hooks/useCrudSchemas.html
+const crudSchemas = reactive<CrudSchema[]>([
   {
   {
-      title: '模板编码',
+    label: '模板编码',
     field: 'code',
     field: 'code',
     isSearch: true
     isSearch: true
   },
   },
   {
   {
-      title: '模板名称',
+    label: '模板名称',
     field: 'name',
     field: 'name',
     isSearch: true
     isSearch: true
   },
   },
   {
   {
-      title: '模板标题',
+    label: '模板标题',
     field: 'title'
     field: 'title'
   },
   },
   {
   {
-      title: '模板内容',
+    label: '模板内容',
     field: 'content',
     field: 'content',
     form: {
     form: {
       component: 'Editor',
       component: 'Editor',
@@ -47,45 +47,54 @@ const crudSchemas = reactive<VxeCrudSchema>({
     }
     }
   },
   },
   {
   {
-      title: '邮箱账号',
+    label: '邮箱账号',
     field: 'accountId',
     field: 'accountId',
     isSearch: true,
     isSearch: true,
-      table: {
-        width: 200,
-        slots: {
-          default: 'accountId_default'
-        }
+    width: '200px',
+    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
+      return accounts.find((account) => account.id === cellValue)?.mail
     },
     },
     search: {
     search: {
-        slots: {
-          default: 'accountId_search'
+      show: true,
+      component: 'Select',
+      api: () => {
+        return accounts
+      },
+      componentProps: {
+        optionsAlias: {
+          labelField: 'mail',
+          valueField: 'id'
+        }
       }
       }
     }
     }
   },
   },
   {
   {
-      title: '发送人名称',
+    label: '发送人名称',
     field: 'nickname'
     field: 'nickname'
   },
   },
   {
   {
-      title: '开启状态',
+    label: '开启状态',
     field: 'status',
     field: 'status',
     isSearch: true,
     isSearch: true,
+    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
+      return h(DictTag, {
+        type: DICT_TYPE.COMMON_STATUS,
+        value: cellValue
+      })
+    },
     dictType: DICT_TYPE.COMMON_STATUS,
     dictType: DICT_TYPE.COMMON_STATUS,
     dictClass: 'number'
     dictClass: 'number'
   },
   },
   {
   {
-      title: '备注',
+    label: '备注',
     field: 'remark',
     field: 'remark',
     isTable: false
     isTable: false
   },
   },
   {
   {
-      title: '创建时间',
+    label: '创建时间',
     field: 'createTime',
     field: 'createTime',
     isForm: false,
     isForm: false,
-      formatter: 'formatDate',
-      table: {
-        width: 180
-      },
+    formatter: dateFormatter,
     search: {
     search: {
       show: true,
       show: true,
       itemRender: {
       itemRender: {
@@ -93,6 +102,5 @@ const crudSchemas = reactive<VxeCrudSchema>({
       }
       }
     }
     }
   }
   }
-  ]
-})
-export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)