Skip to content

Commit c806d03

Browse files
YunaiVYunaiV
committed
邮箱模块：完善 account 账号的增删改查功能
1 parent 9db8e85 commit c806d03

File tree

2 files changed

+270
-0
lines changed

2 files changed

+270
-0
lines changed

‎src/api/system/mail/account.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import request from '@/utils/request'
2+
3+
// 创建邮箱账号
4+
export function createMailAccount(data) {
5+
return request({
6+
url: '/system/mail-account/create',
7+
method: 'post',
8+
data: data
9+
})
10+
}
11+
12+
// 更新邮箱账号
13+
export function updateMailAccount(data) {
14+
return request({
15+
url: '/system/mail-account/update',
16+
method: 'put',
17+
data: data
18+
})
19+
}
20+
21+
// 删除邮箱账号
22+
export function deleteMailAccount(id) {
23+
return request({
24+
url: '/system/mail-account/delete?id=' + id,
25+
method: 'delete'
26+
})
27+
}
28+
29+
// 获得邮箱账号
30+
export function getMailAccount(id) {
31+
return request({
32+
url: '/system/mail-account/get?id=' + id,
33+
method: 'get'
34+
})
35+
}
36+
37+
// 获得邮箱账号分页
38+
export function getMailAccountPage(query) {
39+
return request({
40+
url: '/system/mail-account/page',
41+
method: 'get',
42+
params: query
43+
})
44+
}

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

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
<template>
2+
<div class="app-container">
3+
4+
<!-- 搜索工作栏 -->
5+
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
6+
<el-form-item label="邮箱" prop="mail">
7+
<el-input v-model="queryParams.mail" placeholder="请输入邮箱" clearable @keyup.enter.native="handleQuery"/>
8+
</el-form-item>
9+
<el-form-item label="用户名" prop="username">
10+
<el-input v-model="queryParams.username" placeholder="请输入用户名" clearable @keyup.enter.native="handleQuery"/>
11+
</el-form-item>
12+
<el-form-item>
13+
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
14+
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
15+
</el-form-item>
16+
</el-form>
17+
18+
<!-- 操作工具栏 -->
19+
<el-row :gutter="10" class="mb8">
20+
<el-col :span="1.5">
21+
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
22+
v-hasPermi="['system:mail-account:create']">新增</el-button>
23+
</el-col>
24+
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
25+
</el-row>
26+
27+
<!-- 列表 -->
28+
<el-table v-loading="loading" :data="list">
29+
<el-table-column label="主键" align="center" prop="id" />
30+
<el-table-column label="邮箱" align="center" prop="mail" />
31+
<el-table-column label="用户名" align="center" prop="username" />
32+
<el-table-column label="主机" align="center" prop="host" />
33+
<el-table-column label="端口" align="center" prop="port" />
34+
<el-table-column label="是否开启 SSL" align="center" prop="sslEnable">
35+
<template v-slot="scope">
36+
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.sslEnable" />
37+
</template>
38+
</el-table-column>
39+
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
40+
<template v-slot="scope">
41+
<span>{{ parseTime(scope.row.createTime) }}</span>
42+
</template>
43+
</el-table-column>
44+
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
45+
<template v-slot="scope">
46+
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
47+
v-hasPermi="['system:mail-account:update']">修改</el-button>
48+
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
49+
v-hasPermi="['system:mail-account:delete']">删除</el-button>
50+
</template>
51+
</el-table-column>
52+
</el-table>
53+
<!-- 分页组件 -->
54+
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
55+
@pagination="getList"/>
56+
57+
<!-- 对话框(添加 / 修改) -->
58+
<el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body>
59+
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
60+
<el-form-item label="邮箱" prop="mail">
61+
<el-input v-model="form.mail" placeholder="请输入邮箱" />
62+
</el-form-item>
63+
<el-form-item label="用户名" prop="username">
64+
<el-input v-model="form.username" placeholder="请输入用户名" />
65+
</el-form-item>
66+
<el-form-item label="密码" prop="password">
67+
<el-input v-model="form.password" placeholder="请输入密码" />
68+
</el-form-item>
69+
<el-form-item label="主机" prop="host">
70+
<el-input v-model="form.host" placeholder="请输入主机" />
71+
</el-form-item>
72+
<el-form-item label="端口" prop="port">
73+
<el-input v-model="form.port" placeholder="请输入端口" />
74+
</el-form-item>
75+
<el-form-item label="是否开启 SSL" prop="sslEnable">
76+
<el-radio-group v-model="form.sslEnable">
77+
<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.INFRA_BOOLEAN_STRING)"
78+
:key="dict.value" :label="dict.value === 'true'">{{dict.label}}</el-radio>
79+
</el-radio-group>
80+
</el-form-item>
81+
</el-form>
82+
<div slot="footer" class="dialog-footer">
83+
<el-button type="primary" @click="submitForm">确 定</el-button>
84+
<el-button @click="cancel">取 消</el-button>
85+
</div>
86+
</el-dialog>
87+
</div>
88+
</template>
89+
90+
<script>
91+
import { createMailAccount, updateMailAccount, deleteMailAccount, getMailAccount, getMailAccountPage } from "@/api/system/mail/account";
92+
93+
export default {
94+
name: "MailAccount",
95+
components: {
96+
},
97+
data() {
98+
return {
99+
// 遮罩层
100+
loading: true,
101+
// 导出遮罩层
102+
exportLoading: false,
103+
// 显示搜索条件
104+
showSearch: true,
105+
// 总条数
106+
total: 0,
107+
// 邮箱账号列表
108+
list: [],
109+
// 弹出层标题
110+
title: "",
111+
// 是否显示弹出层
112+
open: false,
113+
// 查询参数
114+
queryParams: {
115+
pageNo: 1,
116+
pageSize: 10,
117+
mail: null,
118+
username: null
119+
},
120+
// 表单参数
121+
form: {},
122+
// 表单校验
123+
rules: {
124+
mail: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
125+
username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
126+
password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
127+
host: [{ required: true, message: "主机不能为空", trigger: "blur" }],
128+
port: [{ required: true, message: "端口不能为空", trigger: "blur" }],
129+
sslEnable: [{ required: true, message: "是否开启 SSL不能为空", trigger: "blur" }],
130+
}
131+
};
132+
},
133+
created() {
134+
this.getList();
135+
},
136+
methods: {
137+
/** 查询列表 */
138+
getList() {
139+
this.loading = true;
140+
// 执行查询
141+
getMailAccountPage(this.queryParams).then(response => {
142+
this.list = response.data.list;
143+
this.total = response.data.total;
144+
this.loading = false;
145+
});
146+
},
147+
/** 取消按钮 */
148+
cancel() {
149+
this.open = false;
150+
this.reset();
151+
},
152+
/** 表单重置 */
153+
reset() {
154+
this.form = {
155+
id: undefined,
156+
mail: undefined,
157+
username: undefined,
158+
password: undefined,
159+
host: undefined,
160+
port: undefined,
161+
sslEnable: true,
162+
};
163+
this.resetForm("form");
164+
},
165+
/** 搜索按钮操作 */
166+
handleQuery() {
167+
this.queryParams.pageNo = 1;
168+
this.getList();
169+
},
170+
/** 重置按钮操作 */
171+
resetQuery() {
172+
this.resetForm("queryForm");
173+
this.handleQuery();
174+
},
175+
/** 新增按钮操作 */
176+
handleAdd() {
177+
this.reset();
178+
this.open = true;
179+
this.title = "添加邮箱账号";
180+
},
181+
/** 修改按钮操作 */
182+
handleUpdate(row) {
183+
this.reset();
184+
const id = row.id;
185+
getMailAccount(id).then(response => {
186+
this.form = response.data;
187+
this.open = true;
188+
this.title = "修改邮箱账号";
189+
});
190+
},
191+
/** 提交按钮 */
192+
submitForm() {
193+
this.$refs["form"].validate(valid => {
194+
if (!valid) {
195+
return;
196+
}
197+
// 修改的提交
198+
if (this.form.id != null) {
199+
updateMailAccount(this.form).then(response => {
200+
this.$modal.msgSuccess("修改成功");
201+
this.open = false;
202+
this.getList();
203+
});
204+
return;
205+
}
206+
// 添加的提交
207+
createMailAccount(this.form).then(response => {
208+
this.$modal.msgSuccess("新增成功");
209+
this.open = false;
210+
this.getList();
211+
});
212+
});
213+
},
214+
/** 删除按钮操作 */
215+
handleDelete(row) {
216+
const id = row.id;
217+
this.$modal.confirm('是否确认删除邮箱账号编号为"' + id + '"的数据项?').then(function() {
218+
return deleteMailAccount(id);
219+
}).then(() => {
220+
this.getList();
221+
this.$modal.msgSuccess("删除成功");
222+
}).catch(() => {});
223+
}
224+
}
225+
};
226+
</script>

0 commit comments

Comments
 (0)