[JavaScript知识库]封装树形控件为组件，后台管理分配权限并禁用。

做个记录，可能不适用别人，但是能做个参考用。有问题私信

父组件

<!-- 权限分配弹窗 -->
<el-button type="primary" size="small" @click="openAuth(scope.row)">
     分配权限
</el-button>

<role-auth :data="current" :visible.sync="showAuth" />

  import RoleAuth from "./role-auth";
  
  components: {RoleAuth },
  
// 是否显示导入弹窗
     showAuth: false,
// 当前编辑数据
     current: null,
    /* 显示分配权限 */
    openAuth(row) {
      this.current = row;
      this.showAuth = true;
    },

子组件

<!-- 角色权限分配弹窗 -->
<template>
  <el-dialog
    title="分配权限"
    :visible="visible"
    width="400px"
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible"
  >
    <el-scrollbar
      v-loading="authLoading"
      style="height: 50vh"
      wrapStyle="overflow-x: hidden;"
    >
      <el-tree
        ref="tree"
        :data="authData"
        :props="{ label: 'title' }"
        :check-strictly="checkStrictly"
        node-key="id"
        :default-expand-all="true"
        show-checkbox
      />
    </el-scrollbar>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading"
        >保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from "@/utils/request";
import { getMenus } from "@/api/menu";

export default {
  name: "RoleAuth",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 当前角色数据
    data: Object,
  },
  data() {
    return {
      // 权限数据
      authData: [],
      listone: [],
      list: [],
      // 权限数据请求状态
      authLoading: false,
      checkStrictly: false,
      // 提交状态
      loading: false,
    };
  },
  watch: {
    visible() {
      if (this.visible) {
        this.getRoutes();
        this.query();
        this.hanshu()
      }
    },
  },
  methods: {
    async getRoutes() {
      const res = await getMenus();
      this.authData = res.data;
    },
    hanshu() {
      let bb = this.data.roleList;
      for (let a of bb) {
      //需求是需要禁用多个角色的权限。
        this.jinyong(a.roleId);
      }
    },
    //禁用函数
    jinyong(e) {
      request.get(`role/resourceIds/${e}`).then((res) => {
        if (res.code == 0) {
          this.list = res.data.resourceIds;
          this.getDisabledData();
        }
      });
    },
    /**
     * 禁用节点
     * @param {*} data
     * @param {*} id 值不为undefined设置禁用节点；反之则清除禁用节点
     */
    setDisabledTreeData(data, id) {
      let val = id !== undefined ? true : false;
      data.map((item) => {
        if (id == undefined || item.id == id) {
          this.$set(item, "disabled", val);
        }
        let isFatherNode = item.children && item.children.length > 0;
        isFatherNode && this.setDisabledTreeData(item.children, id);
        let isHadDisabledChild =
          isFatherNode &&
          item.children.some((it) => it.disabled && it.disabled == val);
        if (isHadDisabledChild) this.$set(item, "disabled", val);
      });
    },
    /**
     * 获取有禁用节点的树数据
     */
    getDisabledData() {
      this.list.map((item) => this.setDisabledTreeData(this.authData, item));
    },
    /* 查询权限数据 */
    query() {
      this.authLoading = true;
      this.checkStrictly = true;
      request.get(`admin/resourceIds/${this.data.id}`).then((res) => {
        console.log(res, "看数据");
        this.authLoading = false;
        if (res.code === 0) {
          // this.$nextTick(() => {
          if (res.data) {
            this.listone = res.data;
            this.$refs.tree.setCheckedKeys(res.data);
            this.checkStrictly = false;
          } else {
            this.$refs.tree.setCheckedKeys([]);
          }
          // });
        }
      });
    },
    /* 保存权限分配 */
    save() {
      this.loading = true;
      let ids = this.$refs.tree
        .getCheckedKeys()
        .concat(this.$refs.tree.getHalfCheckedKeys());、
      request
        .post("admin/savePower", { adminId: this.data.id, resourceIds: ids })
        .then((res) => {
          this.loading = false;
          if (res.code === 0) {
            this.$message({ type: "success", message: "成功" });
            this.updateVisible(false);
          }
        })
        .catch((e) => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },
  },
};
</script>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