fix: 修改角色授权代码

zhengyiming

6 天以前 84e27a26dcbee4d0706dfad6059454ea85fadacc

 src/views/Permission/components/dialogAuthorizeV2.vue

@@ -24,7 +24,8 @@
            default-expand-all
            show-checkbox
            ref="moduleTree"
            :default-checked-keys="checkedModules"
            :default-checked-keys="defaultCheckedKeys"
            @check="handleModuleCheck"
          >
            <template #default="{ node }">
              <div class="custom-tree-node">
@@ -62,7 +63,8 @@
            default-expand-all
            show-checkbox
            ref="pageButtonTree"
            :default-checked-keys="checkedPageButton"
            :default-checked-keys="defaultCheckedKeys"
            @check="handlePageButtonCheck"
          >
            <template #default="{ node }">
              <div class="custom-tree-node">
@@ -97,7 +99,8 @@
            default-expand-all
            show-checkbox
            ref="dataButtonTree"
            :default-checked-keys="checkedDataButton"
            :default-checked-keys="defaultCheckedKeys"
            @check="handleDataButtonCheck"
          >
            <template #default="{ node }">
              <div class="custom-tree-node">
@@ -132,7 +135,8 @@
            default-expand-all
            show-checkbox
            ref="dataColumnTree"
            :default-checked-keys="checkedDataColumn"
            :default-checked-keys="defaultCheckedKeys"
            @check="handleDataColumnCheck"
          >
            <template #default="{ node }">
              <div class="custom-tree-node">
@@ -155,10 +159,11 @@
<script setup lang="ts">
import { Message } from '@bole-core/core';
import { AuthorizeType, SubModuleType, SubModuleTitle, EnumMenuType } from '@/constants';
import { getTree } from '@/utils';
import { getTree, treeEach } from '@/utils';
import { TreeInstance } from 'element-plus';
import { ProDialog } from '@bole-core/components';
import { useMenus, useMenu } from '@/hooks';
import data from '@iconify-icons/ep/tickets';

const TypeTip = defineComponent({
  name: 'TypeTip',
@@ -195,7 +200,7 @@
const form = defineModel<Form>('form');

const emit = defineEmits<{
  (e: 'onConfirm', selectedMenuIds: string[], resourceIds: string[]): void;
  (e: 'onConfirm', selectedMenuIds: string[]): void;
  (e: 'onCancel'): void;
}>();

@@ -207,13 +212,17 @@

const state = reactive({
  currentMenuId: '',
  checkedInfo: [] as CheckedResourceItem[],
  selectedMenuIds: [] as string[],
});

const defaultCheckedKeys = computed(() => Array.from(state.selectedMenuIds));

watch(visible, (newVal) => {
  if (newVal) {
    state.currentMenuId = '';
    state.checkedInfo = [];
    const menuIds = form.value.detail?.menuIds ?? [];
    // menuIds.forEach((id) => state.selectedMenuIds.add(id));
    state.selectedMenuIds = [...menuIds];
  }
});

@@ -225,6 +234,8 @@
const pageButtonTree = useTemplateRef<TreeInstance>('pageButtonTree');
const dataButtonTree = useTemplateRef<TreeInstance>('dataButtonTree');
const dataColumnTree = useTemplateRef<TreeInstance>('dataColumnTree');

type TreeRef = ReturnType<typeof useTemplateRef<TreeInstance>>;

const { menusTree, getMenuById } = useMenus({
  params: computed(() => ({
@@ -243,77 +254,45 @@
  enabled: computed(() => !!state.currentMenuId),
});

const checkedModules = computed(() => {
  if (form.value.detail) {
    return form.value.detail.menuIds;
  }
  return [];
});

const checkedPageButton = computed(() => initChecked(SubModuleType.PageButton));
const checkedDataButton = computed(() => initChecked(SubModuleType.DataButton));
const checkedDataColumn = computed(() => initChecked(SubModuleType.Column));

function initChecked(type: SubModuleType) {
  return state.checkedInfo.filter((x) => x.resourceType === type).map((x) => x.resourceId);
}

function handleSelectModule(menu: API.GetMenusQueryResultItem) {
  const modules1 =
    dataButtonTree &&
    dataButtonTree.value.getCheckedKeys(true).map((x) => {
      return {
        resourceType: SubModuleType.DataButton,
        resourceId: x,
        menuId: menu.id,
      } as CheckedResourceItem;
    });

  const modules2 =
    pageButtonTree &&
    pageButtonTree.value.getCheckedKeys(true).map((x) => {
      return {
        resourceType: SubModuleType.PageButton,
        resourceId: x,
        menuId: menu.id,
      } as CheckedResourceItem;
    });

  const modules3 =
    dataColumnTree &&
    dataColumnTree.value.getCheckedKeys(true).map((x) => {
      return {
        resourceType: SubModuleType.Column,
        resourceId: x,
        menuId: menu.id,
      } as CheckedResourceItem;
    });

  const checkExtends = state.checkedInfo.filter(
    (x) => x.menuId !== menu.id && x.menuId !== undefined
  );

  if (modules1 && modules1.length) {
    checkExtends.push(...modules1);
  }
  if (modules2 && modules2.length) {
    checkExtends.push(...modules2);
  }
  if (modules3 && modules3.length) {
    checkExtends.push(...modules3);
  }

  state.checkedInfo = checkExtends;
  state.currentMenuId = menu.id;
}

function handleModuleCheck(data, params) {
  handleCheck(data, params, moduleTree);
}

function handlePageButtonCheck(data, params) {
  handleCheck(data, params, pageButtonTree);
}

function handleDataButtonCheck(data, params) {
  handleCheck(data, params, dataButtonTree);
}

function handleDataColumnCheck(data, params) {
  handleCheck(data, params, dataColumnTree);
}

function handleCheck(data, params, treeRef: TreeRef) {
  const dataMap = {};
  treeEach(
    [treeRef.value.store.root],
    (node) => (dataMap[node.key] = node),
    (node) => node.childNodes
  );

  const uncachedCheckedKeys = params.checkedKeys.filter(
    (item) => !['pageButtonAll', 'dataButtonAll', 'dataColumnAll'].includes(item)
  );
  const cachedKeys = state.selectedMenuIds.filter(
    (item) => !(item in dataMap) && !uncachedCheckedKeys.includes(item)
  );
  state.selectedMenuIds = cachedKeys.concat(uncachedCheckedKeys);
}

function handleConfirm() {
  const selectedMenuIds = moduleTree.value.getCheckedNodes(false, true).map((x) => x.id);
  console.log('selectedMenuIds: ', selectedMenuIds);
  handleSelectModule(getMenuById(state.currentMenuId));
  const resourceIds = state.checkedInfo.map((x) => x.resourceId);
  console.log('resourceIds: ', resourceIds);
  emit('onConfirm', selectedMenuIds, resourceIds);
  emit('onConfirm', state.selectedMenuIds);
}
</script>