251 lines
7.6 KiB
TypeScript
251 lines
7.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Input, Button, Select, Radio, DatePicker } from 'antd';
|
|
import { SearchOutlined } from '@ant-design/icons';
|
|
import styles from './announce.less';
|
|
import moment from 'moment';
|
|
|
|
const { Option } = Select;
|
|
const { RangePicker } = DatePicker;
|
|
|
|
// 定义搜索表单数据类型
|
|
export interface SearchFormData {
|
|
searchKeyword: string;
|
|
announceType: string;
|
|
projectUnit: string;
|
|
projectLocation: string;
|
|
publishTime: string;
|
|
projectType: string;
|
|
currentProvince: string;
|
|
dateRange?: [moment.Moment, moment.Moment] | null;
|
|
}
|
|
|
|
interface SearchProps {
|
|
initialValues?: SearchFormData;
|
|
onChange?: (formData: SearchFormData) => void;
|
|
onSearch?: (formData: SearchFormData) => void;
|
|
isShowAnnounceType?: boolean;
|
|
isShowSearch?: boolean;
|
|
isShowProjectUnit?: boolean;
|
|
}
|
|
|
|
// 公告类型选项
|
|
const announceTypeOptions = [
|
|
{ label: '全部', value: '全部' },
|
|
{ label: '采购需求公示', value: '采购需求公示' },
|
|
{ label: '招标采购公告', value: '招标采购公告' },
|
|
{ label: '非招标采购公告', value: '非招标采购公告' },
|
|
{ label: '资格预审公告', value: '资格预审公告' },
|
|
{ label: '招募公告', value: '招募公告' },
|
|
{ label: '变更公告', value: '变更公告' },
|
|
{ label: '中标(中选)候选人公示', value: '中标(中选)候选人公示' },
|
|
{ label: '中标(中选)结果公示', value: '中标(中选)结果公示' },
|
|
{ label: '采购失败(流标)公告', value: '采购失败(流标)公告' },
|
|
];
|
|
|
|
// 第一行省份
|
|
const firstRowProvinces = [
|
|
'全部',
|
|
'北京',
|
|
'天津',
|
|
'河北',
|
|
'山西',
|
|
'内蒙古',
|
|
'辽宁',
|
|
'吉林',
|
|
'黑龙江',
|
|
'上海',
|
|
'江苏',
|
|
'浙江',
|
|
'安徽',
|
|
'福建',
|
|
'江西',
|
|
];
|
|
|
|
// 发布时间选项
|
|
const publishTimeOptions = [
|
|
{ label: '不限', value: '不限' },
|
|
{ label: '今天', value: '今天' },
|
|
{ label: '最近三天', value: '最近三天' },
|
|
{ label: '最近一周', value: '最近一周' },
|
|
{ label: '最近一月', value: '最近一月' },
|
|
{ label: '自定义', value: '自定义' },
|
|
];
|
|
|
|
// 项目类型选项
|
|
const projectTypeOptions = [
|
|
{ label: '全部', value: '全部' },
|
|
{ label: '货物', value: '货物' },
|
|
{ label: '工程', value: '工程' },
|
|
{ label: '服务', value: '服务' },
|
|
{ label: '其他', value: '其他' },
|
|
];
|
|
|
|
const Search: React.FC<SearchProps> = ({
|
|
initialValues,
|
|
onChange,
|
|
onSearch,
|
|
isShowAnnounceType = true,
|
|
isShowSearch = true,
|
|
isShowProjectUnit = true,
|
|
}) => {
|
|
// 内部状态管理
|
|
const [formData, setFormData] = useState<SearchFormData>(
|
|
initialValues || {
|
|
searchKeyword: '',
|
|
announceType: '全部',
|
|
projectUnit: '全选',
|
|
projectLocation: '中国',
|
|
publishTime: '不限',
|
|
projectType: '全部',
|
|
currentProvince: '全部',
|
|
dateRange: null,
|
|
},
|
|
);
|
|
|
|
// 更新表单数据并通知父组件
|
|
const updateFormData = (key: keyof SearchFormData, value: any) => {
|
|
const newFormData = { ...formData, [key]: value };
|
|
setFormData(newFormData);
|
|
if (onChange) {
|
|
onChange(newFormData);
|
|
}
|
|
};
|
|
|
|
// 处理搜索按钮点击
|
|
const handleSearch = () => {
|
|
if (onSearch) {
|
|
onSearch(formData);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.announceSearch}>
|
|
{/* 公告搜索 */}
|
|
{isShowSearch && (
|
|
<div className={styles.searchRow}>
|
|
<div className={styles.searchLabel}>公告搜索</div>
|
|
<Input.Group compact>
|
|
<Input style={{ width: 'calc(100% - 200px)' }} />
|
|
<Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
|
|
搜 索
|
|
</Button>
|
|
</Input.Group>
|
|
</div>
|
|
)}
|
|
|
|
{/* 公告类型 */}
|
|
{isShowAnnounceType && (
|
|
<div className={styles.filterRow}>
|
|
<div className={styles.filterLabel}>公告类型</div>
|
|
<div className={styles.filterOptions}>
|
|
<Radio.Group
|
|
value={formData.announceType}
|
|
onChange={(e) => updateFormData('announceType', e.target.value)}
|
|
buttonStyle="solid"
|
|
>
|
|
{announceTypeOptions.map((option) => (
|
|
<Radio.Button key={option.value} value={option.value}>
|
|
{option.label}
|
|
</Radio.Button>
|
|
))}
|
|
</Radio.Group>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 项目所属单位 */}
|
|
{isShowProjectUnit && (
|
|
<div className={styles.filterRow}>
|
|
<div className={styles.filterLabel}>所属单位</div>
|
|
<Select
|
|
style={{ width: 300 }}
|
|
value={formData.projectUnit}
|
|
onChange={(value) => updateFormData('projectUnit', value)}
|
|
>
|
|
<Option value="全选">全选</Option>
|
|
<Option value="中远海运集团">中远海运集团</Option>
|
|
<Option value="中远海运物流">中远海运物流</Option>
|
|
<Option value="中远海运集装箱">中远海运集装箱</Option>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
|
|
{/* 项目所在地 */}
|
|
<div className={styles.filterRow}>
|
|
<div className={styles.filterLabel}>项目所在地</div>
|
|
<div className={styles.locationSelector}>
|
|
<Select
|
|
style={{ width: 150, marginRight: 10 }}
|
|
value={formData.projectLocation}
|
|
onChange={(value) => updateFormData('projectLocation', value)}
|
|
>
|
|
<Option value="中国">中国</Option>
|
|
<Option value="国外">国外</Option>
|
|
</Select>
|
|
|
|
<div className={styles.provinceSelector}>
|
|
<Radio.Group
|
|
value={formData.currentProvince}
|
|
onChange={(e) => updateFormData('currentProvince', e.target.value)}
|
|
buttonStyle="solid"
|
|
>
|
|
<div className={styles.provinceRow}>
|
|
{firstRowProvinces.map((province) => (
|
|
<Radio.Button key={province} value={province}>
|
|
{province}
|
|
</Radio.Button>
|
|
))}
|
|
</div>
|
|
</Radio.Group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 发布时间 */}
|
|
<div className={styles.filterRow}>
|
|
<div className={styles.filterLabel}>发布时间</div>
|
|
<div className={styles.filterOptions}>
|
|
<Radio.Group
|
|
value={formData.publishTime}
|
|
onChange={(e) => updateFormData('publishTime', e.target.value)}
|
|
buttonStyle="solid"
|
|
>
|
|
{publishTimeOptions.map((option) => (
|
|
<Radio.Button key={option.value} value={option.value}>
|
|
{option.label}
|
|
</Radio.Button>
|
|
))}
|
|
</Radio.Group>
|
|
{formData.publishTime === '自定义' && (
|
|
<RangePicker
|
|
style={{ marginLeft: 10 }}
|
|
value={formData.dateRange as any}
|
|
onChange={(dates) => updateFormData('dateRange', dates)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 项目类型 */}
|
|
<div className={styles.filterRow}>
|
|
<div className={styles.filterLabel}>项目类型</div>
|
|
<div className={styles.filterOptions}>
|
|
<Radio.Group
|
|
value={formData.projectType}
|
|
onChange={(e) => updateFormData('projectType', e.target.value)}
|
|
buttonStyle="solid"
|
|
>
|
|
{projectTypeOptions.map((option) => (
|
|
<Radio.Button key={option.value} value={option.value}>
|
|
{option.label}
|
|
</Radio.Button>
|
|
))}
|
|
</Radio.Group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Search;
|