Add tool category management page
This commit is contained in:
5
src/pages/System/Tools/Base.tsx
Normal file
5
src/pages/System/Tools/Base.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
const Base = () => {
|
||||
return <>3</>
|
||||
}
|
||||
|
||||
export default Base
|
||||
316
src/pages/System/Tools/Category.tsx
Normal file
316
src/pages/System/Tools/Category.tsx
Normal 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
5
src/pages/System/Tools/Template.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
const Template = () => {
|
||||
return <>2</>
|
||||
}
|
||||
|
||||
export default Template
|
||||
@@ -1,5 +1,5 @@
|
||||
const Tools = () => {
|
||||
return <></>
|
||||
return <>1</>
|
||||
}
|
||||
|
||||
export default Tools
|
||||
|
||||
@@ -10,21 +10,32 @@ const SystemFramework = () => {
|
||||
<FitFullscreen data-component={'system-framework'} className={'flex-horizontal'}>
|
||||
<div className={'left-panel'}>
|
||||
<Sidebar title={'系统配置'}>
|
||||
<Sidebar.ItemList>
|
||||
{getSystemRouteJson().map((value) => {
|
||||
return (
|
||||
value.menu && (
|
||||
<Sidebar.Item
|
||||
end={value.id === 'system' ? true : undefined}
|
||||
path={value.absolutePath}
|
||||
icon={value.icon}
|
||||
text={value.name}
|
||||
key={value.id}
|
||||
/>
|
||||
<Sidebar.Scroll>
|
||||
<Sidebar.ItemList>
|
||||
{getSystemRouteJson().map((route) => {
|
||||
return (
|
||||
route.menu && (
|
||||
<Sidebar.Item
|
||||
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.ItemList>
|
||||
</Sidebar.Scroll>
|
||||
</Sidebar>
|
||||
</div>
|
||||
<div className={'right-panel'}>
|
||||
|
||||
@@ -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 }]}
|
||||
>
|
||||
|
||||
@@ -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 &&
|
||||
|
||||
Reference in New Issue
Block a user