Complete main UI #37
8
src/assets/css/pages/system/tools/base.scss
Normal file
8
src/assets/css/pages/system/tools/base.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
[data-component=system-tools-base] {
|
||||
.root-content {
|
||||
padding: 20px;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -28,6 +28,7 @@ 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_BASE_LIST = `${URL_SYS_TOOL_BASE}/list`
|
||||
export const URL_SYS_TOOL_TEMPLATE = `${URL_SYS_TOOL}/template`
|
||||
|
||||
export const URL_API_V1 = '/api/v1'
|
||||
|
||||
20
src/global.d.ts
vendored
20
src/global.d.ts
vendored
@@ -491,10 +491,19 @@ interface ToolBaseVo {
|
||||
name: string
|
||||
source: ToolDataVo
|
||||
dist: ToolDataVo
|
||||
enable: boolean
|
||||
createTime: string
|
||||
updateTime: string
|
||||
}
|
||||
|
||||
interface ToolBaseAddEditParam {
|
||||
id?: string
|
||||
name?: string
|
||||
source?: string
|
||||
dist?: string
|
||||
enable?: boolean
|
||||
}
|
||||
|
||||
interface ToolTemplateVo {
|
||||
id: string
|
||||
name: string
|
||||
@@ -502,10 +511,21 @@ interface ToolTemplateVo {
|
||||
baseId: string
|
||||
source: ToolDataVo
|
||||
dist: ToolDataVo
|
||||
enable: boolean
|
||||
createTime: string
|
||||
updateTime: string
|
||||
}
|
||||
|
||||
interface ToolTemplateAddEditParam {
|
||||
id: string
|
||||
name: string
|
||||
ver: string
|
||||
baseId: string
|
||||
source?: string
|
||||
dist?: string
|
||||
enable: boolean
|
||||
}
|
||||
|
||||
interface ToolVo {
|
||||
id: string
|
||||
name: string
|
||||
|
||||
@@ -1,5 +1,495 @@
|
||||
import '@/assets/css/pages/system/tools/base.scss'
|
||||
import FitFullscreen from '@/components/common/FitFullscreen.tsx'
|
||||
import FlexBox from '@/components/common/FlexBox.tsx'
|
||||
import HideScrollbar from '@/components/common/HideScrollbar.tsx'
|
||||
import Card from '@/components/common/Card.tsx'
|
||||
import CodeEditor from '@/components/Playground/CodeEditor'
|
||||
import { useState } from 'react'
|
||||
import { IFile, IFiles } from '@/components/Playground/shared.ts'
|
||||
import {
|
||||
r_sys_tool_base_add,
|
||||
r_sys_tool_base_delete,
|
||||
r_sys_tool_base_get_one,
|
||||
r_sys_tool_base_getList,
|
||||
r_sys_tool_base_update
|
||||
} from '@/services/system.tsx'
|
||||
import {
|
||||
COLOR_PRODUCTION,
|
||||
DATABASE_DELETE_SUCCESS,
|
||||
DATABASE_DUPLICATE_KEY,
|
||||
DATABASE_INSERT_SUCCESS,
|
||||
DATABASE_SELECT_SUCCESS,
|
||||
DATABASE_UPDATE_SUCCESS
|
||||
} from '@/constants/common.constants.ts'
|
||||
import { utcToLocalTime } from '@/util/datetime.tsx'
|
||||
import Permission from '@/components/common/Permission.tsx'
|
||||
import { base64ToFiles, filesToBase64, getFilesSize } from '@/components/Playground/files.ts'
|
||||
|
||||
const Base = () => {
|
||||
return <>3</>
|
||||
const [modal, contextHolder] = AntdModal.useModal()
|
||||
const [form] = AntdForm.useForm<ToolBaseAddEditParam>()
|
||||
const formValues = AntdForm.useWatch([], form)
|
||||
const [newFormValues, setNewFormValues] = useState<ToolBaseAddEditParam>()
|
||||
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 [editingFiles, setEditingFiles] = useState<IFiles>()
|
||||
const [editingFileName, setEditingFileName] = useState('')
|
||||
const [hasEdited, setHasEdited] = useState(false)
|
||||
const [baseData, setBaseData] = useState<ToolBaseVo[]>([])
|
||||
const [baseDetailData, setBaseDetailData] = useState<Record<string, ToolBaseVo>>({})
|
||||
const [baseDetailLoading, setBaseDetailLoading] = useState<Record<string, boolean>>({})
|
||||
|
||||
const handleOnAddBtnClick = () => {
|
||||
setIsDrawerEdit(false)
|
||||
setIsDrawerOpen(true)
|
||||
form.setFieldValue('id', undefined)
|
||||
form.setFieldValue('name', newFormValues?.name)
|
||||
form.setFieldValue('enable', newFormValues?.enable ?? true)
|
||||
}
|
||||
|
||||
const baseColumns: _ColumnsType<ToolBaseVo> = [
|
||||
{ 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 style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddBtnClick}>
|
||||
新增
|
||||
</a>
|
||||
)
|
||||
</>
|
||||
),
|
||||
dataIndex: 'enable',
|
||||
width: '15em',
|
||||
align: 'center',
|
||||
render: (_, record) => (
|
||||
<>
|
||||
<AntdSpace size={'middle'}>
|
||||
<Permission operationCode={'system:tool:modify:base'}>
|
||||
<a
|
||||
style={{ color: COLOR_PRODUCTION }}
|
||||
onClick={handleOnEditBtnClick(record)}
|
||||
>
|
||||
编辑
|
||||
</a>
|
||||
</Permission>
|
||||
<Permission operationCode={'system:tool:delete:base'}>
|
||||
<a
|
||||
style={{ color: COLOR_PRODUCTION }}
|
||||
onClick={handleOnDeleteBtnClick(record)}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
</Permission>
|
||||
</AntdSpace>
|
||||
</>
|
||||
)
|
||||
}
|
||||
]
|
||||
|
||||
const handleOnEditBtnClick = (value: ToolBaseVo) => {
|
||||
return () => {
|
||||
setIsDrawerEdit(true)
|
||||
setIsDrawerOpen(true)
|
||||
form.setFieldValue('id', value.id)
|
||||
form.setFieldValue('name', value.name)
|
||||
form.setFieldValue('enable', value.enable)
|
||||
void form.validateFields()
|
||||
}
|
||||
}
|
||||
|
||||
const handleOnDeleteBtnClick = (value: ToolBaseVo) => {
|
||||
return () => {
|
||||
modal
|
||||
.confirm({
|
||||
title: '确定删除',
|
||||
content: `确定删除基板 ${value.name} 吗？`
|
||||
})
|
||||
.then(
|
||||
(confirmed) => {
|
||||
if (confirmed) {
|
||||
setIsLoading(true)
|
||||
|
||||
void r_sys_tool_base_delete(value.id)
|
||||
.then((res) => {
|
||||
const response = res.data
|
||||
if (response.code === DATABASE_DELETE_SUCCESS) {
|
||||
void message.success('删除成功')
|
||||
setTimeout(() => {
|
||||
getBase()
|
||||
})
|
||||
} else {
|
||||
void message.error('删除失败，请稍后重试')
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoading(false)
|
||||
})
|
||||
}
|
||||
},
|
||||
() => {}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const handleOnSubmit = () => {
|
||||
if (isSubmitting) {
|
||||
return
|
||||
}
|
||||
setIsSubmitting(true)
|
||||
|
||||
if (isDrawerEdit) {
|
||||
void r_sys_tool_base_update(formValues)
|
||||
.then((res) => {
|
||||
const response = res.data
|
||||
switch (response.code) {
|
||||
case DATABASE_UPDATE_SUCCESS:
|
||||
setIsDrawerOpen(false)
|
||||
void message.success('更新成功')
|
||||
getBase()
|
||||
break
|
||||
case DATABASE_DUPLICATE_KEY:
|
||||
void message.error('已存在相同名称的基板')
|
||||
break
|
||||
default:
|
||||
void message.error('更新失败，请稍后重试')
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setIsSubmitting(false)
|
||||
})
|
||||
} else {
|
||||
void r_sys_tool_base_add(formValues)
|
||||
.then((res) => {
|
||||
const response = res.data
|
||||
switch (response.code) {
|
||||
case DATABASE_INSERT_SUCCESS:
|
||||
setIsDrawerOpen(false)
|
||||
void message.success('添加成功')
|
||||
setNewFormValues(undefined)
|
||||
getBase()
|
||||
break
|
||||
case DATABASE_DUPLICATE_KEY:
|
||||
void message.error('已存在相同名称的基板')
|
||||
break
|
||||
default:
|
||||
void message.error('添加失败，请稍后重试')
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setIsSubmitting(false)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleOnDrawerClose = () => {
|
||||
setIsDrawerOpen(false)
|
||||
}
|
||||
|
||||
const getBase = () => {
|
||||
if (isLoading) {
|
||||
return
|
||||
}
|
||||
setIsLoading(true)
|
||||
|
||||
void r_sys_tool_base_getList()
|
||||
.then((res) => {
|
||||
const response = res.data
|
||||
if (response.code === DATABASE_SELECT_SUCCESS) {
|
||||
setBaseData(response.data!)
|
||||
} else {
|
||||
void message.error('获取失败，请稍后重试')
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setIsLoading(false)
|
||||
})
|
||||
}
|
||||
|
||||
const handleOnExpand = (expanded: boolean, record: ToolBaseVo) => {
|
||||
if (!expanded) {
|
||||
setEditingFiles(undefined)
|
||||
return
|
||||
}
|
||||
getBaseDetail(record)
|
||||
}
|
||||
|
||||
const getBaseDetail = (record: ToolBaseVo) => {
|
||||
if (baseDetailLoading[record.id]) {
|
||||
return
|
||||
}
|
||||
setBaseDetailLoading({ ...baseDetailLoading, [record.id]: true })
|
||||
|
||||
void r_sys_tool_base_get_one(record.id)
|
||||
.then((res) => {
|
||||
const response = res.data
|
||||
switch (response.code) {
|
||||
case DATABASE_SELECT_SUCCESS:
|
||||
setBaseDetailData({ ...baseDetailData, [record.id]: response.data! })
|
||||
break
|
||||
default:
|
||||
void message.error(`获取基板 ${record.name} 文件内容失败，请稍后重试`)
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setBaseDetailLoading({ ...baseDetailLoading, [record.id]: false })
|
||||
})
|
||||
}
|
||||
|
||||
const expandedRowRender = (record: ToolBaseVo) => {
|
||||
const baseDetailVo = baseDetailData[record.id]
|
||||
let sourceFiles: IFiles | undefined = undefined
|
||||
let sourceFileList: IFile[] = []
|
||||
if (baseDetailVo) {
|
||||
sourceFiles = base64ToFiles(baseDetailVo.source.data)
|
||||
sourceFileList = Object.values(sourceFiles)
|
||||
}
|
||||
|
||||
const detailColumns: _ColumnsType<IFile> = [
|
||||
{ title: '文件名', dataIndex: 'name' },
|
||||
{
|
||||
title: (
|
||||
<>
|
||||
文件总大小
|
||||
<br />
|
||||
{sourceFiles ? getFilesSize(sourceFiles) : 'Unknown'}
|
||||
</>
|
||||
),
|
||||
width: '10em',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<>
|
||||
修改时间
|
||||
<br />
|
||||
{baseDetailVo ? utcToLocalTime(baseDetailVo.source.updateTime) : 'Unknown'}
|
||||
</>
|
||||
),
|
||||
width: '15em',
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: (
|
||||
<>
|
||||
操作 (<a style={{ color: COLOR_PRODUCTION }}>新增</a>)
|
||||
</>
|
||||
),
|
||||
dataIndex: 'enable',
|
||||
width: '10em',
|
||||
align: 'center',
|
||||
render: (_, record) => (
|
||||
<>
|
||||
<AntdSpace size={'middle'}>
|
||||
<Permission operationCode={'system:tool:modify:category'}>
|
||||
<a onClick={handleOnEditFile()} style={{ color: COLOR_PRODUCTION }}>
|
||||
编辑
|
||||
</a>
|
||||
</Permission>
|
||||
<Permission operationCode={'system:tool:delete:category'}>
|
||||
<a
|
||||
onClick={handleOnDeleteFile(record.name)}
|
||||
style={{ color: COLOR_PRODUCTION }}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
</Permission>
|
||||
</AntdSpace>
|
||||
</>
|
||||
)
|
||||
}
|
||||
]
|
||||
|
||||
const handleOnEditFile = () => {
|
||||
return () => {}
|
||||
}
|
||||
|
||||
const handleOnDeleteFile = (fileName: string) => {
|
||||
return () => {
|
||||
if (hasEdited) {
|
||||
void message.warning('删除文件前请先保存更改')
|
||||
return
|
||||
}
|
||||
|
||||
modal
|
||||
.confirm({
|
||||
title: '确定删除',
|
||||
content: `确定删除文件 ${fileName} 吗？`
|
||||
})
|
||||
.then(
|
||||
(confirmed) => {
|
||||
if (confirmed) {
|
||||
setBaseDetailLoading({ ...baseDetailLoading, [record.id]: true })
|
||||
|
||||
delete sourceFiles![fileName]
|
||||
|
||||
void r_sys_tool_base_update({
|
||||
id: record.id,
|
||||
source: filesToBase64(sourceFiles!)
|
||||
})
|
||||
.then((res) => {
|
||||
const response = res.data
|
||||
switch (response.code) {
|
||||
case DATABASE_UPDATE_SUCCESS:
|
||||
void message.success('删除成功')
|
||||
setTimeout(() => {
|
||||
getBaseDetail(record)
|
||||
})
|
||||
break
|
||||
default:
|
||||
void message.error('删除失败，请稍后重试')
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setBaseDetailLoading({
|
||||
...baseDetailLoading,
|
||||
[record.id]: false
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
() => {}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<AntdTable
|
||||
loading={baseDetailLoading[record.id]}
|
||||
dataSource={sourceFileList}
|
||||
columns={detailColumns}
|
||||
pagination={false}
|
||||
/>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
form.validateFields({ validateOnly: true }).then(
|
||||
() => {
|
||||
setSubmittable(true)
|
||||
},
|
||||
() => {
|
||||
setSubmittable(false)
|
||||
}
|
||||
)
|
||||
|
||||
if (!isDrawerEdit && formValues) {
|
||||
setNewFormValues({
|
||||
name: formValues.name,
|
||||
enable: formValues.enable
|
||||
})
|
||||
}
|
||||
}, [formValues])
|
||||
|
||||
useEffect(() => {
|
||||
getBase()
|
||||
}, [])
|
||||
|
||||
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-base'}>
|
||||
<FlexBox direction={'horizontal'} className={'root-content'}>
|
||||
<HideScrollbar>
|
||||
<Card>
|
||||
<AntdTable
|
||||
dataSource={baseData}
|
||||
columns={baseColumns}
|
||||
rowKey={(record) => record.id}
|
||||
loading={isLoading}
|
||||
pagination={false}
|
||||
expandable={{
|
||||
expandedRowRender,
|
||||
onExpand: handleOnExpand
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</HideScrollbar>
|
||||
{editingFiles && (
|
||||
<Card>
|
||||
<CodeEditor
|
||||
files={editingFiles}
|
||||
selectedFileName={editingFileName}
|
||||
onSelectedFileChange={() => {}}
|
||||
showFileSelector={false}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
</FlexBox>
|
||||
<AntdDrawer
|
||||
title={isDrawerEdit ? '编辑基板' : '添加基板'}
|
||||
onClose={handleOnDrawerClose}
|
||||
open={isDrawerOpen}
|
||||
closable={!isSubmitting}
|
||||
maskClosable={!isSubmitting}
|
||||
extra={drawerToolbar}
|
||||
>
|
||||
{addAndEditForm}
|
||||
</AntdDrawer>
|
||||
</FitFullscreen>
|
||||
{contextHolder}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Base
|
||||
|
||||
@@ -38,17 +38,6 @@ const Category = () => {
|
||||
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',
|
||||
@@ -84,7 +73,11 @@ const Category = () => {
|
||||
{
|
||||
title: (
|
||||
<>
|
||||
操作 (<a onClick={handleOnAddBtnClick}>新增</a>)
|
||||
操作 (
|
||||
<a style={{ color: COLOR_PRODUCTION }} onClick={handleOnAddBtnClick}>
|
||||
新增
|
||||
</a>
|
||||
)
|
||||
</>
|
||||
),
|
||||
dataIndex: 'enable',
|
||||
@@ -115,6 +108,17 @@ const Category = () => {
|
||||
}
|
||||
]
|
||||
|
||||
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 handleOnDeleteBtnClick = (value: ToolCategoryVo) => {
|
||||
return () => {
|
||||
modal
|
||||
|
||||
@@ -17,7 +17,9 @@ import {
|
||||
URL_SYS_STATISTICS_ACTIVE,
|
||||
URL_SYS_SETTINGS_BASE,
|
||||
URL_SYS_SETTINGS_SENSITIVE,
|
||||
URL_SYS_TOOL_CATEGORY
|
||||
URL_SYS_TOOL_CATEGORY,
|
||||
URL_SYS_TOOL_BASE,
|
||||
URL_SYS_TOOL_BASE_LIST
|
||||
} from '@/constants/urls.constants'
|
||||
import request from '@/services/index'
|
||||
|
||||
@@ -125,3 +127,18 @@ export const r_sys_tool_category_update = (param: ToolCategoryAddEditParam) =>
|
||||
|
||||
export const r_sys_tool_category_delete = (id: string) =>
|
||||
request.delete(`${URL_SYS_TOOL_CATEGORY}/${id}`)
|
||||
|
||||
export const r_sys_tool_base_getList = () => request.get<ToolBaseVo[]>(URL_SYS_TOOL_BASE_LIST)
|
||||
|
||||
export const r_sys_tool_base_get = () => request.get<ToolBaseVo[]>(URL_SYS_TOOL_BASE)
|
||||
|
||||
export const r_sys_tool_base_get_one = (id: string) =>
|
||||
request.get<ToolBaseVo>(`${URL_SYS_TOOL_BASE}/${id}`)
|
||||
|
||||
export const r_sys_tool_base_add = (param: ToolBaseAddEditParam) =>
|
||||
request.post(URL_SYS_TOOL_BASE, param)
|
||||
|
||||
export const r_sys_tool_base_update = (param: ToolBaseAddEditParam) =>
|
||||
request.put(URL_SYS_TOOL_BASE, param)
|
||||
|
||||
export const r_sys_tool_base_delete = (id: string) => request.delete(`${URL_SYS_TOOL_BASE}/${id}`)
|
||||
|
||||
Reference in New Issue
Block a user