Skip to content

J
jinfa-platform
Commit c55f1f96 authored by 前端-许佳敏's avatar 前端-许佳敏
Browse files
Options

fix: 接口id不需要带

parent 734d49ee
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 176 additions and 176 deletions
src/pages/member/components/AreaSelect/index.tsx
View file @ c55f1f96
/* /*
* @Author: XieZhiXiong * @Author: XieZhiXiong
* @Date: 2021-06-10 14:27:37 * @Date: 2021-06-10 14:27:37
* @LastEditors: XieZhiXiong * @LastEditors: XieZhiXiong
* @LastEditTime: 2021-11-17 11:30:29 * @LastEditTime: 2021-11-17 11:30:29
* @Description: 区域选择 * @Description: 区域选择
*/ */
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Row, Col } from 'antd'; import { Row, Col } from 'antd';
import SelectItem from './SelectItem'; import SelectItem from './SelectItem';
import { getMemberAreaCity, getMemberAreaDistrict, getMemberAreaProvince } from '@/services/MemberV2Api/id8983'; import { getMemberAreaCity, getMemberAreaDistrict, getMemberAreaProvince } from '@/services/MemberV2Api';
function isObj(value) { function isObj(value) {
return typeof value === 'object'; return typeof value === 'object';
}; };
type AreaCodeType = { type AreaCodeType = {
/** /**
* 区域编码 * 区域编码
*/ */
value: string value: string
/** /**
* 区域名称 * 区域名称
*/ */
label: string label: string
} }
const AreaSelect = (props) => { const AreaSelect = (props) => {
const { const {
mutators, mutators,
editable, editable,
} = props; } = props;
const value = isObj(props.value) ? props.value : {}; const value = isObj(props.value) ? props.value : {};
const XComponentProps = props.props['x-component-props'] || {}; const XComponentProps = props.props['x-component-props'] || {};
const SelectProps = { const SelectProps = {
...XComponentProps, ...XComponentProps,
disabled: !editable || XComponentProps.disabled, disabled: !editable || XComponentProps.disabled,
}; };
const [provinceList, setProvinceList] = useState<AreaCodeType[]>([]); const [provinceList, setProvinceList] = useState<AreaCodeType[]>([]);
const [cityList, setCityList] = useState<AreaCodeType[]>([]); const [cityList, setCityList] = useState<AreaCodeType[]>([]);
const [districtList, setDistrictList] = useState<AreaCodeType[]>([]); const [districtList, setDistrictList] = useState<AreaCodeType[]>([]);
const [provinceLoading, setProvinceLoading] = useState(false); const [provinceLoading, setProvinceLoading] = useState(false);
const [cityLoading, setCityLoading] = useState(false); const [cityLoading, setCityLoading] = useState(false);
const [districtLoading, setDistrictLoading] = useState(false); const [districtLoading, setDistrictLoading] = useState(false);
const [provinceValue, setProvinceValue] = useState(''); const [provinceValue, setProvinceValue] = useState('');
const [cityValue, setCityValue] = useState(''); const [cityValue, setCityValue] = useState('');
const [districtValue, setDistrictValue] = useState(''); const [districtValue, setDistrictValue] = useState('');
const getProvinceList = async () => { const getProvinceList = async () => {
setProvinceLoading(true); setProvinceLoading(true);
const res = await getMemberAreaProvince(); const res = await getMemberAreaProvince();
if (res.code === 1000) { if (res.code === 1000) {
setProvinceList(res.data?.map((item) => ({ label: item.name, value: item.code }))); setProvinceList(res.data?.map((item) => ({ label: item.name, value: item.code })));
} }
setProvinceLoading(false); setProvinceLoading(false);
}; };
const getCityList = async (code: string) => { const getCityList = async (code: string) => {
if (!code) { if (!code) {
return; return;
} }
setCityLoading(true); setCityLoading(true);
const res = await getMemberAreaCity({ code }); const res = await getMemberAreaCity({ code });
if (res.code === 1000) { if (res.code === 1000) {
setCityList(res.data?.map((item) => ({ label: item.name, value: item.code }))); setCityList(res.data?.map((item) => ({ label: item.name, value: item.code })));
} }
setCityLoading(false); setCityLoading(false);
}; };
const getDistrictList = async (code: string) => { const getDistrictList = async (code: string) => {
if (!code) { if (!code) {
return; return;
} }
setDistrictLoading(true); setDistrictLoading(true);
const res = await getMemberAreaDistrict({ code }); const res = await getMemberAreaDistrict({ code });
if (res.code === 1000) { if (res.code === 1000) {
setDistrictList(res.data?.map((item) => ({ label: item.name, value: item.code }))); setDistrictList(res.data?.map((item) => ({ label: item.name, value: item.code })));
} }
setDistrictLoading(false); setDistrictLoading(false);
}; };
useEffect(() => { useEffect(() => {
const { const {
provinceCode, provinceCode,
cityCode, cityCode,
districtCode, districtCode,
} = value; } = value;
setProvinceValue(provinceCode); setProvinceValue(provinceCode);
setCityValue(cityCode); setCityValue(cityCode);
setDistrictValue(districtCode); setDistrictValue(districtCode);
}, [value]); }, [value]);
useEffect(() => { useEffect(() => {
getProvinceList(); getProvinceList();
}, []); }, []);
useEffect(() => { useEffect(() => {
getCityList(provinceValue); getCityList(provinceValue);
}, [provinceValue]); }, [provinceValue]);
useEffect(() => { useEffect(() => {
getDistrictList(cityValue); getDistrictList(cityValue);
}, [cityValue]); }, [cityValue]);
const handleProvinceChange = (next: string) => { const handleProvinceChange = (next: string) => {
setProvinceValue(next); setProvinceValue(next);
setCityValue(undefined); setCityValue(undefined);
setCityList([]); setCityList([]);
setDistrictList([]); setDistrictList([]);
setDistrictValue(undefined); setDistrictValue(undefined);
mutators.change({ ...value, provinceCode: next, cityCode: undefined, districtCode: undefined }); mutators.change({ ...value, provinceCode: next, cityCode: undefined, districtCode: undefined });
}; };
const handleCityChange = (next: string) => { const handleCityChange = (next: string) => {
setCityValue(next); setCityValue(next);
setDistrictList([]); setDistrictList([]);
setDistrictValue(undefined); setDistrictValue(undefined);
mutators.change({ ...value, cityCode: next, districtCode: undefined }); mutators.change({ ...value, cityCode: next, districtCode: undefined });
}; };
const handleDistrictChange = (next: string) => { const handleDistrictChange = (next: string) => {
setDistrictValue(next); setDistrictValue(next);
mutators.change({ ...value, districtCode: next }); mutators.change({ ...value, districtCode: next });
}; };
return ( return (
<div <div
style={{ style={{
width: '100%', width: '100%',
}} }}
> >
<Row gutter={16}> <Row gutter={16}>
<Col span={8}> <Col span={8}>
<SelectItem <SelectItem
placeholder="- 省 -" placeholder="- 省 -"
allowClear allowClear
{...SelectProps} {...SelectProps}
value={provinceValue} value={provinceValue}
options={provinceList} options={provinceList}
loading={provinceLoading} loading={provinceLoading}
onChange={handleProvinceChange} onChange={handleProvinceChange}
/> />
</Col> </Col>
<Col span={8}> <Col span={8}>
<SelectItem <SelectItem
placeholder="- 市 -" placeholder="- 市 -"
allowClear allowClear
{...SelectProps} {...SelectProps}
value={cityValue} value={cityValue}
options={cityList} options={cityList}
loading={cityLoading} loading={cityLoading}
onChange={handleCityChange} onChange={handleCityChange}
/> />
</Col> </Col>
<Col span={8}> <Col span={8}>
<SelectItem <SelectItem
placeholder="- 县 / 区 -" placeholder="- 县 / 区 -"
allowClear allowClear
{...SelectProps} {...SelectProps}
value={districtValue} value={districtValue}
options={districtList} options={districtList}
loading={districtLoading} loading={districtLoading}
onChange={handleDistrictChange} onChange={handleDistrictChange}
/> />
</Col> </Col>
</Row> </Row>
</div> </div>
); );
}; };
AreaSelect.isFieldComponent = true; AreaSelect.isFieldComponent = true;
export default AreaSelect export default AreaSelect
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment