|
| 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="toMail"> |
| 7 | + <el-input v-model="queryParams.toMail" placeholder="请输入接收邮箱" clearable @keyup.enter.native="handleQuery"/> |
| 8 | + </el-form-item> |
| 9 | + <el-form-item label="邮箱账号" prop="accountId"> |
| 10 | + <el-select v-model="queryParams.accountId" placeholder="请输入邮箱账号" clearable> |
| 11 | + <el-option v-for="account in accountOptions" :key="account.id" :value="account.id" :label="account.mail" /> |
| 12 | + </el-select> |
| 13 | + </el-form-item> |
| 14 | + <el-form-item label="模板编号" prop="templateId"> |
| 15 | + <el-input v-model="queryParams.templateId" placeholder="请输入模板编号" clearable @keyup.enter.native="handleQuery"/> |
| 16 | + </el-form-item> |
| 17 | + <el-form-item label="发送状态" prop="sendStatus"> |
| 18 | + <el-select v-model="queryParams.sendStatus" placeholder="请选择发送状态" clearable size="small"> |
| 19 | + <el-option v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_MAIL_SEND_STATUS)" |
| 20 | + :key="dict.value" :label="dict.label" :value="dict.value"/> |
| 21 | + </el-select> |
| 22 | + </el-form-item> |
| 23 | + <el-form-item label="发送时间" prop="sendTime"> |
| 24 | + <el-date-picker v-model="queryParams.sendTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" |
| 25 | + range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" /> |
| 26 | + </el-form-item> |
| 27 | + <el-form-item label="用户编号" prop="userId"> |
| 28 | + <el-input v-model="queryParams.userId" placeholder="请输入用户编号" clearable @keyup.enter.native="handleQuery"/> |
| 29 | + </el-form-item> |
| 30 | + <el-form-item label="用户类型" prop="userType"> |
| 31 | + <el-select v-model="queryParams.userType" placeholder="请选择用户类型" clearable> |
| 32 | + <el-option v-for="dict in this.getDictDatas(DICT_TYPE.USER_TYPE)" |
| 33 | + :key="dict.value" :label="dict.label" :value="dict.value"/> |
| 34 | + </el-select> |
| 35 | + </el-form-item> |
| 36 | + <el-form-item> |
| 37 | + <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button> |
| 38 | + <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button> |
| 39 | + </el-form-item> |
| 40 | + </el-form> |
| 41 | + |
| 42 | + <!-- 操作工具栏 --> |
| 43 | + <el-row :gutter="10" class="mb8"> |
| 44 | + <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> |
| 45 | + </el-row> |
| 46 | + |
| 47 | + <!-- 列表 --> |
| 48 | + <el-table v-loading="loading" :data="list"> |
| 49 | + <el-table-column label="编号" align="center" prop="id" /> |
| 50 | + <el-table-column label="发送时间" align="center" prop="sendTime" width="180"> |
| 51 | + <template v-slot="scope"> |
| 52 | + <span>{{ parseTime(scope.row.sendTime) }}</span> |
| 53 | + </template> |
| 54 | + </el-table-column> |
| 55 | + <el-table-column label="接收邮箱" align="center" prop="toMail" width="200"> |
| 56 | + <template v-slot="scope"> |
| 57 | + <div>{{ scope.row.toMail }}</div> |
| 58 | + <div v-if="scope.row.userType && scope.row.userId"> |
| 59 | + <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType"/>{{ '(' + scope.row.userId + ')' }} |
| 60 | + </div> |
| 61 | + </template> |
| 62 | + </el-table-column> |
| 63 | + <el-table-column label="邮件标题" align="center" prop="templateTitle" /> |
| 64 | + <el-table-column label="发送状态" align="center" prop="sendStatus"> |
| 65 | + <template v-slot="scope"> |
| 66 | + <dict-tag :type="DICT_TYPE.SYSTEM_MAIL_SEND_STATUS" :value="scope.row.sendStatus" /> |
| 67 | + </template> |
| 68 | + </el-table-column> |
| 69 | + <el-table-column label="邮箱账号" align="center" prop="fromMail" /> |
| 70 | + <el-table-column label="模板编号" align="center" prop="templateId" /> |
| 71 | + <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
| 72 | + <template v-slot="scope"> |
| 73 | + <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)" |
| 74 | + v-hasPermi="['system:mail-log:query']">详细</el-button> |
| 75 | + </template> |
| 76 | + </el-table-column> |
| 77 | + </el-table> |
| 78 | + <!-- 分页组件 --> |
| 79 | + <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" |
| 80 | + @pagination="getList"/> |
| 81 | + |
| 82 | + <!-- 邮件日志详细--> |
| 83 | + <el-dialog :title="title" :visible.sync="open" width="700px" v-dialogDrag append-to-body> |
| 84 | + <el-form ref="form" :model="form" label-width="160px"> |
| 85 | + <el-row> |
| 86 | + <el-col :span="24"> |
| 87 | + <el-form-item label="日志主键:">{{ form.id }}</el-form-item> |
| 88 | + <el-form-item label="用户编号:">{{ form.userId }}</el-form-item> |
| 89 | + <el-form-item label="用户类型:"> |
| 90 | + <dict-tag :type="DICT_TYPE.USER_TYPE" :value="form.userType"/> |
| 91 | + </el-form-item> |
| 92 | + <el-form-item label="接收邮箱地址:">{{ form.toMail }}</el-form-item> |
| 93 | + <el-form-item label="邮箱账号编号:">{{ form.accountId }}</el-form-item> |
| 94 | + <el-form-item label="发送邮箱地址:">{{ form.fromMail }}</el-form-item> |
| 95 | + <el-form-item label="模板编号:">{{ form.templateId }}</el-form-item> |
| 96 | + <el-form-item label="模板编码:">{{ form.templateCode }}</el-form-item> |
| 97 | + <el-form-item label="模版发送人名称:">{{ form.templateNickname }}</el-form-item> |
| 98 | + <el-form-item label="邮件标题:">{{ form.templateTitle }}</el-form-item> |
| 99 | + <el-form-item label="邮件内容:"> |
| 100 | + <editor v-model="form.templateContent" :min-height="192" read-only /> |
| 101 | + </el-form-item> |
| 102 | + <el-form-item label="邮件参数:">{{ form.templateParams }}</el-form-item> |
| 103 | + <el-form-item label="发送状态:"> |
| 104 | + <dict-tag :type="DICT_TYPE.SYSTEM_MAIL_SEND_STATUS" :value="form.sendStatus" /> |
| 105 | + </el-form-item> |
| 106 | + <el-form-item label="发送时间:">{{ parseTime(form.sendTime) }}</el-form-item> |
| 107 | + <el-form-item label="发送返回的消息编号:">{{ form.sendMessageId }}</el-form-item> |
| 108 | + <el-form-item label="发送异常:">{{ form.sendException }}</el-form-item> |
| 109 | + </el-col> |
| 110 | + </el-row> |
| 111 | + </el-form> |
| 112 | + <div slot="footer" class="dialog-footer"> |
| 113 | + <el-button @click="open = false">关 闭</el-button> |
| 114 | + </div> |
| 115 | + </el-dialog> |
| 116 | + </div> |
| 117 | +</template> |
| 118 | + |
| 119 | +<script> |
| 120 | +import { getMailLog, getMailLogPage } from "@/api/system/mail/log"; |
| 121 | +import Editor from '@/components/Editor'; |
| 122 | +import { getSimpleMailAccountList } from "@/api/system/mail/account"; |
| 123 | +
|
| 124 | +export default { |
| 125 | + name: "MailLog", |
| 126 | + components: { |
| 127 | + Editor, |
| 128 | + }, |
| 129 | + data() { |
| 130 | + return { |
| 131 | + // 遮罩层 |
| 132 | + loading: true, |
| 133 | + // 导出遮罩层 |
| 134 | + exportLoading: false, |
| 135 | + // 显示搜索条件 |
| 136 | + showSearch: true, |
| 137 | + // 总条数 |
| 138 | + total: 0, |
| 139 | + // 邮件日志列表 |
| 140 | + list: [], |
| 141 | + // 弹出层标题 |
| 142 | + title: "", |
| 143 | + // 是否显示弹出层 |
| 144 | + open: false, |
| 145 | + // 查询参数 |
| 146 | + queryParams: { |
| 147 | + pageNo: 1, |
| 148 | + pageSize: 10, |
| 149 | + userId: null, |
| 150 | + userType: null, |
| 151 | + toMail: null, |
| 152 | + accountId: null, |
| 153 | + templateId: null, |
| 154 | + sendStatus: null, |
| 155 | + sendTime: [], |
| 156 | + }, |
| 157 | + // 表单参数 |
| 158 | + form: {}, |
| 159 | + // 邮箱账号 |
| 160 | + accountOptions: [] |
| 161 | + }; |
| 162 | + }, |
| 163 | + created() { |
| 164 | + this.getList(); |
| 165 | + // 获得邮箱账号列表 |
| 166 | + getSimpleMailAccountList().then(response => { |
| 167 | + this.accountOptions = response.data |
| 168 | + }) |
| 169 | + }, |
| 170 | + methods: { |
| 171 | + /** 查询列表 */ |
| 172 | + getList() { |
| 173 | + this.loading = true; |
| 174 | + // 执行查询 |
| 175 | + getMailLogPage(this.queryParams).then(response => { |
| 176 | + this.list = response.data.list; |
| 177 | + this.total = response.data.total; |
| 178 | + this.loading = false; |
| 179 | + }); |
| 180 | + }, |
| 181 | + /** 取消按钮 */ |
| 182 | + cancel() { |
| 183 | + this.open = false; |
| 184 | + this.reset(); |
| 185 | + }, |
| 186 | + /** 表单重置 */ |
| 187 | + reset() { |
| 188 | + this.form = { |
| 189 | + id: undefined, |
| 190 | + userId: undefined, |
| 191 | + userType: undefined, |
| 192 | + toMail: undefined, |
| 193 | + accountId: undefined, |
| 194 | + fromMail: undefined, |
| 195 | + templateId: undefined, |
| 196 | + templateCode: undefined, |
| 197 | + templateNickname: undefined, |
| 198 | + templateTitle: undefined, |
| 199 | + templateContent: undefined, |
| 200 | + templateParams: undefined, |
| 201 | + sendStatus: undefined, |
| 202 | + sendTime: undefined, |
| 203 | + sendMessageId: undefined, |
| 204 | + sendException: undefined, |
| 205 | + }; |
| 206 | + this.resetForm("form"); |
| 207 | + }, |
| 208 | + /** 搜索按钮操作 */ |
| 209 | + handleQuery() { |
| 210 | + this.queryParams.pageNo = 1; |
| 211 | + this.getList(); |
| 212 | + }, |
| 213 | + /** 重置按钮操作 */ |
| 214 | + resetQuery() { |
| 215 | + this.resetForm("queryForm"); |
| 216 | + this.handleQuery(); |
| 217 | + }, |
| 218 | + /** 详细按钮操作 */ |
| 219 | + handleView(row) { |
| 220 | + this.open = true; |
| 221 | + this.form = row; |
| 222 | + } |
| 223 | + } |
| 224 | +}; |
| 225 | +</script> |
0 commit comments