123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 |
- <template>
- <view class="auth_page">
- <view class="auth_list">
- <view class="leve_0">
- <view class="leve_1">
- <label @click="checkAll()">
- <checkbox :checked="checkedAll" /> {{checkedAll?'取消全选':'全选'}}
- </label>
- </view>
- </view>
- <view class="leve_0" v-if="authList.length" v-for="(item,index) in authList" :key="item.id">
- <view class="leve_1" @click="checkParent(item)">
- <label>
- <checkbox :value="String(item.id)" :checked="item.checked" /> {{item.name}}
- </label>
- </view>
- <view>
- <checkbox-group :data-pid="String(item.id)" class="leve_2" @change="checkboxChange">
- <label class="leve_3" v-for="citem in item.children" :key="citem.id">
- <checkbox :value="String(citem.id)" :checked="citem.checked" />
- {{citem.name}}
- </label>
- </checkbox-group>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import { getMenuList, addMenuPower } from '@/api/powerRole-md.js'
- export default {
- data() {
- return {
- id:'',
- menuData: {},
- authList: [], // app 权限菜单
- checkedIds: [[],[],[]], // 已选的ids
- loading: false,
- checkedAll: false
- }
- },
- methods: {
- // 获取菜单树列表
- getMenuList (id) {
- let _this = this
- this.id = id || '1'
- getMenuList({id: this.id}).then(res => {
- if (res.status == 200) {
- _this.menuData = res.data
- _this.authList = _this.menuData.allMenuList[0].children
- if (_this.menuData.role&&_this.menuData.role.menuIds) {
- const arr = _this.menuData.role.menuIds.split(',')
- // 勾选已选的
- _this.findLeaf(_this.menuData.allMenuList, arr)
- _this.getIds(_this.authList,0)
- // 是否全选
- _this.checkedAll = arr.length >= _this.authList.length
- }
- }
- console.log(_this.menuData,'_this.menuData')
- })
- },
- // 勾选已选的
- findLeaf (data, arr) {
- for (let i = 0; i < data.length; i++) {
- const node = data[i]
- const hasNode = this.hasSelNode(node.id, arr)
- this.$set(node, 'checked', !!hasNode)
- if (node.children){
- this.$set(node, 'expand', !!hasNode)
- this.findLeaf(node.children, arr)
- }
- }
- },
- hasSelNode (id, arr){
- const hasNode = arr.find(item => {
- return item == id
- })
- return hasNode
- },
- // 获取选中的ids, index 那个菜单
- getIds (data,index){
- let _this = this
- for (let i = 0; i < data.length; i++) {
- const node = data[i]
- if(node.checked){
- _this.checkedIds[index].push(node.id)
- }
- if (node.children){
- _this.getIds(node.children,index)
- }
- }
- },
- // 全选
- checkAll(){
- this.authList.map(item => {
- this.$set(item, 'checked', !this.checkedAll)
- })
- this.checkedAll = !this.checkedAll
- },
- // 选择一级菜单
- checkParent(item){
- console.log(item)
- if(item.children){
- item.children.map(k=>{
- this.$set(k, 'checked', !item.checked)
- })
- }
- this.$set(item, 'checked', !item.checked)
- // 是否全选
- const checkNums = this.authList.filter(item => item.checked)
- this.checkedAll = checkNums.length == this.authList.length
- },
- // 选择复选框
- checkboxChange(e){
- console.log(e)
- let pid = e.currentTarget.dataset.pid
- let ids = e.detail.value
- let pc = this.authList.find(item=> item.id == pid)
- if(pc.children&&pc.children.length){
- pc.children.map(k=>{
- this.$set(k, 'checked', !!ids.find(a=>a==k.id))
- })
- }
- this.$set(pc, 'checked', ids.length>0)
- },
- // 保存提交
- getSelMenu () {
- const _this = this
- // 获取已选的项
- this.checkedIds[0] = []
- this.getIds(this.authList,0)
- if (this.checkedIds[0].length == 0) {
- return false
- }
- let checkeNodes = []
- checkeNodes = checkeNodes.concat(this.checkedIds[0])
- checkeNodes = checkeNodes.concat(this.checkedIds[1])
- checkeNodes = checkeNodes.concat(this.checkedIds[2])
- console.log(checkeNodes, 'checkeNodes')
- return {menuIds: checkeNodes.join(',')}
- },
- },
- }
- </script>
- <style lang="scss">
- .auth_page{
- display: flex;
- flex-direction: column;
- height: 100%;
- .auth_list{
- flex-grow: 1;
- overflow: auto;
- height: 100%;
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- .leve_0{
- padding:0;
- width: 48%;
- &:first-child{
- width:100%;
- margin-bottom: 20rpx;
- .leve_1{
- border-bottom: 1px solid #eee;
- }
- }
- .leve_1{
- padding:10rpx 15rpx;
- label{
- display: block;
- }
- }
- .leve_2{
- padding: 10upx 10upx 10upx 0;
- display: flex;
- flex-wrap: wrap;
- .leve_3{
- margin: 20upx 5%;
- }
- }
- }
- }
- }
-
- </style>
|