基于Vue+ElementUI的商场后台管理系统day9

• 实现权限标签删除
  在事件处理函数中传递两个参数，一个是scope.row，另一个是item.id。避免使用getRolesList()去刷新页面重获数据，让用户体验更好，直接看到结果。

    //移除三级权限的标签
    async removeRightTag(role, id) {
      //提示用户
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户权限, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      // console.log(role);
      // console.log(id);
      //发起请求
      const {data: res} = await this.$http.delete(`roles/${role.id}/rights/${id}`)
      if(res.meta.status !== 200) return this.$message.error('删除权限失败！')
      //避免刷新页面，采用数据赋值
      role.children = res.data
    },

• 实现修改用户权限
  对话框，树形结构控件，单选框和默认展开，已有权限默认勾选
  ref 放谁身上，就可以获取它的所有属性和方法
  用到的方法
  用到的方法
  拓展运算符

//拿到ID，合并成新数组
      const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
      ]
      console.log(keys);

没有使用拓展运算符打印出来的结果
添加了拓展运算符
join()方法就是将array数据中每个元素都转为字符串,用自定义的连接符分割
逗号分割

    //点击确认为角色分配权限
    async allotRights() {
      //拿到ID，合并成新数组
      const keys = [
        //选中的
        ...this.$refs.treeRef.getCheckedKeys(),
        //半选(一级二级)
        ...this.$refs.treeRef.getHalfCheckedKeys(),
      ];
      // console.log(keys);
      //用逗号拼接成新的字符串
      const idStr = keys.join(",");
      // console.log(idStr);
      const { data: res } = await this.$http.post(
        `roles/${this.roleId}/rights`,
        { rids: idStr }
      );
      if (res.meta.status !== 200) {
        return this.$message.error("分配权限失败！");
      }

      this.$message.success("分配权限成功！");
      this.getRolesList();
      this.setRightDialogVisible = false;
    },

这个需要好好理解，怎么处理请求所需要的参数。

• 实现用户列表的分配角色
  重点在于显示对话框前下拉选择框的数据显示和确认的数据请求。
• 上传代码到云端
  分支推送一次，合并到主分支推送一次
  git branch --> git add . --> git commit -m "完成了权限功能的开发" -->
  git push --> git checkout main --> git merge rights --> git push