From d6d0b7aa05434e30c9209f45bcbf43aed76b7a95 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Fri, 12 Dec 2025 19:17:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lessor/equipment/equipType/index.vue      | 244 +++++++++++++-----
 .../lessor/equipment/equipType/indexOld.vue   |   4 +-
 2 files changed, 178 insertions(+), 70 deletions(-)

diff --git a/src/views/lessor/equipment/equipType/index.vue b/src/views/lessor/equipment/equipType/index.vue
index e778bb9a..f68229ca 100644
--- a/src/views/lessor/equipment/equipType/index.vue
+++ b/src/views/lessor/equipment/equipType/index.vue
@@ -2,75 +2,96 @@
     <!-- 类型管理 -->
     <div class="app-container" id="toolsType">
         <el-row :gutter="10" class="main-content">
-            <el-col :span="5">
+            <el-col v-show="showTrees" :span="10">
                 <el-card>
-                    <el-input
-                        clearable
-                        size="small"
-                        maxlength="50"
-                        v-model="typeName"
-                        prefix-icon="el-icon-search"
-                        placeholder="请输入类型名称"
-                        style="margin-bottom: 20px"
-                    />
-                    <el-tree
-                        ref="tree"
-                        node-key="id"
-                        highlight-current
-                        :data="treeOptions"
-                        :expand-on-click-node="false"
-                        @node-click="handleNodeClick"
-                        :filter-node-method="filterNode"
-                        :default-expanded-keys="defaultExpandedKeys"
-                        :props="{ children: 'children', label: 'label' }"
-                    >
-                        <div
-                            class="custom-tree-node"
-                            slot-scope="{ node, data }"
-                            @mousemove="onMousemove(data)"
-                            @mouseleave="onMouseleave()"
-                        >
-                            <span v-if="isMousemoveId === data.id && node.label.length > 10">
-                                {{ node.label.slice(0, 10) + '...' }}
-                            </span>
-                            <span v-else>{{ node.label }}</span>
-                        </div>
-                    </el-tree>
+                    <div slot="header" class="tree-card-header">
+                        <span>类型选择</span>
+                        <el-button type="text" size="mini" @click="toggleTrees">
+                            <i :class="showTrees ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"></i>
+                            {{ showTrees ? '折叠左侧树' : '展开左侧树' }}
+                        </el-button>
+                    </div>
+                    <el-row :gutter="10">
+                        <el-col :span="12">
+                            <el-card shadow="never">
+                                <div slot="header" class="tree-card-subheader">装备类型</div>
+                                <el-input
+                                    clearable
+                                    size="small"
+                                    maxlength="50"
+                                    v-model="typeName"
+                                    prefix-icon="el-icon-search"
+                                    placeholder="请输入类型名称"
+                                    style="margin-bottom: 20px"
+                                />
+                                <el-tree
+                                    ref="tree"
+                                    node-key="id"
+                                    highlight-current
+                                    :data="treeOptions"
+                                    :expand-on-click-node="false"
+                                    @node-click="(data) => handleNodeClick(data, 'left')"
+                                    :filter-node-method="filterNode"
+                                    :default-expanded-keys="defaultExpandedKeys"
+                                    :props="{ children: 'children', label: 'label' }"
+                                >
+                                    <div
+                                        class="custom-tree-node"
+                                        slot-scope="{ node, data }"
+                                        @mousemove="onMousemove(data)"
+                                        @mouseleave="onMouseleave()"
+                                    >
+                                        <span v-if="isMousemoveId === data.id && node.label.length > 10">
+                                            {{ node.label.slice(0, 10) + '...' }}
+                                        </span>
+                                        <span v-else>{{ node.label }}</span>
+                                    </div>
+                                </el-tree>
+                            </el-card>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-card shadow="never">
+                                <div slot="header" class="tree-card-subheader">工具类型</div>
+                                <el-input
+                                    clearable
+                                    size="small"
+                                    maxlength="50"
+                                    v-model="typeName_1"
+                                    prefix-icon="el-icon-search"
+                                    placeholder="请输入类型名称"
+                                    style="margin-bottom: 20px"
+                                />
+                                <el-tree
+                                    ref="tree_1"
+                                    node-key="id"
+                                    highlight-current
+                                    :data="treeOptions2"
+                                    :expand-on-click-node="false"
+                                    :filter-node-method="filterNode_1"
+                                    @node-click="(data) => handleNodeClick(data, 'right')"
+                                    :default-expanded-keys="defaultExpandedKeys2"
+                                    :props="{ children: 'children', label: 'label' }"
+                                >
+                                    <div class="custom-tree-node" slot-scope="{ node, data }">
+                                        <span v-if="isMousemoveId === data.id && node.label.length > 10">{{
+                                            node.label.slice(0, 10) + '...'
+                                        }}</span>
+                                        <span v-else>{{ node.label }}</span>
+                                    </div>
+                                </el-tree>
+                            </el-card>
+                        </el-col>
+                    </el-row>
                 </el-card>
             </el-col>
