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

Finish group page

Browse Source
This commit is contained in:
Fat Snake
2023-11-15 18:08:47 +08:00
parent 0e602224cb
commit 326c808622
6 changed files with 717 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

633
src/pages/system/Group.tsx
View File

@@ -1,7 +1,636 @@
import React from 'react'
import React, { useEffect, useState } from 'react'
import FitFullScreen from '@/components/common/FitFullScreen.tsx'
import HideScrollbar from '@/components/common/HideScrollbar.tsx'
import FlexBox from '@/components/common/FlexBox.tsx'
import Icon from '@ant-design/icons'
import Card from '@/components/common/Card.tsx'
import {
COLOR_ERROR_SECONDARY,
COLOR_FONT_SECONDARY,
COLOR_PRODUCTION,
DATABASE_DELETE_SUCCESS,
DATABASE_DUPLICATE_KEY,
DATABASE_INSERT_SUCCESS,
DATABASE_SELECT_SUCCESS,
DATABASE_UPDATE_SUCCESS
} from '@/constants/common.constants.ts'
import { getLocalTime } from '@/utils/common.tsx'
import {
r_sys_group_add,
r_sys_group_change_status,
r_sys_group_delete,
r_sys_group_delete_list,
r_sys_group_get,
r_sys_group_update,
r_sys_role_get_list
} from '@/services/system.tsx'
const Group: React.FC = () => {
return <></>
const [modal, contextHolder] = AntdModal.useModal()
const [form] = AntdForm.useForm<GroupAddEditParam>()
const formValues = AntdForm.useWatch([], form)
const [newFormValues, setNewFormValues] = useState<GroupAddEditParam>()
const [groupData, setGroupData] = useState<GroupWithRoleGetVo[]>([])
const [isLoading, setIsLoading] = useState(false)
const [tableParams, setTableParams] = useState<TableParam>({
pagination: {
current: 1,
pageSize: 20,
position: ['bottomCenter']
}
})
const [searchName, setSearchName] = useState('')
const [isUseRegex, setIsUseRegex] = useState(false)
const [isRegexLegal, setIsRegexLegal] = useState(true)
const [isDrawerOpen, setIsDrawerOpen] = useState(false)
const [isDrawerEdit, setIsDrawerEdit] = useState(false)
const [submittable, setSubmittable] = useState(false)
const [roleData, setRoleData] = useState<RoleVo[]>([])
const [isLoadingRole, setIsLoadingRole] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false)
const [tableSelectedItem, setTableSelectedItem] = useState<React.Key[]>([])
const dataColumns: _ColumnsType<GroupWithRoleGetVo> = [
{
title: '名称',
dataIndex: 'name',
width: '15%'
},
{
title: '角色',
dataIndex: 'roles',
render: (value: RoleVo[]) =>
value.length ? (
value.map((role) => (
<AntdTag key={role.id} color={role.enable ? 'purple' : 'orange'}>
{role.name}
</AntdTag>
))
) : (
<AntdTag>无</AntdTag>
)
},
{
title: '创建时间',
dataIndex: 'createTime',
width: '10%',
align: 'center',
render: (value: string) => getLocalTime(value)
},
{
title: '修改时间',
dataIndex: 'updateTime',
width: '10%',
align: 'center',
render: (value: string) => getLocalTime(value)
},
{
title: '状态',
dataIndex: 'enable',
width: '5%',
align: 'center',
render: (value) =>
value ? <AntdTag color={'success'}>启用</AntdTag> : <AntdTag>禁用</AntdTag>
},
{
title: '操作',
dataIndex: 'enable',
width: '15em',
align: 'center',
render: (value, record) => (
<>
<AntdSpace size={'middle'}>
{value ? (
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnChangStatusBtnClick(record.id, false)}
>
禁用
</a>
) : (
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnChangStatusBtnClick(record.id, true)}
>
启用
</a>
)}
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnEditBtnClick(record)}
>
编辑
</a>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnDeleteBtnClick(record)}
>
删除
</a>
</AntdSpace>
</>
)
}
]
const handleOnTableChange = (
pagination: _TablePaginationConfig,
filters: Record<string, _FilterValue | null>,
sorter: _SorterResult<GroupWithRoleGetVo> | _SorterResult<GroupWithRoleGetVo>[]
) => {
if (Array.isArray(sorter)) {
setTableParams({
pagination,
filters,
sortField: sorter.map((value) => value.field).join(',')
})
} else {
setTableParams({
pagination,
filters,
sortField: sorter.field,
sortOrder: sorter.order
})
}
if (pagination.pageSize !== tableParams.pagination?.pageSize) {
setGroupData([])
}
}
const handleOnTableSelectChange = (selectedRowKeys: React.Key[]) => {
setTableSelectedItem(selectedRowKeys)
}
const handleOnAddBtnClick = () => {
setIsDrawerEdit(false)
setIsDrawerOpen(true)
form.setFieldValue('id', undefined)
form.setFieldValue('name', newFormValues?.name)
form.setFieldValue('roleIds', newFormValues?.roleIds)
form.setFieldValue('enable', newFormValues?.enable ?? true)
}
const handleOnListDeleteBtnClick = () => {
modal
.confirm({
title: '确定删除',
content: `确定删除选中的 ${tableSelectedItem.length} 个用户组吗？`
})
.then(
(confirmed) => {
if (confirmed) {
setIsLoading(true)
void r_sys_group_delete_list(tableSelectedItem)
.then((res) => {
const data = res.data
if (data.code === DATABASE_DELETE_SUCCESS) {
void message.success('删除成功')
setTimeout(() => {
getGroup()
})
} else {
void message.error('删除失败，请稍后重试')
}
})
.finally(() => {
setIsLoading(false)
})
}
},
() => {}
)
}
const handleOnEditBtnClick = (value: GroupWithRoleGetVo) => {
return () => {
setIsDrawerEdit(true)
setIsDrawerOpen(true)
form.setFieldValue('id', value.id)
form.setFieldValue('name', value.name)
form.setFieldValue(
'roleIds',
value.roles.map((role) => role.id)
)
form.setFieldValue('enable', value.enable)
void form.validateFields()
}
}
const handleOnDeleteBtnClick = (value: GroupWithRoleGetVo) => {
return () => {
modal
.confirm({
title: '确定删除',
content: `确定删除角色 ${value.name} 吗？`
})
.then(
(confirmed) => {
if (confirmed) {
setIsLoading(true)
void r_sys_group_delete(value.id)
.then((res) => {
const data = res.data
if (data.code === DATABASE_DELETE_SUCCESS) {
void message.success('删除成功')
setTimeout(() => {
getGroup()
})
} else {
void message.error('删除失败，请稍后重试')
}
})
.finally(() => {
setIsLoading(false)
})
}
},
() => {}
)
}
}
const handleOnDrawerClose = () => {
setIsDrawerOpen(false)
}
const handleOnSubmit = () => {
if (isSubmitting) {
return
}
setIsSubmitting(true)
if (isDrawerEdit) {
void r_sys_group_update(formValues)
.then((res) => {
const data = res.data
switch (data.code) {
case DATABASE_UPDATE_SUCCESS:
setIsDrawerOpen(false)
void message.success('更新成功')
getGroup()
break
case DATABASE_DUPLICATE_KEY:
void message.error('已存在相同名称的角色')
break
default:
void message.error('更新失败，请稍后重试')
}
})
.finally(() => {
setIsSubmitting(false)
})
} else {
void r_sys_group_add(formValues)
.then((res) => {
const data = res.data
switch (data.code) {
case DATABASE_INSERT_SUCCESS:
setIsDrawerOpen(false)
void message.success('添加成功')
setNewFormValues(undefined)
getGroup()
break
case DATABASE_DUPLICATE_KEY:
void message.error('已存在相同名称的角色')
break
default:
void message.error('添加失败，请稍后重试')
}
})
.finally(() => {
setIsSubmitting(false)
})
}
}
const handleOnSearchNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchName(e.target.value)
if (isUseRegex) {
try {
RegExp(e.target.value)
setIsRegexLegal(!(e.target.value.includes('{}') || e.target.value.includes('[]')))
} catch (e) {
setIsRegexLegal(false)
}
} else {
setIsRegexLegal(true)
}
}
const handleOnSearchNameKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
getGroup()
}
}
const handleOnUseRegexChange = (e: _CheckboxChangeEvent) => {
setIsUseRegex(e.target.checked)
if (e.target.checked) {
try {
RegExp(searchName)
setIsRegexLegal(!(searchName.includes('{}') || searchName.includes('[]')))
} catch (e) {
setIsRegexLegal(false)
}
} else {
setIsRegexLegal(true)
}
}
const handleOnQueryBtnClick = () => {
getGroup()
}
const handleOnChangStatusBtnClick = (id: string, newStatus: boolean) => {
return () => {
if (isLoading) {
return
}
setIsLoading(true)
void r_sys_group_change_status({ id, enable: newStatus })
.then((res) => {
const data = res.data
if (data.code === DATABASE_UPDATE_SUCCESS) {
void message.success('更新成功')
setTimeout(() => {
getGroup()
})
} else {
void message.error('更新失败，请稍后重试')
}
})
.finally(() => {
setIsLoading(false)
})
}
}
const getGroup = () => {
if (isLoading) {
return
}
if (!isRegexLegal) {
void message.error('非法正则表达式')
return
}
setIsLoading(true)
void r_sys_group_get({
currentPage: tableParams.pagination?.current,
pageSize: tableParams.pagination?.pageSize,
sortField:
tableParams.sortField && tableParams.sortOrder
? (tableParams.sortField as string)
: undefined,
sortOrder:
tableParams.sortField && tableParams.sortOrder ? tableParams.sortOrder : undefined,
searchName: searchName.trim().length ? searchName : undefined,
searchRegex: isUseRegex ? isUseRegex : undefined,
...tableParams.filters
})
.then((res) => {
const data = res.data
if (data.code === DATABASE_SELECT_SUCCESS) {
const records = data.data?.records
records && setGroupData(records)
data.data &&
setTableParams({
...tableParams,
pagination: {
...tableParams.pagination,
total: data.data.total
}
})
} else {
void message.error('获取失败，请稍后重试')
}
})
.finally(() => {
setIsLoading(false)
})
}
const getRoleData = () => {
if (isLoadingRole) {
return
}
setIsLoadingRole(true)
void r_sys_role_get_list()
.then((res) => {
const data = res.data
if (data.code === DATABASE_SELECT_SUCCESS) {
data.data && setRoleData(data.data)
} else {
void message.error('获取角色列表失败，请稍后重试')
}
})
.finally(() => {
setIsLoadingRole(false)
})
}
useEffect(() => {
form.validateFields({ validateOnly: true }).then(
() => {
setSubmittable(true)
},
() => {
setSubmittable(false)
}
)
if (!isDrawerEdit && formValues) {
setNewFormValues({
name: formValues.name,
roleIds: formValues.roleIds,
enable: formValues.enable
})
}
}, [formValues])
useEffect(() => {
getRoleData()
}, [])
useEffect(() => {
getGroup()
}, [
JSON.stringify(tableParams.filters),
JSON.stringify(tableParams.sortField),
JSON.stringify(tableParams.sortOrder),
JSON.stringify(tableParams.pagination?.pageSize),
JSON.stringify(tableParams.pagination?.current)
])
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>
<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>
<Card style={{ overflow: 'inherit' }}>
<AntdInput
addonBefore={
<span
style={{
fontSize: '0.9em',
color: COLOR_FONT_SECONDARY
}}
>
名称
</span>
}
suffix={
<>
{!isRegexLegal ? (
<span style={{ color: COLOR_ERROR_SECONDARY }}>非法表达式</span>
) : undefined}
<AntdCheckbox checked={isUseRegex} onChange={handleOnUseRegexChange}>
<AntdTooltip title={'正则表达式'}>.*</AntdTooltip>
</AntdCheckbox>
</>
}
allowClear
value={searchName}
onChange={handleOnSearchNameChange}
onKeyDown={handleOnSearchNameKeyDown}
status={isRegexLegal ? undefined : 'error'}
/>
</Card>
<Card style={{ overflow: 'inherit', flex: '0 0 auto' }}>
<AntdButton onClick={handleOnQueryBtnClick} type={'primary'}>
查询
</AntdButton>
</Card>
</FlexBox>
)
const table = (
<Card>
<AntdTable
dataSource={groupData}
columns={dataColumns}
rowKey={(record) => record.id}
pagination={tableParams.pagination}
loading={isLoading}
onChange={handleOnTableChange}
rowSelection={{
type: 'checkbox',
onChange: handleOnTableSelectChange
}}
/>
</Card>
)
const drawerToolbar = (
<AntdSpace>
<AntdTooltip title={'刷新角色列表'}>
<AntdButton onClick={getRoleData} disabled={isSubmitting}>
<Icon component={IconFatwebRefresh} />
</AntdButton>
</AntdTooltip>
<AntdButton onClick={handleOnDrawerClose} disabled={isSubmitting}>
取消
</AntdButton>
<AntdButton
type={'primary'}
disabled={!submittable}
loading={isSubmitting}
onClick={handleOnSubmit}
>
提交
</AntdButton>
</AntdSpace>
)
const addAndEditForm = (
<AntdForm form={form} disabled={isSubmitting}>
<AntdForm.Item hidden={!isDrawerEdit} name={'id'} label={'ID'}>
<AntdInput disabled />
</AntdForm.Item>
<AntdForm.Item
name={'name'}
label={'名称'}
rules={[{ required: true, whitespace: false }]}
>
<AntdInput allowClear />
</AntdForm.Item>
<AntdForm.Item name={'roleIds'} label={'角色'}>
<AntdSelect
mode={'multiple'}
allowClear
showSearch
options={roleData.map((value) => ({
value: value.id,
label: `${value.name}${!value.enable ? '(已禁用)' : ''}`
}))}
/>
</AntdForm.Item>
<AntdForm.Item
valuePropName={'checked'}
name={'enable'}
label={'启用'}
rules={[{ required: true, type: 'boolean' }]}
>
<AntdSwitch />
</AntdForm.Item>
</AntdForm>
)
return (
<>
<FitFullScreen>
<HideScrollbar
style={{ padding: 30 }}
isShowVerticalScrollbar
autoHideWaitingTime={500}
>
<FlexBox gap={20}>
{toolbar}
{table}
</FlexBox>
</HideScrollbar>
</FitFullScreen>
<AntdDrawer
title={isDrawerEdit ? '编辑用户组' : '添加用户组'}
width={'36vw'}
onClose={handleOnDrawerClose}
open={isDrawerOpen}
closable={!isSubmitting}
maskClosable={!isSubmitting}
extra={drawerToolbar}
>
{addAndEditForm}
</AntdDrawer>
{contextHolder}
</>
)
}
export default Group

