一、添加视图

        在根目录下src文件夹下views文件夹下param文件夹下mail文件夹下，新建index.vue，代码如下

<template><div class="app-container"><div class="filter-container" style="float:left;"><el-form :inline="true" :model="searchParams" class="demo-form-inline"><el-form-item><el-input v-model="searchParams.id" style="width: 160px;" placeholder="请输入ID" clearable /></el-form-item><el-form-item><el-input v-model="searchParams.title" style="width: 180px;" placeholder="请输入邮箱服务标题" clearable /></el-form-item><el-form-item><el-input v-model="searchParams.username" style="width: 180px;" placeholder="请输入发件人邮箱" clearable /></el-form-item><el-form-item><el-button class="search-btn el-button--infoSearch" type="primary" @click="search()">搜索</el-button><el-button class="search-btn el-button--infoSearch" style="background:#F2F6FC;" @click="clearSearch">重置</el-button></el-form-item></el-form></div><div class="filter-container" style="float:right;"><el-button v-if="$store.getters.butts.includes('ParamMailIndexAdd')" class="filter-item" style="margin-left: 10px;" type="primary" @click="handleAdd">添加</el-button><el-button class="filter-item" style="margin-left: 10px;" @click="search(currentPage)">刷新</el-button><el-button v-if="$store.getters.butts.includes('ParamMailIndexTostatus')" class="filter-item" style="margin-left: 10px;" @click="handleStatus(1)" type="success">启用</el-button><el-button v-if="$store.getters.butts.includes('ParamMailIndexTostatus')" class="filter-item" style="margin-left: 10px;" @click="handleStatus(0)" type="warning">禁用</el-button><el-button v-if="$store.getters.butts.includes('ParamMailIndexDelete')" class="filter-item" @click="handleDelete" type="danger">删除</el-button></div><el-tableref="resTable"v-loading="listLoading":data="list"row-key="id"highlight-current-rowmax-height="750"default-expand-allstyle="width: 100%;margin-top:10px;"border:default-sort="{prop: 'id', order: 'descending'}"><el-table-column type="selection" width="50" align="center" /><el-table-column align="center" label="ID" sortable prop="id"><template slot-scope="{row}"><span>{{ row.id }}</span></template></el-table-column><el-table-column align="center" label="邮箱服务标题"><template slot-scope="{row}"><span>{{ row.title }}</span></template></el-table-column><el-table-column align="center" label="发件人邮箱"><template slot-scope="{row}"><span>{{ row.username }}</span></template></el-table-column><el-table-column align="center" label="邮箱服务地址"><template slot-scope="{row}"><span>{{ row.smtp_address }}</span></template></el-table-column><el-table-column align="center" label="邮箱服务端口号"><template slot-scope="{row}"><span>{{ row.smtp_port }}</span></template></el-table-column><el-table-column align="center" label="邮箱服务有效期"><template slot-scope="{row}"><el-link v-if="row.smtp_lifespan == 0" type="danger" :underline="false">无限期</el-link><el-link v-if="row.smtp_lifespan > 0" type="warning" :underline="false">{{ row.smtp_lifespan }}天</el-link></template></el-table-column><el-table-column align="center" label="邮箱服务协议"><template slot-scope="{row}"><span>{{ row.smtp_protocol }}</span></template></el-table-column><el-table-column align="center" label="状态"><template slot-scope="{row}"><el-tag type="success" v-if="row.status === 1">启用</el-tag><el-tag type="warning" v-if="row.status === 0">禁用</el-tag></template></el-table-column><el-table-column align="center" label="添加时间"><template slot-scope="{row}"><span>{{ row.create_time }}</span></template></el-table-column><el-table-column align="center" label="修改时间"><template slot-scope="{row}"><span>{{ row.update_time }}</span></template></el-table-column><el-table-column align="center" label="操作" width="210"><template slot-scope="{row}"><el-button v-if="$store.getters.butts.includes('ParamMailIndexDetails')" size="mini" @click="handleDetails(row.id)" type="info">详情</el-button><el-button v-if="$store.getters.butts.includes('ParamMailIndexEdit')" size="mini" @click="handleEdit(row.id)" type="primary">编辑</el-button><el-button v-if="$store.getters.butts.includes('ParamMailIndexDelete')" size="mini" @click="handleDelete(row.id)" type="danger">删除</el-button></template></el-table-column></el-table><div class="block"><el-pagination:hide-on-single-page="true":current-page="currentPage":page-sizes="pageSizes":page-size="currentSize"layout="total, sizes, prev, pager, next, jumper":total="dataTotal"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div><transition name="dialog-fade"><el-dialog :visible.sync="dialogVisible" :title="resTemp.id === 0 ? '添加' : '编辑'" :close-on-click-modal="false" :close-on-press-escape="false"><el-form ref="resForm" :rules="formRules" :model="resTemp" label-position="right" label-width="150px"><el-form-item label="邮箱服务标题" prop="title"><el-input v-model="resTemp.title" placeholder="请填写邮箱服务标题" /></el-form-item><el-form-item label="发件人邮箱" prop="username"><el-input v-model="resTemp.username" placeholder="请填写发件人邮箱" /></el-form-item><el-form-item label="邮箱服务地址" prop="smtp_address"><el-input v-model="resTemp.smtp_address" placeholder="请填写邮箱服务地址" /></el-form-item><el-form-item label="邮箱服务端口" prop="smtp_port"><el-input-number v-model="resTemp.smtp_port" placeholder="请填写邮箱服务端口" /></el-form-item><el-form-item label="邮箱服务授权码" prop="smtp_password"><el-input v-model="resTemp.smtp_password" placeholder="请填写邮箱服务授权码" /></el-form-item><el-form-item label="邮箱服务有效期" prop="smtp_lifespan"><el-input-number v-model="resTemp.smtp_lifespan" placeholder="请填写邮箱服务有效期" /><el-link type="danger" :underline="false">0为无限期</el-link></el-form-item><el-form-item label="邮箱服务协议" prop="smtp_protocol"><el-input v-model="resTemp.smtp_protocol" placeholder="请填写邮箱服务协议" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogVisible=false">取消</el-button><el-button v-if="$store.getters.butts.includes('ParamMailIndexSave')" type="primary" @click="saveInfo()">提交</el-button></div></el-dialog></transition><transition name="dialog-fade"><el-dialog :visible.sync="dialogDetails" title="详情" :close-on-click-modal="false" :close-on-press-escape="false"><el-form ref="resForm" :model="resTemp" label-position="right" label-width="150px"><el-form-item label="邮箱服务标题"><el-input v-model="resTemp.title" placeholder="请填写邮箱服务标题" disabled /></el-form-item><el-form-item label="发件人邮箱"><el-input v-model="resTemp.username" placeholder="请填写发件人邮箱" disabled /></el-form-item><el-form-item label="邮箱服务地址"><el-input v-model="resTemp.smtp_address" placeholder="请填写邮箱服务地址" disabled /></el-form-item><el-form-item label="邮箱服务端口"><el-input-number v-model="resTemp.smtp_port" placeholder="请填写邮箱服务端口" disabled /></el-form-item><el-form-item label="邮箱服务授权码"><el-input v-model="resTemp.smtp_password" placeholder="请填写邮箱服务授权码" disabled /></el-form-item><el-form-item label="邮箱服务有效期"><el-input-number v-model="resTemp.smtp_lifespan" placeholder="请填写邮箱服务有效期" disabled /></el-form-item><el-form-item label="邮箱服务协议"><el-input v-model="resTemp.smtp_protocol" placeholder="请填写邮箱服务协议" disabled /></el-form-item><el-form-item label="状态"><el-switchv-model="resTemp.status"active-value="1"inactive-value="0"disabled/></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogDetails=false">取消</el-button></div></el-dialog></transition></div>
</template>
<script>import { succ, warn, err } from '@/utils/message'import { getInfo, getList, saveInfo, deleteInfo, statusInfo } from '@/api/param/mail'export default {name: 'ParamMailIndex', // 名空间// 初始化数据data() {return {list: [], // 初始化管理员列表pageSizes: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500],currentPage: 1, // 当前页数currentSize: 10, // 每页条数dataTotal: 0, // 总数据searchParams: {id: '',title: '',username:''},// 要提交数据resTemp: {id: 0, // 0 添加 >0 编辑title: '',username: '',smtp_address: '',smtp_port: 0,smtp_password: '',smtp_lifespan: 0,smtp_protocol: '',status: '1'},// 要验证数据formRules: {title: [{ required: true, trigger: 'blur', message: '邮件服务标题必须填写' },{ min: 2, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur' }],username: [{ required: true, trigger: 'blur', message: '发件人邮箱必须填写' },{ min: 8, max: 250, message: '长度在 8 到 250 个字符', trigger: 'blur' }],smtp_address: [{ required: true, trigger: 'blur', message: '邮箱服务地址必须填写' },{ min: 10, max: 250, message: '长度在 10 到 250 个字符', trigger: 'blur' }],smtp_port: [{ required: true, trigger: 'blur', message: '邮箱服务端口号必须填写' }],smtp_password: [{ required: true, trigger: 'blur', message: '邮箱服务授权码必须填写' },{ min: 10, max: 50, message: '长度在 10 到 50 个字符', trigger: 'blur' }],smtp_lifespan: [{ required: true, trigger: 'blur', message: '邮箱服务有效期必须填写' }],smtp_protocol: [{ required: true, trigger: 'blur', message: '邮箱服务协议必须填写' },{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }]},listLoading: true, // 显示list加载框dialogVisible: false, // 初始化弹窗是否显示dialogDetails: false}},// 初始化执行的created() {this.getList()// 获取管理员数据},// 所有的方法都需要放到这个里面methods: {// 搜索search() {this.getList(1)},// 管理员数据 --异步async getList(page = 0) {this.listLoading = trueconst params = {currentPage: page === 0 ? this.currentPage : page,currentSize: this.currentSize,...this.searchParams}await getList(params).then(res => {this.list = res.data.listthis.dataTotal = res.data.meat.total * 1})// 延时setTimeout(() => {this.listLoading = false}, 0.5 * 1000)},// 清除搜索功能clearSearch() {this.searchParams = {id: '',title: ''}this.getList()},// 重置表单数据 ---添加时候需要使用resetTemp() {this.resTemp = {id: 0, // 0 添加 >0 编辑title: '',username: '',smtp_address: '',smtp_port: 0,smtp_password: '',smtp_lifespan: 0,smtp_protocol: '',status: '1'}},// 添加方法handleAdd() {this.resetTemp()this.dialogVisible = truethis.$nextTick(() => {this.$refs['resForm'].clearValidate()})},// 编辑方法handleEdit(id) {getInfo({ id: id }).then(res => {const row = res.datathis.resTemp = Object.assign({}, row)this.resTemp.status = row.status + ''// 将数字强行转换成字符串this.dialogVisible = truethis.$nextTick(() => {this.$refs['resForm'].clearValidate()})})},// 详情handleDetails(id){getInfo({ id: id }).then(res => {const row = res.datathis.resTemp = Object.assign({}, row)this.resTemp.status = row.status + ''// 将数字强行转换成字符串this.dialogDetails = truethis.$nextTick(() => {this.$refs['resForm'].clearValidate()})})},// 新建保存数据async saveInfo() {this.$refs.resForm.validate(valid => {if (valid) {this.loading = truesaveInfo(this.resTemp).then(res => {this.loading = falsesucc(res.message)this.getList()this.dialogVisible = false})} else {return false}})},// 删除handleDelete(id) {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',center: true}).then(async() => {const ids = []if (id > 0) { // 单个删除ids.push(id)} else { // 批量删除const select = this.$refs.resTable.selectionif (select.length === 0) {warn('批量删除必须选择指定产品')return false}// 组合数据select.forEach(item => {ids.push(item.id)})}// 删除deleteInfo({ id: ids }).then(res => {this.getList()// 更新列表succ(res.message)// 提示结果})}).catch(err => {err(err.message)return false})},// 启禁用handleStatus(status){let statusText = status == 1 ? '启用' : '禁用';this.$confirm('此操作将永久'+ statusText +'该产品, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',center: true}).then(async() => {const ids = []const select = this.$refs.resTable.selectionif (select.length === 0) {warn('批量'+ statusText +'必须选择指定产品')return false}// 组合数据select.forEach(item => {ids.push(item.id)})// 删除statusInfo({ id: ids, status:status }).then(res => {this.getList()//更新列表succ(res.message)// 提示结果})}).catch(err => {err(err.message)return false})},// 每页条数切换handleSizeChange(val) {this.currentSize = valthis.getList()},// 页数切换handleCurrentChange(val) {this.currentPage = valthis.getList()}}}
</script>
<style lang="scss" scoped>.app-container {padding:10px;.roles-table {margin-top: 30px;}.permission-tree {margin-bottom: 30px;}}.el-image-viewer__close{color: #fff;}.roleId .el-select{width:100%;}
</style>

二、添加ajax请求

        在根目录下src文件夹下api文件夹下param文件夹下mail.js，代码如下

import request from '@/utils/request'
// 列表
export function getList(params) {return request({url: '/param/mail/get_list',method: 'get',params:params})
}
// 所有
export function getAll() {return request({url: '/param/mail/get_all',method: 'post'})
}
// 获取
export function getInfo(data) {return request({url: '/param/mail/get_info',method: 'post',data})
}
// 保存
export function saveInfo(data) {return request({url: '/param/mail/save_info',method: 'post',data})
}
// 删除
export function deleteInfo(data) {return request({url: '/param/mail/delete_info',method: 'post',data})
}
// 启禁用
export function statusInfo(data) {return request({url: '/param/mail/status_info',method: 'post',data})
}