[update 资料中心] 左侧折叠
This commit is contained in:
@@ -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
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* 获取树数据
|
* 获取树数据
|
||||||
*/
|
*/
|
||||||
|
|||||||
Reference in New Issue
Block a user