简单记录类似省、市、区或品牌、车系、车型等多级结构,级联选择添加并展示的一种写法:
import React from 'react';
import {Button, Form, message, Row, Tag,Select,Col} from 'antd';
import request from "../../../../utils/request";
const FormItem = Form.Item;
const Option = Select.Option;
class CarSeriesCascader extends React.Component {
constructor(props) {
super(props);
this.state = {
defaultBrandList:[],
selectedCarModelList: props.carModelList ? props.carModelList : [],
brandCode:null,
carModelList:[],
carId:null,
modelCode:null,
modelName:null
}
}
componentDidMount() {
let promise = request(`/car/getBrandList`);
promise.then(result =>{
if(result != null){
this.setState({
defaultBrandList:result
});
}else{
message.error("获取品牌数据失败");
}
}).catch(err => {
message.error("获取品牌数据失败");
});
// this.setState({
// selectedCarModelList:(this.props.carModelList ? this.props.carModelList : [])
// });
this.handleChange(this.state.selectedCarModelList);
}
getLimitList = (selectedCarModelList) => {
let limitList = selectedCarModelList.map((carModel,index) => {
let limitItem = {};
limitItem.modelName = carModel.modelName;
limitItem.modelCode = carModel.modelCode;
limitItem.carId = carModel.carId;
return limitItem;
});
return limitList;
}
addCarModel = () => {
let addCarModel = {};
let selectedCarModelList = this.state.selectedCarModelList;
// 选中车型号
if (this.state.carId !== null) {
// 检查车型是否已选中
for (let index = this.state.selectedCarModelList.length - 1; index >= 0; index--) {
let carModel = this.state.selectedCarModelList[index];
if (carModel.carId == this.state.carId) {
message.error("车型已在已选车型中");
return;
}
}
addCarModel.carId = this.state.carId;
addCarModel.modelCode = this.state.modelCode;
addCarModel.modelName = this.state.modelName;
selectedCarModelList.push(addCarModel);
} else {
return;
}
this.handleChange(selectedCarModelList);
this.setState({
selectedCarModelList
});
}
handleChange = (selectedCarModelList) => {
if (this.props.onChange) {
let limitList = this.getLimitList(selectedCarModelList);
this.props.onChange(limitList);
}
}
deleteTag = (limitCode) => {
debugger
let selectedCarModelList = this.state.selectedCarModelList;
selectedCarModelList = selectedCarModelList.filter(carModel => !(carModel.modelCode === limitCode));
this.handleChange(selectedCarModelList);
this.setState({selectedCarModelList});
}
//品牌变化
brandChange = (brandName) => {
this.state.defaultBrandList.map((item, index) => {
if (item.brandName == brandName) {
let promise = request(`/car/getModelList?brandCode=` + item.brandCode);
promise.then(result =>{
if(result != null){
this.setState({
brandCode:item.brandCode,
carModelList:result
});
}else{
message.error("获取车型数据失败");
}
}).catch(err => {
message.error("获取车型数据失败:");
});
}
});
}
//车型变化
modelChange = (modelName) => {
this.props.form.setFieldsValue({modelName: null});
let _this = this;
this.state.carModelList.map((item, index) => {
if (item.modelName == modelName) {
console.log(item);
this.setState({
modelCode : item.modelCode,
carId : item.carId,
modelName : item.modelName
});
}
});
}
render() {
const {getFieldDecorator} = this.props.form;
//品牌名称列表
let allBrandListOption = this.state.defaultBrandList != null ? this.state.defaultBrandList.map((item, index) => {
return <Option value={item.brandName} key={index}>{item.brandName}</Option>;
}) : null;
//车型名称列表
let allModelListOption = this.state.carModelList != null ? this.state.carModelList.map((item, index) => {
return <Option value={item.modelName} key={index}>{item.modelName}</Option>;
}) : null;
const {
closable=true,
} = this.props;
const existCarModel = [];
const limitList = this.getLimitList(this.state.selectedCarModelList);
for (let index = limitList.length - 1; index >= 0; index--) {
let limitItem = limitList[index];
existCarModel.push(<Tag
key={limitItem.modelCode}
closable={closable}
onClose={(e) => {
e.preventDefault();
this.deleteTag(limitItem.modelCode);
}}
>{limitItem.modelName}</Tag>);
}
return (
<div>
<Row>
<FormItem >
{getFieldDecorator('brandName', {
rules: [{
message: '请选择品牌'
}],
})(
<Select
placeholder="品牌"
dropdownMatchSelectWidth={false}
onChange={this.brandChange}
style={{ marginRight: 10, width: 100 }}>
<Option value={null}>选择品牌</Option>
{allBrandListOption}
</Select>
)}
{getFieldDecorator('modelName', {
rules: [{
message: '请选择车型'
}],
})(
<Select
placeholder="车型"
dropdownMatchSelectWidth={false}
onChange={this.modelChange}
style={{ marginRight: 10, width: 260 }}>
<Option value={null}>选择车型</Option>
{allModelListOption}
</Select>
)}
<Button type={"primary"} icon={"plus"} onClick={this.addCarModel}>添加车型</Button>
</FormItem>
</Row>
<Row>
{existCarModel}
</Row>
</div>
)
}
}
export default Form.create()(CarSeriesCascader);