494 lines
14 KiB
JavaScript
494 lines
14 KiB
JavaScript
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);
|
|
getData();
|
|
}}>取消</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>
|
|
)
|
|
}
|