Skip to content

Commit cde1f20

Browse files
YunaiVYunaiV
committed
reactor：【SYSTEM 系统管理】邮箱日志，重构成 element-plus 标准界面
1 parent 4f67951 commit cde1f20

File tree

4 files changed

+287
-213
lines changed

4 files changed

+287
-213
lines changed

‎src/api/system/mail/log/index.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,8 @@ export const getMailLogPage = async (params: PageParam) => {
2828
export const getMailLog = async (id: number) => {
2929
return await request.get({ url: '/system/mail-log/get?id=' + id })
3030
}
31+
32+
// 导出邮件日志
33+
export const exportMailLog = (params) => {
34+
return request.download({ url: '/system/mail-log/export-excel', params })
35+
}

‎src/views/system/mail/log/MailLogDetail.vue

Lines changed: 54 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,77 @@
11
<template>
2-
<Dialog v-model="dialogVisible" :max-height="500" :scroll="true" title="详情">
3-
<Descriptions :data="detailData" :schema="allSchemas.detailSchema">
4-
<!-- 展示 HTML 内容 -->
5-
<template #templateContent="{ row }">
6-
<div v-dompurify-html="row.templateContent"></div>
7-
</template>
8-
</Descriptions>
2+
<Dialog v-model="dialogVisible" :max-height="500" :scroll="true" title="详情" width="800">
3+
<el-descriptions :column="1" border>
4+
<el-descriptions-item label="日志主键" min-width="120">
5+
{{ detailData.id }}
6+
</el-descriptions-item>
7+
<el-descriptions-item label="邮箱账号">
8+
{{ accountList.find((account) => account.id === detailData.accountId)?.mail }}
9+
</el-descriptions-item>
10+
<el-descriptions-item label="邮件模板">
11+
{{ detailData.templateId }} | {{ detailData.templateCode }}
12+
</el-descriptions-item>
13+
<el-descriptions-item label="模版发送人名称">
14+
{{ detailData.templateNickname }}
15+
</el-descriptions-item>
16+
<el-descriptions-item label="用户信息">
17+
{{ detailData.toMail }}
18+
<span v-if="detailData.userType && detailData.userId">
19+
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="detailData.userType" />
20+
({{ detailData.userId }})
21+
</span>
22+
</el-descriptions-item>
23+
<el-descriptions-item label="邮件标题">
24+
{{ detailData.templateTitle }}
25+
</el-descriptions-item>
26+
<el-descriptions-item label="邮件内容">
27+
<div v-dompurify-html="detailData.templateContent"></div>
28+
</el-descriptions-item>
29+
<el-descriptions-item label="邮件参数">
30+
{{ detailData.templateParams }}
31+
</el-descriptions-item>
32+
<el-descriptions-item label="创建时间">
33+
{{ formatDate(detailData.createTime) }}
34+
</el-descriptions-item>
35+
<el-descriptions-item label="发送状态">
36+
<dict-tag :type="DICT_TYPE.SYSTEM_MAIL_SEND_STATUS" :value="detailData.sendStatus" />
37+
</el-descriptions-item>
38+
<el-descriptions-item label="发送时间">
39+
{{ formatDate(detailData.sendTime) }}
40+
</el-descriptions-item>
41+
<el-descriptions-item label="发送返回的消息编号">
42+
{{ detailData.sendMessageId }}
43+
</el-descriptions-item>
44+
<el-descriptions-item label="发送异常">
45+
{{ detailData.sendException }}
46+
</el-descriptions-item>
47+
</el-descriptions>
948
</Dialog>
1049
</template>
1150
<script lang="ts" setup>
51+
import { DICT_TYPE } from '@/utils/dict'
52+
import { formatDate } from '@/utils/formatTime'
1253
import * as MailLogApi from '@/api/system/mail/log'
13-
import { allSchemas } from './log.data'
54+
import * as MailAccountApi from '@/api/system/mail/account'
1455
1556
defineOptions({ name: 'SystemMailLogDetail' })
1657
1758
const dialogVisible = ref(false) // 弹窗的是否展示
1859
const detailLoading = ref(false) // 表单的加载中
1960
const detailData = ref() // 详情数据
61+
const accountList = ref([]) // 邮箱账号列表
2062
2163
/** 打开弹窗 */
22-
const open = async (id: number) => {
64+
const open = async (data: MailLogApi.MailLogVO) => {
2365
dialogVisible.value = true
2466
// 设置数据
2567
detailLoading.value = true
2668
try {
27-
detailData.value = await MailLogApi.getMailLog(id)
69+
detailData.value = data
2870
} finally {
2971
detailLoading.value = false
3072
}
73+
// 加载邮箱账号列表
74+
accountList.value = await MailAccountApi.getSimpleMailAccountList()
3175
}
3276
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
3377
</script>

‎src/views/system/mail/log/index.vue

Lines changed: 228 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,255 @@
11
<template>
22
<doc-alert title="邮件配置" url="https://doc.iocoder.cn/mail" />
33

4-
<!-- 搜索工作栏 -->
54
<ContentWrap>
6-
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
7-
</ContentWrap>
8-
9-
<!-- 列表 -->
10-
<ContentWrap>
11-
<Table
12-
:columns="allSchemas.tableColumns"
13-
:data="tableObject.tableList"
14-
:loading="tableObject.loading"
15-
:pagination="{
16-
total: tableObject.total
17-
}"
18-
v-model:pageSize="tableObject.pageSize"
19-
v-model:currentPage="tableObject.currentPage"
5+
<!-- 搜索工作栏 -->
6+
<el-form
7+
class="-mb-15px"
8+
:model="queryParams"
9+
ref="queryFormRef"
10+
:inline="true"
11+
label-width="100px"
2012
>
21-
<template #action="{ row }">
13+
<el-form-item label="接收邮箱" prop="toMail">
14+
<el-input
15+
v-model="queryParams.toMail"
16+
placeholder="请输入接收邮箱"
17+
clearable
18+
@keyup.enter="handleQuery"
19+
class="!w-240px"
20+
/>
21+
</el-form-item>
22+
<el-form-item label="邮箱账号" prop="accountId">
23+
<el-select
24+
v-model="queryParams.accountId"
25+
placeholder="请选择邮箱账号"
26+
clearable
27+
class="!w-240px"
28+
>
29+
<el-option
30+
v-for="account in accountList"
31+
:key="account.id"
32+
:value="account.id"
33+
:label="account.mail"
34+
/>
35+
</el-select>
36+
</el-form-item>
37+
<el-form-item label="模板编号" prop="templateId">
38+
<el-input
39+
v-model="queryParams.templateId"
40+
placeholder="请输入模板编号"
41+
clearable
42+
@keyup.enter="handleQuery"
43+
class="!w-240px"
44+
/>
45+
</el-form-item>
46+
<el-form-item label="发送状态" prop="sendStatus">
47+
<el-select
48+
v-model="queryParams.sendStatus"
49+
placeholder="请选择发送状态"
50+
clearable
51+
class="!w-240px"
52+
>
53+
<el-option
54+
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_MAIL_SEND_STATUS)"
55+
:key="dict.value"
56+
:label="dict.label"
57+
:value="dict.value"
58+
/>
59+
</el-select>
60+
</el-form-item>
61+
<el-form-item label="用户编号" prop="userId">
62+
<el-input
63+
v-model="queryParams.userId"
64+
placeholder="请输入用户编号"
65+
clearable
66+
@keyup.enter="handleQuery"
67+
class="!w-240px"
68+
/>
69+
</el-form-item>
70+
<el-form-item label="用户类型" prop="userType">
71+
<el-select
72+
v-model="queryParams.userType"
73+
placeholder="请选择用户类型"
74+
clearable
75+
class="!w-240px"
76+
>
77+
<el-option
78+
v-for="dict in getIntDictOptions(DICT_TYPE.USER_TYPE)"
79+
:key="dict.value"
80+
:label="dict.label"
81+
:value="dict.value"
82+
/>
83+
</el-select>
84+
</el-form-item>
85+
<el-form-item label="发送时间" prop="sendTime">
86+
<el-date-picker
87+
v-model="queryParams.sendTime"
88+
value-format="YYYY-MM-DD HH:mm:ss"
89+
type="daterange"
90+
start-placeholder="开始日期"
91+
end-placeholder="结束日期"
92+
class="!w-240px"
93+
/>
94+
</el-form-item>
95+
<el-form-item>
96+
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
97+
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
2298
<el-button
23-
link
24-
type="primary"
25-
@click="openDetail(row.id)"
26-
v-hasPermi="['system:mail-log:query']"
99+
type="success"
100+
plain
101+
@click="handleExport"
102+
:loading="exportLoading"
103+
v-hasPermi="['system:mail-log:export']"
27104
>
28-
详情
105+
<Icon icon="ep:download" class="mr-5px" /> 导出
29106
</el-button>
30-
</template>
31-
</Table>
107+
</el-form-item>
108+
</el-form>
109+
</ContentWrap>
110+
111+
<!-- 列表 -->
112+
<ContentWrap>
113+
<el-table v-loading="loading" :data="list">
114+
<el-table-column label="编号" align="center" prop="id" />
115+
<el-table-column
116+
label="发送时间"
117+
align="center"
118+
prop="sendTime"
119+
width="180"
120+
:formatter="dateFormatter"
121+
/>
122+
<el-table-column label="接收邮箱" align="center" prop="toMail" width="200">
123+
<template #default="scope">
124+
<div>{{ scope.row.toMail }}</div>
125+
<div v-if="scope.row.userType && scope.row.userId">
126+
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
127+
{{ '(' + scope.row.userId + ')' }}
128+
</div>
129+
</template>
130+
</el-table-column>
131+
<el-table-column label="邮件标题" align="center" prop="templateTitle" width="200" />
132+
<el-table-column label="发送状态" align="center" width="120">
133+
<template #default="scope">
134+
<dict-tag :type="DICT_TYPE.SYSTEM_MAIL_SEND_STATUS" :value="scope.row.sendStatus" />
135+
</template>
136+
</el-table-column>
137+
<el-table-column label="邮箱账号" align="center" width="200">
138+
<template #default="scope">
139+
{{ getAccountMail(scope.row.accountId) }}
140+
</template>
141+
</el-table-column>
142+
<el-table-column label="模板编号" align="center" prop="templateId" />
143+
<el-table-column label="操作" align="center" fixed="right" class-name="fixed-width">
144+
<template #default="scope">
145+
<el-button
146+
link
147+
type="primary"
148+
@click="openDetail(scope.row)"
149+
v-hasPermi="['system:mail-log:query']"
150+
>
151+
详情
152+
</el-button>
153+
</template>
154+
</el-table-column>
155+
</el-table>
156+
<!-- 分页 -->
157+
<Pagination
158+
:total="total"
159+
v-model:page="queryParams.pageNo"
160+
v-model:limit="queryParams.pageSize"
161+
@pagination="getList"
162+
/>
32163
</ContentWrap>
33164

