kede-HN-officialWeb-client/js/component/account/setAccount/personal.jsx

/* 
	@author:李霆
	@update:2018/05/29
	@descript:复制粘贴，拿起来就是干！！
*/

import React from 'react';
import {
	Radio,
	Icon,
	Button,
	Cascader,
	Input,
	Select,
	Spin,
	message,
	DatePicker,
	Modal,
	Upload,
	Form,
	Row,
	Col,
} from 'antd';

import $ from 'jquery/src/ajax';
import moment from 'moment';
import './unit.less';
import { areaSelect } from '@/NewDicProvinceList';
import {
	socialAttribute,
	industry,
	
} from '@/dataDic.js';
import {
	splitUrl,
} from '@/tools.js';
message.config({
	top: 200,
  });
const FormItem = Form.Item;
const monthFormat = 'YYYY/MM';
//图片组件
const PicturesWall = React.createClass({
	getInitialState() {
		return {
			previewVisible: false,
			previewImage: '',
			fileList: []
		};
	},
	handleCancel() {
		this.setState({
			previewVisible: false
		});
	},
	handlePreview(file) {
		this.setState({
			previewImage: file.url || file.thumbUrl,
			previewVisible: true
		});
	},
	handleChange(info) {
		let fileList = info.fileList;
		this.setState({
			fileList
		});
		this.props.fileList(fileList);
	},
	componentWillReceiveProps(nextProps) {
		this.state.fileList = nextProps.pictureUrl;
	},
	render() {
		const { previewVisible, previewImage, fileList } = this.state;
		const uploadButton = (
			<div>
				<Icon type="plus" />
				<div className="ant-upload-text">点击上传</div>
			</div>
		);
		return (
			<div style={{ display: 'inline-block' }}>
				<Upload
					action={globalConfig.context + '/api/user/uploadPicture'}
					data={{ sign: 'user_picture' }}
					listType="picture-card"
					fileList={fileList}
					onPreview={this.handlePreview}
					onChange={this.handleChange}
				>
					{fileList.length >= 1 ? null : uploadButton}
				</Upload>
				<Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
					<img alt="example" style={{ width: '100%' }} src={previewImage} />
				</Modal>
			</div>
		);
	}
});

