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", 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; } ruoyi-ui/src/components/TreePanel/index.vue
New file @@ -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> 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) { 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) { 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) { 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) { 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) { 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) { 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) { 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) { 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(() => { 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> </script>
