Skip to content

Commit f1a80fe

Browse files
YunaiVYunaiV
committed
vue3 重构：邮件账号的列表 + 搜索
1 parent 763dce6 commit f1a80fe

File tree

2 files changed

+76
-191
lines changed

2 files changed

+76
-191
lines changed

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

Lines changed: 49 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import type { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas'
1+
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
2+
import { DictTag } from '@/components/DictTag'
3+
import { TableColumn } from '@/types/table'
4+
import { dateFormatter } from '@/utils/formatTime'
25

36
const { t } = useI18n() // 国际化
47

58
// 表单校验
69
export const rules = reactive({
7-
// mail: [required],
810
mail: [
911
{ required: true, message: t('profile.rules.mail'), trigger: 'blur' },
1012
{
@@ -21,55 +23,49 @@ export const rules = reactive({
2123
})
2224

2325
// CrudSchema
24-
const crudSchemas = reactive<VxeCrudSchema>({
25-
primaryKey: 'id', // 默认的主键 ID
26-
primaryTitle: '编号',
27-
primaryType: 'id',
28-
action: true,
29-
actionWidth: '200', // 3 个按钮默认 200，如有删减对应增减即可
30-
columns: [
31-
{
32-
title: '邮箱',
33-
field: 'mail',
34-
isSearch: true
35-
},
36-
{
37-
title: '用户名',
38-
field: 'username',
39-
isSearch: true
40-
},
41-
{
42-
title: '密码',
43-
field: 'password',
44-
isTable: false
45-
},
46-
{
47-
title: 'SMTP 服务器域名',
48-
field: 'host'
49-
},
50-
{
51-
title: 'SMTP 服务器端口',
52-
field: 'port',
53-
form: {
54-
component: 'InputNumber',
55-
value: 465
56-
}
57-
},
58-
{
59-
title: '是否开启 SSL',
60-
field: 'sslEnable',
61-
dictType: DICT_TYPE.INFRA_BOOLEAN_STRING,
62-
dictClass: 'boolean'
63-
},
64-
{
65-
title: '创建时间',
66-
field: 'createTime',
67-
isForm: false,
68-
formatter: 'formatDate',
69-
table: {
70-
width: 180
71-
}
26+
const crudSchemas = reactive<CrudSchema[]>([
27+
{
28+
label: '邮箱',
29+
field: 'mail',
30+
isSearch: true
31+
},
32+
{
33+
label: '用户名',
34+
field: 'username',
35+
isSearch: true
36+
},
37+
{
38+
label: '密码',
39+
field: 'password',
40+
isTable: false
41+
},
42+
{
43+
label: 'SMTP 服务器域名',
44+
field: 'host'
45+
},
46+
{
47+
label: 'SMTP 服务器端口',
48+
field: 'port',
49+
form: {
50+
component: 'InputNumber',
51+
value: 465
7252
}
73-
]
74-
})
75-
export const { allSchemas } = useVxeCrudSchemas(crudSchemas)
53+
},
54+
{
55+
label: '是否开启 SSL',
56+
field: 'sslEnable',
57+
formatter: (_: Recordable, __: TableColumn, cellValue: boolean) => {
58+
return h(DictTag, {
59+
type: DICT_TYPE.INFRA_BOOLEAN_STRING,
60+
value: cellValue
61+
})
62+
}
63+
},
64+
{
65+
label: '创建时间',
66+
field: 'createTime',
67+
isForm: false,
68+
formatter: dateFormatter
69+
}
70+
])
71+
export const { allSchemas } = useCrudSchemas(crudSchemas)

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

Lines changed: 27 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -1,151 +1,40 @@
11
<template>
22
<ContentWrap>
3-
<!-- 列表 -->
4-
<XTable @register="registerTable">
5-
<template #toolbar_buttons>
6-
<!-- 操作：新增 -->
7-
<XButton
8-
type="primary"
9-
preIcon="ep:zoom-in"
10-
:title="t('action.add')"
11-
v-hasPermi="['system:mail-account:create']"
12-
@click="handleCreate()"
13-
/>
14-
</template>
15-
<template #actionbtns_default="{ row }">
16-
<!-- 操作：修改 -->
17-
<XTextButton
18-
preIcon="ep:edit"
19-
:title="t('action.edit')"
20-
v-hasPermi="['system:mail-account:update']"
21-
@click="handleUpdate(row.id)"
22-
/>
23-
<!-- 操作：详情 -->
24-
<XTextButton
25-
preIcon="ep:view"
26-
:title="t('action.detail')"
27-
v-hasPermi="['system:mail-account:query']"
28-
@click="handleDetail(row.id)"
29-
/>
30-
<!-- 操作：删除 -->
31-
<XTextButton
32-
preIcon="ep:delete"
33-
:title="t('action.del')"
34-
v-hasPermi="['system:mail-account:delete']"
35-
@click="deleteData(row.id)"
36-
/>
3+
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
4+
</ContentWrap>
5+
6+
<ContentWrap>
7+
<Table
8+
v-model:pageSize="tableObject.pageSize"
9+
v-model:currentPage="tableObject.currentPage"
10+
:columns="allSchemas.tableColumns"
11+
:data="tableObject.tableList"
12+
:loading="tableObject.loading"
13+
:pagination="{
14+
total: tableObject.total
15+
}"
16+
@register="register"
17+
>
18+
<template #action="{ row }">
19+
<ElButton type="danger" @click="delData(row, false)">
20+
{{ t('exampleDemo.del') }}
21+
</ElButton>
3722
</template>
38-
</XTable>
23+
</Table>
3924
</ContentWrap>
40-
<!-- 弹窗 -->
41-
<XModal id="mailAccountModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
42-
<!-- 表单：添加/修改 -->
43-
<Form
44-
ref="formRef"
45-
v-if="['create', 'update'].includes(actionType)"
46-
:schema="allSchemas.formSchema"
47-
:rules="rules"
48-
/>
49-
<!-- 表单：详情 -->
50-
<Descriptions
51-
v-if="actionType === 'detail'"
52-
:schema="allSchemas.detailSchema"
53-
:data="detailData"
54-
/>
55-
<template #footer>
56-
<!-- 按钮：保存 -->
57-
<XButton
58-
v-if="['create', 'update'].includes(actionType)"
59-
type="primary"
60-
:title="t('action.save')"
61-
:loading="actionLoading"
62-
@click="submitForm()"
63-
/>
64-
<!-- 按钮：关闭 -->
65-
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
66-
</template>
67-
</XModal>
6825
</template>
6926
<script setup lang="ts" name="MailAccount">
70-
import { FormExpose } from '@/components/Form'
71-
// 业务相关的 import
72-
import { rules, allSchemas } from './account.data'
27+
import { allSchemas } from './account.data'
28+
import { useTable } from '@/hooks/web/useTable'
29+
import { Table } from '@/components/Table'
7330
import * as MailAccountApi from '@/api/system/mail/account'
7431
75-
const { t } = useI18n() // 国际化
76-
const message = useMessage() // 消息弹窗
77-
78-
// 列表相关的变量
79-
const [registerTable, { reload, deleteData }] = useXTable({
80-
allSchemas: allSchemas,
32+
const { register, tableObject, methods } = useTable<MailAccountApi.MailAccountVO>({
8133
getListApi: MailAccountApi.getMailAccountPageApi,
82-
deleteApi: MailAccountApi.deleteMailAccountApi
34+
delListApi: MailAccountApi.deleteMailAccountApi
8335
})
8436
85-
// 弹窗相关的变量
86-
const modelVisible = ref(false) // 是否显示弹出层
87-
const modelTitle = ref('edit') // 弹出层标题
88-
const modelLoading = ref(false) // 弹出层loading
89-
const actionType = ref('') // 操作按钮的类型
90-
const actionLoading = ref(false) // 按钮 Loading
91-
const formRef = ref<FormExpose>() // 表单 Ref
92-
const detailData = ref() // 详情 Ref
93-
94-
// 设置标题
95-
const setDialogTile = (type: string) => {
96-
modelLoading.value = true
97-
modelTitle.value = t('action.' + type)
98-
actionType.value = type
99-
modelVisible.value = true
100-
}
101-
102-
// 新增操作
103-
const handleCreate = () => {
104-
setDialogTile('create')
105-
modelLoading.value = false
106-
}
107-
108-
// 修改操作
109-
const handleUpdate = async (rowId: number) => {
110-
setDialogTile('update')
111-
// 设置数据
112-
const res = await MailAccountApi.getMailAccountApi(rowId)
113-
unref(formRef)?.setValues(res)
114-
modelLoading.value = false
115-
}
116-
117-
// 详情操作
118-
const handleDetail = async (rowId: number) => {
119-
setDialogTile('detail')
120-
const res = await MailAccountApi.getMailAccountApi(rowId)
121-
detailData.value = res
122-
modelLoading.value = false
123-
}
37+
const { getList, setSearchParams } = methods
12438
125-
// 提交按钮
126-
const submitForm = async () => {
127-
const elForm = unref(formRef)?.getElFormRef()
128-
if (!elForm) return
129-
elForm.validate(async (valid) => {
130-
if (valid) {
131-
actionLoading.value = true
132-
// 提交请求
133-
try {
134-
const data = unref(formRef)?.formModel as MailAccountApi.MailAccountVO
135-
if (actionType.value === 'create') {
136-
await MailAccountApi.createMailAccountApi(data)
137-
message.success(t('common.createSuccess'))
138-
} else {
139-
await MailAccountApi.updateMailAccountApi(data)
140-
message.success(t('common.updateSuccess'))
141-
}
142-
modelVisible.value = false
143-
} finally {
144-
actionLoading.value = false
145-
// 刷新列表
146-
await reload()
147-
}
148-
}
149-
})
150-
}
39+
getList()
15140
</script>

0 commit comments

Comments
 (0)