From 0f4c74fef0bf2959abd0963a95e5ad0f289aa524 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 18 Mar 2023 13:56:17 +0800
Subject: [PATCH] =?UTF-8?q?Vue3=20=E9=87=8D=E6=9E=84=EF=BC=9A=E9=82=AE?=
 =?UTF-8?q?=E4=BB=B6=E6=97=A5=E5=BF=97=E7=9A=84=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/mail/log/index.ts      | 14 ++----------
 src/types/descriptions.d.ts           |  4 ++--
 src/views/system/mail/log/detail.vue  | 31 +++++++++++++++++++++++++++
 src/views/system/mail/log/index.vue   | 12 +++++------
 src/views/system/mail/log/log.data.ts | 10 +++++++--
 5 files changed, 49 insertions(+), 22 deletions(-)
 create mode 100644 src/views/system/mail/log/detail.vue

diff --git a/src/api/system/mail/log/index.ts b/src/api/system/mail/log/index.ts
index 9c6c60eb..13172a72 100644
--- a/src/api/system/mail/log/index.ts
+++ b/src/api/system/mail/log/index.ts
@@ -19,22 +19,12 @@ export interface MailLogVO {
   sendException: string
 }
 
-export interface MailLogPageReqVO extends PageParam {
-  userId?: number
-  userType?: number
-  toMail?: string
-  accountId?: number
-  templateId?: number
-  sendStatus?: number
-  sendTime?: Date[]
-}
-
 // 查询邮件日志列表
-export const getMailLogPageApi = async (params: MailLogPageReqVO) => {
+export const getMailLogPage = async (params: PageParam) => {
   return await request.get({ url: '/system/mail-log/page', params })
 }
 
 // 查询邮件日志详情
-export const getMailLogApi = async (id: number) => {
+export const getMailLog = async (id: number) => {
   return await request.get({ url: '/system/mail-log/get?id=' + id })
 }
diff --git a/src/types/descriptions.d.ts b/src/types/descriptions.d.ts
index 48835e9c..35c0b81b 100644
--- a/src/types/descriptions.d.ts
+++ b/src/types/descriptions.d.ts
@@ -8,6 +8,6 @@ export interface DescriptionsSchema {
   labelAlign?: 'left' | 'center' | 'right'
   className?: string
   labelClassName?: string
-  dateFormat?: string
-  dictType?: string
+  dateFormat?: string // add by 星语：支持时间的格式化
+  dictType?: string // add by 星语：支持 dict 字典数据
 }
diff --git a/src/views/system/mail/log/detail.vue b/src/views/system/mail/log/detail.vue
new file mode 100644
index 00000000..1795f751
--- /dev/null
+++ b/src/views/system/mail/log/detail.vue
@@ -0,0 +1,31 @@
+<template>
+  <Dialog title="详情" v-model="modelVisible" :scroll="true" :max-height="500">
+    <Descriptions :schema="allSchemas.detailSchema" :data="detailData">
+      <!-- 展示 HTML 内容 -->
+      <template #templateContent="{ row }">
+        <div v-html="row.templateContent"></div>
+      </template>
+    </Descriptions>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as MailLogApi from '@/api/system/mail/log'
+import { allSchemas } from './log.data'
+
+const modelVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref() // 详情数据
+
+/** 打开弹窗 */
+const openModal = async (id: number) => {
+  modelVisible.value = true
+  // 设置数据
+  detailLoading.value = true
+  try {
+    detailData.value = await MailLogApi.getMailLog(id)
+  } finally {
+    detailLoading.value = false
+  }
+}
+defineExpose({ openModal }) // 提供 openModal 方法，用于打开弹窗
+</script>
diff --git a/src/views/system/mail/log/index.vue b/src/views/system/mail/log/index.vue
index a8b0c6c1..f8d98b83 100644
--- a/src/views/system/mail/log/index.vue
+++ b/src/views/system/mail/log/index.vue
@@ -20,7 +20,7 @@
         <el-button
           link
           type="primary"
-          @click="openModal('update', row.id)"
+          @click="openModal(row.id)"
           v-hasPermi="['system:mail-log:query']"
         >
           详情
@@ -30,26 +30,26 @@
   </content-wrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <!--  <mail-account-form ref="modalRef" @success="getList" />-->
+  <mail-log-detail ref="modalRef" @success="getList" />
 </template>
 <script setup lang="ts" name="MailLog">
 import { allSchemas } from './log.data'
 import * as MailLogApi from '@/api/system/mail/log'
-// import MailAccountForm from './form.vue'
+import MailLogDetail from './detail.vue'
 
 // tableObject：表格的属性对象，可获得分页大小、条数等属性
 // tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
 // 详细可见：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/table.html#usetable
 const { tableObject, tableMethods } = useTable({
-  getListApi: MailLogApi.getMailLogPageApi // 分页接口
+  getListApi: MailLogApi.getMailLogPage // 分页接口
 })
 // 获得表格的各种操作
 const { getList, setSearchParams } = tableMethods
 
 /** 添加/修改操作 */
 const modalRef = ref()
-const openModal = (type: string, id?: number) => {
-  modalRef.value.openModal(type, id)
+const openModal = (id: number) => {
+  modalRef.value.openModal(id)
 }
 
 /** 初始化 **/
diff --git a/src/views/system/mail/log/log.data.ts b/src/views/system/mail/log/log.data.ts
index e3679535..8ea96926 100644
--- a/src/views/system/mail/log/log.data.ts
+++ b/src/views/system/mail/log/log.data.ts
@@ -23,6 +23,9 @@ const crudSchemas = reactive<CrudSchema[]>([
         type: 'daterange',
         defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
       }
+    },
+    detail: {
+      dateFormat: 'YYYY-MM-DD HH:mm:ss'
     }
   },
   {
@@ -116,12 +119,15 @@ const crudSchemas = reactive<CrudSchema[]>([
     label: '创建时间',
     field: 'createTime',
     isTable: false,
-    formatter: dateFormatter
+    formatter: dateFormatter,
+    detail: {
+      dateFormat: 'YYYY-MM-DD HH:mm:ss'
+    }
   },
   {
     label: '操作',
     field: 'action',
-    isForm: false
+    isDetail: false
   }
 ])
 export const { allSchemas } = useCrudSchemas(crudSchemas)