134 lines
3.8 KiB
Vue
134 lines
3.8 KiB
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>
|
|
|
|
|