FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Optimize role

Browse Source
This commit is contained in:
Fat Snake
2023-11-14 18:09:19 +08:00
parent 8a97fa375a
commit 3c492fc824
6 changed files with 111 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/svg/delete.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" version="1.1"><path d="M885.333333 266.666667H768v-64C768 149.738667 725.290667 106.666667 672.746667 106.666667H352A96.106667 96.106667 0 0 0 256 202.666667v64H138.666667c-17.706667 0-32 14.293333-32 32s14.293333 32 32 32h746.666666c17.706667 0 32-14.293333 32-32s-14.293333-32-32-32zM320 202.666667c0-17.621333 14.378667-32 32-32h320.746667C690.24 170.666667 704 184.725333 704 202.666667v64H320v-64zM736.128 917.333333H288.064a96.128 96.128 0 0 1-96-96l1.194667-384a32 32 0 0 1 64 0l-1.194667 384c0 17.664 14.378667 32 32 32h448.064a32 32 0 0 0 32-32l-0.234667-384a32 32 0 1 1 64 0l0.234667 384c0 52.928-43.072 96-96 96z" /><path d="M384 469.333333m32 0l0 0q32 0 32 32l0 192q0 32-32 32l0 0q-32 0-32-32l0-192q0-32 32-32Z" /><path d="M576 469.333333m32 0l0 0q32 0 32 32l0 192q0 32-32 32l0 0q-32 0-32-32l0-192q0-32 32-32Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 895 B

6
src/global.d.ts vendored
View File

