hitap-chat/pages/investigation/components/problem-tree-item.vue

<template>
  <view>
    <view class="breadcrumb" style="min-height: 120rpx">
<!--      <uni-breadcrumb separator=">" style="overflow-x: auto">-->
<!--        <uni-breadcrumb-item >-->
<!--          {{route.itemname}}-->
<!--        </uni-breadcrumb-item>-->
<!--      </uni-breadcrumb>-->

      <scroll-view class="breadcrumb" >
        <view class="item" v-for="(route,index) in problemTreeSelectConfirmList" :key="index" @click="handleClick(route)">
          {{route.itemname}} {{index === problemTreeSelectConfirmList.length - 1 ? '' : '>'  }}
        </view>
      </scroll-view>
    </view>
    <view  class="investigation-item"
           :class="problemTreeSelect === index ? 'active' : ''"
           v-for="(item, index) in problemTreeSelectList"
           :key="item.itemname"
           @click="handleSelectProblem(item, index)"
    >
      <text>{{ item.itemname }}</text>
      <uni-icons type="checkmarkempty" size="24" :style="{color: '#2663BF', visibility: problemTreeSelect === index ? 'visible' : 'hidden'}"/>
    </view>
  </view>
</template>

<script>
export default {
  // 组件
  components: {},
  data() {
    return {
      // 公用的js
      $: this.$,
      originList: [],
      problemTreeSelect: null,
      problemTreeSelectList: [],
      problemTreeSelectConfirmList: []
    }
  },
  // 页面加载
  onLoad(e) {
    console.log(12312312312)
    // this.getData()
  },
  mounted(){
    this.getData()
  },
  // 页面显示
  onShow() {
  },
  // 计算属性
  computed: {},
  // 方法
  methods: {
    getData(){
      this.$request.globalRequest('/hiddenDanger/highDanger/getDangerItems', {}, 'GET').then(res => {
        if(res.code == 200){
          this.originList = res.result
          this.problemTreeSelectList = res.result
        }
      })
    },
    // 跳转页面
    skipPage(even){
      this.$.open(even)
    },
    handleSelectProblem(item, index){
      this.problemTreeSelectConfirmList[Number(item.nlevel) - 1] = item
      if (item.children && item.children.length > 0){
        this.problemTreeSelectList = item.children
      } else {
        this.problemTreeSelect = index
      }
      this.$emit('select', this.problemTreeSelectConfirmList)
    },
    handleClick(item){
      console.log(item)
      const selectIndex = this.problemTreeSelectConfirmList.indexOf(item)
      const index = selectIndex - 1 < 0 ? this.originList.indexOf(item) : this.problemTreeSelectConfirmList[selectIndex - 1].children.indexOf(item)
      this.problemTreeSelectList = selectIndex - 1 < 0 ? this.originList : this.problemTreeSelectConfirmList[selectIndex - 1].children
      this.problemTreeSelect = index;
    }
  },
  onReady() {
  },
  // 页面卸载
  onUnload() {

  },
  // 触发下拉刷新
  onPullDownRefresh() {
    // 延迟关闭刷新动画
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1500);
  },
  // 页面上拉触底事件的处理函数
  onReachBottom() {
  },
}
</script>

<style>
page {
  background:#FFFFFF;
}
</style>
<style lang="scss" scoped>
.investigation-item {
  margin:0 auto 20rpx;
  width: 90%;
  border-radius: 8rpx;
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  &.active {
    background: #DFEBF8;
  }
}
.breadcrumb {
  width: 100%;
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  flex-wrap: nowrap;
}
</style>