evaluateItem.vue 3.6 KB

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