/*
|
* @Author: dminyi 1301963064@qq.com
|
* @Date: 2024-09-06 09:54:09
|
* @LastEditors: lwh
|
* @LastEditTime: 2025-01-02 14:54:02
|
* @FilePath: \gzDyh\gz-customerSystem\src\views\register\matterDetail\Supervising.jsx
|
* @Description: 督办
|
*/
|
import React, { useState, useEffect, useRef } from 'react';
|
import { Radio, Button } from '@arco-design/web-react';
|
import { Image, Empty } from 'antd';
|
import { link, register } from '@/assets/images';
|
import { timeLimit, empty } from '@/assets/images';
|
import * as $$ from '@/utils/utility';
|
import ModeSelect from './ModeSelect'
|
import { Scrollbars } from "react-custom-scrollbars";
|
import PersonCard from './personCard';
|
import NameCard2 from '@/components/NameCard2';
|
import Response from './response';
|
import ResponseDetail from './responseDetail';
|
|
|
const RadioGroup = Radio.Group;
|
const appUrl = $$.appUrl;
|
|
|
function delFile(id) {
|
return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'get', service: 'sys', data: { id } });
|
}
|
|
function pageCaseSuperviseApi(data) {
|
return $$.ax.request({ url: `caseSupervise/pageCaseSupervise`, type: 'get', service: 'mediate', data });
|
}
|
|
|
|
|
const SupervisingView = (props) => {
|
const [radioValue, setRadioValue] = useState('1')
|
const [response, setResponse] = useState('')
|
const [detail, setDetail] = useState(false);
|
const [mode, SetMode] = useState(false);
|
const [supData, setSupData] = useState([]);
|
const [data, setData] = useState({})
|
const [totalNum, setTotalNum] = useState('');
|
const [personView, setPersonView] = useState(false)
|
const [personId, setPersonId] = useState('')
|
const [imgVisible, setImgVisible] = useState({ visible: false, src: '' })
|
const [searchData, setSearchData] = useState({//查询有关数据
|
page: '1',
|
size: 10,
|
caseId: '',
|
supStatus: 0
|
})
|
|
|
|
|
|
const handleResponse = (id) => {
|
let data = supData?.filter(item => item.id === id)
|
setData(data?.[0])
|
setResponse(!response)
|
}
|
|
const handleDetail = (id) => {
|
let data = supData?.filter(item => item.id === id)
|
setData(data?.[0])
|
setDetail(!detail)
|
}
|
|
|
//删除文件
|
const handleDelFile = async (id) => {
|
const res = await delFile(id)
|
if (res.type) {
|
$$.infoSuccess({ content: '删除成功！' });
|
}
|
}
|
|
//督办列表
|
const pageCaseSupervise = async (searchData, type) => {
|
const res = await pageCaseSuperviseApi({ ...searchData, caseId: props.caseId, supStatus: type === '2' ? 1 : 0, type: 2 })
|
if (res.type) {
|
let data = res.data.content
|
let total = res.data.totalElements
|
setSupData(data)
|
if (type !== '2') {
|
setTotalNum(total)
|
}
|
}
|
}
|
|
|
const handleRadioValue = (v) => {
|
console.log(v, 'vvvvvvv')
|
setRadioValue(v)
|
pageCaseSupervise({ ...searchData }, v)
|
}
|
|
|
const handlePersonDetail = (id) => {
|
setPersonId(id)
|
setPersonView(!personView)
|
}
|
|
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}`);
|
}
|
}
|
|
useEffect(() => {
|
pageCaseSupervise(searchData)
|
}, [])
|
|
return (
|
<Scrollbars
|
autoHide
|
autoHeight
|
autoHeightMin={200} // 最小高度为300px
|
autoHeightMax={1000}
|
>
|
<RadioGroup
|
type='button'
|
name='lang'
|
defaultValue='1'
|
style={{ display: 'flex', margin: '0 16px 0px 16px', }}
|
value={radioValue}
|
onChange={(v) => handleRadioValue(v)}
|
>
|
<Radio value='1' style={{ flex: 1, textAlign: 'center' }} >未回复（{totalNum > 99 ? '99+' : totalNum}）</Radio>
|
<Radio value='2' style={{ flex: 1, textAlign: 'center' }}>已回复</Radio>
|
</RadioGroup>
|
{
|
radioValue === '1' &&
|
<>
|
{supData?.length > 0 ? supData?.map((item, index) => (
|
<>
|
<div className='Supervising' key={index}>
|
<div style={{ backgroundColor: '#FFF7E8', padding: '5px 16px', display: 'flex' }}>
|
<img src={timeLimit} alt='' style={{ width: '16px', height: '16px', marginRight: '8px', marginTop: '6px' }} />
|
<div>回复时限剩{$$.getRemainingTime(item.supTime, item.replyTerm).hours}小时</div>
|
</div>
|
<div className='Supervising-item'>
|
<div className='Supervising-item-title'>督办时间：</div>
|
<div>{$$.minuteFormat(item.supTime)}</div>
|
</div>
|
<div className='Supervising-item'>
|
<div className='Supervising-item-title' style={{ width: '100px' }}>督办人：</div>
|
<div style={{ display: 'flex' }}>{item.supUnitName} <NameCard2 name={item.supUserName} userId={item.supUserId} /></div>
|
</div>
|
<div className='Supervising-item'>
|
<div className='Supervising-item-title' style={{ width: '80px' }}>督办内容：</div>
|
<div style={{ flex: 1 }}>{item.supContent}</div>
|
</div>
|
<div className='Supervising-item'>
|
<div className='Supervising-item-title'>督办附件：</div>
|
{item.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>
|
{item.fileInfoList?.[0]?.fileList?.map((item1, index1) =>
|
<div key={index1} onClick={() => handleOpenFiles(item1)} style={{ cursor: 'pointer' }}>{item1.name || '-'}{index1 === item.fileInfoList?.[0]?.fileList?.length - 1 ? '' : ','}</div>
|
)}
|
</div>
|
</div> : '-'
|
}
|
</div>
|
<Button class Name='Supervising-btn' size='small' type='outline' onClick={() => handleResponse(item.id)}>回复</Button>
|
</div>
|
</>
|
)) : <Empty description={<span className='empty-text'>暂无数据</span>} image={empty}></Empty>}
|
{/* <Pagination onChange={onChange} total={totalNum} /> */}
|
</>
|
}
|
{
|
radioValue === '2' &&
|
<>
|
{
|
supData?.length > 0 ? supData?.map((item, index) => (
|
<div className='Supervising'>
|
<div className='Supervising-item'>
|
<div className='Supervising-item-title'>督办时间：</div>
|
<div>{$$.minuteFormat(item.supTime)}</div>
|
</div>
|
<div className='Supervising-item'>
|
<div className='Supervising-item-title'>督办人：</div>
|
<div style={{ display: 'flex' }}>{item.supUnitName} <NameCard2 name={item.supUserName} userId={data.supUserId} /></div>
|
</div>
|
<div className='Supervising-item'>
|
<div className='Supervising-item-title' style={{ width: '80px' }}>督办内容：</div>
|
<div style={{ flex: 1 }}>{item.supContent}</div>
|
</div>
|
<div className='Supervising-item'>
|
<div className='Supervising-item-title'>督办附件：</div>
|
{/* <Image
|
// src={imgVisible?.src}
|
preview={{
|
visible: imgVisible?.visible,
|
src: imgVisible?.src,
|
onVisibleChange: (value) => setImgVisible({ visible: false }),
|
}}
|
/> */}
|
{item.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>
|
{item.fileInfoList?.[0]?.fileList?.map((item1, index1) =>
|
<div key={index1} onClick={() => handleOpenFiles(item1)} style={{ cursor: 'pointer' }}>{item1.name || '-'}{index1 === item.fileInfoList?.[0]?.fileList?.length - 1 ? '' : ','}</div>
|
)}
|
</div>
|
</div> : '-'
|
}
|
</div>
|
<div className='Supervising-info'>
|
<div className='Supervising-info-time'>已于{item.replyTime}回复完成</div>
|
<div className='Supervising-info-detail' onClick={() => handleDetail(item.id)}>查看详情</div>
|
</div>
|
</div>
|
)) : <Empty description={<span className='empty-text'>暂无数据</span>} image={empty}></Empty>
|
}
|
</>
|
}
|
<Response visible={response} handleOnCancel={() => setResponse(false)} data={data} caseId={props.caseId} />
|
<ModeSelect onCancel={() => SetMode(false)} mode={mode} />
|
{/* <Modal visible={detail} onCancel={() => setDetail(false)} title='督办回复详情' centered footer={null}>
|
<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>{data.supUserName || '-'}
|
<img src={register} alt='' className='icon-register' onClick={() => handlePersonDetail(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>
|
<img src={link} alt="" style={{ width: '14px', height: '14px' }} />广东好又多贸易有限公司营业执照副本.pdf
|
</Col>
|
</Row>
|
<Col span={24} style={{ marginBottom: '8px', marginTop: '20px' }}>
|
<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.replyTime) || '-'}</div>
|
</Col>
|
<Col span={24}>
|
<div className="title-text">回复人</div>
|
<div>{data.replyUserName || '-'}
|
<img src={register} alt='' className='icon-register' onClick={() => handlePersonDetail(data.replyUserId)} />
|
</div>
|
</Col>
|
<Col span={24}>
|
<div className="title-text">回复内容</div>
|
<div>{data.replyContent || '-'}</div>
|
</Col>
|
<Col span={24}>
|
<div className="title-text">附件材料</div>
|
<div style={{ display: 'flex' }}>
|
<img src={link} alt="" className="title-file" />
|
<div style={{ color: '#1A6FB8' }}>李晓明的人民调解协议书.pdf</div>
|
</div>
|
|
</Col>
|
</Row>
|
<PersonCard personView={personView} handleCancel={() => setPersonView(false)} personId={personId} />
|
</Modal> */}
|
<ResponseDetail visible={detail} handleOnCancel={() => setDetail(false)} data={data} />
|
<PersonCard personView={personView} handleCancel={() => setPersonView(false)} personId={personId} />
|
<Image
|
// src={imgVisible?.src}
|
preview={{
|
visible: imgVisible?.visible,
|
src: imgVisible?.src,
|
onVisibleChange: (value) => setImgVisible({ visible: false }),
|
}}
|
/>
|
</Scrollbars>
|
|
)
|
}
|
|
export default SupervisingView;
|
