evaluateItem.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  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. if(this.checkedList.length){
  79. uni.$emit('selKpItem',this.checkedList)
  80. uni.navigateBack()
  81. }else{
  82. uni.showToast({
  83. title:"请选择考评指标"
  84. })
  85. }
  86. }
  87. }
  88. }
  89. </script>
  90. <style lang="scss">
  91. page{
  92. height: 100vh;
  93. background: #F8F8F8;
  94. }
  95. .kp-details{
  96. height: 100vh;
  97. display: flex;
  98. flex-direction: column;
  99. .kp-tabsBox{
  100. flex-grow: 1;
  101. display: flex;
  102. .kp-tabs{
  103. width: 30%;
  104. text-align: center;
  105. margin: 15upx;
  106. overflow: auto;
  107. > view{
  108. padding: 15upx;
  109. background: #fff;
  110. border-radius: 6upx;
  111. box-shadow: 1px 2px 3px #eee;
  112. border: 1px solid #eee;
  113. margin-bottom: 15upx;
  114. > view{
  115. &:last-child{
  116. color: #666;
  117. }
  118. }
  119. }
  120. > view.active{
  121. background: #00aaff;
  122. color: #fff;
  123. > view{
  124. &:last-child{
  125. color: #fff;
  126. }
  127. }
  128. }
  129. }
  130. .kp-items{
  131. width: 70%;
  132. margin: 15upx 15upx 15upx 6upx;
  133. overflow: auto;
  134. .checkbox-item{
  135. width:100%;
  136. padding: 15upx;
  137. border-radius: 6upx;
  138. border: 1px solid #eee;
  139. box-shadow: 1px 2px 3px #eee;
  140. background: #fff;
  141. display: flex;
  142. justify-content: space-between;
  143. margin-bottom: 15upx;
  144. }
  145. }
  146. }
  147. .kp-ok{
  148. text-align: center;
  149. padding: 26upx;
  150. background: #55aaff;
  151. color: #fff;
  152. font-size: 18px;
  153. }
  154. }
  155. </style>