Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
nizhengjia888
gin-vue-admin
提交
4812d2e5
G
gin-vue-admin
项目概览
nizhengjia888
/
gin-vue-admin
与 Fork 源项目一致
Fork自
FLIPPED-AURORA / gin-vue-admin
通知
3
Star
0
Fork
0
代码
文件
提交
分支
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,体验更适合开发者的 AI 搜索 >>
提交
4812d2e5
编写于
8月 11, 2020
作者:
Mr.奇淼(
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
增加菜单参数配置功能
移除视图中复杂sql更改为model映射模式
上级
92426223
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
195 addition
and
115 deletion
+195
-115
web/src/view/layout/aside/asideComponent/menuItem.vue
web/src/view/layout/aside/asideComponent/menuItem.vue
+1
-1
web/src/view/layout/aside/index.vue
web/src/view/layout/aside/index.vue
+30
-19
web/src/view/superAdmin/menu/menu.vue
web/src/view/superAdmin/menu/menu.vue
+164
-95
未找到文件。
web/src/view/layout/aside/asideComponent/menuItem.vue
浏览文件 @
4812d2e5
<
template
>
<el-menu-item
:index=
"routerInfo.name"
>
<el-menu-item
:index=
"routerInfo.name"
:route=
"
{parameters:routerInfo.parameters}"
>
<i
:class=
"'el-icon-'+routerInfo.meta.icon"
></i>
<span
slot=
"title"
>
{{
routerInfo
.
meta
.
title
}}
</span>
</el-menu-item>
...
...
web/src/view/layout/aside/index.vue
浏览文件 @
4812d2e5
...
...
@@ -22,49 +22,60 @@
</template>
<
script
>
import
{
mapGetters
,
mapMutations
}
from
'
vuex
'
import
AsideComponent
from
'
@/view/layout/aside/asideComponent
'
import
{
mapGetters
,
mapMutations
}
from
"
vuex
"
;
import
AsideComponent
from
"
@/view/layout/aside/asideComponent
"
;
export
default
{
name
:
'
Aside
'
,
name
:
"
Aside
"
,
data
()
{
return
{
active
:
''
,
active
:
""
,
isCollapse
:
false
}
}
;
},
methods
:
{
...
mapMutations
(
'
history
'
,
[
'
addHistory
'
]),
selectMenuItem
(
index
)
{
if
(
index
===
this
.
$route
.
name
)
return
this
.
$router
.
push
({
name
:
index
})
...
mapMutations
(
"
history
"
,
[
"
addHistory
"
]),
selectMenuItem
(
index
,
_
,
ele
)
{
const
query
=
{};
const
params
=
{};
ele
.
route
.
parameters
&&
ele
.
route
.
parameters
.
map
(
item
=>
{
if
(
item
.
type
==
"
query
"
)
{
query
[
item
.
key
]
=
item
.
value
;
}
else
{
params
[
item
.
key
]
=
item
.
value
;
}
});
console
.
log
(
query
,
params
);
if
(
index
===
this
.
$route
.
name
)
return
;
this
.
$router
.
push
({
name
:
index
,
query
,
params
});
}
},
computed
:
{
...
mapGetters
(
'
router
'
,
[
'
asyncRouters
'
])
...
mapGetters
(
"
router
"
,
[
"
asyncRouters
"
])
},
components
:
{
AsideComponent
},
created
()
{
this
.
active
=
this
.
$route
.
name
let
screenWidth
=
document
.
body
.
clientWidth
this
.
active
=
this
.
$route
.
name
;
let
screenWidth
=
document
.
body
.
clientWidth
;
if
(
screenWidth
<
1000
)
{
this
.
isCollapse
=
!
this
.
isCollapse
this
.
isCollapse
=
!
this
.
isCollapse
;
}
this
.
$bus
.
on
(
'
collapse
'
,
item
=>
{
this
.
isCollapse
=
item
})
this
.
$bus
.
on
(
"
collapse
"
,
item
=>
{
this
.
isCollapse
=
item
;
})
;
},
watch
:
{
$route
()
{
this
.
active
=
this
.
$route
.
name
this
.
active
=
this
.
$route
.
name
;
}
},
beforeDestroy
()
{
this
.
$bus
.
off
(
'
collapse
'
)
this
.
$bus
.
off
(
"
collapse
"
);
}
}
}
;
</
script
>
<
style
lang=
"scss"
>
...
...
web/src/view/superAdmin/menu/menu.vue
浏览文件 @
4812d2e5
...
...
@@ -30,15 +30,29 @@
</el-table-column>
<el-table-column
fixed=
"right"
label=
"操作"
width=
"300"
>
<
template
slot-scope=
"scope"
>
<el-button
@
click=
"addMenu(scope.row.ID)"
size=
"small"
type=
"primary"
icon=
"el-icon-edit"
>
添加子菜单
</el-button>
<el-button
@
click=
"editMenu(scope.row.ID)"
size=
"small"
type=
"primary"
icon=
"el-icon-edit"
>
编辑
</el-button>
<el-button
@
click=
"deleteMenu(scope.row.ID)"
size=
"small"
type=
"danger"
icon=
"el-icon-delete"
>
删除
</el-button>
<el-button
@
click=
"addMenu(scope.row.ID)"
size=
"small"
type=
"primary"
icon=
"el-icon-edit"
>
添加子菜单
</el-button>
<el-button
@
click=
"editMenu(scope.row.ID)"
size=
"small"
type=
"primary"
icon=
"el-icon-edit"
>
编辑
</el-button>
<el-button
@
click=
"deleteMenu(scope.row.ID)"
size=
"small"
type=
"danger"
icon=
"el-icon-delete"
>
删除
</el-button>
</
template
>
</el-table-column>
</el-table>
<el-dialog
:before-close=
"handleClose"
:title=
"dialogTitle"
:visible.sync=
"dialogFormVisible"
>
<el-form
:inline=
"true"
:model=
"form"
...
...
@@ -105,6 +119,50 @@
</el-form-item>
</el-form>
<div
class=
"warning"
>
新增菜单需要在角色管理内配置权限才可使用
</div>
<div>
<el-button
size=
"small"
type=
"primary"
icon=
"el-icon-edit"
@
click=
"addParameter(form.parameters)"
>
新增菜单参数
</el-button>
<el-table
:data=
"form.parameters"
stripe
style=
"width: 100%"
>
<el-table-column
prop=
"type"
label=
"参数类型"
width=
"180"
>
<
template
slot-scope=
"scope"
>
<el-select
v-model=
"scope.row.type"
placeholder=
"请选择"
>
<el-option
key=
"query"
value=
"query"
label=
"query"
></el-option>
<el-option
key=
"params"
value=
"params"
label=
"params"
></el-option>
</el-select>
</
template
>
</el-table-column>
<el-table-column
prop=
"key"
label=
"参数key"
width=
"180"
>
<
template
slot-scope=
"scope"
>
<div>
<el-input
v-model=
"scope.row.key"
></el-input>
</div>
</
template
>
</el-table-column>
<el-table-column
prop=
"value"
label=
"参数值"
>
<
template
slot-scope=
"scope"
>
<div>
<el-input
v-model=
"scope.row.value"
></el-input>
</div>
</
template
>
</el-table-column>
<el-table-column>
<
template
slot-scope=
"scope"
>
<div>
<el-button
type=
"danger"
size=
"small"
icon=
"el-icon-delete"
@
click=
"deleteParameter(form.parameters,scope.$index)"
>
删除
</el-button>
</div>
</
template
>
</el-table-column>
</el-table>
</div>
<div
class=
"dialog-footer"
slot=
"footer"
>
<el-button
@
click=
"closeDialog"
>
取 消
</el-button>
<el-button
@
click=
"enterDialog"
type=
"primary"
>
确 定
</el-button>
...
...
@@ -122,66 +180,77 @@ import {
addBaseMenu
,
deleteBaseMenu
,
getBaseMenuById
}
from
'
@/api/menu
'
import
infoList
from
'
@/components/mixins/infoList
'
import
icon
from
'
@/view/superAdmin/menu/icon
'
}
from
"
@/api/menu
"
;
import
infoList
from
"
@/components/mixins/infoList
"
;
import
icon
from
"
@/view/superAdmin/menu/icon
"
;
export
default
{
name
:
'
Menus
'
,
name
:
"
Menus
"
,
mixins
:
[
infoList
],
data
()
{
return
{
checkFlag
:
false
,
listApi
:
getMenuList
,
dialogFormVisible
:
false
,
dialogTitle
:
'
新增菜单
'
,
dialogTitle
:
"
新增菜单
"
,
menuOption
:
[
{
ID
:
'
0
'
,
title
:
'
根菜单
'
ID
:
"
0
"
,
title
:
"
根菜单
"
}
],
form
:
{
ID
:
0
,
path
:
''
,
name
:
''
,
hidden
:
''
,
parentId
:
''
,
component
:
''
,
path
:
""
,
name
:
""
,
hidden
:
""
,
parentId
:
""
,
component
:
""
,
meta
:
{
title
:
''
,
icon
:
''
,
title
:
""
,
icon
:
""
,
defaultMenu
:
false
,
keepAlive
:
false
}
},
parameters
:
[]
},
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
,
test
:
''
}
test
:
""
}
;
},
components
:
{
icon
},
methods
:
{
addParameter
(
parameters
)
{
parameters
.
push
({
type
:
"
query
"
,
key
:
""
,
value
:
""
});
},
deleteParameter
(
parameters
,
index
)
{
parameters
.
splice
(
index
,
1
);
},
changeName
()
{
this
.
form
.
path
=
this
.
form
.
name
this
.
form
.
path
=
this
.
form
.
name
;
},
setOptions
()
{
this
.
menuOption
=
[
{
ID
:
'
0
'
,
title
:
'
根目录
'
ID
:
"
0
"
,
title
:
"
根目录
"
}
]
this
.
setMenuOptions
(
this
.
tableData
,
this
.
menuOption
,
false
)
]
;
this
.
setMenuOptions
(
this
.
tableData
,
this
.
menuOption
,
false
)
;
},
setMenuOptions
(
menuData
,
optionsData
,
disabled
)
{
menuData
&&
...
...
@@ -192,137 +261,137 @@ export default {
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
)
)
;
optionsData
.
push
(
option
)
;
}
else
{
const
option
=
{
title
:
item
.
meta
.
title
,
ID
:
String
(
item
.
ID
),
disabled
:
disabled
||
item
.
ID
==
this
.
form
.
ID
};
optionsData
.
push
(
option
);
}
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
.
checkFlag
=
false
this
.
$refs
.
menuForm
.
resetFields
()
this
.
checkFlag
=
false
;
this
.
$refs
.
menuForm
.
resetFields
()
;
this
.
form
=
{
ID
:
0
,
path
:
''
,
name
:
''
,
hidden
:
''
,
parentId
:
''
,
component
:
''
,
path
:
""
,
name
:
""
,
hidden
:
""
,
parentId
:
""
,
component
:
""
,
meta
:
{
title
:
''
,
icon
:
''
,
title
:
""
,
icon
:
""
,
defaultMenu
:
false
,
keepAlive
:
''
}
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
let
res
;
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
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录