增加装备配置左侧树搜索和右侧列表搜索

src/views/EquipmentTypeConfig/index.vue

@@ -1,27 +1,71 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="24" class="main-content" type="justify">
+    <el-row :gutter="0" class="main-content" type="justify">
       <!-- 左侧树形结构 -->
       <el-col :span="collapsed ? 1 : 5" class="tree-column">
-        <div class="card-container" v-if="!collapsed">
-          <div class="card-header">
-            <span class="card-title">装备分类</span>
+        <el-card v-if="!collapsed">
+          <div class="head-container">
+            <el-input
+              v-model="equipmentTypeName"
+              placeholder="请输入分类名称"
+              clearable
+              maxlength="50"
+              size="small"
+              prefix-icon="el-icon-search"
+              style="margin-bottom: 20px"
+            />
           </div>
-          <el-tree
-            v-if="!collapsed"
-            :data="treeData"
-            :props="defaultProps"
-            :indent="6"
-            @node-click="handleNodeClick"
-            default-expand-all
-            class="tree-container"
-            :loading="treeLoading"
-            :key="collapsed"
-          />
-        </div>
+          <div class="head-container" style>
+            <el-tree
+              style="height: 700px; overflow: scroll"
+              :data="treeData"
+              :props="defaultProps"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              ref="tree"
+              node-key="id"
+              :default-expanded-keys="defaultExpandedKeys"
+              highlight-current
+              @node-click="handleNodeClick"
+            >
+              <span
+                class="custom-tree-node"
+                slot-scope="{ node, data }"
+                @mousemove="onMousemove(data)"
+                @mouseleave="onMouseleave()"
+              >
+                <span v-if="isMousemoveId === data.id && node.label.length > 5">{{
+                    node.label.slice(0, 3) + '...'
+                  }}</span>
+                <span v-else>{{ node.label }}</span>
+
+                <span class="btn-items" v-if="isMousemoveId === data.id">
+                  <el-button type="text" size="mini" icon="el-icon-plus" @click.stop="() => appendTreeNode(data)">
+                  </el-button>
+                  <el-button
+                    type="text"
+                    size="mini"
+                    icon="el-icon-edit-outline"
+                    style="color: #67c23a"
+                    @click.stop="() => editTreeNode(data)"
+                  >
+                  </el-button>
+                  <el-button
+                    type="text"
+                    size="mini"
+                    icon="el-icon-delete"
+                    style="color: #f56c6c"
+                    @click.stop="() => removeTreeNode(data)"
+                  >
+                  </el-button>
+                </span>
+              </span>
+            </el-tree>
+          </div>
+        </el-card>
 
         <!-- 折叠/展开控制按钮 -->
-        <div style="position: relative; width: 15px; height: calc(100vh - 130px); margin-left: 5px">
+        <div style="display: none;position: relative; width: 15px; height: calc(100vh - 130px); margin-left: 5px">
           <el-button
             size="mini"
             @click="toggleCollapse"
@@ -32,8 +76,36 @@
       </el-col>
 
       <!-- 右侧内容区域 -->
-      <el-col :span="collapsed ? 23 : 19" style="padding-left: 0">
-        <el-card class="content-box">
+      <el-col :span="collapsed ? 23 : 19" style="padding-left: 10px">
+        <!-- 搜索表单 -->
+        <el-card>
+          <el-form
+            :model="queryParams"
+            ref="queryForm"
+            size="small"
+            :inline="true"
+            label-width="68px"
+            @submit.native.prevent
+            style="height: 32px;"
+          >
+            <el-form-item label="装备名称" prop="deviceName">
+              <el-input
+                v-model="queryParams.deviceName"
+                placeholder="请输入装备名称"
+                clearable
+                style="width: 240px"
+                @keyup.enter.native="handleQuery"
+              />
+            </el-form-item>
+
+            <el-form-item style="float: right">
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
+              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+
+        <el-card class="content-box" style="margin-top: 20px">
           <!-- 新增按钮区域 -->
           <el-row style="margin-bottom: 10px">
             <el-col :span="24" style="text-align: right">
