Skip to content

phsl / admin

Go to a project
Commit 3c75d606 by YunaiV
Options

Vue3 重构：邮件日志的列表

parent e8d83d47
Showing with 167 additions and 199 deletions
src/views/system/mail/log/index.vue
<template> <template>
<ContentWrap> <!-- 搜索工作栏 -->
<!-- 列表 --> <content-wrap>
<XTable @register="registerTable"> <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
<template #accountId_search> </content-wrap>
<el-select v-model="queryParams.accountId">
<el-option :key="undefined" label="全部" :value="undefined" /> <!-- 列表 -->
<el-option <content-wrap>
v-for="item in accountOptions" <Table
:key="item.id" :columns="allSchemas.tableColumns"
:label="item.mail" :data="tableObject.tableList"
:value="item.id" :loading="tableObject.loading"
/> :pagination="{
</el-select> total: tableObject.total
</template> }"
<template #toMail_default="{ row }"> v-model:pageSize="tableObject.pageSize"
<div>{{ row.toMail }}</div> v-model:currentPage="tableObject.currentPage"
<div v-if="row.userType && row.userId"> >
<DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />{{ '(' + row.userId + ')' }} <template #action="{ row }">
</div> <el-button
</template> link
<template #actionbtns_default="{ row }"> type="primary"
<!-- 操作：详情 --> @click="openModal('update', row.id)"
<XTextButton
preIcon="ep:view"
:title="t('action.detail')"
v-hasPermi="['system:mail-log:query']" v-hasPermi="['system:mail-log:query']"
@click="handleDetail(row.id)" >
/> 详情
</el-button>
</template> </template>
</XTable> </Table>
</ContentWrap> </content-wrap>
<!-- 弹窗 -->
<XModal id="mailLogModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle"> <!-- 表单弹窗：添加/修改 -->
<!-- 表单：详情 --> <!-- <mail-account-form ref="modalRef" @success="getList" />-->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
/>
<template #footer>
<!-- 按钮：关闭 -->
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
</template>
</XModal>
</template> </template>
<script setup lang="ts" name="MailLog"> <script setup lang="ts" name="MailLog">
// 业务相关的 import
import { DICT_TYPE } from '@/utils/dict'
import { allSchemas } from './log.data' import { allSchemas } from './log.data'
import * as MailLogApi from '@/api/system/mail/log' import * as MailLogApi from '@/api/system/mail/log'
import * as MailAccountApi from '@/api/system/mail/account' // import MailAccountForm from './form.vue'
const { t } = useI18n() // 国际化
// 列表相关的变量 // tableObject：表格的属性对象，可获得分页大小、条数等属性
const queryParams = reactive({ // tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
accountId: null // 详细可见：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/table.html#usetable
const { tableObject, tableMethods } = useTable({
getListApi: MailLogApi.getMailLogPageApi // 分页接口
}) })
const [registerTable] = useXTable({ // 获得表格的各种操作
allSchemas: allSchemas, const { getList, setSearchParams } = tableMethods
topActionSlots: false,
params: queryParams,
getListApi: MailLogApi.getMailLogPageApi
})
const accountOptions = ref<any[]>([]) // 账号下拉选项
// 弹窗相关的变量
const modelVisible = ref(false) // 是否显示弹出层
const modelTitle = ref('edit') // 弹出层标题
const modelLoading = ref(false) // 弹出层loading
const actionType = ref('') // 操作按钮的类型
const actionLoading = ref(false) // 按钮 Loading
const detailData = ref() // 详情 Ref
// 设置标题
const setDialogTile = (type: string) => {
modelLoading.value = true
modelTitle.value = t('action.' + type)
actionType.value = type
modelVisible.value = true
}
// 详情操作 /** 添加/修改操作 */
const handleDetail = async (rowId: number) => { const modalRef = ref()
setDialogTile('detail') const openModal = (type: string, id?: number) => {
const res = await MailLogApi.getMailLogApi(rowId) modalRef.value.openModal(type, id)
detailData.value = res
modelLoading.value = false
} }
// ========== 初始化 ========== /** 初始化 **/
onMounted(() => { onMounted(() => {
MailAccountApi.getSimpleMailAccountList().then((data) => { getList()
accountOptions.value = data
})
}) })
</script> </script>
src/views/system/mail/log/log.data.ts
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas' import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
import { dateFormatter } from '@/utils/formatTime'
import * as MailAccountApi from '@/api/system/mail/account'
// CrudSchema // 邮箱账号的列表
const crudSchemas = reactive<VxeCrudSchema>({ const accounts = await MailAccountApi.getSimpleMailAccountList()
primaryKey: 'id',
primaryTitle: '编号', // CrudSchema：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/hooks/useCrudSchemas.html
primaryType: 'id', const crudSchemas = reactive<CrudSchema[]>([
action: true, {
actionWidth: '70', label: '编号',
columns: [ field: 'id'
{ },
title: '发送时间', {
field: 'sendTime', label: '发送时间',
table: { field: 'sendTime',
width: 180 formatter: dateFormatter,
}, search: {
formatter: 'formatDate', show: true,
search: { component: 'DatePicker',
show: true, componentProps: {
itemRender: { valueFormat: 'YYYY-MM-DD HH:mm:ss',
name: 'XDataTimePicker' type: 'daterange',
} defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
}
},
{
title: '接收邮箱',
field: 'toMail',
isSearch: true,
table: {
width: 180,
slots: {
default: 'toMail_default'
}
} }
}, }
{ },
title: '用户编号', {
field: 'userId', label: '接收邮箱',
isSearch: true, field: 'toMail'
isTable: false },
}, {
{ label: '用户编号',
title: '用户类型', field: 'userId',
field: 'userType', isSearch: true,
dictType: DICT_TYPE.USER_TYPE, isTable: false
dictClass: 'number', },
isSearch: true, {
isTable: false label: '用户类型',
}, field: 'userType',
{ dictType: DICT_TYPE.USER_TYPE,
title: '邮件标题', dictClass: 'number',
field: 'templateTitle' isSearch: true,
}, isTable: false
{ },
title: '邮件内容', {
field: 'templateContent', label: '邮件标题',
isTable: false field: 'templateTitle'
}, },
{ {
title: '邮箱参数', label: '邮件内容',
field: 'templateParams', field: 'templateContent',
isTable: false isTable: false
}, },
{ {
title: '发送状态', label: '邮箱参数',
field: 'sendStatus', field: 'templateParams',
dictType: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS, isTable: false
dictClass: 'string', },
isSearch: true {
}, label: '发送状态',
{ field: 'sendStatus',
title: '邮箱账号', dictType: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
field: 'accountId', dictClass: 'string',
isSearch: true, isSearch: true
isTable: false, },
search: { {
slots: { label: '邮箱账号',
default: 'accountId_search' field: 'accountId',
isTable: false,
search: {
show: true,
component: 'Select',
api: () => accounts,
componentProps: {
optionsAlias: {
labelField: 'mail',
valueField: 'id'
} }
} }
},
{
title: '发送邮箱地址',
field: 'fromMail',
table: {
title: '邮箱账号'
}
},
{
title: '模板编号',
field: 'templateId',
isSearch: true
},
{
title: '模板编码',
field: 'templateCode',
isTable: false
},
{
title: '模版发送人名称',
field: 'templateNickname',
isTable: false
},
{
title: '发送返回的消息编号',
field: 'sendMessageId',
isTable: false
},
{
title: '发送异常',
field: 'sendException',
isTable: false
},
{
title: '创建时间',
field: 'createTime',
isTable: false
} }
] },
}) {
export const { allSchemas } = useVxeCrudSchemas(crudSchemas) label: '发送邮箱地址',
field: 'fromMail',
table: {
label: '邮箱账号'
}
},
{
label: '模板编号',
field: 'templateId',
isSearch: true
},
{
label: '模板编码',
field: 'templateCode',
isTable: false
},
{
label: '模版发送人名称',
field: 'templateNickname',
isTable: false
},
{
label: '发送返回的消息编号',
field: 'sendMessageId',
isTable: false
},
{
label: '发送异常',
field: 'sendException',
isTable: false
},
{
label: '创建时间',
field: 'createTime',
isTable: false,
formatter: dateFormatter
},
{
label: '操作',
field: 'action',
isForm: false
}
])
export const { allSchemas } = useCrudSchemas(crudSchemas)
src/views/system/mail/template/template.data.ts
...@@ -3,6 +3,7 @@ import { dateFormatter } from '@/utils/formatTime' ...@@ -3,6 +3,7 @@ import { dateFormatter } from '@/utils/formatTime'
import { TableColumn } from '@/types/table' import { TableColumn } from '@/types/table'
import * as MailAccountApi from '@/api/system/mail/account' import * as MailAccountApi from '@/api/system/mail/account'
// 邮箱账号的列表
const accounts = await MailAccountApi.getSimpleMailAccountList() const accounts = await MailAccountApi.getSimpleMailAccountList()
// 表单校验 // 表单校验
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment