import React, { useEffect, useState, useRef } from 'react';
|
import NewPage from '@/components/NewPage';
|
import MyTabsNew from '@/components/MyTabsNew';
|
import NewTableSearch from '@/components/NewTableSearch';
|
import * as $$ from '@/utils/utility';
|
import { Form, Space } from 'antd';
|
import { Divider, Pagination, Spin } from '@arco-design/web-react';
|
import { IconDown, IconClose } from '@arco-design/web-react/icon';
|
import { useNavigate, useLocation } from 'react-router-dom';
|
import { Scrollbars } from "react-custom-scrollbars";
|
import { getOffset, getSize } from '@/utils/utility';
|
import ClassicCase from './components/ClassicCase.jsx';
|
import './index.less';
|
|
//知识库统计类别
|
function getCategoryCount(data) {
|
return $$.ax.request({ url: 'lawInfo/categoryCount', type: 'get', data, service: 'know' });
|
}
|
|
//知识库列表
|
function getPageQuery(data) {
|
return $$.ax.request({ url: 'lawInfo/pageQuery', type: 'get', data, service: 'know' });
|
}
|
export default function KnowledgeBase() {
|
const [form] = Form.useForm();
|
const navigate = useNavigate();
|
let location = useLocation();
|
const scrollRef = useRef(null);
|
const dict = {
|
'法律制定机关': 'authority',
|
'法律性质': 'lawNature',
|
'法律时效性': 'validity',
|
'keyword': '关键词',
|
'authority': '法律制定机关',
|
'lawNature': '法律性质',
|
'validity': '法律时效性',
|
'publishTime': '公布日期',
|
'implementationTime': '实施日期',
|
}
|
|
const [mediateTab, setMediateTab] = useState('1');// tabs标签分页
|
const [knowSearchList, setKnowSearchList] = useState([]);//左侧知识库分类
|
const [tableList, setTableList] = useState([])//列表
|
const [searchData, setSearchData] = useState({});//查询数据
|
const [pageData, setPageData] = useState({
|
page: 1,
|
size: 10,
|
});//页码
|
const [total, setTotal] = useState(0);//列表总数
|
const [loading, setLoading] = useState(false);//表格请求
|
const [height, setHeight] = useState(500);//滚动高度
|
const [leftLoading, setLeftLoading] = useState(false);//左侧loading
|
|
useEffect(() => {
|
getCount()
|
//缓存处理
|
let returnRouteData = $$.getSessionStorage(location.pathname);
|
if (returnRouteData && returnRouteData.mediateTab) {
|
setMediateTab(returnRouteData.mediateTab)
|
}
|
if (returnRouteData && returnRouteData.mediateTab === '1') {
|
if (returnRouteData.pageData) {
|
setPageData(returnRouteData.pageData)
|
}
|
if (returnRouteData.searchData) {
|
form.setFieldsValue(returnRouteData.searchData)
|
setSearchData(returnRouteData.searchData)
|
}
|
$$.clearSessionStorage(location.pathname);
|
}
|
onWindowResize()
|
window.addEventListener("resize", onWindowResize);
|
// 返回一个函数，该函数会在组件卸载前执行
|
return () => {
|
// 组件销毁时执行
|
window.removeEventListener("resize", onWindowResize);
|
};
|
}, [])
|
|
useEffect(() => {
|
getTableData()
|
}, [searchData, pageData])
|
|
const onWindowResize = () => {
|
let offsetTop = 0;
|
if (scrollRef.current.container) {
|
offsetTop = getOffset(scrollRef.current.container).top;
|
}
|
setHeight(getSize().windowH - offsetTop - 72)
|
};
|
|
//获取统计
|
const getCount = async () => {
|
setLeftLoading(true)
|
const res = await getCategoryCount()
|
if (res.type) {
|
setKnowSearchList(res.data)
|
setLeftLoading(false)
|
}
|
}
|
|
//获取数据
|
const getTableData = async () => {
|
setLoading(true)
|
const search = { ...searchData }
|
$$.changeTimNeweFormat(search, 'publishTime', 'publishStart', 'publishEnd');
|
$$.changeTimNeweFormat(search, 'implementationTime', 'implementationStart', 'implementationEnd');
|
const res = await getPageQuery({
|
...search,
|
...pageData
|
})
|
if (res.type) {
|
setLoading(false)
|
setTableList(res.data.content)
|
setTotal(res.data.totalElements)
|
}
|
}
|
|
//命中词条高亮
|
const handleText = (text) => {
|
let keyword = searchData.keyword || ''
|
// 如果没有关键字，则直接渲染文本
|
if (!keyword) {
|
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' }}>
|
{match[0]}
|
</span>
|
);
|
lastIndex = regex.lastIndex;
|
}
|
|
// 添加剩余的文本（如果有）
|
if (lastIndex < text.length) {
|
parts.push(text.slice(lastIndex));
|
}
|
|
// 返回包含所有片段的 JSX 元素
|
return <span>{parts}</span>;
|
}
|
|
//左侧查询
|
const searchTotal = (data, children) => {
|
const name = dict[data.name]
|
const newSearch = searchData
|
setSearchData({
|
...newSearch,
|
[name]: children.value
|
})
|
setPageData({
|
...pageData,
|
page: 1
|
})
|
}
|
|
//查询
|
const handleSearch = () => {
|
let values = form.getFieldsValue(true);
|
let filterValues = { ...values }
|
Object.keys(values).map(item => {
|
if (values[item] === '' || values[item] === undefined) {
|
delete filterValues[item]
|
}
|
})
|
setSearchData({
|
...searchData,
|
...filterValues
|
})
|
setPageData({
|
...pageData,
|
page: 1
|
})
|
};
|
|
//缓存
|
const handleCache = () => {
|
$$.setSessionStorage(location.pathname, {
|
searchData: searchData,
|
pageData: pageData,
|
mediateTab: mediateTab,
|
});
|
}
|
|
return (
|
<NewPage pageHead={{ breadcrumbData: [{ title: '工作台' }, { title: '知识库' }], title: '知识库' }}>
|
<div className="comprehensive">
|
<div className="pageTabs" style={{ marginTop: '-15px' }}>
|
<MyTabsNew
|
tabs={[
|
{ key: '1', label: '法律法规' },
|
{ key: '2', label: '典型案例' },
|
]}
|
activeKey={mediateTab}
|
onChange={(activeKey) => {
|
setMediateTab(activeKey);
|
}}
|
/>
|
</div>
|
{mediateTab === '1' && <>
|
<div className="myMediation-search" style={{ marginTop: '15px' }}>
|
<div style={{ fontSize: '16px', marginBottom: '10px' }}>查询条件</div>
|
<NewTableSearch
|
exportButtonShow={false}
|
labelLength={4}
|
rowNum={2}
|
form={form}
|
itemData={[
|
{ type: 'Input', name: 'keyword', label: '关键词' },
|
{ type: 'RangePicker', name: 'publishTime', label: '公布日期', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
|
{ type: 'RangePicker', name: 'implementationTime', label: '实施日期', shortcutsPlacementLeft: true, shortcuts: $$.shortcutsList(), span: 8 },
|
]}
|
handleReset={() => {
|
form.resetFields()
|
const newSearch = searchData
|
const resetList = ['keyword', 'publishTime', 'implementationTime']
|
resetList.forEach(key => {
|
delete newSearch[key];
|
});
|
setSearchData({
|
...newSearch
|
})
|
setPageData({
|
...pageData,
|
page: 1
|
})
|
}}
|
handleSearch={() => { handleSearch() }}
|
/>
|
</div>
|
<div className='knowledgeBase'>
|
<div className='knowLeft'>
|
<Spin loading={leftLoading} style={{ width: '100%', height: '100%' }}>
|
<Scrollbars style={{ height: height + 68 + 'px' }} autoHide ref={scrollRef}>
|
{knowSearchList?.map((item, index) => {
|
return <div
|
style={{
|
padding: '8px',
|
background: '#fff',
|
marginBottom: knowSearchList.length - 1 === index ? '0' : '12px'
|
}}
|
key={item.code}
|
>
|
<div className='knowTitle'>{item.name}</div>
|
<Divider />
|
{item.children?.map(res => {
|
let lightList = Object.keys(searchData)
|
let lightKey = lightList.indexOf(dict[item.name])
|
let lightValue = lightList[lightKey]
|
return <div
|
className='knowList'
|
style={{ color: (lightKey != -1) && searchData[lightValue] === res.value ? '#1a6fb8' : '' }}
|
key={res.code}
|
onClick={() => { searchTotal(item, res) }}
|
>{res.name + '（' + res.count + '）'}</div>
|
})}
|
</div>
|
})}
|
</Scrollbars>
|
</Spin>
|
</div>
|
<div className='knowRight'>
|
<Spin loading={loading} style={{ width: '100%', height: '100%' }}>
|
<Scrollbars style={{ height: height + 'px' }} autoHide ref={scrollRef}>
|
<div style={{ fontSize: "16px" }}>查询结果</div>
|
{Object.keys(searchData).length !== 0 && <>
|
<div className='rightSearch'>
|
查询条件：{Object.keys(searchData).length}项
|
<span onClick={() => {
|
form.resetFields()
|
setSearchData({})
|
setPageData({
|
...pageData,
|
page: 1
|
})
|
}}>清空条件</span>
|
</div>
|
<div className='rightTag'>
|
{Object.keys(searchData).map(item => {
|
let keyName = dict[item]
|
let value = searchData[item]
|
if (item == 'implementationTime' || item == 'publishTime') {
|
//时间
|
value = searchData[item][0] + ' ~ ' + searchData[item][1]
|
}
|
if (item == 'authority' || item == 'lawNature' || item == 'validity') {
|
//左侧，根据code获取name
|
let leftDataFind = knowSearchList.find(mdata => mdata.name == keyName) || {}
|
leftDataFind.children?.some(mdata => {
|
if (mdata.value == value) {
|
value = mdata.name
|
return true
|
}
|
return false
|
})
|
}
|
return <div key={item}>{keyName}：{value}
|
<IconClose
|
style={{ cursor: 'pointer' }}
|
onClick={() => {
|
let newData = { ...searchData }
|
delete newData[item]
|
form.resetFields([item])
|
setSearchData({
|
...newData
|
})
|
}}
|
/>
|
</div>
|
})}
|
</div>
|
</>}
|
<div>
|
{tableList.map((item, index) => {
|
return <div key={index}>
|
<div className='knowTableList'>
|
<div className='knowImg'>{item.title.charAt(7)}</div>
|
<div className='knowData'>
|
<div
|
className='knowTopTitle'
|
onClick={() => {
|
handleCache()
|
navigate(`/mediate/knowledgeBase/detail/${item.lawOriginalInfoId}/${searchData.keyword}`)
|
}}
|
>{handleText(item.title)}</div>
|
<div style={{ lineHeight: '18px', marginTop: '5px' }}>{`时效性：${item.validityName || '无'} | 法律效力位阶：${item.lawNatureName || '无'} | 制定机关：${item.authorityName || '无'} | 公布日期：${$$.dateFormat(item.publishTime)
|
} | 实施日期：${$$.dateFormat(item.implementationTime)}`}</div>
|
</div>
|
<div className='knowAction'>
|
<Space style={{ color: '#1A6FB8' }}>
|
<div className='pointer' onClick={() => {
|
handleCache()
|
navigate(`/mediate/knowledgeBase/detail/${item.lawOriginalInfoId}/${searchData.keyword}`)
|
}}>详情</div>
|
<div className='pointer' style={{ color: '#ccc' }} onClick={() => { }}>修改</div>
|
<div className='pointer' style={{ color: '#ccc' }} onClick={() => { }}>删除</div>
|
</Space>
|
</div>
|
</div>
|
{item.keywordProvisionList && <div className='knowDetailTxt'>
|
{item.keywordProvisionList.map((res, index) => {
|
if (index <= 4) {
|
return <div key={res.lawProvisionId} style={{ marginBottom: '5px' }}>
|
{res.provisionIndex} {handleText(res.provisionText)}
|
</div>
|
}
|
})}
|
{item.keywordProvisionList.length > 5 && <div
|
style={{ color: '#1A6FB8', cursor: 'pointer' }}
|
onClick={() => {
|
handleCache()
|
navigate(`/mediate/knowledgeBase/detail/${item.lawOriginalInfoId}/${searchData.keyword}`)
|
}}
|
>
|
查看更多 <IconDown />
|
</div>}
|
</div>}
|
<Divider />
|
</div>
|
})}
|
{tableList.length === 0 && <div style={{ textAlign: 'center', marginTop: '50px' }}>{$$.MyNewEmpty({ description: '暂无数据' })}</div>}
|
</div>
|
</Scrollbars>
|
<Pagination
|
showTotal
|
total={total}
|
showJumper
|
sizeCanChange
|
style={{ margin: '12px 12px 0 12px', justifyContent: 'end' }}
|
current={pageData.page}
|
pageSize={pageData.size}
|
onChange={(page, size) => {
|
setPageData({ page, size });
|
}}
|
/>
|
</Spin>
|
</div>
|
</div>
|
</>}
|
{mediateTab === '2' && <>
|
<ClassicCase mediateTab={mediateTab} />
|
</>}
|
</div>
|
</NewPage>
|
)
|
}
|
