gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:新增用户角色，角色管理，菜单管理

Browse Source
This commit is contained in:
wangwenrui
2020-12-07 14:12:37 +08:00
parent f07b6e889e
commit b786a2c67b
15 changed files with 1350 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
nezha-fronted/package-lock.json generated
View File

@@ -4,6 +4,36 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@babel/runtime": {
"version": "7.12.5",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
"integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
"requires": {
"regenerator-runtime": "^0.13.4"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.13.7",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
"integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
}
}
},
"@riophae/vue-treeselect": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/@riophae/vue-treeselect/-/vue-treeselect-0.4.0.tgz",
"integrity": "sha512-J4atYmBqXQmiPFK/0B5sXKjtnGc21mBJEiyKIDZwk0Q9XuynVFX6IJ4EpaLmUgL5Tve7HAS7wkiGGSti6Uaxcg==",
"requires": {
"@babel/runtime": "^7.3.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"easings-css": "^1.0.0",
"fuzzysearch": "^1.0.3",
"is-promise": "^2.1.0",
"lodash": "^4.0.0",
"material-colors": "^1.2.6",
"watch-size": "^2.0.0"
}
},
"@sindresorhus/is": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
@@ -3576,6 +3606,11 @@
"stream-shift": "^1.0.0"
}
},
"easings-css": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/easings-css/-/easings-css-1.0.0.tgz",
"integrity": "sha512-7Uq7NdazNfVtr0RNmPAys8it0zKCuaqxJStYKEl72D3j4gbvXhhaM7iWNbqhA4C94ygCye6VuyhzBRQC4szeBg=="
},
"ecc-jsbn": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -5005,6 +5040,11 @@
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
},
"fuzzysearch": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/fuzzysearch/-/fuzzysearch-1.0.3.tgz",
"integrity": "sha1-3/yA9tawQiPyImqnndGUIxCW0Ag="
},
"gauge": {
"version": "2.7.4",
"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
@@ -5942,6 +5982,11 @@
"isobject": "^3.0.1"
}
},
"is-promise": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
"integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
},
"is-regex": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
@@ -6371,6 +6416,11 @@
"object-visit": "^1.0.0"
}
},
"material-colors": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
"integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
},
"math-expression-evaluator": {
"version": "1.2.17",
"resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -12354,6 +12404,11 @@
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
"integrity": "sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ=="
},
"watch-size": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/watch-size/-/watch-size-2.0.0.tgz",
"integrity": "sha512-M92R89dNoTPWyCD+HuUEDdhaDnh9jxPGOwlDc0u51jAgmjUvzqaEMynXSr3BaWs+QdHYk4KzibPy1TFtjLmOZQ=="
},
"watchpack": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

1
nezha-fronted/package.json
View File

@@ -10,6 +10,7 @@
"build": "node build/build.js"
},
"dependencies": {
"@riophae/vue-treeselect": "^0.4.0",
"axios": "^0.19.0",
"cytoscape": "^3.15.2",
"echarts": "^4.7.0",

14
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -1053,7 +1053,7 @@ li{
}
/*此处自定义弹框尺寸，不同功能可能需要的尺寸不一样，需自行添加*/
.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-cabinet,
.right-box-menu ,.right-box-role ,.right-box-account, .right-box-prom, .right-box-alert-config, .right-box-project, .right-box-module, .right-box-cabinet,
.right-box-edit-endpoint, .right-box-panel, .right-box-dc, .right-box-model, .right-box-mib, .right-box-asset, .right-box-add-chart {
width: 850px;
}
@@ -2303,3 +2303,15 @@ li{
margin-right: 4px;
}
}
.el-radio-group .el-radio__inner:hover{
border-color: #ee9d3f !important;
}
.el-radio-group .is-checked {
.el-radio__inner{
background-color: #ee9d3f !important;
border-color: #ee9d3f !important;
}
.el-radio__label{
color: #ee9d3f !important;;
}
}

3
nezha-fronted/src/components/common/header.vue
View File

@@ -124,6 +124,9 @@
<el-menu-item index="5-0">
<div @click="jumpTo('/account')" :class="{'menu-item-active' :(route == '/account' )}">{{$t('config.account.account')}}</div>
</el-menu-item>
<el-menu-item index="5-9">
<div @click="jumpTo('/roles')" :class="{'menu-item-active' :(route == '/roles' )}">{{$t('config.roles.roles')}}</div>
</el-menu-item>
<el-menu-item index="5-1">
<div @click="jumpTo('/promServer')" :class="{'menu-item-active' :(route == '/promServer' )}">{{$t('config.promServer.promServerList')}}</div>
</el-menu-item>

13
nezha-fronted/src/components/common/home.vue
View File

