Add permission control to element

This commit is contained in:
2023-12-01 16:20:30 +08:00
parent 0bcadab98c
commit 406c362f84
9 changed files with 211 additions and 123 deletions

View File

@@ -28,13 +28,15 @@ const Login: React.FC = () => {
setToken(data?.token ?? '')
void messageApi.success('登录成功')
setTimeout(() => {
if (searchParams.has('redirect')) {
navigate(searchParams.get('redirect') ?? '/')
} else {
navigate('/')
}
void getUserInfo().then((user) => {
refreshRouter()
if (searchParams.has('redirect')) {
navigate(searchParams.get('redirect') ?? '/')
} else {
navigate('/')
}
notification.success({
message: '欢迎回来',
description: (

View File

@@ -1,7 +1,7 @@
import React from 'react'
import '@/assets/css/pages/tools-framework.scss'
import user from '@/router/user'
import { hasPathPermission } from '@/util/route'
import { hasPathPermission } from '@/util/auth'
import FitFullScreen from '@/components/common/FitFullScreen'
import Sidebar from '@/components/common/sidebar'
import SidebarItemList from '@/components/common/sidebar/SidebarItemList'

View File

@@ -11,6 +11,7 @@ import {
DATABASE_UPDATE_SUCCESS
} from '@/constants/common.constants'
import { useUpdatedEffect } from '@/util/hooks'
import { hasPermission } from '@/util/auth'
import { utcToLocalTime } from '@/util/datetime'
import {
r_sys_group_add,
@@ -21,6 +22,7 @@ import {
r_sys_group_update,
r_sys_role_get_list
} from '@/services/system'
import Permission from '@/components/common/Permission'
import FitFullScreen from '@/components/common/FitFullScreen'
import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
@@ -105,33 +107,39 @@ const Group: React.FC = () => {
render: (value, record) => (
<>
<AntdSpace size={'middle'}>
{value ? (
<Permission operationCode={'system:group:modify:status'}>
{value ? (
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnChangStatusBtnClick(record.id, false)}
>
</a>
) : (
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnChangStatusBtnClick(record.id, true)}
>
</a>
)}
</Permission>
<Permission operationCode={'system:group:modify:one'}>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnChangStatusBtnClick(record.id, false)}
onClick={handleOnEditBtnClick(record)}
>
</a>
) : (
</Permission>
<Permission operationCode={'system:group:delete:one'}>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnChangStatusBtnClick(record.id, true)}
onClick={handleOnDeleteBtnClick(record)}
>
</a>
)}
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnEditBtnClick(record)}
>
</a>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnDeleteBtnClick(record)}
>
</a>
</Permission>
</AntdSpace>
</>
)
@@ -488,15 +496,17 @@ const Group: React.FC = () => {
const toolbar = (
<FlexBox direction={'horizontal'} gap={10}>
<Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
<AntdButton
type={'primary'}
style={{ padding: '4px 8px' }}
onClick={handleOnAddBtnClick}
>
<Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
</AntdButton>
</Card>
<Permission operationCode={'system:group:add:one'}>
<Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
<AntdButton
type={'primary'}
style={{ padding: '4px 8px' }}
onClick={handleOnAddBtnClick}
>
<Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
</AntdButton>
</Card>
</Permission>
<Card
hidden={tableSelectedItem.length === 0}
style={{ overflow: 'inherit', flex: '0 0 auto' }}
@@ -551,10 +561,14 @@ const Group: React.FC = () => {
pagination={tableParams.pagination}
loading={isLoading}
onChange={handleOnTableChange}
rowSelection={{
type: 'checkbox',
onChange: handleOnTableSelectChange
}}
rowSelection={
hasPermission('system:group:delete:multiple')
? {
type: 'checkbox',
onChange: handleOnTableSelectChange
}
: undefined
}
/>
</Card>
)

View File

@@ -12,7 +12,7 @@ import {
} from '@/constants/common.constants'
import { useUpdatedEffect } from '@/util/hooks'
import { utcToLocalTime } from '@/util/datetime'
import { powerListToPowerTree } from '@/util/auth.tsx'
import { hasPermission, powerListToPowerTree } from '@/util/auth'
import {
r_sys_role_add,
r_sys_role_change_status,
@@ -22,6 +22,7 @@ import {
r_sys_role_delete,
r_sys_role_delete_list
} from '@/services/system'
import Permission from '@/components/common/Permission'
import FitFullScreen from '@/components/common/FitFullScreen'
import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
@@ -98,33 +99,39 @@ const Role: React.FC = () => {
render: (value, record) => (
<>
<AntdSpace size={'middle'}>
{value ? (
<Permission operationCode={'system:role:modify:status'}>
{value ? (
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnChangStatusBtnClick(record.id, false)}
>
</a>
) : (
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnChangStatusBtnClick(record.id, true)}
>
</a>
)}
</Permission>
<Permission operationCode={'system:role:modify:one'}>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnChangStatusBtnClick(record.id, false)}
onClick={handleOnEditBtnClick(record)}
>
</a>
) : (
</Permission>
<Permission operationCode={'system:role:delete:one'}>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnChangStatusBtnClick(record.id, true)}
onClick={handleOnDeleteBtnClick(record)}
>
</a>
)}
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnEditBtnClick(record)}
>
</a>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnDeleteBtnClick(record)}
>
</a>
</Permission>
</AntdSpace>
</>
)
@@ -498,15 +505,17 @@ const Role: React.FC = () => {
const toolbar = (
<FlexBox direction={'horizontal'} gap={10}>
<Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
<AntdButton
type={'primary'}
style={{ padding: '4px 8px' }}
onClick={handleOnAddBtnClick}
>
<Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
</AntdButton>
</Card>
<Permission operationCode={'system:role:add:one'}>
<Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
<AntdButton
type={'primary'}
style={{ padding: '4px 8px' }}
onClick={handleOnAddBtnClick}
>
<Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
</AntdButton>
</Card>
</Permission>
<Card
hidden={tableSelectedItem.length === 0}
style={{ overflow: 'inherit', flex: '0 0 auto' }}
@@ -561,10 +570,14 @@ const Role: React.FC = () => {
pagination={tableParams.pagination}
loading={isLoading}
onChange={handleOnTableChange}
rowSelection={{
type: 'checkbox',
onChange: handleOnTableSelectChange
}}
rowSelection={
hasPermission('system:role:delete:multiple')
? {
type: 'checkbox',
onChange: handleOnTableSelectChange
}
: undefined
}
/>
</Card>
)

View File

@@ -12,6 +12,7 @@ import {
DATABASE_UPDATE_SUCCESS
} from '@/constants/common.constants'
import { useUpdatedEffect } from '@/util/hooks'
import { hasPermission } from '@/util/auth'
import { utcToLocalTime, isPastTime, localTimeToUtc, dayjsToUtc, getNowUtc } from '@/util/datetime'
import {
r_sys_group_get_list,
@@ -23,6 +24,7 @@ import {
r_sys_user_get,
r_sys_user_update
} from '@/services/system'
import Permission from '@/components/common/Permission'
import { r_api_avatar_random_base64 } from '@/services/api/avatar'
import FitFullScreen from '@/components/common/FitFullScreen'
import HideScrollbar from '@/components/common/HideScrollbar'
@@ -188,26 +190,32 @@ const User: React.FC = () => {
render: (_, record) => (
<>
<AntdSpace size={'middle'}>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnChangePasswordBtnClick(record)}
>
</a>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnEditBtnClick(record)}
>
</a>
{record.id !== '0' ? (
<Permission operationCode={'system:user:modify:password'}>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnDeleteBtnClick(record)}
onClick={handleOnChangePasswordBtnClick(record)}
>
</a>
) : undefined}
</Permission>
<Permission operationCode={'system:user:modify:one'}>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnEditBtnClick(record)}
>
</a>
</Permission>
<Permission operationCode={'system:user:delete:one'}>
{record.id !== '0' ? (
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnDeleteBtnClick(record)}
>
</a>
) : undefined}
</Permission>
</AntdSpace>
</>
)
@@ -393,6 +401,7 @@ const User: React.FC = () => {
}).then((res) => {
const response = res.data
if (response.success) {
void message.success('修改密码成功')
resolve(true)
} else {
reject(response.msg)
@@ -884,15 +893,17 @@ const User: React.FC = () => {
const toolbar = (
<FlexBox direction={'horizontal'} gap={10}>
<Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
<AntdButton
type={'primary'}
style={{ padding: '4px 8px' }}
onClick={handleOnAddBtnClick}
>
<Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
</AntdButton>
</Card>
<Permission operationCode={'system:user:add:one'}>
<Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
<AntdButton
type={'primary'}
style={{ padding: '4px 8px' }}
onClick={handleOnAddBtnClick}
>
<Icon component={IconFatwebPlus} style={{ fontSize: '1.2em' }} />
</AntdButton>
</Card>
</Permission>
<Card
hidden={tableSelectedItem.length === 0}
style={{ overflow: 'inherit', flex: '0 0 auto' }}
@@ -951,11 +962,15 @@ const User: React.FC = () => {
pagination={tableParams.pagination}
loading={isLoadingUserData}
onChange={handleOnTableChange}
rowSelection={{
type: 'checkbox',
onChange: handleOnTableSelectChange,
getCheckboxProps: (record) => ({ disabled: record.id === '0' })
}}
rowSelection={
hasPermission('system:user:delete:multiple')
? {
type: 'checkbox',
onChange: handleOnTableSelectChange,
getCheckboxProps: (record) => ({ disabled: record.id === '0' })
}
: undefined
}
/>
</Card>
)