feat(web): add tool management
This commit is contained in:
zhaoying
205
web/src/views/ToolManagement/components/TimeToolModal.tsx
Normal file
205
web/src/views/ToolManagement/components/TimeToolModal.tsx
Normal file
@@ -0,0 +1,205 @@
|
||||
import { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
|
||||
import { Form, Input, Select, Row, Col, Button, Tabs } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import type { ToolItem, TimeToolModalRef } from '../types'
|
||||
import RbModal from '@/components/RbModal';
|
||||
import { execute } from '@/api/tools';
|
||||
const FormItem = Form.Item;
|
||||
|
||||
const tabKeys = ['currentTime', 'timestampConversion', 'timeFormat']
|
||||
const formatList = [
|
||||
{ label: '%Y-%m-%d %H:%M:%S', value: '%Y-%m-%d %H:%M:%S' },
|
||||
{ label: '%Y%m%d_%H%M%S', value: '%Y%m%d_%H%M%S' },
|
||||
{ label: '%Y年%m月%d日 %H:%M', value: '%Y年%m月%d日 %H:%M' },
|
||||
{ label: '%Y-%m-%d %H:%M:%S.%f', value: '%Y-%m-%d %H:%M:%S.%f' },
|
||||
{ label: '%d/%m/%Y', value: '%d/%m/%Y' },
|
||||
{ label: '%m/%d/%Y', value: '%m/%d/%Y' },
|
||||
]
|
||||
interface CurrentTimeObj {
|
||||
datetime: string;
|
||||
iso_format: string;
|
||||
timestamp: string;
|
||||
timestamp_ms: string;
|
||||
}
|
||||
const TimeToolModal = forwardRef<TimeToolModalRef>((_props, ref) => {
|
||||
const { t } = useTranslation();
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [form] = Form.useForm<{ timestamp: string; formatType: string; }>();
|
||||
const [data, setData] = useState<ToolItem>({} as ToolItem)
|
||||
const [timeFormat, setTimeFormat] = useState<string | undefined>(undefined)
|
||||
const [activeTab, setActiveTab] = useState('currentTime');
|
||||
const values = Form.useWatch([], form)
|
||||
const [currentTime, setCurrentTime] = useState<CurrentTimeObj>({} as CurrentTimeObj)
|
||||
const [timestampFormat, setTimestampFormat] = useState<string | null>(null)
|
||||
|
||||
const formatTabItems = () => {
|
||||
return tabKeys.map(key => ({
|
||||
key,
|
||||
label: t(`tool.${key}`),
|
||||
}))
|
||||
}
|
||||
const handleChangeTab = (key: string) => {
|
||||
setActiveTab(key);
|
||||
setTimestampFormat(null)
|
||||
setTimeFormat(undefined)
|
||||
}
|
||||
|
||||
// 封装取消方法，添加关闭弹窗逻辑
|
||||
const handleClose = () => {
|
||||
setVisible(false);
|
||||
form.resetFields();
|
||||
setData({} as ToolItem)
|
||||
setActiveTab('currentTime')
|
||||
};
|
||||
|
||||
const handleOpen = (vo: ToolItem) => {
|
||||
setData(vo)
|
||||
setVisible(true);
|
||||
getCurrentTime(vo)
|
||||
};
|
||||
|
||||
const getCurrentTime = (vo: ToolItem) => {
|
||||
if (!vo.id) return
|
||||
execute({
|
||||
tool_id: vo.id,
|
||||
parameters: {
|
||||
operation: 'now',
|
||||
output_format: '%Y-%m-%d %H:%M:%S',
|
||||
}
|
||||
}).then(res => {
|
||||
const response = res as { data: CurrentTimeObj}
|
||||
setCurrentTime(response.data)
|
||||
})
|
||||
}
|
||||
|
||||
const handleFormat = () => {
|
||||
const timestamp = form.getFieldValue('timestamp')
|
||||
if (!timestamp || !data.id) return
|
||||
execute({
|
||||
"tool_id": data.id,
|
||||
"parameters": {
|
||||
"operation": "now",
|
||||
"input_value": timestamp,
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
const response = res as { data: CurrentTimeObj }
|
||||
setTimestampFormat(response.data.datetime)
|
||||
})
|
||||
}
|
||||
const handleChangeFormatType = () => {
|
||||
if (!data.id) return
|
||||
execute({
|
||||
tool_id: data.id,
|
||||
parameters: {
|
||||
operation: 'now',
|
||||
output_format: values.formatType,
|
||||
to_timezone: 'UTC'
|
||||
}
|
||||
}).then(res => {
|
||||
const response = res as { data: CurrentTimeObj }
|
||||
console.log('timeFormat', response.data.datetime)
|
||||
setTimeFormat(response.data.datetime)
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (values?.formatType) {
|
||||
handleChangeFormatType()
|
||||
}
|
||||
}, [values?.formatType])
|
||||
|
||||
// 暴露给父组件的方法
|
||||
useImperativeHandle(ref, () => ({
|
||||
handleOpen,
|
||||
handleClose
|
||||
}));
|
||||
|
||||
|
||||
return (
|
||||
<RbModal
|
||||
title={data.name}
|
||||
open={visible}
|
||||
onCancel={handleClose}
|
||||
footer={null}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
initialValues={{
|
||||
formatType: formatList[0].value
|
||||
}}
|
||||
>
|
||||
{/* 当前时间、时间戳转换、时间格式化 */}
|
||||
<Tabs
|
||||
activeKey={activeTab}
|
||||
items={formatTabItems()}
|
||||
onChange={handleChangeTab}
|
||||
/>
|
||||
|
||||
{/* 当前时间 */}
|
||||
{activeTab === 'currentTime' &&
|
||||
<>
|
||||
<FormItem label={t('tool.currentTime')} >
|
||||
<Input disabled value={currentTime?.datetime} />
|
||||
</FormItem>
|
||||
<FormItem label={t('tool.utcTime')} >
|
||||
<Input disabled value={currentTime?.iso_format} />
|
||||
</FormItem>
|
||||
<FormItem label={t('tool.secondsTimestamp')} >
|
||||
<Input disabled value={currentTime?.timestamp} />
|
||||
</FormItem>
|
||||
<FormItem label={t('tool.millisecondsTimestamp')} >
|
||||
<Input disabled value={currentTime?.timestamp_ms} />
|
||||
</FormItem>
|
||||
</>
|
||||
}
|
||||
{/* 时间戳转换 */}
|
||||
{activeTab === 'timestampConversion' &&
|
||||
<>
|
||||
<FormItem label={t('tool.enterTimestamp')} >
|
||||
<Row gutter={24}>
|
||||
<Col span={16}>
|
||||
<FormItem name="timestamp">
|
||||
<Input />
|
||||
</FormItem>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Button onClick={handleFormat}>{t('tool.conversion')}</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</FormItem>
|
||||
{timestampFormat &&
|
||||
<div className="rb:mt-3 rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md">
|
||||
{t('tool.conversionResult')}
|
||||
<div className="rb:font-medium rb:bg-white rb:px-3 rb:py-2.5 rb:rounded-md rb:mt-2">
|
||||
{timestampFormat}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
}
|
||||
{/* 时间格式化 */}
|
||||
{activeTab === 'timeFormat' &&
|
||||
<>
|
||||
<FormItem label={t('tool.chooseFormatType')} name="formatType">
|
||||
<Select
|
||||
options={formatList}
|
||||
onChange={handleChangeFormatType}
|
||||
/>
|
||||
</FormItem>
|
||||
<div className="rb:mt-3 rb:bg-[#F0F3F8] rb:px-3 rb:py-2.5 rb:rounded-md">
|
||||
{t('tool.conversionResult')}
|
||||
<div className="rb:font-medium rb:bg-white rb:px-3 rb:py-2.5 rb:rounded-md rb:mt-2">
|
||||
{timeFormat}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</Form>
|
||||
</RbModal>
|
||||
);
|
||||
});
|
||||
|
||||
export default TimeToolModal;
|
||||
Reference in New Issue
Block a user