tsg-web/src/views/sz/szzf/ajdj/bajz.js

import { Space, Table, Radio, DatePicker, Form, Select, Button, message, Upload, Input, Row, Col, Switch, Image } from 'antd';
import { InboxOutlined, LinkOutlined, DeleteOutlined, LoadingOutlined,VerticalAlignBottomOutlined } from '@ant-design/icons'
import { useForm } from 'antd/lib/form/Form';
import { useState } from 'react';
const { Dragger } = Upload;

const list = [
    {
        type:'立案'
    },
    {
        type:'调查取证'
    },
    {
        type:'审查处理'
    },
    {
        type:'送达执行'
    },
    {
        type:'结案'
    }
]
const Page = () => {
    const [form] = Form.useForm();
    const [fileList ,setFileList] =useState()
    const props = {
        name: 'file',
        multiple: true,
        fileList: fileList,
        showUploadList: false,
        beforeUpload: (file, fileList) => { 
            // if (fileType == "pic" &&
            //     (file.type != "image/jpeg" || file.type != "image/png" || file.type != "image/jpg")) {
            //     message.error('仅支持上传jpg/png/jpeg格式的图片');
            //     return false;
            // } else {
            //     return true;
            // }
        },
        onChange(e) {
            // httpPostFile(apiUrl.service.uploadFile.uploadUrl + "?group=" + typeUpload, e).then(res => {
            //     setFileList([...fileList, res.data])
            // })
        }
    };
    const onFinish = () =>{

    }
    return (
        <Form form={form}  onFinish={onFinish} >
            <Row>
            <Col span={2}>
                <div style={{display:'flex',alignItems:'center'}}>
                    <div style={{width:3,height:12,background:'#259def',marginRight:5}}></div>
                    案卷存档</div>
                </Col>
                <Col span={10}>
                    <Form.Item
                        label='保管人员'
                        name='name'
                    >
                        <Input />
                    </Form.Item>
                </Col>
                <Col span={10}>
                    <Form.Item
                        label='保管地点'
                        name='adress'
                    >
                        <Input />
                    </Form.Item>
                </Col>
            </Row>
            {list.map(item=>(
                <Row>
                <Col span={2}>
                <div style={{display:'flex',alignItems:'center'}}>
                <div style={{width:3,height:12,background:'#259def',marginRight:5}}></div>
                    {item.type}</div>
                </Col>
                <Col span={22}>
                    <Form.Item
                        label='附件'
                        name='name'
                    >
                        <Dragger {...props}>
                            <p className="ant-upload-drag-icon">
                                <InboxOutlined />
                            </p>
                            <p className="ant-upload-text">点击或将文件拖拽到这里上传 支持扩展名：jpeg、png</p>
                        </Dragger>
                    </Form.Item>
                </Col>
            </Row>))}
        </Form >

    )
}

export default Page