tsg-web/src/views/rcgl/wxyh/form.js

import React,{useEffect,useState,useMemo,useRef} from 'react';
import { Form, Button, Input, Row,Upload, Col, Table, DatePicker, InputNumber,message,Image,Modal,Typography ,Popconfirm } from 'antd';
import { DeleteOutlined,VideoCameraOutlined } from '@ant-design/icons';
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';

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

import NormalSelect from '../../../components/Form/NormalSelect';

import "./index.less"
import moment from 'moment';
const { RangePicker } = DatePicker
const { Dragger } = Upload;
const url = "http://223.75.53.141:9100/gs-tsg"

const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
  
  const types = [
    {label:"溢洪道淸障",value:1},
    {label:"除草除杂",value:2},
    {label:"设备养护",value:3},
    {label:"环境清洁",value:4},
    {label:"危险提示",value:5},
    {label:"其他",value:6},
  ]
  const [form] = Form.useForm();
  const [imgloading, setImgLoading] = useState(false)
  const [imgfileList, setImgFileList] = useState([]) //上传文件列表
  const [videoFileList, setVideoFileList] = useState([]) //上传文件列表
  const [videoLoading, setVideoLoading] = useState(false)
  const [videoOpen, setVideoOpen] = useState(false)
  const [videoParams, setVideoParams] = useState({})

  const videoDeleteFile = (fileId) => {
    let filterFile = videoFileList.filter(item => item.response?.data?.fileId !== fileId);
    setVideoFileList(filterFile)
  }
  const videoBeforeUpload = (file) => {
    if (videoFileList.length == 1) {
      message.warning('只能上传一个视频！');
      return false;
    }
    const isJpgOrPng =
      file.type === 'video/mp4' ||
      file.type === 'video/avi';
    if (!isJpgOrPng) {
      message.error('请上传视频格式的文件！');
    }
    const isLt2M = file.size / 1024 / 1024 < 50;
    if (!isLt2M) {
      message.error('视频大小需小于50M!');
    }
    return isJpgOrPng && isLt2M  ? true : Upload.LIST_IGNORE;
  };
  const videoFileChange = (info) => {
    if (info.file.status === "done") {
      setVideoLoading(false);
    setVideoFileList(info.fileList)
    }
    if (info.file.status === "uploading") { 
      setVideoLoading(true);
    }
    if (info.file.status === "error") {
      message.error("文件上传失败")
      setVideoLoading(false);
    }
    setVideoFileList(info.fileList)
  }

  
 
  const onfinish = (values) => {
    const userId =  localStorage.getItem('userId')
    values.reportTime = values.reportTime?moment(values.reportTime).format("YYYY-MM-DD 00:00:00"):''
    let imgFiles = imgfileList.map(item => ({fileId:item.response?.data?.fileId}) )
    let videoFiles = videoFileList.map(item => ({ fileId: item.response?.data?.fileId }))
    values.pics = imgFiles;
    values.videos = videoFiles;
    values.userId = userId
    if (mode === 'edit') {
   
      values.id = record.id;
      onEdit(apiurl.rcgl.wxyh.edit,values)
    }
    if (mode === 'save') {
      onSave(apiurl.rcgl.wxyh.save,values)
    }
  }
  
  const imgbeforeUpload = (file) => {
    const isJpgOrPng =
      file.type === 'image/jpeg' ||
      file.type === 'image/jpg' ||
      file.type === 'image/png';
    
    if (!isJpgOrPng) {
      message.error('请上传图片格式的文件！');
    }
    const isLt2M = file.size / 1024 / 1024 < 5;
    if (!isLt2M) {
      message.error('图片大小需小于5M!');
    }
    return isJpgOrPng && isLt2M ? true : Upload.LIST_IGNORE;
  };

  const imgdeleteFile = (fileId) => {
    let filterFile = imgfileList.filter(item => item.response?.data?.fileId !== fileId);
    setImgFileList(filterFile)
  }
  const imgfileChange = (info) => {
    console.log("info",info);
    if (info.file.status === "done") {
      setImgLoading(false);
    }
    if (info.file.status === "uploading") {
      setImgLoading(true);
    }
    if (info.file.status === "error") {
      message.error("文件上传失败")
      setImgLoading(false);
    }
    setImgFileList(info.fileList)
  }
    useEffect(() => {
      if (mode != 'save') {
        const imgFile = record?.pics?.map(o => ({
          name: o.fileName,
          response: {
                data: {
                  filePath: o.filePath,
                  fileId:o.fileId
                }
              },
        }))
        const videoFile = record?.videos?.map(o => ({
          name: o.fileName,
          response: {
                data: {
                  filePath: o.filePath,
                  fileId:o.fileId
                }
              },
        }))
        setImgFileList(imgFile)
        setVideoFileList(videoFile)
      }
    }, [record, mode])

 useEffect(() => {
   const name = localStorage.getItem('userName')
   form.setFieldValue("reportUserName", name)
 }, [])
 
 
  return (
    <>
      <Form
        form={form}
        {...formItemLayout}
        onFinish={onfinish}
        initialValues={record}
      >
      <Row>
          <Col span={12}>
              <Form.Item
                label="时间"
                name="reportTime"
                getValueFromEvent={(e,dateString) => dateString}
                getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <DatePicker disabled={mode==='view'} format={'YYYY-MM-DD'} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>  
          <Col span={12}>
              <Form.Item
                label="上报人"
                name="reportUserName"
              >
                <Input disabled={true} style={{width:'100%'}} allowClear />
              </Form.Item>
          </Col>
      </Row>
      <Row>
          <Col span={12}>
              <Form.Item
                label="管护类型"
                name="maintainType"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
              <NormalSelect allowClear style={{ width: '100%' }} options={types} />
              </Form.Item>
          </Col>  
      </Row>          
      <Row>
          <Col span={24}>
              <Form.Item
                label="内容"
                name="maintainContent"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
              <Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'100px'}} allowClear />
              </Form.Item>
          </Col>  
      </Row>
      <Row>
          <Col span={24}>
              <Form.Item
                label="现场图片"
                name="picId"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
            >
                {mode !== "view" && 
                <Dragger
                name='file'
                // multiple
                action="/gunshiApp/tsg/maintain/service/file/upload/singleSimple"
                onChange={imgfileChange}
                beforeUpload={imgbeforeUpload}
                onDrop={(info) => { console.log(info); }}
                  fileList={imgfileList}
                  disabled={imgloading}
              >
                   <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
                  <p className="ant-upload-hint">
                    支持扩展名：.jpg .png 
                </p>
              </Dragger>
              } 
              <Row gutter={[16]}>
              {
                  //  imgloading ? <span>文件正在上传中，请等待</span> :
                  imgfileList.length > 0 && imgfileList.map(file => {
                  return (
                      <Col span={12}>
                        <div className={mode == "view" ? 'file-item view-file' : 'file-item'}  >
                        <div className='file-description'>
                            <Image width={60} src={url +file.response?.data?.filePath} alt='' />
                            <span>{file.name}</span>
                          </div>
                        <div
                          className={mode == "view" ? 'delete-icon disable-icon' : 'delete-icon'}
                          onClick={() => imgdeleteFile(file.response?.data?.fileId)}
                        >
                          <DeleteOutlined
                          />
                          </div>
                        </div>
                      </Col>
                  )
                })
                }
              </Row>
              </Form.Item>
          </Col>
       </Row>
       <Row>
          <Col span={24}>
              <Form.Item
                label="视频资料"
                name="videofieldId"
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 19 }}
              >
              {mode !== "view" && 
                <Dragger
                name='file'
                action="/gunshiApp/tsg/maintain/service/file/upload/singleSimple"
                onChange={videoFileChange}
                beforeUpload={videoBeforeUpload}
                onDrop={(info) => { console.log(info); }}
                fileList={videoFileList}
                maxCount={1}
              >
                  <p className="ant-upload-text">点击或拖拽文件到此区域上传(最大50M)</p>
                  <p className="ant-upload-hint">
                    支持扩展名：.mp4 .avi
                </p>
              </Dragger>
              }
              <Row gutter={[16]}>
                {
                  //  videoLoading ? <span>文件正在上传中，请等待</span> :
                  videoFileList.length > 0 && videoFileList.map(file => {
                  return (
                      <Col span={12}>
                        <div className={mode == "view" ? 'file-item view-file' : 'file-item'}  >
                        <div className='file-description'>
                        <div
                            onClick={() => { setVideoOpen(true); setVideoParams(file)}}
                              style={{ cursor: 'pointer' }}
                            >
                              <VideoCameraOutlined
                              style={{ fontSize: 40 }}
                            />
                            </div>
                            <span>{file.name}</span>
                          </div>
                        <div
                          className={mode == "view" ? 'delete-icon disable-icon' : 'delete-icon'}
                          onClick={() => videoDeleteFile(file.response?.data?.fileId)}
                        >
                          <DeleteOutlined
                          />
                          </div>
                        </div>
                      </Col>
                  )
                })
                }

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

      <Modal
        open={videoOpen}
        width={800}
        title="视频预览"
        footer={null}
        onCancel={() => setVideoOpen(false)}
      >
        <video
          controls
          src={url + videoParams?.response?.data?.filePath}
          style={{width:"100%",height:"100%"}}
        />
      </Modal>
    </>
  );
}

export default ModalForm;