增加相机树的筛选功能

src/views/cameras/preview/CameraPreview.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <h2> 相机预览 </h2>
     <div class="cameraMain">
       <div class="cameraTree">
         <CameraTree :data="data" v-if="data" />
@@ -50,7 +49,7 @@
   }
   .cameraTree {
     width: 250px;
-    height: 800px;
-    border: 1px solid #ccc;
+    // height: 800px;
+    // border: 1px solid #ccc;
   }
 </style>

src/views/cameras/preview/components/CameraTree/CameraTree.vue

@@ -1,39 +1,53 @@
 <template>
-  <el-tree
-    :data="props.data"
-    :props="defaultProps"
-    @node-click="handleNodeClick"
-    node-key="code"
-    ref="treeRef"
-    :default-expand-all="true"
-  >
-    <template #default="{ node, data }">
-      <span class="custom-tree-node">
-        <span
-          ><span
-            class="cameraCommon"
-            :class="{
-              cameraSelect:
-                data.nodeType === CameraTreeNodeType.camera && data.id === Number(cameraId),
-            }"
-          ></span
-          >{{ node.label }}</span
-        >
-        <div>
-          <!-- {{ JSON.stringify(data) }} -->
-        </div>
-      </span>
-    </template>
-  </el-tree>
+  <div class="cameraTreeWrapper">
+    <div class="cameraTreeTitle">场景树</div>
+    <el-input
+      v-model="filterText"
+      placeholder="请输入相机的名称进行搜索"
+      :suffix-icon="Search"
+      class="filterTextInput"
+    />
+
+    <el-tree
+      :data="props.data"
+      :props="defaultProps"
+      @node-click="handleNodeClick"
+      node-key="code"
+      :default-expand-all="true"
+      :filter-node-method="filterNode"
+      ref="treeRef"
+    >
+      <template #default="{ node, data }">
+        <span class="custom-tree-node">
+          <span
+            ><span
+              class="cameraCommon"
+              :class="{
+                cameraSelect:
+                  data.nodeType === CameraTreeNodeType.camera && data.id === Number(cameraId),
+              }"
+            ></span
+            >{{ node.label }}</span
+          >
+        </span>
+      </template>
+    </el-tree>
+  </div>
 </template>
 <script lang="ts" setup>
   import { ElTree } from 'element-plus';
-  import { ref } from 'vue';
+  import { ref, watch } from 'vue';
   import { useRouteQuery } from '@vueuse/router';
+  import { Search } from '@element-plus/icons-vue';
+
   import useCameraDetail from '../../store/useCameraDetailStore';
   import { CameraTree, CameraTreeNodeType } from '@/api/camera/camera-preview';
   const props = defineProps<{ data }>();
 
+  interface Tree {
+    [key: string]: any;
+  }
+
   const { setDetail } = useCameraDetail();
 
   const cameraId = useRouteQuery('cameraId');
@@ -50,7 +64,17 @@
     }
   };
 
-  const treeRef = ref(null);
+  const filterText = ref('');
+  const treeRef = ref<InstanceType<typeof ElTree>>();
+
+  watch(filterText, (val) => {
+    treeRef.value!.filter(val);
+  });
+
+  const filterNode = (value: string, data: Tree) => {
+    if (!value) return true;
+    return data.name?.includes(value);
+  };
 </script>
 <style scoped>
   .cameraCommon {
@@ -68,4 +92,15 @@
     border-radius: 6px;
     margin-right: 6px;
   }
+  .cameraTreeTitle {
+    background: #f0f2f5;
+    padding: 12px;
+  }
+
+  .cameraTreeWrapper {
+    padding: 8px;
+  }
+  .filterTextInput {
+    margin: 8px 0;
+  }
 </style>