From 649a012bd1f445afd51e3aad8e137d43c36434e0 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期五, 05 八月 2022 11:48:21 +0800
Subject: [PATCH] 检索导出添加组织字段

---
 src/components/giantTree/index.vue |  152 ++++++++++++++++++++++++++++++++++++++++++++++++--
 1 files changed, 144 insertions(+), 8 deletions(-)

diff --git a/src/components/giantTree/index.vue b/src/components/giantTree/index.vue
index 3325c7b..9dca0d4 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" v-if="showDevArea">
+      <swiper :options="swiperOption">
+        <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"
@@ -18,14 +41,11 @@
       @onExpand="itemExpand"
       @onCollapse="itemCollapse"
       @onShowPic="showCameraPic"
+      :search="search"
     />
     <div class="empty" v-if="!node.length">鏆傛棤鎽勫儚鏈烘暟鎹�,璇锋坊鍔犳憚鍍忔満!</div>
     <div class="dialog-box-bg" v-show="showDialog" @click="hideDialogBox"></div>
-    <div
-      class="dialog-box"
-      v-show="showDialog"
-      :style="{ left: clientX + 'px', top: clientY + 'px' }"
-    >
+    <div class="dialog-box" v-show="showDialog">
       <el-card :body-style="{ padding: '10px' }">
         <el-form
           :model="dialogForm"
@@ -87,6 +107,15 @@
         return {};
       },
     },
+    search: {
+      type: Boolean,
+      default: false,
+    },
+    showDevArea: {
+      type: Boolean,
+      default: false,
+    },
+    nodeList: {},
   },
   data() {
     return {
@@ -103,9 +132,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)
@@ -116,6 +163,9 @@
       if (newValue !== this.treeName) {
         this.TreeDataPool.cleanTree(this.treeName);
       }
+    },
+    showDevArea: function () {
+      this.$forceUpdate();
     },
   },
   methods: {
@@ -148,6 +198,12 @@
 
         this.ztreeObj.selectNode(node, false, true);
       }
+    },
+    chooseTab(item) {
+      this.$emit("saveTree", this.activeTabObj);
+      setTimeout(() => {
+        this.activeTabObj = item;
+      }, 100);
     },
 
     findTidByIdFromArr(arr) {
@@ -316,8 +372,11 @@
     //   this.TreeDataPool.updateZTreeCheckNodes([treeNode]);
     // },
     itemCheck(evt, treeId, treeNode) {
-      this.TreeDataPool.selectedNode = treeNode;
+      if (treeNode) {
+        this.TreeDataPool.selectedNode = treeNode;
+      }
       this.TreeDataPool.treeType = this.treeName;
+
       // 澶氶��
       // this.ztreeObj.checkNode(treeNode, true, false, false);
       let checkedNodes = this.ztreeObj.getCheckedNodes(true);
@@ -328,6 +387,7 @@
 
       // 淇濆瓨涓�浠芥暟鎹�
       this.TreeDataPool.activeTreeData = this.ztreeObj.getNodes();
+      this.$emit("itemChecked", treeNode);
     },
     //灞曞紑
     itemExpand(e, id, node) {
@@ -348,10 +408,15 @@
 };
 </script>
 <style lang="scss" scoped>
+.devArea {
+}
+
 .dialog-box {
-  position: absolute;
+  top: 415px;
+  left: 43px;
+  position: fixed;
   width: 220px;
-  z-index: 1;
+  z-index: 3;
 }
 .dialog-box-bg {
   position: absolute;
@@ -436,4 +501,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