import React, { useEffect, useState } from 'react';
|
import NewPage from '@/components/NewPage';
|
import { Divider, Button, Spin } from '@arco-design/web-react';
|
import { useParams } from 'react-router-dom';
|
import * as $$ from '@/utils/utility';
|
import { useNavigate } from 'react-router-dom';
|
import { falv } from '@/assets/images';
|
import '../index.less';
|
|
//获取判决详细数据
|
function getDetailData(data) {
|
return $$.ax.request({ url: 'cpwsCaseText/getCpwsCaseById', type: 'get', data, service: 'know' });
|
}
|
|
//获取案例详细数据
|
function getExampleDetailData(data) {
|
return $$.ax.request({ url: 'dyhCaseInfo/getById', type: 'get', data, service: 'know' });
|
}
|
|
export default function KnowDetail() {
|
const { id, example, keyword } = useParams(); // 获取URL中的id参数
|
const navigate = useNavigate();
|
const [data, setData] = useState({});
|
const [loading, setLoading] = useState(false);//数据请求
|
|
useEffect(() => {
|
getData(id)
|
}, []);
|
|
//获取数据
|
const getData = async (id) => {
|
const getData = example == '判决文书' ? getDetailData : getExampleDetailData;
|
setLoading(true)
|
const res = await getData({ id });
|
if (res.type) {
|
setData(res.data || {})
|
setLoading(false)
|
}
|
}
|
|
//命中词条高亮
|
const handleText = (text) => {
|
// 如果没有关键字，则直接渲染文本
|
if (!keyword || !text) {
|
return <span>{text}</span>;
|
}
|
|
// 使用正则表达式查找所有匹配的关键字（不区分大小写）
|
const regex = new RegExp(`(${keyword})`, 'gi');
|
|
// 使用一个数组来存储片段
|
const parts = [];
|
let lastIndex = 0;
|
let match;
|
|
// 遍历所有匹配项，并将文本拆分为片段
|
while ((match = regex.exec(text)) !== null) {
|
// 添加非匹配文本到片段数组
|
if (match.index > lastIndex) {
|
parts.push(text.slice(lastIndex, match.index));
|
}
|
// 添加匹配文本（带有高亮样式）到片段数组
|
parts.push(
|
<span style={{ color: '#1A6FB8', fontWeight: '600' }}>
|
{match[0]}
|
</span>
|
);
|
lastIndex = regex.lastIndex;
|
}
|
|
// 添加剩余的文本（如果有）
|
if (lastIndex < text.length) {
|
parts.push(text.slice(lastIndex));
|
}
|
|
// 返回包含所有片段的 JSX 元素
|
return parts;
|
}
|
|
return (
|
<NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '知识库' }], title: '知识库' }}>
|
<div className='knowPage' style={{ height: example == '判决文书' ? 'calc(100vh - 360px)' : 'calc(100vh - 160px)' }}>
|
<Spin loading={loading} style={{ width: '100%', height: '100%' }}>
|
<div className='detailTitle'>{data.caseName || data.caseTitle || '--'}</div>
|
<Divider />
|
{example == '判决文书' ? <div className='detailContent'>
|
<div className='detailItem'><div>发生时间：</div><span>{$$.dateFormat(data.publicationDate)}</span></div>
|
<div className='detailItem'><div>纠纷类型：</div><span>{data.caseReason || '-'}</span></div>
|
<div className='detailItem'><div>案例类型：</div><span>{example || '-'}</span></div>
|
<div className='detailItem'><div>发生地点：</div><span>{data.region || '-'}</span></div>
|
<div className='detailItem'><div>审理法院：</div><span>{data.court || '-'}</span></div>
|
<div className='detailItem'><div>审理程序：</div><span>{data.trialProcedure || '-'}</span></div>
|
<div className='detailItem'><div>判决日期：</div><span>{$$.dateFormat(data.judgmentDate)}</span></div>
|
<div className='detailItem'><div>案号：</div><span>{data.caseNumber || '-'}</span></div>
|
</div> : <div className='detailContent'>
|
<div className='detailItem'><div>发生时间：</div><span>{$$.dateFormat(data.occurTime)}</span></div>
|
<div className='detailItem'><div>纠纷类型：</div><span>{data.caseTypeName || '-'}</span></div>
|
<div className='detailItem'><div>案例类型：</div><span>{example || '-'}</span></div>
|
<div className='detailItem'><div>发生地点：</div><span>{data.queProvName ? data.queProvName + (data.queCityName ? ('/' + data.queCityName) : '') + (data.queRoadName ? ('/' + data.queRoadName) : '') : '-'}</span></div>
|
<div className='detailItem'><div>调解组织：</div><span>{data.inputUnitName || '-'}</span></div>
|
</div>}
|
{example == '判决文书' ? <pre style={{ marginTop: '12px' }}>
|
<pre style={{ textIndent: '2em' }}>{handleText(data.plaintiff)}</pre>
|
<pre style={{ textIndent: '2em' }}>{handleText(data.defendant)}<br /></pre>
|
<pre style={{ textIndent: '2em' }}>{handleText(data.trialProcess)}<br /></pre>
|
<pre style={{ textIndent: '2em' }}>{handleText(data.basicCaseInfo)}<br /></pre>
|
<pre style={{ textIndent: '2em' }}>{handleText(data.trialFinding)}<br /></pre>
|
<pre style={{ textIndent: '2em' }}>{handleText(data.judgment)}<br /></pre>
|
</pre> : <pre style={{ marginTop: '12px' }}>
|
<pre style={{ textIndent: '2em' }}>{handleText(data.caseDes)}</pre>
|
<pre style={{ textIndent: '2em' }}>{handleText(data.caseClaim)}</pre>
|
<pre style={{ textIndent: '2em' }}>{handleText(data.agreeContent)}</pre>
|
</pre>}
|
|
{example != '判决文书' && <div style={{ height: '60px' }}></div>}
|
</Spin>
|
</div>
|
{example == '判决文书' &&
|
<div className='detailFooter'>
|
<div className='footerTitle'>
|
<img src={falv} alt="" />
|
案例相关法律条文
|
</div>
|
<div style={{ marginTop: '12px' }}>
|
{data.lawList?.map(item => {
|
return <div
|
key={item.id}
|
className='footerLink'
|
onClick={() => { navigate(`/mediate/knowledgeBase/detail/${item.lawOriginalInfoId}`) }}
|
>
|
《{item.law}》 {item.index}
|
</div>
|
})}
|
</div>
|
<div style={{ height: '15px' }}></div>
|
</div>
|
}
|
<div className='dataSync-excel'>
|
<Button type='secondary' onClick={() => navigate(-1)}>返回上级页面</Button>
|
</div>
|
</NewPage>
|
)
|
}
|
