/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-07-25 09:10:30
|
* @LastEditTime: 2022-10-08 12:00:45
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 司法确认申请列表 - 申请司法确认
|
*/
|
import React, { useState, useEffect, useRef } from 'react';
|
import { useNavigate } from 'react-router-dom';
|
import { Row, Col, Button, Select, Input, Typography, Form, Space } from 'antd';
|
import { FileTextOutlined, FileAddOutlined, BranchesOutlined, CloseCircleFilled, CheckCircleFilled } from '@ant-design/icons';
|
import { cardIconCaseCheck } from '../../../assets/images/icon';
|
import * as $$ from '../../../utils/utility';
|
import Page from '../../../components/Page';
|
import MyModal from '../../../components/MyModal';
|
import MyUpload from '../../../components/MyUpload';
|
import TableSearch from '../../../components/TableSearch';
|
import TableView from '../../../components/TableView';
|
import { DisputeMsg } from '../../caseDetail/components';
|
|
const { Option } = Select;
|
|
const { TextArea } = Input;
|
|
// 立案法院
|
function getFilingCourtApi() {
|
return $$.ax.request({ url: 'ctUnit/listCourt', type: 'get', service: 'cust' });
|
}
|
|
// 获取调解成功案件
|
function getSuccessCaseDataApi(submitData) {
|
return $$.ax.request({ url: 'judicInfo/pageSuccessCase', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 申请材料api
|
function getApplicationFileApi(submitData) {
|
return $$.ax.request({ url: `judicInfo/getCaseApplyFile?caseId=${submitData}`, type: 'get', service: 'mediate' });
|
}
|
|
// 司法申请提交
|
function applyJudicialApi(submitData) {
|
return $$.ax.request({ url: 'judicInfo/unitApplyJudic', type: 'post', data: submitData, service: 'mediate' });
|
}
|
|
const ApplyJudicial = () => {
|
const navigate = useNavigate();
|
|
const [form] = Form.useForm();
|
|
const [formData, setFormData] = useState({});
|
|
const [caseModalSearch, setCaseModalSearch] = useState({ page: 1, size: 10 });
|
|
// 成功案件modal
|
const [caseModal, setCaseModal] = useState({ visible: false, data: [] });
|
|
const [caseCheckModal, setCaseCheckModal] = useState(false);
|
|
// 立案法院数据
|
const [flingCourtSelectData, setFlingCourtSelectData] = useState([]);
|
|
const myUploadRef = useRef();
|
|
const [isSuccess, setIsSuccess] = useState(false);
|
|
// 案件信息
|
const [caseData, setCaseData] = useState({});
|
|
const columns = [
|
{ title: '调解案号', dataIndex: 'caseNo' },
|
{ title: '申请人', dataIndex: 'plaintiffs' },
|
{ title: '被申请人', dataIndex: 'defendants' },
|
{ title: '纠纷类型', dataIndex: 'caseTypeName' },
|
{ title: '调解类型', dataIndex: 'mediTypeName' },
|
{ title: '纠纷发生地详址', dataIndex: 'addr' },
|
{ title: '调解开始', dataIndex: 'mediStartTime' },
|
{ title: '调解结束', dataIndex: 'mediEndTime' },
|
{ title: '调解组织', dataIndex: 'mediateUnitName' },
|
{ title: '调解员', dataIndex: 'mediateUserName' },
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 50,
|
render: (_, record) => <Typography.Link onClick={() => handleChooseCase(record)}>选择</Typography.Link>,
|
},
|
];
|
|
function handleChangeInput(key, value) {
|
if (key === 'courtId') {
|
formData.courtId = value[0];
|
formData.courtName = value[1];
|
} else {
|
formData[key] = value;
|
}
|
setFormData({ ...formData });
|
}
|
|
// 弹窗查询
|
function handleSearch(type, values) {
|
let obj = {};
|
if (type === 'search') {
|
obj = { ...caseModalSearch, ...form.getFieldsValue(), page: 1 };
|
$$.changeTimeFormat(obj, 'mediateTime', 'mediEndStart', 'mediEndEnd');
|
} else if (type === 'reset') {
|
form.resetFields();
|
obj = { page: 1, size: 10 };
|
} else if (type === 'page') {
|
obj = { ...caseModalSearch, page: values.page, size: values.pageSize };
|
}
|
getSuccessCaseData(obj);
|
}
|
|
// 选择成功的案件
|
function handleChooseCase(record) {
|
setFormData({ ...formData, caseId: record.id });
|
setCaseModal({ visible: false });
|
getApplicationFile(record);
|
}
|
|
// 提交申请
|
function handleApply() {
|
let msg = '';
|
if (!formData.caseId) {
|
msg = '请选择案件';
|
} else if (!formData.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 getApplicationFile(record) {
|
global.setSpinning(true);
|
const res = await getApplicationFileApi(record.id);
|
global.setSpinning(false);
|
if (res.type) {
|
setCaseData({ ...record, fileList: res.data || [] });
|
}
|
}
|
|
// 获取成功案件数据
|
async function getSuccessCaseData(submitData) {
|
global.setSpinning(true);
|
const res = await getSuccessCaseDataApi(submitData);
|
global.setSpinning(false);
|
if (res.type) {
|
setCaseModalSearch(submitData);
|
setCaseModal({ visible: true, data: res.data?.content || [], total: res.data?.totalElements });
|
}
|
}
|
|
// 提交申请
|
async function applyJudicial() {
|
global.setSpinning(true);
|
const res = await applyJudicialApi(formData);
|
global.setSpinning(false);
|
if (res.type) {
|
setIsSuccess(true);
|
}
|
}
|
|
// 初始化获取立案法院
|
useEffect(() => {
|
async function getFilingCourt() {
|
const res = await getFilingCourtApi();
|
if (res.type) {
|
let data = res.data || [];
|
setFlingCourtSelectData(data);
|
setFormData({ ...formData, courtId: data[0]?.value, courtName: data[0]?.label });
|
}
|
}
|
getFilingCourt();
|
}, []);
|
|
return (
|
<Page
|
pageHead={{
|
title: '申请司法确认',
|
subtitle: '向司法确认受理单位提交司法确认申请',
|
breadcrumbData: [{ title: '司法确认申请列表', url: '/mediate/applicationList' }, { title: '申请司法确认' }],
|
handleReturn: () => navigate('/mediate/applicationList', { replace: true }),
|
}}
|
>
|
<div className="applyJudicial">
|
{isSuccess ? (
|
<div className="applyJudicial-over">
|
<CheckCircleFilled className="applyJudicial-over-icon" />
|
<div className="h6">申请已提交</div>
|
<div className="applyJudicial-over-subtitle">可在「司法确认申请列表」中查看和跟进已提交的申请结果和进度</div>
|
<Space size="large">
|
<Button type="primary" onClick={() => navigate(-1)}>
|
司法确认申请列表
|
</Button>
|
<Button onClick={() => navigate('/mediate/workbench')}>工作台</Button>
|
</Space>
|
</div>
|
) : (
|
<Row gutter={[16, 16]}>
|
<Col span={24}>
|
<h4>
|
<FileTextOutlined className="applyJudicial-titleIcon" />
|
<span>申请信息</span>
|
</h4>
|
<h5>
|
调解案件
|
<span className="leftRequired">*</span>
|
</h5>
|
{formData.caseId ? (
|
<div className="public-fileCard">
|
<img src={cardIconCaseCheck} alt="" onClick={() => setCaseCheckModal(true)} style={{ cursor: 'pointer' }} />
|
<div className="public-fileCard-main">
|
<Typography.Text ellipsis={{ tooltip: caseData.plaintiffs }}>申请人：{caseData.plaintiffs}</Typography.Text>
|
<Typography.Text ellipsis={{ tooltip: caseData.defendants }} style={{ marginTop: '4px', display: 'block' }}>
|
被申请人：{caseData.defendants}
|
</Typography.Text>
|
</div>
|
<div
|
className="public-fileCard-del"
|
onClick={() => {
|
setFormData({ ...formData, caseId: undefined });
|
setCaseData({});
|
}}
|
>
|
<CloseCircleFilled />
|
</div>
|
</div>
|
) : (
|
<Button onClick={() => handleSearch('reset')} icon={<FileAddOutlined />}>
|
选择调解成功的案件
|
</Button>
|
)}
|
</Col>
|
<Col span={24}>
|
<h5>
|
受理单位
|
<span className="leftRequired">*</span>
|
</h5>
|
<Select
|
style={{ width: '354px' }}
|
placeholder="选择开展司法确认工作的相关单位"
|
value={formData.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={formData.applyContent}
|
onChange={(e) => handleChangeInput('applyContent', e.target.value)}
|
rows={2}
|
placeholder="描述申请的背景和理由"
|
allowClear
|
/>
|
</Col>
|
{!!formData.caseId && (
|
<>
|
<Col span={24}>
|
<div className="applyJudicial-divider" />
|
</Col>
|
<Col span={24}>
|
<h4>
|
<BranchesOutlined className="applyJudicial-titleIcon" />
|
<span>申请材料</span>
|
</h4>
|
<h5>
|
调解协议书
|
<span className="leftRequired">*</span>
|
</h5>
|
<MyUpload
|
fileId={formData.caseId}
|
fileType="22_00018-302"
|
myUploadRef={myUploadRef}
|
fileList={caseData.fileList?.filter((item) => item.ownerType === '22_00018-302')[0]?.fileList || []}
|
/>
|
</Col>
|
<Col span={24}>
|
<h5>司法确认申请书</h5>
|
<MyUpload
|
fileId={formData.caseId}
|
fileType="22_00018-402"
|
fileList={caseData.fileList?.filter((item) => item.ownerType === '22_00018-402')[0]?.fileList || []}
|
/>
|
</Col>
|
<Col span={24}>
|
<h5>人民调解委员会主持调解的证明</h5>
|
<MyUpload
|
fileId={formData.caseId}
|
fileType="22_00018-306"
|
fileList={caseData.fileList?.filter((item) => item.ownerType === '22_00018-306')[0]?.fileList || []}
|
/>
|
</Col>
|
<Col span={24}>
|
<h5>其他材料</h5>
|
<MyUpload
|
fileId={formData.caseId}
|
fileType="22_00018-409"
|
fileList={caseData.fileList?.filter((item) => item.ownerType === '22_00018-409')[0]?.fileList || []}
|
/>
|
</Col>
|
</>
|
)}
|
<Col span={24}>
|
<Button onClick={handleApply} type="primary">
|
提交申请
|
</Button>
|
</Col>
|
</Row>
|
)}
|
</div>
|
<MyModal width={1200} visible={caseModal.visible} cancelText="关闭页面" onCancel={() => setCaseModal({ visible: false })}>
|
<Row gutter={[16, 16]}>
|
<Col span={24}>
|
<h4 style={{ margin: 0 }}>选择调解成功案件</h4>
|
</Col>
|
<Col span={24}>
|
<TableSearch
|
form={form}
|
itemData={[
|
{ type: 'Input', name: 'plaintiffs', label: '申请人' },
|
{ type: 'Input', name: 'defendants', label: '被申请人' },
|
{ type: 'RangePicker', name: 'mediateTime', label: '调解时间' },
|
{ type: 'Input', name: 'mediateUserName', label: '调解员' },
|
{ type: 'Input', name: 'addr', label: '纠纷发生地' },
|
{ type: 'Input', name: 'caseNo', label: '调解案号' },
|
]}
|
handleReset={() => handleSearch('reset')}
|
handleSearch={() => handleSearch('search')}
|
/>
|
</Col>
|
<Col span={24}>
|
<div className="applyJudicial-divider" />
|
</Col>
|
<Col span={24}>
|
<div className="applyJudicial-modalTable">
|
<TableView
|
size="small"
|
showHeader
|
title="查询结果"
|
columns={columns}
|
dataSource={caseModal.data}
|
pagination={{
|
total: caseModal.total,
|
pageSize: caseModalSearch.size,
|
current: caseModalSearch.page,
|
onChange: (page, pageSize) => handleSearch('page', { page, pageSize }),
|
}}
|
/>
|
</div>
|
</Col>
|
</Row>
|
</MyModal>
|
<MyModal width={1200} visible={caseCheckModal} onCancel={() => setCaseCheckModal(false)} footer={false}>
|
<DisputeMsg caseId={formData.caseId} isModal />
|
</MyModal>
|
</Page>
|
);
|
};
|
|
export default ApplyJudicial;
|
