evaluateItem.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <template>
  2. <view class="kp-details">
  3. <!-- 考评项 -->
  4. <view class="kp-tabsBox" v-if="items.length>0">
  5. <view class="kp-tabs">
  6. <view @click="onTab(index)" :class="activeIndex == index ? 'active':''" v-for="(item,index) in items" :key="item.id">
  7. <view>{{item.name}}</view>
  8. <view>({{item.assessTargetNum||0}}项)</view>
  9. </view>
  10. </view>
  11. <view class="kp-items">
  12. <view v-for="(item,index) in childItems" :key="item.id" @click="chooseItem(item,index)" class="checkbox-item">
  13. <view class="item-name">{{item.name}}</view>
  14. <view>
  15. <checkbox :value="item.id" :checked="item.checked" />
  16. </view>
  17. </view>
  18. <view v-if="childItems.length==0">
  19. <u-empty style="height: auto;padding-top: 10vh;" text="暂无指标" img-width="120" mode="list"></u-empty>
  20. </view>
  21. </view>
  22. </view>
  23. <view style="flex-grow: 1;height: 100%;" v-else>
  24. <u-empty style="height: auto;padding-top: 10vh;" text="暂无考评项" mode="list"></u-empty>
  25. </view>
  26. <!-- 选择按钮 -->
  27. <view class="kp-ok" @click="kpOk">
  28. 确定选择
  29. </view>
  30. </view>
  31. </template>
  32. <script>
  33. import {findAllItem} from '@/api/assess'
  34. export default{
  35. data(){
  36. return{
  37. items: [],
  38. activeIndex:0,
  39. childItems:[],
  40. checkedList:[]
  41. }
  42. },
  43. onLoad(opts) {
  44. this.checkedList = opts.item&&JSON.parse(opts.item)||[]
  45. this.checkedList.map(item=>{
  46. item.id = item.assessTargetId
  47. })
  48. findAllItem().then(res=>{
  49. console.log(res)
  50. if(res.status == 200){
  51. this.items = res.data
  52. this.onTab(0)
  53. }
  54. })
  55. },
  56. methods:{
  57. onTab(index){
  58. this.activeIndex = index
  59. this.childItems = this.items[index].assessTargetList || []
  60. this.childItems.map(item=>{
  61. let hasItemIndex = this.checkedList.findIndex(o=>o.id==item.id)
  62. item.checked = hasItemIndex>=0
  63. })
  64. },
  65. chooseItem(item,index){
  66. console.log(item,index)
  67. let hasItemIndex = this.checkedList.findIndex(o=>o.id==item.id)
  68. // 已存在
  69. if(hasItemIndex>=0){
  70. this.checkedList.splice(hasItemIndex,1)
  71. }else{
  72. this.checkedList.push(item)
  73. }
  74. this.childItems[index].checked = !(hasItemIndex>=0)
  75. this.childItems.splice()
  76. },
  77. kpOk(){
  78. uni.$emit('selKpItem',this.checkedList)
  79. uni.navigateBack()
  80. }
  81. }
  82. }
  83. </script>
  84. <style lang="scss">
  85. page{
  86. height: 100vh;
  87. background: #F8F8F8;
  88. }
  89. .kp-details{
  90. height: 100vh;
  91. display: flex;
  92. flex-direction: column;
  93. .kp-tabsBox{
  94. flex-grow: 1;
  95. display: flex;
  96. .kp-tabs{
  97. width: 30%;
  98. text-align: center;
  99. margin: 15upx;
  100. overflow: auto;
  101. > view{
  102. padding: 15upx;
  103. background: #fff;
  104. border-radius: 6upx;
  105. box-shadow: 1px 2px 3px #eee;
  106. border: 1px solid #eee;
  107. margin-bottom: 15upx;
  108. > view{
  109. &:last-child{
  110. color: #666;
  111. }
  112. }
  113. }
  114. > view.active{
  115. background: #00aaff;
  116. color: #fff;
  117. > view{
  118. &:last-child{
  119. color: #fff;
  120. }
  121. }
  122. }
  123. }
  124. .kp-items{
  125. width: 70%;
  126. margin: 15upx 15upx 15upx 6upx;
  127. overflow: auto;
  128. .checkbox-item{
  129. width:100%;
  130. padding: 15upx;
  131. border-radius: 6upx;
  132. border: 1px solid #eee;
  133. box-shadow: 1px 2px 3px #eee;
  134. background: #fff;
  135. display: flex;
  136. justify-content: space-between;
  137. margin-bottom: 15upx;
  138. }
  139. }
  140. }
  141. .kp-ok{
  142. text-align: center;
  143. padding: 26upx;
  144. background: #55aaff;
  145. color: #fff;
  146. font-size: 18px;
  147. }
  148. }
  149. </style>