4
src/pages/system/Log.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react'
import FitFullScreen from '@/components/common/FitFullScreen'
import Card from '@/components/common/Card'
import { r_sysLog_get } from '@/services/system'
import { r_sys_log_get } from '@/services/system'
import {
COLOR_ERROR_SECONDARY,
COLOR_FONT_SECONDARY,
@@ -215,7 +215,7 @@ const Log: React.FC = () => {
setLoading(true)
void r_sysLog_get({
void r_sys_log_get({
currentPage: tableParams.pagination?.current,
pageSize: tableParams.pagination?.pageSize,
sortField:

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

@@ -4,13 +4,13 @@ import HideScrollbar from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
import Card from '@/components/common/Card'
import {
r_role_add,
r_role_changStatus,
r_power_get,
r_role_get,
r_role_update,
r_role_delete,
r_role_delete_list
r_sys_role_add,
r_sys_role_change_status,
r_sys_power_get_list,
r_sys_role_get,
r_sys_role_update,
r_sys_role_delete,
r_sys_role_delete_list
} from '@/services/system'
import {
COLOR_ERROR_SECONDARY,
@@ -174,7 +174,7 @@ const Role: React.FC = () => {
if (confirmed) {
setIsLoading(true)
void r_role_delete_list(tableSelectedItem)
void r_sys_role_delete_list(tableSelectedItem)
.then((res) => {
const data = res.data
@@ -223,7 +223,7 @@ const Role: React.FC = () => {
if (confirmed) {
setIsLoading(true)
void r_role_delete(value.id)
void r_sys_role_delete(value.id)
.then((res) => {
const data = res.data
if (data.code === DATABASE_DELETE_SUCCESS) {
@@ -257,7 +257,7 @@ const Role: React.FC = () => {
setIsSubmitting(true)
if (isDrawerEdit) {
void r_role_update(formValues)
void r_sys_role_update(formValues)
.then((res) => {
const data = res.data
switch (data.code) {
@@ -277,7 +277,7 @@ const Role: React.FC = () => {
setIsSubmitting(false)
})
} else {
void r_role_add(formValues)
void r_sys_role_add(formValues)
.then((res) => {
const data = res.data
switch (data.code) {
@@ -346,7 +346,7 @@ const Role: React.FC = () => {
}
setIsLoading(true)
void r_role_changStatus({ id, enable: newStatus })
void r_sys_role_change_status({ id, enable: newStatus })
.then((res) => {
const data = res.data
if (data.code === DATABASE_UPDATE_SUCCESS) {
@@ -376,7 +376,7 @@ const Role: React.FC = () => {
setIsLoading(true)
void r_role_get({
void r_sys_role_get({
currentPage: tableParams.pagination?.current,
pageSize: tableParams.pagination?.pageSize,
sortField:
@@ -430,7 +430,7 @@ const Role: React.FC = () => {
setIsLoadingPower(true)
void r_power_get()
void r_sys_power_get_list()
.then((res) => {
const data = res.data