Skip to content

Commit 91eafbd

Browse files
committed
增加菜单不显示也可以分配权限功能VolElementMenu.vue VolElementMenuChild.vue Sys_Menu.vue Sys_MenuService.cs UserContext.cs
1 parent 1c4dc4a commit 91eafbd

File tree

10 files changed

+270
-193
lines changed

10 files changed

+270
-193
lines changed

Vol.Vue/src/components/basic/VolElementMenu.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<template v-for="(item) in treeList">
1010
<el-submenu :key="item.id"
1111
:index="''+item.id"
12-
v-if="item.children.length">
12+
v-if="item.children.length&&item.enable==1">
1313
<template slot="title">
1414
<Icon :type="item.icon||'ios-aperture'" />
1515
<span slot="title"> {{ item.name }}</span>
@@ -19,6 +19,7 @@
1919
</el-submenu>
2020
<template v-else>
2121
<el-menu-item class="menu-item-lv1"
22+
v-if="item.enable==1"
2223
:key="item.id"
2324
:index="''+item.id">
2425
<Icon :type="item.icon||'ios-aperture'" />

Vol.Vue/src/components/basic/VolElementMenuChild.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
<template v-for="(item, index) of list">
44
<el-menu-item :key="index"
55
:index="''+item.id"
6-
v-if="!item.children.length">
6+
v-if="!item.children.length&&item.enable==1">
77
<!-- <Icon :type="item.icon" /> -->
88
<span slot="title"> {{ item.name }}</span>
99
</el-menu-item>
1010
<el-submenu :key="index"
1111
:index="''+item.id"
12-
v-if="item.children.length">
12+
v-if="item.children.length&&item.enable==1">
1313
<template slot="title">
1414
<!-- <Icon :type="item.icon||'ios-aperture'" /> -->
1515
<span> {{ item.name }}</span>

Vol.Vue/src/views/system/Sys_Menu.vue

Lines changed: 111 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
11
<template>
22
<div class="menu-container">
3-
<vol-box :width="940" :mask="true" :height="500" title="图标列表" :model.sync="model">
3+
<vol-box :width="940"
4+
:mask="true"
5+
:height="500"
6+
title="图标列表"
7+
:model.sync="model">
48
<Icons :onSelect="onSelect"></Icons>
59
</vol-box>
6-
<vol-box :width="600" :mask="true" :height="270" title="其他权限" :model.sync="actionModel">
7-
<vol-form ref="actionForm" :formRules="actionOptions" :formFileds="actionFields">
10+
<vol-box :width="600"
11+
:mask="true"
12+
:height="270"
13+
title="其他权限"
14+
:model.sync="actionModel">
15+
<vol-form ref="actionForm"
16+
:formRules="actionOptions"
17+
:formFileds="actionFields">
818
<div slot="header">
919
<Alert show-icon>
1020
配置的其他权限
@@ -13,14 +23,20 @@
1323
</Alert>
1424
</div>
1525
</vol-form>
16-
<Button slot="footer" type="info" @click="otherAction">确 认</Button>
26+
<Button slot="footer"
27+
type="info"
28+
@click="otherAction">确 认</Button>
1729
</vol-box>
1830