@@ -4,7 +4,8 @@
<!--<div class="content-box" >
<router-view/>
</div>-->
<left-menu></left-menu>
<left-menu ></left-menu>
<menus v-if="isMenuPage"></menus>
<web-ssh ref="webSsh" ></web-ssh>
</div>
@@ -14,12 +15,20 @@
import Header from "./header";
import webSSH from "../cli/webSSH";
import leftMenu from "./leftMenu";
import menus from "../page/config/menus";
export default {
name: "home",
components: {
Header,
'web-ssh': webSSH,
'left-menu': leftMenu
'left-menu': leftMenu,
menus
},
computed:{
isMenuPage:function(){
console.log(this.$route.path )
return this.$route.path == '/menu'
}
}
}
</script>

1
nezha-fronted/src/components/common/js/constants.js
View File

@@ -5,6 +5,7 @@ export const staticMenus = {
title: i18n.t('overall.config'),
menu: [
{route: '/account', name: i18n.t('config.account.account')},
{route: '/roles', name: i18n.t('config.roles.roles')},
{route: '/promServer', name: i18n.t('config.promServer.promServerList')},
{route: '/dc', name: i18n.t('config.dc.dc')},
{route: '/model', name: i18n.t('config.model.model')},

32
nezha-fronted/src/components/common/language/cn.js
View File

@@ -352,7 +352,7 @@ const cn = {
total: "总计",
up: "up",
down: "down",
prometheus: "prometheus"
prometheus: "prometheus",
}
}
},
@@ -556,6 +556,7 @@ const cn = {
account: {
accountList: "用户列表",
account: "用户",
roles:"角色",
language: "语言",
receiver: "接收人",
createTime: "创建时间",
@@ -577,6 +578,35 @@ const cn = {
reinputPwd: "请再次输入密码",
notification: "通知"
},
roles:{
roles:"角色",
name:"名称",
remark:"备注",
option: '操作',//"操作"
permission:"权限",
menu:"菜单",
createRole:"新增角色",
editRole:"编辑角色",
},
menus:{
menus:'菜单',
name:"名称",
remark:"备注",
option: '操作',//"操作"
code:'Code',
i18n:'I18n',
type:'类型',
route:'路由',
perms:'权限',
button:"按钮",
menu:"菜单",
parent:"上级菜单",
mainMenu:"主菜单",
createMenu:"新增菜单",
editMenu:"编辑菜单",
orderNum:"排序",
},
promServer: {
promServerList: "Prometheus服务",
promId: "Prometheus服务ID",

29
nezha-fronted/src/components/common/language/en.js
View File

@@ -559,6 +559,7 @@ const en = {
accountList: 'Account list',//"用户列表"
//列表表头
account: 'Account',//"用户"
roles:"Roles",
language: 'Language',//"语言"
receiver: 'Receiver',//"用户组"
createTime: 'Create time',//"创建时间"
@@ -581,6 +582,34 @@ const en = {
reinputPwd:'Enter password again',
notification: 'Notification'
},
roles:{
roles:"Roles",
name:"Name",
remark:"Remark",
option: 'Operation',//"操作"
permission:"Permission",
menu:"Menu",
createRole:"Create role",
editRole:"Edit role"
},
menus:{
menus:'Menus',
name:"Name",
remark:"Remark",
option: 'Operation',//"操作",
code:'Code',
i18n:'I18n',
type:'Type',
route:'Route',
perms:'Permission',
button:"Button",
menu:"Menu",
parent:"Previous menu",
mainMenu:'Primary menu',
createMenu:"Create menu",
editMenu:"Edit menu",
orderNum:"Order",
},
promServer: {
promServerList: 'Prometheus server',//"Prometheus Server"
//侧滑框

32
nezha-fronted/src/components/common/rightBox/accountBox.vue
View File

@@ -38,6 +38,14 @@
inactive-value="0">
</el-switch>
</el-form-item>
<!--roles-->
<el-form-item :label="$t('config.account.roles')">
<el-select v-model="editUser.roleIds" multiple size="small" clearable collapse-tags placeholder="" popper-class="config-dropdown" @change="()=>{this.$forceUpdate()}">
<template v-for="role in roles">
<el-option :value="role.id" :label="role.i18n?$t(role.i18n):role.name"></el-option>
</template>
</el-select>
</el-form-item>
<el-form-item :label="$t('config.account.createTime')" v-if="editUser.userId">
<div class="right-box-form-content-txt">{{editUser.createTime}}</div>
</el-form-item>
@@ -109,7 +117,8 @@
},
editUser: {},
scripts: [],
selectableScripts: []
selectableScripts: [],
roles:[],
}
},
methods: {
@@ -171,6 +180,7 @@
this.scripts = response.data.list;
this.getSelectableScripts();
});
this.getRoles();
/*this.scripts = [
{id: 1, name: "DOLBY"},
{id: 2, name: "IMAX"},
@@ -202,7 +212,16 @@
});
}
},
getRoles:function(){
this.roles = [];
this.$get("sys/role").then(response=>{
if (response.code == 200){
this.roles = response.data.list;
}else{
this.$message.error("load roles faild")
}
})
},
addNotification() {
let scripts = this.selectableScripts.find(item => {
return item.disabled === false;
@@ -229,6 +248,8 @@
deep: true,
handler(n) {
this.editUser = JSON.parse(JSON.stringify(n));
this.editUser.roleIds=n.roles&&n.roles.map(t=>t.id)
console.log(this.editUser)
}
},
"editUser.notifications": {
@@ -237,6 +258,13 @@
handler(n) {
this.getSelectableScripts();
}
},
editUser:{
deep:true,
immediate:true,
handler(n,o){
console.log('editUser',n)
}
}
},
}

266
nezha-fronted/src/components/common/rightBox/menuBox.vue Normal file
View File

@@ -0,0 +1,266 @@
<template>
<div class="right-box right-box-menu" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns right-box-form-delete">
<button type="button" v-if="editMenu.id" @click="del"
class="nz-btn nz-btn-size-normal nz-btn-size-alien"
id="menus-edit-del">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{editMenu.id ? ($t("config.menus.editMenu") + " ID：" + editMenu.id) : $t("config.menus.createMenu")}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" :model="editMenu" :rules="rules" size="small" ref="menuForm" label-position="right" label-width="130px">
<el-form-item :label="$t('config.menus.parent')" prop="parentId">
<tree-select v-model="editMenu.parentId" :multiple="false" :options="menus" label="id" noChildrenText="" noOptionsText="" placeholder=""></tree-select>
</el-form-item>
<el-form-item :label="$t('config.menus.type')" prop="type">
<el-radio-group v-model="editMenu.type">
<el-radio :label="1">{{$t('config.menus.menu')}}</el-radio>
<el-radio :label="2">{{$t('config.menus.button')}}</el-radio>
</el-radio-group>
</el-form-item>
<!--name-->
<el-form-item :label="$t('config.menus.name')" prop="name">
<el-input type="text" placeholder="" v-model="editMenu.name" ></el-input>
</el-form-item>
<el-form-item :label="$t('config.menus.code')" prop="code">
<el-input type="text" placeholder="" v-model="editMenu.code" ></el-input>
</el-form-item>
<el-form-item :label="$t('config.menus.i18n')" prop="i18n">
<el-input type="text" placeholder="" v-model="editMenu.i18n" ></el-input>
</el-form-item>
<el-form-item :label="$t('config.menus.route')" prop="route">
<el-input type="text" placeholder="" v-model="editMenu.route" ></el-input>
</el-form-item>
<!--<el-form-item :label="$t('config.menus.perms')" prop="perms">
<el-input type="text" placeholder="" v-model="editMenu.perms" ></el-input>
</el-form-item>-->
<el-form-item :label="$t('config.menus.orderNum')" prop="orderNum">
<el-input-number v-model="editMenu.orderNum" controls-position="right" :min="1" :max="1000" :precision="0" style="width: 100%;" ></el-input-number>
</el-form-item>
<div class="right-box-sub-title">{{$t('config.menus.perms')}}
<button @click="addPermission" id="add-permission" type="button" class="float-right" >
<span><i class="nz-icon nz-icon-create-square"></i></span>
</button>
</div>
<div class="right-box-line"></div>
<el-form-item v-for="(permission,index) in editMenu.permissions" :key="index" :label="index+1+''" >
<el-input v-model="editMenu.permissions[index].value" type="text" placeholder="" style="width: calc(100% - 37px);"></el-input>
<span @click="removePermission(index)" style="padding-left: 5px;"><i class="nz-icon nz-icon-shanchu1"></i></span>
</el-form-item>
</el-form>
</el-scrollbar>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="menus-esc"
class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click="save" id="menus-save"
class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
name: "menuBox",
components:{
'tree-select':Treeselect,
},
props: {
menu: Object
},
computed: {
isCurrentUser() {
return function(username) {
return localStorage.getItem('nz-username') == username;
}
},
addDisabled() {
let enabled = this.selectableScripts.filter(item => {
return !item.disabled
});
return enabled.length === 0;
}
},
data() {
return {
rules: { //表单校验规则
name: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
type: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
code: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
i18n: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
perms: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
orderNum: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
},
editMenu: {},
menus:[],
}
},
methods: {
/*关闭弹框*/
esc(refresh) {
this.$emit("close", refresh);
},
clickOutside() {
this.esc(false);
},
/*保存*/
save() {
this.$refs.menuForm.validate(valid => {
if (valid) {
this.editMenu.perms = this.editMenu.permissions&&this.editMenu.permissions.length>0?this.editMenu.permissions.map(t=>t.value).join(','):'';
delete this.editMenu.permissions;
if (this.editMenu.id) {
this.$put('sys/menu', this.editMenu).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc(true);
} else {
this.$message.error(response.msg);
}
});
} else {
this.$post('sys/menu', this.editMenu).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc(true);
} else {
this.$message.error(response.msg);
}
});
}
} else {
return false;
}
})
},
/*删除*/
del() {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("sys/menu/?ids=" + this.editMenu.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.esc(true);
} else {
this.$message.error(response.msg);
}
});
});
},
addPermission:function(){
if(this.editMenu.permissions){
this.editMenu.permissions.push({value:''})
} else{
this.$set(this.editMenu,'permissions',[{value:''}])
}
},
removePermission:function(index){
this.editMenu.permissions.splice(index,1)
},
getMenus:function(){
this.menus = [];
this.$get("sys/menu").then(response=>{
if (response.code == 200){
this.menus = response.data.list;
function replaceFunc(data){
data.forEach(t=>{
t.label = t.name;
if(t.children&&t.children instanceof Array&&t.children.length>0){
replaceFunc(t.children)
}else{
delete t.children
}
})
}
replaceFunc(this.menus)
this.menus = [{
id:0,
label:this.$t('config.menus.mainMenu'),
children:JSON.parse(JSON.stringify(this.menus))
}]
}else{
this.$message.error("load menu faild")
}
})
},
},
mounted() {
this.getMenus();
},
watch: {
//将prop里的user转为组件内部对象
menu: {
immediate: true,
deep: true,
handler(n) {
this.editMenu = JSON.parse(JSON.stringify(n));
if(this.editMenu.perms&&this.editMenu.perms != ''){
this.$set(this.editMenu,'permissions',this.editMenu.perms.split(',').map(t=>{return {value:t};}))
}
console.log('editMenu',this.editMenu)
}
},
},
}
</script>
<style lang="scss">
.right-box-menu .el-input-number .el-input__inner{
text-align: left !important;
}
.right-box-menu {
.right-box-sub-title {
#add-permission {
border: none;
outline: none;
cursor: pointer;
i {
font-size: 17px;
background-color: #f6f6f6;
}
}
}
}
</style>
<style scoped>
.form-item-title{
position: absolute;
left: -120px;
}
</style>

