Skip to content

C
confucius
Commit 7901195d authored by Mac's avatar Mac
Browse files
Options

1

parent bd20cbe6
Hide whitespace changes
Inline Side-by-side
Showing with 213 additions and 26 deletions
src/App.vue
View file @ 7901195d
...@@ -12,7 +12,7 @@ export default { ...@@ -12,7 +12,7 @@ export default {
<style> <style>
@import url('~assets/css/font.css'); @import url('~assets/css/font.css');
@import url('//at.alicdn.com/t/font_2077629_q3ogqen6wec.css'); @import url('//at.alicdn.com/t/font_2077629_e5kw4py21v.css');
html, html,
body, body,
......
src/components/system/role-form.vue
View file @ 7901195d
...@@ -18,30 +18,37 @@ ...@@ -18,30 +18,37 @@
white-space: nowrap; white-space: nowrap;
} }
.role-form .role_TreeList { .role-form .role_TreeList {
height: 250px; height: 250px;
overflow: auto; overflow: auto;
} }
.role-form li{
.role-form .role_TreeList::-webkit-scrollbar { list-style-type:none
width: 3px;
height: 3px;
background-color: #F5F5F5;
} }
.role_TreeList ul{
/*定义滚动条轨道 内阴影+圆角*/ margin-left: 10px;
.role-form .role_TreeList::-webkit-scrollbar-track { padding: 0;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
} }
/*.role-form .role_TreeList::-webkit-scrollbar {*/
/* width: 3px;*/
/* height: 3px;*/
/* background-color: #F5F5F5;*/
/*}*/
/*定义滑块 内阴影+圆角*/ /*!*定义滚动条轨道 内阴影+圆角*!*/
.role-form .role_TreeList::-webkit-scrollbar-thumb { /*.role-form .role_TreeList::-webkit-scrollbar-track {*/
border-radius: 10px; /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
-webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); /* border-radius: 10px;*/
background-color: #0ae; /* background-color: #F5F5F5;*/
} /*}*/
/*!*定义滑块 内阴影+圆角*!*/
/*.role-form .role_TreeList::-webkit-scrollbar-thumb {*/
/* border-radius: 10px;*/
/* -webkit-box-shadow: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));*/
/* background-color: #0ae;*/
/*}*/
.role-form .role_MenuList span { .role-form .role_MenuList span {
...@@ -52,6 +59,9 @@ ...@@ -52,6 +59,9 @@
line-height: 38px; line-height: 38px;
cursor: pointer; cursor: pointer;
} }
.role-form .q-checkbox--dense span{
width: 0px;
}
.role-form .checkedRole { .role-form .checkedRole {
background-color: #2961FE; background-color: #2961FE;
...@@ -158,19 +168,38 @@ ...@@ -158,19 +168,38 @@
<div class="text-caption q-mb-lg q-px-md text-grey-6">权限设置</div> <div class="text-caption q-mb-lg q-px-md text-grey-6">权限设置</div>
<div class="role_MenuList"> <div class="role_MenuList">
<span @click="getItem(item,index)" :class="{'checkedRole':index==checkedIndex}" <span @click="getItem(item,index)" :class="{'checkedRole':index==checkedIndex}"
v-for="(item,index) in AuthMenuList" :key="index">{{item.MenuName}}</span> v-for="(item,index) in AuthMenuList" :key="index">{{item.MenuName}}
<q-checkbox v-model="item.IsChecked" dense color="red" size="30px" style="margin-bottom: 2px" @input="onecheck(index)"></q-checkbox>
</span>
</div> </div>
<div class="Item_Main"> <div class="Item_Main">
<div class="role_ItemList" v-for="(subItem,subIndex) in SubMenuList"> <div class="role_ItemList" v-for="(subItem,subIndex) in SubMenuList">
<div class="role_SecondItem"> <div class="role_SecondItem">
<span>{{subItem.MenuName}}</span> <span>{{subItem.MenuName}}</span>
<q-checkbox v-model="subItem.IsChecked" /> <q-checkbox v-model="subItem.IsChecked" @input="twocheck(subIndex)"/>
</div> </div>
<div class="role_TreeList"> <div class="role_TreeList">
<q-tree v-if="subItem.SubList.length>0" :nodes="subItem.SubList" node-key="MenuId" label-key="MenuName" <ul>
children-key="SubList" tick-strategy="strict" :default-expand-all="true" no-connectors <li v-for="(x,j) in subItem.SubList">
:ticked.sync="chooseCategroyArray"> <span style="width: 15px;display: inline-block" @click="x.showChildren=!x.showChildren,$forceUpdate()">
</q-tree> <i class="iconfont icon-sanjiaoxing-you" v-if="x.showChildren==false && x.SubList.length>0" style="font-size: 5px;color: #DDDEE0"></i>
<i class="iconfont icon-sanjiaoxingx" v-if="x.showChildren==true && x.SubList.length>0" style="font-size: 5px;color: #DDDEE0" ></i>
</span>
<q-checkbox v-model="x.IsChecked" size="30px" style="margin-bottom: 2px" @input="threecheck(subIndex,j)"></q-checkbox>
<span >{{x.MenuName}}</span>
<ul v-if="x.SubList.length>0&& x.showChildren==true" style="margin-left: 35px">
<li v-for="(a,b) in x.SubList">
<q-checkbox v-model="a.IsChecked" size="30px" style="margin-bottom: 2px" @input="fourcheck(subIndex,j,b)"></q-checkbox>
<span>{{a.MenuName}}</span>
</li>
</ul>
</li>
</ul>
<!-- <q-tree v-if="subItem.SubList.length>0" :nodes="subItem.SubList" node-key="MenuId" label-key="MenuName"-->
<!-- children-key="SubList" tick-strategy="strict" :default-expand-all="true" no-connectors-->
<!-- :ticked.sync="chooseCategroyArray">-->
<!-- </q-tree>-->
</div> </div>
</div> </div>
</div> </div>
...@@ -238,6 +267,7 @@ ...@@ -238,6 +267,7 @@
this.SubMenuList = item.SubList; this.SubMenuList = item.SubList;
} }
}, },
//点击选中 //点击选中
getItem(item, index) { getItem(item, index) {
if (this.checkedIndex != index) { if (this.checkedIndex != index) {
...@@ -245,8 +275,8 @@ ...@@ -245,8 +275,8 @@
this.SubMenuList = []; this.SubMenuList = [];
this.SubMenuList = item.SubList; this.SubMenuList = item.SubList;
} else { } else {
this.checkedIndex = -1; // this.checkedIndex = -1;
this.SubMenuList = []; // this.SubMenuList = [];
} }
}, },
//获取权限 //获取权限
...@@ -260,6 +290,19 @@ ...@@ -260,6 +290,19 @@
if (this.AuthMenuList.length > 0) { if (this.AuthMenuList.length > 0) {
this.SubMenuList = this.AuthMenuList[0].SubList; this.SubMenuList = this.AuthMenuList[0].SubList;
} }
this.AuthMenuList.forEach(x=>{
if(x.SubList.length>0){
x.SubList.forEach(j=>{
if(j.SubList.length>0){
j.SubList.forEach(k=>{
if(k.SubList.length>0){
k.showChildren=false
}
})
}
})
}
})
} }
}).catch(() => {}) }).catch(() => {})
}, },
...@@ -285,6 +328,150 @@ ...@@ -285,6 +328,150 @@
this.objOption.Status = 0; this.objOption.Status = 0;
} }
}, },
onecommon(AuthMenuList,checkedIndex,type){
if(AuthMenuList[checkedIndex].SubList.length>0){
AuthMenuList[checkedIndex].SubList.forEach((x,xa)=>{
x.IsChecked=type;
if(AuthMenuList[checkedIndex].SubList[xa].SubList.length>0){
AuthMenuList[checkedIndex].SubList[xa].SubList.forEach((j,ja)=>{
j.IsChecked=type
let threesub = AuthMenuList[checkedIndex].SubList[xa].SubList[ja].SubList
if(threesub.length>0){
threesub.forEach((k,ka)=>{
k.IsChecked=type
})
}
})
}
})
}
},
onecheck(index){//第1级的操作
let AuthMenuList = this.AuthMenuList;//全部数据
let checkedIndex = index;//当前选择
if(AuthMenuList[checkedIndex].IsChecked==true){
this.onecommon(AuthMenuList,checkedIndex,true)
}else {
this.onecommon(AuthMenuList,checkedIndex,false)
}
this.AuthMenuList = AuthMenuList
},
twocommon(AuthMenuList,twoiIsChecked,type){
if(twoiIsChecked.SubList.length>0){
twoiIsChecked.SubList.forEach((x,xa)=>{
x.IsChecked=type;
let trsub = twoiIsChecked.SubList[xa].SubList
if(trsub.length>0){
trsub.forEach((j,ja)=>{
j.IsChecked=type
})
}
})
}
},
twocheck(twoindex){//第2级的操作
let AuthMenuList = this.AuthMenuList;//全部数据
let checkedIndex = this.checkedIndex;//当前选择
let twoiIsChecked = AuthMenuList[checkedIndex].SubList[twoindex]
if(twoiIsChecked.IsChecked==true){
this.twocommon(AuthMenuList,twoiIsChecked,true)
AuthMenuList[checkedIndex].IsChecked=true
}else {
this.twocommon(AuthMenuList,twoiIsChecked,false)
let type = false
AuthMenuList[checkedIndex].SubList.forEach(x=>{
if(x.IsChecked==true){
type=true
}
})
if(type==false){
AuthMenuList[checkedIndex].IsChecked=false
}
}
},
threecheck(twoindex,threeindex){//第3级的操作
let AuthMenuList = this.AuthMenuList;//全部数据
let checkedIndex = this.checkedIndex;//当前选择
let threeIsChecked = AuthMenuList[checkedIndex].SubList[twoindex].SubList[threeindex];
if(threeIsChecked.IsChecked == true){
if(threeIsChecked.SubList.length>0){
threeIsChecked.SubList.forEach(x=>{ //下级处理
x.IsChecked = true
})
}
//上级处理
AuthMenuList[checkedIndex].IsChecked=true;
AuthMenuList[checkedIndex].SubList[twoindex].IsChecked=true;
}else {
if(threeIsChecked.SubList.length>0){
threeIsChecked.SubList.forEach(x=>{
x.IsChecked = false
})
}
let type2 = false; //找第三级有选择的内容
AuthMenuList[checkedIndex].SubList[twoindex].SubList.forEach(x=>{
if(x.IsChecked==true){
type2=true
}
})
if(type2==false){
AuthMenuList[checkedIndex].SubList[twoindex].IsChecked=false
}
let type = false//找第二级有选择的内容
AuthMenuList[checkedIndex].SubList.forEach(x=>{
if(x.IsChecked==true){
type=true
}
})
if(type==false){
AuthMenuList[checkedIndex].IsChecked=false
}
}
},
fourcheck(twoindex,threeindex,fourindex){//第4级的操作
let AuthMenuList = this.AuthMenuList;//全部数据
let checkedIndex = this.checkedIndex;//当前选择
let threeIsChecked = AuthMenuList[checkedIndex].SubList[twoindex].SubList[threeindex].SubList[fourindex];
if(threeIsChecked.IsChecked==true){
//上级处理
AuthMenuList[checkedIndex].IsChecked=true;
AuthMenuList[checkedIndex].SubList[twoindex].IsChecked=true;
AuthMenuList[checkedIndex].SubList[twoindex].SubList[threeindex].IsChecked=true;
}else {
let type3 = false; //找第四级有选择的内容
AuthMenuList[checkedIndex].SubList[twoindex].SubList[threeindex].SubList.forEach(x=>{
if(x.IsChecked==true){
type3=true
}
})
if(type3==false){
AuthMenuList[checkedIndex].SubList[twoindex].SubList[threeindex].IsChecked=false
}
let type2 = false; //找第三级有选择的内容
AuthMenuList[checkedIndex].SubList[twoindex].SubList.forEach(x=>{
if(x.IsChecked==true){
type2=true
}
})
if(type2==false){
AuthMenuList[checkedIndex].SubList[twoindex].IsChecked=false
}
let type = false//找第二级有选择的内容
AuthMenuList[checkedIndex].SubList.forEach(x=>{
if(x.IsChecked==true){
type=true
}
})
if(type==false){
AuthMenuList[checkedIndex].IsChecked=false
}
}
},
//关闭弹窗 //关闭弹窗
closeSaveForm() { closeSaveForm() {
this.$emit('close') this.$emit('close')
......
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