Skip to content

Commit 3c75d60

Browse files
YunaiVYunaiV
committed
Vue3 重构：邮件日志的列表
1 parent e8d83d4 commit 3c75d60

File tree

3 files changed

+167
-199
lines changed

3 files changed

+167
-199
lines changed

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

Lines changed: 44 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,59 @@
11
<template>
2-
<ContentWrap>
3-
<!-- 列表 -->
4-
<XTable @register="registerTable">
5-
<template #accountId_search>
6-
<el-select v-model="queryParams.accountId">
7-
<el-option :key="undefined" label="全部" :value="undefined" />
8-
<el-option
9-
v-for="item in accountOptions"
10-
:key="item.id"
11-
:label="item.mail"
12-
:value="item.id"
13-
/>
14-
</el-select>
15-
</template>
16-
<template #toMail_default="{ row }">
17-
<div>{{ row.toMail }}</div>
18-
<div v-if="row.userType && row.userId">
19-
<DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />{{ '(' + row.userId + ')' }}
20-
</div>
21-
</template>
22-
<template #actionbtns_default="{ row }">
23-
<!-- 操作：详情 -->
24-
<XTextButton
25-
preIcon="ep:view"
26-
:title="t('action.detail')"
2+
<!-- 搜索工作栏 -->
3+
<content-wrap>
4+
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
5+
</content-wrap>
6+
7+
<!-- 列表 -->
8+
<content-wrap>
9+
<Table
10+
:columns="allSchemas.tableColumns"
11+
:data="tableObject.tableList"
12+
:loading="tableObject.loading"
13+
:pagination="{
14+
total: tableObject.total
15+
}"
16+
v-model:pageSize="tableObject.pageSize"
17+
v-model:currentPage="tableObject.currentPage"
18+
>
19+
<template #action="{ row }">
20+
<el-button
21+
link
22+
type="primary"
23+
@click="openModal('update', row.id)"
2724
v-hasPermi="['system:mail-log:query']"
28-
@click="handleDetail(row.id)"
29-
/>
25+
>
26+
详情
27+
</el-button>
3028
</template>
31-
</XTable>
32-
</ContentWrap>
33-
<!-- 弹窗 -->
34-
<XModal id="mailLogModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
35-
<!-- 表单：详情 -->
36-
<Descriptions
37-
v-if="actionType === 'detail'"
38-
:schema="allSchemas.detailSchema"
39-
:data="detailData"
40-
/>
41-
<template #footer>
42-
<!-- 按钮：关闭 -->
43-
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
44-
</template>
45-
</XModal>
29+
</Table>
30+
</content-wrap>
31+
32+
<!-- 表单弹窗：添加/修改 -->
33+
<!-- <mail-account-form ref="modalRef" @success="getList" />-->
4634
</template>
4735
<script setup lang="ts" name="MailLog">
48-
// 业务相关的 import
49-
import { DICT_TYPE } from '@/utils/dict'
5036
import { allSchemas } from './log.data'
5137
import * as MailLogApi from '@/api/system/mail/log'
52-
import * as MailAccountApi from '@/api/system/mail/account'
53-
54-
const { t } = useI18n() // 国际化
38+
// import MailAccountForm from './form.vue'
5539
56-
// 列表相关的变量
57-
const queryParams = reactive({
58-
accountId: null
40+
// tableObject：表格的属性对象，可获得分页大小、条数等属性
41+
// tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
42+
// 详细可见：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/table.html#usetable
43+
const { tableObject, tableMethods } = useTable({
44+
getListApi: MailLogApi.getMailLogPageApi // 分页接口
5945
})
60-
const [registerTable] = useXTable({
61-
allSchemas: allSchemas,
62-
topActionSlots: false,
63-
params: queryParams,
64-
getListApi: MailLogApi.getMailLogPageApi
65-
})
66-
const accountOptions = ref<any[]>([]) // 账号下拉选项
67-
68-
// 弹窗相关的变量
69-
const modelVisible = ref(false) // 是否显示弹出层
70-
const modelTitle = ref('edit') // 弹出层标题
71-
const modelLoading = ref(false) // 弹出层loading
72-
const actionType = ref('') // 操作按钮的类型
73-
const actionLoading = ref(false) // 按钮 Loading
74-
const detailData = ref() // 详情 Ref
75-
76-
// 设置标题
77-
const setDialogTile = (type: string) => {
78-
modelLoading.value = true
79-
modelTitle.value = t('action.' + type)
80-
actionType.value = type
81-
modelVisible.value = true
82-
}
46+
// 获得表格的各种操作
47+
const { getList, setSearchParams } = tableMethods
8348
84-
// 详情操作
85-
const handleDetail = async (rowId: number) => {
86-
setDialogTile('detail')
87-
const res = await MailLogApi.getMailLogApi(rowId)
88-
detailData.value = res
89-
modelLoading.value = false
49+
/** 添加/修改操作 */
50+
const modalRef = ref()
51+
const openModal = (type: string, id?: number) => {
52+
modalRef.value.openModal(type, id)
9053
}
9154
92-
// ========== 初始化 ==========
55+
/** 初始化 **/
9356
onMounted(() => {
94-
MailAccountApi.getSimpleMailAccountList().then((data) => {
95-
accountOptions.value = data
96-
})
57+
getList()
9758
})
9859
</script>

‎src/views/system/mail/log/log.data.ts

Lines changed: 122 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,127 @@
1-
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
1+
import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
2+
import { dateFormatter } from '@/utils/formatTime'
3+
import * as MailAccountApi from '@/api/system/mail/account'
24

3-
// CrudSchema
4-
const crudSchemas = reactive<VxeCrudSchema>({
5-
primaryKey: 'id',
6-
primaryTitle: '编号',
7-
primaryType: 'id',
8-
action: true,
9-
actionWidth: '70',
10-
columns: [
11-
{
12-
title: '发送时间',
13-
field: 'sendTime',
14-
table: {
15-
width: 180
16-
},
17-
formatter: 'formatDate',
18-
search: {
19-
show: true,
20-
itemRender: {
21-
name: 'XDataTimePicker'
22-
}
23-
}
24-
},
25-
{
26-
title: '接收邮箱',
27-
field: 'toMail',
28-
isSearch: true,
29-
table: {
30-
width: 180,
31-
slots: {
32-
default: 'toMail_default'
33-
}
5+
// 邮箱账号的列表
6+
const accounts = await MailAccountApi.getSimpleMailAccountList()
7+
8+
// CrudSchema：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/hooks/useCrudSchemas.html
9+
const crudSchemas = reactive<CrudSchema[]>([
10+
{
11+
label: '编号',
12+
field: 'id'
13+
},
14+
{
15+
label: '发送时间',
16+
field: 'sendTime',
17+
formatter: dateFormatter,
18+
search: {
19+
show: true,
20+
component: 'DatePicker',
21+
componentProps: {
22+
valueFormat: 'YYYY-MM-DD HH:mm:ss',
23+
type: 'daterange',
24+
defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
3425
}
35-
},
36-
{
37-
title: '用户编号',
38-
field: 'userId',
39-
isSearch: true,
40-
isTable: false
41-
},
42-
{
43-
title: '用户类型',
44-
field: 'userType',
45-
dictType: DICT_TYPE.USER_TYPE,
46-
dictClass: 'number',
47-
isSearch: true,
48-
isTable: false
49-
},
50-
{
51-
title: '邮件标题',
52-
field: 'templateTitle'
53-
},
54-
{
55-
title: '邮件内容',
56-
field: 'templateContent',
57-
isTable: false
58-
},
59-
{
60-
title: '邮箱参数',
61-
field: 'templateParams',
62-
isTable: false
63-
},
64-
{
65-
title: '发送状态',
66-
field: 'sendStatus',
67-
dictType: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
68-
dictClass: 'string',
69-
isSearch: true
70-
},
71-
{
72-
title: '邮箱账号',
73-
field: 'accountId',
74-
isSearch: true,
75-
isTable: false,
76-
search: {
77-
slots: {
78-
default: 'accountId_search'
26+
}
27+
},
28+
{
29+
label: '接收邮箱',
30+
field: 'toMail'
31+
},
32+
{
33+
label: '用户编号',
34+
field: 'userId',
35+
isSearch: true,
36+
isTable: false
37+
},
38+
{
39+
label: '用户类型',
40+
field: 'userType',
41+
dictType: DICT_TYPE.USER_TYPE,
42+
dictClass: 'number',
43+
isSearch: true,
44+
isTable: false
45+
},
46+
{
47+
label: '邮件标题',
48+
field: 'templateTitle'
49+
},
50+
{
51+
label: '邮件内容',
52+
field: 'templateContent',
53+
isTable: false
54+
},
55+
{
56+
label: '邮箱参数',
57+
field: 'templateParams',
58+
isTable: false
59+
},
60+
{
61+
label: '发送状态',
62+
field: 'sendStatus',
63+
dictType: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
64+
dictClass: 'string',
65+
isSearch: true
66+
},
67+
{
68+
label: '邮箱账号',
69+
field: 'accountId',
70+
isTable: false,
71+
search: {
72+
show: true,
73+
component: 'Select',
74+
api: () => accounts,
75+
componentProps: {
76+
optionsAlias: {
77+
labelField: 'mail',
78+
valueField: 'id'
7979
}
8080
}
81-
},
82-
{
83-
title: '发送邮箱地址',
84-
field: 'fromMail',
85-
table: {
86-
title: '邮箱账号'
87-
}
88-
},
89-
{
90-
title: '模板编号',
91-
field: 'templateId',
92-
isSearch: true
93-
},
94-
{
95-
title: '模板编码',
96-
field: 'templateCode',
97-
isTable: false
98-
},
99-
{
100-
title: '模版发送人名称',
101-
field: 'templateNickname',
102-
isTable: false
103-
},
104-
{
105-
title: '发送返回的消息编号',
106-
field: 'sendMessageId',
107-
isTable: false
108-
},
109-
{
110-
title: '发送异常',
111-
field: 'sendException',
112-
isTable: false
113-
},
114-
{
115-
title: '创建时间',
116-
field: 'createTime',
117-
isTable: false
11881
}
119-
]
120-
})
121-
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
82+
},
83+
{
84+
label: '发送邮箱地址',
85+
field: 'fromMail',
86+
table: {
87+
label: '邮箱账号'
88+
}
89+
},
90+
{
91+
label: '模板编号',
92+
field: 'templateId',
93+
isSearch: true
94+
},
95+
{
96+
label: '模板编码',
97+
field: 'templateCode',
98+
isTable: false
99+
},
100+
{
101+
label: '模版发送人名称',
102+
field: 'templateNickname',
103+
isTable: false
104+
},
105+
{
106+
label: '发送返回的消息编号',
107+
field: 'sendMessageId',
108+
isTable: false
109+
},
110+
{
111+
label: '发送异常',
112+
field: 'sendException',
113+
isTable: false
114+
},
115+
{
116+
label: '创建时间',
117+
field: 'createTime',
118+
isTable: false,
119+
formatter: dateFormatter
120+
},
121+
{
122+
label: '操作',
123+
field: 'action',
124+
isForm: false
125+
}
126+
])
127+
export const { allSchemas } = useCrudSchemas(crudSchemas)

‎src/views/system/mail/template/template.data.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { dateFormatter } from '@/utils/formatTime'
33
import { TableColumn } from '@/types/table'
44
import * as MailAccountApi from '@/api/system/mail/account'
55

6+
// 邮箱账号的列表
67
const accounts = await MailAccountApi.getSimpleMailAccountList()
78

89
// 表单校验

0 commit comments

Comments
 (0)