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

Add tool category management page

Browse Source
This commit is contained in:
Fat Snake
2024-01-18 14:13:53 +08:00
parent b738634eff
commit c460e2c4cf
12 changed files with 482 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/constants/urls.constants.ts
View File

@@ -25,6 +25,10 @@ export const URL_SYS_STATISTICS_CPU = `${URL_SYS_STATISTICS}/cpu`
export const URL_SYS_STATISTICS_STORAGE = `${URL_SYS_STATISTICS}/storage`
export const URL_SYS_STATISTICS_ONLINE = `${URL_SYS_STATISTICS}/online`
export const URL_SYS_STATISTICS_ACTIVE = `${URL_SYS_STATISTICS}/active`
export const URL_SYS_TOOL = '/system/tool'
export const URL_SYS_TOOL_CATEGORY = `${URL_SYS_TOOL}/category`
export const URL_SYS_TOOL_BASE = `${URL_SYS_TOOL}/base`
export const URL_SYS_TOOL_TEMPLATE = `${URL_SYS_TOOL}/template`
export const URL_API_V1 = '/api/v1'
export const URL_API_V1_AVATAR_RANDOM_BASE64 = `${URL_API_V1}/avatar/base64`

60
src/global.d.ts vendored
View File

@@ -464,3 +464,63 @@ interface ActiveInfoVo {
interface ActiveInfoGetParam {
scope: string
}
interface ToolCategoryVo {
id: string
name: string
enable: boolean
createTime: string
updateTime: string
}
interface ToolCategoryAddEditParam {
id?: string
name: string
enable: string
}
interface ToolDataVo {
id: string
data: string
createTime: string
updateTime: string
}
interface ToolBaseVo {
id: string
name: string
source: ToolDataVo
dist: ToolDataVo
createTime: string
updateTime: string
}
interface ToolTemplateVo {
id: string
name: string
ver: string
baseId: string
source: ToolDataVo
dist: ToolDataVo
createTime: string
updateTime: string
}
interface ToolVo {
id: string
name: string
toolId: string
description: string
baseId: string
author: UserInfoVo
ver: string
privately: boolean
keywords: string[]
categories: ToolCategoryVo[]
source: ToolDataVo
dist: ToolDataVo
publish: boolean
review: number
createTime: string
updateTime: string
}

5
src/pages/System/Tools/Base.tsx Normal file
View File

@@ -0,0 +1,5 @@
const Base = () => {
return <>3</>
}
export default Base

316
src/pages/System/Tools/Category.tsx Normal file
View File

@@ -0,0 +1,316 @@
import {
COLOR_PRODUCTION,
DATABASE_DELETE_SUCCESS,
DATABASE_DUPLICATE_KEY,
DATABASE_INSERT_SUCCESS,
DATABASE_SELECT_SUCCESS,
DATABASE_UPDATE_SUCCESS
} from '@/constants/common.constants'
import { utcToLocalTime } from '@/util/datetime'
import {
r_sys_tool_category_add,
r_sys_tool_category_delete,
r_sys_tool_category_get,
r_sys_tool_category_update
} from '@/services/system'
import Card from '@/components/common/Card'
import Permission from '@/components/common/Permission'
import FitFullscreen from '@/components/common/FitFullscreen'
import HideScrollbar from '@/components/common/HideScrollbar'
const Category = () => {
const [modal, contextHolder] = AntdModal.useModal()
const [form] = AntdForm.useForm<ToolCategoryAddEditParam>()
const formValues = AntdForm.useWatch([], form)
const [newFormValues, setNewFormValues] = useState<ToolCategoryAddEditParam>()
const [categoryData, setCategoryData] = useState<ToolCategoryVo[]>([])
const [isLoading, setIsLoading] = useState(false)
const [isDrawerOpen, setIsDrawerOpen] = useState(false)
const [isDrawerEdit, setIsDrawerEdit] = useState(false)
const [submittable, setSubmittable] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false)
const handleOnAddBtnClick = () => {
setIsDrawerEdit(false)
setIsDrawerOpen(true)
form.setFieldValue('id', undefined)
form.setFieldValue('name', newFormValues?.name)
form.setFieldValue('enable', newFormValues?.enable ?? true)
}
const handleOnEditBtnClick = (value: ToolCategoryVo) => {
return () => {
setIsDrawerEdit(true)
setIsDrawerOpen(true)
form.setFieldValue('id', value.id)
form.setFieldValue('name', value.name)
form.setFieldValue('enable', value.enable)
void form.validateFields()
}
}
const categoryColumns: _ColumnsType<ToolCategoryVo> = [
{
title: 'ID',
dataIndex: 'id',
width: '15%'
},
{
title: '名称',
dataIndex: 'name'
},
{
title: '创建时间',
dataIndex: 'createTime',
width: '20%',
align: 'center',
render: (value: string) => utcToLocalTime(value)
},
{
title: '修改时间',
dataIndex: 'updateTime',
width: '20%',
align: 'center',
render: (value: string) => utcToLocalTime(value)
},
{
title: '状态',
dataIndex: 'enable',
width: '5%',
align: 'center',
render: (value) =>
value ? <AntdTag color={'success'}>启用</AntdTag> : <AntdTag>禁用</AntdTag>
},
{
title: (
<>
操作 (<a onClick={handleOnAddBtnClick}>新增</a>)
</>
),
dataIndex: 'enable',
width: '15em',
align: 'center',
render: (_, record) => (
<>
<AntdSpace size={'middle'}>
<Permission operationCode={'system:tool:modify:category'}>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnEditBtnClick(record)}
>
编辑
</a>
</Permission>
<Permission operationCode={'system:tool:delete:category'}>
<a
style={{ color: COLOR_PRODUCTION }}
onClick={handleOnDeleteBtnClick(record)}
>
删除
</a>
</Permission>
</AntdSpace>
</>
)
}
]
const handleOnDeleteBtnClick = (value: ToolCategoryVo) => {
return () => {
modal
.confirm({
title: '确定删除',
content: `确定删除类别 ${value.name} 吗？`
})
.then(
(confirmed) => {
if (confirmed) {
setIsLoading(true)
void r_sys_tool_category_delete(value.id)
.then((res) => {
const response = res.data
if (response.code === DATABASE_DELETE_SUCCESS) {
void message.success('删除成功')
setTimeout(() => {
getCategory()
})
} else {
void message.error('删除失败，请稍后重试')
}
})
.finally(() => {
setIsLoading(false)
})
}
},
() => {}
)
}
}
const handleOnDrawerClose = () => {
setIsDrawerOpen(false)
}
const handleOnSubmit = () => {
if (isSubmitting) {
return
}
setIsSubmitting(true)
if (isDrawerEdit) {
void r_sys_tool_category_update(formValues)
.then((res) => {
const response = res.data
switch (response.code) {
case DATABASE_UPDATE_SUCCESS:
setIsDrawerOpen(false)
void message.success('更新成功')
getCategory()
break
case DATABASE_DUPLICATE_KEY:
void message.error('已存在相同名称的类别')
break
default:
void message.error('更新失败，请稍后重试')
}
})
.finally(() => {
setIsSubmitting(false)
})
} else {
void r_sys_tool_category_add(formValues)
.then((res) => {
const response = res.data
switch (response.code) {
case DATABASE_INSERT_SUCCESS:
setIsDrawerOpen(false)
void message.success('添加成功')
setNewFormValues(undefined)
getCategory()
break
case DATABASE_DUPLICATE_KEY:
void message.error('已存在相同名称的类别')
break
default:
void message.error('添加失败，请稍后重试')
}
})
.finally(() => {
setIsSubmitting(false)
})
}
}
const getCategory = () => {
if (isLoading) {
return
}
setIsLoading(true)
void r_sys_tool_category_get()
.then((res) => {
const response = res.data
if (response.code === DATABASE_SELECT_SUCCESS) {
setCategoryData(response.data!)
} else {
void message.error('获取失败，请稍后重试')
}
})
.finally(() => {
setIsLoading(false)
})
}
useEffect(() => {
form.validateFields({ validateOnly: true }).then(
() => {
setSubmittable(true)
},
() => {
setSubmittable(false)
}
)
if (!isDrawerEdit && formValues) {
setNewFormValues({
name: formValues.name,
enable: formValues.enable
})
}
}, [formValues])
useEffect(() => {
getCategory()
}, [])
const drawerToolbar = (
<AntdSpace>
<AntdButton onClick={handleOnDrawerClose} disabled={isSubmitting}>
取消
</AntdButton>
<AntdButton
type={'primary'}
disabled={!submittable}
loading={isSubmitting}
onClick={handleOnSubmit}
>
提交
</AntdButton>
</AntdSpace>
)
const addAndEditForm = (
<AntdForm form={form} disabled={isSubmitting} layout={'vertical'}>
<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={'enable'} label={'状态'}>
<AntdSwitch checkedChildren={'启用'} unCheckedChildren={'禁用'} />
</AntdForm.Item>
</AntdForm>
)
return (
<>
<FitFullscreen data-component={'system-tools-category'}>
<HideScrollbar
style={{ padding: 30 }}
isShowVerticalScrollbar
autoHideWaitingTime={1000}
>
<Card>
<AntdTable
dataSource={categoryData}
columns={categoryColumns}
rowKey={(record) => record.id}
loading={isLoading}
pagination={false}
/>
</Card>
</HideScrollbar>
</FitFullscreen>
<AntdDrawer
title={isDrawerEdit ? '编辑类别' : '添加类别'}
onClose={handleOnDrawerClose}
open={isDrawerOpen}
closable={!isSubmitting}
maskClosable={!isSubmitting}
extra={drawerToolbar}
>
{addAndEditForm}
</AntdDrawer>
{contextHolder}
</>
)
}
export default Category

