dy-admin-manager/src/views/categroyManager/insideSetting/adminOperation.vue

<template>
  <div class="m-container">
    <h2>
      <el-page-header
        @back="onCancel"
        :content="(pageType == 'create' ? '添加' : '修改') + '角色'"
      ></el-page-header>
    </h2>
    <div class="m-core">
      <el-form ref="form" label-width="120px" style="width: 500px">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model.trim="result.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input type="textarea" v-model.trim="result.roleDesc"></el-input>
        </el-form-item>
        <el-form-item label="搜索">
          <el-input
            style="width: 210px"
            v-model.trim="seachRoleValue"
            clearable
          ></el-input>
          <el-button style="margin-left: 10px" type="danger" @click="seachRoles"
            >搜索</el-button
          >
          <!-- <el-button type="primary"
                     @click="onReSetRole">重置</el-button> -->
        </el-form-item>
        <el-form-item label="基本权限">
          <el-checkbox
            :indeterminate="isIndeterminate"
            @change="onCheckAll"
            v-model.trim="checkAll"
            >全选</el-checkbox
          >

          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            @check="onTreeCheck"
            :filter-node-method="filterNode"
            ref="tree"
            accordion
            highlight-current
            :default-checked-keys="result.menuIds"
            :props="defaultProps"
          >
            <div slot-scope="{ node, data }">
              {{ node.label }}
              <el-tag v-if="data.type == 1" effect="dark">按钮</el-tag>
            </div>
          </el-tree>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit" type="primary"
            >立即{{ pageType == "create" ? "创建" : "修改" }}</el-button
          >
          <el-button @click="onReSet('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getUserRole } from "@/api/systemManage";
import store from "@/store";
import { getSilder } from "@/api/silder";
import {
  roleGetMenus,
  getRoleInfo,
  roleUpdate,
  roleAdd,
} from "@/api/systemManage";
export default {
  name: "adminOperation",
  data() {
    return {
      organId: null,
      pageType: null,
      id: null,
      page: null,
      isIndeterminate: false,
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      result: {
        roleName: null,
        roleDesc: null,
      },
      checkAll: false,
      splice: [],
      silderList: [],
      allChildIds: [], // 所有子编号
      slideCount: 0,
      seachRoleValue: "", //权限搜索字段
      filterIds: [4794, 4743, 3266, 3268, 3306, 3307, 3309, 3784, 4627],
    };
  },
  mounted() {
    this.onReSet();
    this.init();
  },
  activated() {
    this.onReSet();
    this.init();
  },
  methods: {
    init() {
      this.pageType = this.$route.query.type;
      this.id = this.$route.query.id;
      this.page = this.$route.query.page;
      if (this.pageType == "create") {
        this.$refs.tree.setCheckedKeys([4229]);
      }
      this.lookSilder();
    },
    onSubmit() {
      let tempIds = this.$refs.tree.getCheckedKeys();
      let halfIds = this.$refs.tree.getHalfCheckedKeys();
      let allIds = [...tempIds, ...halfIds];
      if (this.pageType == "update") {
        roleUpdate({
          id: this.id,
          organId: this.organId,
          roleDesc: this.result.roleDesc,
          roleName: this.result.roleName,
          menuIds: allIds,
        }).then((res) => {
          this.messageTips("修改", res);
        });
      } else if (this.pageType == "create") {
        roleAdd({
          organId: this.organId,
          roleDesc: this.result.roleDesc,
          roleName: this.result.roleName,
          menuIds: allIds,
        }).then((res) => {
          this.messageTips("添加", res);
        });
      }
    },
    messageTips(title, res) {
      if (res.code == 200) {
        this.$message.success("修改成功");
        this.$store.dispatch("delVisitedViews", this.$route);
        this.$router.push({
          path: "/adminManager",
          query: { page: this.page },
        });
      } else {
        this.$message.error(res.msg);
      }
    },
    async lookSilder() {
      //  修复反写没有loading request返回的不是Promise await无效
      getSilder({ hid: 0 }).then(async (silderList) => {
        let tempData = [];
        if (silderList.code == 200) {
          this.silderList = silderList.data;
          tempData = this.setTableData(silderList.data);
          this.data = tempData;
          // console.log(this.data)
        }
        // console.log(this.pageType)
        if (this.pageType == "update") {
          let roleInfo = await getRoleInfo({ id: this.id });
          if (roleInfo.code == 200) {
            let roleData = roleInfo.data;
            // 是否是全部选中
            this.checkAll = roleData.menuIds.length >= this.slideCount;
            // 是否是半选
            this.isIndeterminate =
              roleData.menuIds.length > 0 &&
              roleData.menuIds.length < this.slideCount;
            let tSplice = this.getParent(roleData.menuIds, tempData);
            roleData.menuIds = tSplice;
            this.result = roleData;
          }
        } else {
          this.onReSet();
        }
      });
    },
    onTreeCheck() {
      let checkTree = this.$refs.tree.getCheckedKeys();
      this.checkAll = checkTree.length >= this.slideCount;
      this.isIndeterminate =
        checkTree.length > 0 && checkTree.length < this.slideCount;
    },
    onCheckAll(val) {
      if (val) {
        // 先去掉半选
        this.isIndeterminate = false;
        this.$refs.tree.setCheckedNodes(this.data);
      } else {
        this.$refs.tree.setCheckedNodes([]);
      }
    },

    //递归获取到所有的为子级的ID
    getParent(checkIds, data) {
      let removeIds = JSON.parse(JSON.stringify(checkIds));
      this.getAllChildIds(data);
      let tempAllChildIds = this.allChildIds;
      for (let i = checkIds.length; i > 0; i--) {
        if (!tempAllChildIds.includes(checkIds[i - 1])) {
          removeIds.splice(i - 1, 1);
        }
      }
      return removeIds;
    },
    getAllChildIds(data) {
      // 获取所有最子集编号
      let child = this.allChildIds;
      let tempList = [];
      data.forEach((item, index) => {
        let temp = [];
        if (item.children && item.children.length > 0) {
          temp = this.getAllChildIds(item.children);
        } else {
          child.push(item.id);
        }
      });
    },
    setTableData(result) {
      let list = [];
      list = result.map((res) => {
        if (!this.filterIds.includes(res.id)) {
          let tempList = {};
          tempList = {
            id: res.id,
            name: res.name,
            label: res.name,
            type: res.type,
            path: res.path,
            permission: res.permission,
            icon: res.icon,
            parentId: res.parentId,
          };
          this.slideCount++;
          if (res.sysMenus && res.sysMenus.length > 0) {
            tempList.children = this.setTableData(res.sysMenus);
          }
          return tempList;
        }
        return null;
      });
      let tempList = [];
      list.forEach((item) => {
        if (item) {
          tempList.push(item);
        }
      });
      return tempList;
    },
    onReSet() {
      this.$refs.tree.setCheckedNodes([]);
      this.result = {
        roleName: null,
        roleDesc: null,
      };
      this.isIndeterminate = false;
      this.checkAll = false;
    },
    onCancel() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push({
        path: "/adminManager",
        query: {
          page: this.$route.query.page,
        },
      });
    },
    seachRoles() {
      this.$refs.tree.filter(this.seachRoleValue);
    },
    filterNode(value, data) {
      console.log(data);
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    onReSetRole() {
      this.seachRoleValue = "";
      this.data = this.setTableData(this.silderList);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-row {
  margin-top: 40px;
}
.el-col {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: flex-end;
  margin-right: 50%;
}
.el-input-group {
  width: 200px;
  margin: 0 20px;
}
/deep/.el-tree-node__content {
  height: 40px !important;
}
</style>