<template>
<div class="menuManagePage H100">
<div class="head_box">
<h6>系统管理 / 菜单管理</h6>
<h4>菜单管理</h4>
</div>
<div class="content_box">
<div class="form_box h778px" >
<el-form :inline="true" :model="form" class="search-form" onsubmit="return false;">
<el-form-item label="">
<el-input size="mini" placeholder="请输入菜单名称" v-model="form.name" @keyup.enter.native="Search" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" class="btn_form_search" @click="Search">查询</el-button>
</el-form-item>
<el-form-item class="r-float">
<el-button size="mini" type="primary" class="btn_form_add" icon="el-icon-plus" @click="addPermis()">新 建</el-button>
<el-dropdown >
<el-button style="margin-left: 10px;" size="mini" class="btn_form_add">批量操作</el-button>
<el-dropdown-menu slot="dropdown" >
<el-dropdown-item @click.native="multipleDelete">批量删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-form-item>
</el-form>
<div class="scrool">
<el-table style="width:100%;" ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column show-overflow-tooltip label="菜单名称" prop="menuName" ></el-table-column>
<el-table-column show-overflow-tooltip label="地址" prop="menuUrl" ></el-table-column>
<el-table-column label="排序值" prop="sort"></el-table-column>
<el-table-column label="操作" header-align="center" align="center" >
<template slot-scope="scope" width="220">
<el-button-group>
<el-button title="编辑" size="mini" type="text" @click="openEdit(scope.row)">编辑 | </el-button>
<el-button title="删除" type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
</div>
<el-pagination small background
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.pageSize"
layout="prev, pager, next"
:total="page.total">
</el-pagination>
</div>
<!--新增弹框-->
<el-dialog title="新建" class="newPermis" :visible.sync="FormVisible1" :before-close="close1">
<div class="form_box">
<el-form :model="permisform" ref="permisform" :rules="rules" id="ruleo" label-position="left">
<el-form-item label="排序值：" prop="sort" :label-width="formLabelWidth">
<el-input size="small" v-model="permisform.sort" auto-complete="off" clearable placeholder="请输入排序值" ></el-input>
</el-form-item>
<el-form-item label="菜单名称：" prop="menuName" :label-width="formLabelWidth">
<el-input size="small" v-model="permisform.menuName" onkeyup="this.value=this.value.replace(/\s+/g,'')" auto-complete="off" clearable placeholder="请输入您的菜单名称" ></el-input>
</el-form-item>
<el-form-item label="地址：" prop="menuUrl" :label-width="formLabelWidth">
<el-input size="small" v-model="permisform.menuUrl" onkeyup="this.value=this.value.replace(/\s+/g,'')" auto-complete="off" clearable placeholder="请输入您的菜单地址" ></el-input>
</el-form-item>
<el-form-item label="父级菜单：" prop="parentId" :label-width="formLabelWidth">
<el-select size="small" v-model="permisform.parentId" value-key="name" clearable placeholder="请选择父级菜单" >
<el-option v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="r-float" size="mini" type="primary" @click="permisSave">确定</el-button>
<el-button class="r-float" size="mini" @click="close1">取 消</el-button>
</div>
</div>
</el-dialog>
<!--编辑弹框-->
<el-dialog title="编辑" :visible.sync="FormVisible" :before-close="close">
<div class="form_box">
<el-form :model="editform" ref="editform" :rules="rules" >
<el-form-item label="排序值：" prop="sort" :label-width="formLabelWidth">
<el-input size="small" v-model="editform.sort" auto-complete="off" clearable placeholder="请输入排序值" ></el-input>
</el-form-item>
<el-form-item label="菜单名称：" prop="menuName" :label-width="formLabelWidth" >
<el-input size="small" v-model="editform.menuName" auto-complete="off" clearable onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
</el-form-item>
<el-form-item label="菜单地址：" prop="menuUrl" :label-width="formLabelWidth">
<el-input size="small" v-model="editform.menuUrl" auto-complete="off" clearable onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button class="r-float" size="mini" type="primary" @click="submitForm('editform')">确定</el-button>
<el-button class="r-float" size="mini" @click="close">取 消</el-button>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
export default {
data() {
var checkIsNull = (rule, value, callback) => {
if(value) {
if(value.trim() == '') {
callback(new Error('不允许只输入空格'))
} else {
callback()
}
}
};
return {
page: {currentPage: 1,pageSize:10,total:0},
tableData: [],
FormVisible: false,
FormVisible1: false,
formLabelWidth: "100px",
form: {
name: '',
},
editform: {
menuName: '',
menuUrl: '',
parentId: '',
sort:'',
id:'',
},
permisform: {
menuName: '',
menuUrl: '',
parentId: '',
sort:'',
},
typeList: [],
rules: {
sort:[
{required: true, message: '请输入顺序值',trigger: 'change'},
{pattern: /^(\d{1,5})?$/, message: '排序值为低于5位数的纯数字'}
],
menuName: [
{required: true, message: '请输入菜单名称',trigger: 'change'},
{max: 20, message: '不能超过20个字符',trigger: 'change'},
{validator: checkIsNull, trigger: 'blur'}
],
menuUrl:[
{required: true, message: '请输入菜单地址',trigger: 'change'},
{validator: checkIsNull, trigger: 'blur'}
],
parentId: [
{required: true, message: '请输入父级菜单',trigger: 'change'},
],
},
value: '',
name: '',
}
},
computed: {
},
mounted() {
this.onSearch();
this.getPermis();
},
components: {
},
methods: {
// 渲染父级权限
getPermis() {
let vm = this;
vm.$https({
method: 'get',
url: 'menu/getRoleMenu?roleId='+sessionStorage.getItem('roleId'),
authType: this.backToken
}).then((res) => {
let data = res.data;
vm.typeList = data.map((e, i) => {
return {
id: e.id,
name: e.menuName.indexOf('-')==-1?e.menuName:e.menuName.split('-')[1],
}
})
}, (error) => {
console.log(error)
}
)
},
// 获得数据接口
getTableData(param) {
let vm = this;
vm.$https({
url : "menu/getMenuList",
method: 'get',
authType: this.backToken
},param).then((res)=>{
let data = res.data;
vm.page.pageSize = data.size;
vm.page.total = data.total;
vm.tableData = data.records;
}).catch(function(err){
console.log(err);
})
},
// 分页
handleCurrentChange(val) {
let _this = this;
_this.page.currentPage = val;
_this.onSearch();
},
onSearch() {
let _this = this;
let param = _this.getSearchQuery();
_this.getTableData(param)
},
Search(){
let _this = this;
_this.page.currentPage = 1;
let searchObj = {
"_index": 1,
"_size": _this.page.pageSize,
"name": _this.form.name,
};
this.getTableData(searchObj);
},
// // 获取当前查询参数
getSearchQuery() {
let _this = this;
let searchObj = {
"_index": _this.page.currentPage,
"_size": _this.page.pageSize
};
for (let key in _this.form) {
if (_this.form[key]) {
searchObj[key] = _this.form[key];
}
}
return searchObj;
},
addPermis(){
$('.el-dialog__title').html('新建');
this.FormVisible1 = true;
},
// 添加权限
permisSave() {
let _this = this;
_this.$refs.permisform.validate((valid) => {
if (valid) {
_this.$https({url: 'menu/add', method: 'post', authType: this.backToken
}, _this.$qs.stringify(_this.permisform))
.then((res) => {
if (res.data.status == 200 || res.data.status == 201) {
_this.$message({
type: 'success',
message: res.data.message
});
//跳回用户列表
_this.onSearch();
_this.FormVisible1 = false;
for (let key in _this.permisform) {
_this.permisform[key]=null;
}
_this.$refs['permisform'].resetFields();
} else {
_this.$message({
type: 'error',
message: res.data.message
});
}
}, (error) => {
_this.$message({
type: 'error',
message: error
});
}
)
}
});
},
// 编辑关闭
close() {
this.FormVisible=false;
this.$refs['editform'].resetFields();
},
// 新增关闭
close1() {
this.FormVisible1 = false;
for (let key in this.permisform) {
this.permisform[key]=null;
}
this.$refs['permisform'].resetFields();
},
// 编辑弹框
openEdit(row){
$('.el-dialog__title').html('编辑');
let _this=this;
//成功之后清除数据
for (let key in this.editform) {
_this.editform[key]=null;
}
_this.editform= Object.assign({}, row);
_this.FormVisible = true;
},
// 删除
handleDelete(row) {
let _this = this;
this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
_this.$https({
method: 'delete',
url: 'menu/delete?menuId='+ row.id,
authType: this.backToken
}).then((res) => {
this.$message({type: 'success', message: '删除成功!'});
_this.Search();
}, (error) => {
this.$message({type: 'fail', message: "删除失败!" + error.response.data});
}
)
}).catch(() => {
});
},
// 保存编辑信息
submitForm() {
let _this = this;
_this.$refs.editform.validate((valid) => {
if (valid) {
let searchObj = {}
for (let key in _this.editform) {
if (this.editform[key]) {
searchObj[key] = _this.editform[key];
}
}
let str = _this.editform.menuName;
let index = str.lastIndexOf("\-");
str = str.substring(index + 1, str.length);
searchObj.menuName = str;
_this.$https({
url: 'menu/edit',
method: 'put',
authType: this.backToken
}, _this.$qs.stringify(searchObj))
.then((res) => {
if (res.data.status == 200 || res.data.status == 201) {
_this.$message({
type: 'success',
message: res.data.message
});
_this.onSearch();
_this.FormVisible=false;
_this.$refs['editform'].resetFields();
} else {
_this.$message({
type: 'error',
message: res.data.message
});
}
}, (error) => {
_this.$message({
type: 'error',
message: error
});
}
)
}
});
},
// 批量操作
handleSelectionChange(selection){
let _this = this;
_this.selection = selection;
},
getMultipleSelect () {
let _this = this;
let arr = [];
let str = '';
if (_this.selection){
_this.selection.forEach(function (e) {
arr.push(e.id);
})
str = arr.join(',');
}else{
str = '';
}
return str;
},
// 批量删除
multipleDelete () {
let _this = this;
let str = _this.getMultipleSelect();
if (str) {
this.$confirm('此操作将删除选中菜单, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
_this.$https({
url:'menu/batchDel?menuIds='+str,
method:'DELETE',
authType: this.backToken
})
.then((res) => {
if(res.data.status == 201 || res.data.status == 200){
this.$message({
type: 'success',
message: '删除成功!'
});
}
//重新查询数据
_this.onSearch();
}, (error) => {
}
)
})
} else {
this.$message({
type: 'info',
message: '请至少选择一个选项！'
});
}
},
}
}
</script>
<style lang="less">
@import '../../style/common';
.menuManagePage{
.content_box{
.input_box{
width: 100%;
min-width: 815px;
margin-bottom: 30px;
.el-input{
max-width:272px;
height:32px;
background:rgba(255,255,255,1);
border-radius:4px;
.el-input__inner{
height:32px;
}
}
.btn_form_search,.btn_form_add{
height: 32px;
text-align: center;
padding: 0 15px;
}
}
.scrool {
width: 100%;
height: calc(100% - 100px);
overflow-x: hidden;
overflow-y: scroll;
.el-table {
.el-table__header-wrapper {
.el-table__header {
.has-gutter tr th {
background: rgba(250, 250, 250, 1);
}
}
}
.el-table__body-wrapper {
width: 100%;
table tbody tr td {
padding: 6px 0px;
}
}
}
}
/*!*编辑弹框*!*/
.el-dialog{
width: 600px;
background:rgba(255,255,255,1);
box-shadow:0px 4px 12px 0px rgba(0,0,0,0.2);
border-radius:4px;
.el-dialog__header{
padding: 15px;
border-bottom: 1px solid rgba(0,0,0,0.09);
}
.el-dialog__body{
padding: 0px!important;
border: 1px solid transparent;
.form_box{
padding-bottom: 40px;
.el-form {
margin-bottom: 20px;
.el-form-item{
margin: 10px 50px 20px;
.el-form-item__content{
width: 280px;
}
}
.el-input{
width: 100%;
}
}
.dialog-footer{
border-top: 1px solid rgba(0,0,0,0.09);
padding-top: 8px;
.el-button{
margin-right: 10px;
padding: 8px 16px;
}
}
}
}
}
}
}
</style>