app-base-web/src/pages/config/CfgRuntime/CfgRuntimeEdit.js

web development common base package.

import React from 'react';
import { Table, Form, Row, Col, Button, Input, message } from 'antd';
import api from '../../../library/util-axios';

// 系统配置-运行时参数
const title = "运行时参数";
const url = "CfgRuntime/";

export default class FormEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ...props.values
    };
    this.formRef = React.createRef();
  }
  onSave = (values) => {
    let me = this;
    values.id = this.state.id;
    api.post(url + "save", values).then(function (rs) {
      if (rs.success) {
        message.info(rs.msg);
        me.props.onSave(values);
      } else { message.error(rs.msg); }
    });
  }
  render() {
    return (
      <Form ref={this.formRef} className="form-edit" layout="vertical" onFinish={this.onSave}>
        <div className="form-title">
          <i> {title} - {this.state.id ? "编辑" : "录入"}</i>
          {this.state.id ? <span><Button className="btn-return" onClick={this.props.onEditReturn}><i className="iconfont icon-return"></i>返回</Button></span> : ""}
        </div>
        <div className="form-content" style={{ height: this.props.height }}>
          <Row>
            <Col xs={24}>
              <Form.Item
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 21 }}
                name="app"
                label="所属应用"
                initialValue={this.state.app}
                rules={[{
                  required: true,
                  message: '请输入所属应用'
                }]}
              >
                <Input onChange={(value, option) => { this.setState({ memo: value }); }} />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col xs={24}>
              <Form.Item
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 21 }}
                name="name"
                label="配置名称"
                initialValue={this.state.name}
                rules={[{
                  required: true,
                  message: '请输入配置名称'
                }]}
              >
                <Input />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col xs={24}>
              <Form.Item
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 21 }}
                name="value"
                label="配置值"
                initialValue={this.state.value}
                rules={[{
                  required: true,
                  message: '请输入配置值'
                }]}
              >
                <Input.TextArea rows={8} />
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col xs={24}>
              <Form.Item
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 21 }}
                name="memo"
                label="备注"
                initialValue={this.state.memo}
                rules={[{
                  required: true,
                  message: '备注'
                }]}
              >
                <Input.TextArea />
              </Form.Item>
            </Col>
          </Row>
        </div>
        <div className="form-toolbar">
          <Button className="btn-cancel" onClick={this.props.onCancel}><i className="iconfont icon-cancel"></i>取消</Button>
          <Button className="btn-submit" htmlType="submit"><i className="iconfont icon-submit"></i>提交</Button>
        </div>
      </Form >
    );
  }
}