app-base-web/src/pages/config/CfgDatabase/CfgDatabaseView.js

web development common base package.

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

// 配置管理-数据库配置
const title = "数据库配置";
const url = "CfgDatabase/";
export default class FormView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            ...props.values
        };
    }
    componentDidMount() {
        let me = this;
        api.get(url + "getModel?id=" + this.state.id, {}, function (rs) {
            me.setState({
                ...rs.data
            })
        });
    }
    render() {
        return (
            <Form className="form-view">
                <div className="form-title">
                    <i>{title} - 详情</i>
                    <span><Button className="btn-edit" onClick={(e) => { this.props.onEdit(this.state) }}><i className="iconfont icon-edit"></i>编辑</Button></span>
                </div>
                <div className="form-content" style={{ height: this.props.height }}>
                    <Row>
                        <Col xs={12}><label>数据库名称</label><span>{this.state.name}</span></Col>
                        <Col xs={12}><label>数据库类型</label><span>{UtilDic.json("ts", "数据库类型")[this.state.type]}</span></Col>
                    </Row>
                    <Row>
                        <Col xs={12}><label>数据库链接类</label><span>{this.state.cls}</span></Col>
                        <Col xs={12}><label>数据库链接</label><span>{this.state.url}</span></Col>
                    </Row>
                    <Row>
                        <Col xs={12}><label>用户名</label><span>{this.state.userName}</span></Col>
                        <Col xs={12}><label>密码</label><span>{this.state.password}</span></Col>
                    </Row>
                </div>
                <div className="form-toolbar">
                    <Button className="btn-return" onClick={this.props.onReturn}><i className="iconfont icon-return"></i>返回</Button>
                </div>
            </Form>
        );
    }
}