一、添加视图
在根目录下src文件夹下views文件夹下param文件夹下sms文件夹下，新建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-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('ParamSmsIndexAdd')" 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('ParamSmsIndexTostatus')" class="filter-item" style="margin-left: 10px;" @click="handleStatus(1)" type="success">启用</el-button><el-button v-if="$store.getters.butts.includes('ParamSmsIndexTostatus')" class="filter-item" style="margin-left: 10px;" @click="handleStatus(0)" type="warning">禁用</el-button><el-button v-if="$store.getters.butts.includes('ParamSmsIndexDelete')" 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" width="80"><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="accessKeyId" width="220"><template slot-scope="{row}"><span>{{ row.access_key_id }}</span></template></el-table-column><el-table-column align="center" label="accessKeySecret" width="260"><template slot-scope="{row}"><span>{{ row.access_key_secret }}</span></template></el-table-column><el-table-column align="center" label="短信签名" width="140"><template slot-scope="{row}"><span>{{ row.sign_name }}</span></template></el-table-column><el-table-column align="center" label="状态" width="80"><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('ParamSmsIndexDetails')" size="mini" @click="handleDetails(row.id)" type="info">详情</el-button><el-button v-if="$store.getters.butts.includes('ParamSmsIndexEdit')" size="mini" @click="handleEdit(row.id)" type="primary">编辑</el-button><el-button v-if="$store.getters.butts.includes('ParamSmsIndexDelete')" 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="accessKeyId" prop="access_key_id"><el-input v-model="resTemp.access_key_id" placeholder="请填写accessKeyId" /></el-form-item><el-form-item label="accessKeySecret" prop="access_key_secret"><el-input v-model="resTemp.access_key_secret" placeholder="请填写accessKeySecret" /></el-form-item><el-form-item label="短信签名" prop="sign_name"><el-input v-model="resTemp.sign_name" 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('ParamSmsIndexSave')" 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="accessKeyId"><el-input v-model="resTemp.access_key_id" placeholder="请填写accessKeyId" disabled /></el-form-item><el-form-item label="accessKeySecret"><el-input v-model="resTemp.access_key_secret" placeholder="请填写accessKeySecret" disabled /></el-form-item><el-form-item label="短信签名"><el-input v-model="resTemp.sign_name" 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/sms'export default {name: 'ParamSmsIndex', // 名空间// 初始化数据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: ''},// 要提交数据resTemp: {id: 0, // 0 添加 >0 编辑title: '',access_key_id: '',access_key_secret: '',sign_name: '',status: '1'},// 要验证数据formRules: {title: [{ required: true, trigger: 'blur', message: '短信服务标题必须填写' },{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }],access_key_id: [{ required: true, trigger: 'blur', message: 'accessKeyId必须填写' },{ min: 8, max: 30, message: '长度在 8 到 30 个字符', trigger: 'blur' }],access_key_secret: [{ required: true, trigger: 'blur', message: 'accessKeySecret必须填写' },{ min: 8, max: 30, message: '长度在 8 到 30 个字符', trigger: 'blur' }],sign_name: [{ required: true, trigger: 'blur', message: '短信签名必须填写' },{ min: 2, max: 30, message: '长度在 2 到 30 个字符', 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: '',access_key_id: '',access_key_secret: '',sign_name: '',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文件夹下sms.js，代码如下
import request from '@/utils/request'
// 列表
export function getList(params) {return request({url: '/param/sms/get_list',method: 'get',params:params})
}
// 所有
export function getAll() {return request({url: '/param/sms/get_all',method: 'post'})
}
// 获取
export function getInfo(data) {return request({url: '/param/sms/get_info',method: 'post',data})
}
// 保存
export function saveInfo(data) {return request({url: '/param/sms/save_info',method: 'post',data})
}
// 删除
export function deleteInfo(data) {return request({url: '/param/sms/delete_info',method: 'post',data})
}
// 启禁用
export function statusInfo(data) {return request({url: '/param/sms/status_info',method: 'post',data})
}
![如何使用ST7789展现图片？[ESP--4]](https://i-blog.csdnimg.cn/direct/825daf4eb48c417fa72538b5c75abf83.png)
