mirror of
https://gitee.com/y_project/RuoYi-Cloud.git
synced 2026-04-26 01:07:52 +08:00
709 lines
17 KiB
Vue
709 lines
17 KiB
Vue
<template>
|
||
<div class="tree-sidebar" :class="{ collapsed: collapsed, resizing: isResizing, 'no-initial-transition': isLoadingFromStorage}" :style="{ width: sidebarWidth + 'px' }">
|
||
<!-- 右侧拖动条 -->
|
||
<div v-if="!collapsed" class="resize-handle" @mousedown="startResize" @touchstart="startResize" :class="{ active: isResizing }" />
|
||
<div class="tree-header">
|
||
<span class="tree-title" v-show="!collapsed">
|
||
<i :class="titleIconClass"></i> {{ title }}
|
||
</span>
|
||
<div class="tree-actions" v-show="!collapsed">
|
||
<el-tooltip :content="isExpandedAll ? '收起全部' : '展开全部'" placement="right">
|
||
<i class="tree-action-icon" :class="isExpandedAll ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" @click="toggleExpandAll" />
|
||
</el-tooltip>
|
||
<el-tooltip content="刷新" placement="right">
|
||
<i class="tree-action-icon el-icon-refresh" @click="handleRefresh" />
|
||
</el-tooltip>
|
||
<slot name="actions"></slot>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 侧边栏展开/收起按钮 -->
|
||
<div class="collapse-button-container">
|
||
<el-tooltip :content="collapsed ? '展开' : '收起'" placement="right">
|
||
<i class="collapse-button" :class="collapsed ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'" @click="toggleCollapsed" />
|
||
</el-tooltip>
|
||
</div>
|
||
|
||
<div class="tree-search" v-show="!collapsed" v-if="showSearch">
|
||
<el-input v-model="searchKeyword" :placeholder="searchPlaceholder" clearable size="small" prefix-icon="el-icon-search" @input="onSearch" />
|
||
</div>
|
||
|
||
<div class="tree-wrap" v-show="!collapsed">
|
||
<el-tree
|
||
ref="treeRef"
|
||
:data="treeData"
|
||
:props="treeProps"
|
||
:expand-on-click-node="expandOnClickNode"
|
||
:filter-node-method="filterNodeMethod"
|
||
:default-expand-all="defaultExpandAll"
|
||
:default-expanded-keys="defaultExpandedKeys"
|
||
:node-key="nodeKey"
|
||
:check-strictly="checkStrictly"
|
||
:show-checkbox="showCheckbox"
|
||
@node-click="onNodeClick"
|
||
@check="onCheck"
|
||
@node-expand="onNodeExpand"
|
||
@node-collapse="onNodeCollapse"
|
||
>
|
||
<span class="tree-node" slot-scope="{ node, data }">
|
||
<slot name="node" :node="node" :data="data">
|
||
<i :class="data.children && data.children.length ? 'el-icon-folder' : 'el-icon-document'" class="node-icon" />
|
||
<span class="node-label" :title="node.label">{{ node.label }}</span>
|
||
</slot>
|
||
</span>
|
||
</el-tree>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "TreeSidebar",
|
||
props: {
|
||
// 树形数据
|
||
treeData: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
// 标题
|
||
title: {
|
||
type: String,
|
||
default: '树形结构'
|
||
},
|
||
// 标题图标类名
|
||
titleIconClass: {
|
||
type: String,
|
||
default: 'el-icon-office-building'
|
||
},
|
||
// 是否显示搜索框
|
||
showSearch: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 搜索框占位符
|
||
searchPlaceholder: {
|
||
type: String,
|
||
default: '请输入名称'
|
||
},
|
||
// 是否默认收起侧边栏
|
||
defaultCollapsed: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 树配置项
|
||
treeProps: {
|
||
type: Object,
|
||
default: () => ({
|
||
children: "children",
|
||
label: "label"
|
||
})
|
||
},
|
||
// 节点唯一标识字段
|
||
nodeKey: {
|
||
type: String,
|
||
default: 'id'
|
||
},
|
||
// 是否在点击节点时展开或收起
|
||
expandOnClickNode: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 是否显示复选框
|
||
showCheckbox: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 是否严格的遵循父子不互相关联
|
||
checkStrictly: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 是否默认展开所有节点
|
||
defaultExpandAll: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 默认展开的节点的key数组
|
||
defaultExpandedKeys: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
// 默认宽度
|
||
defaultWidth: {
|
||
type: Number,
|
||
default: 220
|
||
},
|
||
// 收起时的宽度
|
||
collapsedWidth: {
|
||
type: Number,
|
||
default: 20
|
||
},
|
||
// 最小宽度
|
||
minWidth: {
|
||
type: Number,
|
||
default: 180
|
||
},
|
||
// 最大宽度
|
||
maxWidth: {
|
||
type: Number,
|
||
default: 400
|
||
},
|
||
// 本地存储的宽度key
|
||
storageKey: {
|
||
type: String,
|
||
default: 'tree-sidebar-width'
|
||
},
|
||
// 是否启用本地存储宽度
|
||
enableStorage: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 自定义过滤方法
|
||
filterMethod: {
|
||
type: Function,
|
||
default: null
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
searchKeyword: "",
|
||
collapsed: this.defaultCollapsed,
|
||
sidebarWidth: this.defaultCollapsed ? this.collapsedWidth : this.defaultWidth,
|
||
isResizing: false,
|
||
startX: 0,
|
||
startWidth: 0,
|
||
saveWidthTimer: null,
|
||
rafId: null,
|
||
isLoadingFromStorage: false,
|
||
expandedAll: this.defaultExpandAll
|
||
};
|
||
},
|
||
computed: {
|
||
// 计算当前是否全部展开
|
||
isExpandedAll: {
|
||
get() {
|
||
return this.expandedAll;
|
||
},
|
||
set(val) {
|
||
this.expandedAll = val;
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
collapsed(newVal, oldVal) {
|
||
if (newVal !== oldVal) {
|
||
this.handleCollapseChange(newVal);
|
||
this.$emit("collapsed-change", newVal);
|
||
}
|
||
},
|
||
// 监听内部展开状态变化，触发实际树的展开/收起
|
||
expandedAll(newVal) {
|
||
this.$nextTick(() => {
|
||
if (newVal) {
|
||
this.expandAllNodes();
|
||
} else {
|
||
this.collapseAllNodes();
|
||
}
|
||
});
|
||
this.$emit("expanded-all-change", newVal);
|
||
},
|
||
// 监听搜索关键词
|
||
searchKeyword(val) {
|
||
if (this.$refs.treeRef) {
|
||
this.$refs.treeRef.filter(val);
|
||
this.$emit("search", val);
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.isLoadingFromStorage = true
|
||
if (!this.collapsed && this.enableStorage) {
|
||
const savedWidth = this.getSavedWidth();
|
||
if (savedWidth !== null) {
|
||
this.sidebarWidth = savedWidth;
|
||
}
|
||
}
|
||
this.$nextTick(() => {
|
||
this.isLoadingFromStorage = false
|
||
})
|
||
if (this.expandedAll) {
|
||
this.$nextTick(() => {
|
||
this.expandAllNodes();
|
||
});
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
this.cleanup();
|
||
},
|
||
methods: {
|
||
// 节点过滤方法
|
||
filterNodeMethod(value, data) {
|
||
if (this.filterMethod) {
|
||
return this.filterMethod(value, data);
|
||
}
|
||
if (!value) return true;
|
||
return data.label && data.label.indexOf(value) !== -1;
|
||
},
|
||
// 清理定时器和动画帧
|
||
cleanup() {
|
||
if (this.rafId) {
|
||
cancelAnimationFrame(this.rafId);
|
||
this.rafId = null;
|
||
}
|
||
if (this.saveWidthTimer) {
|
||
clearTimeout(this.saveWidthTimer);
|
||
this.saveWidthTimer = null;
|
||
}
|
||
},
|
||
// 处理收起/展开状态变化
|
||
handleCollapseChange(isCollapsed) {
|
||
if (isCollapsed) {
|
||
this.saveWidthToStorage();
|
||
this.sidebarWidth = this.collapsedWidth;
|
||
} else {
|
||
const savedWidth = this.getSavedWidth();
|
||
this.sidebarWidth = savedWidth !== null ? savedWidth : this.defaultWidth;
|
||
}
|
||
},
|
||
// 获取保存的宽度
|
||
getSavedWidth() {
|
||
if (!this.enableStorage) {
|
||
return null;
|
||
}
|
||
try {
|
||
const savedWidth = localStorage.getItem(this.storageKey);
|
||
if (savedWidth) {
|
||
const width = parseInt(savedWidth, 10);
|
||
if (!isNaN(width) && width >= this.minWidth && width <= this.maxWidth) {
|
||
return width;
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.warn(`Failed to load sidebar width from storage with key ${this.storageKey}:`, error);
|
||
}
|
||
return null;
|
||
},
|
||
// 保存宽度到本地存储
|
||
saveWidthToStorage() {
|
||
if (this.collapsed || !this.enableStorage) return;
|
||
try {
|
||
localStorage.setItem(this.storageKey, this.sidebarWidth.toString());
|
||
} catch (error) {
|
||
console.warn(`Failed to save sidebar width to storage with key ${this.storageKey}:`, error);
|
||
}
|
||
},
|
||
// 切换侧边栏收起/展开状态
|
||
toggleCollapsed() {
|
||
this.collapsed = !this.collapsed;
|
||
},
|
||
// 切换展开/折叠所有节点
|
||
toggleExpandAll() {
|
||
this.isExpandedAll = !this.isExpandedAll;
|
||
},
|
||
// 展开所有节点
|
||
expandAllNodes() {
|
||
if (!this.$refs.treeRef) return;
|
||
const allNodes = this.getAllNodes(this.$refs.treeRef.root);
|
||
allNodes.forEach(node => {
|
||
if (node.expanded !== undefined && !node.expanded) {
|
||
node.expanded = true;
|
||
}
|
||
});
|
||
},
|
||
// 获取所有节点
|
||
getAllNodes(rootNode) {
|
||
const nodes = [];
|
||
const traverse = (node) => {
|
||
if (!node) return;
|
||
nodes.push(node);
|
||
if (node.childNodes && node.childNodes.length) {
|
||
node.childNodes.forEach(child => traverse(child));
|
||
}
|
||
};
|
||
traverse(rootNode);
|
||
return nodes;
|
||
},
|
||
// 收起所有节点
|
||
collapseAllNodes() {
|
||
if (!this.$refs.treeRef) return;
|
||
const allNodes = this.getAllNodes(this.$refs.treeRef.root);
|
||
allNodes.forEach(node => {
|
||
if (node.expanded !== undefined && node.expanded) {
|
||
node.expanded = false;
|
||
}
|
||
});
|
||
},
|
||
// 处理刷新操作
|
||
handleRefresh() {
|
||
this.$emit("refresh");
|
||
},
|
||
// 节点点击事件
|
||
onNodeClick(data, node, e) {
|
||
this.$emit("node-click", data, node, e);
|
||
},
|
||
// 复选框选中事件
|
||
onCheck(data, checkedInfo) {
|
||
this.$emit("check", data, checkedInfo);
|
||
},
|
||
// 节点展开事件
|
||
onNodeExpand(data, node, e) {
|
||
this.$emit("node-expand", data, node, e);
|
||
},
|
||
// 节点折叠事件
|
||
onNodeCollapse(data, node, e) {
|
||
this.$emit("node-collapse", data, node, e);
|
||
},
|
||
// 搜索处理
|
||
onSearch() {
|
||
// 搜索逻辑已在 watch 中处理
|
||
},
|
||
// 设置当前选中的节点
|
||
setCurrentKey(key) {
|
||
if (this.$refs.treeRef) {
|
||
this.$refs.treeRef.setCurrentKey(key);
|
||
}
|
||
},
|
||
// 获取当前选中的节点
|
||
getCurrentNode() {
|
||
if (this.$refs.treeRef) {
|
||
return this.$refs.treeRef.getCurrentNode();
|
||
}
|
||
return null;
|
||
},
|
||
// 获取当前选中的节点的key
|
||
getCurrentKey() {
|
||
if (this.$refs.treeRef) {
|
||
return this.$refs.treeRef.getCurrentKey();
|
||
}
|
||
return null;
|
||
},
|
||
// 设置选中的节点keys（复选框）
|
||
setCheckedKeys(keys) {
|
||
if (this.$refs.treeRef && this.showCheckbox) {
|
||
this.$refs.treeRef.setCheckedKeys(keys);
|
||
}
|
||
},
|
||
// 获取选中的节点keys（复选框）
|
||
getCheckedKeys() {
|
||
if (this.$refs.treeRef && this.showCheckbox) {
|
||
return this.$refs.treeRef.getCheckedKeys();
|
||
}
|
||
return [];
|
||
},
|
||
// 获取选中的节点（复选框）
|
||
getCheckedNodes() {
|
||
if (this.$refs.treeRef && this.showCheckbox) {
|
||
return this.$refs.treeRef.getCheckedNodes();
|
||
}
|
||
return [];
|
||
},
|
||
// 清空搜索
|
||
clearSearch() {
|
||
this.searchKeyword = "";
|
||
if (this.$refs.treeRef) {
|
||
this.$refs.treeRef.filter("");
|
||
}
|
||
},
|
||
// 过滤树
|
||
filter(value) {
|
||
this.searchKeyword = value;
|
||
},
|
||
// 开始调整大小
|
||
startResize(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
this.isResizing = true;
|
||
this.startX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
|
||
this.startWidth = this.sidebarWidth;
|
||
|
||
if (e.type === 'mousedown') {
|
||
document.addEventListener('mousemove', this.handleResizeMove);
|
||
document.addEventListener('mouseup', this.stopResize);
|
||
} else {
|
||
document.addEventListener('touchmove', this.handleResizeMove, { passive: false });
|
||
document.addEventListener('touchend', this.stopResize);
|
||
}
|
||
this.disableUserSelect();
|
||
},
|
||
// 处理调整大小移动
|
||
handleResizeMove(e) {
|
||
if (!this.isResizing) return;
|
||
if (this.rafId) {
|
||
cancelAnimationFrame(this.rafId);
|
||
}
|
||
this.rafId = requestAnimationFrame(() => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
const clientX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
|
||
const deltaX = clientX - this.startX;
|
||
const newWidth = this.startWidth + deltaX;
|
||
const clampedWidth = Math.max(this.minWidth, Math.min(this.maxWidth, newWidth));
|
||
if (Math.abs(clampedWidth - this.sidebarWidth) >= 1) {
|
||
this.sidebarWidth = clampedWidth;
|
||
}
|
||
});
|
||
},
|
||
// 停止调整大小
|
||
stopResize() {
|
||
if (!this.isResizing) return;
|
||
this.isResizing = false;
|
||
if (this.rafId) {
|
||
cancelAnimationFrame(this.rafId);
|
||
this.rafId = null;
|
||
}
|
||
this.startX = 0;
|
||
this.startWidth = 0;
|
||
document.removeEventListener('mousemove', this.handleResizeMove);
|
||
document.removeEventListener('mouseup', this.stopResize);
|
||
document.removeEventListener('touchmove', this.handleResizeMove);
|
||
document.removeEventListener('touchend', this.stopResize);
|
||
this.enableUserSelect();
|
||
this.saveWidthToStorage();
|
||
},
|
||
// 禁用用户选择
|
||
disableUserSelect() {
|
||
document.body.style.userSelect = 'none';
|
||
document.body.style.webkitUserSelect = 'none';
|
||
document.body.style.mozUserSelect = 'none';
|
||
document.body.style.msUserSelect = 'none';
|
||
},
|
||
// 启用用户选择
|
||
enableUserSelect() {
|
||
document.body.style.userSelect = '';
|
||
document.body.style.webkitUserSelect = '';
|
||
document.body.style.mozUserSelect = '';
|
||
document.body.style.msUserSelect = '';
|
||
},
|
||
// 重置宽度到默认值
|
||
resetWidth() {
|
||
this.sidebarWidth = this.defaultWidth;
|
||
this.saveWidthToStorage();
|
||
},
|
||
// 获取当前宽度
|
||
getCurrentWidth() {
|
||
return this.sidebarWidth;
|
||
},
|
||
// 设置宽度
|
||
setWidth(width) {
|
||
if (typeof width === 'number' && width >= this.minWidth && width <= this.maxWidth) {
|
||
this.sidebarWidth = width;
|
||
if (!this.collapsed) {
|
||
this.saveWidthToStorage();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tree-sidebar {
|
||
flex-shrink: 0;
|
||
width: 220px;
|
||
background: #fff;
|
||
border-right: 1px solid #e8eaed;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
position: relative;
|
||
transition: width 0.25s ease;
|
||
|
||
&.collapsed {
|
||
width: 42px;
|
||
}
|
||
|
||
&.resizing {
|
||
transition: none;
|
||
will-change: width;
|
||
|
||
* {
|
||
pointer-events: none !important;
|
||
}
|
||
}
|
||
|
||
&.no-initial-transition {
|
||
transition: none;
|
||
}
|
||
}
|
||
|
||
.resize-handle {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 6px;
|
||
height: 100%;
|
||
cursor: col-resize;
|
||
z-index: 20;
|
||
background: transparent;
|
||
transition: background 0.2s;
|
||
|
||
&:hover {
|
||
background: rgba(64, 158, 255, 0.3);
|
||
}
|
||
|
||
&.active {
|
||
background: rgba(64, 158, 255, 0.5);
|
||
}
|
||
}
|
||
|
||
.collapse-button-container {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0;
|
||
transform: translateY(-50%);
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 15px;
|
||
height: 20px;
|
||
background: #fff;
|
||
border-radius: 0 4px 4px 0;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
transition: all 0.2s ease;
|
||
|
||
.tree-sidebar.collapsed & {
|
||
right: 0;
|
||
background: #f7f8fa;
|
||
border-radius: 0 4px 4px 0;
|
||
}
|
||
|
||
.tree-sidebar.resizing & {
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
|
||
.collapse-button {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
cursor: pointer;
|
||
padding: 4px;
|
||
border-radius: 4px;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
color: #409eff;
|
||
background: #ecf5ff;
|
||
}
|
||
}
|
||
|
||
.tree-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 10px;
|
||
height: 40px;
|
||
border-bottom: 1px solid #e8eaed;
|
||
background: #f7f8fa;
|
||
flex-shrink: 0;
|
||
|
||
.tree-title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
|
||
i {
|
||
color: #409eff;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.tree-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
.tree-action-icon {
|
||
font-size: 14px;
|
||
color: #909399;
|
||
cursor: pointer;
|
||
padding: 4px;
|
||
border-radius: 4px;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
color: #409eff;
|
||
background: #ecf5ff;
|
||
}
|
||
}
|
||
|
||
.tree-search {
|
||
padding: 10px 10px 4px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tree-wrap {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 6px 6px 12px;
|
||
|
||
.tree-sidebar.resizing & {
|
||
overflow: hidden;
|
||
}
|
||
|
||
&::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
|
||
&::-webkit-scrollbar-thumb {
|
||
background: #dcdfe6;
|
||
border-radius: 4px;
|
||
|
||
&:hover {
|
||
background: #c0c4cc;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-tree-node__content {
|
||
height: 32px;
|
||
border-radius: 4px;
|
||
margin-bottom: 1px;
|
||
|
||
&:hover {
|
||
background: #f0f7ff;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-tree-node.is-current > .el-tree-node__content {
|
||
background: #e6f0fd;
|
||
color: #409eff;
|
||
font-weight: 600;
|
||
|
||
.node-icon {
|
||
color: #409eff !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tree-node {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-size: 13px;
|
||
overflow: hidden;
|
||
|
||
.node-icon {
|
||
font-size: 14px;
|
||
color: #f5a623;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.node-label {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-icon-document.node-icon {
|
||
color: #909399 !important;
|
||
}
|
||
</style> |