gb18186

ZZJ

2022-07-27 88078aa63c669cffc2d91e1269d460436427d09d

 src/components/giantTree/index.vue

@@ -1,5 +1,28 @@
<template>
  <div class="tree-menu" :style="`max-height:${height - 200}px;`">
    <div class="devArea">
      <swiper :options="swiperOption" v-if="showDevArea">
        <swiper-slide
          v-for="item in nodeList"
          :key="item.devId"
          :class="{ active: activeTabObj.devId === item.devId }"
        >
          <div class="tab" @click="chooseTab(item)">
            {{ item.devName }}
          </div>
        </swiper-slide>
      </swiper>
      <div class="swiper-pre-border" v-if="showDevArea">
        <div class="icon-btn" slot="button-prev">
          <i class="iconfont">&#xe618;</i>
        </div>
      </div>
      <div class="swiper-next-border" v-if="showDevArea">
        <div class="icon-btn" slot="button-next">
          <i class="iconfont">&#xe623;</i>
        </div>
      </div>
    </div>
    <z-tree
      :nodes="node"
      :show-checkbox="TreeDataPool.multiple"
@@ -92,6 +115,11 @@
      type: Boolean,
      default: false,
    },
    showDevArea: {
      type: Boolean,
      default: false,
    },
    nodeList: {},
  },
  data() {
    return {
@@ -108,9 +136,27 @@
        ],
      },
      curNodeTid: "",

      activeTabObj: {},
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 0,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-next-border",
          prevEl: ".swiper-pre-border",
        },
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
      },
    };
  },
  created() {
    this.activeTabObj =
      this.nodeList && this.nodeList.length > 0 ? this.nodeList[0] : "";
    this.TreeDataPool.zTree = true;
    this.TreeDataPool.activeVideoIndex = sessionStorage.activeIndexVideo
      ? Number(sessionStorage.activeIndexVideo)
@@ -121,6 +167,9 @@
      if (newValue !== this.treeName) {
        this.TreeDataPool.cleanTree(this.treeName);
      }
    },
    showDevArea: function () {
      this.$forceUpdate();
    },
  },
  methods: {
@@ -153,6 +202,12 @@

        this.ztreeObj.selectNode(node, false, true);
      }
    },
    chooseTab(item) {
      this.$emit("saveTree", this.activeTabObj);
      setTimeout(() => {
        this.activeTabObj = item;
      }, 100);
    },

    findTidByIdFromArr(arr) {
@@ -357,6 +412,9 @@
};
</script>
<style lang="scss" scoped>
.devArea {
}

.dialog-box {
  position: absolute;
  width: 220px;
@@ -445,4 +503,75 @@
.tree-menu:hover {
  overflow-y: auto;
}

.devArea {
  position: relative;
  margin: 20px;
  background: #f0f5fa;
  padding: 0 40px;

  .swiper-slide {
    display: flex;
    align-items: center;
    height: 46px;

    &.active {
      .tab {
        color: #0064ff;
      }
      border-bottom: 2px solid #0064ff;
    }

    .tab {
      margin: 0 12px 0 24px;
      font-size: 14px;
      color: #666;
      cursor: pointer;
    }

    .iconfont {
      font-size: 12px;
      color: #dbdbdb;
    }
  }

  .swiper-pre-border {
    position: absolute;
    padding-bottom: 13px;
    padding-right: 18px;
    top: 12px;
    left: 10px;
    cursor: pointer;

    i {
      font-size: 16px;
      color: #999;
    }
  }

  .swiper-next-border {
    position: absolute;
    top: 12px;
    right: 10px;
    padding-bottom: 13px;
    padding-left: 18px;
    cursor: pointer;

    i {
      font-size: 16px;
      color: #999;
    }
  }

  .swiper-button-disabled {
    cursor: not-allowed;
    i {
      color: #dbdbdb;
    }
  }

  .del {
    cursor: pointer;
  }
}
</style>