import React, { Fragment, useState, useEffect, useRef } from 'react';
|
import { Row, Col, Space, Typography } from 'antd';
|
import { Steps, Input, Select, Button, Form, Message } from '@arco-design/web-react';
|
import { IconInfoCircleFill } from '@arco-design/web-react/icon';
|
import { Scrollbars } from 'react-custom-scrollbars';
|
|
import { useSearchParams, useNavigate } from 'react-router-dom';
|
import ArcoUpload from '@/components/ArcoUpload';
|
import NewPage from '../../components/NewPage';
|
import MyModal from '../../components/MyModal';
|
import CaseDetail from './CaseDetail';
|
import { judicial_5, judicial_6 } from '../../assets/images';
|
import modal1 from '../../assets/file/非诉讼调解协议司法确认确认申请书.doc';
|
import modal2 from '../../assets/file/广州法院送达地址、电子送达地址确认书.doc';
|
import modal3 from '../../assets/file/诉前联调协议移送司法确认函（稿）.doc';
|
import * as $$ from '../../utils/utility';
|
import './index.less';
|
|
const FormItem = Form.Item;
|
const { Link, Text, Paragraph } = Typography;
|
const Step = Steps.Step;
|
const { TextArea } = Input;
|
const { Option } = Select;
|
const appUrl = $$.appUrl;
|
// 司法确认详情接口
|
function getJudicialApplyApi(submitData) {
|
return $$.ax.request({ url: '/judicInfo/getCaseApplyFile', type: 'get', data: submitData, service: 'mediate' });
|
}
|
|
// 根据caseId获取案件信息
|
function getCaseDataApi(submitData) {
|
return $$.ax.request({ url: `caseInfo/getCaseInfo`, data: submitData, type: 'get', service: 'mediate' });
|
}
|
|
function delFile(id) {
|
return $$.ax.request({ url: `fileInfo/deleteFileById`, type: 'get', service: 'sys', data: { id } });
|
}
|
|
function applyJudicialApi(submitData) {
|
return $$.ax.request({ url: `judicInfo/unitApplyJudic`, type: 'post', service: 'mediate', data: submitData });
|
}
|
// 获取法院字典值
|
function listCourtApi(submitData) {
|
return $$.ax.request({ url: `ctUnit/listCourt`, type: 'get', service: 'cust', data: submitData });
|
}
|
|
// 办理结果（化解结果、协议文书等结案信息）
|
function getTransactResultApi(caseId) {
|
return $$.ax.request({ url: `caseInfoUnfold/getTransactResult?caseId=${caseId}`, type: 'get', service: 'mediate' });
|
}
|
|
function getId() {
|
return $$.ax.request({ url: `caseUtils/getNewTimeCaseId`, type: 'get', service: 'utils' });
|
}
|
|
const JudicialSubmitAudit = () => {
|
const formRef = useRef();
|
const myUploadRef = useRef();
|
let navigate = useNavigate();
|
const [searchParams] = useSearchParams();
|
const caseId = $$.getQueryString('caseId');
|
const caseTaskId = $$.getQueryString('caseTaskId');
|
const back = searchParams.get('back');
|
const [caseCheckModal, setCaseCheckModal] = useState(false);
|
|
// 回显附件材料
|
const [data, setData] = useState([]);
|
// 数据
|
const [formData, setFormData] = useState({});
|
const [caseData, setCaseData] = useState({});
|
|
const [filesList, setFilesList] = useState([]);
|
|
const [transactResult, setTransactResult] = useState(null);
|
|
// 司法确认部门单位
|
const [listCourt, setListCourt] = useState([]);
|
|
const [stepsNum, setStepsNum] = useState(0);
|
const [ownerId, setOwnerId] = useState('');
|
|
function handleChangeFile(type, info, apiResult) {
|
console.log('handleChangeFile', type, info, apiResult);
|
let list = info.fileList ? info.fileList : [];
|
// .map(item => ({ ...item, name: item.trueName }))
|
setFilesList(list);
|
// setResult(apiResult)
|
console.log('list', list);
|
if (list.length >= 1) {
|
setStepsNum(1);
|
} else {
|
setStepsNum(0);
|
}
|
}
|
|
//删除文件
|
const handleDelFile = async (id) => {
|
const res = await delFile(id);
|
if (res.type) {
|
$$.infoSuccess({ content: '删除成功！' });
|
}
|
};
|
|
// 修改
|
function handleChangeValue(key, value) {
|
formData[key] = value;
|
setFormData({ ...formData });
|
}
|
|
// 提交申请
|
function handleApply() {
|
if (formRef.current) {
|
formRef.current.validate(undefined, (errors, values) => {
|
if (!errors) {
|
const data = formRef?.current.getFields();
|
$$.arcoModalInfo({
|
icon: <IconInfoCircleFill style={{ color: '#1A6FB8' }} />,
|
title: '提醒',
|
closable: false,
|
style: { borderRadius: '8px' },
|
content: <span>确定向{data.courtName}提交司法确认申请吗？</span>,
|
okText: '确定',
|
cancelText: '我再想想',
|
onOk: () => {
|
applyJudicial({ ...data, caseId, id: ownerId });
|
},
|
});
|
}
|
});
|
}
|
}
|
|
// 提交申请
|
async function applyJudicial(data) {
|
global.setSpinning(true);
|
const res = await applyJudicialApi(data);
|
global.setSpinning(false);
|
if (res.type) {
|
Message.success({
|
content: (
|
<div style={{ width: '340px' }} className="myMessageBox">
|
<div className="messageTop">申请已提交</div>
|
<div className="messageBottom">
|
可在<span className="public-color">已申请</span>列表中跟进司法确认进度
|
</div>
|
</div>
|
),
|
showIcon: true,
|
className: 'acro-myMessage',
|
position: 'bottom',
|
});
|
navigate(`${back}?isBack=true&tab=1`, { replace: true });
|
}
|
}
|
|
// 司法确认部门字典值选择
|
async function gatListCourt() {
|
global.setSpinning(true);
|
const res = await listCourtApi();
|
global.setSpinning(false);
|
if (res.type) {
|
setListCourt(res.data || []);
|
}
|
}
|
|
// 初始化附件回显
|
async function getJudicialApply() {
|
global.setSpinning(true);
|
const res = await getJudicialApplyApi({ caseId });
|
global.setSpinning(false);
|
if (res.type) {
|
let data = res.data || [];
|
setData(data);
|
let fileInfoList = data?.find((item) => item.ownerType === '22_00018-412')?.fileList || [];
|
let fileInfoList2 = data?.find((item) => item.ownerType === '22_00018-402')?.fileList || [];
|
let fileInfoList3 = data?.find((item) => item.ownerType === '22_00018-403')?.fileList || [];
|
let fileInfoList4 = data?.find((item) => item.ownerType === '22_00018-108')?.fileList || [];
|
formRef.current.setFieldValue(
|
'fileInfoList',
|
fileInfoList?.map((i) => ({ ...i, uid: i.id }))
|
);
|
formRef.current.setFieldValue(
|
'fileInfoList2',
|
fileInfoList2?.map((i) => ({ ...i, uid: i.id }))
|
);
|
formRef.current.setFieldValue(
|
'fileInfoList3',
|
fileInfoList3?.map((i) => ({ ...i, uid: i.id }))
|
);
|
formRef.current.setFieldValue(
|
'fileInfoList4',
|
fileInfoList4?.map((i) => ({ ...i, uid: i.id }))
|
);
|
}
|
}
|
async function getCaseData() {
|
global.setSpinning(true);
|
const res = await getCaseDataApi({ id: caseId });
|
global.setSpinning(false);
|
if (res.type) {
|
const { agentList, personList, ...rest } = res.data;
|
const parList = agentList.concat(personList);
|
const newParList =
|
parList?.map((item) => {
|
const fileInfoList = item.fileInfoList;
|
let file = []; //身份证明材料、企业登记材料
|
let file1 = []; //法人、机构身份证明材料、代理人授权委托书
|
if (fileInfoList && fileInfoList.length != 0) {
|
fileInfoList.forEach((item) => {
|
if (item.ownerType == '22_00018-202' || item.ownerType == '22_00018-203') {
|
item.fileList.forEach((res) => {
|
file.push({
|
...res,
|
uid: res.id,
|
});
|
});
|
}
|
if (item.ownerType == '22_00018-204' || item.ownerType == '22_00018-207') {
|
item.fileList.forEach((res) => {
|
file1.push({
|
...res,
|
uid: res.id,
|
});
|
});
|
}
|
});
|
}
|
return {
|
...item,
|
file,
|
file1,
|
};
|
}) || [];
|
const obj = {
|
...rest,
|
fakeData: newParList,
|
};
|
setCaseData(obj);
|
}
|
}
|
|
async function getTransactResult(id) {
|
const res = await getTransactResultApi(id);
|
if (res.type) {
|
if (res.data) {
|
setTransactResult({ ...res.data });
|
} else {
|
setTransactResult(null);
|
}
|
}
|
}
|
|
//获取id
|
const getAppId = async () => {
|
const res = await getId();
|
if (res.type) {
|
setOwnerId(res.data);
|
}
|
};
|
|
//初始化
|
useEffect(() => {
|
if (caseId) {
|
gatListCourt();
|
// getAppId();
|
getCaseData();
|
// getJudicialApply();
|
getTransactResult(caseId);
|
}
|
}, []);
|
|
useEffect(() => {
|
const subData = $$.getSessionStorage('judicialSubmitEdit');
|
|
console.log('data', subData);
|
if (subData) {
|
setOwnerId(subData.judicId);
|
setData(subData?.fileList || []);
|
let fileInfoList = subData?.fileList?.find((item) => item.ownerType === '22_00018-412')?.fileList || [];
|
let fileInfoList2 = subData?.fileList?.find((item) => item.ownerType === '22_00018-402')?.fileList || [];
|
let fileInfoList3 = subData?.fileList?.find((item) => item.ownerType === '22_00018-403')?.fileList || [];
|
let fileInfoList4 = subData?.fileList?.find((item) => item.ownerType === '22_00018-108')?.fileList || [];
|
formRef.current.setFieldValue(
|
'fileInfoList',
|
fileInfoList?.map((i) => ({ ...i, uid: i.id }))
|
);
|
formRef.current.setFieldValue(
|
'fileInfoList2',
|
fileInfoList2?.map((i) => ({ ...i, uid: i.id }))
|
);
|
formRef.current.setFieldValue(
|
'fileInfoList3',
|
fileInfoList3?.map((i) => ({ ...i, uid: i.id }))
|
);
|
formRef.current.setFieldValue(
|
'fileInfoList4',
|
fileInfoList4?.map((i) => ({ ...i, uid: i.id }))
|
);
|
|
formRef.current.setFieldValue('courtId', subData.courtId);
|
formRef.current.setFieldValue('courtName', subData.courtName);
|
formRef.current.setFieldValue('applyContent', subData.applyContent);
|
|
$$.clearSessionStorage('judicialSubmitEdit');
|
}
|
}, [$$.getSessionStorage('judicialSubmitEdit')]);
|
|
return (
|
<NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '司法确认申请' }], title: '司法确认申请' }}>
|
<Fragment>
|
<Scrollbars style={{ height: 'calc(100vh - 219px)' }} autoHide>
|
<div className=" dataSync-noScrollPage">
|
<Row gutter={[16, 16]}>
|
<Col span={24}>
|
<Space style={{ marginBottom: '16px' }}>
|
<div className="MediationInfo-subTitle"></div>
|
<span style={{ fontSize: '16px', lineHeight: '24px' }}>案件信息</span>
|
</Space>
|
{/* <div className='judicialSubmit-audit-case' onClick={() => setCaseCheckModal(true)}> */}
|
<div
|
className="judicialSubmit-audit-case"
|
onClick={() => window.open(`${$$.windowUrl}/windowDetail?caseTaskId=${caseTaskId}&caseId=${caseId}`)}
|
>
|
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
|
<div>
|
<img src={judicial_5} alt="" srcset="" />
|
</div>
|
<div>
|
<div className="judicialSubmit-audit-case-flex">
|
<div>承办部门：{transactResult?.mediateUnitName || '-'}</div>
|
<div className="judicialSubmit-audit-case-subTitle">
|
申请方：
|
{caseData.fakeData?.filter((i) => i.perType === '15_020008-1')?.length === 1
|
? caseData.fakeData?.filter((i) => i.perType === '15_020008-1')[0].trueName
|
: caseData.fakeData?.filter((i) => i.perType === '15_020008-1')?.length > 1
|
? `${caseData.fakeData?.filter((i) => i.perType === '15_020008-1')[0].trueName}...等共${
|
caseData.fakeData?.filter((i) => i.perType === '15_020008-1')?.length
|
}人`
|
: '-'}{' '}
|
| 被申请方：
|
{caseData.fakeData?.filter((i) => i.perType === '15_020008-2')?.length === 1
|
? caseData.fakeData?.filter((i) => i.perType === '15_020008-1')[0].trueName
|
: caseData.fakeData?.filter((i) => i.perType === '15_020008-2')?.length > 1
|
? `${caseData.fakeData?.filter((i) => i.perType === '15_020008-2')[0].trueName}...等共${
|
caseData.fakeData?.filter((i) => i.perType === '15_020008-2')?.length
|
}人`
|
: '-'}
|
</div>
|
</div>
|
<div className="judicialSubmit-audit-case-subTitle">
|
办结时间：{$$.minuteFormat(transactResult?.closeTime)} | {transactResult?.mediResultName || '-'}
|
</div>
|
</div>
|
</div>
|
<div>
|
<img src={judicial_6} alt="" srcset="" />
|
</div>
|
</div>
|
</Col>
|
<Col span={24} style={{ marginBottom: '12px' }}>
|
<Space>
|
<div className="MediationInfo-subTitle"></div>
|
<span style={{ fontSize: '16px', lineHeight: '24px' }}>申请信息</span>
|
</Space>
|
</Col>
|
</Row>
|
<Form
|
ref={formRef}
|
layout="vertical"
|
requiredSymbol={false}
|
scrollToFirstError={true}
|
initialValues={{}} //默认值
|
>
|
<Row>
|
<Col span={24}>
|
<FormItem
|
label={
|
<div style={{ display: 'flex' }}>
|
司法确认部门<div className="must">必填</div>
|
</div>
|
}
|
field="courtId"
|
rules={[{ required: true, message: '请选择司法确认部门' }]}
|
>
|
<Select
|
placeholder="请选择"
|
allowClear
|
style={{ width: '450px' }}
|
options={listCourt || []}
|
onChange={(value, options) => {
|
formRef.current.setFieldValue('courtId', options.value);
|
formRef.current.setFieldValue('courtName', options.children);
|
// setFormData({ ...formData, courtId: options.value, courtName: options.children })
|
}}
|
></Select>
|
</FormItem>
|
</Col>
|
<Col span={24}>
|
<FormItem
|
label={
|
<div style={{ display: 'flex' }}>
|
申请理由<div className="must">必填</div>
|
</div>
|
}
|
field="applyContent"
|
rules={[{ required: true, message: '申请理由不能为空' }]}
|
>
|
<TextArea rows={5} maxLength={256} autoSize={{ minRows: 4, maxRows: 8 }} placeholder="请描述本案申请司法确认的理由" />
|
</FormItem>
|
</Col>
|
<Col span={24} style={{ marginBottom: '12px' }}>
|
<Space size="small">
|
<div className="MediationInfo-subTitle"></div>
|
<span style={{ fontSize: '16px', lineHeight: '24px' }}>申请材料</span>
|
</Space>
|
</Col>
|
<Col span={24} className="doubleFile">
|
<div style={{ display: 'flex', marginBottom: '8px' }}>
|
调解协议书<div className="must">必填</div>
|
</div>
|
<ArcoUpload
|
style={{ width: '450px' }}
|
params={{
|
action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&&ownerId=${ownerId}&ownerType=22_00018-412`,
|
}}
|
formItemParams={{
|
rules: [{ message: '请上传调解协议书', required: true }],
|
}}
|
field="fileInfoList"
|
label=""
|
editData={{
|
fileInfoList: data?.find((item) => item.ownerType === '22_00018-412')?.fileList || [],
|
}}
|
handleDelFile={handleDelFile}
|
handleDelRealFile={handleDelFile}
|
ownerType="22_00018-412"
|
onFileListChange={(v) => {
|
let newList = v?.map((item) => {
|
if (item.response) {
|
return item.response.data[0];
|
} else {
|
return item;
|
}
|
});
|
setData(data?.map((item) => ({ ...item, fileList: item.ownerType === '22_00018-412' ? newList : item.fileList })));
|
}}
|
/>
|
</Col>
|
<Col span={24} className="doubleFile">
|
<div style={{ display: 'flex', marginBottom: '8px' }}>
|
非诉讼调解协议司法确认申请书<div className="must">必填</div>
|
<div style={{ fontWeight: '400', marginLeft: '12px' }} className="public-color public-a">
|
<a href={modal1} target="_blank">
|
下载模板
|
</a>
|
</div>
|
</div>
|
<ArcoUpload
|
params={{
|
action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&&ownerId=${ownerId}&ownerType=22_00018-402`,
|
}}
|
formItemParams={{
|
rules: [{ message: '请上传非诉讼调解协议司法确认申请书', required: true }],
|
}}
|
label=""
|
field="fileInfoList2"
|
editData={{
|
fileInfoList2: data?.find((item) => item.ownerType === '22_00018-402')?.fileList || [],
|
}}
|
handleDelFile={handleDelFile}
|
onFileListChange={(v) => {
|
let newList = v?.map((item) => {
|
if (item.response) {
|
return item.response.data[0];
|
} else {
|
return item;
|
}
|
});
|
setData(data?.map((item) => ({ ...item, fileList: item.ownerType === '22_00018-402' ? newList : item.fileList })));
|
}}
|
/>
|
</Col>
|
<Col span={24} className="doubleFile">
|
<div style={{ display: 'flex', marginBottom: '8px' }}>
|
诉前联调协议案件移送函<div className="must">必填</div>
|
<div style={{ fontWeight: '400', marginLeft: '12px' }} className="public-color public-a">
|
<a href={modal3} target="_blank">
|
下载模板
|
</a>
|
</div>
|
</div>
|
<ArcoUpload
|
params={{
|
action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&&ownerId=${ownerId}&ownerType=22_00018-403`,
|
}}
|
formItemParams={{
|
rules: [{ message: '请上传诉前联调协议案件移送函', required: true }],
|
}}
|
label=""
|
field="fileInfoList3"
|
editData={{
|
fileInfoList3: data?.find((item) => item.ownerType === '22_00018-403')?.fileList || [],
|
}}
|
handleDelFile={handleDelFile}
|
onFileListChange={(v) => {
|
let newList = v?.map((item) => {
|
if (item.response) {
|
return item.response.data[0];
|
} else {
|
return item;
|
}
|
});
|
setData(data?.map((item) => ({ ...item, fileList: item.ownerType === '22_00018-403' ? newList : item.fileList })));
|
}}
|
/>
|
</Col>
|
<Col span={24} className="doubleFile">
|
<div style={{ display: 'flex', marginBottom: '8px' }}>
|
送达地址确认书<div className="must">必填</div>
|
<div style={{ fontWeight: '400', marginLeft: '12px' }} className="public-color public-a">
|
<a href={modal2} target="_blank">
|
下载模板
|
</a>
|
</div>
|
</div>
|
<ArcoUpload
|
params={{
|
action: `${appUrl.fileUrl}/${appUrl.sys}/api/web/fileInfo/upload?mainId=${caseId}&&ownerId=${ownerId}&ownerType=22_00018-108`,
|
}}
|
formItemParams={{
|
rules: [{ message: '请上传送达地址确认书', required: true }],
|
}}
|
label=""
|
field="fileInfoList4"
|
editData={{
|
fileInfoList4: data?.find((item) => item.ownerType === '22_00018-108')?.fileList || [],
|
}}
|
handleDelFile={handleDelFile}
|
onFileListChange={(v) => {
|
let newList = v?.map((item) => {
|
if (item.response) {
|
return item.response.data[0];
|
} else {
|
return item;
|
}
|
});
|
setData(data?.map((item) => ({ ...item, fileList: item.ownerType === '22_00018-108' ? newList : item.fileList })));
|
}}
|
/>
|
</Col>
|
</Row>
|
</Form>
|
</div>
|
</Scrollbars>
|
<div className="dataSync-excel">
|
<Space size="large" style={{ margin: '4px 14px' }}>
|
<Button onClick={() => handleApply()} type="primary" className="dialogPrimary">
|
提交
|
</Button>
|
<Button type="secondary" onClick={() => navigate(-1)}>
|
返回上级页面
|
</Button>
|
</Space>
|
</div>
|
</Fragment>
|
<MyModal width={1200} visible={caseCheckModal} onCancel={() => setCaseCheckModal(false)} footer={false}>
|
<CaseDetail caseId={caseId} caseData={caseData} />
|
</MyModal>
|
</NewPage>
|
);
|
};
|
|
export default JudicialSubmitAudit;
|
