renli-pc/src/pages/storeManage/role/components/meun.vue

<template>
  <el-dialog :close-on-click-modal="false" v-dialogDrag :title="title" :visible.sync="dialogVisible" width="75vw" :before-close="handleClose">
    <el-tabs type="border-card" :value='tabName' v-if="isShow">
      <el-tab-pane v-for="(item,index) in rolepowerList" :key="item.id" :label="item.powerName" :name="item.powerName">
        <el-checkbox v-model="item.flag" @change="changerow(item,index)">快速全选</el-checkbox>
        <el-tree ref="tree" :data="item.menuList" check-strictly show-checkbox node-key="powerId" :default-checked-keys="arrkeys" :props="defaultProps"></el-tree>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" type="primary" plain @click="handleClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="confirms()">确 定
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
  organizations,
  roleAddMuenRole,
  rolepower,
  roleMuenPage,
} from "@/api/storeManage.js";
export default {
  data() {
    return {
      tabName: "系统设置",
      isShow: false,
      form: {},
      dialogVisible: false, //弹窗开关 //弹窗开关
      title: "关联菜单", //弹窗标题
      arrkeys: [],
      defaultProps: {
        children: "checkList",
        label: "powerName",
        id: "powerId",
      },
      rolepowerList: [],
    };
  },
  methods: {
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this));
      this.dialogVisible = false;
    },
    changerow(row, index) {
      var list = [];
      if (row.flag == true) {
        list.push(row.id);
        row.menuList.forEach((item1) => {
          list.push(item1.menuId);
          item1.checkList.forEach((item2) => {
            list.push(item2.powerId);
          });
        });
        this.arrkeys = this.arrkeys.concat(list);
      } else {
        list.push(row.id);
        row.menuList.forEach((item1) => {
          list.push(item1.menuId);
          item1.checkList.forEach((item2) => {
            list.push(item2.powerId);
          });
        });
        var newArray = this.arrkeys.filter(function (item) {
          return list.indexOf(item) == -1;
        });
        this.arrkeys = [];
        this.arrkeys = [...newArray];
        this.$refs.tree[index].setCheckedKeys([]);
      }
    },

    //组件传值
    show(form) {
      this.isShow = true;
      this.form = { ...form };
      this.dialogVisible = true;
      this.getData();
    },
    //获取权限page列表
    sortByKey(array, key) {
      return array.sort(function (a, b) {
        var x = a[key];
        var y = b[key];
        return x < y ? -1 : x > y ? 1 : 0;
      });
    },
    //获取数据
    async getData() {
      this.rolepowerList = [];
      rolepower({}).then((res) => {
        if (res.code == "000000") {
          res.data = this.sortByKey(res.data, "id");
          let list = [];
          res.data.forEach((item) => {
            if (item.id > 390) {
              item.menuList.forEach((items) => {
                items.powerId = items.menuId;
                items.powerName = items.menuName;
              });
              item.flag = false;
              list.push(item);
            }
          });
          this.rolepowerList = list;
          this.getPower();
        } else {
          this.$alert(res.message, "获取菜单", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
    getPower() {
      roleMuenPage({ roleId: this.form.id }).then((res) => {
        if (res.code == "000000") {
          let list = [];
          this.arrkeys = []
          res.pageInfo.list.forEach((item) => {
            this.arrkeys.push(item.powerId)
          });
        } else {
          this.$alert(res.message, "获取关联门店", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
    //确定返回方法
    confirms() {
      let idlists = [];
      this.$refs.tree.forEach((item) => {
        idlists = idlists.concat(
          item.getCheckedKeys().concat(item.getHalfCheckedKeys())
        );
        //  console.log(idlists)
      });
      //取前三位 然后去重
      var newarr = [];
      
      for (let i in idlists) {
        if (idlists[i] < 9000) {
          newarr[i] = idlists[i];
        } else {

          //父ID非数据库重新获取，直接从子ID前面直接截取前4位，如果添加新权限数据，要遵守上级ID在前面进行拼接原则
          newarr[i] = Number.parseInt(("" + idlists[i]).substring(0, 3));
        }
      }

      idlists = idlists.concat([...new Set(newarr)]);
      
      if (idlists.length == 0) {
        idlists[0] = 100;
      }
      
      let list = [];
      idlists.forEach((item) => {
        let items = { roleId: this.form.id, powerId: item };
        list.push(items);
      });
      this.form.sysMuenRoles = list;
      roleAddMuenRole(this.form).then((res) => {
        if (res.code == "000000") {
          this.$message.success({ message: res.message });
          this.dialogVisible = false;
          this.$emit("storeData");
          this.getPower()
        } else {
          this.$alert(res.message, "关联门店", {
            confirmButtonText: "确定",
            confirmButtonClass: "confirmbtnFalses",
            type: "warning",
            center: true,
            callback: (action) => {},
          });
        }
      });
    },
  },
};
</script>

<style>
</style>