import React from 'react'; import { Input, Button, Form, Select, Upload, Icon, Spin, message, Cascader } from 'antd'; import './edu.less'; import { edulvlArr } from '../../dataDic.js'; import ajax from 'jquery/src/ajax/xhr.js' import $ from 'jquery/src/ajax'; import { techFieldList } from '../../DicTechFieldList'; import { getBase64, beforeUpload } from '../../tools' import YearSelect from '../../yearSelect.jsx'; const FormItem = Form.Item; const Option = Select.Option; 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.context + "/open/downLoadPicture?path=" + 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/identity/upload"} 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.error && data.error.length) { message.warning(data.error[0].message); } else { if (data.data) { this.setState({ id: data.data.id, edulvl: data.data.education, eduPfs: data.data.majorCategory ? data.data.majorCategory.split(',') : [], 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: '', eduPfs: [] }; }, 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": values.eduPfs.join(','), "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; }, 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', { initialValue: this.state.eduPfs || [] })( <Cascader placeholder="请选择专业领域" options={techFieldList} style={{ width: 300 }} /> )} </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;