1931
<div class="menu-left">
20-
<Alert class="module-name" show-icon>菜单列表</Alert>
21-
<div class="menu-tree" style="height:95%;">
32+
<Alert class="module-name"
33+
show-icon>菜单列表</Alert>
34+
<div class="menu-tree"
35+
style="height:95%;">
2236
<el-scrollbar style="height:100%;">
23-
<VolMenu :onOpenChange="onOpenChange" :options="tree" :onSelect="menuSelect"></VolMenu>
37+
<VolMenu :onOpenChange="onOpenChange"
38+
:options="tree"
39+
:onSelect="menuSelect"></VolMenu>
2440
</el-scrollbar>
2541
</div>
2642
</div>
@@ -30,53 +46,64 @@
3046
<Divider>
3147
<span icon="ivu-icon ivu-icon-md-podium">{{divider}}</span>
3248
</Divider>
33-
<Alert style="box-shadow: rgb(214, 214, 214) 0px 4px 21px; line-height: 1.8;" show-icon>
49+
<Alert style="box-shadow: rgb(214, 214, 214) 0px 4px 21px; line-height: 1.8;"
50+
show-icon>
3451
<p>1、 如果是用代码生器生成的Vue页面,菜单配置的Url则为Vue项目中src->router->viewGrid.js对应表名的path路径</p>
3552
<p>2、 如果只是建一级菜单或空菜单url不用填写,【视图/表名】填写.或者/</p>
3653
</Alert>
37-
<vol-form class="form-content" ref="form" :formRules="options" :formFileds="fields">
54+
<vol-form class="form-content"
55+
ref="form"
56+
:formRules="options"
57+
:formFileds="fields">
3858
<div slot="footer">
3959
<div class="action">
40-
<label class="ivu-form-item-label" style="width: 100px;">权限:</label>
60+
<label class="ivu-form-item-label"
61+
style="width: 100px;">权限:</label>
4162
<div class="ck">
42-
<Checkbox
43-
:indeterminate="indeterminate"
44-
:value="checkAll"
45-
@click.prevent.native="handleCheckAll"
46-
>全选</Checkbox>
47-
<CheckboxGroup v-model="actions" @on-change="checkAllGroupChange">
48-
<Checkbox
49-
v-for="(item,index) in action"
50-
:key="index"
51-
:label="item.value"
52-
>{{item.text+'('+item.value+')'}}</Checkbox>
63+
<Checkbox :indeterminate="indeterminate"
64+
:value="checkAll"
65+
@click.prevent.native="handleCheckAll">全选</Checkbox>
66+
<CheckboxGroup v-model="actions"
67+
@on-change="checkAllGroupChange">
68+
<Checkbox v-for="(item,index) in action"
69+
:key="index"
70+
:label="item.value">{{item.text+'('+item.value+')'}}</Checkbox>
5371
</CheckboxGroup>
54-
<Button @click="actionModel=true" type="dashed">其他权限</Button>
72+
<Button @click="actionModel=true"
73+
type="dashed">其他权限</Button>
5574
</div>
5675
</div>
5776
<div class="icon-item">
58-
<label class="ivu-form-item-label" style="width: 100px;">图标:</label>
77+
<label class="ivu-form-item-label"
78+
style="width: 100px;">图标:</label>
5979
<div class="on-icon">
6080
<span style="position: relative;">
61-
<i
62-
v-if="icon!=''"
63-
@click="removeIcon"
64-
class="remove ivu-icon ivu-icon-md-remove-circle"
65-
></i>
66-
<i
67-
style="margin-right: 15px;font-size: 32px;"
68-
:class="['ivu-icon ivu-icon-'+icon]"
69-
></i>
81+
<i v-if="icon!=''"
82+
@click="removeIcon"
83+
class="remove ivu-icon ivu-icon-md-remove-circle"></i>
84+
<i style="margin-right: 15px;font-size: 32px;"
85+
:class="['ivu-icon ivu-icon-'+icon]"></i>
7086
</span>
71-
<Button @click="model=true" type="dashed">选择图标</Button>
87+
<Button @click="model=true"
88+
type="dashed">选择图标</Button>
7289
</div>
7390
</div>
7491
<div class="m-btn">
75-
<Button type="info" icon="md-checkmark-circle" @click="save">保存</Button>
76-
<Button type="success" icon="md-add" @click="add">新建</Button>
77-
<Button type="warning" icon="md-add-circle" @click="addChild">添加子级</Button>
78-
<Button type="error" icon="ios-barcode-outline" @click="addBrother">添加同级</Button>
79-
<Button type="info" icon="ios-remove" @click="delMenu">删除菜单</Button>
92+
<Button type="info"
93+
icon="md-checkmark-circle"
94+
@click="save">保存</Button>
95+
<Button type="success"
96+
icon="md-add"
97+
@click="add">新建</Button>
98+
<Button type="warning"
99+
icon="md-add-circle"
100+
@click="addChild">添加子级</Button>
101+
<Button type="error"
102+
icon="ios-barcode-outline"
103+
@click="addBrother">添加同级</Button>
104+
<Button type="info"
105+
icon="ios-remove"
106+
@click="delMenu">删除菜单</Button>
80107
</div>
81108
</div>
82109
</vol-form>
@@ -98,7 +125,7 @@ export default {
98125
VolMenu: () => import("@/../src/components/basic/VolMenu"),
99126
},
100127
methods: {
101-
otherAction() {
128+
otherAction () {
102129
this.$refs.actionForm.validate(() => {
103130
let exist = this.action.some((x) => {
104131
return (
@@ -116,7 +143,7 @@ export default {
116143
});
117144
});
118145
},
119-
handleCheckAll() {
146+
handleCheckAll () {
120147
if (this.actions == this.action.length) {
121148
this.checkAll = false;
122149
} else {
@@ -131,7 +158,7 @@ export default {
131158
this.actions = [];
132159
}
133160
},
134-
checkAllGroupChange(data) {
161+
checkAllGroupChange (data) {
135162
if (data.length === this.action.length) {
136163
this.indeterminate = false;
137164
this.checkAll = true;
@@ -143,7 +170,7 @@ export default {
143170
this.checkAll = false;
144171
}
145172
},
146-
add(obj) {
173+
add (obj) {
147174
this.$refs.form.reset(
148175
Object.assign({ enable: 1 }, obj || { parentId: 0 })
149176
);
@@ -152,15 +179,15 @@ export default {
152179
//2020.08.07新建菜单时,默认选中查询按钮权限
153180
this.actions = ["Search"];
154181
},
155-
addChild() {
182+
addChild () {
156183
if (!this.isSelect()) return;
157184
this.add({ parentId: this.fields.menu_Id });
158185
},
159-
addBrother() {
186+
addBrother () {
160187
if (!this.isSelect()) return;
161188
this.add({ parentId: this.fields.parentId });
162189
},
163-
delMenu() {
190+
delMenu () {
164191
//2020.08.07增加菜单删除功能
165192
if (this.fields.menu_Id == 0) {
166193
return this.$Message.error("请选择菜单");
@@ -188,7 +215,7 @@ export default {
188215
},
189216
});
190217
},
191-
save() {
218+
save () {
192219
this.$refs.form.validate(() => {
193220
this.fields.auth = "";
194221
if (this.actions) {
@@ -234,29 +261,29 @@ export default {
234261
});
235262
});
236263
},
237-
isSelect() {
264+
isSelect () {
238265
let id = this.fields.menu_Id;
239266
if (!id) {
240267
this.$message.error("请选择节点");
241268
return false;
242269
}
243270
return true;
244271
},
245-
onSelect(icon) {
272+
onSelect (icon) {
246273
this.icon = icon;
247274
this.$message.info(icon);
248275
},
249-
removeIcon() {
276+
removeIcon () {
250277
this.icon = "";
251278
},
252-
onOpenChange(node) {
279+
onOpenChange (node) {
253280
if (node.length == 0) return;
254281
this.getTreeItem(node[node.length > 1 ? node.length - 1 : 0]);
255282
},
256-
menuSelect(node) {
283+
menuSelect (node) {
257284
this.getTreeItem(node);
258285
},
259-
getTreeItem(node) {
286+
getTreeItem (node) {
260287
this.http
261288
.post("/api/menu/getTreeItem?menuId=" + node, {}, true)
262289
.then((x) => {
@@ -286,21 +313,21 @@ export default {
286313
this.$refs.form.reset(x);
287314
});
288315
},
289-
initTree() {
316+
initTree () {
290317
//2020.08.07修改菜单初始化
291318
this.http.post("/api/menu/getMenu", {}, true).then((x) => {
292319
this.tree = x;
293320
});
294321
},
295322
},
296-
created() {
323+
created () {
297324
this.actionValues = this.action.map((x) => {
298325
return x.value;
299326
});
300327
//2020.08.07修改菜单初始化
301328
this.initTree();
302329
},
303-
data() {
330+
data () {
304331
return {
305332
divider: "菜单配置",
306333
actionModel: false,
@@ -377,11 +404,37 @@ export default {
377404
field: "enable",
378405
dataType: "int",
379406
required: true,
380-
type: "switch",
407+
type: "select",
381408
data: [
382-
{ key: "1", value: "" },
383-
{ key: "", value: "" },
409+
{ key: 1, value: "启用" },
410+
{ key: 2, value: "显示不显示" },
411+
{ key: 0, value: "禁用" },
384412
],
413+
extra: {
414+
render: h => {
415+
return h(
416+
"Poptip",
417+
{
418+
props: { "word-wrap": true, trigger: "hover", width: "400", }, style: { color: "#03A9F4", cursor: "pointer" },
419+
on: { click: () => { this.$Message.info("点击事件") } }
420+
},
421+
[
422+
h(
423+
"i",
424+
{
425+
style: {},
426+
}, [
427+
h("span", { class: "ivu-icon ivu-icon-ios-alert-outline" }, ["配置说明"]),
428+
]
429+
),
430+
h("div", { slot: "content" },
431+
[h("p", {}, "1、启用:页面上只会显示启用的菜单"),
432+
h("p", {}, "2、启用不显示:页面不需要显示,但又需要分配权限,请使用此配置"),
433+
h("p", {}, "3、禁止:菜单不会启用也不会参与权限分配")])
434+
]
435+
);
436+
}
437+
}
385438
},
386439
{
387440
title: "创建时间",
@@ -390,31 +443,7 @@ export default {
390443
displayType: "label",
391444
disabled: true,
392445
},
393-
// {
394-
// title: "修改时间",
395-
// field: "modifyDate",
396-
// dataType: "datetime",
397-
// displayType: "label",
398-
// disabled: true
399-
// }
400446
],
401-
// ,
402-
// [
403-
// {
404-
// title: "创建人",
405-
// field: "creator",
406-
// dataType: "string",
407-
// displayType: "label",
408-
// disabled: true
409-
// },
410-
// {
411-
// title: "创建时间",
412-
// field: "createDate",
413-
// dataType: "datetime",
414-
// displayType: "label",
415-
// disabled: true
416-
// }
417-
// ]
418447
],
419448
fields: {
420449
menu_Id: 0,

0 commit comments

Comments
 (0)