From 19cb8327f006f12403ea8591a22debd0ea26d43f Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Thu, 02 Apr 2026 11:36:59 +0800
Subject: [PATCH] 新增树分割组件TreePanel
---
ruoyi-ui/src/views/system/dict/data.vue | 4
ruoyi-ui/src/views/system/notice/index.vue | 4
ruoyi-ui/src/views/system/role/index.vue | 8
ruoyi-ui/src/components/TreePanel/index.vue | 709 +++++++++++++++++++++++++++++++++++++++++
ruoyi-ui/src/views/system/menu/index.vue | 2
ruoyi-ui/src/views/system/user/index.vue | 215 +++++-------
ruoyi-ui/src/views/system/dept/index.vue | 2
ruoyi-ui/src/assets/styles/ruoyi.scss | 27 +
ruoyi-ui/src/views/monitor/job/index.vue | 2
ruoyi-ui/src/views/system/config/index.vue | 4
ruoyi-ui/src/views/system/dict/index.vue | 4
ruoyi-ui/package.json | 1
ruoyi-ui/src/views/system/post/index.vue | 4
13 files changed, 838 insertions(+), 148 deletions(-)
diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index 6d6aff5..4f77767 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -40,7 +40,6 @@
"quill": "2.0.2",
"screenfull": "5.0.2",
"sortablejs": "1.10.2",
- "splitpanes": "2.4.1",
"vue": "2.6.12",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
diff --git a/ruoyi-ui/src/assets/styles/ruoyi.scss b/ruoyi-ui/src/assets/styles/ruoyi.scss
index b822c55..73e7c2a 100644
--- a/ruoyi-ui/src/assets/styles/ruoyi.scss
+++ b/ruoyi-ui/src/assets/styles/ruoyi.scss
@@ -324,6 +324,28 @@
display: block;
}
+/* tree-sidebar content */
+.tree-sidebar-manage-wrap {
+ display: flex;
+ gap: 0;
+ min-height: calc(100vh - 130px);
+ padding: 0 !important;
+ overflow: hidden;
+}
+
+.tree-sidebar-content {
+ flex: 1;
+ min-width: 0;
+ overflow: hidden;
+ background: #fff;
+
+ .content-inner {
+ padding: 12px 16px;
+ height: 100%;
+ overflow-y: auto;
+ }
+}
+
/* error */
.error-title { color: #c0392b !important; }
.error-title i { color: #c0392b !important; }
@@ -407,9 +429,4 @@
.top-right-btn {
position: relative;
float: right;
-}
-
-/* 分割面板样式 */
-.splitpanes.default-theme .splitpanes__pane {
- background-color: #fff!important;
}
diff --git a/ruoyi-ui/src/components/TreePanel/index.vue b/ruoyi-ui/src/components/TreePanel/index.vue
new file mode 100644
index 0000000..9feb10b
--- /dev/null
+++ b/ruoyi-ui/src/components/TreePanel/index.vue
@@ -0,0 +1,709 @@
+<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>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/monitor/job/index.vue b/ruoyi-ui/src/views/monitor/job/index.vue
index 1630532..15b253f 100644
--- a/ruoyi-ui/src/views/monitor/job/index.vue
+++ b/ruoyi-ui/src/views/monitor/job/index.vue
@@ -431,7 +431,7 @@
})
},
/** 提交按钮 */
- submitForm: function() {
+ submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.jobId != undefined) {
diff --git a/ruoyi-ui/src/views/system/config/index.vue b/ruoyi-ui/src/views/system/config/index.vue
index 3b1bc4d..73fa939 100644
--- a/ruoyi-ui/src/views/system/config/index.vue
+++ b/ruoyi-ui/src/views/system/config/index.vue
@@ -283,7 +283,7 @@
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.configId)
- this.single = selection.length!=1
+ this.single = selection.length != 1
this.multiple = !selection.length
},
/** 修改按钮操作 */
@@ -297,7 +297,7 @@
})
},
/** 提交按钮 */
- submitForm: function() {
+ submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.configId != undefined) {
diff --git a/ruoyi-ui/src/views/system/dept/index.vue b/ruoyi-ui/src/views/system/dept/index.vue
index a8d63f3..88aab20 100644
--- a/ruoyi-ui/src/views/system/dept/index.vue
+++ b/ruoyi-ui/src/views/system/dept/index.vue
@@ -325,7 +325,7 @@
})
},
/** 提交按钮 */
- submitForm: function() {
+ submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.deptId != undefined) {
diff --git a/ruoyi-ui/src/views/system/dict/data.vue b/ruoyi-ui/src/views/system/dict/data.vue
index c08469d..42d8438 100644
--- a/ruoyi-ui/src/views/system/dict/data.vue
+++ b/ruoyi-ui/src/views/system/dict/data.vue
@@ -345,7 +345,7 @@
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.dictCode)
- this.single = selection.length!=1
+ this.single = selection.length != 1
this.multiple = !selection.length
},
/** 修改按钮操作 */
@@ -359,7 +359,7 @@
})
},
/** 提交按钮 */
- submitForm: function() {
+ submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.dictCode != undefined) {
diff --git a/ruoyi-ui/src/views/system/dict/index.vue b/ruoyi-ui/src/views/system/dict/index.vue
index 124050d..c63ceb0 100644
--- a/ruoyi-ui/src/views/system/dict/index.vue
+++ b/ruoyi-ui/src/views/system/dict/index.vue
@@ -305,7 +305,7 @@
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.dictId)
- this.single = selection.length!=1
+ this.single = selection.length != 1
this.multiple = !selection.length
},
/** 字典数据抽屉显示信息 */
@@ -328,7 +328,7 @@
})
},
/** 提交按钮 */
- submitForm: function() {
+ submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.dictId != undefined) {
diff --git a/ruoyi-ui/src/views/system/menu/index.vue b/ruoyi-ui/src/views/system/menu/index.vue
index 4a0e473..1ac0451 100644
--- a/ruoyi-ui/src/views/system/menu/index.vue
+++ b/ruoyi-ui/src/views/system/menu/index.vue
@@ -466,7 +466,7 @@
})
},
/** 提交按钮 */
- submitForm: function() {
+ submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.menuId != undefined) {
diff --git a/ruoyi-ui/src/views/system/notice/index.vue b/ruoyi-ui/src/views/system/notice/index.vue
index 3eb25a3..8d5f321 100644
--- a/ruoyi-ui/src/views/system/notice/index.vue
+++ b/ruoyi-ui/src/views/system/notice/index.vue
@@ -258,7 +258,7 @@
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.noticeId)
- this.single = selection.length!=1
+ this.single = selection.length != 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
@@ -278,7 +278,7 @@
})
},
/** 提交按钮 */
- submitForm: function() {
+ submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.noticeId != undefined) {
diff --git a/ruoyi-ui/src/views/system/post/index.vue b/ruoyi-ui/src/views/system/post/index.vue
index abb9ae9..a9fa686 100644
--- a/ruoyi-ui/src/views/system/post/index.vue
+++ b/ruoyi-ui/src/views/system/post/index.vue
@@ -249,7 +249,7 @@
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.postId)
- this.single = selection.length!=1
+ this.single = selection.length != 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
@@ -269,7 +269,7 @@
})
},
/** 提交按钮 */
- submitForm: function() {
+ submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.postId != undefined) {
diff --git a/ruoyi-ui/src/views/system/role/index.vue b/ruoyi-ui/src/views/system/role/index.vue
index 38b8cb9..1b50e66 100644
--- a/ruoyi-ui/src/views/system/role/index.vue
+++ b/ruoyi-ui/src/views/system/role/index.vue
@@ -451,7 +451,7 @@
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.roleId)
- this.single = selection.length!=1
+ this.single = selection.length != 1
this.multiple = !selection.length
},
// 更多操作触发
@@ -547,12 +547,12 @@
this.title = "分配数据权限"
},
/** 分配用户操作 */
- handleAuthUser: function(row) {
+ handleAuthUser(row) {
const roleId = row.roleId
this.$router.push("/system/role-auth/user/" + roleId)
},
/** 提交按钮 */
- submitForm: function() {
+ submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.roleId != undefined) {
@@ -574,7 +574,7 @@
})
},
/** 提交按钮（数据权限） */
- submitDataScope: function() {
+ submitDataScope() {
if (this.form.roleId != undefined) {
this.form.deptIds = this.getDeptAllCheckedKeys()
dataScope(this.form).then(() => {
diff --git a/ruoyi-ui/src/views/system/user/index.vue b/ruoyi-ui/src/views/system/user/index.vue
index 684831f..2dd3120 100644
--- a/ruoyi-ui/src/views/system/user/index.vue
+++ b/ruoyi-ui/src/views/system/user/index.vue
@@ -1,98 +1,82 @@
<template>
- <div class="app-container">
- <el-row :gutter="20">
- <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
- <!--部门数据-->
- <pane size="16">
- <el-col>
- <div class="head-container">
- <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
- </div>
- <div class="head-container">
- <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
- </div>
+ <div class="app-container tree-sidebar-manage-wrap">
+ <tree-panel title="组织机构" :tree-data="deptOptions" search-placeholder="请输入部门名称" storage-key="dept-sidebar-width" :defaultExpandAll="true" @node-click="handleNodeClick" @refresh="getDeptTree" ref="deptTreeRef" />
+ <div class="tree-sidebar-content">
+ <div class="content-inner">
+ <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+ <el-form-item label="用户名称" prop="userName">
+ <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+ </el-form-item>
+ <el-form-item label="手机号码" prop="phonenumber">
+ <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
+ </el-form-item>
+ <el-form-item label="状态" prop="status">
+ <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
+ <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
+ </el-select>
+ </el-form-item>
+ <el-form-item label="创建时间">
+ <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+ </el-form-item>
+ </el-form>
+
+ <el-row :gutter="10" class="mb8">
+ <el-col :span="1.5">
+ <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
</el-col>
- </pane>
- <!--用户数据-->
- <pane size="84">
- <el-col>
- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
- <el-form-item label="用户名称" prop="userName">
- <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
- </el-form-item>
- <el-form-item label="手机号码" prop="phonenumber">
- <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 240px" @keyup.enter.native="handleQuery" />
- </el-form-item>
- <el-form-item label="状态" prop="status">
- <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
- <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
- </el-select>
- </el-form-item>
- <el-form-item label="创建时间">
- <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-form>
-
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:user:add']">新增</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
- </el-col>
- <el-col :span="1.5">
- <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
- </el-col>
- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
- </el-row>
-
- <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="50" align="center" />
- <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns.userId.visible" />
- <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns.userName.visible" :show-overflow-tooltip="true" />
- <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns.nickName.visible" :show-overflow-tooltip="true" />
- <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns.deptName.visible" :show-overflow-tooltip="true" />
- <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns.phonenumber.visible" width="120" />
- <el-table-column label="状态" align="center" key="status" v-if="columns.status.visible">
- <template slot-scope="scope">
- <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
- </template>
- </el-table-column>
- <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns.createTime.visible" width="160">
- <template slot-scope="scope">
- <span>{{ parseTime(scope.row.createTime) }}</span>
- </template>
- </el-table-column>
- <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
- <template slot-scope="scope" v-if="scope.row.userId !== 1">
- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">修改</el-button>
- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button>
- <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
- <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item command="handleResetPwd" icon="el-icon-key" v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
- <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check" v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- </template>
- </el-table-column>
- </el-table>
-
- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+ <el-col :span="1.5">
+ <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['system:user:edit']">修改</el-button>
</el-col>
- </pane>
- </splitpanes>
- </el-row>
+ <el-col :span="1.5">
+ <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:user:remove']">删除</el-button>
+ </el-col>
+ <el-col :span="1.5">
+ <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['system:user:import']">导入</el-button>
+ </el-col>
+ <el-col :span="1.5">
+ <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:user:export']">导出</el-button>
+ </el-col>
+ <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
+ </el-row>
+
+ <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
+ <el-table-column type="selection" width="50" align="center" />
+ <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns.userId.visible" />
+ <el-table-column label="用户名称" align="center" key="userName" prop="userName" v-if="columns.userName.visible" :show-overflow-tooltip="true" />
+ <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns.nickName.visible" :show-overflow-tooltip="true" />
+ <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns.deptName.visible" :show-overflow-tooltip="true" />
+ <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns.phonenumber.visible" width="120" />
+ <el-table-column label="状态" align="center" key="status" v-if="columns.status.visible">
+ <template slot-scope="scope">
+ <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
+ </template>
+ </el-table-column>
+ <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns.createTime.visible" width="160">
+ <template slot-scope="scope">
+ <span>{{ parseTime(scope.row.createTime) }}</span>
+ </template>
+ </el-table-column>
+ <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+ <template slot-scope="scope" v-if="scope.row.userId !== 1">
+ <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']">修改</el-button>
+ <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']">删除</el-button>
+ <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
+ <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item command="handleResetPwd" icon="el-icon-key" v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
+ <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check" v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+ </template>
+ </el-table-column>
+ </el-table>
+ <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+ </div>
+ </div>
<!-- 添加或修改用户配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
@@ -205,13 +189,12 @@
import { getToken } from "@/utils/auth"
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
-import { Splitpanes, Pane } from "splitpanes"
-import "splitpanes/dist/splitpanes.css"
+import TreePanel from "@/components/TreePanel"
export default {
name: "User",
dicts: ['sys_normal_disable', 'sys_user_sex'],
- components: { Treeselect, Splitpanes, Pane },
+ components: { Treeselect, TreePanel },
data() {
return {
// 遮罩层
@@ -236,8 +219,6 @@
enabledDeptOptions: undefined,
// 是否显示弹出层
open: false,
- // 部门名称
- deptName: undefined,
// 默认密码
initPassword: undefined,
// 日期范围
@@ -248,10 +229,6 @@
roleOptions: [],
// 表单参数
form: {},
- defaultProps: {
- children: "children",
- label: "label"
- },
// 用户导入参数
upload: {
// 是否显示弹出层（用户导入）
@@ -317,12 +294,6 @@
}
}
},
- watch: {
- // 根据名称筛选部门树
- deptName(val) {
- this.$refs.tree.filter(val)
- }
- },
created() {
this.getList()
this.getDeptTree()
@@ -335,11 +306,10 @@
getList() {
this.loading = true
listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
- this.userList = response.rows
- this.total = response.total
- this.loading = false
- }
- )
+ this.userList = response.rows
+ this.total = response.total
+ this.loading = false
+ })
},
/** 查询部门下拉树结构 */
getDeptTree() {
@@ -359,11 +329,6 @@
}
return true
})
- },
- // 筛选节点
- filterNode(value, data) {
- if (!value) return true
- return data.label.indexOf(value) !== -1
},
// 节点单击事件
handleNodeClick(data) {
@@ -414,7 +379,7 @@
this.dateRange = []
this.resetForm("queryForm")
this.queryParams.deptId = undefined
- this.$refs.tree.setCurrentKey(null)
+ this.$refs.deptTreeRef.setCurrentKey(null)
this.handleQuery()
},
// 多选框选中数据
@@ -476,18 +441,18 @@
}
},
}).then(({ value }) => {
- resetUserPwd(row.userId, value).then(() => {
- this.$modal.msgSuccess("修改成功，新密码是：" + value)
- })
- }).catch(() => {})
+ resetUserPwd(row.userId, value).then(() => {
+ this.$modal.msgSuccess("修改成功，新密码是：" + value)
+ })
+ }).catch(() => {})
},
/** 分配角色操作 */
- handleAuthRole: function(row) {
+ handleAuthRole(row) {
const userId = row.userId
this.$router.push("/system/user-auth/role/" + userId)
},
/** 提交按钮 */
- submitForm: function() {
+ submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.userId != undefined) {
@@ -555,4 +520,4 @@
}
}
}
-</script>
\ No newline at end of file
+</script>
--
Gitblit v1.9.3