import React, { useState } from "react";
import FormItemPro from 'components/FormItemPro';
import {
FormControl, Row, Col, Label, Button, Select, Loading, Modal
} from "tinper-bee";
import request from "utils/request";
const Option = Select.Option;
const XxxDistpicker = ({ handleAddressChoose }) => {
const [isShowDistpicker, setIsShowDistpicker] = useState(false);
const [country, setCountry] = useState({ code: '0001', name: '中国' }); //保存国家状态
const [province, setProvince] = useState({ code: "00010005", name: '广东' }); //保存省份状态
const [city, setCity] = useState({ code: '00010102', name: '深圳' }); //保存城市状态
const [district, setDistrict] = useState({ code: '0001010202', name: '南山' }); //保存行政区状态
const [data, setData] = useState([]) //当前选择的下拉框所需要的数据
// 发送请求获取下拉框所需的数据
const indexedDist = ['country', 'province', 'city', 'district'];
const handleFocus = async dist => {
const index = indexedDist.findIndex(item => item === dist);
const param = { parentCode: '0', level: '0' }
if (index !== 0) {
param.parentCode = eval(indexedDist[index - 1])['code'];
}
const response = await request(`${GROBAL_HTTP_BASE}/region/select`, {
method: 'get',
data: {},
param
});
if (response && response.data && response.data.code && !Number(response.data.code.code)) {
setData(response.data.bo); //为下拉框输送数据
// 清空当前区域之下的所有数据
const index = indexedDist.findIndex(item=> item === dist);
const distRest = indexedDist.slice(index+1);
if(distRest.length) {
distRest.map(item=>`set${item.charAt(0).toUpperCase() + item.slice(1)}`).forEach(item=> eval(item)({ code:'', name:'' }))
}
}
}
// 【确定】点击事件
const handleOkAction = () => {
setIsShowDistpicker(false);
handleAddressChoose({country, province, city, district});
}
return (
<div className="xxx-dist-picker">
<FormControl
className= "xxx-dist-picker-address"
value={ country.name +province.name+ city.name+ district.name }
onSearch={v => setIsShowDistpicker(true) }
onChange={v => setIsShowDistpicker(true) }
type="search"
/>
<Modal show={isShowDistpicker} size="sm" onHide={() => setIsShowDistpicker(false)} backdrop={"static"}>
<Modal.Header closeButton>
<Modal.Title>地区选择器</Modal.Title>
</Modal.Header>
<Modal.Body>
<Row className="form-panel">
<Col lg={12} md={12} xs={12} sm={12}>
<FormItemPro>
<Label>国家/地区</Label>
<Select
disabled={true}
placeholder='请选择国家/地区'
onFocus={() => handleFocus('country')}
onChange={value => value && setCountry(JSON.parse(value))}
allowClear={true}
optionFilterProp="children"
value={country.name}
>
{
data.map((item) =>
<Option key={item.code} value={item.code} item={item} >
{item.desc3}
</Option>)
}
</Select>
</FormItemPro>
</Col>
<Col lg={12} md={12} xs={12} sm={12}>
<FormItemPro>
<Label>省份/州</Label>
<Select
showSearch
optionFilterProp="children"
placeholder='请先选择省份/州'
onFocus={() => handleFocus('province')}
onChange={value => value && setProvince(JSON.parse(value))}
value={province.name}
>
{
data.map((item) =>
<Option key={item.code} value={JSON.stringify({ code: item.code, name: item.desc3 })} >
{item.desc3}
</Option>)
}
</Select>
</FormItemPro>
</Col>
<Col lg={12} md={12} xs={12} sm={12}>
<FormItemPro>
<Label>城市</Label>
<Select
showSearch
optionFilterProp="children"
placeholder='请先选择城市'
onFocus={() => handleFocus('city')}
onChange={value => value && setCity(JSON.parse(value))}
value={city.name}
>
{
data.map((item) =>
<Option key={item.code} value={JSON.stringify({ code: item.code, name: item.desc3 })} >
{item.desc3}
</Option>)
}
</Select>
</FormItemPro>
</Col>
<Col lg={12} md={12} xs={12} sm={12}>
<FormItemPro>
<Label>区</Label>
<Select
showSearch
optionFilterProp="children"
placeholder='请先选择区'
onFocus={() => handleFocus('district')}
onChange={value => value && setDistrict(JSON.parse(value))}
value={district.name}
>
{
data.map((item) =>
<Option key={item.code} value={JSON.stringify({ code: item.code, name: item.desc3 })} >
{item.desc3}
</Option>)
}
</Select>
</FormItemPro>
</Col>
<Col lg={12} md={12} xs={12} sm={12}>
<FormItemPro>
<Label>详细地址</Label>
<FormControl value={ country.name +' ' +province.name+' ' + city.name+' ' + district.name } />
</FormItemPro>
</Col>
</Row>
</Modal.Body>
<Modal.Footer className="text-center">
<Button
colors="primary"
style={{ marginRight: 10 }}
onClick={ handleOkAction }
>
确认
</Button>
<Button
shape="border"
colors="primary"
onClick={() => setIsShowDistpicker(false)}
>
取消
</Button>
</Modal.Footer>
</Modal>
{/*<Loading container={this} show={this.state.showLoading} />*/}
</div>
);
};
export default XxxDistpicker;
React Hooks 二次封装省市区街道4级联动组件
最新推荐文章于 2021-01-30 07:05:01 发布