ShutongInterconnectedChemicalCloudPlatform/src/views/powermanage/rolepower/setuprole/setuprolepower.vue

<!--
@ 作者: 秦东
@ 时间: 2023-05-30 13:52:12
@ 备注: 配置权限
-->
<script lang="ts" setup>
import {
  setupPage,
  systemCont,
  systemMenusTypeTree,
  submintPostPower,
} from "@/api/system/roleapi/types";
import {
  getSystemType,
  getSystemPoewrTreeForRole,
  getGrantRolePowers,
  grantSystemRolePoewr,
} from "@/api/system/roleapi/postrole";
const props = defineProps({
  powerIsShow: {
    type: Boolean,
    default: false,
  },
  roleId: {
    type: String,
    default: "",
  },
  roleTitle: {
    type: String,
    default: "配置权限",
  },
});
/**
 * 树形组件
 */
const menuRef = ref(ElTree);
const powerLoading = ref(false);
const powerLoadingSub = ref(false);
const emits = defineEmits(["update:powerIsShow"]); //父级元素
/**
 * 系统选择标签
 */
const systemTabs = ref("");
/**
 * 系统列表
 */
const orgPostTreeContList = ref<systemCont[]>([]);
/**
 * 管理范围
 */
const manageScope = ref(0);
/**
 * 树形结构约束
 */
const systemMenuTreeProps = {
  children: "child",
  label: "name",
};
/**
 * 分页参数
 */
const setupPageCont = reactive<setupPage>({
  page: 1,
  pagesize: 100000,
});
/**
 * 弹窗显示控制
 */
const power_is_Show = computed({
  get: () => props.powerIsShow,
  set: (val) => {
    emits("update:powerIsShow", val);
  },
});
/**
 * 关闭弹窗回调
 */
function handleClosePower() {
  emits("update:powerIsShow", false);
  initData();
}
/**
 * 初始化数据
 */
function initData() {
  powerLoading.value = false;
  powerLoadingSub.value = false;
  setupPageCont.page = 1;
  setupPageCont.pagesize = 100000;
  systemTabs.value = "";
  manageScope.value = 0;
  gainPowerAry.value = [];
}
/**
 * 监听数据
 */
watch(
  () => props.powerIsShow,
  () => {
    if (props.powerIsShow) {
      getSystemTypeList();
    } else {
      initData();
    }
  }
);

/**
 * 获取系统分类
 */
function getSystemTypeList() {
  getSystemType(setupPageCont).then((data) => {
    // console.log(data);
    orgPostTreeContList.value = data.data.list;
    if (data.data.list[0]) {
      systemTabs.value = data.data.list[0].coder;
    }
  });
}
/**
 * 权限菜单列表
 */
const systemPowerMenusTree = ref<systemMenusTypeTree[]>([]);
/**
 * 已授权的权限
 */
const gainPowerAry = ref<String[]>([]);
/**
 * 获取菜单
 */
function getSysMenuTree(sysKey: string) {
  powerLoading.value = true;
  systemPowerMenusTree.value = [];
  getSystemPoewrTreeForRole({ name: sysKey, roleid: props.roleId })
    .then(({ data }) => {
      systemPowerMenusTree.value = data;
      getGrantRolePowers({ name: sysKey, roleid: props.roleId })
        .then(({ data }) => {
          // console.log("获取菜单====>",data);
          manageScope.value = data.level;
          if (data != null) {
            gainPowerAry.value = data.powerList;
          }
        })
        .finally(() => {
          powerLoading.value = false;
          setCheckedKeys();
        });
    })
    .finally(() => {
      powerLoading.value = false;
    });
}
/**
 * 设置已经授权的权限
 */
function setCheckedKeys() {
  // console.log("设置已经授权的权限",gainPowerAry.value)
  gainPowerAry.value.forEach((menuId) => menuRef.value.setChecked(menuId, true, false));
}
watch(
  () => systemTabs.value,
  () => {
    powerLoading.value = true;
    if (systemTabs.value != "" && systemTabs.value != null) {
      getSysMenuTree(systemTabs.value);
    }
  }
);
/**
 * 授权
 */
function enterEmpowerClick() {
  powerLoadingSub.value = true;
  const checkedMenuTrue: systemMenusTypeTree[] = menuRef.value
    .getCheckedNodes(false, true)
    .map((node: any) => node);
  //   console.log("确定授权", checkedMenuTrue);
  checkedMenuTrue.forEach((item) => {
    item.child = [];
  });
  grantSystemRolePoewr({
    systemname: systemTabs.value,
    roleid: props.roleId,
    level: manageScope.value * 1,
    power: checkedMenuTrue,
  })
    .then((data) => {
      // console.log("确定授权返回----》", data);
      ElMessage.success("授权成功");
      handleClosePower();
    })
    .finally(() => {
      powerLoadingSub.value = false;
    });
}
</script>
<template>
  <el-dialog
    v-model="power_is_Show"
    custom-class="dialog_box"
    :title="roleTitle"
    top="50px"
    :before-close="handleClosePower"
  >
    <el-container>
      <el-aside width="125px">
        <el-tabs v-model="systemTabs" tab-position="left" class="demo-tabs tabs_box">
          <el-tab-pane
            v-for="item in orgPostTreeContList"
            :key="item.key"
            :label="item.title"
            :name="item.coder"
          ></el-tab-pane>
        </el-tabs>
      </el-aside>
      <el-main>
        <el-radio-group v-model="manageScope" style="margin-bottom: 10px">
          <el-radio-button label="0">默认</el-radio-button>
          <el-radio-button label="1">本岗位</el-radio-button>
          <el-radio-button label="2">本部门</el-radio-button>
          <el-radio-button label="3">本分部</el-radio-button>
          <el-radio-button label="4" disabled>指定行政组织</el-radio-button>
          <el-radio-button label="5">所有</el-radio-button>
        </el-radio-group>
        <el-scrollbar v-loading="powerLoading" class="tab_pane_box">
          <el-tree
            ref="menuRef"
            node-key="menukey"
            :data="systemPowerMenusTree"
            show-checkbox
            :default-expand-all="true"
            :props="systemMenuTreeProps"
          >
            <template #default="{ node, data }">
              <span class="tree_sapn">{{ node.label }}</span>
              <el-tag v-if="data.attribute === 2" type="warning">目录</el-tag>
              <el-tag v-if="data.attribute === 1" type="success">菜单</el-tag>
              <el-tag v-if="data.attribute === 4" type="danger">按钮</el-tag>
              <el-tag v-if="data.attribute === 3" type="info">外链</el-tag>
            </template>
          </el-tree>
        </el-scrollbar>
      </el-main>
    </el-container>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="danger" @click="handleClosePower">取消</el-button>
        <el-button type="primary" :loading="powerLoadingSub" @click="enterEmpowerClick"
          >授权</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.el-dialog__body {
  padding: 0;
}
.tabs_box {
  height: calc(100vh - 500px);
  .tab_pane_box {
    height: calc(100vh - 550px);
    overflow: hidden;
    overflow-y: auto;
  }
}
.tab_pane_box {
  height: calc(100vh - 550px);
  overflow: hidden;
  overflow-y: auto;
}
.tree_sapn {
  padding: 0 15px;
}
</style>