import React, { useState } from 'react';
|
import { Form, Input, Select, Button, Card, List, Tag, Typography } from 'antd';
|
import { SearchOutlined } from '@ant-design/icons';
|
|
const { Text, Paragraph } = Typography;
|
|
// Mock数据
|
const mockCaseList = [
|
{
|
id: 'case-001',
|
caseTitle: '张某诉某科技公司欠薪纠纷案',
|
caseType: '判决',
|
disputeType: '欠薪',
|
caseNumber: '(2024)京0108民初12345号',
|
court: '北京市海淀区人民法院',
|
judgmentDate: '2024-03-15',
|
region: '北京市海淀区',
|
caseSummary: '原告张某于2022年1月入职被告公司担任软件工程师，双方签订了为期三年的劳动合同。2023年6月起，被告公司未按时足额支付原告工资，累计欠薪3个月，共计人民币45000元...',
|
},
|
{
|
id: 'case-002',
|
caseTitle: '李某与某餐饮公司劳动争议调解案',
|
caseType: '调解',
|
disputeType: '解除合同',
|
caseNumber: '劳调字[2024]第0089号',
|
court: '广州市劳动争议调解委员会',
|
judgmentDate: '2024-02-20',
|
region: '广东省广州市',
|
caseSummary: '申请人李某于2021年3月入职被申请人公司担任厨师长，双方因解除劳动合同经济补偿问题发生争议。经调解，双方达成一致协议...',
|
},
|
{
|
id: 'case-003',
|
caseTitle: '王某诉某制造公司工伤赔偿纠纷案',
|
caseType: '判决',
|
disputeType: '工伤赔偿',
|
caseNumber: '(2024)粤0304民初5678号',
|
court: '深圳市福田区人民法院',
|
judgmentDate: '2024-01-10',
|
region: '广东省深圳市',
|
caseSummary: '原告王某在被告公司车间工作时因设备故障受伤，经鉴定为九级伤残。双方就工伤赔偿金额产生争议，原告诉至法院...',
|
},
|
];
|
|
/**
|
* 案例搜索内容组件（用于弹窗内显示）
|
*/
|
const CaseSearchContent = () => {
|
const [loading, setLoading] = useState(false);
|
const [list, setList] = useState(mockCaseList);
|
|
const handleSearch = (values) => {
|
setLoading(true);
|
setTimeout(() => {
|
setList(mockCaseList);
|
setLoading(false);
|
}, 300);
|
};
|
|
const caseTypeColorMap = {
|
判决: 'blue',
|
调解: 'green',
|
仲裁: 'orange',
|
};
|
|
return (
|
<div>
|
<Card title="查询条件" style={{ marginBottom: 16 }}>
|
<Form layout="inline" onFinish={handleSearch}>
|
<Form.Item name="keyword" label="关键字">
|
<Input placeholder="请输入案例关键字" style={{ width: 200 }} />
|
</Form.Item>
|
<Form.Item name="disputeType" label="纠纷类型">
|
<Select placeholder="请选择" style={{ width: 120 }} allowClear>
|
<Select.Option value="欠薪">欠薪</Select.Option>
|
<Select.Option value="解除合同">解除合同</Select.Option>
|
<Select.Option value="工伤赔偿">工伤赔偿</Select.Option>
|
</Select>
|
</Form.Item>
|
<Form.Item name="caseType" label="案件类型">
|
<Select placeholder="请选择" style={{ width: 100 }} allowClear>
|
<Select.Option value="判决">判决</Select.Option>
|
<Select.Option value="调解">调解</Select.Option>
|
<Select.Option value="仲裁">仲裁</Select.Option>
|
</Select>
|
</Form.Item>
|
<Form.Item>
|
<Button type="primary" htmlType="submit" icon={<SearchOutlined />} loading={loading}>
|
查询
|
</Button>
|
</Form.Item>
|
</Form>
|
</Card>
|
|
<Card title={`查询结果（共 ${list.length} 条）`}>
|
<List
|
loading={loading}
|
dataSource={list}
|
renderItem={(item) => (
|
<List.Item>
|
<Card style={{ width: '100%' }}>
|
<div style={{ marginBottom: 12 }}>
|
<Text strong style={{ fontSize: 16, marginRight: 8 }}>{item.caseTitle}</Text>
|
<Tag color={caseTypeColorMap[item.caseType] || 'default'}>{item.caseType}</Tag>
|
<Tag>{item.disputeType}</Tag>
|
</div>
|
<div style={{ fontSize: '0.85rem', color: '#666', marginBottom: 12 }}>
|
<span style={{ marginRight: 16 }}>案号：{item.caseNumber}</span>
|
<span style={{ marginRight: 16 }}>审理机构：{item.court}</span>
|
</div>
|
<div style={{ fontSize: '0.85rem', color: '#666', marginBottom: 12 }}>
|
<span style={{ marginRight: 16 }}>裁判日期：{item.judgmentDate}</span>
|
<span>地区：{item.region}</span>
|
</div>
|
<div style={{ background: '#f5f7fb', padding: 12, borderRadius: 6 }}>
|
<Text strong style={{ display: 'block', marginBottom: 8 }}>案例摘要：</Text>
|
<Paragraph ellipsis={{ rows: 3, expandable: true, symbol: '展开' }}>
|
{item.caseSummary}
|
</Paragraph>
|
</div>
|
</Card>
|
</List.Item>
|
)}
|
/>
|
</Card>
|
</div>
|
);
|
};
|
|
export default CaseSearchContent;
|