@@ -134,12 +134,16 @@ interface RoleVo {
id: string
name: string
enable: boolean
createTime: string
updateTime: string
}
interface GroupVo {
id: string
name: string
enable: boolean
createTime: string
updateTime: string
}
interface LoginForm {
@@ -204,6 +208,8 @@ interface RoleWithPowerGetVo {
id: string
name: string
enable: string
createTime: string
updateTime: string
modules: ModuleVo[]
menus: MenuVo[]
elements: ElementVo[]

88
src/pages/system/Role.tsx
View File

@@ -9,7 +9,8 @@ import {
r_power_get,
r_role_get,
r_role_update,
r_role_delete
r_role_delete,
r_role_delete_list
} from '@/services/system.tsx'
import {
COLOR_ERROR_SECONDARY,
@@ -20,9 +21,9 @@ import {
DATABASE_INSERT_SUCCESS,
DATABASE_SELECT_SUCCESS,
DATABASE_UPDATE_SUCCESS
} from '@/constants/common.constants.ts'
} from '@/constants/common.constants'
import Icon from '@ant-design/icons'
import { powerListToPowerTree } from '@/utils/common.ts'
import { getLocalTime, powerListToPowerTree } from '@/utils/common'
const Role: React.FC = () => {
const [modal, contextHolder] = AntdModal.useModal()
@@ -47,17 +48,33 @@ const Role: React.FC = () => {
const [powerTreeData, setPowerTreeData] = useState<_DataNode[]>([])
const [isLoadingPower, setIsLoadingPower] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false)
const [tableSelectedItem, setTableSelectedItem] = useState<React.Key[]>([])
const dataColumns: _ColumnsType<RoleWithPowerGetVo> = [
{
title: '名称',
dataIndex: 'name',
width: '20%'
width: '15%'
},
{
title: '权限',
dataIndex: 'tree',
render: (value: _DataNode[]) => <AntdTree treeData={value} />
render: (value: _DataNode[]) =>
value.length ? <AntdTree treeData={value} /> : <AntdTag>无</AntdTag>
},
{
title: '创建时间',
dataIndex: 'createTime',
width: '0',
align: 'center',
render: (value: string) => getLocalTime(value)
},
{
title: '修改时间',
dataIndex: 'updateTime',
width: '0',
align: 'center',
render: (value: string) => getLocalTime(value)
},
{
title: '状态',
@@ -133,6 +150,10 @@ const Role: React.FC = () => {
}
}
const handleOnTableSelectChange = (selectedRowKeys: React.Key[]) => {
setTableSelectedItem(selectedRowKeys)
}
const handleOnAddBtnClick = () => {
setIsDrawerEdit(false)
setIsDrawerOpen(true)
@@ -142,6 +163,27 @@ const Role: React.FC = () => {
form.setFieldValue('enable', newFormValues?.enable ?? true)
}
const handleOnListDeleteBtnClick = () => {
setIsLoading(true)
void r_role_delete_list(tableSelectedItem)
.then((res) => {
const data = res.data
if (data.code === DATABASE_DELETE_SUCCESS) {
void message.success('删除成功')
setTimeout(() => {
getRole()
})
} else {
void message.error('删除失败，请稍后重试')
}
})
.finally(() => {
setIsLoading(false)
})
}
const handleOnEditBtnClick = (value: RoleWithPowerGetVo) => {
return () => {
setIsDrawerEdit(true)
@@ -167,19 +209,22 @@ const Role: React.FC = () => {
.then(
(confirmed) => {
if (confirmed) {
setIsSubmitting(true)
r_role_delete(value.id)
setIsLoading(true)
void r_role_delete(value.id)
.then((res) => {
const data = res.data
if (data.code === DATABASE_DELETE_SUCCESS) {
void message.success('删除成功')
getRole()
setTimeout(() => {
getRole()
})
} else {
void message.error('删除失败，请稍后重试')
}
})
.finally(() => {
setIsSubmitting(false)
setIsLoading(false)
})
}
},
@@ -293,7 +338,10 @@ const Role: React.FC = () => {
.then((res) => {
const data = res.data
if (data.code === DATABASE_UPDATE_SUCCESS) {
getRole()
void message.success('更新成功')
setTimeout(() => {
getRole()
})
} else {
void message.error('更新失败，请稍后重试')
}
@@ -445,7 +493,21 @@ const Role: React.FC = () => {
>
<Icon
component={IconFatwebPlus}
style={{ fontSize: '1.5em' }}
style={{ fontSize: '1.2em' }}
/>
</AntdButton>
</Card>
<Card
hidden={tableSelectedItem.length === 0}
style={{ overflow: 'inherit', flex: '0 0 auto' }}
>
<AntdButton
style={{ padding: '4px 8px' }}
onClick={handleOnListDeleteBtnClick}
>
<Icon
component={IconFatwebDelete}
style={{ fontSize: '1.2em' }}
/>
</AntdButton>
</Card>
@@ -497,6 +559,10 @@ const Role: React.FC = () => {
pagination={tableParams.pagination}
loading={isLoading}
onChange={handleOnTableChange}
rowSelection={{
type: 'checkbox',
onChange: handleOnTableSelectChange
}}
/>
</Card>
</FlexBox>

2
src/services/index.tsx
View File

@@ -122,7 +122,7 @@ const request = {
return await request.request('PATCH', url, { data })
},
async delete<T>(url: string, data?: object): Promise<AxiosResponse<_Response<T>>> {
return await request.request('DELETE', url, { params: data })
return await request.request('DELETE', url, { data })
},
async request<T>(
method = 'GET',

3
src/services/system.tsx
View File

@@ -1,3 +1,4 @@
import React from 'react'
import request from '@/services/index'
import { URL_API_SYS_LOG, URL_API_SYS_POWER, URL_API_SYS_ROLE } from '@/constants/urls.constants'
@@ -19,4 +20,4 @@ export const r_role_update = (param: RoleAddEditParam) =>
export const r_role_delete = (id: string) => request.delete(`${URL_API_SYS_ROLE}/${id}`)
export const r_role_delete_list = (ids: string[]) => request.delete(URL_API_SYS_ROLE, { ids })
export const r_role_delete_list = (ids: React.Key[]) => request.delete(URL_API_SYS_ROLE, { ids })

24
src/utils/common.ts → src/utils/common.tsx
View File

@@ -1,5 +1,7 @@
import { STORAGE_TOKEN_KEY, STORAGE_USER_INFO_KEY } from '@/constants/common.constants'
import moment from 'moment'
import ReactDOM from 'react-dom/client'
import LoadingMask from '@/components/common/LoadingMask.tsx'
export const getQueryVariable = (variable: string) => {
const query = window.location.search.substring(1)
@@ -270,3 +272,25 @@ export const powerListToPowerTree = (
})
}))
}
export const showLoadingMask = (id: string) => {
if (document.querySelector(`#${id}`)) {
return
}
const container = document.createElement('div')
document.body.appendChild(container)
container.id = id
container.setAttribute(
'style',
'position: fixed; width: 100vw; height: 100vh; z-index: 10000; left: 0; top: 0;'
)
return ReactDOM.createRoot(container).render(<LoadingMask />)
}
export const removeLoadingMask = (id: string) => {
document.querySelectorAll(`#${id}`).forEach((value) => {
value.parentNode?.removeChild(value)
})
}