Skip to content

A
apaas-ui
Commit 38e344e4 authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

菜单权限多选组件重构

parent 91c9faaa
Hide whitespace changes
Inline Side-by-side
Showing with 356 additions and 166 deletions
src/assets/css/index.css
View file @ 38e344e4
...@@ -582,4 +582,13 @@ width: 620px!important; ...@@ -582,4 +582,13 @@ width: 620px!important;
font-size: 14px; font-size: 14px;
color: #dde4ff; color: #dde4ff;
margin: 0 20px; margin: 0 20px;
}
.apass_checkbox .el-checkbox__input.is-checked .el-checkbox__inner,
.apass_checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #626de9;
border-color: #515fe7;
}
.apass_checkbox .el-checkbox__input.is-checked + .el-checkbox__label {
color: #58617a;
} }
\ No newline at end of file
src/components/menu-permission.vue
View file @ 38e344e4
<template> <template>
<div class="menu_permission"> <div class="menu_permission">
<el-table border :data="data"> <ul class="floor_list first" v-if="data && data.length">
<el-table-column label="名称" width="214"> <li v-for="(first_item, first_index) in data" :key="'p_' + first_index">
<template slot-scope="scope"> <div class="floor_item first">
<div class="permission_list"> <label
<el-checkbox class="el-checkbox apass_checkbox"
:value="selectAllInfo[scope.row.prop]" :class="{ 'is-checked': first_item.selected }"
@change="selectAll(scope.row.prop)" @click="selectedItem(first_item)"
>
<span
class="el-checkbox__input"
:class="{ 'is-checked': first_item.selected }"
> >
{{ scope.row.name }} <span class="el-checkbox__inner"></span>
</el-checkbox> </span>
</div> <span class="el-checkbox__label" v-text="first_item.name"></span>
</template> </label>
</el-table-column> </div>
<el-table-column label="选项"> <ul
<template slot-scope="scope"> class="floor_list second"
<el-checkbox-group v-if="first_item.children && first_item.children.length"
v-model="permissions[scope.row.prop]" >
class="permission_list" <li
@change="selectPermission" v-for="(second_item, second_index) in first_item.children"
:key="'p_' + first_index + '_' + second_index"
> >
<el-checkbox <div class="floor_item second">
v-for="(item, index) in scope.row.children" <label
:label="item.value" class="el-checkbox apass_checkbox"
:key="'permission_' + index" :class="{ 'is-checked': second_item.selected }"
@click="selectedItem(second_item, first_item)"
>
<span
class="el-checkbox__input"
:class="{ 'is-checked': second_item.selected }"
>
<span class="el-checkbox__inner"></span>
</span>
<span
class="el-checkbox__label"
v-text="second_item.name"
></span>
</label>
</div>
<ul
class="floor_list third"
v-if="second_item.children && second_item.children.length"
> >
{{ item.name }} <li
</el-checkbox> v-for="(third_item, third_index) in second_item.children"
</el-checkbox-group> :key="
</template> 'p_' + first_index + '_' + second_index + '_' + third_index
</el-table-column> "
</el-table> >
<div class="floor_item third">
<label
class="el-checkbox apass_checkbox"
:class="{ 'is-checked': third_item.selected }"
@click="selectedItem(third_item, second_item, first_item)"
>
<span
class="el-checkbox__input"
:class="{ 'is-checked': third_item.selected }"
>
<span class="el-checkbox__inner"></span>
</span>
<span
class="el-checkbox__label"
v-text="third_item.name"
></span>
</label>
</div>
<ul
class="floor_list fourth"
v-if="third_item.children && third_item.children.length"
>
<li>
<div class="floor_item fourth">
<label
v-for="(fourth_item,
fourth_index) in third_item.children"
:key="
'p_' +
first_index +
'_' +
second_index +
'_' +
third_index +
'_' +
fourth_index
"
class="el-checkbox apass_checkbox"
:class="{ 'is-checked': fourth_item.selected }"
@click="
selectedItem(
fourth_item,
third_item,
second_item,
first_item
)
"
>
<span
class="el-checkbox__input"
:class="{ 'is-checked': fourth_item.selected }"
>
<span class="el-checkbox__inner"></span>
</span>
<span
class="el-checkbox__label"
v-text="fourth_item.name"
></span>
</label>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div> </div>
</template> </template>
...@@ -41,86 +131,104 @@ export default { ...@@ -41,86 +131,104 @@ export default {
event: "change-permissions", event: "change-permissions",
}, },
props: { props: {
permissions: {
type: Object,
default: {},
},
data: { data: {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
}, },
data: () => ({
selectAllInfo: {},
}),
watch: {
permissions: {
handler() {
this.upSelectAllInfo();
},
deep: true,
},
},
methods: { methods: {
selectPermission(values) { selectedItem(
this.$emit("change-permissions", this.permissions); selected_item,
}, p_item = null, // 父元素
upSelectAllInfo() { gp_item = null, // 祖父元素
this.data.forEach((item) => { ggp_item = null // 曾祖父元素
let values = this.permissions[item.prop]; ) {
let datas = this.data.find((v) => v.prop === item.prop).children; let selected = !(selected_item.selected || false);
let selectAllFlag = true;
this.traverse(selected_item, (v) => {
this.$set(v, "selected", selected);
});
if (p_item) {
let selectedAll = true;
datas.forEach((v) => { p_item.children.forEach((item) => {
selectAllFlag = selectAllFlag && values.indexOf(v.value) > -1; selectedAll = selectedAll && item.selected;
}); });
this.selectAllInfo[item.prop] = selectAllFlag; this.$set(p_item, "selected", selectedAll);
}); }
},
selectAll(prop) {
let newValues = { ...this.permissions };
this.selectAllInfo[prop] = !this.selectAllInfo[prop]; if (gp_item) {
let selectedAll = true;
if (this.selectAllInfo[prop]) { gp_item.children.forEach((item) => {
newValues[prop] = this.data selectedAll = selectedAll && item.selected;
.find((item) => item.prop === prop) });
.children.map((item) => item.value);
} else { this.$set(gp_item, "selected", selectedAll);
newValues[prop] = []; }
if (ggp_item) {
let selectedAll = true;
ggp_item.children.forEach((item) => {
selectedAll = selectedAll && item.selected;
});
this.$set(ggp_item, "selected", selectedAll);
}
this.$emit("change", this.data);
},
traverse(obj, cb) {
cb(obj);
if (obj.children && obj.children.length) {
obj.children.forEach((item) => {
this.traverse(item, cb);
});
} }
this.$emit("change-permissions", newValues);
}, },
}, },
mounted() { mounted() {},
this.upSelectAllInfo();
},
}; };
</script> </script>
<style scoped>
<style> .floor_list > li {
.menu_permission .el-table__header-wrapper { display: flex;
display: none; justify-content: flex-start;
align-items: stretch;
} }
.permission_list .el-checkbox { .floor_list.first > li {
color: #58617a; border: 2px solid #f4f7fc;
line-height: 40px; border-radius: 7px;
overflow: hidden;
} }
.permission_list .el-checkbox__input.is-checked .el-checkbox__inner, .floor_list:not(.first) {
.permission_list .el-checkbox__input.is-indeterminate .el-checkbox__inner { flex-grow: 1;
background-color: #626de9;
border-color: #515fe7;
} }
.permission_list .el-checkbox__input.is-checked + .el-checkbox__label { .floor_list:not(.first) > li {
color: #58617a; border-left: 2px solid #f4f7fc;
border-top: 2px solid #f4f7fc;
margin: -2px 0 0 -2px;
} }
.menu_permission .el-table .cell { .floor_list.first > li:not(:first-child) {
padding: 0 50px !important; margin-top: 20px;
} }
.menu_permission .el-table--border { .floor_item {
border: 1px solid #f4f7fc; min-width: 230px;
border-radius: 6px; padding: 10px 30px;
display: flex;
justify-content: center;
align-items: center;
}
.floor_item.fourth {
width: 100%;
justify-content: flex-start;
}
.apass_checkbox {
line-height: 40px;
} }
</style> </style>
src/pages/authority/addroles.vue
View file @ 38e344e4
...@@ -51,9 +51,8 @@ ...@@ -51,9 +51,8 @@
style="margin-bottom:100px;margin-top:20px;" style="margin-bottom:100px;margin-top:20px;"
> >
<menu-permission <menu-permission
v-model="permission"
:data="permissionData" :data="permissionData"
@change-permissions="changePermissions" @change="changePermissions"
></menu-permission> ></menu-permission>
</div> </div>
</div> </div>
...@@ -77,126 +76,200 @@ export default { ...@@ -77,126 +76,200 @@ export default {
date: "", date: "",
}, },
now_user: 2, //0：普通用户，1：组织管理员，2：超级管理员 now_user: 2, //0：普通用户，1：组织管理员，2：超级管理员
permission: {
value1: [11, 13],
value2: [],
value3: [31, 32, 33],
value4: [],
value5: [],
},
permissionData: [ permissionData: [
{ {
name: "权限管理1", name: "权限管理1",
prop: "value1", selected: false,
value: 1,
children: [ children: [
{ {
name: "权限管理1", name: "权限管理1-1",
selected: false,
value: 11, value: 11,
children: [
{
name: "权限管理1-1-1",
selected: false,
value: 111,
children: [
{
name: "权限管理1-1-1-1",
selected: false,
value: 1111,
},
{
name: "权限管理1-1-1-2",
selected: false,
value: 1112,
},
{
name: "权限管理1-1-1-3",
selected: false,
value: 1113,
},
],
},
],
}, },
{ {
name: "权限管理2", name: "权限管理1-2",
selected: false,
value: 12, value: 12,
}, children: [
{ {
name: "权限管理3", name: "权限管理1-2-1",
value: 13, selected: false,
value: 121,
children: [
{
name: "权限管理1-2-1-1",
selected: false,
value: 1211,
},
{
name: "权限管理1-2-1-2",
selected: false,
value: 1212,
},
{
name: "权限管理1-2-1-3",
selected: false,
value: 1213,
},
],
},
],
}, },
], ],
}, },
{ {
name: "权限管理2", name: "权限管理2",
prop: "value2", selected: false,
value: 2,
children: [ children: [
{ {
name: "权限管理1", name: "权限管理2-1",
selected: false,
value: 21, value: 21,
children: [
{
name: "权限管理2-1-1",
selected: false,
value: 211,
children: [
{
name: "权限管理2-1-1-1",
selected: false,
value: 2111,
},
{
name: "权限管理2-1-1-2",
selected: false,
value: 2112,
},
{
name: "权限管理2-1-1-3",
selected: false,
value: 2113,
},
],
},
],
}, },
{ {
name: "权限管理2", name: "权限管理2-2",
selected: false,
value: 22, value: 22,
}, children: [
{ {
name: "权限管理3", name: "权限管理2-2-1",
value: 23, selected: false,
}, value: 221,
{ children: [
name: "权限管理4", {
value: 24, name: "权限管理2-2-1-1",
}, selected: false,
{ value: 2211,
name: "权限管理5", },
value: 25, {
}, name: "权限管理2-2-1-2",
{ selected: false,
name: "权限管理6", value: 2212,
value: 26, },
}, {
{ name: "权限管理2-2-1-3",
name: "权限管理7", selected: false,
value: 27, value: 2213,
}, },
{ ],
name: "权限管理8", },
value: 28, ],
},
{
name: "权限管理9",
value: 29,
}, },
], ],
}, },
{ {
name: "权限管理3", name: "权限管理3",
prop: "value3", selected: false,
value: 3,
children: [ children: [
{ {
name: "权限管理1", name: "权限管理3-1",
selected: false,
value: 31, value: 31,
children: [
{
name: "权限管理3-1-1",
selected: false,
value: 311,
children: [
{
name: "权限管理3-1-1-1",
selected: false,
value: 3111,
},
{
name: "权限管理3-1-1-2",
selected: false,
value: 3112,
},
{
name: "权限管理3-1-1-3",
selected: false,
value: 3113,
},
],
},
],
}, },
{ {
name: "权限管理2", name: "权限管理3-2",
selected: false,
value: 32, value: 32,
}, children: [
{ {
name: "权限管理3", name: "权限管理3-2-1",
value: 33, selected: false,
value: 321,
},
],
}, },
], ],
}, },
{ {
name: "权限管理4", name: "权限管理4",
prop: "value4", selected: false,
value: 4,
children: [ children: [
{ {
name: "权限管理1", name: "权限管理4-1",
selected: false,
value: 41, value: 41,
}, },
{ {
name: "权限管理2", name: "权限管理4-2",
selected: false,
value: 42, value: 42,
}, },
{
name: "权限管理4",
value: 43,
},
],
},
{
name: "权限管理5",
prop: "value5",
children: [
{
name: "权限管理1",
value: 51,
},
{
name: "权限管理2",
value: 52,
},
{
name: "权限管理5",
value: 53,
},
], ],
}, },
], ],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment