import React from 'react'; import { Input, Button, Form, Select, Upload, Icon, Spin, message } from 'antd'; import './edu.less'; import { edulvlArr } from '../../dataDic.js'; import ajax from 'jquery/src/ajax/xhr.js' import $ from 'jquery/src/ajax'; import EduPfsSelect from './eduPfsSelect.jsx'; import YearSelect from '../../yearSelect.jsx'; const FormItem = Form.Item; const Option = Select.Option; function getBase64(img, callback) { const reader = new FileReader(); reader.addEventListener('load', () => callback(reader.result)); reader.readAsDataURL(img); }; function beforeUpload(file) { const isJPG = file.type === 'image/jpeg'; if (!isJPG) { message.error('You can only upload JPG file!'); } const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { message.error('Image must smaller than 2MB!'); } return isJPG && isLt2M; }; class Avatar extends React.Component { constructor(props) { super(props); this.state = { imageUrl: '', propsbool: true, } } handleChange(info) { if (info.file.status === 'done') { // Get this url from response in real world. getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl })); this.props.urlData(info.file.response.data); } } componentWillReceiveProps(nextProps) { if (nextProps.picUrl && this.state.propsbool) { this.state.imageUrl = globalConfig.avatarHost + "/upload" + nextProps.picUrl; this.state.propsbool = false; } } render() { const imageUrl = this.state.imageUrl; return ( <Upload className="avatar-uploader" name="avatar" showUploadList={false} action={globalConfig.context + "/api/user/avatar/uploadReplace"} data={{ 'sign': this.props.name }} beforeUpload={beforeUpload} onChange={this.handleChange.bind(this)} > { imageUrl ? <img src={imageUrl} role="presentation" className="avatar" /> : <Icon type="plus" className="avatar-uploader-trigger" /> } </Upload> ); } }; const EduFrom = Form.create()(React.createClass({ getData() { this.props.spinState(true); $.ajax({ method: "get", dataType: "json", url: globalConfig.context + "/api/user/educate", success: function (data) { if (data.data) { this.setState({ id:data.data.id, edulvl: data.data.education, eduPfs: [parseInt(data.data.majorCategory), parseInt(data.data.majorName)], schoolname: data.data.graduateSchool, graduationTimeYear: data.data.graduationTimeYear, edunum: data.data.diplomaCode, degreenum: data.data.degreeCode, xueliPicUrl: data.data.diplomaUrl, xueweiPicUrl: data.data.degreeDiplomaUrl }); }; }.bind(this), }).always(function () { this.props.spinState(false); }.bind(this)); }, getInitialState() { return { loading: false, xueweiPicUrl: '', xueliPicUrl: '' }; }, componentDidMount() { this.getData(); }, handleSubmit(e) { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { this.props.spinState(true); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/userEdu", data: { "id":this.state.id, "education": values.edulvl, "majorCategory": this.state.eduPfsA, "majorName": this.state.eduPfsB, "graduateSchool": values.schoolname, "graduationTimeYear": this.state.graduationTimeYear, "diplomaUrl": this.state.xueliPicUrl, "diplomaCode": values.edunum, "degreeDiplomaUrl": this.state.xueweiPicUrl, "degreeCode": values.degreenum } }).done(function (data) { if (!data.error.length) { message.success('保存成功!'); this.getData(); } else { message.warning(data.error[0].message); } }.bind(this)).always(function () { this.props.spinState(false); }.bind(this)); } }); }, downloadPic(type) { window.open(globalConfig.context + "/open/downLoadPicture?path=" + type) }, handleyear(e) { this.state.graduationTimeYear = e; }, xueliPicUrl(e) { this.state.xueliPicUrl = e; }, xueweiPicUrl(e) { this.state.xueweiPicUrl = e; }, professional(e1, e2) { this.state.eduPfsA = e1; this.state.eduPfsB = e2; }, render() { const { getFieldDecorator } = this.props.form; const formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 12 }, }; const _me = this; return ( <Form horizontal onSubmit={this.handleSubmit} className="edu-form"> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 6 }} label="学历" > {getFieldDecorator('edulvl', { initialValue: this.state.edulvl || null })( <Select className="acc-edu-lvl"> { edulvlArr.map(function (item, i) { return <Option key={i} value={item} >{item}</Option> }) } </Select> )} </FormItem> <FormItem {...formItemLayout} label="专业" > {getFieldDecorator('edupfs')( <EduPfsSelect defValue={this.state.eduPfs} Professional={this.professional} /> )} </FormItem> <FormItem {...formItemLayout} label="毕业学校" > {getFieldDecorator('schoolname', { initialValue: this.state.schoolname || null })( <Input /> )} </FormItem> <FormItem {...formItemLayout} labelCol={{ span: 4 }} wrapperCol={{ span: 4 }} label="毕业时间" > {getFieldDecorator('graduationTimeYear')( <YearSelect defValue={this.state.graduationTimeYear || null} handleyear={this.handleyear} /> )} </FormItem> <FormItem {...formItemLayout} label="学历证书" > {getFieldDecorator('xueliPic')( <Avatar name="xueliPic" urlData={this.xueliPicUrl} picUrl={this.state.xueliPicUrl} /> )} <p>{this.state.xueliPicUrl !== "" ? <Button onClick={this.downloadPic.bind(this, this.state.xueliPicUrl)}>下载证书</Button> : ""}</p> </FormItem> <FormItem {...formItemLayout} label="学历证书编号" > {getFieldDecorator('edunum', { initialValue: this.state.edunum || null })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="学位证书" hasFeedback > {getFieldDecorator('xueweiPic')( <Avatar name="xueweiPic" urlData={this.xueweiPicUrl} picUrl={this.state.xueweiPicUrl} /> )} <p>{this.state.xueweiPicUrl !== "" ? <Button onClick={this.downloadPic.bind(this, this.state.xueweiPicUrl)}>下载证书</Button> : ""}</p> </FormItem> <FormItem {...formItemLayout} label="学位证书编号" > {getFieldDecorator('degreenum', { initialValue: this.state.degreenum || null })( <Input /> )} </FormItem> <div className="set-explain"> <p>要求2M 以下的jpg、jpeg格式的图片。该资料不会公开展示,仅作为审核材料使用。</p> </div> <FormItem wrapperCol={{ span: 12, offset: 3 }}> <Button className="set-submit" type="primary" htmlType="submit">保存</Button> </FormItem> </Form > ); }, })); const Person = React.createClass({ getInitialState() { return { loading: false }; }, spinChange(e) { this.setState({ loading: e }); }, render() { return ( <Spin spinning={this.state.loading} className='spin-box'> <div className="set-edu"> <div className="acc-detail"> <p className="acc-title">最高学历</p> <EduFrom spinState={this.spinChange} /> </div> </div> </Spin> ) } }); export default Person;