1.新增

 <Form.Item
            label="会议室指引图名称"
            className="panel-li-title"
            labelCol={{
              span: 7,
            }}
            wrapperCol={{
              span: 17,
            }}
          >
            {getFieldDecorator("name", {
              initialValue: data.name,
              rules: [
                {
                  required: true,
                  message: "会议室指引图名称不为空",
                },
              ],
            })(<Input placeholder="请输入会议室指引图名称" />)}
          </Form.Item>
          <Form.Item
            label="大厦"
            className="panel-li-title"
            labelCol={{
              span: 6,
            }}
            wrapperCol={{
              span: 18,
            }}
          >
            {/* 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();
                  },
                },
              ],
            })(
              // 新增编辑 -大厦下拉框列表
              <SearchInput
                disabled={type === "edit"}
                style={{ width: "100%" }}
                placeholder="请选择大厦"
                showSearch
                // 大厦展示的id 和名称
                fieldNames={{
                  label: "cn_name",
                  value: "id",
                  children: "children",
                }}
                onChange={(value, selectedOptions) => {
                  // 把选择完的大厦-楼层的楼层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,
                  });
                }}
              />
            )}
          </Form.Item>

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 <Add location={this.props.location} type="edit" data={data} />;
  }

Blue
1 声望0 粉丝