119 lines
2.9 KiB
TypeScript
119 lines
2.9 KiB
TypeScript
import { Col, Form, Input, InputNumber, Modal, Row, Select } from 'antd';
|
|
// import { InputNumber } from 'antd/lib';
|
|
import React from 'react';
|
|
|
|
const { Option } = Select;
|
|
|
|
interface EditModalProps {
|
|
visible: boolean;
|
|
detialData: any;
|
|
onCancel: () => void;
|
|
onOk: (values: any) => void;
|
|
}
|
|
|
|
const EditModal: React.FC<EditModalProps> = ({
|
|
detialData,
|
|
visible,
|
|
onCancel,
|
|
onOk,
|
|
}) => {
|
|
const [form] = Form.useForm();
|
|
|
|
const handleOk = () => {
|
|
form
|
|
.validateFields()
|
|
.then((values) => {
|
|
onOk(values);
|
|
})
|
|
.catch((error) => {
|
|
console.error('表单验证失败:', error);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title="编辑信息"
|
|
open={visible}
|
|
onCancel={onCancel}
|
|
onOk={handleOk}
|
|
okText="确定"
|
|
cancelText="取消"
|
|
>
|
|
<Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
|
|
{/* 名称字段 */}
|
|
<Form.Item
|
|
name="name"
|
|
label="名称"
|
|
rules={[{ required: true, message: '请输入名称' }]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
|
|
{/* CPU 字段 */}
|
|
<Form.Item label="CPU">
|
|
<Row gutter={16}>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
name={['cpu', 'size']}
|
|
rules={[{ required: true, message: '请输入CPU大小' }]}
|
|
noStyle
|
|
>
|
|
<InputNumber
|
|
precision={0}
|
|
addonAfter={<span>颗</span>}
|
|
style={{ width: '190px' }}
|
|
placeholder="CPU大小"
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
name={['cpu', 'cores']}
|
|
rules={[{ required: true, message: '请输入CPU内核数' }]}
|
|
noStyle
|
|
>
|
|
<InputNumber
|
|
precision={0}
|
|
addonAfter={<span>核</span>}
|
|
style={{ width: '190px' }}
|
|
placeholder="CPU内核数"
|
|
/>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
</Form.Item>
|
|
|
|
{/* 内存字段 */}
|
|
<Form.Item
|
|
name="memory_total"
|
|
label="内存"
|
|
rules={[{ required: true, message: '请输入内存' }]}
|
|
>
|
|
<InputNumber
|
|
precision={0}
|
|
addonAfter={<span>CB</span>}
|
|
style={{ width: '393.33px' }}
|
|
placeholder="内存"
|
|
/>
|
|
</Form.Item>
|
|
|
|
{/* 存储卷字段 */}
|
|
<Form.Item
|
|
name="storageVolume"
|
|
label="存储卷"
|
|
rules={[{ required: true, message: '请输入存储卷信息' }]}
|
|
>
|
|
<Input disabled />
|
|
</Form.Item>
|
|
|
|
{/* 描述字段 */}
|
|
<Form.Item name="description" label="描述">
|
|
<Input.TextArea />
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default EditModal;
|