Ant Design 级联选择的一种写法

Myth丶恋晨 2021-09-20 21:40 413阅读 0赞

简单记录类似省、市、区或品牌、车系、车型等多级结构，级联选择添加并展示的一种写法：

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);