import React, { useEffect, useState } from 'react';
|
import { useHistory, useLocation } from 'react-router-dom';
|
import { Button, Toast } from 'dingtalk-design-mobile';
|
import { selfAcceptCase, submitFormalCase } from '../CaseSubmitService/index';
|
import { WriteNoteOutlined, WriteEditOutlined, RightArrow2Outlined } from 'dd-icons';
|
import { lettersVisits_1, riskMask, preview_1, preview_2 } from '../../../../assets/img';
|
import NavBarPage from '../../../../components/NavBarPage';
|
import DingUpload from '../../../../components/DingUpload';
|
import caseTypeSelect from '../../../../utils/caseTypeSelect';
|
import * as $$ from '../../../../utils/utility';
|
import './index.less';
|
|
// 自行排查接口
|
function submitDispute(data) {
|
return $$.ax.request({ url: `caseInfo/caseRegister`, type: 'post', service: 'mediate', data });
|
}
|
|
// ai分析是否为重复来访案件
|
function getRepeatResultApi(data) {
|
return $$.ax.request({ urlAi: `case-law/getRepeatResult`, data, typeAi: 'post', service: 'mediate' });
|
}
|
|
const Preview = () => {
|
const history = useHistory();
|
const [formData, setFormData] = useState({});
|
const [submitting, setSubmitting] = useState(false); // 添加提交状态
|
const [activeTab, setActiveTab] = useState(0);
|
const [submit, setSubmit] = useState(false);
|
|
// 在组件加载时获取表单数据
|
useEffect(() => {
|
const saveData = $$.getSessionStorage('saveData');
|
if (saveData) {
|
console.log('预览页面加载的表单数据:', saveData);
|
setFormData(saveData);
|
$$.clearSessionStorage('saveData');
|
}
|
}, [$$.getSessionStorage('saveData')]);
|
|
// 处理返回按钮点击
|
const handleBack = () => {
|
history.goBack();
|
};
|
|
// 处理修改按钮点击
|
const handleEdit = () => {
|
console.log('点击修改按钮');
|
history.goBack();
|
};
|
|
// 自行受理按钮点击
|
const handleSelfHandle = async () => {
|
$$.confirmModal({
|
title: '提示',
|
subtitle: '确定自行受理吗？',
|
onOk: async () => {
|
const caseId = sessionStorage.getItem('newCaseId');
|
reauestSubmit(
|
{
|
...formData,
|
id: caseId,
|
amount: formData.amount ? Number(formData.amount) : 0,
|
peopleNum: formData.peopleNum ? Number(formData.peopleNum) : 0,
|
occurTime: formData.occurTime ? $$.timeFormat(formData.occurTime) : '',
|
isSelfAccept: 1,
|
isDraft: 0,
|
operateType: 0,
|
canal: '22_00001-3',
|
canalName: '自行排查',
|
},
|
true
|
);
|
},
|
});
|
};
|
|
// 提交按钮点击
|
function handleSubmit() {
|
// 操作二次确认弹框
|
$$.confirmModal({
|
title: '提示',
|
subtitle: '确定提交吗？',
|
onOk: async () => {
|
const caseId = sessionStorage.getItem('newCaseId');
|
if (caseId && !formData.id) {
|
formData.id = caseId;
|
}
|
global.setSpinning(true);
|
const res = await submitFormalCase({
|
...formData,
|
amount: formData.amount ? Number(formData.amount) : 0,
|
peopleNum: formData.peopleNum ? Number(formData.peopleNum) : 0,
|
occurTime: formData.occurTime ? $$.timeFormat(formData.occurTime) : '',
|
});
|
global.setSpinning(false);
|
if (res.type) {
|
// 提交成功后展示新页面
|
setSubmit(true);
|
// 清除sessionStorage中的案件ID
|
sessionStorage.removeItem('newCaseId');
|
}
|
},
|
});
|
}
|
|
//提交请求
|
const reauestSubmit = async (data, isSelfAccept) => {
|
let plaintiffsCertiNo =
|
data.personList
|
?.filter((item) => item.perType === '15_020008-1')
|
?.map((item) => item.certiNo)
|
?.join(',') || '';
|
let plaintiffs =
|
data.personList
|
?.filter((item) => item.perType === '15_020008-1')
|
?.map((item) => item.trueName)
|
?.join(',') || '';
|
let defendantsCertiNo =
|
data.personList
|
?.filter((item) => item.perType === '15_020008-2')
|
?.map((item) => item.certiNo)
|
?.join(',') || '';
|
let defendants =
|
data.personList
|
?.filter((item) => item.perType === '15_020008-2')
|
?.map((item) => item.trueName)
|
?.join(',') || '';
|
global.setSpinning(true);
|
// AI重复案件接口
|
const res = await getRepeatResultApi({
|
caseId: data.id,
|
address: data.address,
|
caseDes: data.caseDes,
|
caseClaim: data?.caseClaim,
|
plaintiffs,
|
defendants,
|
plaintiffsCertiNo,
|
defendantsCertiNo,
|
});
|
global.setSpinning(false);
|
if (res.type) {
|
if (res.data?.length < 1) {
|
submitDisputeApi(data, isSelfAccept);
|
} else {
|
// 这里展示重复案件
|
// setRepeatData({ hisData: res.data, isSelfAccept, newData: data, visible: true });
|
// console.log(repeatData, 'repeatData');
|
}
|
}
|
};
|
|
// 提交自行排查接口
|
async function submitDisputeApi(data, isSelfAccept) {
|
global.setSpinning(true);
|
const res = await submitDispute(data);
|
global.setSpinning(false);
|
if (res.type) {
|
$$.clearSessionStorage('saveData');
|
$$.clearSessionStorage('newCaseId');
|
if (isSelfAccept) {
|
// 自行受理
|
let id = res.data;
|
// 提示窗
|
$$.showToast({
|
content: '受理成功，请即使跟进办理',
|
duration: 2,
|
});
|
history.push(`/gzdyh/flow?caseTaskId=${id}&caseId=${data.id}&editShow=true&moutedTab=sxbl&leftFunction=home`);
|
} else {
|
// 提交
|
setSubmit(true);
|
}
|
}
|
}
|
|
return (
|
<>
|
{submit ? (
|
<NavBarPage title="登记">
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', backgroundColor: '#fff', height: 'calc(100vh - 44px)' }}>
|
<div style={{ marginTop: '20%', display: 'flex', justifyContent: 'center' }}>
|
<img src={preview_1} alt="提交成功" />
|
</div>
|
<div style={{ fontSize: '16px', color: '#1D2129' }}>提交成功</div>
|
<Button
|
style={{
|
width: '134px',
|
height: '44px',
|
backgroundColor: '#1A6FB8',
|
color: '#fff',
|
border: 'none',
|
borderRadius: '22px',
|
fontSize: '16px',
|
marginTop: '20px',
|
display: 'flex',
|
alignItems: 'center',
|
justifyContent: 'center',
|
}}
|
onClick={() => {
|
history.push('/gzdyh/home');
|
}}
|
>
|
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
|
<img src={preview_2} alt="返回首页" />
|
返回首页
|
</div>
|
</Button>
|
</div>
|
</NavBarPage>
|
) : (
|
<NavBarPage
|
title="登记"
|
rightChildren={
|
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
|
<img style={{ width: '14px', height: '14px' }} src={lettersVisits_1} alt="保存草稿" />
|
保存草稿
|
</div>
|
}
|
rightContentFunc={handleBack}
|
>
|
{/* 人员信息、纠纷基本信息、事项材料 */}
|
<div className="preview-tab">
|
<div className="preview-tab-bar">
|
<div className={`preview-tab-item${activeTab === 0 ? ' preview-tab-item-active' : ''}`} onClick={() => setActiveTab(0)}>
|
人员信息
|
</div>
|
<div className={`preview-tab-item${activeTab === 1 ? ' preview-tab-item-active' : ''}`} onClick={() => setActiveTab(1)}>
|
纠纷基本情况
|
</div>
|
<div className={`preview-tab-item${activeTab === 2 ? ' preview-tab-item-active' : ''}`} onClick={() => setActiveTab(2)}>
|
事项材料
|
</div>
|
</div>
|
</div>
|
|
{/* 预览区域 */}
|
<div className="preview-container">
|
{/* 根据activeTab渲染内容 */}
|
{activeTab === 0 && (
|
<div className="preview-area">
|
{formData.personList?.map((cachedForm, idx) => (
|
<div key={idx} className="card-container">
|
<div
|
className="cached-form-card"
|
onClick={() => {
|
// 跳转到readperson页面查看详情
|
// history.push(`/gzdyh/readperson?id=${cachedForm.timestamp}`);
|
}}
|
>
|
{cachedForm?.perType === '15_020008-1' && (
|
<div className="applicant-badge">
|
<span className="applicant-text">申请方</span>
|
</div>
|
)}
|
{cachedForm?.perType === '15_020008-2' && (
|
<div className="respondent-badge">
|
<span className="respondent-text">被申</span>
|
<span className="respondent-text">请方</span>
|
</div>
|
)}
|
<div className="content-wrapper">
|
<div className="cached-form-content">
|
<div className="cached-form-name-phone">
|
<span className="cached-form-name">{cachedForm?.trueName || '-'}</span>
|
{cachedForm?.mobile && <span className="cached-form-phone">{cachedForm?.mobile || '-'}</span>}
|
</div>
|
</div>
|
<div className="cached-form-header">
|
<div className="cached-form-type">
|
{cachedForm?.perType === '24_00006-1' || cachedForm?.perType === '24_00006-2' ? (
|
<>
|
代理对象：
|
<span style={{ marginLeft: '2px', color: '#86909C', fontSize: '12px' }}>{cachedForm?.name || '未知对象'}</span>
|
</>
|
) : (
|
<>
|
<span
|
style={{
|
display: 'inline-flex',
|
alignItems: 'center',
|
height: '20px',
|
marginLeft: '0px',
|
}}
|
>
|
<span
|
style={{
|
fontSize: '12px',
|
lineHeight: '20px',
|
color: ' rgba(23,26,29,0.60)',
|
marginLeft: '0px',
|
}}
|
>
|
自然人
|
</span>
|
<span
|
style={{
|
color: ' rgba(23,26,29,0.60)',
|
fontSize: '11px',
|
lineHeight: '12px',
|
marginLeft: '4px',
|
}}
|
>
|
|
|
</span>
|
<span
|
style={{
|
color: 'rgba(23,26,29,0.60)',
|
fontSize: '12px',
|
lineHeight: '20px',
|
}}
|
>
|
{cachedForm.certiNo || '-'}
|
</span>
|
</span>
|
</>
|
)}
|
</div>
|
</div>
|
</div>
|
|
{/* 右侧箭头 */}
|
<div className="right-arrow">
|
<RightArrow2Outlined style={{ color: 'rgba(23, 26, 29, 0.6)' }} />
|
</div>
|
</div>
|
</div>
|
))}
|
</div>
|
)}
|
{activeTab === 1 && (
|
<div className="preview-area" style={{ padding: '10px 0 0 0' }}>
|
<div className="record-detail">
|
<div className="record-detail-item">
|
<div className="record-detail-label">事项等级</div>
|
<div className="record-detail-value">
|
{formData.caseLevel === '1' ? '一级' : formData.caseLevel === '2' ? '二级' : formData.caseLevel === '3' ? '三级' : '-'}
|
</div>
|
</div>
|
<div className="record-detail-item">
|
<div className="record-detail-label">纠纷类型</div>
|
<div className="record-detail-value">
|
{formData?.caseTypeFirstName ? `${formData.caseTypeFirstName}/${formData.caseTypeName}` : '-'}
|
</div>
|
</div>
|
<div className="record-detail-item">
|
<div className="record-detail-label">纠纷发生时间</div>
|
<div className="record-detail-value">{formData.occurTime ? $$.timeFormat(formData.occurTime) : '-'}</div>
|
</div>
|
<div className="record-detail-item">
|
<div className="record-detail-label">纠纷发生地点</div>
|
<div className="record-detail-value">{formData.addr || '-'}</div>
|
</div>
|
<div className="record-detail-item">
|
<div className="record-detail-label">问题属地</div>
|
<div className="record-detail-value">{formData.queAreaName ? `${formData.queAreaName}/${formData.queRoadName}` : '-'}</div>
|
</div>
|
<div className="record-detail-item">
|
<div className="record-detail-label">涉及人数（人）</div>
|
<div className="record-detail-value">{formData.peopleNum || '-'}</div>
|
</div>
|
<div className="record-detail-item">
|
<div className="record-detail-label">涉及金额（元）</div>
|
<div className="record-detail-value">{formData.amount || '-'}</div>
|
</div>
|
<div className="record-detail-item">
|
<div className="record-detail-label">事项概况</div>
|
<div className="record-detail-value">{formData.caseDes || '-'}</div>
|
</div>
|
<div className="record-detail-item">
|
<div className="record-detail-label">申请事项</div>
|
<div className="record-detail-value">{formData.caseClaim || '-'}</div>
|
</div>
|
<div className="record-detail-item">
|
<div className="record-detail-label" style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#F53F3F' }}>
|
<img src={riskMask} alt="风险标识" className="risk-icon" />
|
<span className="major-dispute-text">是否重大矛盾纠纷</span>
|
</div>
|
<div className="record-detail-value">{formData.majorStatus === '1' ? '是' : '否'}</div>
|
</div>
|
</div>
|
</div>
|
)}
|
{activeTab === 2 && (
|
<div className="preview-area" style={{ padding: '10px 0 0 0' }}>
|
<div className="record-detail">
|
<div className="record-detail-item">
|
<div className="record-detail-label">申请材料</div>
|
<div className="record-detail-value">
|
{formData.fileList && formData.fileList.length > 0 ? (
|
<div className="dbcb-detail-section">
|
<DingUpload
|
fileList={formData.fileList.map((file) => ({
|
id: file.id || Date.now().toString(),
|
name: file.name || '附件',
|
size: file.size || '0KB',
|
showUrl: file.url || '',
|
}))}
|
viewOnly={true}
|
/>
|
</div>
|
) : (
|
'-'
|
)}
|
</div>
|
</div>
|
</div>
|
<div className="record-detail" style={{ marginTop: '10px' }}>
|
<div className="record-detail-item">
|
<div className="record-detail-label">证据材料</div>
|
<div className="record-detail-value">
|
{formData.fileList && formData.fileList.length > 0 ? (
|
<div className="dbcb-detail-section">
|
<DingUpload
|
fileList={formData.fileList.map((file) => ({
|
id: file.id || Date.now().toString(),
|
name: file.name || '附件',
|
size: file.size || '0KB',
|
showUrl: file.url || '',
|
}))}
|
viewOnly={true}
|
/>
|
</div>
|
) : (
|
'-'
|
)}
|
</div>
|
</div>
|
</div>
|
</div>
|
)}
|
{/* 底栏按钮区域 */}
|
<div className="button-area">
|
<div className="edit-button">
|
<WriteEditOutlined style={{ fontSize: '15px' }} />
|
修改
|
</div>
|
<Button className="self-handle-button" onClick={handleSelfHandle} disabled={submitting}>
|
自行受理
|
</Button>
|
<Button className="submit-button" onClick={handleSubmit} disabled={submitting}>
|
提交
|
</Button>
|
</div>
|
</div>
|
</NavBarPage>
|
)}
|
</>
|
);
|
};
|
|
export default Preview;
|
