一、添加视图

        在根目录下src文件夹下views文件夹下param文件夹下grade文件夹下，新建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('ParamGradeIndexAdd')" 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('ParamGradeIndexTostatus')" class="filter-item" style="margin-left: 10px;" @click="handleStatus(1)" type="success">启用</el-button><el-button v-if="$store.getters.butts.includes('ParamGradeIndexTostatus')" class="filter-item" style="margin-left: 10px;" @click="handleStatus(0)" type="warning">禁用</el-button><el-button v-if="$store.getters.butts.includes('ParamGradeIndexDelete')" 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}"><el-link v-if="row.per_data == 'all'" type="danger" :underline="false">{{ row.per_data }}</el-link><el-link v-if="row.per_data == 'department'" type="warning" :underline="false">{{ row.per_data }}</el-link><el-link v-if="row.per_data == 'group'" type="success" :underline="false">{{ row.per_data }}</el-link><el-link v-if="row.per_data == 'person'" type="primary" :underline="false">{{ row.per_data }}</el-link></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="操作"><template slot-scope="{row}"><el-button v-if="$store.getters.butts.includes('ParamGradeIndexDetails')" size="mini" @click="handleDetails(row.id)" type="info">详情</el-button><el-button v-if="$store.getters.butts.includes('ParamGradeIndexEdit')" type="primary" size="mini" @click="handleEdit(row.id)">编辑</el-button><el-button v-if="$store.getters.butts.includes('ParamGradeIndexDelete')" 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="100px"><el-form-item label="级别名称" prop="title"><el-input v-model="resTemp.title" placeholder="请填写级别名称" /></el-form-item><el-form-item label="数据级别" prop="per_data"><el-input v-model="resTemp.per_data" placeholder="请填写数据级别" /></el-form-item><el-form-item label="状态" prop="status"><el-switchv-model="resTemp.status"active-value="1"inactive-value="0"/></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('ParamGradeIndexSave')" 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="100px"><el-form-item label="级别名称"><el-input v-model="resTemp.title" placeholder="请填写级别名称" disabled /></el-form-item><el-form-item label="数据级别"><el-input v-model="resTemp.per_data" 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/grade'export default {name: 'ParamGradeIndex', // 名空间// 初始化数据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: '',per_data: '',status: '1'},// 要验证数据formRules: {title: [{ required: true, trigger: 'blur', message: '级别名称必须填写' },{ min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }],per_data: [{ required: true, trigger: 'blur', message: '数据级别必须填写' },{ min: 1, max: 10, message: '长度在 1 到 10 个字符', 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: '',per_data: '',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文件夹下grade.js，代码如下

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

三、提前说明

        明天将开发管理员列表、图片格式配置功能。