邮箱账号，增加详情弹窗

Author: YunaiV

src/views/system/mail/account/MailAccountDetail.vue

@@ -0,0 +1,26 @@
+<template>
+  <Dialog title="详情" v-model="dialogVisible">
+    <Descriptions :schema="allSchemas.detailSchema" :data="detailData" />
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as MailAccountApi from '@/api/system/mail/account'
+import { allSchemas } from './account.data'
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref() // 详情数据
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  // 设置数据
+  detailLoading.value = true
+  try {
+    detailData.value = await MailAccountApi.getMailAccount(id)
+  } finally {
+    detailLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>

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

@@ -61,12 +61,16 @@ const crudSchemas = reactive<CrudSchema[]>([
     label: '创建时间',
     field: 'createTime',
     isForm: false,
-    formatter: dateFormatter
+    formatter: dateFormatter,
+    detail: {
+      dateFormat: 'YYYY-MM-DD HH:mm:ss'
+    }
   },
   {
     label: '操作',
     field: 'action',
-    isForm: false
+    isForm: false,
+    isDetail: false
   }
 ])
 export const { allSchemas } = useCrudSchemas(crudSchemas)

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

@@ -39,6 +39,14 @@
         >
           编辑
         </el-button>
+        <el-button
+          link
+          type="primary"
+          @click="openDetail(row.id)"
+          v-hasPermi="['system:mail-account:query']"
+        >
+          详情
+        </el-button>
         <el-button
           link
           type="danger"
@@ -53,11 +61,14 @@
 
   <!-- 表单弹窗：添加/修改 -->
   <MailAccountForm ref="formRef" @success="getList" />
+  <!-- 详情弹窗 -->
+  <MailAccountDetail ref="detailRef" />
 </template>
 <script setup lang="ts" name="MailAccount">
 import { allSchemas } from './account.data'
 import * as MailAccountApi from '@/api/system/mail/account'
 import MailAccountForm from './MailAccountForm.vue'
+import MailAccountDetail from './MailAccountDetail.vue'
 
 // tableObject：表格的属性对象，可获得分页大小、条数等属性
 // tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
@@ -75,6 +86,12 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
+/** 详情操作 */
+const detailRef = ref()
+const openDetail = (id: number) => {
+  detailRef.value.open(id)
+}
+
 /** 删除按钮操作 */
 const handleDelete = (id: number) => {
   tableMethods.delList(id, false)