tsg-web/src/views/sq/qys/gcys/projectBasicInfo/index.js

import React,{useState,useEffect} from 'react'
import { Row, Col, Form, Input, DatePicker, Button,Upload,message,Modal } from "antd"
import {PaperClipOutlined,DeleteOutlined} from '@ant-design/icons';
import NormalSelect from '../../../../../components/Form/NormalSelect';
import { formItemLayout } from '../../../../../components/crud/FormLayoutProps'
import apiurl from '../../../../../service/apiurl';
import { httpget2, httppost2 } from '../../../../../utils/request';
import moment from 'moment'
import "./index.less"
export default function ProjectBasciInfo() {
    const [form] = Form.useForm();
    const [data, setData] = useState()
    const [fileList, setFileList] = useState([]) //上传文件列表
    const [fileIds, setFileIds] = useState([])
    const [loading, setLoading] = useState(false)
    const [iframeId, setIframeId] = useState('')
    const [perviewOpen, setPerviewOpen] = useState(false)
    const [skdisabled, setSkDisabled] = useState(true)
    const optionsLevel = [
        {
            label: "大 (1)型",
            value:"1"
        },
        {
            label: "大 (2)型",
            value:"2"
        },
        {
            label: "中型",
            value:"3"
        },
        {
            label: "小 (1)型",
            value:"4"
        },
        {
            label: "小 (2)型",
            value:"5"
        },
        {
            label: "其他",
            value:"9"
        }
    ]

    const getData = async () => {
        try {
            
            const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.shuikuBasicinfo.detail)
            // debugger;
            if (res.code == 200) {
                form.setFieldsValue(res.data[0])
                setData(res.data[0])
                if (res.data[0].files.length > 0) {
                    getFileInfo(res.data[0]?.files[0]?.fileId)
                 }
            }
        } catch (error) {
            console.log(error);
        }
    }

    const beforeUpload = (file) => { 
        const isPdf = file.type === 'application/pdf'
        if (!isPdf) {
            message.error("请上传pdf文件")
        } 
        return isPdf  
    }

    const fileChange = (info) => {
   
        if (info.file.status === "done") {
            setLoading(false);
  
        }
        if (info.file.status === "uploading") { 
            setLoading(true);
   
        }
        if (info.file.status === "error") {
          message.error("文件上传失败")
            setLoading(false);
  
        }
        if (info?.file.type === "application/pdf") {
            let fileIds = info.fileList.map(file => {
              return file.response?.data?.fileId
            })
            setFileIds(fileIds)
            setFileList(info.fileList)
            
        }
      }

      const deleteFile = (fileId) => {
        let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
        setFileList(filterFile)
    }

    const onFinish = async () => {
        try {
            let oldFiles = fileList.map(item => ({ fileId: item.response?.data?.fileId }))
            const values = form.getFieldsValue();
            const params = {
                ...data,
                ...values,
                files:oldFiles
            }
            const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.shuikuBasicinfo.update,params)
            if (res.code == 200) {
                message.success("修改成功")
                setSkDisabled(true)
                getData()
            }
        } catch (error) {
            console.log(error);
            
        }
        
    }

    const getFileInfo = async(id) => {
        try {
            const res = await httpget2(`${apiurl.dataResourcesCenter.projectAndWater.shuikuBasicinfo.getFile}/${id}`)
            let obj ={
                name: res.data.fileName,
                response: {
                  data: {
                    filePath: res.data.filePath,
                    fileId:res.data.fileId
                  }
                },
              }
            setFileList([obj])
        } catch (error) {
            console.log(error);
            
        }
    }
    useEffect(() => {
        getData()
    }, [])
    
  return (
    <div className='basic-info-content'>
          <Form
              form={form}
              {...formItemLayout}
              onFinish={onFinish}
          >
            <Row>
                  <Col span={8}>
                      <Form.Item
                          label="水库名称"
                          name="resName"
                          rules={[{ required: true }]}
                      >
                          <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                      <Form.Item
                          label="水库代码"
                          name="resCode"
                          rules={[{ required: true }]}
                      >
                          <Input allowClear style={{width:'300px'}} disabled/>
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                      <Form.Item
                          label="注册登记号"
                          name="regSn"
                      >
                          <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
            </Row>
            <Row>
                  <Col span={8}>
                      <Form.Item
                          label="注册登记时间"
                          name="regTime"
                          getValueFromEvent={(e, dateString) => moment(dateString).format('YYYY-MM-DD HH:mm:ss')}
                          getValueProps={value => ({
                            value: value ? moment(value) : undefined
                          })}
                      >
                          <DatePicker allowClear style={{width:'300px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                      <Form.Item
                          label="工程位置"
                          name="resLoc"
                      >
                          <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                      <Form.Item
                          label="所在河流(水系)名称"
                          name="basName"
                      >
                          <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
            </Row>
            <Row>
                  <Col span={8}>
                      <Form.Item
                          label="水库规模"
                          name="engScal"
                          rules={[{ required: true }]}
                      >
                           <NormalSelect
                              style={{ width: '300px' }}
                              allowClear
                              options={optionsLevel}
                              disabled={skdisabled}
                            />
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                      <Form.Item
                          label="主要功能"
                          name="rsvFunction"
                          
                      >
                          <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                      <Form.Item
                          label="经度"
                          name="lgtd"
                          rules={[{ required: true }]}
                          
                      >
                          <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
            </Row>
            <Row>
                  <Col span={8}>
                      <Form.Item
                          label="纬度"
                          name="lttd"
                          rules={[{ required: true }]}
                      >
                        <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>    
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                      <Form.Item
                          label="设计灌溉面积(亩)"
                          name="designIrrArea"
                          
                      >
                          <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                      <Form.Item
                          label="实际灌溉面积(亩)"
                          name="actualIrrArea"
                          
                      >
                          <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
            </Row>
            <Row>
                  <Col span={8}>
                      <Form.Item
                          label="受益人口(人)"
                          name="feedPop"
                      >
                        <Input allowClear style={{width:'300px'}} disabled={skdisabled}/>    
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                  <Form.Item
                    label="开工日期"
                    name="startDate"
                    getValueFromEvent={(e, dateString) => moment(dateString).format('YYYY-MM-DD HH:mm:ss')}
                    getValueProps={value => ({
                    value: value ? moment(value) : undefined
                    })}
                   >
                          <DatePicker allowClear style={{ width: '300px' }} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                  <Form.Item
                    label="竣工日期"
                    name="compDate"
                    getValueFromEvent={(e, dateString) => moment(dateString).format('YYYY-MM-DD HH:mm:ss')}
                    getValueProps={value => ({
                    value: value ? moment(value) : undefined
                    })}
                   >
                         <DatePicker allowClear style={{ width: '300px' }} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
            </Row>
            <Row>
                  <Col span={8}>
                      <Form.Item
                          label="是否病险"
                          name="isDanger"
                      >
                           <NormalSelect
                              style={{ width: '300px' }}
                              allowClear
                              options={[
                                  {
                                      label: '否',
                                      value:0,
                                  },
                                  {
                                    label: '是',
                                    value:1,
                                },
                              ]}
                              disabled={skdisabled}
                            />
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                      <Form.Item
                          label="是否有闸控制"
                          name="spillwayGate"
                      >
                            <NormalSelect
                              style={{ width: '300px' }}
                              allowClear
                              options={[
                                  {
                                      label: '否',
                                      value:"0",
                                  },
                                  {
                                    label: '是',
                                    value:"1",
                                },
                              ]}
                              disabled={skdisabled}
                            />
                      </Form.Item>
                  </Col>
                  <Col span={8}>
                      <Form.Item
                          label="工程特性表"
                          name=""
                          rules={[{ required: true }]}
                      >
                               <Upload 
                                   name='file'
                                   action="/gunshiApp/xyt/attResBase/file/upload/singleSimple"
                                   onChange={fileChange}
                                   fileList={fileList}
                                   maxCount={1}
                                    disabled={loading}
                                    beforeUpload={beforeUpload}
                                    itemRender={(origin,file) => {
                                        return (
                                            <div style={{display:"flex",alignItems:"center",columnGap:10}}>
                                                 <PaperClipOutlined />
                                                <span
                                                    style={{ cursor: "pointer" }}
                                                    onClick={() => { setPerviewOpen(true); setIframeId(file.response?.data?.fileId)}}
                                                >
                                                    {file?.name}</span>
                                                {skdisabled ? null :
                                                <DeleteOutlined
                                                    style={{ marginLeft: 20, cursor: "pointer" }}
                                                    onClick={() => deleteFile(file.response?.data?.fileId)}
                                                /> 
                                                }
                                            </div>
                                        )
                                    }}
                                 >
                                     {skdisabled ? null :
                                    <div style={{display:"flex",alignItems:"center",columnGap:10,color:"#4f85ec",cursor:skdisabled?"not-allowed":"pointer"}}>
                                    <PaperClipOutlined />
                                     <a style={{cursor:"pointer"}}>上传PDF文件</a>
                                    </div>
                                     }
                                </Upload>
                      </Form.Item>
                  </Col>
            </Row>
            <Row>
                  <Col span={24}>
                      <Form.Item
                          label="供水效益"
                          name="benefit"
                          labelCol={{ span: 2, offset: 0 }}
                          wrapperCol={{span:21,offset:0}}
                      >
                            <Input allowClear disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
            </Row>
            <Row>
                  <Col span={24}>
                      <Form.Item
                          label="工程概况"
                          name="projOverview"
                          labelCol={{ span: 2, offset: 0 }}
                          wrapperCol={{span:21,offset:0}}
                      >
                          <Input.TextArea allowClear style={{width:'100%',minHeight:'100px'}} disabled={skdisabled}/>
                      </Form.Item>
                  </Col>
            </Row>
            <Row style={{marginTop:80}}>
                  <Col span={24}>
                      <Form.Item
                        wrapperCol={{span:14,offset:10}}
                      >
                          {
                              skdisabled ? <Button type="primary" onClick={() => setSkDisabled(false)}>编辑</Button> :
                                  <div style={{ display: 'flex', columnGap: 20 }}>
                                      <Button onClick={() => setSkDisabled(true)}>取消</Button>
                                      <Button type="primary" onClick={() => { onFinish() }}>保存</Button>
                               </div>   
                          }
                          
                      </Form.Item>
                  </Col>
            </Row>
          </Form>
          
          <Modal
        open={perviewOpen}
        width={1000}
        title=""
        footer={null}
        style={{marginTop:"-5%"}}
        onCancel={() => {
          setPerviewOpen(false)
        }}
      >
      <iframe
          style={{
            height: '80vh',
            width: '100%',
            border: 0,
            marginTop: 20,
          }}
         src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/attResBase/file/download/${iframeId}`)}`}
        />
      </Modal>
    </div>
  )
}