159 lines
4.6 KiB
Vue
159 lines
4.6 KiB
Vue
<template>
|
|
<view class="pagepaddings">
|
|
<!-- <checkbox-group @change="checkboxChange">
|
|
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
|
|
<view>
|
|
<checkbox :value="item.value" :checked="item.checked" />
|
|
</view>
|
|
<view>{{item.name}}</view>
|
|
</label>
|
|
</checkbox-group> -->
|
|
<view class="contentboxsty" v-for="(item, index) in list" :key="index.id">
|
|
<view class="list_name">
|
|
<checkbox-group @change="changeCheckbox">
|
|
<checkbox value="cb" class="checkbox-backgroun-yellow" :value="item.id" :checked="item.checked" style="transform:scale(0.7)" />
|
|
</checkbox-group>
|
|
<!-- <checkbox-group @change="selectPath(e,item)">
|
|
<checkbox value="cb" class="checkbox-backgroun-yellow" :value="item.id" :checked="item.checked" style="transform:scale(0.7)" />
|
|
</checkbox-group> -->
|
|
<!-- <text class="t-icon t-icon-xuanzhong padd_rigth12" @click="selectPath($event.target,item)"></text> -->
|
|
{{item.name}}{{item.checked}}
|
|
</view>
|
|
<view class="list_content" v-for="(i, ind) in item.child" :key="ind">
|
|
<view class="content_name">
|
|
<checkbox-group @change="selectPath(e,i)">
|
|
<checkbox value="cb" class="checkbox-backgroun-yellow" :value="i.id" :checked="i.checked" style="transform:scale(0.7)" />
|
|
</checkbox-group>
|
|
<!-- <text class="t-icon t-icon-xuanzhong padd_rigth5"></text> -->
|
|
<text class="">{{i.name}}</text>
|
|
</view>
|
|
<view class="content_item">
|
|
<view class="content_data" v-for="(btn, inx) in i.child" :key="inx">
|
|
<checkbox-group @change="selectPath(e,i)">
|
|
<checkbox value="cb" class="checkbox-backgroun-yellow" :value="btn.id" :checked="btn.checked" style="transform:scale(0.7)" />
|
|
</checkbox-group>
|
|
<!-- <text class="t-icon t-icon-xuanzhong padd_rigth5"></text> -->
|
|
<text class="">{{btn.name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
items: [{
|
|
value: 'USA',
|
|
name: '美国'
|
|
},
|
|
{
|
|
value: 'CHN',
|
|
name: '中国',
|
|
checked: 'true'
|
|
},
|
|
{
|
|
value: 'BRA',
|
|
name: '巴西'
|
|
},
|
|
{
|
|
value: 'JPN',
|
|
name: '日本'
|
|
},
|
|
{
|
|
value: 'ENG',
|
|
name: '英国'
|
|
},
|
|
{
|
|
value: 'FRA',
|
|
name: '法国'
|
|
}
|
|
],
|
|
list:[
|
|
{name:'首页',checked:true,id:1,child:[{
|
|
id: 2,
|
|
name:'控制台',
|
|
checked:true,
|
|
child:[
|
|
{id:121,name:'设备信息',},
|
|
{id:122,name:'生产加工信息',},
|
|
{id:123,name:'生产加工信息',},
|
|
{id:124,name:'账号信息',},
|
|
{id:125,name:'通知设置',},
|
|
{id:126,name:'升级角色'},],
|
|
},
|
|
],
|
|
},
|
|
// {name:'生产工单',id:11,child:[{
|
|
// id: 3,
|
|
// name:'待生产工单',
|
|
// child:[{name:'添加工单'},
|
|
// {name:'审核工单'},
|
|
// {name:'删除工单'},
|
|
// ],
|
|
// },
|
|
// {name:'已排产工单',
|
|
// child:[],
|
|
// },
|
|
// ],
|
|
// }
|
|
],
|
|
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)
|
|
// var items = this.list,
|
|
// 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)
|
|
},
|
|
selectPath(e,item){
|
|
console.log(e,item,222)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.contentboxsty{padding: 14px 12px;margin-bottom: 12px;}
|
|
.list_name{display: flex;align-items: center;padding-bottom: 7px;border-bottom: 1px solid #2D3A6F;}
|
|
.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;}
|
|
|
|
/* 复选框-背景颜色 */
|
|
checkbox.checkbox-backgroun-yellow[checked] .wx-checkbox-input,
|
|
checkbox.checkbox-backgroun-yellow.checked .uni-checkbox-input{
|
|
background-color: #009688 !important;
|
|
border-color: #009688 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
</style>
|
|
|
|
|