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="display: inline-block;"
        >
          {{ route.itemname }}
          {{ index === problemTreeSelectConfirmList.length - 1 ? "" : ">" }}
        </view>
      </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: [],
    };
  },
  // 页面加载
  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) {
		console.log(11111)
      this.problemTreeSelectConfirmList[Number(item.nlevel) - 1] = item;
      if (item.children && item.children.length > 0) {
        this.problemTreeSelectList = item.children;
      } else {
        this.problemTreeSelect = item.id;
      }
      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;
      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],
          ])
        );
      }
      console.log(this.problemTreeSelectConfirmList);
    },
  },
  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: auto;
  flex-wrap: nowrap;
}

::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>