<!-- 菜单管理 -->
|
<template>
|
<div class="main">
|
<div class="main_header">
|
<div class="header_item">
|
<!-- <el-button :size="size" icon="el-icon-search" v-if="showButton('search')" @click="searchMenusInfo(true)">查询</el-button> -->
|
<el-button class="search_btn" icon="el-icon-plus" v-if="showButton('insert')" @click="propParentLevelInsert()">添加</el-button>
|
</div>
|
</div>
|
<div class="main_content">
|
<el-table
|
row-key="menuId"
|
:data="menusList"
|
height="100%"
|
v-loading="loading"
|
:tree-props="{children: 'childrens', hasChildren: 'hasChildren'}">
|
<el-table-column prop="menuId" label="菜单ID" sortable align="center"></el-table-column>
|
<el-table-column prop="title" label="菜单名" align="center"></el-table-column>
|
<el-table-column prop="path" label="路由路径" align="center"></el-table-column>
|
<el-table-column label="操作" width="500" align="center">
|
<template #default="{ row }">
|
<el-button class="table_btn" size="mini" v-if="showButton('buttonConfig')" @click="buttonConfig(row)">按钮配置</el-button>
|
<el-button class="table_btn" size="mini" v-if="showButton('urlConfig')" @click="propConfigUrl(row)">url配置</el-button>
|
<el-button class="table_btn" size="mini" v-if="showButton('insert')" @click="propSublevelInsert(row)">添加</el-button>
|
<el-button class="table_btn" size="mini" v-if="showButton('update')" @click="propUpdate(row)">修改</el-button>
|
<el-button class="delete_btn" size="mini" v-if="showButton('delete')" @click="deleteMenusInfo(row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<el-dialog
|
class="prop_dialog"
|
:title="asyncTitle === 0 ? '菜单添加' : '菜单修改'"
|
:visible.sync="asyncMenus"
|
width="35%">
|
<el-form ref="form" class="rule_form" :rules="rules" :model="ruleForm" label-width="auto">
|
<!-- <el-form-item label="父级菜单：" prop="parentId" v-if="asyncTitle === 1">
|
<el-select v-model="ruleForm.parentId" clearable placeholder="请选择父级菜单">
|
<el-option
|
v-for="item in parentLevelList"
|
:key="item.menuId"
|
:label="item.menuName"
|
:value="item.menuId">
|
</el-option>
|
</el-select>
|
</el-form-item> -->
|
<el-form-item label="菜单标题：" prop="title">
|
<el-input v-model="ruleForm.title" :size="size" clearable placeholder="请输入菜单标题"></el-input>
|
</el-form-item>
|
<el-form-item label="路由路径：" prop="path">
|
<el-input v-model="ruleForm.path" :size="size" clearable placeholder="请输入路由路径"></el-input>
|
</el-form-item>
|
<el-form-item label="路由名：" prop="name">
|
<el-input v-model="ruleForm.name" :size="size" clearable placeholder="请输入路由名"></el-input>
|
</el-form-item>
|
<el-form-item label="重定向路由：" v-if="asyncTitle === 0">
|
<el-input v-model="ruleForm.redirect" :size="size" clearable placeholder="请输入重定向路由"></el-input>
|
</el-form-item>
|
<el-form-item label="组件路径：" prop="component">
|
<el-input v-model="ruleForm.component" :size="size" clearable placeholder="请输入组件路径"></el-input>
|
</el-form-item>
|
<el-form-item label="路由顺序：">
|
<el-input v-model="ruleForm.level" :size="size" clearable placeholder="请输入路由顺序"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="asyncMenus = false">取 消</el-button>
|
<el-button class="submit_btn" @click="asyncTitle === 0 ? submitInsert() : submitUpdate()"> 提 交</el-button>
|
</div>
|
</el-dialog>
|
<el-dialog
|
class="prop_dialog"
|
title="按钮配置"
|
:visible.sync="asyncButton"
|
width="35%">
|
<el-form ref="buttonForm" :model="buttonForm" :rules="buttonRules" class="rule_form" label-width="auto">
|
<el-form-item label="按钮信息：" prop="buttonIds">
|
<el-select v-model="buttonForm.buttonIds" :size="size" multiple clearable placeholder="请选择需要配置的按钮">
|
<el-option
|
v-for="item in buttonList"
|
:key="item.buttonId"
|
:label="item.buttonHtmlName"
|
:value="item.buttonId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="asyncButton = false">取 消</el-button>
|
<el-button class="submit_btn" @click="submitConfig()"> 提 交</el-button>
|
</div>
|
</el-dialog>
|
<!-- url配置 -->
|
<el-dialog
|
class="prop_dialog"
|
title="url配置"
|
:visible.sync="asyncUrl"
|
width="40%">
|
<el-form ref="urlForm" :model="urlForm" class="rule_form" label-width="auto">
|
<el-form-item label="配置url：">
|
<el-transfer
|
:titles="['未配置Url', '已配置Url']"
|
filterable
|
filter-placeholder="请输入url"
|
v-model="urlForm.urlIds"
|
:data="urlList"
|
style="min-width: 600px">
|
</el-transfer>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="asyncUrl = false">取 消</el-button>
|
<el-button class="submit_btn" @click="submitUrl()"> 提 交</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { buttonPinia } from '../../pinia/index';
|
import { throttle, changeSize } from '../../plugins/public'; // 导入节流、动态切换组件尺寸方法
|
export default {
|
data() {
|
return {
|
size: changeSize(),
|
pageNum: 1,
|
pageSize: 10,
|
total: 0,
|
loading: true,
|
menusList: [], // 菜单列表信息
|
asyncTitle: 0, // 弹出框标题 0: 添加菜单信息，1：修改菜单信息
|
asyncMenus: false, // 菜单弹出框变量
|
ruleForm: {}, // 菜单表单信息
|
asyncUrl: false, // url配置对话框
|
urlList: [], // url信息
|
urlForm: {},
|
rules: {
|
parentId: [{
|
required: true,
|
message:'请选择父级菜单',
|
trigger: 'change'
|
}],
|
title: [{
|
required: true,
|
message:'请输入菜单名称',
|
trigger: 'blur'
|
}],
|
path: [{
|
required: true,
|
message: '请输入路由路径',
|
trigger: 'blur'
|
}],
|
name: [{
|
required: true,
|
message: '请输入路由名',
|
trigger: 'blur'
|
}],
|
component: [{
|
required: true,
|
message: '请输入组件路径',
|
trigger: 'blur'
|
}]
|
}, // 表单验证规则
|
parentLevelList: [], // 父级菜单信息
|
asyncButton: false, // 按钮配置对话框
|
buttonForm: {
|
buttonIds: []
|
}, // 按钮配置表单
|
buttonList: [], // 全部按钮信息
|
buttonRules: {
|
buttonIds: [{
|
required: true,
|
message: '请选择需要配置的按钮信息',
|
trigger: 'change blur'
|
}]
|
},
|
buttonInfo: []
|
}
|
},
|
watch: {
|
asyncMenus(bol) {
|
if(!bol) {
|
this.ruleForm = {};
|
this.$refs.form.resetFields();
|
}
|
},
|
asyncButton(bol) {
|
if(!bol) {
|
this.$set(this.buttonForm, 'buttonIds', [])
|
this.$refs.buttonForm.resetFields();
|
}
|
}
|
},
|
mounted() {
|
const that = this;
|
// 根据窗口大小动态修改组件尺寸
|
window.onresize = () => {
|
that.size = changeSize();
|
}
|
that.searchMenusInfo(true);
|
that.getAllButtonInfo();
|
},
|
methods: {
|
// 获取全部按钮信息
|
async getAllButtonInfo() {
|
const { data } = await this.$api.System.getAllButtonInfo();
|
this.buttonList = data.list;
|
},
|
// 查询菜单列表信息
|
searchMenusInfo(bol) {
|
if(bol) {
|
this.pageNum = 1;
|
}
|
this.loading = true
|
this.$api.System.searchRouterMenusInfo({}).then(res => {
|
if(res.statusMsg === 'ok') {
|
this.menusList = res.data;
|
}
|
this.loading = false;
|
})
|
},
|
// 打开添加一级菜单信息
|
propParentLevelInsert() {
|
this.asyncTile = 0;
|
this.asyncMenus = true;
|
this.$set(this.ruleForm, 'parentId', 0);
|
},
|
// 打开添加下级菜单信息
|
propSublevelInsert(row) {
|
this.asyncTitle = 0;
|
this.asyncMenus = true;
|
this.$set(this.ruleForm, 'parentId', row.menuId);
|
},
|
// 打开修改菜单信息
|
propUpdate(row) {
|
this.asyncTitle = 1;
|
this.asyncMenus = true;
|
this.$set(this.ruleForm, 'menuId', row.menuId);
|
this.$set(this.ruleForm, 'title', row.title);
|
this.$set(this.ruleForm, 'icon', row.icon);
|
this.$set(this.ruleForm, 'path', row.path);
|
this.$set(this.ruleForm, 'name', row.name);
|
this.$set(this.ruleForm, 'parentId', row.parentId);
|
this.$set(this.ruleForm, 'component', row.component);
|
this.$set(this.ruleForm, 'level', row.level);
|
},
|
// 打开按钮配置信息
|
buttonConfig(row) {
|
this.$api.System.getMenusButtonInfo({
|
menuId: row.menuId
|
}).then((res) => {
|
let list = res.data.list.filter((item) => item.menuHas === 1);
|
this.$set(this.buttonForm, 'menuId', row.menuId);
|
this.$set(this.buttonForm, 'buttonIds', list.map((item) => item.buttonId));
|
})
|
this.asyncButton = true;
|
},
|
// 打开url配置信息
|
propConfigUrl(row) {
|
this.$set(this.urlForm, 'menuId', row.menuId);
|
this.$api.System.getMenusUrlInfo({
|
menuId: row.menuId
|
}).then(res => {
|
this.urlList = res.data.list.map(item => {
|
return {
|
key: item.urlId,
|
label: item.urlName
|
}
|
});
|
this.asyncUrl = true;
|
let list = res.data?.list.filter((item) => item.menuHas === 1)
|
this.$set(this.urlForm, 'urlIds', list.map((item) => item.urlId));
|
})
|
},
|
// 删除菜单信息
|
deleteMenusInfo(row) {
|
this.$confirm("该操作将删除该菜单，是否继续删除?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.$api.System.deleteRouterMenusInfo({menuId: row.menuId})
|
.then(res => {
|
if(res.statusMsg === 'ok') {
|
this.searchMenusInfo(true);
|
this.$message.success("删除成功！");
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
})
|
.catch(() => {
|
this.$message.warning("您已取消");
|
})
|
},
|
// 提交添加菜单信息
|
submitInsert: throttle(function() {
|
this.$refs.form.validate(valid => {
|
if(valid) {
|
let params = Object.assign({}, this.ruleForm);
|
this.$api.System.createRouterMenusInfo(params).then(res => {
|
if(res.statusMsg === 'ok') {
|
this.asyncMenus = false;
|
this.searchMenusInfo(true);
|
this.$message.success("添加成功！");
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 提交修改菜单信息
|
submitUpdate: throttle(function() {
|
this.$refs.form.validate(valid => {
|
if(valid) {
|
let params = Object.assign({}, this.ruleForm);
|
this.$api.System.updateRouterMenusInfo(params).then(res => {
|
if(res.statusMsg === 'ok') {
|
this.asyncMenus = false;
|
this.searchMenusInfo(true);
|
this.$message.success("修改成功！");
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 提交按钮配置信息
|
submitConfig: throttle(function() {
|
this.$refs.buttonForm.validate((valid) => {
|
if(valid) {
|
const params = Object.assign({}, this.buttonForm);
|
params.buttonIds = params.buttonIds.join(',');
|
this.$api.System.menusConfigButton(params).then((res) => {
|
if(res.statusMsg === 'ok') {
|
this.asyncButton = false;
|
this.$message.success('配置成功!');
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 提交url配置信息
|
submitUrl: throttle(function() {
|
this.$refs.urlForm.validate((valid) => {
|
if(valid) {
|
const params = Object.assign({}, this.urlForm);
|
params.urlIds = params.urlIds.join(',')
|
this.$api.System.menusConfigUrlInfo(params).then((res) => {
|
if(res.statusMsg === 'ok') {
|
this.asyncUrl = false;
|
this.$message.success('配置成功！');
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 判断按钮权限信息
|
showButton(str) {
|
const pinia = buttonPinia();
|
return pinia.$state.buttonInfo.includes(str);
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../style/layout-main.scss';
|
|
.rule_form {
|
overflow: auto;
|
}
|
</style>
|
