Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
FLIPPED-AURORA
gin-vue-admin
提交
9718593a
G
gin-vue-admin
项目概览
FLIPPED-AURORA
/
gin-vue-admin
大约 1 年 前同步成功
通知
340
Star
18155
Fork
5506
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gin-vue-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
9718593a
编写于
4月 30, 2020
作者:
Mr.奇淼(
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
menu弹窗美化
上级
89571b44
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
227 addition
and
210 deletion
+227
-210
web/src/view/superAdmin/menu/menu.vue
web/src/view/superAdmin/menu/menu.vue
+139
-125
web/src/view/superAdmin/user/user.vue
web/src/view/superAdmin/user/user.vue
+88
-85
未找到文件。
web/src/view/superAdmin/menu/menu.vue
浏览文件 @
9718593a
...
...
@@ -36,41 +36,48 @@
</el-table>
<el-dialog
:before-close=
"handleClose"
:visible.sync=
"dialogFormVisible"
:title=
"dialogTitle"
>
<el-form
:inline=
"true"
:model=
"form"
:rules=
"rules"
label-width=
"85px"
ref=
"menuForm"
>
<el-form-item
label=
"路由name"
prop=
"path"
>
<el-form
:inline=
"true"
:model=
"form"
:rules=
"rules"
label-width=
"85px"
ref=
"menuForm"
label-position=
"top"
>
<el-form-item
label=
"路由name"
prop=
"path"
style=
"width:30%"
>
<el-input
autocomplete=
"off"
placeholder=
"唯一英文字符串"
v-model=
"form.path"
></el-input>
</el-form-item>
<el-form-item
label=
"是否隐藏"
>
<el-form-item
label=
"是否隐藏"
style=
"width:30%"
>
<el-select
placeholder=
"是否在列表隐藏"
v-model=
"form.hidden"
>
<el-option
:value=
"false"
label=
"否"
></el-option>
<el-option
:value=
"true"
label=
"是"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label=
"父节点Id"
>
<el-form-item
label=
"父节点Id"
style=
"width:30%"
>
<el-cascader
:disabled=
"!this.isEdit"
v-model=
"form.parentId"
:options=
"menuOption"
:show-all-levels=
"false"
:props=
"{ checkStrictly: true,label:'title',value:'ID',disabled:'disabled',emitPath:false}"
filterable
>
</el-cascader>
filterable
>
</el-cascader>
</el-form-item>
<el-form-item
label=
"文件路径"
prop=
"component"
>
<el-form-item
label=
"文件路径"
prop=
"component"
style=
"width:30%"
>
<el-input
autocomplete=
"off"
v-model=
"form.component"
></el-input>
</el-form-item>
<el-form-item
label=
"展示名称"
prop=
"meta.title"
>
<el-form-item
label=
"展示名称"
prop=
"meta.title"
style=
"width:30%"
>
<el-input
autocomplete=
"off"
v-model=
"form.meta.title"
></el-input>
</el-form-item>
<el-form-item
label=
"图标"
prop=
"meta.icon"
>
<el-form-item
label=
"图标"
prop=
"meta.icon"
style=
"width:30%"
>
<el-input
autocomplete=
"off"
v-model=
"form.meta.icon"
>
<
template
slot=
"prepend"
>
el-icon-
</
template
>
</el-input>
</el-form-item>
<el-form-item
label=
"排序标记"
prop=
"sort"
>
<el-form-item
label=
"排序标记"
prop=
"sort"
style=
"width:30%"
>
<el-input
autocomplete=
"off"
v-model.number=
"form.sort"
></el-input>
</el-form-item>
<el-form-item
label=
"keepAlive"
prop=
"meta.keepAlive"
>
<el-form-item
label=
"keepAlive"
prop=
"meta.keepAlive"
style=
"width:30%"
>
<el-select
placeholder=
"是否keepAlive缓存页面"
v-model=
"form.meta.keepAlive"
>
<el-option
:value=
"false"
label=
"否"
></el-option>
<el-option
:value=
"true"
label=
"是"
></el-option>
...
...
@@ -95,191 +102,198 @@ import {
addBaseMenu
,
deleteBaseMenu
,
getBaseMenuById
}
from
'
@/api/menu
'
import
infoList
from
'
@/components/mixins/infoList
'
}
from
"
@/api/menu
"
;
import
infoList
from
"
@/components/mixins/infoList
"
;
export
default
{
name
:
'
Menus
'
,
name
:
"
Menus
"
,
mixins
:
[
infoList
],
data
()
{
return
{
listApi
:
getMenuList
,
dialogFormVisible
:
false
,
dialogTitle
:
"
新增菜单
"
,
menuOption
:[
dialogTitle
:
"
新增菜单
"
,
menuOption
:
[
{
ID
:
"
0
"
,
title
:
"
根菜单
"
ID
:
"
0
"
,
title
:
"
根菜单
"
}
],
form
:
{
ID
:
0
,
path
:
''
,
name
:
''
,
hidden
:
''
,
parentId
:
''
,
component
:
''
,
path
:
""
,
name
:
""
,
hidden
:
""
,
parentId
:
""
,
component
:
""
,
meta
:
{
title
:
''
,
icon
:
''
,
defaultMenu
:
false
,
keepAlive
:
false
title
:
""
,
icon
:
""
,
defaultMenu
:
false
,
keepAlive
:
false
}
},
rules
:
{
path
:
[{
required
:
true
,
message
:
'
请输入菜单name
'
,
trigger
:
'
blur
'
}],
path
:
[{
required
:
true
,
message
:
"
请输入菜单name
"
,
trigger
:
"
blur
"
}],
component
:
[
{
required
:
true
,
message
:
'
请输入文件路径
'
,
trigger
:
'
blur
'
}
{
required
:
true
,
message
:
"
请输入文件路径
"
,
trigger
:
"
blur
"
}
],
'
meta.title
'
:
[
{
required
:
true
,
message
:
'
请输入菜单展示名称
'
,
trigger
:
'
blur
'
}
"
meta.title
"
:
[
{
required
:
true
,
message
:
"
请输入菜单展示名称
"
,
trigger
:
"
blur
"
}
]
},
isEdit
:
false
}
}
;
},
methods
:
{
setOptions
(){
this
.
menuOption
=
[{
ID
:
"
0
"
,
title
:
"
根目录
"
}]
this
.
setMenuOptions
(
this
.
tableData
,
this
.
menuOption
,
false
)
setOptions
()
{
this
.
menuOption
=
[
{
ID
:
"
0
"
,
title
:
"
根目录
"
}
];
this
.
setMenuOptions
(
this
.
tableData
,
this
.
menuOption
,
false
);
},
setMenuOptions
(
menuData
,
optionsData
,
disabled
){
menuData
&&
menuData
.
map
(
item
=>
{
if
(
item
.
children
.
length
){
setMenuOptions
(
menuData
,
optionsData
,
disabled
)
{
menuData
&&
menuData
.
map
(
item
=>
{
if
(
item
.
children
.
length
)
{
const
option
=
{
title
:
item
.
meta
.
title
,
ID
:
String
(
item
.
ID
),
disabled
:
disabled
||
item
.
ID
==
this
.
form
.
ID
,
children
:[]
}
this
.
setMenuOptions
(
item
.
children
,
option
.
children
,
disabled
||
item
.
ID
==
this
.
form
.
ID
)
optionsData
.
push
(
option
)
}
else
{
title
:
item
.
meta
.
title
,
ID
:
String
(
item
.
ID
),
disabled
:
disabled
||
item
.
ID
==
this
.
form
.
ID
,
children
:
[]
};
this
.
setMenuOptions
(
item
.
children
,
option
.
children
,
disabled
||
item
.
ID
==
this
.
form
.
ID
);
optionsData
.
push
(
option
);
}
else
{
const
option
=
{
title
:
item
.
meta
.
title
,
ID
:
String
(
item
.
ID
),
disabled
:
disabled
||
item
.
ID
==
this
.
form
.
ID
,
}
optionsData
.
push
(
option
)
title
:
item
.
meta
.
title
,
ID
:
String
(
item
.
ID
),
disabled
:
disabled
||
item
.
ID
==
this
.
form
.
ID
};
optionsData
.
push
(
option
);
}
})
});
},
handleClose
(
done
)
{
this
.
initForm
()
done
()
this
.
initForm
()
;
done
()
;
},
// 懒加载子菜单
load
(
tree
,
treeNode
,
resolve
)
{
resolve
([
{
id
:
31
,
date
:
'
2016-05-01
'
,
name
:
'
王小虎
'
,
address
:
'
上海市普陀区金沙江路 1519 弄
'
date
:
"
2016-05-01
"
,
name
:
"
王小虎
"
,
address
:
"
上海市普陀区金沙江路 1519 弄
"
},
{
id
:
32
,
date
:
'
2016-05-01
'
,
name
:
'
王小虎
'
,
address
:
'
上海市普陀区金沙江路 1519 弄
'
date
:
"
2016-05-01
"
,
name
:
"
王小虎
"
,
address
:
"
上海市普陀区金沙江路 1519 弄
"
}
])
])
;
},
// 删除菜单
deleteMenu
(
ID
)
{
this
.
$confirm
(
'
此操作将永久删除所有角色下该菜单, 是否继续?
'
,
'
提示
'
,
{
confirmButtonText
:
'
确定
'
,
cancelButtonText
:
'
取消
'
,
type
:
'
warning
'
this
.
$confirm
(
"
此操作将永久删除所有角色下该菜单, 是否继续?
"
,
"
提示
"
,
{
confirmButtonText
:
"
确定
"
,
cancelButtonText
:
"
取消
"
,
type
:
"
warning
"
})
.
then
(
async
()
=>
{
const
res
=
await
deleteBaseMenu
({
ID
})
const
res
=
await
deleteBaseMenu
({
ID
})
;
if
(
res
.
code
==
0
)
{
this
.
$message
({
type
:
'
success
'
,
message
:
'
删除成功!
'
})
this
.
getTableData
()
type
:
"
success
"
,
message
:
"
删除成功!
"
})
;
this
.
getTableData
()
;
}
})
.
catch
(()
=>
{
this
.
$message
({
type
:
'
info
'
,
message
:
'
已取消删除
'
})
})
type
:
"
info
"
,
message
:
"
已取消删除
"
})
;
})
;
},
// 初始化弹窗内表格方法
initForm
()
{
this
.
$refs
.
menuForm
.
resetFields
()
this
.
$refs
.
menuForm
.
resetFields
()
;
this
.
form
=
{
ID
:
0
,
path
:
''
,
name
:
''
,
hidden
:
''
,
parentId
:
''
,
component
:
''
,
path
:
""
,
name
:
""
,
hidden
:
""
,
parentId
:
""
,
component
:
""
,
meta
:
{
title
:
''
,
icon
:
''
,
defaultMenu
:
false
,
keepAlive
:
""
}
title
:
""
,
icon
:
""
,
defaultMenu
:
false
,
keepAlive
:
""
}
};
},
// 关闭弹窗
closeDialog
()
{
this
.
initForm
()
this
.
dialogFormVisible
=
false
this
.
initForm
()
;
this
.
dialogFormVisible
=
false
;
},
// 添加menu
async
enterDialog
()
{
this
.
$refs
.
menuForm
.
validate
(
async
valid
=>
{
if
(
valid
)
{
let
res
this
.
form
.
name
=
this
.
form
.
path
let
res
;
this
.
form
.
name
=
this
.
form
.
path
;
if
(
this
.
isEdit
)
{
res
=
await
updateBaseMenu
(
this
.
form
)
res
=
await
updateBaseMenu
(
this
.
form
)
;
}
else
{
res
=
await
addBaseMenu
(
this
.
form
)
res
=
await
addBaseMenu
(
this
.
form
)
;
}
if
(
res
.
code
==
0
)
{
this
.
$message
({
type
:
'
success
'
,
message
:
this
.
isEdit
?
'
编辑成功
'
:
'
添加成功!
'
})
this
.
getTableData
()
type
:
"
success
"
,
message
:
this
.
isEdit
?
"
编辑成功
"
:
"
添加成功!
"
})
;
this
.
getTableData
()
;
}
this
.
initForm
()
this
.
dialogFormVisible
=
false
this
.
initForm
()
;
this
.
dialogFormVisible
=
false
;
}
})
})
;
},
// 添加菜单方法,id为 0则为添加根菜单
addMenu
(
id
)
{
this
.
dialogTitle
=
"
新增菜单
"
this
.
form
.
parentId
=
String
(
id
)
this
.
isEdit
=
false
this
.
setOptions
()
this
.
dialogFormVisible
=
true
this
.
dialogTitle
=
"
新增菜单
"
;
this
.
form
.
parentId
=
String
(
id
)
;
this
.
isEdit
=
false
;
this
.
setOptions
()
;
this
.
dialogFormVisible
=
true
;
},
// 修改菜单方法
async
editMenu
(
id
)
{
this
.
dialogTitle
=
"
编辑菜单
"
const
res
=
await
getBaseMenuById
({
id
})
this
.
form
=
res
.
data
.
menu
this
.
isEdit
=
true
this
.
setOptions
()
this
.
dialogFormVisible
=
true
}
,
this
.
dialogTitle
=
"
编辑菜单
"
;
const
res
=
await
getBaseMenuById
({
id
})
;
this
.
form
=
res
.
data
.
menu
;
this
.
isEdit
=
true
;
this
.
setOptions
()
;
this
.
dialogFormVisible
=
true
;
}
},
async
created
()
{
this
.
pageSize
=
999
await
this
.
getTableData
()
this
.
pageSize
=
999
;
await
this
.
getTableData
()
;
}
}
}
;
</
script
>
<
style
scoped
lang=
"scss"
>
.button-box
{
...
...
web/src/view/superAdmin/user/user.vue
浏览文件 @
9718593a
...
...
@@ -22,16 +22,13 @@
:options=
"authOptions"
:show-all-levels=
"false"
:props=
"
{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
filterable>
</el-cascader>
filterable
>
</el-cascader>
</
template
>
</el-table-column>
<el-table-column
label=
"操作"
min-width=
"150"
>
<
template
slot-scope=
"scope"
>
<el-popover
placement=
"top"
width=
"160"
v-model=
"scope.row.visible"
>
<el-popover
placement=
"top"
width=
"160"
v-model=
"scope.row.visible"
>
<p>
确定要删除此用户吗
</p>
<div
style=
"text-align: right; margin: 0"
>
<el-button
size=
"mini"
type=
"text"
@
click=
"scope.row.visible = false"
>
取消
</el-button>
...
...
@@ -54,7 +51,7 @@
></el-pagination>
<el-dialog
:visible.sync=
"addUserDialog"
custom-class=
"user-dialog"
title=
"新增用户"
>
<el-form
:rules=
"rules"
ref=
"userForm"
:model=
"userInfo"
>
<el-form
:rules=
"rules"
ref=
"userForm"
:model=
"userInfo"
>
<el-form-item
label=
"用户名"
label-width=
"80px"
prop=
"username"
>
<el-input
v-model=
"userInfo.username"
></el-input>
</el-form-item>
...
...
@@ -84,8 +81,8 @@
:options=
"authOptions"
:show-all-levels=
"false"
:props=
"{ checkStrictly: true,label:'authorityName',value:'authorityId',disabled:'disabled',emitPath:false}"
filterable
>
</el-cascader>
filterable
>
</el-cascader>
</el-form-item>
</el-form>
<div
class=
"dialog-footer"
slot=
"footer"
>
...
...
@@ -99,115 +96,121 @@
<
script
>
// 获取列表内容封装在mixins内部 getTableData方法 初始化已封装完成
const
path
=
process
.
env
.
VUE_APP_BASE_API
import
{
getUserList
,
setUserAuthority
,
register
,
deleteUser
}
from
'
@/api/user
'
import
{
getAuthorityList
}
from
'
@/api/authority
'
import
infoList
from
'
@/components/mixins/infoList
'
import
{
mapGetters
}
from
'
vuex
'
const
path
=
process
.
env
.
VUE_APP_BASE_API
;
import
{
getUserList
,
setUserAuthority
,
register
,
deleteUser
}
from
"
@/api/user
"
;
import
{
getAuthorityList
}
from
"
@/api/authority
"
;
import
infoList
from
"
@/components/mixins/infoList
"
;
import
{
mapGetters
}
from
"
vuex
"
;
export
default
{
name
:
'
Api
'
,
name
:
"
Api
"
,
mixins
:
[
infoList
],
data
()
{
return
{
listApi
:
getUserList
,
path
:
path
,
path
:
path
,
authOptions
:
[],
addUserDialog
:
false
,
userInfo
:
{
username
:
''
,
password
:
''
,
nickName
:
''
,
headerImg
:
''
,
authorityId
:
''
username
:
""
,
password
:
""
,
nickName
:
""
,
headerImg
:
""
,
authorityId
:
""
},
rules
:
{
username
:
[{
required
:
true
,
message
:
'
请输入用户名
'
,
trigger
:
'
blur
'
}],
username
:
[
{
required
:
true
,
message
:
"
请输入用户名
"
,
trigger
:
"
blur
"
}
],
password
:
[
{
required
:
true
,
message
:
'
请输入用户密码
'
,
trigger
:
'
blur
'
}
{
required
:
true
,
message
:
"
请输入用户密码
"
,
trigger
:
"
blur
"
}
],
nickName
:
[
{
required
:
true
,
message
:
'
请输入用户昵称
'
,
trigger
:
'
blur
'
}
{
required
:
true
,
message
:
"
请输入用户昵称
"
,
trigger
:
"
blur
"
}
],
authorityId
:
[
{
required
:
true
,
message
:
'
请选择用户角色
'
,
trigger
:
'
blur
'
}
{
required
:
true
,
message
:
"
请选择用户角色
"
,
trigger
:
"
blur
"
}
]
},
}
};
},
computed
:
{
...
mapGetters
(
'
user
'
,
[
'
token
'
])
...
mapGetters
(
"
user
"
,
[
"
token
"
])
},
methods
:
{
setOptions
(
authData
)
{
this
.
authOptions
=
[]
this
.
setAuthorityOptions
(
authData
,
this
.
authOptions
)
setOptions
(
authData
)
{
this
.
authOptions
=
[]
;
this
.
setAuthorityOptions
(
authData
,
this
.
authOptions
);
},
setAuthorityOptions
(
AuthorityData
,
optionsData
){
AuthorityData
&&
AuthorityData
.
map
(
item
=>
{
if
(
item
.
children
.
length
){
setAuthorityOptions
(
AuthorityData
,
optionsData
)
{
AuthorityData
&&
AuthorityData
.
map
(
item
=>
{
if
(
item
.
children
.
length
)
{
const
option
=
{
authorityId
:
item
.
authorityId
,
authorityName
:
item
.
authorityName
,
children
:
[]
}
this
.
setAuthorityOptions
(
item
.
children
,
option
.
children
)
optionsData
.
push
(
option
)
}
else
{
authorityId
:
item
.
authorityId
,
authorityName
:
item
.
authorityName
,
children
:
[]
};
this
.
setAuthorityOptions
(
item
.
children
,
option
.
children
);
optionsData
.
push
(
option
);
}
else
{
const
option
=
{
authorityId
:
item
.
authorityId
,
authorityName
:
item
.
authorityName
,
}
optionsData
.
push
(
option
)
authorityId
:
item
.
authorityId
,
authorityName
:
item
.
authorityName
};
optionsData
.
push
(
option
);
}
})
});
},
async
deleteUser
(
row
){
const
res
=
await
deleteUser
({
id
:
row
.
ID
})
if
(
res
.
code
==
0
)
{
this
.
getTableData
()
row
.
visible
=
false
async
deleteUser
(
row
)
{
const
res
=
await
deleteUser
({
id
:
row
.
ID
});
if
(
res
.
code
==
0
)
{
this
.
getTableData
()
;
row
.
visible
=
false
;
}
},
async
enterAddUserDialog
()
{
this
.
$refs
.
userForm
.
validate
(
async
valid
=>
{
if
(
valid
)
{
const
res
=
await
register
(
this
.
userInfo
)
const
res
=
await
register
(
this
.
userInfo
)
;
if
(
res
.
code
==
0
)
{
this
.
$message
({
type
:
'
success
'
,
message
:
'
创建成功
'
})
this
.
$message
({
type
:
"
success
"
,
message
:
"
创建成功
"
});
}
await
this
.
getTableData
()
this
.
closeAddUserDialog
()
await
this
.
getTableData
()
;
this
.
closeAddUserDialog
()
;
}
})
})
;
},
closeAddUserDialog
()
{
this
.
$refs
.
userForm
.
resetFields
()
this
.
addUserDialog
=
false
this
.
$refs
.
userForm
.
resetFields
()
;
this
.
addUserDialog
=
false
;
},
handleAvatarSuccess
(
res
)
{
this
.
userInfo
.
headerImg
=
res
.
data
.
file
.
url
this
.
userInfo
.
headerImg
=
res
.
data
.
file
.
url
;
},
addUser
()
{
this
.
addUserDialog
=
true
this
.
addUserDialog
=
true
;
},
async
changeAuthority
(
row
)
{
const
res
=
await
setUserAuthority
({
uuid
:
row
.
uuid
,
authorityId
:
row
.
authority
.
authorityId
})
})
;
if
(
res
.
code
==
0
)
{
this
.
$message
({
type
:
'
success
'
,
message
:
'
角色设置成功
'
})
this
.
$message
({
type
:
"
success
"
,
message
:
"
角色设置成功
"
});
}
}
},
async
created
()
{
this
.
getTableData
()
const
res
=
await
getAuthorityList
({
page
:
1
,
pageSize
:
999
})
this
.
setOptions
(
res
.
data
.
list
)
this
.
getTableData
()
;
const
res
=
await
getAuthorityList
({
page
:
1
,
pageSize
:
999
})
;
this
.
setOptions
(
res
.
data
.
list
)
;
}
}
};
</
script
>
<
style
scoped
lang=
"scss"
>
.button-box
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录