import React, { useState } from 'react';
|
import { Input, DatePicker, Button, Pagination, Spin, Modal } from 'antd';
|
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';
|
import LawDetailContent from './LawDetailContent';
|
import './LawSearchContent.css';
|
|
// Mock数据 - 按原型格式
|
const mockLawList = [
|
{
|
id: 'law-001',
|
lawName: '中华人民共和国民法典',
|
effectLevel: '法律',
|
status: '有效',
|
org: '全国人民代表大会',
|
publishDate: '2020-05-28',
|
effectiveDate: '2021-01-01',
|
articles: [
|
{ number: '第五条', content: '民事主体从事民事活动，应当遵循自愿原则，按照自己的意思设立、变更、终止民事法律关系。' },
|
{ number: '第六条', content: '民事主体从事民事活动，应当遵循公平原则，合理确定各方的权利和义务。' },
|
],
|
},
|
{
|
id: 'law-002',
|
lawName: '中华人民共和国劳动法',
|
effectLevel: '法律',
|
status: '有效',
|
org: '全国人民代表大会',
|
publishDate: '2018-12-29',
|
effectiveDate: '2019-01-01',
|
articles: [
|
{ number: '第五十条', content: '工资应当以货币形式按月支付给劳动者本人。不得克扣或者无故拖欠劳动者的工资。' },
|
{ number: '第九十一条', content: '用人单位有下列侵害劳动者合法权益情形之一的，由劳动行政部门责令支付劳动者的工资报酬、经济补偿，并可以责令支付赔偿金。' },
|
],
|
},
|
{
|
id: 'law-003',
|
lawName: '中华人民共和国劳动合同法',
|
effectLevel: '法律',
|
status: '有效',
|
org: '全国人民代表大会常务委员会',
|
publishDate: '2012-12-28',
|
effectiveDate: '2013-07-01',
|
articles: [
|
{ number: '第三十条', content: '用人单位应当按照劳动合同约定和国家规定，向劳动者及时足额支付劳动报酬。' },
|
],
|
},
|
{
|
id: 'law-004',
|
lawName: '中华人民共和国社会保险法',
|
effectLevel: '法律',
|
status: '有效',
|
org: '全国人民代表大会常务委员会',
|
publishDate: '2018-12-29',
|
effectiveDate: '2019-01-01',
|
articles: [],
|
},
|
{
|
id: 'law-005',
|
lawName: '最高人民法院关于审理劳动争议案件适用法律问题的解释(一)',
|
effectLevel: '司法解释',
|
status: '有效',
|
org: '最高人民法院',
|
publishDate: '2020-12-29',
|
effectiveDate: '2021-01-01',
|
articles: [],
|
},
|
];
|
|
// 筛选器配置
|
const filterConfig = {
|
lawNature: [
|
{ label: '法律', count: 256, checked: true },
|
{ label: '法律解释', count: 33, checked: false },
|
{ label: '有关法律问题和重大问题的决定', count: 12, checked: false },
|
{ label: '修改、废止的决定', count: 8, checked: false },
|
],
|
org: [
|
{ label: '全国人民代表大会', count: 256, checked: true },
|
{ label: '全国人民代表大会常务委员会', count: 256, checked: false },
|
{ label: '国务院', count: 21, checked: false },
|
{ label: '地方各级人民代表大会', count: 8, checked: false },
|
{ label: '人民法院', count: 21, checked: false },
|
{ label: '人民检察院', count: 8, checked: false },
|
],
|
validity: [
|
{ label: '有效', count: 33, checked: true },
|
{ label: '尚未生效', count: 33, checked: false },
|
{ label: '已废止', count: 12, checked: false },
|
{ label: '已修改', count: 21, checked: false },
|
{ label: '其他', count: 8, checked: false },
|
],
|
};
|
|
/**
|
* 法条搜索内容组件（用于弹窗内显示）- 与原型 law_search.html 保持一致
|
*/
|
const LawSearchContent = () => {
|
const [loading, setLoading] = useState(false);
|
const [keyword, setKeyword] = useState('民事主体从事民事活动');
|
const [list, setList] = useState(mockLawList);
|
const [activeId, setActiveId] = useState('law-001');
|
const [filters, setFilters] = useState(filterConfig);
|
const [currentPage, setCurrentPage] = useState(1);
|
const [detailVisible, setDetailVisible] = useState(false);
|
const [selectedLawId, setSelectedLawId] = useState(null);
|
const pageSize = 10;
|
const total = 256;
|
|
const handleSearch = () => {
|
setLoading(true);
|
setTimeout(() => {
|
setList(mockLawList);
|
setLoading(false);
|
}, 300);
|
};
|
|
const handleReset = () => {
|
setKeyword('');
|
setFilters(filterConfig);
|
};
|
|
const toggleFilter = (category, index) => {
|
setFilters((prev) => {
|
const newFilters = { ...prev };
|
newFilters[category] = [...prev[category]];
|
newFilters[category][index] = {
|
...newFilters[category][index],
|
checked: !newFilters[category][index].checked,
|
};
|
return newFilters;
|
});
|
};
|
|
const handleLawItemClick = (lawId) => {
|
if (activeId === lawId) {
|
// 如果已经是激活状态，再次点击弹出详情
|
setSelectedLawId(lawId);
|
setDetailVisible(true);
|
} else {
|
setActiveId(lawId);
|
}
|
};
|
|
return (
|
<div className="law-search-container">
|
{/* 查询条件区域 */}
|
<div className="law-search-query-conditions">
|
<h2 className="law-search-query-title">
|
<i className="fas fa-search"></i>
|
查询条件
|
</h2>
|
<div className="law-search-query-form">
|
<div className="law-search-form-group">
|
<label className="law-search-form-label">关键词</label>
|
<Input
|
value={keyword}
|
onChange={(e) => setKeyword(e.target.value)}
|
placeholder="请输入关键词"
|
/>
|
</div>
|
<div className="law-search-form-group">
|
<label className="law-search-form-label">公布日期</label>
|
<div className="law-search-date-input-group">
|
<DatePicker placeholder="开始日期" style={{ flex: 1 }} />
|
<span className="law-search-date-separator">至</span>
|
<DatePicker placeholder="结束日期" style={{ flex: 1 }} />
|
</div>
|
</div>
|
<div className="law-search-form-group full-width">
|
<div className="law-search-button-group">
|
<Button type="primary" icon={<SearchOutlined />} onClick={handleSearch} loading={loading}>
|
查询
|
</Button>
|
<Button icon={<RedoOutlined />} onClick={handleReset}>
|
重置条件
|
</Button>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
{/* 筛选器区域 */}
|
<div className="law-search-filters-section">
|
<div className="law-search-filters-grid">
|
{/* 法律性质 */}
|
<div className="law-search-filter-category">
|
<h3 className="law-search-filter-title">法律性质</h3>
|
<div className="law-search-filter-list">
|
{filters.lawNature.map((item, index) => (
|
<div
|
key={index}
|
className="law-search-filter-item"
|
onClick={() => toggleFilter('lawNature', index)}
|
>
|
<div className={`law-search-filter-checkbox ${item.checked ? 'checked' : ''}`}>
|
{item.checked && <i className="fas fa-check"></i>}
|
</div>
|
<span>
|
{item.label} ({item.count})
|
</span>
|
</div>
|
))}
|
</div>
|
</div>
|
|
{/* 制定机关 */}
|
<div className="law-search-filter-category">
|
<h3 className="law-search-filter-title">制定机关</h3>
|
<div className="law-search-filter-list">
|
{filters.org.map((item, index) => (
|
<div key={index} className="law-search-filter-item" onClick={() => toggleFilter('org', index)}>
|
<div className={`law-search-filter-checkbox ${item.checked ? 'checked' : ''}`}>
|
{item.checked && <i className="fas fa-check"></i>}
|
</div>
|
<span>
|
{item.label} ({item.count})
|
</span>
|
</div>
|
))}
|
</div>
|
</div>
|
|
{/* 时效性 */}
|
<div className="law-search-filter-category">
|
<h3 className="law-search-filter-title">时效性</h3>
|
<div className="law-search-filter-list">
|
{filters.validity.map((item, index) => (
|
<div
|
key={index}
|
className="law-search-filter-item"
|
onClick={() => toggleFilter('validity', index)}
|
>
|
<div className={`law-search-filter-checkbox ${item.checked ? 'checked' : ''}`}>
|
{item.checked && <i className="fas fa-check"></i>}
|
</div>
|
<span>
|
{item.label} ({item.count})
|
</span>
|
</div>
|
))}
|
</div>
|
</div>
|
</div>
|
</div>
|
|
{/* 查询结果区域 */}
|
<div className="law-search-results-section">
|
<div className="law-search-results-header">
|
<h2 className="law-search-results-title">查询结果</h2>
|
<div className="law-search-page-info">记录总数：{total}条</div>
|
</div>
|
|
<Spin spinning={loading}>
|
<div className="law-search-laws-list">
|
{list.map((law) => (
|
<div
|
key={law.id}
|
className={`law-search-law-item ${activeId === law.id ? 'active' : ''}`}
|
onClick={() => handleLawItemClick(law.id)}
|
>
|
<h3 className="law-search-law-title">{law.lawName}</h3>
|
<div className="law-search-law-meta">
|
<div className="law-search-law-meta-item">
|
<i className="fas fa-check-circle status-valid"></i>
|
<span>时效性：{law.status}</span>
|
</div>
|
<div className="law-search-law-meta-item">
|
<i className="fas fa-layer-group"></i>
|
<span>法律效力位阶：{law.effectLevel}</span>
|
</div>
|
<div className="law-search-law-meta-item">
|
<i className="fas fa-landmark"></i>
|
<span>制定机关：{law.org}</span>
|
</div>
|
<div className="law-search-law-meta-item">
|
<i className="far fa-calendar-alt"></i>
|
<span>公布日期：{law.publishDate}</span>
|
</div>
|
<div className="law-search-law-meta-item">
|
<i className="far fa-calendar-check"></i>
|
<span>实施日期：{law.effectiveDate}</span>
|
</div>
|
</div>
|
{/* 条文内容 - 仅在选中状态显示 */}
|
{activeId === law.id && law.articles && law.articles.length > 0 && (
|
<div className="law-search-law-content">
|
{law.articles.map((article, index) => (
|
<div className="law-search-law-article" key={index}>
|
<span className="law-search-article-number">{article.number}</span>
|
<span>{article.content}</span>
|
</div>
|
))}
|
</div>
|
)}
|
</div>
|
))}
|
</div>
|
</Spin>
|
|
{/* 分页 */}
|
<div className="law-search-pagination">
|
<Pagination
|
current={currentPage}
|
pageSize={pageSize}
|
total={total}
|
onChange={(page) => setCurrentPage(page)}
|
showSizeChanger={false}
|
showQuickJumper
|
showTotal={(total, range) => `第 ${range[0]}-${range[1]} 条 / 共 ${total} 条`}
|
/>
|
</div>
|
</div>
|
|
{/* 详情弹窗 */}
|
<Modal
|
title={
|
<div style={{ fontSize: '1.2rem', fontWeight: 600 }}>
|
<i className="fas fa-book" style={{ marginRight: 10, color: '#1a6fb8' }}></i>
|
法律条文详情
|
</div>
|
}
|
visible={detailVisible}
|
onCancel={() => setDetailVisible(false)}
|
footer={null}
|
width={1000}
|
bodyStyle={{ padding: 0, height: '80vh', overflow: 'hidden' }}
|
centered
|
destroyOnClose
|
>
|
<LawDetailContent lawId={selectedLawId} />
|
</Modal>
|
</div>
|
);
|
};
|
|
export default LawSearchContent;
|