219
nezha-fronted/src/components/common/rightBox/roleBox.vue Normal file
View File

@@ -0,0 +1,219 @@
<template>
<div class="right-box right-box-role" v-clickoutside="clickOutside">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns right-box-form-delete">
<button type="button" v-if="editRole.id" @click="del"
class="nz-btn nz-btn-size-normal nz-btn-size-alien"
id="roles-edit-del">
<span class="right-box-top-btn-icon"><i class="nz-icon nz-icon-delete"></i></span>
<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{editRole.id ? ($t("config.roles.editRole") + " ID：" + editRole.id) : $t("config.roles.createRole")}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form right-box-form-left" :model="editRole" :rules="rules" ref="roleForm" label-position="right" label-width="120px">
<!--name-->
<el-form-item :label="$t('config.roles.name')" prop="name">
<el-input type="text" placeholder=""
v-model="editRole.name" maxlength="64" show-word-limit size="small"></el-input>
</el-form-item>
<el-form-item :label="$t('config.roles.remark')">
<el-input size='mini' v-model="editRole.remark" type="textarea" :rows="2"/>
</el-form-item>
<el-form-item :label="$t('config.roles.permission')">
<!--<div class="tree-option">
<button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" style="margin-left: 0px;" @click="expandAllOrNone" :class="{'btn-active':expandAllFlag}">展开/收缩</button>
<button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="nz-icon nz-icon-delete"></i></span></button>
</div>-->
<el-tree :data="menus" node-key="id" show-checkbox :default-expand-all="expandAllFlag" :props="{label:labelFormatter}" ref="menuTree" @check-change="selectChange" class="tree-border"></el-tree>
</el-form-item>
</el-form>
</el-scrollbar>
<!-- end--表单-->
<!--底部按钮-->
<div class="right-box-bottom-btns">
<button @click="esc" id="roles-esc"
class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
<span>{{$t('overall.cancel')}}</span>
</button>
<button @click="save" id="roles-save"
class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</template>
<script>
export default {
name: "roleBox",
props: {
role: Object
},
computed: {
},
data() {
return {
rules: { //表单校验规则
name: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
},
editRole: {},
menus:[],
selectAllFlag:false,
expandAllFlag:true,
}
},
methods: {
/*关闭弹框*/
esc(refresh) {
this.$emit("close", refresh);
},
clickOutside() {
this.esc(false);
},
/*保存*/
save() {
this.$refs.roleForm.validate(valid => {
if (valid) {
if (this.editRole.id) {
this.$put('sys/role', this.editRole).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc(true);
} else {
this.$message.error(response.msg);
}
});
} else {
this.$post('sys/role', this.editRole).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.esc(true);
} else {
this.$message.error(response.msg);
}
});
}
} else {
return false;
}
})
},
/*删除*/
del() {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("sys/role/?ids=" + this.editRole.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.esc(true);
} else {
this.$message.error(response.msg);
}
});
});
},
getMenus:function(){
this.menus = [];
if(this.editRole.id){
this.$get("sys/role/menu/"+this.editRole.id).then(response=>{
if(response.code == 200){
this.menus = response.data.menus;
this.editRole.menuIds = response.data.selectedIds;
if(this.$refs.menuTree){
this.$refs.menuTree.setCheckedKeys(this.editRole.menuIds,true);
}
}else{
this.$message.error("load menu faild")
}
})
}else{
this.$get("sys/menu").then(response=>{
if (response.code == 200){
this.menus = response.data.list;
}else{
this.$message.error("load menu faild")
}
})
}
},
labelFormatter:function(data,node){
return data&&data.i18n?this.$t(data.i18n):data.name;
},
selectChange:function(data,isCheck,childIsCheck){
if(this.$refs.menuTree){
this.editRole.menuIds=this.$refs.menuTree.getCheckedKeys(false);
}
},
selectAllOrNone:function(){
if(this.$refs.menuTree){
if(!this.selectAllFlag){
this.$refs.menuTree.setCheckedNodes(this.menus);
}else{
this.$refs.menuTree.setCheckedNodes([]);
}
this.selectAllFlag = !this.selectAllFlag;
}
},
expandAllOrNone:function(){
this.expandAllFlag = !this.expandAllFlag;
let $self=this;
if(this.$refs.menuTree){
this.menus.forEach(t=>{
$self.$refs.menuTree.store.nodesMap[t.id].expanded = $self.expandAllFlag;
})
}
}
},
mounted() {
this.getMenus();
},
watch: {
//将prop里的user转为组件内部对象
role: {
immediate: true,
deep: true,
handler(n) {
this.editRole = JSON.parse(JSON.stringify(n));
}
},
},
}
</script>
<style lang="scss">
.right-box-role .tree-border{
margin-top: 5px;
border: 1px solid #e5e6e7;
background: #fff none;
border-radius: 4px;
/*margin-top: 40px;*/
}
.right-box-role .tree-option{
float: right;
}
.right-box-role .option-btn{
margin: 6px 0 0 7px;
}
.right-box-role .btn-active{
color: #ee9d3f;
font-weight: bold;
border-color: #ee9d3f !important;
}
</style>
<style scoped>
.form-item-title{
position: absolute;
left: -120px;
}
</style>

