新增树分割组件TreePanel

RuoYi

2026-04-02 19cb8327f006f12403ea8591a22debd0ea26d43f

新增树分割组件TreePanel

 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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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,21 +1,8 @@
<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>

          </el-col>

        </pane>

        <!--用户数据-->

        <pane size="84">

          <el-col>

  <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" />

@@ -87,12 +74,9 @@
                </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>

        </pane>

      </splitpanes>

    </el-row>

      </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()

@@ -338,8 +309,7 @@
          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()

    },

    // 多选框选中数据

@@ -482,12 +447,12 @@
        }).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) {