Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
B
BI管理后台
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
刘春
BI管理后台
Commits
8c2efea8
Commit
8c2efea8
authored
Jun 26, 2025
by
孙浩然
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
移动端后台维护
parent
dd2396a7
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
179 additions
and
101 deletions
+179
-101
index.vue
src/views/mobile/index.vue
+153
-78
AddMenu.vue
src/views/web/components/AddMenu.vue
+10
-7
index.vue
src/views/web/index.vue
+16
-16
No files found.
src/views/mobile/index.vue
View file @
8c2efea8
<
template
>
<
template
>
<ele-loading
:loading=
"pageLoading"
class=
"h-full"
>
<ele-loading
:loading=
"pageLoading"
class=
"h-full"
>
<div
class=
"wrapper"
>
<div
class=
"h-full flex flex-col"
>
<div
class=
"wrapper-item"
>
<vxe-grid
ref=
"xGrid"
v-bind=
"gridOptions"
>
<vxe-grid
ref=
"xGrid"
v-bind=
"lgridOptions"
>
<!-- 操作插槽 -->
<template
#left_buttons_slot
>
<template
#toolbar_slot
>
<div
class=
"p-l-4px flex flex-content-start"
>
<FcCardTip
title=
"主题"
/>
<el-button
type=
"success"
size=
"small"
class=
"m-l-6px"
>
添加主题
</el-button>
</div>
</
template
>
</vxe-grid>
</div>
<div
class=
"wrapper-item"
>
<vxe-grid
ref=
"xGrid"
v-bind=
"rgridOptions"
>
<
template
#right_buttons_slot
>
<div
class=
"p-l-4px flex flex-content-start"
>
<div
class=
"p-l-4px flex flex-content-start"
>
<FcCardTip
title=
"菜单维护"
/>
<FcCardTip
title=
"菜单维护"
/>
<el-button
class=
"m-l-4px"
type=
"primary"
plain
size=
"small"
>
<el-button
class=
"m-l-4px"
type=
"primary"
plain
size=
"small"
@
click=
"toggleExpand"
>
收起/展开
收起/展开
</el-button>
</el-button>
<el-button
type=
"success"
size=
"small"
@
click=
"handleAdd"
>
添加菜单
</el-button
>
</div>
</div>
</
template
>
</
template
>
<!-- 展开插槽 -->
<!-- 菜单名称 -->
<
template
#expand_slot
>
<
template
#menuName_slot
="{
row
}"
>
<vxe-grid
v-bind=
"expandGridOptions"
/>
<div
class=
"menuName_text flex-start-center"
>
<span>
{{
row
.
menuName
}}
</span>
<el-icon
color=
"#114dfc"
size=
"18px"
class=
"m-l-4px"
@
click=
"handleAddByNext(row)"
>
<CirclePlus
/>
</el-icon>
</div>
</
template
>
</
template
>
<!-- 操作 -->
<!-- 操作 -->
<
template
#option_slot
>
<
template
#option_slot
="{
row
}"
>
<el-link
type=
"primary
"
>
编辑
</el-link>
<el-link
type=
"primary"
@
click=
"handleEdit(row)
"
>
编辑
</el-link>
<el-divider
direction=
"vertical"
/>
<el-divider
direction=
"vertical"
/>
<el-link
type=
"warning"
>
页面预览
</el-link>
<el-link
type=
"warning"
>
页面预览
</el-link>
<el-divider
direction=
"vertical"
/>
<el-divider
direction=
"vertical"
/>
<el-link
type=
"danger
"
>
删除
</el-link>
<el-link
type=
"danger"
@
click=
"handleDelete(row)
"
>
删除
</el-link>
</
template
>
</
template
>
<
template
#menuName_slot
="{
row
}"
>
<!-- 展开插槽 -->
<span>
{{
row
.
menuName
}}
</span>
<
template
#expand_slot
="{
row
}"
>
<el-icon
color=
"#114dfc"
size=
"16px"
class=
"m-l-4px"
>
<vxe-grid
v-bind=
"expandGridOptions"
:data=
"row.menuChildren"
>
<CirclePlus
/>
<!-- 操作 -->
</el-icon>
<template
#option_slot
="
{ row }">
<el-link
type=
"primary"
@
click=
"handleEdit(row)"
>
编辑
</el-link>
<el-divider
direction=
"vertical"
/>
<el-link
type=
"warning"
>
页面预览
</el-link>
<el-divider
direction=
"vertical"
/>
<el-link
type=
"danger"
@
click=
"handleDelete(row)"
>
删除
</el-link>
</
template
>
</vxe-grid>
</template>
</template>
</vxe-grid>
</vxe-grid>
</div>
</div>
</div>
<!-- 新增/编辑弹窗 -->
<addMenu
ref=
"AddMenuRef"
@
reload=
"getMenuList"
></addMenu>
</ele-loading>
</ele-loading>
</template>
</template>
...
@@ -53,29 +69,20 @@
...
@@ -53,29 +69,20 @@
// tools
// tools
import
{
FcCardTip
}
from
'
@fancy-design/coms
'
;
import
{
FcCardTip
}
from
'
@fancy-design/coms
'
;
import
{
CirclePlus
}
from
'
@element-plus/icons-vue
'
;
import
{
CirclePlus
}
from
'
@element-plus/icons-vue
'
;
const
pageLoading
=
ref
(
false
);
import
{
VxeGridProps
}
from
'
vxe-table
'
;
import
{
VxeGridProps
}
from
'
vxe-table
'
;
import
{
tryit
}
from
'
radash
'
;
import
{
EleMessage
}
from
'
ele-admin-plus
'
;
import
menuApi
from
'
@/api/menuApi
'
;
import
addMenu
from
'
../web/components/AddMenu.vue
'
;
const
lgridOptions
=
reactive
<
VxeGridProps
>
({
onMounted
(()
=>
{
round
:
true
,
getMenuList
();
// 获取菜单列表
size
:
'
mini
'
,
height
:
'
100%
'
,
columns
:
[
{
field
:
'
name
'
,
title
:
'
姓名
'
}
],
toolbarConfig
:
{
slots
:
{
buttons
:
'
left_buttons_slot
'
}
}
});
});
const
rgridOptions
=
reactive
<
VxeGridProps
>
({
const
xGrid
=
ref
();
round
:
true
,
const
pageLoading
=
ref
(
false
);
const
gridOptions
=
reactive
<
VxeGridProps
>
({
border
:
true
,
border
:
true
,
showHeaderOverflow
:
true
,
showHeaderOverflow
:
true
,
showOverflow
:
true
,
showOverflow
:
true
,
...
@@ -96,7 +103,7 @@
...
@@ -96,7 +103,7 @@
},
},
toolbarConfig
:
{
toolbarConfig
:
{
slots
:
{
slots
:
{
buttons
:
'
right_buttons
_slot
'
buttons
:
'
toolbar
_slot
'
}
}
},
},
expandConfig
:
{
expandConfig
:
{
...
@@ -111,23 +118,25 @@
...
@@ -111,23 +118,25 @@
slots
:
{
content
:
'
expand_slot
'
,
default
:
'
menuName_slot
'
}
slots
:
{
content
:
'
expand_slot
'
,
default
:
'
menuName_slot
'
}
},
},
{
{
field
:
'
u
rl
'
,
field
:
'
menuU
rl
'
,
title
:
'
URL地址
'
title
:
'
URL地址
'
},
},
{
{
field
:
'
操作
'
,
field
:
'
操作
'
,
fixed
:
'
right
'
,
fixed
:
'
right
'
,
title
:
'
操作
'
,
title
:
'
操作
'
,
width
:
200
,
slots
:
{
default
:
'
option_slot
'
}
slots
:
{
default
:
'
option_slot
'
}
}
}
],
],
pagerConfig
:
{
pagerConfig
:
{
enabled
:
tru
e
,
enabled
:
fals
e
,
pageSize
:
10
,
pageSize
:
10
,
pageSizes
:
[
5
,
10
,
15
,
20
,
50
,
100
,
200
,
500
,
1000
]
pageSizes
:
[
5
,
10
,
15
,
20
,
50
,
100
,
200
,
500
,
1000
]
},
},
data
:
[
{
menuName
:
'
首页
'
,
url
:
'
www.ce.com
'
}
]
data
:
[]
});
});
// 展开行配置
// 展开行配置
const
expandGridOptions
=
reactive
<
VxeGridProps
>
({
const
expandGridOptions
=
reactive
<
VxeGridProps
>
({
border
:
true
,
border
:
true
,
...
@@ -152,7 +161,7 @@
...
@@ -152,7 +161,7 @@
title
:
'
菜单名称
'
title
:
'
菜单名称
'
},
},
{
{
field
:
'
u
rl
'
,
field
:
'
menuU
rl
'
,
title
:
'
URL地址
'
title
:
'
URL地址
'
},
},
{
{
...
@@ -160,24 +169,90 @@
...
@@ -160,24 +169,90 @@
fixed
:
'
right
'
,
fixed
:
'
right
'
,
title
:
'
Role
'
,
title
:
'
Role
'
,
sortable
:
true
,
sortable
:
true
,
editRender
:
{
name
:
'
input
'
,
attrs
:
{
placeholder
:
'
请输入角色
'
}
}
width
:
200
,
slots
:
{
default
:
'
option_slot
'
}
}
}
],
],
data
:
[
{
menuName
:
'
首页
'
,
url
:
'
www.ce.com
'
}
]
data
:
[]
});
});
// 获取菜单列表
const
getMenuList
=
async
()
=>
{
pageLoading
.
value
=
true
;
let
parmas
=
{
menuType
:
1
};
const
[
err
,
ret
]
=
await
tryit
(
menuApi
.
getMenuList
)(
parmas
);
if
(
err
)
{
console
.
error
(
err
);
return
;
}
if
(
ret
?.
code
===
200
)
{
gridOptions
.
data
=
ret
.
data
;
}
pageLoading
.
value
=
false
;
};
// 添加菜单
const
AddMenuRef
=
ref
();
const
handleAdd
=
()
=>
{
AddMenuRef
.
value
.
open
(
'
add
'
,
null
,
'
1
'
);
};
// 编辑菜单
const
handleEdit
=
(
row
)
=>
{
row
.
pid
=
row
.
pid
==
0
?
''
:
row
.
pid
;
// pid特殊处理
AddMenuRef
.
value
.
open
(
'
edit
'
,
row
,
'
1
'
);
// 传递菜单信息
};
// 添加子集
const
handleAddByNext
=
(
row
)
=>
{
let
obj
=
{
pid
:
row
.
menuId
};
AddMenuRef
.
value
.
open
(
'
add
'
,
obj
,
'
1
'
);
// 传递父菜单信息
};
// 删除菜单
const
handleDelete
=
async
(
row
)
=>
{
ElMessageBox
.
confirm
(
`确定要删除此菜单吗?`
,
'
提示
'
,
{
type
:
'
warning
'
}).
then
(
async
(
res
)
=>
{
let
params
=
{
menuId
:
row
.
menuId
,
menuType
:
1
,
pid
:
row
.
pid
};
const
[
err
,
ret
]
=
await
tryit
(
menuApi
.
delMenu
)(
params
);
if
(
err
)
{
console
.
error
(
err
);
return
;
}
if
(
ret
?.
code
===
200
)
{
EleMessage
.
success
(
'
删除成功
'
);
getMenuList
();
// 重新获取菜单列表
}
});
};
// 展开/收起
const
toggleExpand
=
()
=>
{
console
.
log
(
'
🚀 ~ handleUnfold ~ xGrid.value:
'
,
xGrid
.
value
);
// xGrid.value.setRowExpand();
};
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
.wrapper
{
.menuName_text
{
@apply
h-full
grid
gap-x-
[
6px
]
;
display
:
inline-block
;
grid-template-columns
:
400px
1fr
;
:deep
()
{
&
-item
{
.el-icon
{
border-radius
:
6px
;
cursor
:
pointer
;
border
:
1px
solid
#3352fc
;
}
background-color
:
#fff
;
box-shadow
:
0
2px
8px
rgba
(
51
,
82
,
252
,
0
.15
);
overflow
:
hidden
!
important
;
}
}
}
}
</
style
>
</
style
>
src/views/web/components/AddMenu.vue
View file @
8c2efea8
...
@@ -51,15 +51,18 @@
...
@@ -51,15 +51,18 @@
menuId
:
''
,
// 菜单ID
menuId
:
''
,
// 菜单ID
isJoint
:
0
,
// 是否需要拼接参数 1拼,0不拼
isJoint
:
0
,
// 是否需要拼接参数 1拼,0不拼
status
:
0
,
// 状态:0开启,1关闭
status
:
0
,
// 状态:0开启,1关闭
sort
:
0
,
// 排序
sort
:
0
// 排序
});
});
// 打开
// 打开
const
curInfo
=
ref
<
addMenuDto
>
();
const
curInfo
=
ref
<
addMenuDto
>
();
const
open
=
(
type
:
'
add
'
|
'
edit
'
=
'
add
'
,
info
?:
addMenuDto
)
=>
{
const
open
=
(
type
:
'
add
'
|
'
edit
'
=
'
add
'
,
info
?:
addMenuDto
,
menuType
)
=>
{
useType
.
value
=
type
;
useType
.
value
=
type
;
form
.
menuType
=
menuType
;
modalVisible
.
value
=
true
;
modalVisible
.
value
=
true
;
if
(
info
){
getMenuList
();
// 获取菜单列表
if
(
info
)
{
curInfo
.
value
=
info
;
curInfo
.
value
=
info
;
Object
.
assign
(
form
,
info
);
Object
.
assign
(
form
,
info
);
}
}
...
@@ -73,14 +76,14 @@
...
@@ -73,14 +76,14 @@
open
:
open
as
(
type
:
'
add
'
|
'
edit
'
,
info
?:
addThemeDTO
)
=>
void
open
:
open
as
(
type
:
'
add
'
|
'
edit
'
,
info
?:
addThemeDTO
)
=>
void
});
});
onMounted
(()
=>
{
//
onMounted(() => {
getMenuList
();
// 获取菜单列表
//
getMenuList(); // 获取菜单列表
});
//
});
const
menuList
=
ref
([]);
const
menuList
=
ref
([]);
const
getMenuList
=
async
()
=>
{
const
getMenuList
=
async
()
=>
{
pageLoading
.
value
=
true
;
pageLoading
.
value
=
true
;
let
params
=
{
let
params
=
{
menuType
:
'
0
'
menuType
:
form
.
menuType
};
};
const
[
err
,
ret
]
=
await
tryit
(
menuApi
.
getMenuList
)(
params
);
const
[
err
,
ret
]
=
await
tryit
(
menuApi
.
getMenuList
)(
params
);
if
(
err
)
{
if
(
err
)
{
...
...
src/views/web/index.vue
View file @
8c2efea8
...
@@ -6,7 +6,13 @@
...
@@ -6,7 +6,13 @@
<template
#toolbar_slot
>
<template
#toolbar_slot
>
<div
class=
"p-l-4px flex flex-content-start"
>
<div
class=
"p-l-4px flex flex-content-start"
>
<FcCardTip
title=
"菜单维护"
/>
<FcCardTip
title=
"菜单维护"
/>
<el-button
class=
"m-l-4px"
type=
"primary"
plain
size=
"small"
@
click=
"toggleExpand"
>
<el-button
class=
"m-l-4px"
type=
"primary"
plain
size=
"small"
@
click=
"toggleExpand"
>
收起/展开
收起/展开
</el-button>
</el-button>
<el-button
type=
"success"
size=
"small"
@
click=
"handleAdd"
<el-button
type=
"success"
size=
"small"
@
click=
"handleAdd"
...
@@ -73,7 +79,7 @@
...
@@ -73,7 +79,7 @@
getMenuList
();
// 获取菜单列表
getMenuList
();
// 获取菜单列表
});
});
const
xGrid
=
ref
()
const
xGrid
=
ref
()
;
const
pageLoading
=
ref
(
false
);
const
pageLoading
=
ref
(
false
);
const
gridOptions
=
reactive
<
VxeGridProps
>
({
const
gridOptions
=
reactive
<
VxeGridProps
>
({
...
@@ -128,7 +134,7 @@
...
@@ -128,7 +134,7 @@
pageSize
:
10
,
pageSize
:
10
,
pageSizes
:
[
5
,
10
,
15
,
20
,
50
,
100
,
200
,
500
,
1000
]
pageSizes
:
[
5
,
10
,
15
,
20
,
50
,
100
,
200
,
500
,
1000
]
},
},
data
:
[
{
menuName
:
'
首页
'
,
url
:
'
www.ce.com
'
}
]
data
:
[]
});
});
// 展开行配置
// 展开行配置
...
@@ -174,7 +180,7 @@
...
@@ -174,7 +180,7 @@
const
getMenuList
=
async
()
=>
{
const
getMenuList
=
async
()
=>
{
pageLoading
.
value
=
true
;
pageLoading
.
value
=
true
;
let
parmas
=
{
let
parmas
=
{
menuType
:
'
0
'
menuType
:
0
};
};
const
[
err
,
ret
]
=
await
tryit
(
menuApi
.
getMenuList
)(
parmas
);
const
[
err
,
ret
]
=
await
tryit
(
menuApi
.
getMenuList
)(
parmas
);
if
(
err
)
{
if
(
err
)
{
...
@@ -192,13 +198,13 @@
...
@@ -192,13 +198,13 @@
const
AddMenuRef
=
ref
();
const
AddMenuRef
=
ref
();
const
handleAdd
=
()
=>
{
const
handleAdd
=
()
=>
{
AddMenuRef
.
value
.
open
();
AddMenuRef
.
value
.
open
(
'
add
'
,
null
,
'
0
'
);
};
};
// 编辑菜单
// 编辑菜单
const
handleEdit
=
(
row
)
=>
{
const
handleEdit
=
(
row
)
=>
{
row
.
pid
=
row
.
pid
==
0
?
''
:
row
.
pid
;
// pid特殊处理
row
.
pid
=
row
.
pid
==
0
?
''
:
row
.
pid
;
// pid特殊处理
AddMenuRef
.
value
.
open
(
'
edit
'
,
row
);
// 传递菜单信息
AddMenuRef
.
value
.
open
(
'
edit
'
,
row
,
'
0
'
);
// 传递菜单信息
};
};
// 添加子集
// 添加子集
...
@@ -206,7 +212,7 @@
...
@@ -206,7 +212,7 @@
let
obj
=
{
let
obj
=
{
pid
:
row
.
menuId
pid
:
row
.
menuId
};
};
AddMenuRef
.
value
.
open
(
'
add
'
,
obj
);
// 传递父菜单信息
AddMenuRef
.
value
.
open
(
'
add
'
,
obj
,
'
0
'
);
// 传递父菜单信息
};
};
// 删除菜单
// 删除菜单
...
@@ -216,7 +222,7 @@
...
@@ -216,7 +222,7 @@
}).
then
(
async
(
res
)
=>
{
}).
then
(
async
(
res
)
=>
{
let
params
=
{
let
params
=
{
menuId
:
row
.
menuId
,
menuId
:
row
.
menuId
,
menuType
:
'
0
'
,
menuType
:
0
,
pid
:
row
.
pid
pid
:
row
.
pid
};
};
const
[
err
,
ret
]
=
await
tryit
(
menuApi
.
delMenu
)(
params
);
const
[
err
,
ret
]
=
await
tryit
(
menuApi
.
delMenu
)(
params
);
...
@@ -233,16 +239,10 @@
...
@@ -233,16 +239,10 @@
// 展开/收起
// 展开/收起
const
toggleExpand
=
()
=>
{
const
toggleExpand
=
()
=>
{
console
.
log
(
"
🚀 ~ handleUnfold ~ xGrid.value:
"
,
xGrid
.
value
)
console
.
log
(
'
🚀 ~ handleUnfold ~ xGrid.value:
'
,
xGrid
.
value
);
// xGrid.value.setRowExpand();
// xGrid.value.setRowExpand();
}
};
</
script
>
</
script
>
<
style
lang=
"scss"
scoped
>
<
style
lang=
"scss"
scoped
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment