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

Feat: all - support multiple platforms

Browse Source
This commit is contained in:
Fat Snake
2024-03-18 17:23:31 +08:00
parent f985a2f750
commit 4b1a3fbc01
23 changed files with 487 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/pages/System/Tools/Base.tsx
View File

@@ -41,6 +41,17 @@ const Base = () => {
currentLocation.pathname !== nextLocation.pathname && Object.keys(hasEdited).length > 0
)
const [modal, contextHolder] = AntdModal.useModal()
const [tableParams, setTableParams] = useState<TableParam>({
pagination: {
current: 1,
pageSize: 20,
position: ['bottomCenter'],
showTotal: (total, range) =>
`第 ${
range[0] === range[1] ? `${range[0]}` : `${range[0]}~${range[1]}`
} 项 共 ${total} 项`
}
})
const [form] = AntdForm.useForm<ToolBaseAddEditParam>()
const formValues = AntdForm.useWatch([], form)
const [addFileForm] = AntdForm.useForm<{ fileName: string }>()
@@ -62,6 +73,32 @@ const Base = () => {
const [compiling, setCompiling] = useState(false)
const [compileForm] = AntdForm.useForm<{ entryFileName: string }>()
const handleOnTableChange = (
pagination: _TablePaginationConfig,
filters: Record<string, _FilterValue | null>,
sorter: _SorterResult<ToolBaseVo> | _SorterResult<ToolBaseVo>[]
) => {
pagination = { ...tableParams.pagination, ...pagination }
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) {
setBaseData([])
}
}
useBeforeUnload(
useCallback(
(event) => {
@@ -78,8 +115,9 @@ const Base = () => {
const handleOnAddBtnClick = () => {
setIsDrawerEdit(false)
setIsDrawerOpen(true)
form.setFieldValue('id', undefined)
form.setFieldValue('id', null)
form.setFieldValue('name', newFormValues?.name)
form.setFieldValue('platform', newFormValues?.platform)
}
const baseColumns: _ColumnsType<ToolBaseVo> = [
@@ -91,6 +129,16 @@ const Base = () => {
</span>
)
},
{
title: '平台',
dataIndex: 'platform',
render: (value: string) => `${value.slice(0, 1)}${value.slice(1).toLowerCase()}`,
filters: [
{ text: 'Web', value: 'WEB' },
{ text: 'Desktop', value: 'DESKTOP' },
{ text: 'Android', value: 'ANDROID' }
]
},
{
title: '创建时间',
dataIndex: 'createTime',
@@ -371,6 +419,7 @@ const Base = () => {
setIsDrawerOpen(true)
form.setFieldValue('id', value.id)
form.setFieldValue('name', value.name)
form.setFieldValue('platform', value.platform)
void form.validateFields()
}
}
@@ -478,11 +527,28 @@ const Base = () => {
}
setIsLoading(true)
void r_sys_tool_base_get()
void r_sys_tool_base_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,
...tableParams.filters
})
.then((res) => {
const response = res.data
if (response.code === DATABASE_SELECT_SUCCESS) {
setBaseData(response.data!)
setBaseData(response.data!.records)
setTableParams({
...tableParams,
pagination: {
...tableParams.pagination,
total: response.data!.total
}
})
} else {
void message.error('获取失败，请稍后重试')
}
@@ -940,14 +1006,21 @@ const Base = () => {
if (!isDrawerEdit && formValues) {
setNewFormValues({
name: formValues.name
name: formValues.name,
platform: formValues.platform
})
}
}, [formValues])
useEffect(() => {
getBase()
}, [])
}, [
JSON.stringify(tableParams.filters),
JSON.stringify(tableParams.sortField),
JSON.stringify(tableParams.sortOrder),
JSON.stringify(tableParams.pagination?.pageSize),
JSON.stringify(tableParams.pagination?.current)
])
const drawerToolbar = (
<AntdSpace>
@@ -977,6 +1050,18 @@ const Base = () => {
>
<AntdInput allowClear />
</AntdForm.Item>
<AntdForm.Item
name={'platform'}
label={'平台'}
rules={[{ required: true }]}
hidden={isDrawerEdit}
>
<AntdSelect>
<AntdSelect.Option key={'WEB'}>Web</AntdSelect.Option>
<AntdSelect.Option key={'DESKTOP'}>Desktop</AntdSelect.Option>
<AntdSelect.Option key={'ANDROID'}>Android</AntdSelect.Option>
</AntdSelect>
</AntdForm.Item>
</AntdForm>
)
@@ -990,12 +1075,13 @@ const Base = () => {
dataSource={baseData}
columns={baseColumns}
rowKey={(record) => record.id}
pagination={tableParams.pagination}
loading={isLoading}
pagination={false}
expandable={{
expandedRowRender,
onExpand: handleOnExpand
}}
onChange={handleOnTableChange}
/>
</Card>
{editingFileName && (

11
src/pages/System/Tools/Code.tsx
View File

@@ -2,6 +2,7 @@ import Draggable from 'react-draggable'
import Icon from '@ant-design/icons'
import '@/assets/css/pages/system/tools/code.scss'
import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
import { checkDesktop } from '@/util/common'
import { r_sys_tool_get_one } from '@/services/system'
import { IFiles } from '@/components/Playground/shared'
import { base64ToFiles } from '@/components/Playground/files'
@@ -15,15 +16,21 @@ const Code = () => {
const [loading, setLoading] = useState(false)
const [files, setFiles] = useState<IFiles>({})
const [selectedFileName, setSelectedFileName] = useState('')
const [platform, setPlatform] = useState<Platform>('WEB')
const handleOnRunTool = () => {
navigate(`/system/tools/execute/${id}`)
if (checkDesktop() || platform !== 'DESKTOP') {
navigate(`/system/tools/execute/${id}`)
} else {
void message.warning('此应用需要桌面端环境，请在桌面端运行')
}
}
const render = (toolVo: ToolVo) => {
try {
setFiles(base64ToFiles(toolVo.source.data!))
setSelectedFileName(toolVo.entryPoint)
setPlatform(toolVo.platform)
} catch (e) {
void message.error('载入工具失败')
}
@@ -46,7 +53,7 @@ const Code = () => {
case DATABASE_NO_RECORD_FOUND:
void message.error('未找到指定工具')
setTimeout(() => {
navigate(-1)
navigate('/')
}, 3000)
break
default:

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

@@ -51,7 +51,7 @@ const Execute = () => {
case DATABASE_NO_RECORD_FOUND:
void message.error('未找到指定工具')
setTimeout(() => {
navigate(-1)
navigate('/')
}, 3000)
break
default:

158
src/pages/System/Tools/Template.tsx
View File

@@ -16,7 +16,7 @@ import {
r_sys_tool_template_add,
r_sys_tool_template_get,
r_sys_tool_template_get_one,
r_sys_tool_base_get
r_sys_tool_base_get_list
} from '@/services/system'
import { IFile, IFiles, ITsconfig } from '@/components/Playground/shared'
import {
@@ -39,6 +39,17 @@ const Template = () => {
currentLocation.pathname !== nextLocation.pathname && Object.keys(hasEdited).length > 0
)
const [modal, contextHolder] = AntdModal.useModal()
const [tableParams, setTableParams] = useState<TableParam>({
pagination: {
current: 1,
pageSize: 20,
position: ['bottomCenter'],
showTotal: (total, range) =>
`第 ${
range[0] === range[1] ? `${range[0]}` : `${range[0]}~${range[1]}`
} 项 共 ${total} 项`
}
})
const [form] = AntdForm.useForm<ToolTemplateAddEditParam>()
const formValues = AntdForm.useWatch([], form)
const [addFileForm] = AntdForm.useForm<{ fileName: string }>()
@@ -60,6 +71,32 @@ const Template = () => {
const [templateDetailLoading, setTemplateDetailLoading] = useState<Record<string, boolean>>({})
const [tsconfig, setTsconfig] = useState<ITsconfig>()
const handleOnTableChange = (
pagination: _TablePaginationConfig,
filters: Record<string, _FilterValue | null>,
sorter: _SorterResult<ToolTemplateVo> | _SorterResult<ToolTemplateVo>[]
) => {
pagination = { ...tableParams.pagination, ...pagination }
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) {
setBaseData([])
}
}
useBeforeUnload(
useCallback(
(event) => {
@@ -95,6 +132,16 @@ const Template = () => {
</span>
)
},
{
title: '平台',
dataIndex: 'platform',
render: (value: string) => `${value.slice(0, 1)}${value.slice(1).toLowerCase()}`,
filters: [
{ text: 'Web', value: 'WEB' },
{ text: 'Desktop', value: 'DESKTOP' },
{ text: 'Android', value: 'ANDROID' }
]
},
{
title: '基板',
dataIndex: ['base', 'name']
@@ -264,9 +311,6 @@ const Template = () => {
}
}
const filterOption = (input: string, option?: { label: string; value: string }) =>
(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
const handleOnSubmit = () => {
if (isSubmitting) {
return
@@ -294,7 +338,12 @@ const Template = () => {
setIsSubmitting(false)
})
} else {
void r_sys_tool_template_add(formValues)
void r_sys_tool_template_add({
...formValues,
baseId: formValues.baseId
? (formValues.baseId as unknown as string[])[1]
: undefined
})
.then((res) => {
const response = res.data
switch (response.code) {
@@ -331,11 +380,28 @@ const Template = () => {
}
setIsLoading(true)
void r_sys_tool_template_get()
void r_sys_tool_template_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,
...tableParams.filters
})
.then((res) => {
const response = res.data
if (response.code === DATABASE_SELECT_SUCCESS) {
setTemplateData(response.data!)
setTemplateData(response.data!.records)
setTableParams({
...tableParams,
pagination: {
...tableParams.pagination,
total: response.data!.total
}
})
} else {
void message.error('获取失败，请稍后重试')
}
@@ -786,7 +852,7 @@ const Template = () => {
}
setIsLoadingBaseData(true)
void r_sys_tool_base_get()
void r_sys_tool_base_get_list()
.then((res) => {
const response = res.data
switch (response.code) {
@@ -831,9 +897,64 @@ const Template = () => {
}
}, [formValues])
const baseDataGroupByPlatform = () => {
interface Node {
label: string
value: string
children?: Node[]
}
const temp: Node[] = []
baseData.forEach((value) => {
if (!temp.length) {
temp.push({
label: `${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}`,
value: value.platform,
children: [
{
label: value.name,
value: value.id
}
]
})
} else {
if (
!temp.some((platform, platformIndex) => {
if (platform.value === value.platform) {
temp[platformIndex].children!.push({
label: value.name,
value: value.id
})
return true
}
return false
})
) {
temp.push({
label: `${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}`,
value: value.platform,
children: [
{
label: value.name,
value: value.id
}
]
})
}
}
})
return temp
}
useEffect(() => {
getTemplate()
}, [])
}, [
JSON.stringify(tableParams.filters),
JSON.stringify(tableParams.sortField),
JSON.stringify(tableParams.sortOrder),
JSON.stringify(tableParams.pagination?.pageSize),
JSON.stringify(tableParams.pagination?.current)
])
const drawerToolbar = (
<AntdSpace>
@@ -868,15 +989,13 @@ const Template = () => {
>
<AntdInput allowClear />
</AntdForm.Item>
<AntdForm.Item name={'baseId'} label={'基板'} rules={[{ required: true }]}>
<AntdSelect
showSearch
filterOption={filterOption}
options={baseData.map((value) => ({
value: value.id,
label: value.name
}))}
/>
<AntdForm.Item
hidden={isDrawerEdit}
name={'baseId'}
label={'基板'}
rules={[{ required: true }]}
>
<AntdCascader showSearch allowClear={false} options={baseDataGroupByPlatform()} />
</AntdForm.Item>
<AntdForm.Item name={'entryPoint'} label={'入口'} rules={[{ required: true }]}>
<AntdInput allowClear />
@@ -897,13 +1016,14 @@ const Template = () => {
dataSource={templateData}
columns={templateColumns}
rowKey={(record) => record.id}
pagination={tableParams.pagination}
loading={isLoading}
pagination={false}
scroll={{ x: true }}
expandable={{
expandedRowRender,
onExpand: handleOnExpand
}}
onChange={handleOnTableChange}
/>
</Card>
{editingFileName && (

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

@@ -75,6 +75,16 @@ const Tools = () => {
},
{ dataIndex: 'toolId', title: '工具 ID' },
{ dataIndex: 'ver', title: '版本' },
{
title: '平台',
dataIndex: 'platform',
render: (value: string) => `${value.slice(0, 1)}${value.slice(1).toLowerCase()}`,
filters: [
{ text: 'Web', value: 'WEB' },
{ text: 'Desktop', value: 'DESKTOP' },
{ text: 'Android', value: 'ANDROID' }
]
},
{
title: '作者',
render: (_, record) => `${record.author.userInfo.nickname}(${record.author.username})`
@@ -379,7 +389,7 @@ const Tools = () => {
.confirm({
title: '确定删除',
maskClosable: true,
content: `确定删除工具 ${value.author.username}:${value.toolId}:${value.ver} 吗？`
content: `确定删除工具 ${value.author.username}:${value.toolId}:${value.platform.slice(0, 1)}${value.platform.slice(1).toLowerCase()}:${value.ver} 吗？`
})
.then(
(confirmed) => {