react antd 联动下拉框组数据和回显问题

1.新增

 
            {getFieldDecorator("name", {
              initialValue: data.name,
              rules: [
                {
                  required: true,
                  message: "会议室指引图名称不为空",
                },
              ],
            })()}
          
          
            {/* build_floor_ids是一个数组里面包含着大厦id 和楼层id */}
            {getFieldDecorator("build_floor_ids", {
              initialValue: data.build_floor_ids,
              rules: [
                {
                  type: "array",
                  required: true,
                  message: "大厦不为空",
                },
                {
                  validator: (rule, value, callback) => {
                    let record = getFieldValue("build_floor_obj");
                    // console.error("-11--", value, record);
                    if (record.type === "b") {
                      callback("未配置楼层");
                    }
                    callback();
                  },
                },
              ],
            })(
              // 新增编辑 -大厦下拉框列表
               {
                  // 把选择完的大厦-楼层的楼层id给了 record  ,selectedOptions.length - 1减一代表只传一个楼层id
                  let record = selectedOptions[selectedOptions.length - 1];
                  // ==b代表 代表已经选了楼层
                  if (record.type !== "b") {
                    // console.error(record, record?.id);
                    // 请求接口的时候把楼层id给了original_id  record?.id这种是高级写法,代表着从record中拿到id
                    FloorguideAction.floorGuideList({
                      original_id: record?.id,
                    }).then((results) => {
                      if (!results.success) {
                        message.error(results.err_msg || "接口错误", 0.5);
                        return;
                      }
                      // 最后判断有图片就展示图片没有就继续展示默认icon
                      this.props.toggleBackUrl &&
                        this.props.toggleBackUrl(results?.data?.photo_url);
                    });
                  }

                  setFieldsValue({
                    build_floor_obj: record,
                    build_floor_id: record?.id,
                  });
                }}
              />
            )}
          

2.编辑

 state = { data: {} };
  componentDidMount() {
    this.init();
  }

  init = () => {
    let { location = {} } = this.props;
    let { query = {} } = location;
    let { id } = query;
    if (id) {
      FloorguideAction.floorGuideMeetingFindById({
        id,
      }).then((results) => {
        if (!results.success) {
          message.error(results.err_msg || "接口错误", 0.5);
          return;
        }
        let { data = {} } = results;
        if (_.isEmpty(data)) {
          return;
        }
        this.setState({
          data: {
            // id,
            ...data,
            // 这是回显的两个联动的下拉框组建的数据 大厦id 楼层id
            build_floor_ids: [
              data.build_id, //接口获取的大厦id
              data.build_floor_id, //接口获取的楼层id build_floor_id
            ],
          },
        });
      });
    }
  };

  render() {
    let { data = {} } = this.state;
    return ;
  }

你可能感兴趣的:(react antd 联动下拉框组数据和回显问题)