/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-07-26 10:16:26
|
* @LastEditTime: 2022-12-02 09:22:55
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 司法确认申请列表 - 查看详情
|
*/
|
import React, { useState, useEffect, useRef } from 'react';
|
import { useNavigate, useSearchParams } from 'react-router-dom';
|
import { Space, Descriptions, Typography, Row, Col, Button, Select, Input } from 'antd';
|
import { ProfileOutlined, ScheduleOutlined } from '@ant-design/icons';
|
import { cardIconCaseCheck } from '../../../assets/images/icon';
|
import * as $$ from '../../../utils/utility';
|
import Page from '../../../components/Page';
|
import NameCard from '../../../components/NameCard';
|
import FilesDrawer from '../../../components/FilesDrawer';
|
import MyModal from '../../../components/MyModal';
|
import MyUpload from '../../../components/MyUpload';
|
import { DisputeMsg } from '../../caseDetail/components';
|
|
const { Text, Link } = Typography;
|
|
const { Option } = Select;
|
|
const { TextArea } = Input;
|
|
// 立案法院
|
function getFilingCourtApi() {
|
return $$.ax.request({ url: 'ctUnit/listCourt', type: 'get', service: 'cust' });
|
}
|
|
// 获取司法确认详情
|
function getJudicialApplyDetailDataApi(submitData) {
|
return $$.ax.request({ url: `judicInfo/getJudicInfo?id=${submitData}`, type: 'get', service: 'mediate' });
|
}
|
|
// 司法申请提交
|
function applyJudicialApi(submitData) {
|
return $$.ax.request({ url: 'judicInfo/unitApplyJudic', type: 'post', data: submitData, service: 'mediate' });
|
}
|
|
// 撤销申请
|
function handleRecallApi(submitData) {
|
return $$.ax.request({ url: 'judicInfo/withdraw', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
const JudicialApplyDetail = () => {
|
const navigate = useNavigate();
|
|
const [searchParams] = useSearchParams();
|
|
const back = searchParams.get('back');
|
|
const judicialId = searchParams.get('judicialId');
|
|
const myUploadRef = useRef();
|
|
const myUploadRef2 = useRef();
|
|
// 司法确认详情
|
const [data, setData] = useState({});
|
|
// 是否修改申请
|
const [isEdit, setIsEdit] = useState(false);
|
|
const [caseCheckModal, setCaseCheckModal] = useState(false);
|
|
// 立案法院数据
|
const [flingCourtSelectData, setFlingCourtSelectData] = useState([]);
|
|
function handleChangeInput(key, value) {
|
if (key === 'courtId') {
|
data.courtId = value[0];
|
data.courtName = value[1];
|
} else {
|
data[key] = value;
|
}
|
setData({ ...data });
|
}
|
|
// 提交申请
|
function handleApply() {
|
let msg = '';
|
if (!data.courtId) {
|
msg = '请选择受理单位';
|
} else if (!myUploadRef.current.fileList) {
|
msg = '请上传调解协议书';
|
}
|
if (!!msg) {
|
$$.info({ type: 'error', content: msg });
|
return;
|
}
|
$$.modalInfo({
|
title: '申请司法确认提交确认',
|
content: '确定提交当前司法确认申请吗？',
|
okText: '确定提交',
|
cancelText: '我再想想',
|
onOk: applyJudicial,
|
});
|
}
|
|
// 提交申请
|
async function applyJudicial() {
|
global.setSpinning(true);
|
let submitData = {
|
id: data.id,
|
caseId: data.caseId,
|
applyContent: data.applyContent,
|
courtId: data.courtId,
|
courtName: data.courtName,
|
};
|
const res = await applyJudicialApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setIsEdit(false);
|
$$.infoSuccess({ content: '修改成功,页面即将跳转' });
|
await $$.sleep();
|
navigate(`${back}?isBack=true`);
|
}
|
}
|
|
// 获取受理单位法院
|
async function getFilingCourt() {
|
const res = await getFilingCourtApi();
|
if (res.type) {
|
setFlingCourtSelectData(res.data || []);
|
}
|
}
|
|
// 撤销申请
|
function handleRecall() {
|
$$.modalInfo({
|
title: '撤销申请提示',
|
content: '确定撤销当前司法确认申请吗？',
|
okText: '确定撤销',
|
cancelText: '我再想想',
|
onOk: async () => {
|
global.setSpinning(true);
|
const res = await handleRecallApi({ id: judicialId });
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: '撤销成功,页面即将跳转' });
|
await $$.sleep();
|
navigate(`${back}?isBack=true`);
|
}
|
},
|
});
|
}
|
|
// 初始化
|
useEffect(() => {
|
// 获取司法确认申请详情信息
|
async function getJudicialApplyDetailData() {
|
global.setSpinning(true);
|
const res = await getJudicialApplyDetailDataApi(judicialId);
|
global.setSpinning(false);
|
if (res.type) {
|
setData(res.data || {});
|
}
|
}
|
getJudicialApplyDetailData();
|
}, [judicialId]);
|
|
const auditInfo = data.auditInfo || {};
|
|
const getFiles = (type) => {
|
return data.applyFileList?.filter((item) => item.ownerType === type)[0]?.fileList || [];
|
};
|
|
return (
|
<Page
|
pageHead={{
|
title: '详情',
|
subtitle: '查看和跟进已提交的申请结果和进度',
|
breadcrumbData: [{ title: '司法确认申请列表', url: '/mediate/applicationList' }, { title: '详情' }],
|
handleReturn: () => navigate(`${back}?isBack=true`, { replace: true }),
|
}}
|
>
|
<div className="judicialApplyDetail">
|
<div className="caseDetail-headerCard">
|
<div className="caseDetail-cardTitle">
|
<Space size="small">
|
<div className="caseDetail-cardTitle-icon caseDetail-cardTitle-iconGreen">
|
<ProfileOutlined />
|
</div>
|
<h5>审查信息</h5>
|
</Space>
|
</div>
|
<div className="caseDetail-descriptions">
|
<Descriptions size="small">
|
<Descriptions.Item label="审查单位">{auditInfo.handlerUnitName || '-'}</Descriptions.Item>
|
<Descriptions.Item label="审查时间">{$$.timeFormat(auditInfo.finishTime)}</Descriptions.Item>
|
<Descriptions.Item label="审查人">
|
{auditInfo.handlerUserName ? <NameCard name={auditInfo.handlerUserName} userId={auditInfo.handlerUserId} /> : '-'}
|
</Descriptions.Item>
|
<Descriptions.Item label="审查结果">{auditInfo.auditResultName || '-'}</Descriptions.Item>
|
<Descriptions.Item label="审查意见">
|
<Text className="public-fontBg" ellipsis={{ tooltip: auditInfo.handleContent }}>{auditInfo.handleContent || '-'}</Text>
|
</Descriptions.Item>
|
<Descriptions.Item label="附件信息">
|
<FilesDrawer filesData={auditInfo.fileInfoList || []} />
|
</Descriptions.Item>
|
</Descriptions>
|
</div>
|
</div>
|
<div className="judicialApplyDetail-main">
|
<div className="caseDetail-cardTitle">
|
<Space size="small">
|
<div className="caseDetail-cardTitle-icon caseDetail-cardTitle-iconBlue">
|
<ScheduleOutlined />
|
</div>
|
<h5>申请信息</h5>
|
</Space>
|
</div>
|
<div className="caseDetail-cardMain" style={{ flex: 1 }}>
|
{isEdit ? (
|
<Row gutter={[16, 16]}>
|
<Col span={24}>
|
<h5>
|
调解案件
|
<span className="leftRequired">*</span>
|
</h5>
|
<div className="public-fileCard">
|
<img src={cardIconCaseCheck} alt="" onClick={() => setCaseCheckModal(true)} style={{ cursor: 'pointer' }} />
|
<div className="public-fileCard-main">
|
<Text ellipsis={{ tooltip: data.plaintiffs }}>申请人：{data.plaintiffs}</Text>
|
<Text ellipsis={{ tooltip: data.defendants }} style={{ marginTop: '4px', display: 'block' }}>
|
被申请人：{data.defendants}
|
</Text>
|
</div>
|
</div>
|
</Col>
|
<Col span={24}>
|
<h5>
|
受理单位
|
<span className="leftRequired">*</span>
|
</h5>
|
<Select
|
style={{ width: '354px' }}
|
placeholder="选择开展司法确认工作的相关单位"
|
value={data.courtId}
|
onChange={(value, options) => handleChangeInput('courtId', [value, options.label])}
|
>
|
{flingCourtSelectData.length !== 0 &&
|
flingCourtSelectData.map((item) => {
|
return (
|
<Option key={item.value} value={item.value} label={item.label}>
|
{item.label}
|
</Option>
|
);
|
})}
|
</Select>
|
</Col>
|
<Col span={24}>
|
<h5>申请说明</h5>
|
<TextArea
|
value={data.applyContent}
|
onChange={(e) => handleChangeInput('applyContent', e.target.value)}
|
rows={2}
|
placeholder="描述申请的背景和理由"
|
allowClear
|
/>
|
</Col>
|
<Col span={24}>
|
<div className="applyJudicial-divider" />
|
</Col>
|
<Col span={24}>
|
<h5>
|
调解协议书
|
<span className="leftRequired">*</span>
|
</h5>
|
<MyUpload
|
fileId={data.caseId}
|
fileType="22_00018-302"
|
myUploadRef={myUploadRef}
|
fileList={data.applyFileList?.filter((item) => item.ownerType === '22_00018-302')[0]?.fileList || []}
|
/>
|
</Col>
|
<Col span={24}>
|
<h5>司法确认申请书</h5>
|
<MyUpload
|
fileId={data.caseId}
|
fileType="22_00018-402"
|
fileList={data.applyFileList?.filter((item) => item.ownerType === '22_00018-402')[0]?.fileList || []}
|
/>
|
</Col>
|
<Col span={24}>
|
<h5>人民调解委员会主持调解的证明</h5>
|
<MyUpload
|
fileId={data.caseId}
|
fileType="22_00018-306"
|
fileList={data.applyFileList?.filter((item) => item.ownerType === '22_00018-306')[0]?.fileList || []}
|
/>
|
</Col>
|
<Col span={24}>
|
<h5>其他材料</h5>
|
<MyUpload
|
fileId={data.caseId}
|
fileType="22_00018-409"
|
fileList={data.applyFileList?.filter((item) => item.ownerType === '22_00018-409')[0]?.fileList || []}
|
/>
|
</Col>
|
<Col span={24}>
|
<Button onClick={handleApply} type="primary">
|
提交申请
|
</Button>
|
</Col>
|
</Row>
|
) : (
|
<>
|
{/* 为了获取myUploadRef实例调用方法 */}
|
<MyUpload type="diy" showFileList={false} myUploadRef={myUploadRef2} />
|
<Row gutter={[16, 16]}>
|
<Col span={24}>
|
<h5>调解案件</h5>
|
<div className="public-fileCard">
|
<img src={cardIconCaseCheck} alt="" onClick={() => setCaseCheckModal(true)} style={{ cursor: 'pointer' }} />
|
<div className="public-fileCard-main">
|
<Text ellipsis={{ tooltip: data.plaintiffs }}>申请人：{data.plaintiffs}</Text>
|
<Text ellipsis={{ tooltip: data.defendants }} style={{ marginTop: '4px', display: 'block' }}>
|
被申请人：{data.defendants}
|
</Text>
|
</div>
|
</div>
|
</Col>
|
<Col span={24}>
|
<h5>受理单位</h5>
|
<div>{data.courtName}</div>
|
</Col>
|
<Col span={24}>
|
<h5>申请说明</h5>
|
<pre>{data.applyContent || '-'}</pre>
|
</Col>
|
{[
|
{ key: '22_00018-302', title: '调解协议书' },
|
{ key: '22_00018-402', title: '司法确认申请书' },
|
{ key: '22_00018-306', title: '人民调解委员会主持调解的证明' },
|
{ key: '22_00018-409', title: '其他材料' },
|
].map((item, index) => (
|
<Col span={24} key={index}>
|
<h5>{item.title}</h5>
|
<Row gutter={[16, 8]}>
|
{getFiles(item.key).length === 0
|
? $$.MyEmpty({ style: { margin: 0 } })
|
: getFiles(item.key).map((x, t) => (
|
<Col span={12} key={t}>
|
<div className="public-fileCard">
|
<img src={$$.fileType(x.cat)} alt="" />
|
<div className="public-fileCard-main">
|
<Typography.Text ellipsis={{ tooltip: x.name }}>{x.name}</Typography.Text>
|
<Space size="middle" className="public-fileCard-action">
|
<Link onClick={() => myUploadRef2.current.handleOpenFiles(x)}>预览</Link>
|
<Link onClick={() => myUploadRef2.current.handleDownloadFiles(x)}>下载</Link>
|
</Space>
|
</div>
|
</div>
|
<div className="public-fileCard-text">
|
<div>上传人：{x.uploaderName || '-'}</div>
|
<div>上传时间：{$$.timeFormat(x.createTime)}</div>
|
</div>
|
</Col>
|
))}
|
</Row>
|
</Col>
|
))}
|
<Col span={24}>
|
<Space size="middle">
|
{/* 退回申请人才有修改申请 */}
|
{auditInfo.judicHandle === '22_00033-1' && (
|
<Button
|
onClick={() => {
|
getFilingCourt();
|
setIsEdit(true);
|
}}
|
type="primary"
|
>
|
修改申请
|
</Button>
|
)}
|
{/* 退回申请人（除了不予受理）或未审查案件才有撤销功能，目前审查处理只有退回和不予受理 */}
|
{(auditInfo.judicHandle === '22_00033-1' || !auditInfo.auditResult) && (
|
<Button onClick={handleRecall} className="public-mainBtn">
|
撤销申请
|
</Button>
|
)}
|
</Space>
|
</Col>
|
</Row>
|
</>
|
)}
|
</div>
|
</div>
|
</div>
|
<MyModal width={1200} visible={caseCheckModal} onCancel={() => setCaseCheckModal(false)} footer={false}>
|
<DisputeMsg caseId={data.caseId} isModal />
|
</MyModal>
|
</Page>
|
);
|
};
|
|
export default JudicialApplyDetail;
|
