antd pop-up box

1, an interface call

controlStatus(id)
  controlStatus = (id) => {
    this.setState({
      rowid:id,
      visibleForm: !this.state.visibleForm,
      loading: true
    },
    () => {
      this.props.dispatch({
        type: "propertyevaluate/getTemplateInfo",
        payload: { id: id },
        success: (data) => {
          if(data.code===200){
            let {templateDetails}= data.content;
            this.setState({ loading: false,templateDetails});
          }else{
            this.setState({ loading: false});
          }
        }
      })
    });
  };

 

2, popup display visibleForm negated (state in set false)

{this.state.visibleForm&&<Modal
          title={"状态控制表"}
          visible={this.state.visibleForm}
          onOk={this.openStatus}
          onCancel={this.toggleForm}
        >
          <Form {...formItemLayout}>            
            <Row gutter={20}>
              <Col className="gutter-row" span={18}>
                  <FormItem  label="模板名称" >
                    {getFieldDecorator("name", {
                      initialValue:templateInfo.name?templateInfo.name:null
                    })(
                      <Input readOnly />
                    )}
                  </FormItem>
              </Col>
              <Col className="gutter-row" span={18}>
                <FormItem label="评价名称" >
                  {getFieldDecorator("reviewName", {
                    initialValue:templateInfo.reviewName?templateInfo.reviewName:null
                  })(
                    <Input />
                  )}
                </FormItem>
              </Col>
              <Col className="gutter-row" span={18}>
              <FormItem label = "Status">
                {getFieldDecorator("status", {
                  rules: [{ required: true, message: "请选择启用状态" }],
                  initialValue:templateInfo.status
                })(
                  <RadioGroup>
                    <Radio value={1}>启用</Radio>
                    <Radio value={0}>停用</Radio>
                  </RadioGroup>
                )}
              </FormItem> 
            </Col>
            <Col className="gutter-row" span={18}>
              <FormItem label="开始时间" >
              {getFieldDecorator("beginTime", {
                rules: [{ required: true, message: "请选择开始时间" }],
                  initialValue:templateInfo.beginTime?moment(templateInfo.beginTime):null
                })(
                  <DatePicker
                    disabledDate={this.disabledStartDate}
                    showTime={{ format: 'HH:mm' ,minuteStep:60,defaultValue: moment('08:00', 'HH:00')}}
                    format="YYYY-MM-DD HH:mm"
                    placeholder="开始时间"
                    onChange={this.onStartChange}
                  /> 
                )}
              </FormItem>
              <FormItem label="结束时间" >
              {getFieldDecorator("endTime", {
                rules: [{ required: true, message: "请选择结束时间" }],
                  initialValue:templateInfo.endTime?moment(templateInfo.endTime):null
                })(
                  <DatePicker
                  disabledDate={this.disabledEndDate}
                  showTime={{ format: 'HH:mm' ,minuteStep:60,defaultValue: moment('08:00', 'HH:00')}}
                  format="YYYY-MM-DD HH:mm"= "End Time"
                  placeholder
                  onChange={this.onEndChange}
                />
                
                )}
              </FormItem>
            </Col>
            </Row>
          </Form>
        </Modal>}

 

Before 1 plus this, clean the message box of original bullet

// status clear 
  toggleForm = (ID = null ) => {
     // modal box is opened or closed to clear the original message are 
    the this .setState ({     
      ROWID: ID, 
      visibleForm: ! The this .state.visibleForm 
    }); 
  };

 

Guess you like

Origin www.cnblogs.com/chaojimali/p/11347877.html