tsg-web/src/views/sz/ywgz/form.js

import React, { useEffect, useState, useMemo, useRef } from 'react';
import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Select } 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 NormalSelect from '../../../components/Form/NormalSelect';
import FileUpload from '../../../components/Form/FileUpload'

// import "./index.less"
import moment from 'moment';
import TextArea from 'antd/lib/input/TextArea';

  const opntios = [
    {value:1,label:'水资源调度'},
    {value:2,label:'防洪调度'},
    {value:3,label:'工程安全'},
    {value:4,label:'应急抢险'},
    {value:5,label:'其他'},
  ]
  
const opntios1 = [
    {value:0,label:'已废弃'},
    {value:1,label:'生效中'},
  ]
const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false)
  const [filesParams, setFilesParams] = useState([])
  const onfinish = (values) => {
    const userId = localStorage.getItem("userId");
    const userName = localStorage.getItem("userName");
    values.tm = moment(values.bzsj).format("YYYY-MM-DD")
    if (mode === 'edit') {
      onEdit(apiurl.zsk.ywgz.edit, { ...record, ...values, createUser: userName, fileIds: filesParams, files:undefined})
    }
    if (mode === 'save') {
      onSave(apiurl.zsk.ywgz.save, {...values,createUser:userName,fileIds:filesParams,files:undefined})
    }
  }

useEffect(() => {
  if (mode != 'save') {
    const tm = record?.tm ? moment(record?.tm) : '';
    form.setFieldValue('bzsj', tm)
    if (record?.files.length > 0) {
      setFilesParams(record?.files)
    }
 }
}, [mode,record])




  return (
    <>
      <Form
        form={form}
        {...formItemLayout}
        onFinish={onfinish}
        initialValues={record}
      >
        <Row>
          <Col span={12}>
            <Form.Item
              label="规则名称"
              name="name"
              rules={[{ required: true }]}
            >
              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear placeholder='请输入'/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item 
              label="规则类型" 
              name="type" 
              rules={[{ required: true }]}
            >
              <Select allowClear disabled={mode === 'view'} style={{ width: '100%' }} options={opntios} placeholder='请选择' />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="编制时间"
              name="bzsj"
              rules={[{ required: true }]}
              getValueFromEvent={(e, dateString) => dateString}
              getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
            >
              <DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="状态"
              name="status"
              rules={[{ required: true }]}
            >
              <Select allowClear disabled={mode === 'view'} style={{ width: '100%' }} options={opntios1} placeholder='请选择' />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              label="简介"
              name="content"
              labelCol={{ span: 3 }}
              wrapperCol={{ span: 19 }}
            >
              <Input.TextArea allowClear disabled={mode === 'view'} style={{ width: '100%',height:'15vh' }} placeholder='请输入'/>
            </Form.Item>
          </Col>
        </Row>
        <Row>
            <Col span={24}>
            <Form.Item
              label="附件"
              name="files"
              labelCol={{ span: 3 }}
              wrapperCol={{ span: 19 }}
            >
                <FileUpload 
                  mode={mode} 
                  fileNum={999}
                  uploadUrl={apiurl.zsk.ywgz.upload}
                onChange={(v) => { setFilesParams(v);console.log("vvvv",v);
                 }}
                value={filesParams}
                />
            </Form.Item>
            </Col>
        </Row>   
        {
          mode === 'view' ? null : (
            <>
              <Form.Item {...btnItemLayout}>
                <Button type="primary" htmlType="submit" loading={loading}>
                  {mode === 'save' ? '提交' : '修改'}
                </Button>
              </Form.Item>
            </>
          )
        }
      </Form>
    </>
  );
}

export default ModalForm;