132 lines
4.6 KiB
TypeScript
132 lines
4.6 KiB
TypeScript
|
'use client'
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
import { PlusOutlined } from '@ant-design/icons';
|
||
|
|
import {
|
||
|
|
Button,
|
||
|
|
Cascader,
|
||
|
|
Checkbox,
|
||
|
|
ColorPicker,
|
||
|
|
DatePicker,
|
||
|
|
Form,
|
||
|
|
Input,
|
||
|
|
InputNumber,
|
||
|
|
Radio,
|
||
|
|
Select,
|
||
|
|
Slider,
|
||
|
|
Switch,
|
||
|
|
TreeSelect,
|
||
|
|
Upload,
|
||
|
|
} from 'antd';
|
||
|
|
export interface DetailFormProps {
|
||
|
|
itemId: number,
|
||
|
|
operationId: string,
|
||
|
|
}
|
||
|
|
|
||
|
|
export const DetailForm: React.FC<DetailFormProps> = (props) => {
|
||
|
|
|
||
|
|
|
||
|
|
const [componentDisabled, setComponentDisabled] =
|
||
|
|
useState<boolean>(props.operationId==='1');
|
||
|
|
|
||
|
|
const { RangePicker } = DatePicker;
|
||
|
|
const { TextArea } = Input;
|
||
|
|
|
||
|
|
const normFile = (e: any) => {
|
||
|
|
if (Array.isArray(e)) {
|
||
|
|
return e;
|
||
|
|
}
|
||
|
|
return e?.fileList;
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Checkbox
|
||
|
|
checked={componentDisabled}
|
||
|
|
onChange={(e) => setComponentDisabled(e.target.checked)}
|
||
|
|
>
|
||
|
|
Form disabled
|
||
|
|
</Checkbox>
|
||
|
|
<Form
|
||
|
|
labelCol={{span: 4}}
|
||
|
|
wrapperCol={{span: 14}}
|
||
|
|
layout="horizontal"
|
||
|
|
disabled={componentDisabled}
|
||
|
|
style={{maxWidth: 600}}
|
||
|
|
>
|
||
|
|
<Form.Item label="Checkbox" name="disabled" valuePropName="checked">
|
||
|
|
<Checkbox>Checkbox</Checkbox>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item label="Radio">
|
||
|
|
<Radio.Group>
|
||
|
|
<Radio value="apple"> Apple </Radio>
|
||
|
|
<Radio value="pear"> Pear </Radio>
|
||
|
|
</Radio.Group>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item label="Input">
|
||
|
|
<Input/>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item label="Select">
|
||
|
|
<Select>
|
||
|
|
<Select.Option value="demo">Demo</Select.Option>
|
||
|
|
</Select>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item label="TreeSelect">
|
||
|
|
<TreeSelect
|
||
|
|
treeData={[
|
||
|
|
{title: 'Light', value: 'light', children: [{title: 'Bamboo', value: 'bamboo'}]},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item label="Cascader">
|
||
|
|
<Cascader
|
||
|
|
options={[
|
||
|
|
{
|
||
|
|
value: 'zhejiang',
|
||
|
|
label: 'Zhejiang',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
value: 'hangzhou',
|
||
|
|
label: 'Hangzhou',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item label="DatePicker">
|
||
|
|
<DatePicker/>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item label="RangePicker">
|
||
|
|
<RangePicker/>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item label="InputNumber">
|
||
|
|
<InputNumber/>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item label="TextArea">
|
||
|
|
<TextArea rows={4}/>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item label="Switch" valuePropName="checked">
|
||
|
|
<Switch/>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item label="Upload" valuePropName="fileList" getValueFromEvent={normFile}>
|
||
|
|
<Upload action="/upload.do" listType="picture-card">
|
||
|
|
<button style={{border: 0, background: 'none'}} type="button">
|
||
|
|
<PlusOutlined/>
|
||
|
|
<div style={{marginTop: 8}}>Upload</div>
|
||
|
|
</button>
|
||
|
|
</Upload>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item label="Button">
|
||
|
|
<Button>Button</Button>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item label="Slider">
|
||
|
|
<Slider/>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item label="ColorPicker">
|
||
|
|
<ColorPicker/>
|
||
|
|
</Form.Item>
|
||
|
|
</Form>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
|
||
|
|
}
|