28
nezha-fronted/src/components/page/config/account.vue
View File

@@ -2,6 +2,19 @@
.account {
height: 100%;
}
.account .account-role-item{
background-color: #409eff;
border: 1px solid #409eff;
height: 20px;
font-size: 12px;
line-height: 20px;
border-radius: 4px;
display: inline-block;
box-sizing: content-box;
padding:3px;
margin-right: 3px;
color: white;
}
</style>
<template>
<div class="account">
@@ -74,6 +87,16 @@
&nbsp;
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'account-del-'+scope.row.id"><i class="nz-icon nz-icon-delete"></i></span>
</div>
<template v-if="item.prop == 'roles'">
<template v-if="scope.row[item.prop]">
<template v-for="role in scope.row[item.prop]">
<div class="account-role-item" v-if="role"><span>{{role.i18n?$t(role.i18n):role.name}}</span></div>
</template>
</template>
<template v-else>
<span>-</span>
</template>
</template>
<span v-else-if="item.prop == 'lang'">
{{scope.row[item.prop] == 'en' ? 'English' : ''}}
{{scope.row[item.prop] == 'zh' ? '中文' : ''}}
@@ -171,6 +194,7 @@
status: '1',
createTime: '',
receiver: [],
roles:[],
lang: '',
notifications: []
},
@@ -189,6 +213,10 @@
label: this.$t("config.account.account"),
prop: 'username',
show: true,
}, {
label: this.$t("config.account.roles"),
prop: 'roles',
show: true,
}, {
label: 'E-mail',
prop: 'email',

344
nezha-fronted/src/components/page/config/menus.vue Normal file
View File

@@ -0,0 +1,344 @@
<style scoped>
.menus {
position: relative;
height: calc(100% - 50px) !important;
}
</style>
<template>
<div class="menus">
<!-- 主页面 -->
<div class="main-list" >
<!-- 顶部工具栏 -->
<div class="main-modal"></div>
<div class="top-tools" >
<div class="top-tool-main-right" >
<div class="top-tool-search">
<search-input ref="searchInput" :searchMsg="searchMsg" @search="search" ></search-input>
</div>
<button type="button" @click="add" :title="$t('overall.createMenus')"
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="menus-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<delete-button :delete-objs="batchDeleteObjs" api="sys/menu" @after="getTableData" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}"></delete-button>
</div>
<!-- 顶部分页组件，当打开底部上滑框时出现 -->
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table
class="nz-table"
:data="tableData"
row-key="id"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
border
ref="menusTable"
:height="mainTableHeight"
v-loading="tools.loading"
v-scrollBar:el-table="'large'"
style="width: 100%;"
@sort-change="tableDataSort"
@selection-change="(selection)=>{this.batchDeleteObjs=selection}"
>
<el-table-column
:resizable="false"
type="selection"
width="40"
align="center">
</el-table-column>
<el-table-column
:resizable="true"
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:prop="item.prop"
:sort-orders="['ascending', 'descending']"
>
<template slot-scope="scope" slot="header">
<span v-if="item.type == 'tag'" class="tag-header" :title="item.label"><span class="tag-value">{{item.label}}</span><span style="color:orange;">&nbsp;[Notification]</span></span>
<span v-else><span>{{item.label}}</span></span>
</template>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'menus-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit" :class="{'gray-filter':scope.row.buildIn == 1}"></i></span>
&nbsp;
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'menus-del-'+scope.row.id"><i class="nz-icon nz-icon-delete" :class="{'gray-filter':scope.row.buildIn == 1}"></i></span>
</div>
<template v-if="item.prop == 'name'">
<template v-if="scope.row.i18n">
<span>{{$t(scope.row.i18n)}}</span>
</template>
<template v-else-if="scope.row.name">
<span>{{scope.row.name}}</span>
</template>
<template v-else>
<span>-</span>
</template>
</template>
<template v-else-if="item.prop == 'type'">
<span>{{scope.row[item.prop] == 2?$t('config.menus.button'):$t('config.menus.menu')}}</span>
</template>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column width="28" fixed="right">
<template slot="header" slot-scope="scope" :resizable="false">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
</el-table-column>
</el-table>
<button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn " @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</div>
<transition name="right-box">
<menu-box v-if="rightBox.show" :menu="menu" @close="closeRightBox"></menu-box>
</transition>
</div>
</template>
<script>
import deleteButton from "../../common/deleteButton";
import menuBox from '../../common/rightBox/menuBox';
export default {
name: "menus",
components: {
'menu-box': menuBox,
'delete-button':deleteButton,
},
data() {
return {
//侧滑
rightBox: {
show: false,
},
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showTopBtn: false, //显示To top按钮
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
mainTableHeight: this.$tableHeight.normal, //主列表table高度
batchDeleteObjs:[],
menu: {},
tableId: 'menusTable', //需要分页的table的id，用于记录每页数量
blankMenu: { //空白对象
"name": "",
"code": "",
"i18n": "",
"parentId": 0,
"type": 1,
"route": "",
"orderNum": 1,
"perms": "",
},
pageObj: { //分页对象
pageNo: 1,
pageSize: 50,
total: 0
},
tableTitle: [ //原table列
{
label: 'ID',
prop: 'id',
show: true,
width: 80
}, {
label: this.$t("config.menus.name"),
prop: 'name',
show: true,
}, {
label: this.$t("config.menus.code"),
prop: 'code',
show: true,
}, {
label: this.$t("config.menus.i18n"),
prop: 'i18n',
show: true,
},{
label: this.$t("config.menus.type"),
prop: 'type',
show: true,
},{
label: this.$t("config.menus.route"),
prop: 'route',
show: true,
},{
label: this.$t("config.menus.perms"),
prop: 'perms',
show: true,
},{
label: this.$t("config.menus.orderNum"),
prop: 'orderNum',
show: true,
},{
label: this.$t('config.menus.option'),
prop: 'option',
show: true,
width: 120,
fixed: "right"
}
],
tableData: [],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
id: 10,
name: "ID",
type: 'input',
label: "id",
disabled: false
}],
},
searchLabel: {}, //搜索参数
}
},
methods: {
closeRightBox(refresh) {
this.rightBox.show = false;
if (refresh) {
this.getTableData();
}
},
edit(u) {
if(u.buildIn == 1){
return ;
}
this.menu = JSON.parse(JSON.stringify(u));
this.rightBox.show = true;
},
del(u) {
if(u.buildIn == 1){
return ;
}
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("sys/menu?ids=" + u.id).then(response => {
if (response.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getTableData();
} else {
this.$message.error(response.msg);
}
})
});
},
getTableData() {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.tools.loading = true;
this.$get('sys/menu', this.searchLabel).then(response => {
this.tools.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total
this.tools.loading = false;
}
})
},
add() {
this.menu = this.newMenu();
this.rightBox.show = true;
},
esc() {
this.rightBox.show = false;
},
newMenu() {
return JSON.parse(JSON.stringify(this.blankMenu));
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getTableData();
},
pageSize(val) {
this.pageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getTableData();
},
search(searchObj) {
this.searchLabel = {};
this.pageObj.pageNo = 1;
for (let item in searchObj) {
if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]);
}
}
if(this.$refs.menusTable){
this.$refs.menusTable.bodyWrapper.scrollTop = 0;
}
this.getTableData();
},
// 数据排序
tableDataSort(item){
let orderBy = '';
if(item.order === 'ascending') {
orderBy = item.prop;
}
if(item.order === 'descending') {
orderBy = '-' + item.prop;
}
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 50) {
self.tools.showTopBtn = true;
self.tools.tableHover = true;
} else {
self.tools.showTopBtn = false;
self.tools.tableHover = true;
}
},
},
computed: {
},
watch: {
},
created(){
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) {
this.pageObj.pageSize = pageSize
}
},
mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.getTableData();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.menusTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
}
});
},
beforeDestroy(){
let el = this.$refs.menusTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
el._ps_.destroy();
}
}
}
</script>

