xy-frontend/src/views/system/roleManagement/components/blindPermiss.vue

<template>
  <el-dialog
    class="blindDialog"
    title="权限绑定"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="470px"
    @close="handleclose"
  >
    <div class="treeBoxList" v-loading="treeLoading">
      <el-tree
        :data="treeData"
        show-checkbox
        node-key="id"
        ref="tree"
        highlight-current
        :default-expanded-keys="defaultExpandedArr"
        :props="defaultProps"
      >
      </el-tree>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="submitForm()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  getPermissionTree,
  getPermission,
  changePermission,
} from "@/utils/api/index";
export default {
  props: {},
  data() {
    return {
      roleUser: "",
      isShow: false,
      treeData: [],
      defaultProps: {
        //指定参数格式回显数据
        children: "list",
        label: "name",
      },
      treeLoading: false,
      rowData: "",
      premissData: [],
      selectTreeNode: [],
      defaultExpandedArr: [],
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      },
      xgrules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      },
    };
  },
  methods: {
    //判断
    getdataform(val) {
      this.rowData = JSON.parse(JSON.stringify(val));
      this.getPermissionRole();
    },
    //获取权限树结构
    getPermissionList() {
      this.treeLoading = true;
      getPermissionTree()
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.treeLoading = false;
            this.treeData = res.data.list;
            // this.treeData.forEach((item) => {
            //   this.defaultExpandedArr.push(item.id);
            // });
            this.defaultExpandedArr.push(this.treeData[0].id);
            // console.log("我是默认展开的id", this.defaultExpandedArr);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {});
    },
    //获取查询杈限
    getPermissionRole() {
      console.log(this.rowData);
      getPermission({ id: this.rowData.id })
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.premissData = res.data;

            let setCheckedKeysList = this.premissData.map(function (item) {
              return item.resourceId;
            });
            console.log(setCheckedKeysList);
            this.$refs.tree.setCheckedKeys(setCheckedKeysList);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {});
    },

    // 保存确定操作
    submitForm() {
      //获取勾选的父节点和子节点
      let originData = this.$refs.tree.store;
      // 定义数组
      const checkedNodeIds = [];
      // 判断是否为全选，若为全选状态返回被选中的父节点数据，不为全选状态正常返回被选中的子节点的数据
      const isAllChecked = function (node) {
        const childNodes = node.root ? node.root.childNodes : node.childNodes;
        childNodes.forEach((child) => {
          if (child.checked) {
            checkedNodeIds.push(child.data);
          }
          if (child.indeterminate) {
            isAllChecked(child);
          }
        });
      };
      isAllChecked(originData);
      console.log(checkedNodeIds);
      //把获取到的节点遍历 组成想要的内容
      let paramsList = [];
      checkedNodeIds.forEach((node) => {
        if ("dyValue" in node) {
          console.log(node);
          paramsList.push({ resourceType: 1, resourceId: node.id });
        } else if ("bsManufacturer" in node) {
          paramsList.push({ resourceType: 2, resourceId: node.id });
        } else if ("id" in node) {
          paramsList.push({ resourceType: 3, resourceId: node.id });
        }
      });
      console.log(paramsList);
      changePermission({
        list: paramsList,
        roleId: this.rowData.id,
      })
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.isShow = false;
            this.$message({
              duration: 1500,
              showClose: true,
              message: "权限绑定成功",
              type: "success",
            });
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {});
    },
    display() {
      this.isShow = true;
      this.getPermissionList();
    },
    hide() {
      this.isShow = false;
    },
    handleclose() {
      this.treeData = [];
    },
  },
  mounted() {},
};
</script>
<style lang="less">
.blindDialog {
  .treeBoxList {
    height: 600px;
    overflow: auto;
    .el-dialog__body {
      overflow: auto;
    }
  }
}
</style>