92 lines
2.4 KiB
TypeScript
92 lines
2.4 KiB
TypeScript
|
import React from 'react';
|
|||
|
|
import { Button, Form, Input, Modal, Upload, Select } from 'antd';
|
|||
|
|
import { UploadOutlined } from '@ant-design/icons';
|
|||
|
|
|
|||
|
|
interface CreateDocumentProps {
|
|||
|
|
//新增文档标题参数
|
|||
|
|
title: string;
|
|||
|
|
//控制弹出参数
|
|||
|
|
modalVisible: boolean;
|
|||
|
|
//返回参数
|
|||
|
|
onCancel: () => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const layout = {
|
|||
|
|
labelCol: { span: 7 },
|
|||
|
|
wrapperCol: { span: 12 },
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const validateMessages = {
|
|||
|
|
required: '请填写${label}',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const CreateDocument: React.FC<CreateDocumentProps> = (props) => {
|
|||
|
|
const { modalVisible, onCancel, title } = props;
|
|||
|
|
|
|||
|
|
const { Option } = Select;
|
|||
|
|
const { TextArea } = Input;
|
|||
|
|
const [form] = Form.useForm();
|
|||
|
|
|
|||
|
|
const onFinish = (values: any) => {
|
|||
|
|
console.log(values);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Modal
|
|||
|
|
destroyOnClose
|
|||
|
|
title={title}
|
|||
|
|
visible={modalVisible}
|
|||
|
|
onCancel={() => onCancel()}
|
|||
|
|
okText="保存"
|
|||
|
|
cancelText="取消"
|
|||
|
|
width={800}
|
|||
|
|
>
|
|||
|
|
<Form
|
|||
|
|
{...layout}
|
|||
|
|
form={form}
|
|||
|
|
name="nest-messages"
|
|||
|
|
onFinish={onFinish}
|
|||
|
|
validateMessages={validateMessages}
|
|||
|
|
>
|
|||
|
|
<span
|
|||
|
|
style={{
|
|||
|
|
float: 'right',
|
|||
|
|
marginRight: 221,
|
|||
|
|
marginTop: -22,
|
|||
|
|
position: 'relative',
|
|||
|
|
top: 25,
|
|||
|
|
color: '#808080',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
最多上传一个文件，每个最大50MB
|
|||
|
|
</span>
|
|||
|
|
<Form.Item label="选择文档" rules={[{ required: true }]}>
|
|||
|
|
<Upload>
|
|||
|
|
<Button type="primary">
|
|||
|
|
<UploadOutlined />
|
|||
|
|
上传
|
|||
|
|
</Button>
|
|||
|
|
</Upload>
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label="文档类型" rules={[{ required: true }]}>
|
|||
|
|
<Input placeholder="请填写文档类型" />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label="存档目录" rules={[{ required: true }]}>
|
|||
|
|
<Select style={{ width: 200 }} placeholder="请选择" optionFilterProp="children">
|
|||
|
|
<Option value="jack">项目建档</Option>
|
|||
|
|
<Option value="lucy">谈判邀请</Option>
|
|||
|
|
<Option value="tom">谈判准备</Option>
|
|||
|
|
<Option value="tom1">项目谈判</Option>
|
|||
|
|
<Option value="tom2">谈判结果</Option>
|
|||
|
|
</Select>
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item label="文档说明" rules={[{ required: true }]}>
|
|||
|
|
<TextArea rows={6} maxLength={2000} placeholder="请填写文档说明" />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
</Modal>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default CreateDocument;
|