代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/element-lib/index.js"></script>
<link rel="stylesheet" href="js/element-lib/theme-chalk/index.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
<style>
.el-footer {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<el-container class="home-container">
<el-container class="box">
<el-aside :width="isCollapse ? '64px' : '200px'">
<div class="toggle-button" @click="toggleCollapse">
<i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
</div>
<!-- 导航栏 -->
<el-menu :default-active="menuActive" class="el-menu-vertical-demo" :collapse="isCollapse"
unique-opened>
<!-- 一级菜单 -->
<a :href="menu.permissionUrl" v-if="menu.children == null" v-for="menu in menuList"
:key="menu.id">
<el-menu-item :index="menu.id+''">
<i :class="menu.menuIcon"></i>
<span>{{menu.permissionName}}</span>
</el-menu-item>
</a>
<el-submenu v-if="menu.children != null" :index="menu.id+''" v-for="menu in menuList"
:key="menu.id">
<template slot="title">
<i :class="menu.menuIcon"></i>
<span slot="title">{{menu.permissionName}}</span>
</template>
<!-- 二级菜单 -->
<a :href="secondaryMenu.permissionUrl" v-for="secondaryMenu in menu.children"
:key="secondaryMenu.id">
<el-menu-item :index="secondaryMenu.id+''">
<i :class="secondaryMenu.menuIcon"></i>
<span>{{secondaryMenu.permissionName}}</span>
</el-menu-item>
</a>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header>
<div>
<img src="img/logo.png" class="log">
<span>紫罗兰后台管理系统</span>
</div>
<el-button type="danger" @click="logOff()">退出</el-button>
</el-header>
<el-main>
<div style="padding: 10px;width: 97%;height:90%;border: 1px solid rgb(223, 223, 239);">
<el-tree :data="allMenus" show-checkbox node-key="id" :props="defaultProps"
default-expand-all="true" :default-checked-keys="menuIds"
current-node-key="selectedMenu" ref="tree">
</el-tree>
</div>
</el-main>
<el-footer>
<el-button type="primary" @click="getCheckedKeys">保存</el-button>
<el-button @click="emptyMenu">清空</el-button>
</el-footer>
</el-container>
</el-container>
</el-container>
</div>
<script>
var data = decodeURI(window.location.search)
var value = data.substring(data.indexOf("=") + 1)
let vm = new Vue({
el: "#app",
data() {
return {
isCollapse: false,
menuList: [
],
allMenus: [
], defaultProps: {
children: 'children',
label: 'permissionName',
id: 'id'
}, menuIds: [
], selectedMenu: [
], menuActive: 0
}
}, created() {
this.getMenuList();
this.getAllMenu();
this.getMenuIdByAdministratorTypeId();
}, methods: {
logOff() {
localStorage.removeItem('nfLoginJwt');
location.href = "login.html"
},
toggleCollapse() {
vm.isCollapse = !vm.isCollapse
},
getMenuList() {
axios({
url: "/menu/get/menu/by/jwt",
method: "GET",
}).then(function (resp) {
if (resp.data.code == 200) {
vm.menuList = resp.data.data
}
})
},
getAllMenu() {
axios({
url: "/menu/get/all/menu",
method: "GET",
}).then(function (resp) {
if (resp.data.code == 200) {
vm.allMenus = resp.data.data
}
})
},
getMenuIdByAdministratorTypeId() {
axios({
url: "/menu/get/menu/id/by/administrator/type/id",
method: "POST",
params: {
id: value
}
}).then(function (resp) {
if (resp.data.code == 200) {
vm.menuIds = resp.data.data;
}
})
},
emptyMenu() {
this.$refs.tree.setCheckedKeys([]);
},
getCheckedKeys() {
var ids = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
axios({
url: "/administrator/type/update/menu",
method: "POST",
data: {
administratorId: value,
permissionIds: ids
}
}).then(function (resp) {
if (resp.data.code == 200) {
vm.menuIds = resp.data.data;
location.reload();
}
})
}
}
})
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。