From 06e1e27652ba2f50d7417576ab6d4308feaf0d9d Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 5 Apr 2023 20:45:19 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=AE=E7=AE=B1=E8=B4=A6=E5=8F=B7=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=AF=A6=E6=83=85=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/mail/account/MailAccountDetail.vue | 26 +++++++++++++++++++
 src/views/system/mail/account/account.data.ts |  8 ++++--
 src/views/system/mail/account/index.vue       | 17 ++++++++++++
 3 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 src/views/system/mail/account/MailAccountDetail.vue

diff --git a/src/views/system/mail/account/MailAccountDetail.vue b/src/views/system/mail/account/MailAccountDetail.vue
new file mode 100644
index 00000000..b64c8d16
--- /dev/null
+++ b/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>
diff --git a/src/views/system/mail/account/account.data.ts b/src/views/system/mail/account/account.data.ts
index d1683bf2..eaa0673a 100644
--- a/src/views/system/mail/account/account.data.ts
+++ b/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)
diff --git a/src/views/system/mail/account/index.vue b/src/views/system/mail/account/index.vue
index c9e40765..878d7d9e 100644
--- a/src/views/system/mail/account/index.vue
+++ b/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)