logologo
Start
Handleiding
Ontwikkeling
Plugins
API
English
简体中文
日本語
한국어
Deutsch
Français
Español
Português
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
Start
Handleiding
Ontwikkeling
Plugins
API
logologo
Gebruikers

Rollen en rechten

Rolconfiguratie
Rechtenconfiguratie
Toepassen in UI
Rol-unie

Ontwikkelaarsgids

Rechtenconfiguratiebalk uitbreiden

Afdelingen

Afdelingsbeheer
Afdelingsrolbeheer

Gebruikersgegevenssynchronisatie

Synchronisatiebeheer

Gegevensbronnen

WeChat Work
HTTP API

Ontwikkelaarsgids

Synchronisatiebronnen uitbreiden
Synchronisatiedoelen uitbreiden
Previous PageRol-unie
Next PageAfdelingsbeheer
TIP

Dit document is vertaald door AI. Voor onnauwkeurigheden, raadpleeg de Engelse versie

#Rechtenconfiguratietabbladen uitbreiden

Hieronder demonstreren we, aan de hand van het configuratie-item "Mobiel menu", hoe u een nieuw tabblad voor rechtenconfiguratie kunt uitbreiden. Het resultaat ziet u in de onderstaande afbeelding:

20240903210248

De code ziet er als volgt uit:

import { Plugin } from '@nocobase/client';
import PluginACLClient from '@nocobase/plugin-acl/client';

class PluginMobileClient extends Plugin {
  async load() {
    const aclInstance = this.app.pm.get(PluginACLClient);

    aclInstance?.settingsUI.addPermissionsTab(({ t, TabLayout, activeKey }) => ({
      key: 'mobile-menu',
      label: t('Mobile menu', {
        ns: 'plugin-mobile',
      }),
      children: (
        <TabLayout>
          <MenuPermissions />
        </TabLayout>
      ),
    }));
  }
}

Allereerst moeten we een instantie van de PluginACLClient-plugin verkrijgen (andere methoden om plugin-instanties te verkrijgen). Vervolgens voegen we een nieuw tabblad voor rechtenconfiguratie toe met behulp van de settingsUI.addPermissionsTab-methode. In dit voorbeeld hebben we een tabblad voor rechtenconfiguratie met de naam "Mobiel menu" toegevoegd.

De waarde van de settingsUI-eigenschap is een instantie van een klasse genaamd ACLSettingsUI. De type-informatie hiervan ziet er als volgt uit:

import { TabsProps } from 'antd/es/tabs/index';

interface ACLSettingsUI {
  addPermissionsTab(tab: Tab | TabCallback): void;
  getPermissionsTabs(props: PermissionsTabsProps): Tab[];
}

type Tab = TabsProps['items'][0];

type TabCallback = (props: PermissionsTabsProps) => Tab;

interface PermissionsTabsProps {
  /**
   * the key of the currently active tab panel
   */
  activeKey: string;
  /**
   * the currently selected role
   */
  role: Role;
  /**
   * translation function
   */
  t: TFunction;
  /**
   * used to constrain the size of the container in the Tab
   */
  TabLayout: React.FC;
}