修改样式
This commit is contained in:
linxd
250
src/pages/announce/Search.tsx
Normal file
250
src/pages/announce/Search.tsx
Normal file
@ -0,0 +1,250 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user