348 lines
12 KiB
JavaScript
348 lines
12 KiB
JavaScript
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,FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined,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,submit }) => {
|
|
console.log(record);
|
|
|
|
const [form] = Form.useForm();
|
|
const [imgfileList, setImgFileList] = useState([]) //上传文件列表
|
|
const [videoFileList, setVideoFileList] = useState([]) //上传文件列表
|
|
const [handleImgfileList, setHandleImgFileList] = useState([]) //上传文件列表
|
|
const [handleVideoFileList, setHandleVideoFileList] = useState([]) //上传文件列表
|
|
const [videoOpen, setVideoOpen] = useState(false)
|
|
const [videoParams, setVideoParams] = useState({})
|
|
|
|
const onfinish = (values) => {
|
|
if (mode === 'edit') {
|
|
values.id = record.id;
|
|
onEdit(apiurl.rcgl.xcxj.xjrw.edit,values)
|
|
}
|
|
if (mode === 'save') {
|
|
onSave(apiurl.rcgl.xcxj.xjrw.save,values)
|
|
}
|
|
}
|
|
const handleFile = (arr=[]) => {
|
|
const newArr = arr?.map(item => ({
|
|
name: item.fileName,
|
|
response: {
|
|
data: {
|
|
filePath: item.filePath,
|
|
fileId:item.fileId
|
|
}
|
|
},
|
|
}))
|
|
return newArr
|
|
}
|
|
useEffect(() => {
|
|
if (mode != 'save') {
|
|
// const imgFile = record?.inspectPics?.map(o => ({
|
|
// name: o.fileName,
|
|
// response: {
|
|
// data: {
|
|
// filePath: o.filePath,
|
|
// fileId:o.fileId
|
|
// }
|
|
// },
|
|
// }))
|
|
const imgFile = handleFile(record?.inspectPics);
|
|
const videoFile = handleFile(record?.inspectVideos);
|
|
const handleImgFile = handleFile(record?.handlePics);
|
|
const hanldeVideoFile = handleFile(record?.handleVideos);
|
|
setImgFileList(imgFile)
|
|
setVideoFileList(videoFile)
|
|
setHandleImgFileList(handleImgFile)
|
|
setHandleVideoFileList(hanldeVideoFile)
|
|
form.setFieldsValue({
|
|
...record,
|
|
handleTime: record.handleTime ? moment(record.handleTime) : '',
|
|
finishTime: record.finishTime? moment(record.finishTime) : ''
|
|
})
|
|
}
|
|
}, [record, mode])
|
|
|
|
|
|
|
|
return (
|
|
<div style={{maxHeight:"70vh",overflowY:"auto"}}>
|
|
<div
|
|
style={{ marginBottom: 20, borderBottom: "1px solid #dfdfdf", width: "100%", paddingBottom: 5 }}>
|
|
<span style={{ padding: "0px 3px", backgroundColor: "#0079fe", marginRight: 20 }}></span>巡检信息</div>
|
|
<Form
|
|
form={form}
|
|
{...formItemLayout}
|
|
onFinish={onfinish}
|
|
>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
label="任务标题"
|
|
name="taskTitle"
|
|
>
|
|
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
label="巡检点"
|
|
name="name"
|
|
>
|
|
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
label="巡查项"
|
|
name="itemDesc"
|
|
>
|
|
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={24}>
|
|
<Form.Item
|
|
label="巡检问题描述"
|
|
name="problemDesc"
|
|
labelCol={{ span: 3 }}
|
|
wrapperCol={{ span: 19 }}
|
|
>
|
|
<Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'100px'}} allowClear />
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
|
|
<Row>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
label="巡查人"
|
|
name="inspectUserName"
|
|
>
|
|
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
|
</Form.Item>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
label="巡查时间"
|
|
name="finishTime"
|
|
>
|
|
<DatePicker disabled={mode==='view'} format={'YYYY-MM-DD HH:mm:ss'} style={{width:'100%'}} allowClear />
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={24}>
|
|
<Form.Item
|
|
label="巡查图片"
|
|
name="picId"
|
|
labelCol={{ span: 3 }}
|
|
wrapperCol={{ span: 19 }}
|
|
>
|
|
<Row gutter={[16]}>
|
|
{
|
|
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 style={{display: 'inline-block',maxWidth: '180px',overflow: 'hidden',textOverflow: 'ellipsis',whiteSpace: 'nowrap'}}>{file.name}</span>
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
)
|
|
})
|
|
}
|
|
</Row>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={24}>
|
|
<Form.Item
|
|
label="巡查视频"
|
|
name="picId"
|
|
labelCol={{ span: 3 }}
|
|
wrapperCol={{ span: 19 }}
|
|
>
|
|
<Row gutter={[16]}>
|
|
{
|
|
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 style={{display: 'inline-block',maxWidth: '180px',overflow: 'hidden',textOverflow: 'ellipsis',whiteSpace: 'nowrap'}}>{file.name}</span>
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
)
|
|
})
|
|
}
|
|
</Row>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
<div
|
|
style={{ marginBottom: 20, borderBottom: "1px solid #dfdfdf", width: "100%", paddingBottom: 5 }}>
|
|
<span style={{ padding: "0px 3px", backgroundColor: "#0079fe", marginRight: 20 }}></span>处理信息</div>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
label="处理状态"
|
|
name="isHandle"
|
|
>
|
|
<NormalSelect
|
|
disabled={mode === 'view'}
|
|
style={{ width: '100%' }}
|
|
allowClear
|
|
options={[{label:"待处理",value:0},{label:"已处理",value:1}]} />
|
|
</Form.Item>
|
|
</Col>
|
|
{
|
|
(record?.isHandle || record?.isHandle == 0) ?
|
|
<Col span={12}>
|
|
<Form.Item
|
|
label="处理人"
|
|
name="handleUserName"
|
|
>
|
|
<Input disabled={mode==='view'} style={{width:'100%'}} />
|
|
</Form.Item>
|
|
</Col> : null
|
|
}
|
|
</Row>
|
|
{
|
|
record?.isHandle ?
|
|
<>
|
|
<Row>
|
|
<Col span={12}>
|
|
<Form.Item
|
|
label="处理时间"
|
|
name="handleTime"
|
|
>
|
|
<DatePicker disabled={mode==='view'} format={'YYYY-MM-DD HH:mm:ss'} style={{width:'100%'}} allowClear />
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={24}>
|
|
<Form.Item
|
|
label="处理内容"
|
|
name="handleDesc"
|
|
labelCol={{ span: 3 }}
|
|
wrapperCol={{ span: 19 }}
|
|
>
|
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={24}>
|
|
<Form.Item
|
|
label="处理图片"
|
|
name="picId"
|
|
labelCol={{ span: 3 }}
|
|
wrapperCol={{ span: 19 }}
|
|
>
|
|
<Row gutter={[16]}>
|
|
{
|
|
handleImgfileList?.length > 0 && handleImgfileList.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 style={{display: 'inline-block',maxWidth: '180px',overflow: 'hidden',textOverflow: 'ellipsis',whiteSpace: 'nowrap'}}>{file.name}</span>
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
)
|
|
})
|
|
}
|
|
</Row>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col span={24}>
|
|
<Form.Item
|
|
label="处理视频"
|
|
name="picId"
|
|
labelCol={{ span: 3 }}
|
|
wrapperCol={{ span: 19 }}
|
|
>
|
|
<Row gutter={[16]}>
|
|
{
|
|
handleVideoFileList?.length > 0 && handleVideoFileList.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 style={{display: 'inline-block',maxWidth: '180px',overflow: 'hidden',textOverflow: 'ellipsis',whiteSpace: 'nowrap'}}>{file.name}</span>
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
)
|
|
})
|
|
}
|
|
</Row>
|
|
</Form.Item>
|
|
</Col>
|
|
</Row>
|
|
</> : null
|
|
}
|
|
<Form.Item {...btnItemLayout}>
|
|
<Button type="primary" onClick={() => submit()}>
|
|
关闭
|
|
</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>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ModalForm;
|