---
description: '权限分配组件'
labels: ['权限', '用户', '角色']
---

import { Icon, Tooltip } from 'tntd'
import { AssignUserModal } from './assign-user-modal'

## React Component for rendering text

A basic div that renders some text

### Component usage

```js
<AssignUserModal
  visible={false}
  value={{ users: ['wxf1', 'wxf3'] }}
  onSubmit={(values) => {
    console.log(values)
  }}
  help={<Tooltip title="提示文案提示文案">
    <Icon type="question-circle" />
  </Tooltip>}
  service={{
    queryUsers: () =>
      Promise.resolve(
        new Array(200).fill(0).map((_, i) => ({
          uuid: '01b038f151ef4dd5a3509b0aaee01042' + i,
          username: 'wxf' + i,
          nickname: '用户——' + i,
        }))
      ),
    queryRole: () =>
      Promise.resolve(
        new Array(3).fill(0).map((_, i) => ({
          uuid: '025d20ffaf46466d993ed28100d8d17d1' + i,
          code: '普通用户' + i,
          name: '角色' + i,
          orgUuid: 'a8202aea546f48979754bdd45c471b08',
          type: 'default',
        }))
      ),
    countUsers: () => Promise.resolve(24),
  }}
  disableRole={false}
/>
```

```js
<UserRoleSelector
  value={{ users: ['wxf1', 'wxf3'] }}
  onSubmit={(values) => {
    console.log(values)
  }}
  help={<Tooltip title="提示文案提示文案">
    <Icon type="question-circle" />
  </Tooltip>}
  service={{
    queryUsers: () =>
      Promise.resolve(
        new Array(200).fill(0).map((_, i) => ({
          uuid: '01b038f151ef4dd5a3509b0aaee01042' + i,
          username: 'wxf' + i,
          nickname: '用户——' + i,
        }))
      ),
    queryRole: () =>
      Promise.resolve(
        new Array(3).fill(0).map((_, i) => ({
          uuid: '025d20ffaf46466d993ed28100d8d17d1' + i,
          code: '普通用户' + i,
          name: '角色' + i,
          orgUuid: 'a8202aea546f48979754bdd45c471b08',
          type: 'default',
        }))
      ),
    countUsers: () => Promise.resolve(24),
  }}
  disableRole={false}
/>
```

### Using props to customize the text

Modify the text to see it change live:

```js live
<AssignUserModal
  visible={false}
  value={{ users: ['wxf1', 'wxf3'] }}
  onSubmit={(values) => {
    console.log(values)
  }}
  help={<Tooltip title="提示文案提示文案">
    <Icon type="question-circle" />
  </Tooltip>}
  service={{
    queryUsers: () =>
      Promise.resolve(
        new Array(200).fill(0).map((_, i) => ({
          uuid: '01b038f151ef4dd5a3509b0aaee01042' + i,
          username: 'wxf' + i,
          nickname: '用户——' + i,
        }))
      ),
    queryRole: () =>
      Promise.resolve(
        new Array(3).fill(0).map((_, i) => ({
          uuid: '025d20ffaf46466d993ed28100d8d17d1' + i,
          code: '普通用户' + i,
          name: '角色' + i,
          orgUuid: 'a8202aea546f48979754bdd45c471b08',
          type: 'default',
        }))
      ),
    countUsers: () => Promise.resolve(24),
  }}
  disableRole={false}
/>
```