-            <el-col :span="5">
-                <el-card>
-                    <el-input
-                        clearable
-                        size="small"
-                        maxlength="50"
-                        v-model="typeName_1"
-                        prefix-icon="el-icon-search"
-                        placeholder="请输入类型名称"
-                        style="margin-bottom: 20px"
-                    />
-                    <el-tree
-                        ref="tree_1"
-                        node-key="id"
-                        highlight-current
-                        :data="treeOptions2"
-                        :expand-on-click-node="false"
-                        :filter-node-method="filterNode_1"
-                        @node-click="handleNodeClick"
-                        :default-expanded-keys="defaultExpandedKeys2"
-                        :props="{ children: 'children', label: 'label' }"
-                    >
-                        <div class="custom-tree-node" slot-scope="{ node, data }">
-                            <span v-if="isMousemoveId === data.id && node.label.length > 10">{{
-                                node.label.slice(0, 10) + '...'
-                            }}</span>
-                            <span v-else>{{ node.label }}</span>
-                        </div>
-                    </el-tree>
-                </el-card>
-            </el-col>
-            <el-col :span="14">
+            <el-col :span="tableSpan">
                 <el-card class="table-container">
+                    <div slot="header" class="table-card-header">
+                        <span>列表</span>
+                        <el-button v-if="!showTrees" type="text" size="mini" @click="toggleTrees">
+                            <i class="el-icon-d-arrow-right"></i> 展开左侧树
+                        </el-button>
+                    </div>
                     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
                         <el-form-item label="关键字" prop="keyWord">
                             <el-input
@@ -98,7 +119,13 @@
                         </el-col>
                     </el-row>
 
-                    <el-table v-loading="loading" :data="typeList" border @selection-change="handleSelectionChange">
+                    <el-table
+                        v-if="typeList.length > 0"
+                        v-loading="loading"
+                        :data="typeList"
+                        border
+                        @selection-change="handleSelectionChange"
+                    >
                         <el-table-column type="selection" width="50" align="center" />
                         <el-table-column
                             label="专业"
@@ -114,6 +141,53 @@
                         <el-table-column label="租赁价" align="center" prop="leasePrice" show-overflow-tooltip />
                     </el-table>
 
+                    <el-table
+                        v-if="typeList2.length > 0"
+                        v-loading="loading"
+                        :data="typeList2"
+                        border
+                        height="546"
+                        @selection-change="handleSelectionChange"
+                    >
+                        <el-table-column type="selection" width="50" align="center" />
+                        <el-table-column
+                            label="工具专业"
+                            align="center"
+                            key="fourthParentName"
+                            prop="fourthParentName"
+                            show-overflow-tooltip
+                        />
+                        <el-table-column
+                            label="施工类型"
+                            align="center"
+                            key="greatGrandparentName"
+                            prop="greatGrandparentName"
+                            show-overflow-tooltip
+                        />
+                        <el-table-column
+                            label="工具类型"
+                            align="center"
+                            key="grandparentTypeName"
+                            prop="grandparentTypeName"
+                            show-overflow-tooltip
+                        />
+                        <el-table-column
+                            label="工具名称"
+                            align="center"
+                            key="parentTypeName"
+                            prop="parentTypeName"
+                            show-overflow-tooltip
+                        />
+                        <el-table-column
+                            label="规格型号"
+                            align="center"
+                            key="typeName"
+                            prop="typeName"
+                            show-overflow-tooltip
+                        />
+                        <el-table-column label="租赁价" align="center" prop="leasePrice" show-overflow-tooltip />
+                    </el-table>
+
                     <pagination
                         :total="total"
                         @pagination="getList"
@@ -201,8 +275,14 @@ export default {
             defaultExpandedKeys: [],
             defaultExpandedKeys2: [],
             isTool: false,
+            showTrees: true,
         }
     },
+    computed: {
+        tableSpan() {
+            return this.showTrees ? 14 : 24
+        },
+    },
     watch: {
         typeName(val) {
             this.$refs.tree.filter(val)
@@ -280,7 +360,7 @@ export default {
 
             this.treeOptions = [
                 {
-                    label: '机具类型',
+                    label: '装备类型',
                     id: 0,
                     children: filterTree(response.data),
                     level: 0,
@@ -312,13 +392,24 @@ export default {
             return data.label.indexOf(value) !== -1
         },
 
-        handleNodeClick(data) {
+        handleNodeClick(data, source = 'left') {
             this.isTool = data.isTool
             this.queryParams.typeId = data.id
             this.queryParams.level = data.level
             this.queryParams.typeName = data.label
+
+            // 取消另一棵树的高亮
+            if (source === 'left') {
+                this.$refs.tree_1?.setCurrentKey(null)
+            } else {
+                this.$refs.tree?.setCurrentKey(null)
+            }
+
             this.getList()
         },
+        toggleTrees() {
+            this.showTrees = !this.showTrees
+        },
 
         resetQuery() {
             this.dateRange = []
@@ -457,4 +548,21 @@ export default {
 .table-container {
     overflow: auto;
 }
+
+.tree-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.tree-card-subheader {
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.table-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
 </style>
diff --git a/src/views/lessor/equipment/equipType/indexOld.vue b/src/views/lessor/equipment/equipType/indexOld.vue
index 394e6e84..d46a57e8 100644
--- a/src/views/lessor/equipment/equipType/indexOld.vue
+++ b/src/views/lessor/equipment/equipType/indexOld.vue
@@ -80,9 +80,9 @@
                         :filter-node-method="filterNode"
                         ref="tree2"
                         node-key="id"
-                        :default-expanded-keys="defaultExpandedKeys2"
                         highlight-current
                         @node-click="handleNodeClick"
+                        :default-expanded-keys="defaultExpandedKeys2"
                     >
                         <div
                             class="custom-tree-node"
@@ -352,7 +352,7 @@ export default {
                     pageNum: this.queryParams.pageNum,
                     pageSize: this.queryParams.pageSize,
                 }
-                getListTool(params).then((res) => {
+                getListTool(this.queryParams).then((res) => {
                     this.typeList2 = res.rows
                     this.total = res.total
                     this.loading = false