311
nezha-fronted/src/components/page/config/roles.vue Normal file
View File

@@ -0,0 +1,311 @@
<style scoped>
.roles {
height: 100%;
}
</style>
<template>
<div class="roles">
<!-- 主页面 -->
<div class="main-list" >
<!-- 顶部工具栏 -->
<div class="main-modal"></div>
<div class="top-tools" >
<div class="top-tool-main-right" >
<div class="top-tool-search">
<search-input ref="searchInput" :searchMsg="searchMsg" @search="search" ></search-input>
</div>
<button type="button" @click="add" :title="$t('overall.createRoles')"
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="roles-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<delete-button :delete-objs="batchDeleteObjs" api="sys/role" @after="getTableData" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}"></delete-button>
</div>
<!-- 顶部分页组件，当打开底部上滑框时出现 -->
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set
v-if="tools.showCustomTableTitle"
@close="tools.showCustomTableTitle = false"
:custom-table-title.sync="tools.customTableTitle"
:original-table-title="tableTitle"
ref="customTableTitle"
></element-set>
</transition>
<el-table
class="nz-table"
:data="tableData"
border
ref="rolesTable"
:height="mainTableHeight"
v-loading="tools.loading"
v-scrollBar:el-table="'large'"
style="width: 100%;"
@sort-change="tableDataSort"
@selection-change="(selection)=>{this.batchDeleteObjs=selection}"
>
<el-table-column
:resizable="false"
type="selection"
width="40"
align="center">
</el-table-column>
<el-table-column
:resizable="true"
v-for="(item, index) in tools.customTableTitle"
v-if="item.show"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:prop="item.prop"
:sort-orders="['ascending', 'descending']"
>
<template slot-scope="scope" slot="header">
<span v-if="item.type == 'tag'" class="tag-header" :title="item.label"><span class="tag-value">{{item.label}}</span><span style="color:orange;">&nbsp;[Notification]</span></span>
<span v-else><span>{{item.label}}</span></span>
</template>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
<span :title="$t('overall.edit')" @click="edit(scope.row)" class="content-right-option" :id="'roles-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit" :class="{'gray-filter':scope.row.buildIn == 1}"></i></span>
&nbsp;
<span :title="$t('overall.delete')" @click="del(scope.row)" class="content-right-option" :id="'roles-del-'+scope.row.id"><i class="nz-icon nz-icon-delete" :class="{'gray-filter':scope.row.buildIn == 1}"></i></span>
</div>
<template v-if="item.prop == 'name'">
<template v-if="scope.row.i18n">
<span>{{$t(scope.row.i18n)}}</span>
</template>
<template v-else-if="scope.row.name">
<span>{{scope.row.name}}</span>
</template>
<template v-else>
<span>-</span>
</template>
</template>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column width="28" fixed="right">
<template slot="header" slot-scope="scope" :resizable="false">
<span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
</el-table-column>
</el-table>
<button class="to-top" :style="{top: tools.toTopBtnTop}" :class="{'to-top-is-hover': tools.tableHover}" v-show="tools.showTopBtn " @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</div>
<transition name="right-box">
<role-box v-if="rightBox.show" :role="role" @close="closeRightBox"></role-box>
</transition>
</div>
</template>
<script>
import deleteButton from "../../common/deleteButton";
import roleBox from '../../common/rightBox/roleBox';
export default {
name: "roles",
components: {
'role-box': roleBox,
'delete-button':deleteButton,
},
data() {
return {
//侧滑
rightBox: {
show: false,
},
/*工具参数*/
tools: {
loading: false, //是否显示table加载动画
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showTopBtn: false, //显示To top按钮
showCustomTableTitle: false, //自定义列弹框是否显示
customTableTitle: [], //自定义列工具的数据
},
mainTableHeight: this.$tableHeight.normal, //主列表table高度
batchDeleteObjs:[],
role: {},
tableId: 'rolesTable', //需要分页的table的id，用于记录每页数量
blankRole: { //空白对象
},
pageObj: { //分页对象
pageNo: 1,
pageSize: 50,
total: 0
},
tableTitle: [ //原table列
{
label: 'ID',
prop: 'id',
show: true,
width: 80
}, {
label: this.$t("config.roles.name"),
prop: 'name',
show: true,
}, {
label: this.$t("config.roles.remark"),
prop: 'remark',
show: true,
}, {
label: this.$t('config.roles.option'),
prop: 'option',
show: true,
width: 120,
fixed: "right"
}
],
tableData: [],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
id: 10,
name: this.$t('config.roles.name'),
type: 'input',
label: this.$t('config.roles.name'),
disabled: false
}],
},
searchLabel: {}, //搜索参数
}
},
methods: {
closeRightBox(refresh) {
this.rightBox.show = false;
if (refresh) {
this.getTableData();
}
},
edit(u) {
if(u.buildIn == 1){
return ;
}
this.role = JSON.parse(JSON.stringify(u));
this.rightBox.show = true;
},
del(u) {
if(u.buildIn == 1){
return ;
}
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("sys/role?ids=" + u.id).then(response => {
if (response.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getTableData();
} else {
this.$message.error(response.msg);
}
})
});
},
getTableData() {
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.tools.loading = true;
this.$get('sys/role', this.searchLabel).then(response => {
this.tools.loading = false;
if (response.code === 200) {
this.tableData = response.data.list;
this.pageObj.total = response.data.total
this.tools.loading = false;
}
})
},
add() {
this.role = this.newRole();
this.rightBox.show = true;
},
esc() {
this.rightBox.show = false;
},
newRole() {
return JSON.parse(JSON.stringify(this.blankRole));
},
pageNo(val) {
this.pageObj.pageNo = val;
this.getTableData();
},
pageSize(val) {
this.pageObj.pageSize = val;
localStorage.setItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId, val);
this.getTableData();
},
search(searchObj) {
this.searchLabel = {};
this.pageObj.pageNo = 1;
for (let item in searchObj) {
if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]);
}
}
if(this.$refs.rolesTable){
this.$refs.rolesTable.bodyWrapper.scrollTop = 0;
}
this.getTableData();
},
// 数据排序
tableDataSort(item){
let orderBy = '';
if(item.order === 'ascending') {
orderBy = item.prop;
}
if(item.order === 'descending') {
orderBy = '-' + item.prop;
}
this.$set(this.searchLabel, "orderBy", orderBy);
this.getTableData();
},
plpsscrolly(el,self){
if (el._ps_.scrollbarYTop > 50) {
self.tools.showTopBtn = true;
self.tools.tableHover = true;
} else {
self.tools.showTopBtn = false;
self.tools.tableHover = true;
}
},
},
computed: {
},
watch: {
},
created(){
//是否存在分页缓存
let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
if (pageSize != 'undefined' && pageSize != null) {
this.pageObj.pageSize = pageSize
}
},
mounted() {
//初始化表头
this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
this.getTableData();
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.rolesTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
}
});
},
beforeDestroy(){
let el = this.$refs.rolesTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.removeEventListener("ps-scroll-y", this.plpsscrolly.bind('',el,this));
el._ps_.destroy();
}
}
}
</script>

8
nezha-fronted/src/router/index.js
View File

@@ -60,6 +60,14 @@ export default new Router({
path: '/account',
component: resolve => require(['../components/page/config/account.vue'], resolve),
},
{
path: '/menu',
component: resolve => require(['../components/page/config/menus.vue'], resolve),
},
{
path: '/roles',
component: resolve => require(['../components/page/config/roles.vue'], resolve),
},
{
path: '/promServer',
component: resolve => require(['../components/page/config/promServer.vue'], resolve),