forgeplus-react/src/forge/users/Material/Base.jsx

132 lines
4.2 KiB
JavaScript

import React , { forwardRef, useEffect } from 'react';
import { Form , Checkbox , Input, Radio , Button , Cascader } from 'antd';
import { AlignCenter } from '../../Component/layout';
import './Index.scss';
import { locData } from '../../Utils/locData';
import Axios from 'axios';
const { TextArea } = Input;
export default Form.create()(
forwardRef((props)=>{
const { getFieldDecorator, validateFields , setFieldsValue } = props && props.form;
const { username } = props && props.match && props.match.params;
const { current_user , resetUser } = props;
useEffect(()=>{
if(current_user && current_user.login){
setFieldsValue({
...current_user,
location:current_user.province && [current_user.province,current_user.city]
})
}
},[current_user])
function submit() {
validateFields((error,values)=>{
if(!error){
submitFunc(values);
}
})
}
function submitFunc(values) {
const url = `/users/${username}.json`;
const params={
user: {
nickname: values.real_name,
user_extension_attributes: {
province: values.location && values.location[0],
city: values.location && values.location[1],
...values
}
}
}
Axios.put(url,params).then(result=>{
if(result && result.data){
resetUser && resetUser(result.data);
}
}).catch(error=>{})
}
return(
<Form layout={'inline'} className="formBase">
<Form.Item label="邮箱">
{getFieldDecorator("email",{
rules:[{required:true,message:"请输入邮箱账号"}]
})(
<Input placeholder="请输入您的邮箱账号" style={{width:"400px"}}/>
)}
</Form.Item>
<Form.Item label="">
{getFieldDecorator("show_email",{
rules:[],
valuePropName:"checked"
})(
<Checkbox>在个人主页展示</Checkbox>
)}
</Form.Item>
<Form.Item label="姓名">
{getFieldDecorator("real_name",{
rules:[{required:true,message:"请输入姓名"}]
})(
<Input placeholder="请输入您的姓名" style={{width:"400px"}}/>
)}
</Form.Item>
<div>
<Form.Item label="性别">
{getFieldDecorator("gender",{
rules:[{required:true,message:"请选择性别"}]
})(
<Radio.Group>
<Radio value={1}></Radio>
<Radio value={0}></Radio>
</Radio.Group>
)}
</Form.Item>
</div>
<Form.Item label="单位名称">
{getFieldDecorator("custom_department",{
rules:[{required:true,message:"请输入单位名称"}]
})(
<Input placeholder="请输入单位名称" style={{width:"400px"}}/>
)}
</Form.Item>
<Form.Item label="">
{getFieldDecorator("show_department",{
rules:[],
valuePropName:"checked"
})(
<Checkbox>在个人主页展示</Checkbox>
)}
</Form.Item>
<Form.Item label="地区">
{getFieldDecorator("location",{
rules:[]
})(
<Cascader placeholder="请选择省份城市" options={locData} style={{width:"400px"}}></Cascader>
)}
</Form.Item>
<Form.Item label="">
{getFieldDecorator("show_location",{
rules:[],
valuePropName:"checked"
})(
<Checkbox>在个人主页展示</Checkbox>
)}
</Form.Item>
<Form.Item label="简介">
{getFieldDecorator("description",{
rules:[]
})(
<TextArea placeholder="请输入您的自我理解" rows={4} maxLength="140" style={{width:"600px"}}/>
)}
</Form.Item>
<AlignCenter>
<span className="ant-form-item-label"></span>
<Button type={"primary"} onClick={submit}>提交</Button>
<Button type={"default"} onClick={()=>props.history.push(`/users/${username}`)} className="ml20">取消</Button>
</AlignCenter>
</Form>
)
})
)