一、添加视图
在根目录下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('ParamImageIndexAdd')" 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('ParamImageIndexTostatus')" class="filter-item" style="margin-left: 10px;" @click="handleStatus(1)" type="success">启用</el-button>
<el-button v-if="$store.getters.butts.includes('ParamImageIndexTostatus')" class="filter-item" style="margin-left: 10px;" @click="handleStatus(0)" type="warning">禁用</el-button>
<el-button v-if="$store.getters.butts.includes('ParamImageIndexDelete')" class="filter-item" @click="handleDelete" type="danger">删除</el-button>
</div>
<el-table
ref="resTable"
v-loading="listLoading"
:data="list"
row-key="id"
highlight-current-row
max-height="750"
default-expand-all
style="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-tag type="warning" v-if="row.is_use === 1">是</el-tag>
<el-tag type="success" v-if="row.is_use === 0">否</el-tag>
</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('ParamImageIndexDetails')" size="mini" @click="handleDetails(row.id)" type="info">详情</el-button>
<el-button v-if="$store.getters.butts.includes('ParamImageIndexEdit')" type="primary" size="mini" @click="handleEdit(row.id)">编辑</el-button>
<el-button v-if="$store.getters.butts.includes('ParamImageIndexDelete')" 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>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible=false">取消</el-button>
<el-button v-if="$store.getters.butts.includes('ParamImageIndexSave')" 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-switch
v-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/image'
export default {
name: 'ParamImageIndex', // 名空间
// 初始化数据
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: '',
status: '1'
},
// 要验证数据
formRules: {
title: [
{ 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 = true
const params = {
currentPage: page === 0 ? this.currentPage : page,
currentSize: this.currentSize,
...this.searchParams
}
await getList(params).then(res => {
this.list = res.data.list
this.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: '',
status: '1'
}
},
// 添加方法
handleAdd() {
this.resetTemp()
this.dialogVisible = true
this.$nextTick(() => {
this.$refs['resForm'].clearValidate()
})
},
// 编辑方法
handleEdit(id) {
getInfo({ id: id }).then(res => {
const row = res.data
this.resTemp = Object.assign({}, row)
this.resTemp.status = row.status + ''// 将数字强行转换成字符串
this.dialogVisible = true
this.$nextTick(() => {
this.$refs['resForm'].clearValidate()
})
})
},
// 详情
handleDetails(id){
getInfo({ id: id }).then(res => {
const row = res.data
this.resTemp = Object.assign({}, row)
this.resTemp.status = row.status + ''// 将数字强行转换成字符串
this.dialogDetails = true
this.$nextTick(() => {
this.$refs['resForm'].clearValidate()
})
})
},
// 新建保存数据
async saveInfo() {
this.$refs.resForm.validate(valid => {
if (valid) {
this.loading = true
saveInfo(this.resTemp).then(res => {
this.loading = false
succ(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.selection
if (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.selection
if (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 = val
this.getList()
},
// 页数切换
handleCurrentChange(val) {
this.currentPage = val
this.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文件夹下image.js，代码如下
import request from '@/utils/request'
// 列表
export function getList(params) {
return request({
url: '/param/image/get_list',
method: 'get',
params:params
})
}
// 所有
export function getAll() {
return request({
url: '/param/image/get_all',
method: 'post'
})
}
// 获取
export function getInfo(data) {
return request({
url: '/param/image/get_info',
method: 'post',
data
})
}
// 保存
export function saveInfo(data) {
return request({
url: '/param/image/save_info',
method: 'post',
data
})
}
// 删除
export function deleteInfo(data) {
return request({
url: '/param/image/delete_info',
method: 'post',
data
})
}
// 启禁用
export function statusInfo(data) {
return request({
url: '/param/image/status_info',
method: 'post',
data
})
}
