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) => {
    let newFileList = [...info.fileList];
    newFileList = newFileList.slice(-1);
    // 处理文件状态
    newFileList = newFileList.map(file => {
      if (file.response) {
        return {
          ...file,
          status: 'done',  // 确保状态正确
          url: file.response.url,
          fileId: file.response.data?.fileId
        };
      }
      return file;
    });
    if (info.file.status === "done") {
      setLoading(false);
      message.success(`${info.file.name} 上传成功`);
    }
    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(newFileList)

    }
  }

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

  const onFinish = async (values) => {
    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);

    }
  }
  console.log('f', fileList);

  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: false}]}
            >
              <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              label="水库代码"
              name="resCode"
             rules={[{ required: false}]}
            >
              <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: false}]}
            >
              <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: false}]}

            >
              <Input allowClear style={{ width: '300px' }} disabled={skdisabled} />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={8}>
            <Form.Item
              label="纬度"
              name="lttd"
             rules={[{ required: false}]}
            >
              <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=""
              
            >
              <Upload
                name='file'
                action="/gunshiApp/tsg/attResBase/file/upload/singleSimple"
                onChange={fileChange}
                fileList={fileList}
                maxCount={1}
                disabled={loading}
                beforeUpload={beforeUpload}
                showUploadList={false}
              >
                {fileList.map(file => (
                  <div key={file.uid} style={{ display: "flex", alignItems: "center", columnGap: 10 }}>
                    <PaperClipOutlined />
                    <span
                      style={{ cursor: "pointer" }}
                      onClick={(e) => {
                        e.stopPropagation(); // 阻止触发上传
                        if (file.response?.data?.fileId) {
                          setPerviewOpen(true);
                          setIframeId(file.response.data.fileId);
                        }
                      }}
                    >
                      {file.name}
                    </span>
                    {!skdisabled && (
                      <DeleteOutlined
                        style={{ marginLeft: 20, cursor: "pointer" }}
                        onClick={(e) => {
                          e.stopPropagation(); // 阻止触发上传
                          deleteFile(file.response?.data?.fileId);
                        }}
                      />
                    )}
                  </div>
                ))}
                {!skdisabled && fileList.length === 0 && (
                  <div style={{
                    display: "flex",
                    alignItems: "center",
                    columnGap: 10,
                    color: "#4f85ec",
                    cursor: "pointer"
                  }}>
                    <PaperClipOutlined />
                    <a>上传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"  htmlType="submit">保存</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/tsg/attResBase/file/download/${iframeId}`)}`}
        />
      </Modal>
    </div>
  )
}