新增树分割组件TreePanel

RuoYi

2026-04-02 19cb8327f006f12403ea8591a22debd0ea26d43f

 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) {