const Personal = React.createClass({
	getInitialState() {
		return {
			loading: false,
			orgCodeUrl: [],
			companyLogoUrl: [],
			headPortraitUrl: [],
			positiveIdUrl: [],
			oppositeIdUrl: []
		};
	},
	loadInformation(record) {
		this.setState({
			loading: true
		});
		$.ajax({
			method: 'get',
			dataType: 'json',
			crossDomain: false,
			url: globalConfig.context + '/api/user/getUserDetail',
			success: function(data) {
				let thisData = data.data;
				if (!thisData) {
					if (data.error && data.error.length) {
						message.warning(data.error[0].message);
					}
					thisData = {};
				}
				let ProvinceCityArr = [];
				let ProvinceS = thisData.province; //getprovince
				let citys = thisData.city;
				let Areas = thisData.area;
				ProvinceCityArr.push(ProvinceS, citys, Areas);
				let month = thisData.dateOfBirthYear
					? thisData.dateOfBirthYear + '/' + thisData.dateOfBirthMonth
					: undefined;
				this.setState({
					InformationId: thisData.id,
					InformationUid: thisData.uid,
					identifyName: thisData.identifyName,
					headPortraitUrl: thisData.headPortraitUrl
						? splitUrl(thisData.headPortraitUrl, ',', globalConfig.avatarHost + '/upload')
						: [],
					positiveIdUrl: thisData.positiveIdUrl
						? splitUrl(thisData.positiveIdUrl, ',', globalConfig.avatarHost + '/upload')
						: [],
					oppositeIdUrl: thisData.oppositeIdUrl
						? splitUrl(thisData.oppositeIdUrl, ',', globalConfig.avatarHost + '/upload')
						: [],
					dataInformation: thisData,
					idNumber: thisData.idNumber,
					mobile:thisData.mobile,
					ProvinceCity: ProvinceCityArr[0] != null ? ProvinceCityArr : undefined,
					industry: thisData.industry ? String(thisData.industry) : undefined,
					societyTag: thisData.societyTag || undefined,
					sex: thisData.sex,
					yearMonth: month,
					postalAddress: thisData.postalAddress,
					fixedTel: thisData.fixedTel,
					email: thisData.email,
					qq: thisData.qq,
					mobile:thisData.mobile,
					introduction: thisData.introduction,
					type:thisData.type,
					authentication:thisData.authentication
				});
			}.bind(this)
		}).always(
			function() {
				this.setState({
					loading: false
				});
			}.bind(this)
		);
	},
	//图片
	getOrgCodeUrl(e) {
		this.setState({
			orgCodeUrl: e
		});
	},
	getCompanyLogoUrl(e) {
		this.setState({
			companyLogoUrl: e
		});
	},
	//基本信息提交
	newSubmit(e) {
        
		this.state.data = [];
		this.setState({
			selectedRowKeys: []
		});

		let theorgCodeUrl = [];
		if (this.state.headPortraitUrl.length) {
			let picArr = [];
			this.state.headPortraitUrl.map(function(item) {
				if (item.response && item.response.data && item.response.data.length) {
					picArr.push(item.response.data);
				}
			});
			theorgCodeUrl = picArr.join(',');
		}
		let thecompanyLogoUrl = [];
		if (this.state.positiveIdUrl.length) {
			let picArr = [];
			this.state.positiveIdUrl.map(function(item) {
				if (item.response && item.response.data && item.response.data.length) {
					picArr.push(item.response.data);
				}
			});
			thecompanyLogoUrl = picArr.join(',');
		}
		let thecompanyLogoUrls = [];
		if (this.state.oppositeIdUrl.length) {
			let picArr = [];
			this.state.oppositeIdUrl.map(function(item) {
				if (item.response && item.response.data && item.response.data.length) {
					picArr.push(item.response.data);
				}
			});
			thecompanyLogoUrls = picArr.join(',');
		}

		let years = [];
		let yearMonth = this.state.yearMonth != undefined ? new Date(this.state.yearMonth).toLocaleDateString() : '';
		years = yearMonth.split('/');
		this.setState({
			loading: true
		});
		$.ajax({
			method: 'post',
			dataType: 'json',
			url: globalConfig.context + '/api/user/updateUserDetail',
			data: {
				id: this.state.InformationId,
				uid: this.state.InformationUid,
				societyTag: this.state.societyTag,
				identifyName: this.state.identifyName,
				industry: this.state.industry,
				dateOfBirthYear: years[0], //出生年
				dateOfBirthMonth: years[1], //出生月
				province: this.state.ProvinceCity[0], //省-
				city: this.state.ProvinceCity[1], //市
				area: this.state.ProvinceCity[2], //区
				sex: this.state.sex,
				mobile:this.state.mobile,
				fixedTel: this.state.fixedTel,
				qq: this.state.qq,
				idNumber: this.state.idNumber,
				email: this.state.email,
				postalAddress: this.state.postalAddress,
				introduction: this.state.introduction,
				positiveIdUrl: thecompanyLogoUrl.length != 0 ? thecompanyLogoUrl : '',
				oppositeIdUrl: thecompanyLogoUrls.length != 0 ? thecompanyLogoUrls : '',
				headPortraitUrl: theorgCodeUrl.length != 0 ? theorgCodeUrl : '',
				authentication:this.state.authentication,
				type:this.state.type
			}
		}).done(
			function(data) {
				this.setState({
					loading: false
				});
				if (!data.error.length) {
					if(this.state.type!='0'){
						message.success('个人认证成功,1s后回到首页.')
						setTimeout(()=>{
							window.location.href = globalConfig.context + "/user/account/index.html";
						},1000)  
					}else{
						message.success('保存成功！');
						this.loadInformation();
					}
				} else {
					message.warning(data.error[0].message);
				}
			}.bind(this)
		);
	},
	subFun(){
		if(this.state.type=='0'||this.state.type=='1'){
			if(!this.state.identifyName){
				message.warning("请填写姓名！")
				return;
			}
			if (!this.state.industry) {
				message.warning('请选择行业！');
				return false;
			}
			if (!this.state.societyTag) {
				message.warning('请选择社会性质！');
				return false;
			}
			if (!this.state.ProvinceCity||!this.state.ProvinceCity.length) {
				message.warning('请选择地区！');
				return false;
			}
			if(!this.state.mobile){
				message.warning("请填写手机号码!")
				return;
			}
			this.newSubmit()
		}else{
			if(!this.state.identifyName){
				message.warning("请填写姓名！")
				return;
			}
			if (!this.state.industry) {
				message.warning('请选择行业！');
				return false;
			}
			if (!this.state.societyTag) {
				message.warning('请选择社会性质！');
				return false;
			}
			if (!this.state.ProvinceCity||!this.state.ProvinceCity.length) {
				message.warning('请选择地区！');
				return false;
			}
			if(!this.state.mobile){
				message.warning("请填写手机号码!")
				return;
			}
			this.setState({
				visible:true
			})
		}
	},
	handleOk(){
		this.newSubmit();
		this.setState({
			visible:false
		})
	},
	handleCancel(){
		this.setState({
			visible:false
		})
	},
	getHeadPortraitUrl(e) {
		this.setState({ headPortraitUrl: e });
	},
	getPositiveIdUrl(e) {
		this.setState({ positiveIdUrl: e });
	},
	getOppositeIdUrl(e) {
		this.setState({ oppositeIdUrl: e });
	},
	componentWillMount() {
		this.loadInformation();
	},
	componentWillReceiveProps(nextProps) {},
	render() {
		const { RangePicker, MonthPicker } = DatePicker;
		const formItemLayout = {
			labelCol: {
				span: 6
			},
			wrapperCol: {
				span: 14
			}
		};
		return (
			<div className="unit-wrap">
				<Form layout="horizontal" onSubmit={this.newSubmit} id="demand-form" style={{width:'80%'}}>
					<Spin spinning={this.state.loading}>
						<Row style={{ marginBottom: 20 }}>
							<Col offset={2} span={4}>
								<h4 style={{fontSize:20}}>个人资料</h4>
							</Col>
						</Row>
						<div className="clearfix">
							<FormItem className="half-item" {...formItemLayout} label={<span><span className="color-red"> * </span>姓名</span>}>
								<Input
									maxLength={128}
									placeholder="输入姓名"
									value={this.state.identifyName}
									onChange={(e) => {
										this.setState({ identifyName: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="性别">
								<Radio.Group
									value={this.state.sex}
									onChange={(e) => {
										this.setState({ sex: e.target.value });
									}}
								>
									<Radio value={'男'}>男</Radio>
									<Radio value={'女'}>女</Radio>
								</Radio.Group>
							</FormItem>
						</div>
						<div className="clearfix">
							<FormItem className="half-item" {...formItemLayout} label={<span><span className="color-red"> * </span>行业</span>}>
								<Select
									placeholder="选择行业"
									value={this.state.industry}
									onChange={(e) => {
										this.setState({ industry: e });
									}}
								>
									{industry.map(function(item) {
										return <Select.Option key={item.value}>{item.key}</Select.Option>;
									})}
								</Select>
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label={<span><span className="color-red"> * </span>社会属性</span>}>
								<Select
									placeholder="客户社会属性"
									value={this.state.societyTag}
									onChange={(e) => {
										this.setState({ societyTag: e });
									}}
								>
									{socialAttribute.map(function(item) {
										return <Select.Option key={item.value}>{item.key}</Select.Option>;
									})}
								</Select>
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="出生日期">
								{!this.state.yearMonth ? (
									<MonthPicker
										placeholder="选择出生年月"
										value={this.state.yearMonth}
										onChange={(time) => {
											this.setState({ yearMonth: time });
										}}
									/>
								) : (
									<MonthPicker
										value={moment(this.state.yearMonth, monthFormat)}
										format={monthFormat}
										onChange={(time) => {
											this.setState({ yearMonth: time });
										}}
									/>
								)}
							</FormItem>
							<FormItem className="half-item" {...formItemLayout} label="身份证号码">
								<Input
									maxLength={20}
									placeholder="身份证号码"
									value={this.state.idNumber}
									onChange={(e) => {
										this.setState({ idNumber: e.target.value });
									}}
								/>
							</FormItem>
                        </div>
                        <div className="clearfix">
                            <FormItem className="half-item" {...formItemLayout} label={<span><span className="color-red"> * </span>省-市-区</span>}>
                                <Cascader
                                    options={areaSelect()}
                                    value={this.state.ProvinceCity}
                                    placeholder="选择城市"
                                    onChange={(e, pre) => {
                                        this.setState({ ProvinceCity: e });
                                    }}
                                />
                            </FormItem>
                            <FormItem className="half-item" {...formItemLayout} label="通信地址">
                                <Input
									maxLength={255}
                                    placeholder="客户通信地址"
                                    value={this.state.postalAddress}
                                    onChange={(e, pre) => {
                                        this.setState({ postalAddress: e.target.value });
                                    }}
                                />
                            </FormItem>
                            <FormItem className="half-item" {...formItemLayout} label={<span><span className="color-red"> * </span>手机号码</span>}>
                                <Input
									maxLength={16}
                                    placeholder="手机号码"
                                    value={this.state.mobile}
                                    onChange={(e) => {
                                        this.setState({ mobile: e.target.value });
                                    }}
                                />
                            </FormItem>
                            <FormItem className="half-item" {...formItemLayout} label="固定电话">
                                <Input
									maxLength={13}
                                    placeholder="客户固定电话"
                                    value={this.state.fixedTel}
                                    onChange={(e) => {
                                        this.setState({ fixedTel: e.target.value });
                                    }}
                                />
                            </FormItem>
                            <FormItem className="half-item" {...formItemLayout} label="QQ">
                                <Input
									maxLength={16}
                                    placeholder="QQ"
                                    value={this.state.qq}
                                    onChange={(e) => {
                                        this.setState({ qq: e.target.value });
                                    }}
                                />
                            </FormItem>
                            <FormItem className="half-item" {...formItemLayout} label="电子邮箱">
                                <Input
									maxLength={128}
                                    placeholder="客户电子邮箱"
                                    value={this.state.email}
                                    onChange={(e) => {
                                        this.setState({ email: e.target.value });
                                    }}
                                />
                            </FormItem>
                        </div>
                        <div className="clearfix">
                            <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="个人简介">
                                <Input
									maxLength={512}
                                    type="textarea"
                                    rows={4}
                                    value={this.state.introduction}
                                    onChange={(e, pre) => {
                                        this.setState({ introduction: e.target.value });
                                    }}
                                />
                            </FormItem>
                        </div>
                        <div className="clearfix pictures">
                            <FormItem
                                className="picWidth"
                                labelCol={{ span: 10 }}
                                wrapperCol={{ span: 10 }}
                                label="身份证正面"
                            >
                                <PicturesWall
                                    fileList={this.getPositiveIdUrl}
                                    pictureUrl={this.state.positiveIdUrl}
                                />
                                <p>建议：图片要清晰。</p>
                            </FormItem>
                            <FormItem
                                className="picWidth"
                                labelCol={{ span: 10 }}
                                wrapperCol={{ span: 10 }}
                                label="身份证反面"
                            >
                                <PicturesWall
                                    fileList={this.getOppositeIdUrl}
                                    pictureUrl={this.state.oppositeIdUrl}
                                />
                                <p>建议：图片要清晰。</p>
                            </FormItem>
                            <FormItem
                                className="picWidth"
                                labelCol={{ span: 10 }}
                                wrapperCol={{ span: 10 }}
                                label="客户照片"
                            >
                                <PicturesWall
                                    fileList={this.getHeadPortraitUrl}
                                    pictureUrl={this.state.headPortraitUrl}
                                />
                                <p>建议：图片要清晰。</p>
                            </FormItem>
                        </div>
                        <Row style={{ marginBottom: 20 }}>
                            <Col offset={3} span={4}>
                                <Button size="large" className="set-submit" type="primary"  onClick={this.subFun}>
                                    保存
                                </Button>
                            </Col>
                        </Row>
					</Spin>
				</Form>
				<Modal
					visible={this.state.visible}
					onOk={this.handleOk}
					onCancel={this.handleCancel}
					>
						<p>是否申请个人用户认证？</p>
				</Modal>
			</div>
		);
	}
});
export default Personal;