测试搜索树

src/views/data-fill/components/HcTreeDataV2.vue

@@ -0,0 +1,92 @@
+<template>
+    <el-tree-v2
+        ref="ElTreeRef" :class="[ui]" :data="datas" :props="ElTreeProps"
+        class="hc-tree-node" :filter-method="filterMethod" :height="treeHeight"></el-tree-v2>
+</template>
+
+<script setup>
+import {ref, watch, nextTick} from "vue";
+//参数
+const props = defineProps({
+    ui: {
+        type: String,
+        default: ''
+    },
+    height: {
+        type: [Number, String],
+        default: 0
+    },
+    datas: {
+        type: Array,
+        default: () => ([])
+    },
+    submitCounts: {
+        type: Boolean,
+        default: false
+    },
+    searchTreeVal: {
+        type: String,
+        default: ''
+    },
+})
+
+//变量
+const ElTreeRef = ref(null)
+const ElTreeProps = ref({
+    value: 'primaryKeyId',
+    label: 'title',
+    children: 'children',
+})
+const treeHeight = ref(0)
+
+const isSubmitCounts = ref(props.submitCounts);
+const searchInfo = ref(props.searchTreeVal)
+
+//监听
+watch(() => [
+    props.height,
+    props.submitCounts,
+    props.searchTreeVal,
+], ([height, submitCounts, searchTreeVal]) => {
+    console.log('height', height)
+    treeHeight.value = height
+    isSubmitCounts.value = submitCounts
+    searchInfo.value = searchTreeVal
+})
+
+//事件
+const emit = defineEmits(['menuTap', 'nodeTap', 'changeSearch', 'changetreelaod'])
+
+//节点被点击
+const ElTreeClick = async (data, node) => {
+    console.log('node', node)
+    console.log('data', data)
+}
+
+//筛选树节点
+const filterMethod = (query, node) => {
+    console.log('query',query)
+    return node.label?.includes(query)
+}
+
+// 暴露出去
+defineExpose({
+
+})
+</script>
+
+<style lang="scss" scoped>
+@import "../../../styles/app/tree.scss";
+</style>
+<style lang="scss">
+.el-tree.hc-tree-node .el-tree-node {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    .el-tree-node_content {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+</style>

src/views/data-fill/wbs.vue

@@ -125,40 +125,35 @@
                             </template>
                         </el-input>
                     </div>
-                    <div v-loading="treeLoading" class="hc-tree-scrollbar" element-loading-text="获取数据中...">
-                        <el-scrollbar class="scroll-bar-right-16">
-                            <KeepAlive>
-                                <template v-if="isSearchTree">
-                                    <HcTreeData
-                                        :ElTreeLoadNode="searchElTreeLoadNode"
-                                        :autoExpandKeys="TreeAutoExpandKeys"
-                                        :datas="searchTreeData"
-                                        :isMark="TreeMark"
-                                        :menus="ElTreeMenu" :searchTreeVal="searchTreeVal"
-                                        :submitCounts="true"
-                                        isColor
-                                        @changeSearch="changeisSearch"
-                                        @changetreelaod="changetreelaod"
-                                        @menuTap="ElTreeMenuClick"
-                                        @nodeTap="wbsElTreeClick"/>
-                                </template>
-                                <template v-else>
-                                    <WbsTree
-                                        ref="wbstree"
-                                        :autoExpandKeys="TreeAutoExpandKeys"
-                                        :classifyType="authBtnTabKey"
-                                        :contractId="contractId"
-                                        :isMark="TreeMark"
-                                        :menus="ElTreeMenu"
-                                        :projectId="projectId"
-                                        :submitCounts="true"
-                                        :treeKey="wbstreeKey"
-                                        isColor
-                                        @menuTap="ElTreeMenuClick"
-                                        @nodeLoading="ElTreeNodeLoading"
-                                        @nodeTap="wbsElTreeClick"/>
-                                </template>
-                            </KeepAlive>
+                    <div v-loading="treeLoading" id="hc-tree-scrollbar" class="hc-tree-scrollbar" element-loading-text="获取数据中...">
+                        <HcTreeDataV2
+                            v-show="isSearchTree"
+                            :datas="searchTreeData"
+                            :height="searchTreeHeight"
+                            :isMark="TreeMark"
+                            :menus="ElTreeMenu"
+                            :searchTreeVal="searchTreeVal"
+                            :submitCounts="true"
+                            isColor
+                            @changeSearch="changeisSearch"
+                            @changetreelaod="changetreelaod"
+                            @menuTap="ElTreeMenuClick"
+                            @nodeTap="wbsElTreeClick"/>
+                        <el-scrollbar class="scroll-bar-right-16" v-show="!isSearchTree">
+                            <WbsTree
+                                ref="wbstree"
+                                :autoExpandKeys="TreeAutoExpandKeys"
+                                :classifyType="authBtnTabKey"
+                                :contractId="contractId"
+                                :isMark="TreeMark"
+                                :menus="ElTreeMenu"
+                                :projectId="projectId"
+                                :submitCounts="true"
+                                :treeKey="wbstreeKey"
+                                isColor
+                                @menuTap="ElTreeMenuClick"
+                                @nodeLoading="ElTreeNodeLoading"
+                                @nodeTap="wbsElTreeClick"/>
                         </el-scrollbar>
                     </div>
                 </div>
@@ -672,6 +667,7 @@ import CollapseForm from "./collapse-form/index.vue"
 import NodeTree from "./components/nodeTree/index.vue"
 import HcTreeNode from "./components/HcTreeNode.vue"
 import HcTreeData from "./components/HcTreeData.vue"
+import HcTreeDataV2 from "./components/HcTreeDataV2.vue"
 import WbsTree from "./components/WbsTree.vue"
 import {getTokenHeader} from '~src/api/request/header';
 import {getStoreValue, setStoreValue} from '~src/utils/storage'
@@ -701,10 +697,13 @@ const typeName = routerQuery?.type || 'tree'
 const isDrawType = ref(true)
 //自动展开缓存
 const TreeAutoExpandKeys = ref(getStoreValue('wbsTreeExpandKeys') || [])
+
 //树搜索
 const isSearchTree = ref(false)
 const wbstreeKey = ref(Math.random())
 const searchElTreeLoadNode = ref(true)
+const searchTreeHeight = ref()
+
 const getSearchTreeData = async () => {
     searchElTreeLoadNode.value = true
     if (contractInfo.value?.contractType == 2 || contractInfo.value?.contractType == 3) {
@@ -727,6 +726,7 @@ const getSearchTreeData = async () => {
             searchElTreeLoadNode.value = false
             searchTreeData.value = []
         }
+        console.log(searchTreeData.value)
     } else {
         searchElTreeLoadNode.value = true
         const {error, code, data} = await queryApi.getTreeall({
@@ -744,17 +744,16 @@ const getSearchTreeData = async () => {
             searchElTreeLoadNode.value = false
             searchTreeData.value = []
         }
+        console.log(searchTreeData.value)
     }
-
-
 }
 //监听
 watch(() => [
     useAppState.getCollapse,
 ], ([Collapse]) => {
     isCollapse.value = Collapse
-
 })
+
 watch(projectId, (val) => {
         if (val) {
             getSearchTreeData()
@@ -798,7 +797,6 @@ const setContractType = (contractType) => {
 }
 
 const getTableDataAll = () => {
-
     searchNodeAllTable()
     queryNodeStatus()
 //     wbstree.value.resetNode().then((res)=>{
@@ -808,8 +806,6 @@ const getTableDataAll = () => {
 //         }
 
 //  })
-
-
 }
 
 //结构类型tab数据和相关处理
@@ -909,10 +905,11 @@ const changetreelaod = (val) => {
 }
 const treeLoading = ref(false)
 const searchTreeClick = async () => {
+    searchTreeHeight.value = document.getElementById('hc-tree-scrollbar').offsetHeight;
     //  isSearchTree.value=true
-    treeLoading.value = true
+    //treeLoading.value = true
     if (searchElTreeLoadNode.value === true) {
-        treeLoading.value = true
+        //treeLoading.value = true
         window?.$message?.warning('请加载完再次点击搜索')
     } else {
         isSearchTree.value = true