app-base-web/src/pages/right/User/UserView.js

web development common base package.

import React, { Suspense, lazy } from 'react';
import { Switch, Table, Form, Modal, Row, Col, Button, Input, message } from 'antd';
import CheckGroup from "../../../library/check-group"
import dic from "../../../library/dic"
import api from "../../../library/util-axios"
// 用户管理-用户/专家
const title = "用户/专家";
const url = "User/";
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={{ span: 10, offset: 2 }}><label>用户名称</label><span>{this.state.name}</span></Col>
            <Col xs={{ span: 10, offset: 2 }}><label>在线状态</label><span>{this.state.isOnline == 1 ? "是" : "否"}</span></Col>
          </Row>
          <Row>
            <Col xs={{ span: 10, offset: 2 }}><label>头像</label><span><img style={{ height: "40px", width: "40px" }} src={this.state.photoUrl} /></span></Col>
          </Row>
          <Row>
            <Col xs={{ span: 10, offset: 2 }}><label>是否为专家</label><span><Switch checkedChildren="" unCheckedChildren="" checked={Boolean(this.state.isExpert)} /></span></Col>
            <Col xs={{ span: 10, offset: 2 }}><label>专家类型</label><span><CheckGroup id="type" value={this.state.type} options={["机械", "电学", "化学", "其他"]} /></span></Col>

          </Row>
          <Row>
            <Col xs={{ span: 10, offset: 2 }}><label>性别</label><span>{this.state.sex==0?'女':'男'}</span></Col>
            <Col xs={{ span: 10, offset: 2 }}><label>职务</label><span>{this.state.position}</span></Col>
          </Row>
          <Row>
            <Col xs={{ span: 10, offset: 2 }}><label>手机</label><span>{this.state.phone}</span></Col>
          </Row>
          <Row>
            <Col xs={{ span: 10, offset: 2 }}><label>邮箱</label><span>{this.state.email}</span></Col>
          </Row>
          <Row>
            <Col xs={{ span: 22, offset: 2 }}><label>公司名称</label><span>{this.state.companyName}</span></Col>
          </Row>
          <Row>
            <Col xs={{ span: 22, offset: 2 }}><label>简介</label><span>{this.state.intro}</span></Col>
          </Row>
          <Row>
            <Col xs={{ span: 22, offset: 2 }}><label>详细介绍</label><span>{this.state.introDetail}</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>
    );
  }
}