461 lines
17 KiB
JavaScript
461 lines
17 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) => {
|
|
|
|
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/tsg/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/tsg/attResBase/file/download/${iframeId}`)}`}
|
|
/>
|
|
</Modal>
|
|
</div>
|
|
)
|
|
}
|