import React, { useState, useRef } from 'react';
|
import { Form, Input, Radio, Button, Modal, Upload, Message } from '@arco-design/web-react';
|
import { Col, Space, Row, Pagination, Image } from 'antd';
|
import * as $$ from '@/utils/utility';
|
import { link } from '@/assets/images';
|
import NameCard2 from '@/components/NameCard2';
|
import { question1, } from '@/assets/images';
|
import PersonCard from './personCard';
|
|
const FormItem = Form.Item;
|
const appUrl = $$.appUrl;
|
const TextArea = Input.TextArea;
|
|
function replyCaseSuperviseApi(data) {
|
return $$.ax.request({ url: `caseSupervise/replyCaseSupervise`, type: 'post', service: 'mediate', data });
|
}
|
|
|
const Response = ({ visible, handleOnCancel, caseId, responseId, data }) => {
|
const formRef = useRef()
|
const [personId, setPersonId] = useState('')
|
const [personView, setPersonView] = useState(false)
|
const [selectedTemplate, setSelectedTemplate] = useState()
|
const [imgVisible, setImgVisible] = useState({ visible: false, src: '' })
|
|
|
const handleTemplate = (type) => {
|
setSelectedTemplate(type);
|
if (type === 1) {
|
formRef.current.setFieldValue('replyContent', '双方当事人于xx时间xx地址已达成xx协议，纠纷已化解。')
|
}
|
}
|
|
const handlePersonDetail = (id) => {
|
setPersonId(id)
|
setPersonView(!personView)
|
}
|
|
|
|
//回复督办
|
const addCaseSupervise = async (submitData) => {
|
const res = await replyCaseSuperviseApi({ ...submitData, id: responseId ? responseId : data.id })
|
if (res.type) {
|
Message.success('回复成功！');
|
}
|
}
|
|
const handleSupervising = () => {
|
let data = formRef.current.getFieldsValue()
|
addCaseSupervise(data)
|
handleOnCancel()
|
}
|
|
function handleOpenFiles(record) {
|
if (record.cat === '22_00017-3') {
|
setImgVisible({ visible: true, src: `${appUrl.fileUrl}/${appUrl.sys}${record.showUrl}` });
|
} else if (record.cat === '22_00017-6' || record.cat === '22_00017-1' || record.cat === '22_00017-2') {
|
window.open(`${appUrl.fileUrl}${appUrl.fileShowUrl}${record.id}`);
|
} else {
|
$$.info({ type: 'warning', content: '抱歉，暂不支持在线查看，已下载请查看' });
|
window.open(`${appUrl.fileUrl}${appUrl.fileDownUrl}${record.id}`);
|
}
|
}
|
|
|
return (
|
<Modal visible={visible} onCancel={handleOnCancel} title='回复督办' centered footer={null} style={{ overflowY: 'auto' }}
|
unmountOnExit={true}
|
maskClosable={false}
|
autoFocus={false}
|
focusLock={false}
|
>
|
<div>
|
<Col span={24} style={{ marginBottom: '-8px' }}>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>督办意见</h5>
|
</Space>
|
</Col>
|
<Row gutter={[16, 16]}>
|
<Col span={24} >
|
<div className="title-text">督办时间</div>
|
<div>{$$.minuteFormat(data?.supTime) || '-'}</div>
|
</Col>
|
<Col span={24}>
|
<div className="title-text">督办人</div>
|
<div style={{ display: 'flex' }}>{data.supUnitName} <NameCard2 name={data.supUserName} userId={data.supUserId} />
|
</div>
|
</Col>
|
<Col span={24}>
|
<div className="title-text">督办内容</div>
|
<div>{data?.supContent || '-'}</div>
|
</Col>
|
<Col span={24}>
|
<div className="title-text">督办附件</div>
|
<div style={{ display: 'flex' }}>
|
<img src={link} alt="" className="title-file" style={{ marginTop: '4px' }} />
|
{data.fileInfoList?.[0]?.fileList?.length > 0 ?
|
<div style={{ display: 'flex', alignItems: 'center', gap: '4px', color: '#1A6FB8' }}>
|
<img src={link} alt="" className="title-file" style={{ marginTop: '4px' }} />
|
<div>
|
{data.fileInfoList?.[0]?.fileList?.map((item1, index1) =>
|
<div key={index1} onClick={() => handleOpenFiles(item1)} style={{ cursor: 'pointer' }}>{item1.name || '-'}{index1 === data.fileInfoList?.[0]?.fileList?.length - 1 ? '' : ','}</div>
|
)}
|
</div>
|
</div> : '-'
|
}
|
</div>
|
</Col>
|
</Row>
|
<Col span={24} style={{ marginTop: '20px', marginBottom: '-8px' }}>
|
<Space size='small'>
|
<div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>督办回复</h5>
|
</Space>
|
</Col>
|
<Form
|
ref={formRef}
|
layout='vertical'
|
requiredSymbol={false}
|
scrollToFirstError={true}
|
initialValues={{
|
suggestion: ''
|
}}//默认值
|
>
|
<Row>
|
<Col span={24} style={{ position: 'relative' }}>
|
<div style={{ position: 'absolute', display: 'flex', top: '28px', zIndex: 1 }}>
|
<div
|
className={`myTag ${selectedTemplate === 1 ? 'highlighted' : ''}`} // 条件样式
|
style={{ marginRight: '22px' }}
|
onClick={() => handleTemplate(1)}
|
>
|
公共模板：回复督办内容收到通用范本
|
</div>
|
</div>
|
<FormItem
|
label='回复内容'
|
field='replyContent'
|
rules={[{ message: '请填写回复内容', required: true }]}
|
>
|
<TextArea
|
autoSize={{ minRows: 4, maxRows: 8 }}
|
placeholder='请填写'
|
style={{ marginTop: '35px' }}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={24}>
|
<FormItem
|
label={<div style={{ display: 'flex', }}><div>附件材料</div><img src={question1} alt='' style={{ width: '14px', height: '14px', marginLeft: '8px', marginTop: '4px' }} /></div>}
|
field=''
|
>
|
<Upload
|
multiple
|
imagePreview
|
action={`${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&ownerId=${data?.id}&ownerType=${'22_00018-507'}`}
|
listType='picture-card'
|
headers={{ Authorization: $$.getSessionStorage('customerSystemToken') }}
|
onPreview={(file) => {
|
Message.info('click preview icon')
|
}}
|
/>
|
</FormItem>
|
</Col>
|
<Button type='primary' style={{ marginTop: '-16px', marginBottom: '32px' }} onClick={() => handleSupervising()}>提交</Button>
|
</Row>
|
</Form>
|
</div >
|
<PersonCard personView={personView} handleCancel={() => setPersonView(false)} personId={personId} />
|
<Image
|
// src={imgVisible?.src}
|
preview={{
|
visible: imgVisible?.visible,
|
src: imgVisible?.src,
|
onVisibleChange: (value) => setImgVisible({ visible: false }),
|
}}
|
/>
|
</Modal >
|
)
|
}
|
|
export default Response;
|
