新增树分割组件TreePanel

RuoYi

2026-04-02 19cb8327f006f12403ea8591a22debd0ea26d43f

 ruoyi-ui/src/views/system/role/index.vue

@@ -135,9 +135,7 @@
            v-hasPermi="['system:role:remove']"

          >删除</el-button>

          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">

            <span class="el-dropdown-link">

              <i class="el-icon-d-arrow-right el-icon--right"></i>更多

            </span>

            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>

            <el-dropdown-menu slot="dropdown">

              <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"

                v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>

@@ -254,9 +252,8 @@
</template>



<script>

import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus } from "@/api/system/role";

import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";

import { treeselect as deptTreeselect, roleDeptTreeselect } from "@/api/system/dept";

import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role"

import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu"



export default {

  name: "Role",

@@ -342,91 +339,85 @@
          { required: true, message: "角色顺序不能为空", trigger: "blur" }

        ]

      }

    };

    }

  },

  created() {

    this.getList();

    this.getList()

  },

  methods: {

    /** 查询角色列表 */

    getList() {

      this.loading = true;

      this.loading = true

      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {

          this.roleList = response.rows;

          this.total = response.total;

          this.loading = false;

          this.roleList = response.rows

          this.total = response.total

          this.loading = false

        }

      );

      )

    },

    /** 查询菜单树结构 */

    getMenuTreeselect() {

      menuTreeselect().then(response => {

        this.menuOptions = response.data;

      });

    },

    /** 查询部门树结构 */

    getDeptTreeselect() {

      deptTreeselect().then(response => {

        this.deptOptions = response.data;

      });

        this.menuOptions = response.data

      })

    },

    // 所有菜单节点数据

    getMenuAllCheckedKeys() {

      // 目前被选中的菜单节点

      let checkedKeys = this.$refs.menu.getCheckedKeys();

      let checkedKeys = this.$refs.menu.getCheckedKeys()

      // 半选中的菜单节点

      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();

      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);

      return checkedKeys;

      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys()

      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)

      return checkedKeys

    },

    // 所有部门节点数据

    getDeptAllCheckedKeys() {

      // 目前被选中的部门节点

      let checkedKeys = this.$refs.dept.getCheckedKeys();

      let checkedKeys = this.$refs.dept.getCheckedKeys()

      // 半选中的部门节点

      let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();

      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);

      return checkedKeys;

      let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys()

      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)

      return checkedKeys

    },

    /** 根据角色ID查询菜单树结构 */

    getRoleMenuTreeselect(roleId) {

      return roleMenuTreeselect(roleId).then(response => {

        this.menuOptions = response.menus;

        return response;

      });

        this.menuOptions = response.menus

        return response

      })

    },

    /** 根据角色ID查询部门树结构 */

    getRoleDeptTreeselect(roleId) {

      return roleDeptTreeselect(roleId).then(response => {

        this.deptOptions = response.depts;

        return response;

      });

    getDeptTree(roleId) {

      return deptTreeSelect(roleId).then(response => {

        this.deptOptions = response.depts

        return response

      })

    },

    // 角色状态修改

    handleStatusChange(row) {

      let text = row.status === "0" ? "启用" : "停用";

      let text = row.status === "0" ? "启用" : "停用"

      this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function() {

        return changeRoleStatus(row.roleId, row.status);

        return changeRoleStatus(row.roleId, row.status)

      }).then(() => {

        this.$modal.msgSuccess(text + "成功");

        this.$modal.msgSuccess(text + "成功")

      }).catch(function() {

        row.status = row.status === "0" ? "1" : "0";

      });

        row.status = row.status === "0" ? "1" : "0"

      })

    },

    // 取消按钮

    cancel() {

      this.open = false;

      this.reset();

      this.open = false

      this.reset()

    },

    // 取消按钮（数据权限）

    cancelDataScope() {

      this.openDataScope = false;

      this.reset();

      this.openDataScope = false

      this.reset()

    },

    // 表单重置

    reset() {

      if (this.$refs.menu != undefined) {

        this.$refs.menu.setCheckedKeys([]);

        this.$refs.menu.setCheckedKeys([])

      }

      this.menuExpand = false,

      this.menuNodeAll = false,

@@ -443,165 +434,165 @@
        menuCheckStrictly: true,

        deptCheckStrictly: true,

        remark: undefined

      };

      this.resetForm("form");

      }

      this.resetForm("form")

    },

    /** 搜索按钮操作 */

    handleQuery() {

      this.queryParams.pageNum = 1;

      this.getList();

      this.queryParams.pageNum = 1

      this.getList()

    },

    /** 重置按钮操作 */

    resetQuery() {

      this.dateRange = [];

      this.resetForm("queryForm");

      this.handleQuery();

      this.dateRange = []

      this.resetForm("queryForm")

      this.handleQuery()

    },

    // 多选框选中数据

    handleSelectionChange(selection) {

      this.ids = selection.map(item => item.roleId)

      this.single = selection.length!=1

      this.single = selection.length != 1

      this.multiple = !selection.length

    },

    // 更多操作触发

    handleCommand(command, row) {

      switch (command) {

        case "handleDataScope":

          this.handleDataScope(row);

          break;

          this.handleDataScope(row)

          break

        case "handleAuthUser":

          this.handleAuthUser(row);

          break;

          this.handleAuthUser(row)

          break

        default:

          break;

          break

      }

    },

    // 树权限（展开/折叠）

    handleCheckedTreeExpand(value, type) {

      if (type == 'menu') {

        let treeList = this.menuOptions;

        let treeList = this.menuOptions

        for (let i = 0; i < treeList.length; i++) {

          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;

          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value

        }

      } else if (type == 'dept') {

        let treeList = this.deptOptions;

        let treeList = this.deptOptions

        for (let i = 0; i < treeList.length; i++) {

          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;

          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value

        }

      }

    },

    // 树权限（全选/全不选）

    handleCheckedTreeNodeAll(value, type) {

      if (type == 'menu') {

        this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);

        this.$refs.menu.setCheckedNodes(value ? this.menuOptions: [])

      } else if (type == 'dept') {

        this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);

        this.$refs.dept.setCheckedNodes(value ? this.deptOptions: [])

      }

    },

    // 树权限（父子联动）

    handleCheckedTreeConnect(value, type) {

      if (type == 'menu') {

        this.form.menuCheckStrictly = value ? true: false;

        this.form.menuCheckStrictly = value ? true: false

      } else if (type == 'dept') {

        this.form.deptCheckStrictly = value ? true: false;

        this.form.deptCheckStrictly = value ? true: false

      }

    },

    /** 新增按钮操作 */

    handleAdd() {

      this.reset();

      this.getMenuTreeselect();

      this.open = true;

      this.title = "添加角色";

      this.reset()

      this.getMenuTreeselect()

      this.open = true

      this.title = "添加角色"

    },

    /** 修改按钮操作 */

    handleUpdate(row) {

      this.reset();

      this.reset()

      const roleId = row.roleId || this.ids

      const roleMenu = this.getRoleMenuTreeselect(roleId);

      const roleMenu = this.getRoleMenuTreeselect(roleId)

      getRole(roleId).then(response => {

        this.form = response.data;

        this.open = true;

        this.form = response.data

        this.open = true

        this.$nextTick(() => {

          roleMenu.then(res => {

            let checkedKeys = res.checkedKeys

            checkedKeys.forEach((v) => {

                this.$nextTick(()=>{

                    this.$refs.menu.setChecked(v, true ,false);

                    this.$refs.menu.setChecked(v, true ,false)

                })

            })

          });

        });

        this.title = "修改角色";

      });

          })

        })

      })

      this.title = "修改角色"

    },

    /** 选择角色权限范围触发 */

    dataScopeSelectChange(value) {

      if(value !== '2') {

        this.$refs.dept.setCheckedKeys([]);

        this.$refs.dept.setCheckedKeys([])

      }

    },

    /** 分配数据权限操作 */

    handleDataScope(row) {

      this.reset();

      const roleDeptTreeselect = this.getRoleDeptTreeselect(row.roleId);

      this.reset()

      const deptTreeSelect = this.getDeptTree(row.roleId)

      getRole(row.roleId).then(response => {

        this.form = response.data;

        this.openDataScope = true;

        this.form = response.data

        this.openDataScope = true

        this.$nextTick(() => {

          roleDeptTreeselect.then(res => {

            this.$refs.dept.setCheckedKeys(res.checkedKeys);

          });

        });

        this.title = "分配数据权限";

      });

          deptTreeSelect.then(res => {

            this.$refs.dept.setCheckedKeys(res.checkedKeys)

          })

        })

      })

      this.title = "分配数据权限"

    },

    /** 分配用户操作 */

    handleAuthUser: function(row) {

      const roleId = row.roleId;

      this.$router.push("/system/role-auth/user/" + roleId);

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

            this.form.menuIds = this.getMenuAllCheckedKeys();

            updateRole(this.form).then(response => {

              this.$modal.msgSuccess("修改成功");

              this.open = false;

              this.getList();

            });

            this.form.menuIds = this.getMenuAllCheckedKeys()

            updateRole(this.form).then(() => {

              this.$modal.msgSuccess("修改成功")

              this.open = false

              this.getList()

            })

          } else {

            this.form.menuIds = this.getMenuAllCheckedKeys();

            addRole(this.form).then(response => {

              this.$modal.msgSuccess("新增成功");

              this.open = false;

              this.getList();

            });

            this.form.menuIds = this.getMenuAllCheckedKeys()

            addRole(this.form).then(() => {

              this.$modal.msgSuccess("新增成功")

              this.open = false

              this.getList()

            })

          }

        }

      });

      })

    },

    /** 提交按钮（数据权限） */

    submitDataScope: function() {

    submitDataScope() {

      if (this.form.roleId != undefined) {

        this.form.deptIds = this.getDeptAllCheckedKeys();

        dataScope(this.form).then(response => {

          this.$modal.msgSuccess("修改成功");

          this.openDataScope = false;

          this.getList();

        });

        this.form.deptIds = this.getDeptAllCheckedKeys()

        dataScope(this.form).then(() => {

          this.$modal.msgSuccess("修改成功")

          this.openDataScope = false

          this.getList()

        })

      }

    },

    /** 删除按钮操作 */

    handleDelete(row) {

      const roleIds = row.roleId || this.ids;

      const roleIds = row.roleId || this.ids

      this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function() {

        return delRole(roleIds);

        return delRole(roleIds)

      }).then(() => {

        this.getList();

        this.$modal.msgSuccess("删除成功");

      }).catch(() => {});

        this.getList()

        this.$modal.msgSuccess("删除成功")

      }).catch(() => {})

    },

    /** 导出按钮操作 */

    handleExport() {

@@ -610,5 +601,5 @@
      }, `role_${new Date().getTime()}.xlsx`)

    }

  }

};

}

</script>