个人资料

最终的效果：

整个的毕业设计负责的是前端部分的开发，采用React框架和Ant Design组件库。

个人资料界面部分

import React from 'react';
import './UserInfo.less';
import {Button, Col as div, DatePicker, Form, Input, Select} from 'antd';

class UserInfo extends React.Component<{
  editable: boolean,
}, {
  headImg: string,
}> {
  state = {
    headImg: '',
  };

  render() {

    const onFinish = (values: any) => {
      console.log(values);
    };

    const areas = [
      {label: '昆山杰普软件科技有限公司', value: '昆山杰普软件科技有限公司'},
      {label: '国信蓝桥教育科技股份有限公司', value: '国信蓝桥教育科技股份有限公司'},
      {label: '山西信思智学教育科技有限公司', value: '山西信思智学教育科技有限公司'},
      {label: '天津东软睿道教育信息技术有限公司', value: '天津东软睿道教育信息技术有限公司'},
    ];

    const gender = [
      {label: '男', value: '男'},
      {label: '女', value: '女'},
    ];

    return (
      <Form
        className='out-box'
        name="nest-messages"
        onFinish={onFinish}
        labelCol={{span: 4}}
        wrapperCol={{span: 18}}
        style={{
          width: '70%',
          position: 'relative',
          margin: '50px auto',
        }}
      >
        <div className="img-box">
          <img src="/wyd.jpg"/>
        </div>
        <Form.Item
          className="my-item"
          name="name"
          label="姓名"
        >
          <Input disabled={!this.props.editable}/>
        </Form.Item>
        <Form.Item
          className="my-item"
          name="gender"
          label="性别"
        >
          <Select options={gender} allowClear disabled={!this.props.editable}/>
        </Form.Item>
        <Form.Item
          className="my-item"
          name="schoolId"
          label="学号"
        >
          <Input disabled={!this.props.editable}/>
        </Form.Item>
        <Form.Item name="email" label="Email">
          <Input disabled={!this.props.editable}/>
        </Form.Item>
        <Form.Item name="website" label="电话">
          <Input disabled={!this.props.editable}/>
        </Form.Item>
        <Form.Item name="school" label="所在学校">
          <Input disabled={!this.props.editable}/>
        </Form.Item>
        <Form.Item name="institute" label="所在学院">
          <Input disabled={!this.props.editable}/>
        </Form.Item>
        <Form.Item name="range-time-picker" label="毕业时间">
          <DatePicker showTime format="YYYY-MM" disabled={!this.props.editable}/>
        </Form.Item>
        <Form.Item name="area" label="实训基地">
          <Select options={areas} allowClear disabled={!this.props.editable}/>
        </Form.Item>
        <Form.Item name="introduction" label="自我评价">
          <Input.TextArea disabled={!this.props.editable}/>
        </Form.Item>
        {
          this.props.editable ? (
            <Form.Item wrapperCol={{
              span: 4,
              offset: 10,
            }} className="inner-center">
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Form.Item>
          ) : null
        }
      </Form>
    );
  }
}

export default UserInfo;

• 该界面要求在不同的用户身份拥有不同的权限，所以在父子渲染时需要给我们的UserInfo子组件传递一个editable={data.params.editable}来判断时候具有修改权限，因为editables所传递的是一个布尔属性的值所以将这个传递的值作为disable的参数来控制input是否可以被编辑。
• 保存按钮也是根据editable={data.params.editable}的返回值写了一个判断语句。

个人界面样式部分

在样式部分中遇到一个比较难以调试的问题是开始的form表单是以栅格形式排布的，这是我们想要在界面的右上角去增加一个照片放置的位置：去使用了一个比较笨的方法：

• 我们先是让照片的div放置于From内；
• 之后将它脱离文档流，把它的位置始终固定在right：5.5vw；这样我们的照片的div相对于上和右就固定好了；
• 这时我们去设定我们的item最大宽度max-width: calc(83.33% - 5.5vw - 120px);83.33%（其他输入框的占据父元素的大小），减去5.5vw（照片的右边距），减去120px（照片宽度+中间的间隔）；
• 这样我们看到的效果就是：无论我们的界面大小如何去改变照片和他左边的输入框都在合适的大小范围变动，虽然照片是脱离文档流的；

.img-box {
  position: absolute;
  right: 5.5vw;
  width: 100px;
  height: $width * 3 / 2;
  z-index: 2;
  img {
    width: 100%;
    height: 100%;
    border-radius: @border-radius-base;
    border: 1px solid @border-color-base;
  }
}

.my-item {
  .ant-form-item-control {
    // flex: none;
    max-width: calc(83.33% - 5.5vw - 120px);
  }
}