|
@@ -16,33 +16,59 @@
|
|
<view class="message">
|
|
<view class="message">
|
|
<view class="radiolist">
|
|
<view class="radiolist">
|
|
|
|
|
|
- <view class="uni-list father-list">
|
|
|
|
|
|
+ <view class="checked-box-warp">
|
|
|
|
+ <view class="father-warp">
|
|
|
|
+ <view class="father-item" v-for="fatheritem in list" :key='fatheritem.menuId'>
|
|
|
|
+
|
|
|
|
+ <view class="fatherbar" @tap.stop='chechedFather(fatheritem.menuId)'>
|
|
|
|
+ <view class="icon active" v-if="hasList.includes(fatheritem.menuId)"></view>
|
|
|
|
+ <view class="icon" v-else></view>
|
|
|
|
+ <view class="title">{{ fatheritem.name }}</view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <view class="son-warp">
|
|
|
|
+ <view class="son-item" v-for="sonitem in fatheritem.children" :key="sonitem.menuId">
|
|
|
|
+ <view class="sonerbar" @tap.stop='chechedSon(sonitem.menuId)'>
|
|
|
|
+ <view class="icon active" v-if="hasList.includes(sonitem.menuId)"></view>
|
|
|
|
+ <view class="icon" v-else></view>
|
|
|
|
+ <view class="title">{{ sonitem.name }}</view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ <!-- <view class="uni-list father-list">
|
|
|
|
+
|
|
<checkbox-group @change="fatherChange">
|
|
<checkbox-group @change="fatherChange">
|
|
<label class="uni-list-cell uni-list-cell-pd checked-bar" v-for="fatheritem in list" :key="fatheritem.menuId">
|
|
<label class="uni-list-cell uni-list-cell-pd checked-bar" v-for="fatheritem in list" :key="fatheritem.menuId">
|
|
<view class="main-checked-list">
|
|
<view class="main-checked-list">
|
|
- <checkbox :value="fatheritem.value" :checked="item.checked"/>
|
|
|
|
|
|
+ <checkbox :value="fatheritem.menuId" :checked="hasList.includes(fatheritem.menuId)"/>
|
|
<view class="title">{{ fatheritem.name }}</view>
|
|
<view class="title">{{ fatheritem.name }}</view>
|
|
</view>
|
|
</view>
|
|
- <!-- 子权限 -->
|
|
|
|
- <view class="childemenu">
|
|
|
|
- <view class="uni-list son-list">
|
|
|
|
- <checkbox-group @change="sonChange" class="son-checked-warp">
|
|
|
|
- <label class="uni-list-cell uni-list-cell-pd son-bar" v-for="sonitem in fatheritem.children" :key="sonitem.value">
|
|
|
|
- <view class="son-checked-list">
|
|
|
|
- <checkbox style="transform:scale(0.7)" :value="sonitem.value" :checked="item.checked"/>
|
|
|
|
- <view class="son-title">{{sonitem.name}}</view>
|
|
|
|
- </view>
|
|
|
|
- </label>
|
|
|
|
- </checkbox-group>
|
|
|
|
|
|
+
|
|
|
|
+ <view class="childemenu">
|
|
|
|
+ <view class="uni-list son-list">
|
|
|
|
+ <checkbox-group @change="sonChange" class="son-checked-warp">
|
|
|
|
+ <label class="uni-list-cell uni-list-cell-pd son-bar" v-for="sonitem in fatheritem.children" :key="sonitem.value">
|
|
|
|
+ <view class="son-checked-list">
|
|
|
|
+ <checkbox style="transform:scale(0.7)" :value="sonitem.menuId" :checked="hasList.includes(sonitem.menuId)"/>
|
|
|
|
+ <view class="son-title">{{sonitem.name}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ </label>
|
|
|
|
+ </checkbox-group>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
|
|
|
|
<image v-if="!item.checked && item.children" class="moreicon" src="../../static/images/moreicon.png"></image>
|
|
<image v-if="!item.checked && item.children" class="moreicon" src="../../static/images/moreicon.png"></image>
|
|
<image v-if="item.checked && item.children" class="downicon" src="../../static/images/downmoreicon.png"></image>
|
|
<image v-if="item.checked && item.children" class="downicon" src="../../static/images/downmoreicon.png"></image>
|
|
</label>
|
|
</label>
|
|
</checkbox-group>
|
|
</checkbox-group>
|
|
- </view>
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </view> -->
|
|
|
|
+
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="sure">
|
|
<view class="sure">
|
|
@@ -71,7 +97,9 @@ export default {
|
|
data () {
|
|
data () {
|
|
//这里存放数据
|
|
//这里存放数据
|
|
return {
|
|
return {
|
|
- roleArray: []
|
|
|
|
|
|
+ roleArray: [],
|
|
|
|
+ fatherIndex: -1,
|
|
|
|
+ sonIndex: -1
|
|
}
|
|
}
|
|
},
|
|
},
|
|
//方法集合
|
|
//方法集合
|
|
@@ -82,42 +110,64 @@ export default {
|
|
closeMask () {
|
|
closeMask () {
|
|
this.$emit('isSureConver', false)
|
|
this.$emit('isSureConver', false)
|
|
},
|
|
},
|
|
-
|
|
|
|
- // 显示已经拥有权限
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- // 父级权限选择
|
|
|
|
- fatherChange (e) {
|
|
|
|
- console.log(this.hasList);
|
|
|
|
-
|
|
|
|
- console.log(e);
|
|
|
|
- let items = this.list
|
|
|
|
- values = e.detail.value; // 选中的集合
|
|
|
|
- for (let i = 0; i < items.length; ++i) {
|
|
|
|
- const element = items[i]
|
|
|
|
- if (values.includes(element.value)) {
|
|
|
|
- this.$set(element, 'checked', true)
|
|
|
|
- } else {
|
|
|
|
- this.$set(element, 'checked', false)
|
|
|
|
|
|
+ getArrayIndex(arr, obj) {
|
|
|
|
+ let i = arr.length;
|
|
|
|
+ while (i--) {
|
|
|
|
+ if (arr[i] === obj) {
|
|
|
|
+ return i;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- console.log(this.list);
|
|
|
|
|
|
+ return -1;
|
|
},
|
|
},
|
|
-
|
|
|
|
- // 子集权限选择
|
|
|
|
- sonChange (e) {
|
|
|
|
- console.log(e);
|
|
|
|
- let items = this.list,
|
|
|
|
- values = e.detail.value; // 选中的集合
|
|
|
|
- for (let i = 0; i < items.length; ++i) {
|
|
|
|
- const element = items[i]
|
|
|
|
- if (values.includes(element.value)) {
|
|
|
|
- this.$set(element, 'checked', true)
|
|
|
|
- } else {
|
|
|
|
- this.$set(element, 'checked', false)
|
|
|
|
|
|
+ chechedFather (num) {
|
|
|
|
+ this.roleDeal(this.hasList,num)
|
|
|
|
+ },
|
|
|
|
+ chechedSon (num) {
|
|
|
|
+ this.roleDeal(this.hasList,num)
|
|
|
|
+ },
|
|
|
|
+ // 权限操作
|
|
|
|
+ roleDeal (arr,value) {
|
|
|
|
+ if (arr.includes(value)) {
|
|
|
|
+ let index = arr.length
|
|
|
|
+ while (index --) {
|
|
|
|
+ // 得到下标后删除
|
|
|
|
+ if (this.hasList[index] === value) return this.hasList.splice(index,1)
|
|
}
|
|
}
|
|
|
|
+ } else {
|
|
|
|
+ arr.push(value)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ // 父级权限选择
|
|
|
|
+ // fatherChange (e) {
|
|
|
|
+ // debugger
|
|
|
|
+ // console.log(e);
|
|
|
|
+ // let items = this.list
|
|
|
|
+ // for (let i = 0; i < items.length; ++i) {
|
|
|
|
+ // const element = items[i]
|
|
|
|
+ // if (e.detail.value.includes(element.menuId)) {
|
|
|
|
+ // this.$set(element, 'checked', true)
|
|
|
|
+ // } else {
|
|
|
|
+ // this.$set(element, 'checked', false)
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // },
|
|
|
|
+
|
|
|
|
+ // // 子集权限选择
|
|
|
|
+ // sonChange (e) {
|
|
|
|
+ // console.log(e);
|
|
|
|
+ // let items = this.list
|
|
|
|
+ // for (let i = 0; i < items.length; ++i) {
|
|
|
|
+ // const element = items[i]
|
|
|
|
+ // if (e.detail.value.includes(element.menuId)) {
|
|
|
|
+ // this.$set(element, 'checked', true)
|
|
|
|
+ // } else {
|
|
|
|
+ // this.$set(element, 'checked', false)
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+ // }
|
|
|
|
+
|
|
}
|
|
}
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
@@ -180,16 +230,77 @@ export default {
|
|
border-bottom-left-radius: 20upx;
|
|
border-bottom-left-radius: 20upx;
|
|
border-bottom-right-radius: 20upx;
|
|
border-bottom-right-radius: 20upx;
|
|
.message {
|
|
.message {
|
|
- padding: 10upx 60upx 0;
|
|
|
|
|
|
+ padding: 10upx 60upx 15upx;
|
|
overflow-y: scroll;
|
|
overflow-y: scroll;
|
|
height: 670upx;
|
|
height: 670upx;
|
|
.radiolist {
|
|
.radiolist {
|
|
- .father-list {
|
|
|
|
|
|
+ .checked-box-warp {
|
|
|
|
+ .father-warp {
|
|
|
|
+ .father-item{
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ margin-bottom: 40upx;
|
|
|
|
+ .fatherbar{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .icon{
|
|
|
|
+ width: 38upx;
|
|
|
|
+ height: 38upx;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ background: url('../../static/images/checked-box.png') no-repeat center;
|
|
|
|
+ background-size: 100%;
|
|
|
|
+ }
|
|
|
|
+ .active {
|
|
|
|
+ background: url('../../static/images/checked-active.png') no-repeat center;
|
|
|
|
+ background-size: 100%;
|
|
|
|
+ }
|
|
|
|
+ .title{
|
|
|
|
+ margin-left: 30upx;
|
|
|
|
+ color: #444444;
|
|
|
|
+ font-size: 30upx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .son-warp {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-flow: wrap;
|
|
|
|
+ margin-left: 45upx;
|
|
|
|
+ .son-item {
|
|
|
|
+ margin-top: 34upx;
|
|
|
|
+ width: 45%;
|
|
|
|
+ &:nth-child(odd){
|
|
|
|
+ margin-right: 35upx;
|
|
|
|
+ }
|
|
|
|
+ .sonerbar{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .icon{
|
|
|
|
+ width: 38upx;
|
|
|
|
+ height: 38upx;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ background: url('../../static/images/checked-box.png') no-repeat center;
|
|
|
|
+ background-size: 100%;
|
|
|
|
+ }
|
|
|
|
+ .active {
|
|
|
|
+ background: url('../../static/images/checked-active.png') no-repeat center;
|
|
|
|
+ background-size: 100%;
|
|
|
|
+ }
|
|
|
|
+ .title{
|
|
|
|
+ margin-left: 30upx;
|
|
|
|
+ font-size: 28upx;
|
|
|
|
+ color: #666666;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ /*.father-list {
|
|
.checked-bar {
|
|
.checked-bar {
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
justify-content: flex-end;
|
|
- padding-top: 45upx;
|
|
|
|
|
|
+ margin-top: 45upx;
|
|
.main-checked-list{
|
|
.main-checked-list{
|
|
display: flex;
|
|
display: flex;
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -235,6 +346,7 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sure {
|
|
.sure {
|