tree.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <view>
  3. <view class="header">
  4. <search v-if="searchIf" ref="sea" @confirm="confirmSearch" class="search" />
  5. <view class="title">
  6. <scroll-view scroll-x style="width: 100%;white-space: nowrap;" :scroll-left="scrollLeft">
  7. <view v-for="(item,index) in tree_stack" class="inline-item" :key="index">
  8. <view class="inline-item" v-if="index==0" @click="backTree(item,-1)">
  9. <text v-if="index==tree_stack.length-1&&!isre" class="none">全部</text>
  10. <text v-else class="active">全部</text>
  11. </view>
  12. <view v-if="index==0&&isre" @click="backTree(item,-2)" :class="[index==tree_stack.length-1&&isre]?'none inline-item':'active inline-item'">
  13. <i class="iconfont icon-z043 iconclass"/>
  14. 搜索结果
  15. </view>
  16. <view class="inline-item" @click="backTree(item,index)" v-if="index!=0">
  17. <i v-if="index!=0" class="iconfont icon-z043 iconclass"/>
  18. <text v-if="index==tree_stack.length-1" class="none inline-item">
  19. {{item[props.label]}}
  20. </text>
  21. <text v-else class="active">
  22. {{item[props.label]}}
  23. </text>
  24. </view>
  25. </view>
  26. </scroll-view>
  27. </view>
  28. </view>
  29. <view>
  30. <view class="container-list">
  31. <scroll-view
  32. scroll-y="true"
  33. style="height: calc(100vh - 412rpx);"
  34. @scrolltolower="loadMore"
  35. >
  36. <view class="common" v-for="(item, index) in tree" @click="toChildren(item)" :key="index">
  37. <label class="content">
  38. <!-- <view class="checkbox" v-if="isCheck&&props.multiple" @click.stop="checkboxChange(item,index,item.bx,item.qx)">
  39. <span v-if="(newCheckList.findIndex(e=>{return item.id==e.id}))>-1&&!item.qx">
  40. <i v-if="item.bx&&props.multiple" class="iconfont icon-banxuanzhongshousuo1-shi icons"/>
  41. <i v-else class="iconfont icon-xuanzhong txt icon-selected"/>
  42. </span>
  43. <i v-else-if="props.multiple&&item.qx" class="iconfont icon-xuanzhong txt icon-selected"/>
  44. <i v-else-if="item.bx&&props.multiple" class="iconfont icon-banxuanzhongshousuo1-shi icons"/>
  45. <i style="color: #b8b8b8;" v-else class="iconfont icon-weixuanzhong txt"/>
  46. </view> -->
  47. <view class="checkbox" v-if="isCheck&&!props.multiple&&props.nodes&&item.user" @click.stop="checkbox(item,index)">
  48. <i v-if="newCheckList.length>0&&item.id == newCheckList[0].id" class="txt iconfont icon-selected"/>
  49. <i style="color: #b8b8b8;" v-else class="txt iconfont icon-weixuanzhong1"/>
  50. </view>
  51. <view class="checkbox" v-if="isCheck&&!props.multiple&&!props.nodes" @click.stop="checkbox(item,index)">
  52. <i v-if="newCheckList.length>0&&item.id == newCheckList[0].id" class="txt iconfont icon-selected"/>
  53. <i style="color: #b8b8b8;" v-else class="txt iconfont icon-weixuanzhong1"/>
  54. </view>
  55. <!-- <view v-if="item.user" @click.stop="checkboxChange(item,index,item.bx,item.qx)"><slot v-bind:item="item"></slot></view> -->
  56. <view v-if="item.user" @click.stop="checkbox(item,index)"><slot v-bind:item="item"></slot></view>
  57. <slot v-else v-bind:item="item"></slot>
  58. <view class="right"><i v-if="!item.user&&item.children.length>0" class="iconfont icon-z043"></i></view>
  59. </label>
  60. </view>
  61. <u-loadmore v-if="isEnd" :status="loadStatus" @loadmore="loadMore" style="padding-top: 10rpx;"/>
  62. </scroll-view>
  63. </view>
  64. </view>
  65. <view class="btn box_sizing">
  66. <button class="sureBtn" type="primary" @click="backConfirm">确认</button>
  67. </view>
  68. </view>
  69. </template>
  70. <script src="./code.js" type="text/javascript"></script>
  71. <style lang="scss" scoped>
  72. @import './css/style.scss';
  73. @import url("./css/icon.css");
  74. </style>