[update 资料中心] 左侧折叠

This commit is contained in:
danshihao
2024-10-10 16:35:57 +08:00
parent ada1285fd3
commit 7398f3c604
2 changed files with 46 additions and 6 deletions
+30
View File
@@ -1028,4 +1028,34 @@
:global(.tooltip-style .ant-tooltip-inner) { :global(.tooltip-style .ant-tooltip-inner) {
max-height: 40vh; max-height: 40vh;
overflow: auto; overflow: auto;
}
// 列表左侧树结构可折叠样式
.page-left-box {
position: relative;
}
.page-left-box-hide {
width: 0 !important;
min-width: 0 !important;
padding: 0 !important;
border: none !important;
}
.control-left-tree-expand {
width: 12px;
height: 24px;
border-radius: 0 12px 12px 0;
background-color: @primary-color;
color: white;
position: absolute;
z-index: 3;
left: 100%;
top: calc(50% - 52px);
.anticon {
position: absolute;
top: 50%;
left: -2px;
transform: translateY(-50%);
cursor: pointer;
}
} }
@@ -1,11 +1,12 @@
<template> <template>
<a-card :bordered="false" class="page-left-right-layout"> <a-card :bordered="false" class="page-left-right-layout">
<!-- 树部分--> <!-- 树部分-->
<div class="page-left-box"> <div class="page-left-box" :class="{'page-left-box-hide': isLeftExpand}">
<a-input-search v-model="treeInput" class="tree-search" <template v-if="!isLeftExpand">
:placeholder="$t('standardRegulationLibrary.foreignStandard.treeSearchPlaceholder')" <a-input-search v-model="treeInput" class="tree-search"
@search="handleTreeSearch" /> :placeholder="$t('standardRegulationLibrary.foreignStandard.treeSearchPlaceholder')"
<div class="page-tree-box page-tree-box-has-search"> @search="handleTreeSearch" />
<div class="page-tree-box page-tree-box-has-search">
<a-spin :spinning="treeLoading"> <a-spin :spinning="treeLoading">
<a-tree :show-line="true" :show-icon="true" :tree-data="treeData" :selected-keys="selectedTreeKeys"> <a-tree :show-line="true" :show-icon="true" :tree-data="treeData" :selected-keys="selectedTreeKeys">
<template #title="record"> <template #title="record">
@@ -60,6 +61,10 @@
</a-tree> </a-tree>
</a-spin> </a-spin>
</div> </div>
</template>
<div class="control-left-tree-expand" @click="expandLeft">
<a-icon :type="isLeftExpand ? 'right' : 'left'" />
</div>
</div> </div>
<!-- 表格部分--> <!-- 表格部分-->
<div class="page-right-box"> <div class="page-right-box">
@@ -229,7 +234,8 @@ export default {
deleteBatch: '/laws/dataCenter/lawsDataCenterFile/deleteBatch' deleteBatch: '/laws/dataCenter/lawsDataCenterFile/deleteBatch'
}, },
selectedTreeKeys: [], // 选中的树节点key selectedTreeKeys: [], // 选中的树节点key
treeLoading: false treeLoading: false,
isLeftExpand: false // 是否左侧收齐
} }
}, },
computed: { computed: {
@@ -239,6 +245,10 @@ export default {
this.initTreeData() this.initTreeData()
}, },
methods: { methods: {
// 左侧树收起展开
expandLeft () {
this.isLeftExpand = !this.isLeftExpand
},
/** /**
* 获取树数据 * 获取树数据
*/ */