mes_mobile/pages/person/myAuthority.vue

<template>
	<view class="page_padding checkbox-container">
		<view class="contentboxsty" v-for="(item, index) in list" :key="index.id">
			<view class="list_name listItem">
				<checkbox-group @change="changeCheckbox">
					<label>
						<checkbox class="checkbox-custom" :class="{ 'checkbox_indeterminate': item.indeterminate }" :value="item.id" :checked="item.checked" style="transform:scale(0.6)" />
						<text class="font14">{{item.name}}</text>
					</label>
				</checkbox-group>
			</view>
			<view class="list_content listItem padd_bot12" v-for="(i, ind) in item.child" :key="ind">
				<view class="content_name">
					<checkbox-group @change="selectPath(item,i)">
						<label>
							<checkbox class="checkbox-custom" :class="{ 'checkbox_indeterminate': i.indeterminate }" :value="i.id" :checked="i.checked" style="transform:scale(0.6)" />
							<text class="font14">{{i.name}}</text>
						</label>
					</checkbox-group>
				</view>
				<view class="content_item">
					<view class="content_data" v-for="(btn, inx) in i.child" :key="inx">
						<checkbox-group @change="selectPath(item,i,inx)">
							<label>
								<checkbox class="checkbox-custom" :class="{ 'checkbox_indeterminate': btn.indeterminate }" :value="btn.id" :checked="btn.checked" style="transform:scale(0.6)" />
								<text class="font14">{{btn.name}}</text>
							</label>
						</checkbox-group>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						id:1,name:'首页',checked:true,indeterminate:true,
						child:[
							{
								id: 2,name:'控制台',checked:true,indeterminate:true,
								child:[
									{id:121,name:'设备信息',checked:true,},
									{id:122,name:'生产加工信息',checked:true,},
									{id:123,name:'设备能耗信息',},
								],
							},
							{
								id:124,name:'账号信息',
								child:[
									{id:125,name:'通知设置',},
									{id:126,name:'升级角色'},
								]
							}
						],
					},
					{
						id:11,name:'生产工单',
						child:[
							{
								id: 3,name:'待生产工单',
								child:[
									{name:'添加工单',id:31},
									{name:'审核工单',id:32},
									{name:'删除工单',id:33},
									{name:'撤回工单',id:34},
								],
							},
							{
								id:4,name:'已排产工单',
								child:[],
							},
						],
					},
					{
						id:12,name:'生产排程',
						child:[
							{
								id: 4,name:'工单排程表',
								child:[
									{name:'创建生产计划',id:41},
									{name:'修改生产计划',id:42},
									{name:'拆分生产计划',id:43},
									{name:'删除生产计划',id:44},
									{name:'创建计划依赖',id:45},
									{name:'删除计划依赖',id:46},
								],
							},
						]
					}
				],
				arr:[]
			}
		},
		methods: {
			checkboxChange: function (e) {
				var items = this.items,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.value)){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
				// console.log(items)
			},
			changeCheckbox(e){
				// console.log(e)
			},
			selectPath(e,item){
				// console.log(e,item,222)
			},
		}
	}
</script>

<style scoped lang="scss">
.contentboxsty{padding: 14px 12px;margin-bottom: 12px;}
.contentboxsty .listItem:last-child{padding-bottom: 0;}
.list_name{display: flex;align-items: center;padding-bottom: 7px;border-bottom: 1px solid $uni-border-color-primary;}
.content_name{padding:8px 0 ;display: flex;align-items: center;}
.content_item{display: flex;align-items: center;flex-wrap: wrap;}
.content_data{padding: 4px 15px 4px 0;display: flex;align-items: center;}

</style>