From 0daac085e308ab5dd5557048bbcb28473ae1b7df Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期三, 27 七月 2022 17:13:32 +0800
Subject: [PATCH] gb18186

---
 src/components/giantTree/index.vue |  129 +++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 129 insertions(+), 0 deletions(-)

diff --git a/src/components/giantTree/index.vue b/src/components/giantTree/index.vue
index c04cbae..9351497 100644
--- a/src/components/giantTree/index.vue
+++ b/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鑷繁鎴栧瓙鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
+        observeParents: true, //淇敼swiper鐨勭埗鍏冪礌鏃讹紝鑷姩鍒濆鍖杝wiper
+      },
     };
   },
   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>

--
Gitblit v1.8.0