Skip to content

Commit 90cd829

Browse files
YunaiVYunaiV
committed
Vue3 重构：邮件模版的列表
1 parent e42a9aa commit 90cd829

File tree

4 files changed

+154
-338
lines changed

4 files changed

+154
-338
lines changed

‎src/views/infra/dataSourceConfig/form.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
</template>
3131
<script setup lang="ts">
3232
import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
33-
import { DataSourceConfigVO } from '@/api/infra/dataSourceConfig'
3433
3534
const { t } = useI18n() // 国际化
3635
const message = useMessage() // 消息弹窗
@@ -39,7 +38,7 @@ const modelVisible = ref(false) // 弹窗的是否展示
3938
const modelTitle = ref('') // 弹窗的标题
4039
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
4140
const formType = ref('') // 表单的类型：create - 新增；update - 修改
42-
const formData = ref<DataSourceConfigVO>({
41+
const formData = ref<DataSourceConfigApi.DataSourceConfigVO>({
4342
id: undefined,
4443
name: '',
4544
url: '',

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,7 @@ const crudSchemas = reactive<CrudSchema[]>([
7777
{
7878
label: '操作',
7979
field: 'action',
80-
form: {
81-
show: false
82-
}
80+
isForm: false
8381
}
8482
])
8583
export const { allSchemas } = useCrudSchemas(crudSchemas)

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

Lines changed: 65 additions & 254 deletions
Original file line numberDiff line numberDiff line change
@@ -1,273 +1,84 @@
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 #toolbar_buttons>
17-
<!-- 操作：新增 -->
18-
<XButton
2+
<!-- 搜索工作栏 -->
3+
<content-wrap>
4+
<Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams">
5+
<!-- 新增等操作按钮 -->
6+
<template #actionMore>
7+
<el-button
198
type="primary"
20-
preIcon="ep:zoom-in"
21-
:title="t('action.add')"
22-
v-hasPermi="['system:mail-template:create']"
23-
@click="handleCreate()"
24-
/>
25-
</template>
26-
<template #accountId_default="{ row }">
27-
<span>{{ accountOptions.find((account) => account.id === row.accountId)?.mail }}</span>
9+
@click="openModal('create')"
10+
v-hasPermi="['system:mail-account:create']"
11+
>
12+
<Icon icon="ep:plus" class="mr-5px" /> 新增
13+
</el-button>
2814
</template>
29-
<template #actionbtns_default="{ row }">
30-
<!-- 操作：测试短信 -->
31-
<XTextButton
32-
preIcon="ep:cpu"
33-
:title="t('action.test')"
34-
v-hasPermi="['system:mail-template:send-mail']"
35-
@click="handleSendMail(row)"
36-
/>
37-
<!-- 操作：修改 -->
38-
<XTextButton
39-
preIcon="ep:edit"
40-
:title="t('action.edit')"
41-
v-hasPermi="['system:mail-template:update']"
42-
@click="handleUpdate(row.id)"
43-
/>
44-
<!-- 操作：详情 -->
45-
<XTextButton
46-
preIcon="ep:view"
47-
:title="t('action.detail')"
48-
v-hasPermi="['system:mail-template:query']"
49-
@click="handleDetail(row.id)"
50-
/>
51-
<!-- 操作：删除 -->
52-
<XTextButton
53-
preIcon="ep:delete"
54-
:title="t('action.del')"
55-
v-hasPermi="['system:mail-template:delete']"
56-
@click="deleteData(row.id)"
57-
/>
58-
</template>
59-
</XTable>
60-
</ContentWrap>
15+
</Search>
16+
</content-wrap>
6117

62-
<!-- 添加/修改/详情的弹窗 -->
63-
<XModal id="mailTemplateModel" :loading="modelLoading" v-model="modelVisible" :title="modelTitle">
64-
<!-- 表单：添加/修改 -->
65-
<Form
66-
ref="formRef"
67-
v-if="['create', 'update'].includes(actionType)"
68-
:schema="allSchemas.formSchema"
69-
:rules="rules"
18+
<!-- 列表 -->
19+
<content-wrap>
20+
<Table
21+
:columns="allSchemas.tableColumns"
22+
:data="tableObject.tableList"
23+
:loading="tableObject.loading"
24+
:pagination="{
25+
total: tableObject.total
26+
}"
27+
v-model:pageSize="tableObject.pageSize"
28+
v-model:currentPage="tableObject.currentPage"
7029
>
71-
<template #accountId="form">
72-
<el-select v-model="form.accountId">
73-
<el-option
74-
v-for="item in accountOptions"
75-
:key="item.id"
76-
:label="item.mail"
77-
:value="item.id"
78-
/>
79-
</el-select>
30+
<template #action="{ row }">
31+
<el-button
32+
link
33+
type="primary"
34+
@click="openModal('update', row.id)"
35+
v-hasPermi="['system:mail-template:update']"
36+
>
37+
编辑
38+
</el-button>
39+
<el-button
40+
link
41+
type="danger"
42+
v-hasPermi="['system:mail-template:delete']"
43+
@click="handleDelete(row.id)"
44+
>
45+
删除
46+
</el-button>
8047
</template>
81-
</Form>
82-
<!-- 表单：详情 -->
83-
<Descriptions
84-
v-if="actionType === 'detail'"
85-
:schema="allSchemas.detailSchema"
86-
:data="detailData"
87-
/>
88-
<template #footer>
89-
<!-- 按钮：保存 -->
90-
<XButton
91-
v-if="['create', 'update'].includes(actionType)"
92-
type="primary"
93-
:title="t('action.save')"
94-
:loading="actionLoading"
95-
@click="submitForm()"
96-
/>
97-
<!-- 按钮：关闭 -->
98-
<XButton :loading="actionLoading" :title="t('dialog.close')" @click="modelVisible = false" />
99-
</template>
100-
</XModal>
48+
</Table>
49+
</content-wrap>
10150

102-
<!-- 测试邮件的弹窗 -->
103-
<XModal id="sendTest" v-model="sendVisible" title="测试">
104-
<el-form :model="sendForm" :rules="sendRules" label-width="200px" label-position="top">
105-
<el-form-item label="模板内容" prop="content">
106-
<Editor :model-value="sendForm.content" readonly height="150px" />
107-
</el-form-item>
108-
<el-form-item label="收件邮箱" prop="mail">
109-
<el-input v-model="sendForm.mail" placeholder="请输入收件邮箱" />
110-
</el-form-item>
111-
<el-form-item
112-
v-for="param in sendForm.params"
113-
:key="param"
114-
:label="'参数 {' + param + '}'"
115-
:prop="'templateParams.' + param"
116-
>
117-
<el-input
118-
v-model="sendForm.templateParams[param]"
119-
:placeholder="'请输入 ' + param + ' 参数'"
120-
/>
121-
</el-form-item>
122-
</el-form>
123-
<!-- 操作按钮 -->
124-
<template #footer>
125-
<XButton
126-
type="primary"
127-
:title="t('action.test')"
128-
:loading="actionLoading"
129-
@click="sendTest()"
130-
/>
131-
<XButton :title="t('dialog.close')" @click="sendVisible = false" />
132-
</template>
133-
</XModal>
51+
<!-- 表单弹窗：添加/修改 -->
52+
<!-- <mail-template-form ref="modalRef" @success="getList" />-->
13453
</template>
13554
<script setup lang="ts" name="MailTemplate">
136-
import { FormExpose } from '@/components/Form'
137-
// 业务相关的 import
138-
import { rules, allSchemas } from './template.data'
55+
import { allSchemas } from './template.data'
13956
import * as MailTemplateApi from '@/api/system/mail/template'
140-
import * as MailAccountApi from '@/api/system/mail/account'
141-
142-
const { t } = useI18n() // 国际化
143-
const message = useMessage() // 消息弹窗
57+
// import MailAccountForm from './form.vue'
14458
145-
// 列表相关的变量
146-
const queryParams = reactive({
147-
accountId: null
148-
})
149-
const [registerTable, { reload, deleteData }] = useXTable({
150-
allSchemas: allSchemas,
151-
params: queryParams,
152-
getListApi: MailTemplateApi.getMailTemplatePageApi,
153-
deleteApi: MailTemplateApi.deleteMailTemplateApi
59+
// tableObject：表格的属性对象，可获得分页大小、条数等属性
60+
// tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
61+
// 详细可见：https://kailong110120130.gitee.io/vue-element-plus-admin-doc/components/table.html#usetable
62+
const { tableObject, tableMethods } = useTable({
63+
getListApi: MailTemplateApi.getMailTemplatePageApi, // 分页接口
64+
delListApi: MailTemplateApi.deleteMailTemplateApi // 删除接口
15465
})
155-
const accountOptions = ref<any[]>([]) // 账号下拉选项
156-
157-
// 弹窗相关的变量
158-
const modelVisible = ref(false) // 是否显示弹出层
159-
const modelTitle = ref('edit') // 弹出层标题
160-
const modelLoading = ref(false) // 弹出层loading
161-
const actionType = ref('') // 操作按钮的类型
162-
const actionLoading = ref(false) // 按钮 Loading
163-
const formRef = ref<FormExpose>() // 表单 Ref
164-
const detailData = ref() // 详情 Ref
165-
166-
// 设置标题
167-
const setDialogTile = (type: string) => {
168-
modelLoading.value = true
169-
modelTitle.value = t('action.' + type)
170-
actionType.value = type
171-
modelVisible.value = true
172-
}
66+
// 获得表格的各种操作
67+
const { getList, setSearchParams } = tableMethods
17368
174-
// 新增操作
175-
const handleCreate = () => {
176-
setDialogTile('create')
177-
modelLoading.value = false
178-
}
179-
180-
// 修改操作
181-
const handleUpdate = async (rowId: number) => {
182-
setDialogTile('update')
183-
// 设置数据
184-
const res = await MailTemplateApi.getMailTemplateApi(rowId)
185-
unref(formRef)?.setValues(res)
186-
modelLoading.value = false
187-
}
188-
189-
// 详情操作
190-
const handleDetail = async (rowId: number) => {
191-
setDialogTile('detail')
192-
const res = await MailTemplateApi.getMailTemplateApi(rowId)
193-
detailData.value = res
194-
modelLoading.value = false
195-
}
196-
197-
// 提交按钮
198-
const submitForm = async () => {
199-
const elForm = unref(formRef)?.getElFormRef()
200-
if (!elForm) return
201-
elForm.validate(async (valid) => {
202-
if (valid) {
203-
actionLoading.value = true
204-
// 提交请求
205-
try {
206-
const data = unref(formRef)?.formModel as MailTemplateApi.MailTemplateVO
207-
if (actionType.value === 'create') {
208-
await MailTemplateApi.createMailTemplateApi(data)
209-
message.success(t('common.createSuccess'))
210-
} else {
211-
await MailTemplateApi.updateMailTemplateApi(data)
212-
message.success(t('common.updateSuccess'))
213-
}
214-
modelVisible.value = false
215-
} finally {
216-
actionLoading.value = false
217-
// 刷新列表
218-
await reload()
219-
}
220-
}
221-
})
222-
}
223-
224-
// ========== 测试相关 ==========
225-
const sendForm = ref({
226-
content: '',
227-
params: {},
228-
mail: '',
229-
templateCode: '',
230-
templateParams: {}
231-
})
232-
const sendRules = ref({
233-
mail: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
234-
templateCode: [{ required: true, message: '模版编号不能为空', trigger: 'blur' }],
235-
templateParams: {}
236-
})
237-
const sendVisible = ref(false)
238-
239-
const handleSendMail = (row: any) => {
240-
sendForm.value.content = row.content
241-
sendForm.value.params = row.params
242-
sendForm.value.templateCode = row.code
243-
sendForm.value.templateParams = row.params.reduce(function (obj, item) {
244-
obj[item] = undefined
245-
return obj
246-
}, {})
247-
sendRules.value.templateParams = row.params.reduce(function (obj, item) {
248-
obj[item] = { required: true, message: '参数 ' + item + ' 不能为空', trigger: 'change' }
249-
return obj
250-
}, {})
251-
sendVisible.value = true
252-
}
69+
/** 添加/修改操作 */
70+
// const modalRef = ref()
71+
// const openModal = (type: string, id?: number) => {
72+
// modalRef.value.openModal(type, id)
73+
// }
25374
254-
const sendTest = async () => {
255-
const data: MailTemplateApi.MailSendReqVO = {
256-
mail: sendForm.value.mail,
257-
templateCode: sendForm.value.templateCode,
258-
templateParams: sendForm.value.templateParams as unknown as Map<string, Object>
259-
}
260-
const res = await MailTemplateApi.sendMailApi(data)
261-
if (res) {
262-
message.success('提交发送成功！发送结果，见发送日志编号：' + res)
263-
}
264-
sendVisible.value = false
75+
/** 删除按钮操作 */
76+
const handleDelete = (id: number) => {
77+
tableMethods.delList(id, false)
26578
}
26679
267-
// ========== 初始化 ==========
80+
/** 初始化 **/
26881
onMounted(() => {
269-
MailAccountApi.getSimpleMailAccountList().then((data) => {
270-
accountOptions.value = data
271-
})
82+
getList()
27283
})
27384
</script>

0 commit comments

Comments
 (0)