Vue3 重构:邮件日志的列表
This commit is contained in:
parent
3c75d6065d
commit
0f4c74fef0
@ -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 })
|
||||
}
|
||||
|
4
src/types/descriptions.d.ts
vendored
4
src/types/descriptions.d.ts
vendored
@ -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 字典数据
|
||||
}
|
||||
|
31
src/views/system/mail/log/detail.vue
Normal file
31
src/views/system/mail/log/detail.vue
Normal 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>
|
@ -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)
|
||||
}
|
||||
|
||||
/** 初始化 **/
|
||||
|
@ -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)
|
||||
|
Loading…
Reference in New Issue
Block a user