bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

This commit is contained in:
BianLzhaoMin 2025-12-12 19:17:33 +08:00
parent 2ef48ebff2
commit d6d0b7aa05
2 changed files with 178 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

244
src/views/lessor/equipment/equipType/index.vue
View File

@ -2,75 +2,96 @@
<!-- 类型管理 --> <!-- 类型管理 -->
<div class="app-container" id="toolsType"> <div class="app-container" id="toolsType">
<el-row :gutter="10" class="main-content"> <el-row :gutter="10" class="main-content">
<el-col :span="5"> <el-col v-show="showTrees" :span="10">
<el-card> <el-card>
<el-input <div slot="header" class="tree-card-header">
clearable <span>类型选择</span>
size="small" <el-button type="text" size="mini" @click="toggleTrees">
maxlength="50" <i :class="showTrees ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"></i>
v-model="typeName" {{ showTrees ? '折叠左侧树' : '展开左侧树' }}
prefix-icon="el-icon-search" </el-button>
placeholder="请输入类型名称" </div>
style="margin-bottom: 20px" <el-row :gutter="10">
/> <el-col :span="12">
<el-tree <el-card shadow="never">
ref="tree" <div slot="header" class="tree-card-subheader">装备类型</div>
node-key="id" <el-input
highlight-current clearable
:data="treeOptions" size="small"
:expand-on-click-node="false" maxlength="50"
@node-click="handleNodeClick" v-model="typeName"
:filter-node-method="filterNode" prefix-icon="el-icon-search"
:default-expanded-keys="defaultExpandedKeys" placeholder="请输入类型名称"
:props="{ children: 'children', label: 'label' }" style="margin-bottom: 20px"
> />
<div <el-tree
class="custom-tree-node" ref="tree"
slot-scope="{ node, data }" node-key="id"
@mousemove="onMousemove(data)" highlight-current
@mouseleave="onMouseleave()" :data="treeOptions"
> :expand-on-click-node="false"
<span v-if="isMousemoveId === data.id && node.label.length > 10"> @node-click="(data) => handleNodeClick(data, 'left')"
{{ node.label.slice(0, 10) + '...' }} :filter-node-method="filterNode"
</span> :default-expanded-keys="defaultExpandedKeys"
<span v-else>{{ node.label }}</span> :props="{ children: 'children', label: 'label' }"
</div> >
</el-tree> <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-card>
</el-col> </el-col>
<el-col :span="5"> <el-col :span="tableSpan">
<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-card class="table-container"> <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 :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
<el-form-item label="关键字" prop="keyWord"> <el-form-item label="关键字" prop="keyWord">
<el-input <el-input
@ -98,7 +119,13 @@
</el-col> </el-col>
</el-row> </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 type="selection" width="50" align="center" />
<el-table-column <el-table-column
label="专业" label="专业"
@ -114,6 +141,53 @@
<el-table-column label="租赁价" align="center" prop="leasePrice" show-overflow-tooltip /> <el-table-column label="租赁价" align="center" prop="leasePrice" show-overflow-tooltip />
</el-table> </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 <pagination
:total="total" :total="total"
@pagination="getList" @pagination="getList"
@ -201,8 +275,14 @@ export default {
defaultExpandedKeys: [], defaultExpandedKeys: [],
defaultExpandedKeys2: [], defaultExpandedKeys2: [],
isTool: false, isTool: false,
showTrees: true,
} }
}, },
computed: {
tableSpan() {
return this.showTrees ? 14 : 24
},
},
watch: { watch: {
typeName(val) { typeName(val) {
this.$refs.tree.filter(val) this.$refs.tree.filter(val)
@ -280,7 +360,7 @@ export default {
this.treeOptions = [ this.treeOptions = [
{ {
label: '机具类型', label: '装备类型',
id: 0, id: 0,
children: filterTree(response.data), children: filterTree(response.data),
level: 0, level: 0,
@ -312,13 +392,24 @@ export default {
return data.label.indexOf(value) !== -1 return data.label.indexOf(value) !== -1
}, },
handleNodeClick(data) { handleNodeClick(data, source = 'left') {
this.isTool = data.isTool this.isTool = data.isTool
this.queryParams.typeId = data.id this.queryParams.typeId = data.id
this.queryParams.level = data.level this.queryParams.level = data.level
this.queryParams.typeName = data.label this.queryParams.typeName = data.label
// 取消另一棵树的高亮
if (source === 'left') {
this.$refs.tree_1?.setCurrentKey(null)
} else {
this.$refs.tree?.setCurrentKey(null)
}
this.getList() this.getList()
}, },
toggleTrees() {
this.showTrees = !this.showTrees
},
resetQuery() { resetQuery() {
this.dateRange = [] this.dateRange = []
@ -457,4 +548,21 @@ export default {
.table-container { .table-container {
overflow: auto; 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> </style>

4
src/views/lessor/equipment/equipType/indexOld.vue
View File

@ -80,9 +80,9 @@
:filter-node-method="filterNode" :filter-node-method="filterNode"
ref="tree2" ref="tree2"
node-key="id" node-key="id"
:default-expanded-keys="defaultExpandedKeys2"
highlight-current highlight-current
@node-click="handleNodeClick" @node-click="handleNodeClick"
:default-expanded-keys="defaultExpandedKeys2"
> >
<div <div
class="custom-tree-node" class="custom-tree-node"
@ -352,7 +352,7 @@ export default {
pageNum: this.queryParams.pageNum, pageNum: this.queryParams.pageNum,
pageSize: this.queryParams.pageSize, pageSize: this.queryParams.pageSize,
} }
getListTool(params).then((res) => { getListTool(this.queryParams).then((res) => {
this.typeList2 = res.rows this.typeList2 = res.rows
this.total = res.total this.total = res.total
this.loading = false this.loading = false