<template> <view class="kp-details"> <!-- 考评项 --> <view class="kp-tabsBox" v-if="list.length"> <view class="kp-tabs"> <view v-for="(item,index) in list" :key="item.id" @click="onTab(index)" :class="activeIndx==index?'active':''"> <view>{{item.name}}</view> <view>({{item.assessTargetNum}}项)</view> </view> </view> <view class="kp-items"> <view v-for="(item,index) in list[activeIndx].assessTargetList" :key="item.id"> {{item.name}} </view> </view> </view> <view class="kp-tabsBox" v-if="noDateText!=''"> <u-empty style="width: 100%;padding-top: 10vh;" :text="noDateText" img-width="120" mode="list"></u-empty> </view> <!-- 选择按钮 --> <view class="kp-ok" @click="kpOk"> 确认选择该考评方案 </view> </view> </template> <script> import {queryItemBySchemeId} from '@/api/assess' export default { data() { return { list: [], activeIndx:0, item:'', noDateText:'' } }, onLoad(opts) { this.item = JSON.parse(opts.item) console.log({schemeId:this.item.id}) // 查询方案的项 queryItemBySchemeId({schemeId:this.item.id}).then(res=>{ console.log(res) if(res.status == 200){ this.list = res.data this.noDateText = this.list.length?'':'暂无考评项' }else{ this.noDateText = res.message } }) }, methods: { // 选中方案 kpOk(item) { uni.$emit("resetTaskKpItem",this.item) uni.navigateBack({ delta:2 }) }, // onTab onTab(index){ this.activeIndx = index } } } </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; 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; > view{ padding: 20upx; background: #fff; border-bottom: 5px solid #F8F8F8; } } } .kp-ok{ text-align: center; padding: 26upx; background: #55aaff; color: #fff; font-size: 18px; } } </style>