|
@@ -0,0 +1,148 @@
|
|
|
+<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>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="flex-grow: 1;" v-if="items.length==0">
|
|
|
+ <u-empty 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=>{
|
|
|
+ console.log(res,'0')
|
|
|
+ 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>
|