Skip to content

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

菜单权限组件修改

parent bdd3c671
Show whitespace changes
Inline Side-by-side
Showing with 236 additions and 131 deletions
src/components/menu-checkbox.vue 0 → 100644
View file @ 318264ce
<template>
<div class="apass-checkbox">
<!-- 未选中 -->
<label
class="el-checkbox apass_checkbox selected_0"
v-if="item.selected === 0"
>
<span class="el-checkbox__input">
<span class="el-checkbox__inner"></span>
</span>
<span class="el-checkbox__label" v-text="item.menu_name"></span>
</label>
<!-- 选中 -->
<label
class="el-checkbox apass_checkbox selected_1"
v-if="item.selected === 1"
>
<span class="el-checkbox__input is-checked">
<span class="el-checkbox__inner"></span>
</span>
<span class="el-checkbox__label" v-text="item.menu_name"></span>
</label>
<!-- 半选 -->
<label
class="el-checkbox apass_checkbox selected_2"
v-if="item.selected === 2"
>
<span
class="el-checkbox__input is-indeterminate"
tabindex="0"
role="checkbox"
aria-checked="mixed"
>
<span class="el-checkbox__inner"></span>
</span>
<span class="el-checkbox__label" v-text="item.menu_name"></span>
</label>
</div>
</template>
<script>
export default {
props: {
item: {
type: Object,
required: true,
},
},
};
</script>
<style scoped>
.apass_checkbox {
line-height: 40px;
}
</style>
src/components/menu-permission.vue
View file @ 318264ce
<template> <template>
<div class="menu_permission"> <div class="menu_permission">
<ul class="floor_list first" v-if="data && data.length"> <ul
<li v-for="(first_item, first_index) in data" :key="'p_' + first_index"> class="floor_list first"
<div class="floor_item first"> v-if="permissionsList && permissionsList.length"
<label
class="el-checkbox apass_checkbox"
:class="{ 'is-checked': first_item.selected }"
@click="selectedItem(first_item)"
> >
<span <li
class="el-checkbox__input" v-for="(first_item, first_index) in permissionsList"
:class="{ 'is-checked': first_item.selected }" :key="'p_' + first_index"
> >
<span class="el-checkbox__inner"></span> <menu-checkbox
</span> class="floor_item first"
<span :item="first_item"
class="el-checkbox__label" @click.native="selectedItem(first_item)"
v-text="first_item.menu_name" ></menu-checkbox>
></span>
</label>
</div>
<ul <ul
class="floor_list second" class="floor_list second"
v-if="first_item.Child && first_item.Child.length" v-if="first_item.Child && first_item.Child.length"
...@@ -28,24 +21,11 @@ ...@@ -28,24 +21,11 @@
v-for="(second_item, second_index) in first_item.Child" v-for="(second_item, second_index) in first_item.Child"
:key="'p_' + first_index + '_' + second_index" :key="'p_' + first_index + '_' + second_index"
> >
<div class="floor_item second"> <menu-checkbox
<label class="floor_item second"
class="el-checkbox apass_checkbox" :item="second_item"
:class="{ 'is-checked': second_item.selected }" @click.native="selectedItem(second_item, first_item)"
@click="selectedItem(second_item, first_item)" ></menu-checkbox>
>
<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.menu_name"
></span>
</label>
</div>
<ul <ul
class="floor_list third" class="floor_list third"
v-if="second_item.Child && second_item.Child.length" v-if="second_item.Child && second_item.Child.length"
...@@ -56,31 +36,19 @@ ...@@ -56,31 +36,19 @@
'p_' + first_index + '_' + second_index + '_' + third_index 'p_' + first_index + '_' + second_index + '_' + third_index
" "
> >
<div class="floor_item third"> <menu-checkbox
<label class="floor_item third"
class="el-checkbox apass_checkbox" :item="third_item"
:class="{ 'is-checked': third_item.selected }" @click.native="
@click="selectedItem(third_item, second_item, first_item)" selectedItem(third_item, second_item, first_item)
> "
<span ></menu-checkbox>
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.menu_name"
></span>
</label>
</div>
<ul <ul
class="floor_list fourth" class="floor_list fourth"
v-if="third_item.Child && third_item.Child.length" v-if="third_item.Child && third_item.Child.length"
> >
<li> <li>
<div class="floor_item fourth"> <menu-checkbox
<label
v-for="(fourth_item, fourth_index) in third_item.Child" v-for="(fourth_item, fourth_index) in third_item.Child"
:key=" :key="
'p_' + 'p_' +
...@@ -92,9 +60,9 @@ ...@@ -92,9 +60,9 @@
'_' + '_' +
fourth_index fourth_index
" "
class="el-checkbox apass_checkbox" class="floor_item fourth"
:class="{ 'is-checked': fourth_item.selected }" :item="fourth_item"
@click=" @click.native="
selectedItem( selectedItem(
fourth_item, fourth_item,
third_item, third_item,
...@@ -102,19 +70,7 @@ ...@@ -102,19 +70,7 @@
first_item first_item
) )
" "
> ></menu-checkbox>
<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.menu_name"
></span>
</label>
</div>
</li> </li>
</ul> </ul>
</li> </li>
...@@ -127,72 +83,173 @@ ...@@ -127,72 +83,173 @@
</template> </template>
<script> <script>
import menuCheckbox from "./menu-checkbox";
export default { export default {
components: {
menuCheckbox,
},
model: { model: {
prop: "data", prop: "permissions",
event: "change-permissions", event: "change-permissions",
}, },
props: { props: {
data: { permissions: {
type: Array,
default: () => [],
},
list: {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
}, },
data: () => ({
initFlag: true,
permissionsList: [],
}),
watch: {
permissions: {
handler() {
this.init();
},
deep: true,
},
},
methods: { methods: {
init() {
if (!this.initFlag) {
return;
}
console.log("menu permission init.")
let permissionsList = this.deepClone(this.list);
let permissions = this.permissions;
permissionsList.forEach((item) => {
this.traverse(item, (item) => {
let target = permissions.find((v) => v.menu_id === item.menu_id);
this.$set(item, "selected", target ? 1 : 0);
});
});
this.permissionsList = permissionsList;
this.initPermissionsList();
},
traverse(obj, cb) {
cb(obj);
if (obj.Child && obj.Child.length) {
obj.Child.forEach((item) => {
this.traverse(item, cb);
});
}
},
deepClone(source) {
if (!source || typeof source !== "object") {
throw new Error("error arguments from deepClone");
}
let result = source.constructor === Array ? [] : {};
for (let key in source) {
if (source[key] && typeof source[key] === "object") {
result[key] = source[key].constructor === Array ? [] : {};
result[key] = this.deepClone(source[key]);
} else {
result[key] = source[key];
}
}
return result;
},
selectedItem( selectedItem(
selected_item, selected_item,
p_item = null, // 父元素 p_item = null, // 父元素
gp_item = null, // 祖父元素 gp_item = null, // 祖父元素
ggp_item = null // 曾祖父元素 ggp_item = null // 曾祖父元素
) { ) {
let selected = !(selected_item.selected || false); let selected = selected_item.selected === 1 ? 0 : 1;
this.traverse(selected_item, (v) => { this.traverse(selected_item, (item) => {
this.$set(v, "selected", selected); this.$set(item, "selected", selected);
}); });
if (p_item) { if (p_item) {
let selectedAll = false; this.upParentSelected(p_item);
}
p_item.Child.forEach((item) => { if (gp_item) {
selectedAll = selectedAll || item.selected; this.upParentSelected(gp_item);
}); }
this.$set(p_item, "selected", selectedAll); if (ggp_item) {
this.upParentSelected(ggp_item);
} }
if (gp_item) { this.uppermissions();
let selectedAll = false; },
initPermissionsList() {
this.permissionsList.forEach((item) => {
this.traverse(item, (item) => {
let selected = item.selected;
gp_item.Child.forEach((item) => { if (item.selected !== 0) {
selectedAll = selectedAll || item.selected; let allSelcted = true;
item.Child &&
item.Child.forEach((v) => {
allSelcted = v.selected === 0 && allSelcted;
}); });
this.$set(gp_item, "selected", selectedAll); this.$set(item, "selected", allSelcted ? 1 : 2);
} }
});
});
if (ggp_item) { // this.$emit("change-list", this.permissionsList);
let selectedAll = false; },
upParentSelected(parent) {
let selectedLength = 0;
let selected = parent.selected;
ggp_item.Child.forEach((item) => { parent.Child.forEach((item) => {
selectedAll = selectedAll || item.selected; if (item.selected === 1) {
selectedLength++;
}
}); });
this.$set(ggp_item, "selected", selectedAll); if (selectedLength === parent.Child.length) {
selected = 1;
} else if (selectedLength > 0) {
selected = 2;
} }
this.$emit("change", this.data); this.$set(parent, "selected", selected);
}, },
traverse(obj, cb) { uppermissions() {
cb(obj); let permissions = [];
if (obj.Child && obj.Child.length) { this.permissionsList.forEach((item) => {
obj.Child.forEach((item) => { this.traverse(item, (item) => {
this.traverse(item, cb); if (item.selected !== 0) {
permissions.push({
menu_name: item.menu_name,
menu_id: item.menu_id,
}); });
} }
});
});
this.initFlag = false;
// this.$emit("change-list", this.permissionsList);
this.$emit("change-permissions", this.permissions);
}, },
}, },
mounted() {
this.init();
},
}; };
</script> </script>
...@@ -229,7 +286,4 @@ export default { ...@@ -229,7 +286,4 @@ export default {
width: 100%; width: 100%;
justify-content: flex-start; justify-content: flex-start;
} }
.apass_checkbox {
line-height: 40px;
}
</style> </style>
src/pages/authority/role/addroles.vue
View file @ 318264ce
...@@ -57,7 +57,6 @@ ...@@ -57,7 +57,6 @@
<menu-permission <menu-permission
v-model="permission_arr" v-model="permission_arr"
:list="permissionData" :list="permissionData"
@change="changePermissions"
></menu-permission> ></menu-permission>
</div> </div>
</div> </div>
...@@ -160,7 +159,7 @@ export default { ...@@ -160,7 +159,7 @@ export default {
.then((result) => { .then((result) => {
console.log(result); console.log(result);
this.service_node = result[1].data.data; this.service_node = result[1].data.data;
this.permission_arr = result[1].data.data this.permission_arr = result[1].data.data;
// this.deal_tree_data(result[0].data.data, result[1].data.data); // this.deal_tree_data(result[0].data.data, result[1].data.data);
this.permissionData = result[0].data.data; this.permissionData = result[0].data.data;
}) })
...@@ -304,10 +303,6 @@ export default { ...@@ -304,10 +303,6 @@ export default {
} }
}); });
}, },
changePermissions(values) {
console.log(values);
console.log(this.permissionData);
},
get_now_user() { get_now_user() {
this.$api.user.getNowUser().then(({ data }) => { this.$api.user.getNowUser().then(({ data }) => {
let baseinfo = { let baseinfo = {
......
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