Vue3 重构:邮件日志的列表

This commit is contained in:
YunaiV 2023-03-18 13:56:17 +08:00
parent 3c75d6065d
commit 0f4c74fef0
5 changed files with 49 additions and 22 deletions

View File

@ -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 })
}

View File

@ -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 字典数据
}

View File

@ -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>

View File

@ -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)
}
/** 初始化 **/

View File

@ -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)