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

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

      <view class="breadcrumb" :style="problemTreeSelectConfirmList.length > 0 ? 'padding:40rpx;': ''">
       
       <view
          v-for="(route, index) in problemTreeSelectConfirmList"
          :key="index"
          @click="handleClick(route)"
          style="position: absolute;"
          :style="styles(route, index)"
        >
        </view>
        {{ name }}
      </view>
    </view>
    <view v-if="problemTreeSelectConfirmList.length > 0" style="margin:0 0 0 40rpx; width:calc(100% - 80rpx); height: 1px; background: #cdd0d3;box-sizing: border-box;"></view>
    <scroll-view style="max-height: 400px;" :scroll-top="0" scroll-y="true" show-scrollbar="true">
    <view
      class="investigation-item"
      :class="problemTreeSelect === item.id ? '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 === item.id ? 'visible' : 'hidden',
        }"
      />
    </view>
  </scroll-view>
  </view>
</template>

<script>
export default {
  // 组件hiddenDangerList2
  components: {},
  props: ["hiddenDangerList2"],
  data() {
    return {
      // 公用的js
      $: this.$,
      originList: [],
      problemTreeSelect: null,
      problemTreeSelectList: [],
	     problemTreeSelectAllList: [],
      problemTreeSelectConfirmList: [],
      name: '',
      w1:''
    };
  },
  // 页面加载
  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 =JSON.parse(JSON.stringify( res.result));
            this.problemTreeSelectList =JSON.parse(JSON.stringify( res.result));
			      this.problemTreeSelectAllList=JSON.parse(JSON.stringify( res.result))
            // if(this.hiddenDangerList2.length>0) {
            //   // this.problemTreeSelectConfirmList = this.hiddenDangerList2
            //   console.log(this.hiddenDangerList2)
            //   this.problemTreeSelectList = this.hiddenDangerList2[1].children
            //   this.problemTreeSelect = this.hiddenDangerList2[2].id
            // }
          }
        });
    },
    // 跳转页面
    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 = item.id;
      }
      this.name = ''
      this.problemTreeSelectConfirmList.map((m,i) => {
        if(i<2){
          this.name = this.name + m.itemname + '>'
        }else{
          this.name = this.name + m.itemname
        }
      })
      this.$emit("select", this.problemTreeSelectConfirmList);
    },
    styles(item, index){
      if(index == 0) {
        this.w1 = item.itemname.length * 18
        return `left: 18px;width: ${item.itemname.length * 18}px;height: 20px;top: 22px;`
      }
      if(index == 1) {
        return `left: ${this.w1 + 18}px;width: ${item.itemname.length * 18}px;height: 20px;top: 22px;`
      }
    },
    handleClick(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;
      if (item.nlevel == 1) {
        this.problemTreeSelectConfirmList = JSON.parse(
          JSON.stringify([this.problemTreeSelectConfirmList[0]])
        );
      }
      if (item.nlevel == 2) {
        this.problemTreeSelectConfirmList = JSON.parse(
          JSON.stringify([
            this.problemTreeSelectConfirmList[0],
            this.problemTreeSelectConfirmList[1],
          ])
        );
      }
      this.name = ''
      this.problemTreeSelectConfirmList.map((m,i) => {
        if(i<2){
          this.name = this.name + m.itemname + '>'
        }else{
          this.name = this.name + m.itemname
        }
      })
    },
  },
  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%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: left;
  overflow-x: hidden;
  flex-wrap: nowrap;
  position: relative;
}

::v-deep ::-webkit-scrollbar {
    // 滚动条整体样式
    display: block;
    width: 20rpx !important;
    height: 20rpx !important;
    -webkit-appearance: auto !important;
    background: transparent;
    overflow: auto !important;
}
  
::v-deep ::-webkit-scrollbar-thumb {
    // 滚动条里面小方块
    border-radius: 20rpx !important;
    box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
    background-color: #f7f7f7 !important;
}
  
::v-deep ::-webkit-scrollbar-track {
    // 滚动条
    border-radius: 20rpx !important;
    box-shadow: inset 0 0 5rpx rgba(0, 0, 0, 0.2) !important;
    background-color: #dad8d8 !important;
}
    
</style>