<template> <view class="kp-details"> <!-- 考评项 --> <view class="kp-tabsBox"> <view class="kp-tabs"> <view @click="onTab(index)" :class="activeIndex == index ? 'active':''" v-for="(item,index) in items" :key="item.id"> <view>{{item.name}}</view> <view>({{item.assessTargetNum}}项)</view> </view> </view> <view class="kp-items"> <view v-for="(item,index) in childItems" :key="item.id" @click="chooseItem(item,index)" class="checkbox-item"> <view class="item-name">{{item.name}}</view> <view> <checkbox :value="item.id" :checked="item.checked" /> </view> </view> <u-empty style="height: auto;padding-top: 10vh;" text="暂无指标" img-width="120" v-if="!childItems.length&&items.length" mode="list"></u-empty> </view> </view> <view style="flex-grow: 1;height: 100%;" v-if="items.length==0"> <u-empty style="height: auto;padding-top: 10vh;" text="暂无考评项" mode="list"></u-empty> </view> <!-- 选择按钮 --> <view class="kp-ok" @click="kpOk"> 确定选择 </view> </view> </template> <script> import {findAllItem} from '@/api/assess' export default{ data(){ return{ items: [], activeIndex:0, childItems:[], checkedList:[] } }, onLoad(opts) { this.checkedList = opts.item&&JSON.parse(opts.item)||[] this.checkedList.map(item=>{ item.id = item.assessTargetId }) findAllItem().then(res=>{ if(res.status == 200){ this.items = res.data this.onTab(0) } }) }, methods:{ onTab(index){ this.activeIndex = index this.childItems = this.items[index].assessTargetList this.childItems.map(item=>{ let hasItemIndex = this.checkedList.findIndex(o=>o.id==item.id) item.checked = hasItemIndex>=0 }) }, chooseItem(item,index){ console.log(item,index) let hasItemIndex = this.checkedList.findIndex(o=>o.id==item.id) // 已存在 if(hasItemIndex>=0){ this.checkedList.splice(hasItemIndex,1) }else{ this.checkedList.push(item) } this.childItems[index].checked = !(hasItemIndex>=0) this.childItems.splice() }, kpOk(){ uni.$emit('selKpItem',this.checkedList) uni.navigateBack() } } } </script> <style lang="scss"> page{ height: 100%; background: #F8F8F8; } .kp-details{ height: 100%; display: flex; flex-direction: column; .kp-tabsBox{ flex-grow: 1; display: flex; .kp-tabs{ width: 30%; text-align: center; margin: 15upx; overflow: auto; > view{ padding: 15upx; background: #fff; border-radius: 6upx; box-shadow: 1px 2px 3px #eee; border: 1px solid #eee; margin-bottom: 15upx; > view{ &:last-child{ color: #666; } } } > view.active{ background: #00aaff; color: #fff; > view{ &:last-child{ color: #fff; } } } } .kp-items{ width: 70%; margin: 15upx 15upx 15upx 6upx; overflow: auto; .checkbox-item{ width:100%; padding: 15upx; border-radius: 6upx; border: 1px solid #eee; box-shadow: 1px 2px 3px #eee; background: #fff; display: flex; justify-content: space-between; margin-bottom: 15upx; } } } .kp-ok{ text-align: center; padding: 26upx; background: #55aaff; color: #fff; font-size: 18px; } } </style>