34165
<!-- 表单弹窗：详情 -->
35-
<mail-log-detail ref="detailRef" />
166+
<MailLogDetail ref="detailRef" />
36167
</template>
37168
<script lang="ts" setup>
38-
import { allSchemas } from './log.data'
169+
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
170+
import { dateFormatter, formatDate } from '@/utils/formatTime'
171+
import download from '@/utils/download'
172+
import * as MailAccountApi from '@/api/system/mail/account'
39173
import * as MailLogApi from '@/api/system/mail/log'
40174
import MailLogDetail from './MailLogDetail.vue'
41175
42176
defineOptions({ name: 'SystemMailLog' })
43177
44-
// tableObject：表格的属性对象，可获得分页大小、条数等属性
45-
// tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
46-
// 详细可见：https://doc.iocoder.cn/vue3/crud-schema/
47-
const { tableObject, tableMethods } = useTable({
48-
getListApi: MailLogApi.getMailLogPage // 分页接口
178+
const message = useMessage() // 消息弹窗
179+
180+
const loading = ref(false) // 列表的加载中
181+
const total = ref(0) // 列表的总页数
182+
const list = ref([]) // 列表的数据
183+
const queryFormRef = ref() // 搜索的表单
184+
const queryParams = reactive({
185+
pageNo: 1,
186+
pageSize: 10,
187+
toMail: '',
188+
accountId: null,
189+
templateId: null,
190+
sendStatus: null,
191+
userId: null,
192+
userType: null,
193+
sendTime: []
49194
})
50-
// 获得表格的各种操作
51-
const { getList, setSearchParams } = tableMethods
195+
const exportLoading = ref(false) // 导出的加载中
196+
const accountList = ref([]) // 邮箱账号列表
197+
198+
/** 查询列表 */
199+
const getList = async () => {
200+
loading.value = true
201+
try {
202+
const data = await MailLogApi.getMailLogPage(queryParams)
203+
list.value = data.list
204+
total.value = data.total
205+
} finally {
206+
loading.value = false
207+
}
208+
}
209+
210+
/** 搜索按钮操作 */
211+
const handleQuery = () => {
212+
queryParams.pageNo = 1
213+
getList()
214+
}
215+
216+
/** 重置按钮操作 */
217+
const resetQuery = () => {
218+
queryFormRef.value.resetFields()
219+
handleQuery()
220+
}
221+
222+
/** 导出按钮操作 */
223+
const handleExport = async () => {
224+
try {
225+
// 导出的二次确认
226+
await message.exportConfirm()
227+
// 发起导出
228+
exportLoading.value = true
229+
const data = await MailLogApi.exportMailLog(queryParams)
230+
download.excel(data, '邮件日志.xls')
231+
} catch {
232+
} finally {
233+
exportLoading.value = false
234+
}
235+
}
52236
53237
/** 详情操作 */
54238
const detailRef = ref()
55-
const openDetail = (id: number) => {
56-
detailRef.value.open(id)
239+
const openDetail = (data: MailLogApi.MailLogVO) => {
240+
detailRef.value.open(data)
241+
}
242+
243+
/** 获取邮箱账号名称 */
244+
const getAccountMail = (accountId: number) => {
245+
const account = accountList.value.find((account) => account.id === accountId)
246+
return account?.mail || ''
57247
}
58248
59249
/** 初始化 **/
60-
onMounted(() => {
61-
getList()
250+
onMounted(async () => {
251+
await getList()
252+
// 加载邮箱账号列表
253+
accountList.value = await MailAccountApi.getSimpleMailAccountList()
62254
})
63255
</script>

0 commit comments

Comments
 (0)