5
src/pages/System/Tools/Template.tsx Normal file
View File

@@ -0,0 +1,5 @@
const Template = () => {
return <>2</>
}
export default Template

2
src/pages/System/Tools/index.tsx
View File

@@ -1,5 +1,5 @@
const Tools = () => {
return <></>
return <>1</>
}
export default Tools

25
src/pages/SystemFramework.tsx
View File

@@ -10,21 +10,32 @@ const SystemFramework = () => {
<FitFullscreen data-component={'system-framework'} className={'flex-horizontal'}>
<div className={'left-panel'}>
<Sidebar title={'系统配置'}>
<Sidebar.Scroll>
<Sidebar.ItemList>
{getSystemRouteJson().map((value) => {
{getSystemRouteJson().map((route) => {
return (
value.menu && (
route.menu && (
<Sidebar.Item
end={value.id === 'system' ? true : undefined}
path={value.absolutePath}
icon={value.icon}
text={value.name}
key={value.id}
end={route.id === 'system' ? true : undefined}
path={route.absolutePath}
icon={route.icon}
text={route.name}
key={route.id}
>
{route.children?.map((subRoute) => (
<Sidebar.Item
end
path={subRoute.absolutePath}
text={subRoute.name}
key={subRoute.id}
/>
))}
</Sidebar.Item>
)
)
})}
</Sidebar.ItemList>
</Sidebar.Scroll>
</Sidebar>
</div>
<div className={'right-panel'}>

29
src/pages/Tools/Create.tsx
View File

@@ -6,7 +6,6 @@ import Preview from '@/components/Playground/Output/Preview'
import templates from '@/components/Playground/templates.ts'
import { useEffect } from 'react'
import HideScrollbar from '@/components/common/HideScrollbar.tsx'
import Icon from '@ant-design/icons'
const Create = () => {
const [form] = AntdForm.useForm<{
@@ -126,36 +125,16 @@ const Create = () => {
/>
</AntdForm.Item>
<AntdForm.Item
label={
<>
关键字
<AntdTooltip
title={'工具搜索（每个不超过10个字符）'}
>
<Icon
className={'help'}
component={IconOxygenHelp}
/>
</AntdTooltip>
</>
}
label={'关键字'}
tooltip={'工具搜索（每个不超过10个字符）'}
name={'keyword'}
rules={[{ required: true, message: '请输入关键字' }]}
>
<AntdSelect mode={'tags'} maxCount={20} />
</AntdForm.Item>
<AntdForm.Item
label={
<>
类别
<AntdTooltip title={'工具分类'}>
<Icon
className={'help'}
component={IconOxygenHelp}
/>
</AntdTooltip>
</>
}
label={'类别'}
tooltip={'工具分类'}
name={'category'}
rules={[{ required: true }]}
>

13
src/pages/ToolsFramework.tsx
View File

@@ -2,23 +2,14 @@ import '@/assets/css/pages/tools-framework.scss'
import { tools } from '@/router/tools'
import FitFullscreen from '@/components/common/FitFullscreen'
import Sidebar from '@/components/common/Sidebar'
import { SidebarScrollElement } from '@/components/common/Sidebar/Scroll'
import FullscreenLoadingMask from '@/components/common/FullscreenLoadingMask'
const ToolsFramework = () => {
const sidebarScrollRef = useRef<SidebarScrollElement>(null)
const handleOnSidebarSwitch = () => {
setTimeout(() => {
sidebarScrollRef.current?.refreshLayout()
}, 300)
}
return (
<>
<FitFullscreen data-component={'tools-framework'} className={'flex-horizontal'}>
<div className={'left-panel'}>
<Sidebar title={'氧工具'} onSidebarSwitch={handleOnSidebarSwitch}>
<Sidebar title={'氧工具'}>
<Sidebar.ItemList>
<Sidebar.Item end path={''} icon={tools[0].icon} text={tools[0].name} />
<Sidebar.Item
@@ -29,7 +20,7 @@ const ToolsFramework = () => {
/>
</Sidebar.ItemList>
<Sidebar.Separate style={{ marginBottom: 0 }} />
<Sidebar.Scroll ref={sidebarScrollRef}>
<Sidebar.Scroll>
<Sidebar.ItemList>
{tools.map((tool) => {
return tool.menu &&

39
src/router/system.tsx
View File

@@ -34,12 +34,49 @@ const system: RouteJsonObject[] = [
path: 'tools',
absolutePath: '/system/tools',
id: 'system-tools',
component: lazy(() => import('@/pages/System/Tools')),
name: '工具配置',
icon: lazy(() => import('~icons/oxygen/tool')),
menu: true,
autoHide: true,
children: [
{
path: '',
absolutePath: '/system/tools',
id: 'system-tools-index',
component: lazy(() => import('@/pages/System/Tools')),
name: '工具管理',
menu: true,
autoHide: true
},
{
path: 'template',
absolutePath: '/system/tools/template',
id: 'system-tools-template',
component: lazy(() => import('@/pages/System/Tools/Template')),
name: '模板管理',
menu: true,
autoHide: true
},
{
path: 'base',
absolutePath: '/system/tools/base',
id: 'system-tools-base',
component: lazy(() => import('@/pages/System/Tools/Base')),
name: '基板管理',
menu: true,
autoHide: true
},
{
path: 'category',
absolutePath: '/system/tools/category',
id: 'system-tools-category',
component: lazy(() => import('@/pages/System/Tools/Category')),
name: '类别管理',
menu: true,
autoHide: true
}
]
},
{
path: 'user',
absolutePath: '/system/user',

14
src/services/system.tsx
View File

@@ -16,7 +16,8 @@ import {
URL_SYS_STATISTICS_ONLINE,
URL_SYS_STATISTICS_ACTIVE,
URL_SYS_SETTINGS_BASE,
URL_SYS_SETTINGS_SENSITIVE
URL_SYS_SETTINGS_SENSITIVE,
URL_SYS_TOOL_CATEGORY
} from '@/constants/urls.constants'
import request from '@/services/index'
@@ -113,3 +114,14 @@ export const r_sys_statistics_online = (param: OnlineInfoGetParam) =>
export const r_sys_statistics_active = (param: ActiveInfoGetParam) =>
request.get<ActiveInfoVo>(URL_SYS_STATISTICS_ACTIVE, param)
export const r_sys_tool_category_get = () => request.get<ToolCategoryVo[]>(URL_SYS_TOOL_CATEGORY)
export const r_sys_tool_category_add = (param: ToolCategoryAddEditParam) =>
request.post(URL_SYS_TOOL_CATEGORY, param)
export const r_sys_tool_category_update = (param: ToolCategoryAddEditParam) =>
request.put(URL_SYS_TOOL_CATEGORY, param)
export const r_sys_tool_category_delete = (id: string) =>
request.delete(`${URL_SYS_TOOL_CATEGORY}/${id}`)

9
src/util/auth.tsx
View File

@@ -253,7 +253,14 @@ export const getPermissionPath = (): string[] => {
}
export const hasPathPermission = (path: string) => {
return getPermissionPath().indexOf(path) !== -1
let flag = false
getPermissionPath().forEach((value) => {
if (RegExp(value).test(path)) {
flag = true
return
}
})
return flag
}
export const getPermission = (): string[] => {