@@ -582,6 +654,7 @@ export default {
         deptName: undefined,
         status: undefined,
         typeId: undefined,
+        deviceName: undefined,
         pageNum: 1,
         pageSize: 10
       },
@@ -591,6 +664,10 @@ export default {
         children: 'children',
         label: 'name'
       },
+      // 树搜索相关
+      equipmentTypeName: undefined,
+      defaultExpandedKeys: [],
+      isMousemoveId: null,
       cascaderProps: {
         value: 'id',
         label: 'name',
@@ -676,6 +753,13 @@ export default {
     }
   },
 
+  watch: {
+    // 根据名称筛选树
+    equipmentTypeName(val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+
   computed: {
     // 计算属性：添加按钮是否禁用
     isAddButtonDisabled() {
@@ -936,6 +1020,40 @@ export default {
       return nonEmptyPath.join(' > ')
     },
 
+    // 筛选节点 - 左侧树
+    filterNode(value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+
+    // 树节点鼠标悬停
+    onMousemove(data) {
+      this.isMousemoveId = data.id
+    },
+
+    // 树节点鼠标离开
+    onMouseleave() {
+      this.isMousemoveId = null
+    },
+
+    // 树节点新增
+    appendTreeNode(data) {
+      console.log('🚀 ~ data--->add:', data)
+      this.$message.info('新增功能开发中...')
+    },
+
+    // 树节点编辑
+    editTreeNode(data) {
+      console.log('🚀 ~ data:', data)
+      this.$message.info('编辑功能开发中...')
+    },
+
+    // 树节点删除
+    removeTreeNode(data) {
+      console.log(data, '删除时的数据源--')
+      this.$message.info('删除功能开发中...')
+    },
+
     toggleCollapse() {
       this.collapsed = !this.collapsed
     },
@@ -948,6 +1066,8 @@ export default {
           this.treeData = this.processTreeData(res.data)
           this.processedTreeData = this.processTreeData(res.data)
           this.buildLevelMapping(res.data)
+          // 初始化默认展开的节点（前两级）
+          this.defaultExpandedKeys = this.getSecondLevelKeys(this.treeData)
         } else {
           this.$message.error(res.msg || '获取装备分类树失败')
         }
@@ -958,6 +1078,20 @@ export default {
       }
     },
 
+    // 获取前两级节点的 ID 用于默认展开
+    getSecondLevelKeys(treeData) {
+      const expandedKeys = []
+      treeData.forEach((node) => {
+        expandedKeys.push(node.id) // 第一级
+        if (node.children && node.children.length > 0) {
+          node.children.forEach((child) => {
+            expandedKeys.push(child.id) // 第二级
+          })
+        }
+      })
+      return expandedKeys
+    },
+
     buildLevelMapping(treeData) {
       this.levelMapping.clear()
       const buildMap = (nodes, parentPath = [], currentLevel = 1, parentId = null) => {
@@ -1246,6 +1380,21 @@ export default {
       })
     },
 
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getDeviceList()
+    },
+
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm('queryForm')
+      this.queryParams.deviceName = undefined
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = 10
+      this.getDeviceList()
+    },
+
     handleAdd() {
       this.resetAddFormData()
       this.addDialogVisible = true
@@ -1868,6 +2017,10 @@ export default {
   flex-direction: row;
 }
 
+.tree-column .el-card {
+  width: 100%;
+}
+
 .card-container {
   background-color: #fff;
   border-radius: 4px;
@@ -2438,4 +2591,23 @@ export default {
 ::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
   background-color: #8decf1;
 }
+
+::v-deep .btn-items .el-button + .el-button {
+  margin-left: 6px;
+}
+
+.btn-items {
+  margin-left: 4px;
+
+  .el-button--text {
+    font-size: 16px;
+  }
+}
+
+.custom-tree-node {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
 </style>