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 '../index.less';
|
|
//获取详细数据
|
function getDetailData(data) {
|
return $$.ax.request({ url: 'lawOriginalInfo/getById', type: 'get', data, service: 'know' });
|
}
|
|
export default function KnowDetail() {
|
const { id, keyword } = useParams(); // 获取URL中的id参数
|
const navigate = useNavigate();
|
const [data, setData] = useState({});
|
const [loading, setLoading] = useState(false);//数据请求
|
|
useEffect(() => {
|
getData(id)
|
}, []);
|
|
//获取数据
|
const getData = async (id) => {
|
setLoading(true)
|
const res = await getDetailData({ 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'>
|
<Spin loading={loading} style={{ width: '100%', height: '100%' }}>
|
<div className='detailTitle'>{data.title}</div>
|
<Divider />
|
<div className='detailContent'>
|
<div className='detailItem1'><div>时效性：</div><span>{data.validityName || '-'}</span></div>
|
<div className='detailItem'><div>公布日期：</div><span>{$$.dateFormat(data.publishTime)}</span></div>
|
<div className='detailItem'><div>制定机关：</div><span>{data.authorityName || '-'}</span></div>
|
<div className='detailItem1'><div>法律效力位阶：</div><span>{data.lawNatureName || '-'}</span></div>
|
<div className='detailItem'><div>实施日期：</div><span>{$$.dateFormat(data.implementationTime)}</span></div>
|
</div>
|
<pre>
|
{handleText(data.provisionText)}
|
</pre>
|
<div style={{ height: '60px' }}></div>
|
</Spin>
|
</div>
|
<div className='dataSync-excel'>
|
<Button type='secondary' onClick={() => navigate(-1)}>返回上级页面</Button>
|
</div>
|
</NewPage>
|
)
|
}
|
