xy-frontend/src/views/system/user/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="compositeKey"
        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",
        key: "compositeKey", // 确保这里使用的是 uniqueKey
      },
      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));
    },
    //获取权限树结构
    getPermissionList() {
      this.treeLoading = true;
      getPermissionTree()
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            // this.treeLoading = false;
            //this.treeData = res.data.list;
            this.treeData = this.processData(res.data);
            console.log(this.treeData);
            // this.treeData.forEach((item) => {
            //   this.defaultExpandedArr.push(item.id);
            // });
            this.defaultExpandedArr.push(this.treeData[0].compositeKey);
            // console.log("我是默认展开的id", this.defaultExpandedArr);
            this.getPermissionRole();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {});
    },
    processData(data, level = 0) {
      return data.map((node) => {
        const compositeKey = `${level}-${node.id}`; // 创建复合标识符
        node.compositeKey = compositeKey; // 将复合标识符添加到节点属性中
        if (node.list) {
          node.list = this.processData(node.list, level + 1); // 递归处理子节点
        }
        return node;
      });
    },
    //获取查询杈限
    getPermissionRole() {
      console.log(this.rowData);
      getPermission({ id: this.rowData.uid })
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.premissData = res.data;
            // let setCheckedKeysList = this.premissData.map(function (item) {
            //   return item.resourceId;
            // });
            let setCheckedKeysList = [];
            this.premissData.forEach((node) => {
              if (node.resourceType == 1) {
                console.log(node);
                setCheckedKeysList.push("0-" + node.resourceId);
              } else if (node.resourceType == 2) {
                setCheckedKeysList.push("1-" + node.resourceId);
              } else if (node.resourceType == 3) {
                setCheckedKeysList.push("2-" + node.resourceId);
              } else if (node.resourceType == 4) {
                setCheckedKeysList.push("3-" + node.resourceId);
              }
            });
            console.log(setCheckedKeysList);
            this.$refs.tree.setCheckedKeys(setCheckedKeysList);
            this.treeLoading = false;
            // this.$nextTick(() => {
            //   this.$refs.tree.setCheckedKeys(setCheckedKeysList);
            //   this.treeLoading = false;
            // });
          } 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 ("lineid" in node) {
          paramsList.push({ resourceType: 3, resourceId: node.id });
        } else if ("towerid" in node) {
          paramsList.push({ resourceType: 4, resourceId: node.id });
        }
      });
      console.log(paramsList);
      changePermission({
        list: paramsList,
        userId: this.rowData.uid,
      })
        .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>