tsg-web/src/views/sz/szzf/clyj/form.js

import React, { useEffect, useState, useMemo, useRef } from 'react';
import { Space, Table, Radio, DatePicker, Form, Select, Button, message, Upload, Input, Row, Col, Switch, Image } from 'antd';
import { DeleteOutlined, FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';

import apiurl from '../../../../service/apiurl';

// import "./index.less"
import moment from 'moment';
const { TextArea } = Input;

const options=[
  {label:'禁用'},
  {label:'启用'}
]
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {

  const [form] = Form.useForm();
  const [fileList, setFileList] = useState([]) //上传文件列表

  const [loading, setLoading] = useState(false)




  const onfinish = (values) => {
    values.eventsDate = values.eventsDate ? moment(values.eventsDate).format("YYYY-MM-DD 00:00:00") : ''
    let oldFiles = fileList.map(item => ({ fileId: item.response?.data?.fileId }))
    if (mode === 'edit') {
      values.files = oldFiles;
      values.id = record.id;
      onEdit(apiurl.rcgl.gcdsj.edit, values)
    }
    if (mode === 'save') {
      values.files = oldFiles
      onSave(apiurl.rcgl.gcdsj.save, values)
    }
  }
  useEffect(() => {
    if (mode != 'save') {
      const imgFile = record?.files?.map(o => ({
        name: o.fileName,
        response: {
          data: {
            filePath: o.filePath,
            fileId: o.fileId
          }
        },
      }))
      setFileList(imgFile)
    }
  }, [record, mode])



  return (
    <>
      <Form
        form={form}
        {...formItemLayout}
        onFinish={onfinish}
        initialValues={record}
      >
        <Row>
          <Col span={24}>
            <Form.Item
              label="节点"
              name="name"
              rules={[{ required: true }]}
            >
              <Input disabled style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              label="状态"
              name="name"
              rules={[{ required: true }]}
            >
              <Radio.Group options={options}/>
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              label="法律名称"
              name="name"
              rules={[{ required: true }]}
            >
              <Input  style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              label="法条内容"
              name="name"
            >
              <Input  style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>

          <Col span={24}>
            <Form.Item
              label="违法行为描述"
              name="name"
            >
              <TextArea rows={4}  />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              label="处罚措施"
              name="name"
            >
              <TextArea rows={4} />
            </Form.Item>
          </Col>

        </Row>

        {
          mode === 'view' ? null : (
            <>
              <Form.Item {...btnItemLayout}>
                <Button type="primary" htmlType="submit">
                  {mode === 'save' ? '提交' : '修改'}
                </Button>
              </Form.Item>
            </>
          )
        }
      </Form>

    </>
  );
}

export default ModalForm;