|
|
|
@@ -1,904 +0,0 @@ |
|
|
|
import { useState, useEffect, useRef, Children } from 'react'; |
|
|
|
import { Segmented, ConfigProvider, Flex, Space, Select, Input, Tag, Tabs, Row, Col, Descriptions, InputNumber, Cascader, Popconfirm, Button, Collapse, Typography } from 'antd'; |
|
|
|
import { |
|
|
|
SearchOutlined, |
|
|
|
CloseOutlined, |
|
|
|
EnvironmentOutlined, |
|
|
|
CaretUpOutlined, MenuOutlined |
|
|
|
} from '@ant-design/icons'; |
|
|
|
import { |
|
|
|
LoginForm, |
|
|
|
ProFormCaptcha, |
|
|
|
ProFormText, |
|
|
|
ProFormDependency, |
|
|
|
PageContainer |
|
|
|
} from '@ant-design/pro-components'; |
|
|
|
import { useModel, useSearchParams, connect, Link } from 'umi'; |
|
|
|
import { PageSize } from 'docx'; |
|
|
|
|
|
|
|
const cascaderfieldNames = { label: 'name', value: 'id', children: 'children' }; |
|
|
|
|
|
|
|
interface SearchFilterProps { |
|
|
|
getSearchParams: (value: any) => void, |
|
|
|
searchJobParams: any, |
|
|
|
} |
|
|
|
|
|
|
|
const SearchFilter: React.FC<SearchFilterProps> = ({ dispatch, dictModel, getSearchParams, searchJobParams }: any) => { |
|
|
|
const [searchParams] = useSearchParams(); |
|
|
|
const [showSearch, setShowSearch] = useState<boolean>(false); |
|
|
|
const [keywordName, setKeywordName] = useState<string>(''); |
|
|
|
const isFirstRender = useRef(true); |
|
|
|
|
|
|
|
const setSearchParams = (searchParams: object) => { |
|
|
|
getSearchParams(searchParams) |
|
|
|
} |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
if(searchParams) { |
|
|
|
setKeywordName(searchParams.get('keyword')) |
|
|
|
setSearchParams(prevState => ({ |
|
|
|
...prevState, |
|
|
|
keyword: searchParams.get('keyword') |
|
|
|
})); |
|
|
|
} |
|
|
|
setSearchParams(searchJobParams); |
|
|
|
|
|
|
|
|
|
|
|
}, []) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
setSearchParams(searchJobParams); |
|
|
|
}, [searchJobParams]) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
dispatch({ type: 'dictModel/getList', payload: { code: 2009, type: 'setAreaList' } }) |
|
|
|
dispatch({ type: 'dictModel/getList', payload: { code: "2009000100030002", type: 'setXiaolanzhenList' } }) |
|
|
|
dispatch({ type: 'dictModel/getList', payload: { code: "200900010003", type: 'setZhongshanList' } }) |
|
|
|
dispatch({ type: 'dictModel/getList', payload: { code: 2027, type: 'setIndustryPostList' } }) |
|
|
|
dispatch({ type: 'dictModel/getList', payload: { code: 2005, type: 'setPayList' } }) |
|
|
|
dispatch({ type: 'dictModel/getList', payload: { code: 2002, type: 'setNatureList' } }) |
|
|
|
dispatch({ type: 'dictModel/getList', payload: { code: 2022, type: 'setUpdateList' } }) |
|
|
|
dispatch({ type: 'dictModel/getList', payload: { code: 2021, type: 'setWorkExperienceList' } }) |
|
|
|
dispatch({ type: 'dictModel/getList', payload: { code: 2006, type: 'setEducationList' } }) |
|
|
|
dispatch({ type: 'dictModel/getList', payload: { code: 2014, type: 'setTitleList' } }) |
|
|
|
dispatch({ type: 'dictModel/getList', payload: { code: 2015, type: 'setSkillCertificationeList' } }) |
|
|
|
dispatch({ type: 'dictModel/getList', payload: { code: 2003, type: 'setScaleList' } }) |
|
|
|
dispatch({ type: 'dictModel/getList', payload: { code: 2016, type: 'setAccommodationRequirementList' } }) |
|
|
|
dispatch({ type: 'dictModel/getList', payload: { code: 2017, type: 'setHolidayRestList' } }) |
|
|
|
}, []) |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
dictModel.payList.unshift({ id: 0, name: '不限', checked: true }); |
|
|
|
}, [dictModel.payList]) |
|
|
|
useEffect(() => { |
|
|
|
dictModel.workExperienceList.unshift({ id: 0, name: '不限', checked: true }); |
|
|
|
}, [dictModel.workExperienceList]) |
|
|
|
useEffect(() => { |
|
|
|
dictModel.educationList.unshift({ id: 0, name: '不限', checked: true }); |
|
|
|
}, [dictModel.educationList]) |
|
|
|
useEffect(() => { |
|
|
|
dictModel.titleList.unshift({ id: 0, name: '不限', checked: true }); |
|
|
|
}, [dictModel.titleList]) |
|
|
|
useEffect(() => { |
|
|
|
dictModel.skillCertificationeList.unshift({ id: 0, name: '不限', checked: true }); |
|
|
|
}, [dictModel.skillCertificationeList]) |
|
|
|
useEffect(() => { |
|
|
|
dictModel.natureList.unshift({ id: 0, name: '不限', checked: true }); |
|
|
|
}, [dictModel.natureList]) |
|
|
|
useEffect(() => { |
|
|
|
dictModel.scaleList.unshift({ id: 0, name: '不限', checked: true }); |
|
|
|
}, [dictModel.scaleList]) |
|
|
|
useEffect(() => { |
|
|
|
dictModel.updateList.unshift({ id: 0, name: '不限', checked: true }); |
|
|
|
}, [dictModel.updateList]) |
|
|
|
useEffect(() => { |
|
|
|
dictModel.accommodationRequirementList.unshift({ id: 0, name: '不限', checked: true }); |
|
|
|
}, [dictModel.accommodationRequirementList]) |
|
|
|
useEffect(() => { |
|
|
|
dictModel.holidayRestList.unshift({ id: 0, name: '不限', checked: true }); |
|
|
|
}, [dictModel.holidayRestList]) |
|
|
|
|
|
|
|
// 地区 |
|
|
|
const xiaolanzhenHasUnlimited = dictModel.xiaolanzhenList.some(item => item.name === '不限'); |
|
|
|
const xiaolanzhenHasXiaolan = dictModel.xiaolanzhenList.some(item => item.name === '小榄镇'); |
|
|
|
if (!xiaolanzhenHasXiaolan) { |
|
|
|
dictModel.xiaolanzhenList.unshift({ id: 100004, name: '小榄镇', checked: false }); |
|
|
|
} |
|
|
|
if (!xiaolanzhenHasUnlimited) { |
|
|
|
dictModel.xiaolanzhenList.unshift({ id: 0, name: '不限', checked: true }); |
|
|
|
} |
|
|
|
const zhongshanHasXiaolan = dictModel.zhongshanList.some(item => item.name === '中山市'); |
|
|
|
if (!zhongshanHasXiaolan) { |
|
|
|
dictModel.zhongshanList.unshift({ id: 1000037, name: '中山市', checked: false }); |
|
|
|
dictModel.zhongshanList = dictModel.zhongshanList.filter(item => item.id !== 100004); |
|
|
|
} |
|
|
|
|
|
|
|
const [areaName, setAreaName] = useState<string>(''); |
|
|
|
const [areaItem, setAreaItem] = useState(null) |
|
|
|
const cityChange = (item, idx) => { |
|
|
|
dictModel.xiaolanzhenList.forEach((i) => { |
|
|
|
i.checked = i.value === item.value; |
|
|
|
}); |
|
|
|
|
|
|
|
dictModel.zhongshanList.forEach((i) => { |
|
|
|
i.checked = i.value === item.value; |
|
|
|
}); |
|
|
|
|
|
|
|
if (item.id == 0) { |
|
|
|
dictModel.xiaolanzhenList.forEach((i) => { |
|
|
|
i.checked = i.id === item.id; |
|
|
|
}); |
|
|
|
dictModel.zhongshanList.forEach((i) => { |
|
|
|
i.checked = i.id === item.id; |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
if (item.id == 100004) { |
|
|
|
dictModel.xiaolanzhenList.forEach((i) => { |
|
|
|
i.checked = i.id === item.id; |
|
|
|
}); |
|
|
|
dictModel.zhongshanList.forEach((i) => { |
|
|
|
i.checked = i.id === item.id; |
|
|
|
}); |
|
|
|
} else { |
|
|
|
if (dictModel.xiaolanzhenList.some(i => i.id === item.id)) { |
|
|
|
dictModel.xiaolanzhenList.forEach((i) => { |
|
|
|
i.checked = i.id === item.id; |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
if (item.id == 1000037) { |
|
|
|
dictModel.xiaolanzhenList.forEach((i) => { |
|
|
|
i.checked = i.id === item.id; |
|
|
|
}); |
|
|
|
dictModel.zhongshanList.forEach((i) => { |
|
|
|
i.checked = i.id === item.id; |
|
|
|
}); |
|
|
|
} else { |
|
|
|
if (dictModel.zhongshanList.some(i => i.id === item.id)) { |
|
|
|
dictModel.zhongshanList.forEach((i) => { |
|
|
|
i.checked = i.id === item.id; |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
setAreaName(item.name) |
|
|
|
isFirstRender.current = false; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const searchCityChange = (item, idx) => { |
|
|
|
if (item.id == 0) { |
|
|
|
setSearchParams(prevState => ({ |
|
|
|
...prevState, |
|
|
|
city: 0, |
|
|
|
district: 0, |
|
|
|
street: 0 |
|
|
|
})); |
|
|
|
} |
|
|
|
|
|
|
|
if (item.id == 100004) { |
|
|
|
setSearchParams(prevState => ({ |
|
|
|
...prevState, |
|
|
|
city: 0, |
|
|
|
district: item.id, |
|
|
|
street: 0 |
|
|
|
})); |
|
|
|
|
|
|
|
} else { |
|
|
|
if (dictModel.xiaolanzhenList.some(i => i.id === item.id)) { |
|
|
|
setSearchParams(prevState => ({ |
|
|
|
...prevState, |
|
|
|
city: 0, |
|
|
|
district: 0, |
|
|
|
street: item.id, |
|
|
|
})); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
if (item.id == 1000037) { |
|
|
|
setSearchParams(prevState => ({ |
|
|
|
...prevState, |
|
|
|
city: item.id, |
|
|
|
district: 0, |
|
|
|
street: 0 |
|
|
|
})); |
|
|
|
} else { |
|
|
|
if (dictModel.zhongshanList.some(i => i.id === item.id)) { |
|
|
|
setSearchParams(prevState => ({ |
|
|
|
...prevState, |
|
|
|
city: 0, |
|
|
|
district: item.id, |
|
|
|
street: 0 |
|
|
|
})); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 行业 |
|
|
|
const [industryTags, setIndustryTags] = useState<string[]>([]); |
|
|
|
const [industryItem, setIndustryItem] = useState<object>(null); |
|
|
|
const industryChange = (tag: object, checked: boolean) => { |
|
|
|
setIndustryItem(tag); |
|
|
|
const nextSelectedTags = checked |
|
|
|
? [tag.name] |
|
|
|
: industryTags.filter((t) => t !== tag.name); |
|
|
|
setIndustryTags(nextSelectedTags); |
|
|
|
}; |
|
|
|
|
|
|
|
// 职位 |
|
|
|
const [postTags, setPostTags] = useState<string[]>([]); |
|
|
|
const postChange = (tag: string, checked: boolean) => { |
|
|
|
const nextSelectedTags = checked |
|
|
|
? [tag] |
|
|
|
: postTags.filter((t) => t !== tag); |
|
|
|
setPostTags(nextSelectedTags); |
|
|
|
}; |
|
|
|
|
|
|
|
// 月薪范围 |
|
|
|
const [payTags, setPayTags] = useState<string[]>(['不限']); |
|
|
|
const [payItem, setPayItem] = useState<object>(null); |
|
|
|
const payChange = (tag: object, checked: boolean) => { |
|
|
|
setPayItem(tag); |
|
|
|
const nextSelectedTags = checked |
|
|
|
? [tag.name] |
|
|
|
: payTags.filter((t) => t !== tag.name); |
|
|
|
setPayTags(nextSelectedTags); |
|
|
|
}; |
|
|
|
|
|
|
|
// 工作经验 |
|
|
|
const [workExperienceTags, setWorkExperienceTags] = useState<string[]>(['不限']); |
|
|
|
const [workExperienceItem, setWorkExperienceItem] = useState<object>(null); |
|
|
|
const workExperienceChange = (tag: object, checked: boolean) => { |
|
|
|
setWorkExperienceItem(tag); |
|
|
|
const nextSelectedTags = checked |
|
|
|
? [tag.name] |
|
|
|
: workExperienceTags.filter((t) => t !== tag.name); |
|
|
|
setWorkExperienceTags(nextSelectedTags); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 职位性质 |
|
|
|
const [jobNatureTags, setJobNatureTags] = useState<string[]>(['不限']); |
|
|
|
const [jobNatureItem, setJobNatureItem] = useState<object>(null); |
|
|
|
const jobNatureChange = (tag: object, checked: boolean) => { |
|
|
|
setJobNatureItem(tag); |
|
|
|
const nextSelectedTags = checked |
|
|
|
? [tag.name] |
|
|
|
: jobNatureTags.filter((t) => t !== tag.name); |
|
|
|
setJobNatureTags(nextSelectedTags); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 企业规模 |
|
|
|
const [natureTags, setNatureTags] = useState<string[]>(['不限']); |
|
|
|
const [natureItem, setNatureItem] = useState<object>(null); |
|
|
|
const natureChange = (tag: object, checked: boolean) => { |
|
|
|
setNatureItem(tag); |
|
|
|
const nextSelectedTags = checked |
|
|
|
? [tag.name] |
|
|
|
: natureTags.filter((t) => t !== tag.name); |
|
|
|
setNatureTags(nextSelectedTags); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 更新时间 |
|
|
|
const [updateTags, setUpdateTags] = useState<string[]>(['不限']); |
|
|
|
const [updateItem, setUpdateItem] = useState<object>(null); |
|
|
|
const updateChange = (tag: object, checked: boolean) => { |
|
|
|
setUpdateItem(tag); |
|
|
|
const nextSelectedTags = checked |
|
|
|
? [tag.name] |
|
|
|
: updateTags.filter((t) => t !== tag.name); |
|
|
|
setUpdateTags(nextSelectedTags); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 学历 |
|
|
|
const [educationTags, setEducationTags] = useState<string[]>(['不限']); |
|
|
|
const [educationItem, setEducationItem] = useState<object>(null); |
|
|
|
const educationChange = (tag: object, checked: boolean) => { |
|
|
|
setEducationItem(tag); |
|
|
|
const nextSelectedTags = checked |
|
|
|
? [tag.name] |
|
|
|
: educationTags.filter((t) => t !== tag.name); |
|
|
|
setEducationTags(nextSelectedTags); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 技能 |
|
|
|
const [skillCertificationeTags, setSkillCertificationeTags] = useState<string[]>(['不限']); |
|
|
|
const [skillCertificationeItem, setSkillCertificationeItem] = useState<object>(null); |
|
|
|
const skillCertificationeChange = (tag: object, checked: boolean) => { |
|
|
|
setSkillCertificationeItem(tag); |
|
|
|
const nextSelectedTags = checked |
|
|
|
? [tag.name] |
|
|
|
: skillCertificationeTags.filter((t) => t !== tag.name); |
|
|
|
setSkillCertificationeTags(nextSelectedTags); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 技能 |
|
|
|
const [titleTags, setTitleTags] = useState<string[]>(['不限']); |
|
|
|
const [titleItem, setTitleItem] = useState<object>(null); |
|
|
|
const titleChange = (tag: object, checked: boolean) => { |
|
|
|
setTitleItem(tag); |
|
|
|
const nextSelectedTags = checked |
|
|
|
? [tag.name] |
|
|
|
: titleTags.filter((t) => t !== tag.name); |
|
|
|
setTitleTags(nextSelectedTags); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
// 规模 |
|
|
|
const [scaleTags, setScaleTags] = useState<string[]>(['不限']); |
|
|
|
const [scaleItem, setScaleItem] = useState<object>(null); |
|
|
|
const scaleChange = (tag: object, checked: boolean) => { |
|
|
|
setScaleItem(tag); |
|
|
|
const nextSelectedTags = checked |
|
|
|
? [tag.name] |
|
|
|
: scaleTags.filter((t) => t !== tag.name); |
|
|
|
setScaleTags(nextSelectedTags); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 食宿 |
|
|
|
const [holidayRestTags, setHolidayRestTags] = useState<string[]>(['不限']); |
|
|
|
const [holidayRestItem, setHolidayRestItem] = useState<object>(null); |
|
|
|
const holidayRestChange = (tag: object, checked: boolean) => { |
|
|
|
setHolidayRestItem(tag); |
|
|
|
const nextSelectedTags = checked |
|
|
|
? [tag.name] |
|
|
|
: holidayRestTags.filter((t) => t !== tag.name); |
|
|
|
setHolidayRestTags(nextSelectedTags); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 休息时间 |
|
|
|
const [accommodationRequirementTags, setAccommodationRequirementTags] = useState<string[]>(['不限']); |
|
|
|
const [accommodationRequirementItem, setAccommodationRequirementItem] = useState<object>(null); |
|
|
|
const accommodationRequirementChange = (tag: object, checked: boolean) => { |
|
|
|
setAccommodationRequirementItem(tag); |
|
|
|
const nextSelectedTags = checked |
|
|
|
? [tag.name] |
|
|
|
: accommodationRequirementTags.filter((t) => t !== tag.name); |
|
|
|
setAccommodationRequirementTags(nextSelectedTags); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 紧急招聘 |
|
|
|
const [yesornoTags, setYesornoTags] = useState<string[]>(['不限']); |
|
|
|
const [yesornoItem, setYesornoItem] = useState<object>(null); |
|
|
|
const yesornoChange = (tag: object, checked: boolean) => { |
|
|
|
setYesornoItem(tag); |
|
|
|
const nextSelectedTags = checked |
|
|
|
? [tag.name] |
|
|
|
: yesornoTags.filter((t) => t !== tag.name); |
|
|
|
setYesornoTags(nextSelectedTags); |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
<> |
|
|
|
<ConfigProvider |
|
|
|
theme={{ |
|
|
|
components: { |
|
|
|
Segmented: { |
|
|
|
colorText: '#19be6e' |
|
|
|
}, |
|
|
|
Button: { |
|
|
|
colorText: '' |
|
|
|
}, |
|
|
|
Tabs: { |
|
|
|
verticalItemPadding: '0 24px' |
|
|
|
} |
|
|
|
} |
|
|
|
}} |
|
|
|
> |
|
|
|
|
|
|
|
<Space direction='vertical' size={20}> |
|
|
|
<Space size={20}> |
|
|
|
<Space.Compact style={{ width: '100%', paddingRight: '8px' }}> |
|
|
|
<Input |
|
|
|
size='large' |
|
|
|
prefix={<SearchOutlined style={{ color: '#19be6e' }} />} |
|
|
|
addonBefore={ |
|
|
|
<> |
|
|
|
<Select defaultValue="1" style={{ width: '100px' }}> |
|
|
|
<Select.Option value="1">职位</Select.Option> |
|
|
|
{/* <Select.Option value="2">企业</Select.Option> */} |
|
|
|
</Select> |
|
|
|
</> |
|
|
|
} |
|
|
|
placeholder="请输入关键词" |
|
|
|
// allowClear |
|
|
|
// value={keywordName} |
|
|
|
defaultValue={keywordName} |
|
|
|
onPressEnter={(e) => { |
|
|
|
setKeywordName(e.target.value) |
|
|
|
setSearchParams(prevState => ({ |
|
|
|
...prevState, |
|
|
|
keyword: e.target.value |
|
|
|
})); |
|
|
|
}} |
|
|
|
/> |
|
|
|
<Popconfirm |
|
|
|
showCancel={false} |
|
|
|
placement="bottom" |
|
|
|
title='地区' |
|
|
|
icon={null} |
|
|
|
description={<> |
|
|
|
{/* 地区 */} |
|
|
|
<Space direction='vertical' size='small' style={{ maxWidth: 800, minWidth: 600 }}> |
|
|
|
<Flex wrap style={{ width: '100%' }}> |
|
|
|
{ |
|
|
|
dictModel.xiaolanzhenList.map((item, index) => ( |
|
|
|
<Tag.CheckableTag |
|
|
|
checked={item.checked} |
|
|
|
onChange={() => { |
|
|
|
cityChange(item, index) |
|
|
|
setAreaItem({ item: item, index: index }) |
|
|
|
}} |
|
|
|
> |
|
|
|
{item.name} |
|
|
|
</Tag.CheckableTag> |
|
|
|
|
|
|
|
)) |
|
|
|
} |
|
|
|
</Flex> |
|
|
|
<Flex wrap style={{ width: '100%' }}> |
|
|
|
{ |
|
|
|
dictModel.zhongshanList.map((item, index) => ( |
|
|
|
<Tag.CheckableTag |
|
|
|
checked={item.checked} |
|
|
|
onChange={() => { |
|
|
|
cityChange(item, index) |
|
|
|
setAreaItem({ item: item, index: index }) |
|
|
|
}} |
|
|
|
> |
|
|
|
{item.name} |
|
|
|
</Tag.CheckableTag> |
|
|
|
)) |
|
|
|
} |
|
|
|
</Flex> |
|
|
|
<Cascader style={{ width: '50%' }} placeholder="请选择地区" options={dictModel.areaList} fieldNames={cascaderfieldNames} /> |
|
|
|
</Space> |
|
|
|
</> |
|
|
|
} |
|
|
|
okText="搜索" |
|
|
|
onConfirm={() => searchCityChange(areaItem.item, areaItem.index)} |
|
|
|
> |
|
|
|
<Button size='large' style={{ width: '200px' }} icon={<EnvironmentOutlined style={{ color: '#19be6e' }} />}>选择地址</Button> |
|
|
|
</Popconfirm> |
|
|
|
|
|
|
|
</Space.Compact> |
|
|
|
<Space> |
|
|
|
<Popconfirm |
|
|
|
showCancel={false} |
|
|
|
placement="bottom" |
|
|
|
title='行业' |
|
|
|
icon={null} |
|
|
|
description={<> |
|
|
|
{/* 行业 */} |
|
|
|
<Space direction='vertical' size='small' style={{ maxWidth: 800, minWidth: 600, height: '600px' }}> |
|
|
|
<Tabs |
|
|
|
size='small' |
|
|
|
style={{ maxWidth: 800, minWidth: 600, height: '600px' }} |
|
|
|
tabPosition='left' |
|
|
|
items={dictModel.industryPostList.map((item, index) => { |
|
|
|
return { |
|
|
|
key: item.id, |
|
|
|
label: item.name, |
|
|
|
children: (<> |
|
|
|
<Space direction='vertical' style={{ height: '600px', overflow: 'auto' }}> |
|
|
|
{ |
|
|
|
item.children.map((childrenItem, childrenIndex) => ( |
|
|
|
<> |
|
|
|
|
|
|
|
<Tag.CheckableTag |
|
|
|
key={childrenItem.id} |
|
|
|
checked={industryTags.includes(childrenItem.name)} |
|
|
|
onChange={(checked) => { |
|
|
|
childrenItem.industry = item.id; |
|
|
|
childrenItem.industry2 = childrenItem.id; |
|
|
|
setIndustryItem(childrenItem) |
|
|
|
industryChange(childrenItem, checked) |
|
|
|
}} |
|
|
|
style={{ |
|
|
|
display: 'flex', |
|
|
|
alignItems: 'center', |
|
|
|
justifyContent: 'center', |
|
|
|
width: 300, |
|
|
|
padding: '8px 0', |
|
|
|
background: industryTags.includes(childrenItem.name) ? '#19be6e' : '#edfff3', |
|
|
|
color: industryTags.includes(childrenItem.name) ? '#f0f0f0' : '#000000', |
|
|
|
}} |
|
|
|
> |
|
|
|
<Space> |
|
|
|
{childrenItem.name} |
|
|
|
</Space> |
|
|
|
</Tag.CheckableTag> |
|
|
|
</> |
|
|
|
)) |
|
|
|
} |
|
|
|
</Space> |
|
|
|
</>) |
|
|
|
} |
|
|
|
})} |
|
|
|
/> |
|
|
|
{/* <Cascader.Panel style={{border: 'none'}} options={dictModel.industryPostList} fieldNames={cascaderfieldNames} /> */} |
|
|
|
</Space> |
|
|
|
</> |
|
|
|
} |
|
|
|
okText="搜索" |
|
|
|
onConfirm={() => { |
|
|
|
setSearchParams(prevState => ({ |
|
|
|
...prevState, |
|
|
|
industry: industryItem.industry, |
|
|
|
industry2: industryItem.industry2, |
|
|
|
})); |
|
|
|
}} |
|
|
|
> |
|
|
|
<Button size='large' icon={<CaretUpOutlined />} iconPosition='end'>行业选择</Button> |
|
|
|
</Popconfirm> |
|
|
|
{/* 职位选择 */} |
|
|
|
|
|
|
|
<Button size='large' onClick={() => { |
|
|
|
setShowSearch(true) |
|
|
|
}} icon={<MenuOutlined />}>筛选</Button> |
|
|
|
<Button size='large' onClick={() => { |
|
|
|
setSearchParams(prevState => ({ |
|
|
|
...prevState, |
|
|
|
pay_range: payItem ? payItem.id : 0, |
|
|
|
"fulltime":jobNatureItem && jobNatureItem.name == "全职" ? 1 : 2, |
|
|
|
"parttime":jobNatureItem && jobNatureItem.name == "兼职" ? 1 : 2, |
|
|
|
"casual": jobNatureItem &&jobNatureItem.name == "临时" ? 1 : 2, |
|
|
|
"practical":jobNatureItem && jobNatureItem.name == "实习" ? 1 : 2, |
|
|
|
"campus": jobNatureItem &&jobNatureItem.name == "校园招聘" ? 1 : 2, |
|
|
|
"shisu":accommodationRequirementItem ? accommodationRequirementItem.id : 0, |
|
|
|
"holidays": holidayRestItem ? holidayRestItem.id : 0, |
|
|
|
"urgent": yesornoItem ?yesornoItem.id : 0, |
|
|
|
"nature": natureItem ?natureItem.id : 0, |
|
|
|
"scale": scaleItem ?scaleItem.id : 0, |
|
|
|
"experience_rq": workExperienceItem ?workExperienceItem.id : 0, |
|
|
|
"school_degree_rq": educationItem ?educationItem.id : 0, |
|
|
|
"profelevel_rq": titleItem ?titleItem.id : 0, |
|
|
|
"certification_rq": skillCertificationeItem ?skillCertificationeItem.id : 0, |
|
|
|
})); |
|
|
|
setShowSearch(false) |
|
|
|
}} icon={<SearchOutlined />} type='primary'>开始搜索</Button> |
|
|
|
</Space> |
|
|
|
</Space> |
|
|
|
{ |
|
|
|
showSearch && <> |
|
|
|
<Space direction='vertical' style={{ width: '100%', background: '#edfff3', padding: 20, borderRadius: 8 }}> |
|
|
|
< Flex justify='flex-end' align='center' style={{ marginBottom: 20 } |
|
|
|
}> |
|
|
|
<Button size='small' type='primary' onClick={() => { |
|
|
|
setShowSearch(false) |
|
|
|
}} icon={<CloseOutlined />} iconPosition='end'>关闭筛选</Button> |
|
|
|
</Flex > |
|
|
|
<Descriptions> |
|
|
|
|
|
|
|
{/* 月薪范围 */} |
|
|
|
<Descriptions.Item span={24} label="月薪范围"> |
|
|
|
<Flex gap={4} wrap align="center"> |
|
|
|
{dictModel.payList.map((item, index) => ( |
|
|
|
<Tag.CheckableTag |
|
|
|
key={item.id} |
|
|
|
checked={payTags.includes(item.name)} |
|
|
|
onChange={(checked) => { |
|
|
|
payChange(item, checked); |
|
|
|
|
|
|
|
}} |
|
|
|
> |
|
|
|
{item.name} |
|
|
|
</Tag.CheckableTag> |
|
|
|
))} |
|
|
|
</Flex> |
|
|
|
</Descriptions.Item> |
|
|
|
{/* 工作经验 */} |
|
|
|
<Descriptions.Item span={24} label="工作经验"> |
|
|
|
<Flex gap={4} wrap align="center"> |
|
|
|
{dictModel.workExperienceList.map((item, index) => ( |
|
|
|
<Tag.CheckableTag |
|
|
|
key={item.id} |
|
|
|
checked={workExperienceTags.includes(item.name)} |
|
|
|
onChange={(checked) => { |
|
|
|
workExperienceChange(item, checked) |
|
|
|
}} |
|
|
|
> |
|
|
|
{item.name} |
|
|
|
</Tag.CheckableTag> |
|
|
|
))} |
|
|
|
</Flex> |
|
|
|
</Descriptions.Item> |
|
|
|
{/* 学历要求 */} |
|
|
|
<Descriptions.Item span={24} label="学历要求"> |
|
|
|
<Flex gap={4} wrap align="center"> |
|
|
|
{dictModel.educationList.map((item, index) => ( |
|
|
|
<Tag.CheckableTag |
|
|
|
key={item.id} |
|
|
|
checked={educationTags.includes(item.name)} |
|
|
|
onChange={(checked) => { |
|
|
|
educationChange(item, checked) |
|
|
|
}} |
|
|
|
> |
|
|
|
{item.name} |
|
|
|
</Tag.CheckableTag> |
|
|
|
))} |
|
|
|
</Flex> |
|
|
|
</Descriptions.Item> |
|
|
|
{/* 职位性质 */} |
|
|
|
<Descriptions.Item span={24} label="职位性质"> |
|
|
|
<Flex gap={4} wrap align="center"> |
|
|
|
{dictModel.jobNatureList.map((item, index) => ( |
|
|
|
<Tag.CheckableTag |
|
|
|
key={item.id} |
|
|
|
checked={jobNatureTags.includes(item.name)} |
|
|
|
onChange={(checked) => { |
|
|
|
jobNatureChange(item, checked) |
|
|
|
}} |
|
|
|
> |
|
|
|
{item.name} |
|
|
|
</Tag.CheckableTag> |
|
|
|
))} |
|
|
|
</Flex> |
|
|
|
</Descriptions.Item> |
|
|
|
{/* 职称要求 */} |
|
|
|
<Descriptions.Item span={24} label="职称要求"> |
|
|
|
<Flex gap={4} wrap align="center"> |
|
|
|
{dictModel.titleList.map((item, index) => ( |
|
|
|
<Tag.CheckableTag |
|
|
|
key={item.id} |
|
|
|
checked={titleTags.includes(item.name)} |
|
|
|
onChange={(checked) => { |
|
|
|
titleChange(item, checked) |
|
|
|
}} |
|
|
|
> |
|
|
|
{item.name} |
|
|
|
</Tag.CheckableTag> |
|
|
|
))} |
|
|
|
</Flex> |
|
|
|
</Descriptions.Item> |
|
|
|
{/* 技能认证 */} |
|
|
|
<Descriptions.Item span={24} label="技能认证"> |
|
|
|
<Flex gap={4} wrap align="center"> |
|
|
|
{dictModel.skillCertificationeList.map((item, index) => ( |
|
|
|
<Tag.CheckableTag |
|
|
|
key={item.id} |
|
|
|
checked={skillCertificationeTags.includes(item.name)} |
|
|
|
onChange={(checked) => { |
|
|
|
skillCertificationeChange(item, checked) |
|
|
|
}} |
|
|
|
> |
|
|
|
{item.name} |
|
|
|
</Tag.CheckableTag> |
|
|
|
))} |
|
|
|
</Flex> |
|
|
|
</Descriptions.Item> |
|
|
|
{/* 企业性质 */} |
|
|
|
<Descriptions.Item span={24} label="企业性质"> |
|
|
|
<Flex gap={4} wrap align="center"> |
|
|
|
{dictModel.natureList.map((item, index) => ( |
|
|
|
<Tag.CheckableTag |
|
|
|
key={item.id} |
|
|
|
checked={natureTags.includes(item.name)} |
|
|
|
onChange={(checked) => { |
|
|
|
natureChange(item, checked) |
|
|
|
}} |
|
|
|
> |
|
|
|
{item.name} |
|
|
|
</Tag.CheckableTag> |
|
|
|
))} |
|
|
|
</Flex> |
|
|
|
</Descriptions.Item> |
|
|
|
{/* 企业规模 */} |
|
|
|
<Descriptions.Item span={24} label="企业规模"> |
|
|
|
<Flex gap={4} wrap align="center"> |
|
|
|
{dictModel.scaleList.map((item, index) => ( |
|
|
|
<Tag.CheckableTag |
|
|
|
key={item.id} |
|
|
|
checked={scaleTags.includes(item.name)} |
|
|
|
onChange={(checked) => { |
|
|
|
scaleChange(item, checked) |
|
|
|
}} |
|
|
|
> |
|
|
|
{item.name} |
|
|
|
</Tag.CheckableTag> |
|
|
|
))} |
|
|
|
</Flex> |
|
|
|
</Descriptions.Item> |
|
|
|
{/* 更新时间 */} |
|
|
|
<Descriptions.Item span={24} label="更新时间"> |
|
|
|
<Flex gap={4} wrap align="center"> |
|
|
|
{dictModel.updateList.map((item, index) => ( |
|
|
|
<Tag.CheckableTag |
|
|
|
key={item.id} |
|
|
|
checked={updateTags.includes(item.name)} |
|
|
|
onChange={(checked) => { |
|
|
|
updateChange(item, checked) |
|
|
|
}} |
|
|
|
> |
|
|
|
{item.name} |
|
|
|
</Tag.CheckableTag> |
|
|
|
))} |
|
|
|
</Flex> |
|
|
|
</Descriptions.Item> |
|
|
|
{/* 食宿情况 */} |
|
|
|
<Descriptions.Item span={24} label="食宿情况"> |
|
|
|
<Flex gap={4} wrap align="center"> |
|
|
|
{dictModel.accommodationRequirementList.map((item, index) => ( |
|
|
|
<Tag.CheckableTag |
|
|
|
key={item.id} |
|
|
|
checked={accommodationRequirementTags.includes(item.name)} |
|
|
|
onChange={(checked) => { |
|
|
|
accommodationRequirementChange(item, checked) |
|
|
|
}} |
|
|
|
> |
|
|
|
{item.name} |
|
|
|
</Tag.CheckableTag> |
|
|
|
))} |
|
|
|
</Flex> |
|
|
|
</Descriptions.Item> |
|
|
|
{/* 休息情况 */} |
|
|
|
<Descriptions.Item span={24} label="休息情况"> |
|
|
|
<Flex gap={4} wrap align="center"> |
|
|
|
{dictModel.holidayRestList.map((item, index) => ( |
|
|
|
<Tag.CheckableTag |
|
|
|
key={item.id} |
|
|
|
checked={holidayRestTags.includes(item.name)} |
|
|
|
onChange={(checked) => { |
|
|
|
holidayRestChange(item, checked) |
|
|
|
}} |
|
|
|
> |
|
|
|
{item.name} |
|
|
|
</Tag.CheckableTag> |
|
|
|
))} |
|
|
|
</Flex> |
|
|
|
</Descriptions.Item> |
|
|
|
{/* 是否急招 */} |
|
|
|
<Descriptions.Item span={24} label="是否急招"> |
|
|
|
<Flex gap={4} wrap align="center"> |
|
|
|
{dictModel.yesornolist.map((item, index) => ( |
|
|
|
<Tag.CheckableTag |
|
|
|
key={item.id} |
|
|
|
checked={yesornoTags.includes(item.name)} |
|
|
|
onChange={(checked) => { |
|
|
|
yesornoChange(item, checked) |
|
|
|
}} |
|
|
|
> |
|
|
|
{item.name} |
|
|
|
</Tag.CheckableTag> |
|
|
|
))} |
|
|
|
</Flex> |
|
|
|
</Descriptions.Item> |
|
|
|
{/* 年龄范围 */} |
|
|
|
{/* <Descriptions.Item span={24} label="年龄范围"> |
|
|
|
<Flex gap={4} wrap align="center"> |
|
|
|
<InputNumber min={10} size='small' placeholder='最小年龄' /> |
|
|
|
- |
|
|
|
<InputNumber min={10} size='small' placeholder='最大年龄' /> |
|
|
|
</Flex> |
|
|
|
</Descriptions.Item> */} |
|
|
|
</Descriptions> |
|
|
|
|
|
|
|
|
|
|
|
</Space> |
|
|
|
|
|
|
|
</> |
|
|
|
} |
|
|
|
< Flex justify='space-between' align='center' style={{ marginBottom: 20 } |
|
|
|
}> |
|
|
|
<Row gutter={[10, 10]} > |
|
|
|
{keywordName && <Col> <Tag closeIcon color="#4FBE70">{keywordName}</Tag></Col>} |
|
|
|
{areaName && <Col> <Tag closeIcon color="#4FBE70">{areaName}</Tag></Col>} |
|
|
|
{industryItem && <Col> <Tag closeIcon color="#4FBE70">{industryItem.name}</Tag></Col>} |
|
|
|
{payItem && <Col> <Tag closeIcon color="#4FBE70">{payItem.name}</Tag></Col>} |
|
|
|
{workExperienceItem && <Col> <Tag closeIcon color="#4FBE70">{workExperienceItem.name}</Tag></Col>} |
|
|
|
{educationItem && <Col> <Tag closeIcon color="#4FBE70">{educationItem.name}</Tag></Col>} |
|
|
|
{jobNatureItem && <Col> <Tag closeIcon color="#4FBE70">{jobNatureItem.name}</Tag></Col>} |
|
|
|
{titleItem && <Col> <Tag closeIcon color="#4FBE70">{titleItem.name}</Tag></Col>} |
|
|
|
{skillCertificationeItem && <Col> <Tag closeIcon color="#4FBE70">{skillCertificationeItem.name}</Tag></Col>} |
|
|
|
{natureItem && <Col> <Tag closeIcon color="#4FBE70">{natureItem.name}</Tag></Col>} |
|
|
|
{scaleItem && <Col> <Tag closeIcon color="#4FBE70">{scaleItem.name}</Tag></Col>} |
|
|
|
{updateItem && <Col> <Tag closeIcon color="#4FBE70">{updateItem.name}</Tag></Col>} |
|
|
|
{accommodationRequirementItem && <Col> <Tag closeIcon color="#4FBE70">{accommodationRequirementItem.name}</Tag></Col>} |
|
|
|
{holidayRestItem && <Col> <Tag closeIcon color="#4FBE70">{holidayRestItem.name}</Tag></Col>} |
|
|
|
{yesornoItem && <Col> <Tag closeIcon color="#4FBE70">{yesornoItem.name}</Tag></Col>} |
|
|
|
</Row> |
|
|
|
<Button onClick={() => { |
|
|
|
setKeywordName('') |
|
|
|
setAreaName('') |
|
|
|
setIndustryItem(null) |
|
|
|
setPayItem(null) |
|
|
|
setWorkExperienceItem(null) |
|
|
|
setEducationItem(null) |
|
|
|
setJobNatureItem(null) |
|
|
|
setTitleItem(null) |
|
|
|
setSkillCertificationeItem(null) |
|
|
|
setNatureItem(null) |
|
|
|
setScaleItem(null) |
|
|
|
setUpdateItem(null) |
|
|
|
setAccommodationRequirementItem(null) |
|
|
|
setHolidayRestItem(null) |
|
|
|
setYesornoItem(null) |
|
|
|
setPayTags(['不限']); |
|
|
|
setWorkExperienceTags(['不限']); |
|
|
|
setJobNatureTags(['不限']); |
|
|
|
setNatureTags(['不限']); |
|
|
|
setUpdateTags(['不限']); |
|
|
|
setEducationTags(['不限']); |
|
|
|
setSkillCertificationeTags(['不限']); |
|
|
|
setTitleTags(['不限']); |
|
|
|
setScaleTags(['不限']); |
|
|
|
setHolidayRestTags(['不限']); |
|
|
|
setAccommodationRequirementTags(['不限']); |
|
|
|
setYesornoTags(['不限']); |
|
|
|
setSearchParams({ |
|
|
|
keyword: '', |
|
|
|
pay_range: 0, |
|
|
|
"fulltime": 1, |
|
|
|
"parttime": 0, |
|
|
|
"casual": 0, |
|
|
|
"practical": 0, |
|
|
|
"campus": 0, |
|
|
|
"update_time_range": 0, |
|
|
|
"shisu": 0, |
|
|
|
"holidays": 0, |
|
|
|
"urgent": 0, |
|
|
|
"character_flag": 0, |
|
|
|
"probation": 0, |
|
|
|
"famous": 0, |
|
|
|
"province": 0, |
|
|
|
"city": 0, |
|
|
|
"district": 0, |
|
|
|
"street": 0, |
|
|
|
"industry": 0, |
|
|
|
"industry2": 0, |
|
|
|
"nature": 0, |
|
|
|
"scale": 0, |
|
|
|
"experience_rq": 0, |
|
|
|
"school_degree_rq": 0, |
|
|
|
"degree_better_rq": 0, |
|
|
|
"profelevel_rq": 0, |
|
|
|
"certification_rq": 0, |
|
|
|
"language_rq": 0, |
|
|
|
"language_degree_rq": 0, |
|
|
|
"sex_rq": 0, |
|
|
|
"age_min_rq": 0, |
|
|
|
"age_max_rq": 0, |
|
|
|
"marital_status_rq": 0, |
|
|
|
"household_province_rq": 0, |
|
|
|
"household_city_rq": 0, |
|
|
|
"location_province_rq": 0, |
|
|
|
"location_city_rq": 0, |
|
|
|
"location_town_rq": 0, |
|
|
|
page: 1, |
|
|
|
pagesize: 12, |
|
|
|
sort: 'updated_at', |
|
|
|
sortby: 'desc', |
|
|
|
}); |
|
|
|
}}>清空筛选条件</Button> |
|
|
|
</Flex > |
|
|
|
</Space> |
|
|
|
|
|
|
|
</ConfigProvider> |
|
|
|
|
|
|
|
</> |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
export default connect(({ dictModel, openModel }: any) => ({ |
|
|
|
dictModel |
|
|
|
}))(SearchFilter); |
