关联工程用途部位修改

src/views/tentative/detect/components/DivisionTree.vue

@@ -112,6 +112,7 @@ const handleCheckChange = (data,checked,indeterminate,) => {
         }
  }
 const filterNode = (value, data,node) => {
+      isdivisionLoading.value=true
     if(!value){
             return true;
         }
@@ -122,6 +123,7 @@ const filterNode = (value, data,node) => {
         _array.forEach((item)=>{
             result = result || item;
         });
+          isdivisionLoading.value=false
         return result;
     }
 </script>

src/views/tentative/detect/components/DivisionTree1.vue

@@ -0,0 +1,131 @@
+<template>
+  
+    <ElTree 
+    class="hc-tree-node tree-line" 
+    ref="ElTreeRef" 
+    :props="ElTreeProps" 
+    :data="datas" 
+    highlight-current 
+    accordion node-key="primaryKeyId" 
+    :indent="0" 
+    @node-click="ElTreeClick"
+     show-checkbox
+    @check-change="handleCheckChange"
+     :default-checked-keys="defaultCheckarr"
+     :default-expand-all="defaultExpandAll"
+     v-loading="divisionLoading"
+   
+    >
+        <template #default="{ node, data }">
+            <div class="data-custom-tree-node" :id="`${idPrefix}${data['primaryKeyId']}`">
+                <div class="label" :class="node.level === 1?'level-name':''">{{ node.label }}</div>
+            </div>
+        </template>
+    </ElTree>
+</template>
+
+<script setup>
+import { ref , watch,nextTick} from "vue";
+//参数
+const props = defineProps({
+    datas: {
+        type: Array,
+        default: () => ([])
+    },
+    idPrefix: {
+        type: String,
+        default: 'division-tree-data2-'
+    },
+    defaultCheckarr:{
+        type: Array,
+        default: () => ([])
+    },
+    ElTreeProps:{
+        type:Object,
+        default:{
+        label: 'fullName',
+        children: 'children'      
+        }
+    },
+    defaultExpandAll:{
+        type:Boolean,
+        default:false
+    },
+    divisionLoading:{
+        type:Boolean,
+        default:false
+    },
+    linksRelateSearchTreeVal:{
+        type: String,
+        default: ''
+    }
+})
+const linksRelateSearchTreeValInfo=ref('')
+//监听
+watch(() => [
+    props.divisionLoading,
+    props.linksRelateSearchTreeVal,
+   
+], ([divisionLoading,LinksRelateSearchTreeVal]) => {
+   isdivisionLoading.value=divisionLoading
+   linksRelateSearchTreeValInfo.value=LinksRelateSearchTreeVal
+})
+watch(linksRelateSearchTreeValInfo, (val) => {
+    if(val){
+        nextTick(()=> {
+          ElTreeRef?.value.filter(val)
+        }) 
+    }else if(!val.length){
+        
+    }
+   
+},
+
+{immediate:true}
+
+)
+//变量
+const ElTreeRef = ref(null)
+const isdivisionLoading=ref(props.divisionLoading)
+// const ElTreeProps = ref({
+//     label: 'fullName',
+//     children: 'children'
+// })
+// const defaultCheckarr =  ref([])
+
+//事件
+const emit = defineEmits(['nodeTap','nodeCheck'])
+
+//节点被点击
+const ElTreeClick = async (data,node) => {
+    emit('nodeTap', {node, data})
+}
+//节点被选中
+const handleCheckChange = (data,checked,indeterminate,) => {
+  emit('nodeCheck',ElTreeRef.value?.getCheckedNodes(false, false))
+}
+ const getReturnNode=(node,_array,value)=>{
+        let isPass = node.data &&  node.data.title && node.data.title.indexOf(value) !== -1;
+        isPass?_array.push(isPass):'';
+        if(!isPass && node.level!=1 && node.parent){
+          getReturnNode(node.parent,_array,value);
+        }
+ }
+const filterNode = (value, data,node) => {
+    if(!value){
+            return true;
+        }
+        let level = node.title;
+        let _array = [];//这里使用数组存储 只是为了存储值。
+        getReturnNode(node,_array,value);
+        let result = false;
+        _array.forEach((item)=>{
+            result = result || item;
+        });
+        return result;
+    }
+</script>
+
+<style lang="scss" scoped>
+@import "../../../../styles/app/tree.scss";
+</style>

src/views/tentative/detect/test-form.vue

@@ -82,7 +82,7 @@
         <HcDialog :show="linksRelateModal" title="关联工程用途及部位" widths="50rem" isTable saveText="确认关联" @close="linksRelateModalClose" @save="linksRelateModalSave">
             <div class="hc-links-relate-tree-box">
                 <div class="hc-search-tree-val">
-                    <el-input v-model="linksRelateSearchTreeVal" block size="large" placeholder="请输入名称关键词检索" clearable @keyup="searchTreeKeyUp">
+                    <el-input v-model="linksRelateSearchTreeVal" block size="large" placeholder="请输入名称关键词检索" clearable @keyup="searchTreeKeyUp" @clear="clearSearch">
                         <template #suffix>
                             <HcIcon name="search-2" ui="text-xl"  @click="searchTreeClick"/>
                         </template>
@@ -93,10 +93,19 @@
                          <!-- <DivisionTree :datas="unmatchedTreeData" @nodeTap="divisionTreeClick" @nodeCheck="divisionTreeCheck" :defaultCheckarr="defaultCheckarrIds"/> -->
                           
                             <template v-if="isSearchTree">
-                               <DivisionTree :datas="searchTreeData" @nodeTap="divisionTreeClick" @nodeCheck="divisionTreeCheck" :defaultCheckarr="defaultCheckarrIds" :ElTreeProps="seaElTreeProps" :defaultExpandAll="true" :check-strictly="true" :divisionLoading="searchlinksRelateTreeLoading"/>
+                               <DivisionTree1 
+                               :datas="searchTreeData"
+                                @nodeTap="divisionTreeClick" 
+                                @nodeCheck="divisionTreeCheck" 
+                                :defaultCheckarr="defaultCheckarrIds" 
+                                :ElTreeProps="seaElTreeProps" 
+                                :defaultExpandAll="true" 
+                                :check-strictly="true" 
+                                :divisionLoading="searchlinksRelateTreeLoading"/>
                             </template>
                             
                                <DivisionTree 
+                               v-show="!isSearchTree"
                                :datas="unmatchedTreeData" 
                                @nodeTap="divisionTreeClick"
                                 @nodeCheck="divisionTreeCheck"
@@ -151,6 +160,7 @@ import {useAppStore} from "~src/store";
 import {useRouter, useRoute} from 'vue-router'
 import ListItem from "./components/ListItem.vue"
 import DivisionTree from "./components/DivisionTree.vue"
+import DivisionTree1 from "./components/DivisionTree1.vue"
 import dataApi from "~api/tentative/detect/test";
 import divisionApi from "~api/data-fill/division";
 import queryApi from '~api/data-fill/query';
@@ -351,6 +361,7 @@ const getContractInfoTreeApi = async () => {
     //判断状态
     if (!error && code === 200) {
         unmatchedTreeData.value = getArrValue(data['treeContractAll'])
+        searchTreeData.value = getArrValue(data['treeContractAll'])
           setStoreData('unmatchedTreeData',  unmatchedTreeData.value)
         
         defaultCheckarrIds.value=getArrValue(data['isSelectedStatus'])
@@ -393,20 +404,16 @@ const linksRelateSearchTreeVal = ref('')
 
 
 // )
-// watch(linksRelateSearchTreeVal, (val) => {
-//     if(!val.length){
-//         nextTick(()=> {
-//               unmatchedTreeData.value =getStoreData('unmatchedTreeData');
-            
-         
-//         }) 
-//     }
+watch(linksRelateSearchTreeVal, (val) => {
+    if(!val.length){
+       clearSearch()
+    }
    
-// },
+},
 
-// {immediate:true}
 
-// )
+
+)
 const linksRelateTreeLoading = ref(false)
 const searchTreeData = ref([])
 const searchlinksRelateTreeLoading = ref(false)
@@ -415,13 +422,25 @@ const searchTreeKeyUp = (e) => {
         searchTreeClick()
     }
 }
+const clearSearch = (e) => {
+      isSearchTree.value=true
+      searchlinksRelateTreeLoading.value = true
+      setTimeout(()=>{
+          searchlinksRelateTreeLoading.value = false
+      },3000)
+        
+}
+
 //树搜索
 const isSearchTree = ref(false)
 const searchTreeClick = async () => {
     if (linksRelateSearchTreeVal.value) {
-        // isSearchTree.value = true
-        searchlinksRelateTreeLoading.value = true
-        searchlinksRelateTreeLoading.value = false
+          nextTick(()=> {
+            isSearchTree.value=false
+            
+         
+        }) 
+        
     //   const {error, code, data} = await queryApi.searchContractTree({
     //         contractId: contractId.value,
     //         queryValue: linksRelateSearchTreeVal.value
@@ -434,11 +453,7 @@ const searchTreeClick = async () => {
     //         searchlinksRelateTreeLoading.value = false
     //         searchTreeData.value = []
     //     }
-    } else {
-        searchlinksRelateTreeLoading.value = true
-        isSearchTree.value = false
-        searchlinksRelateTreeLoading.value = false
-    }
+    } 
 }
 //确认关联
 const linksRelateModalSave =async () => {