This commit is contained in:
BianLzhaoMin
parent
2ef48ebff2
commit
d6d0b7aa05
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue