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

/* 
	@author:李霆
	@update:2018/05/29
*/

import React from 'react';
import {
	Radio,
	Icon,
	Button,
	Input,
	Select,
	Spin,
	message,
	DatePicker,
	Modal,
	Upload,
	Form,
	Row,
	Col,
	InputNumber
} from 'antd';
import $ from 'jquery/src/ajax';
import './unit.less';
import {
	socialAttribute,
	industry,
} from '@/dataDic.js';
import {
	splitUrl,
} from '@/tools.js';
const FormItem = Form.Item;
import Crop from '@/crop/cropBlock';
//图片组件
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 PicturesWallMore = 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/uploadHonerPicture'}
					data={{ sign: 'honor_picture' }}
					listType="picture-card"
					fileList={fileList}
					onPreview={this.handlePreview}
					onChange={this.handleChange}
				>
					{fileList.length >= 8 ? null : uploadButton}
				</Upload>
				<Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
					<img alt="example" style={{ width: '100%' }} src={previewImage} />
				</Modal>
			</div>
		);
	}
});
const Unit = React.createClass({
	getInitialState() {
		return {
			loading: false,
			orgCodeUrl: [],
			companyLogoUrl: [],
			ProvinceCity:[],
			qualiUrl:[]
		};
	},
	loadInformation(record) {
		this.setState({
			loading:true
		})
		$.ajax({
			method: 'get',
			dataType: 'json',
			url: globalConfig.context + '/api/user/getOrganizationDetail',
			success: function(data) {
				let thisData = data.data;
				if (!thisData) {
					if (data.error && data.error.length) {
						message.warning(data.error[0].message);
					}
					thisData = {};
				}
				this.setState({
					InformationId: thisData.id,
					InformationUid: thisData.uid,
					identifyName: thisData.identifyName,
					listed: thisData.listed,
					highTechZone: thisData.highTechZone,
					orgCodeUrl: thisData.orgCodeUrl
						? splitUrl(thisData.orgCodeUrl, ',', globalConfig.avatarHost + '/upload')
						: [],
					companyLogoUrl:thisData.companyLogoUrl?thisData.companyLogoUrl.split(','):[],
					qualiUrl: thisData.honorPicture
					? splitUrl(thisData.honorPicture, ',', globalConfig.avatarHost + '/upload')
					: [],
					dataInformation: thisData,
					//ProvinceCity: ProvinceCityArr[0] != null ? ProvinceCityArr : undefined,
					industry: String(thisData.industry) == 'null' ? undefined : String(thisData.industry),
					societyTag: thisData.societyTag || undefined,
					introduction: thisData.introduction,
					postalAddress: thisData.postalAddress,
					fixedTel: thisData.fixedTel,
					registeredCapital: thisData.registeredCapital,
					enterpriseScale: thisData.enterpriseScale,
					legalPerson: thisData.legalPerson,
					legalPersonIdCard: thisData.legalPersonIdCard,
					legalPersonTel: thisData.legalPersonTel,
					legalPersonEmail: thisData.legalPersonEmail,
					businessScope: thisData.businessScope,
					orgCode: thisData.orgCode,
					type:thisData.type,
					qq:thisData.qq,
					email:thisData.email,
					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
		});
	},
	getQualiUrl(e) {
		this.setState({
			qualiUrl: e
		});
	},
	//基本信息提交
	newSubmit(e) {
		this.setState({
			selectedRowKeys: []
		});
		let theorgCodeUrl = [];
		if (this.state.orgCodeUrl.length) {
			let picArr = [];
			this.state.orgCodeUrl.map(function(item) {
				if (item.response && item.response.data && item.response.data.length) {
					picArr.push(item.response.data);
				}
			});
			theorgCodeUrl = picArr.join(',');
		}
		let thequaliUrl = [];
		if (this.state.qualiUrl.length) {
			let picArr = [];
			this.state.qualiUrl.map(function(item) {
				if (item.response && item.response.data && item.response.data.length) {
					picArr.push(item.response.data);
				}
			});
			thequaliUrl = picArr.join(',');
		}
		this.setState({
			loading: true
		});
		$.ajax({
			method: 'post',
			dataType: 'json',
			url: globalConfig.context + '/api/user/updateOrganizationDetail',
			data: {
				id: this.state.InformationId,
				uid: this.state.InformationUid,
				societyTag: this.state.societyTag,
				identifyName: this.state.identifyName, //单位名称
				introduction: this.state.introduction,
				unitName: this.state.unitName,
				industry: this.state.industry,
				postalAddress: this.state.postalAddress,
				fixedTel: this.state.fixedTel,
				contactsFax: this.state.contactsFax,
				registeredCapital: this.state.registeredCapital ? this.state.registeredCapital : 0,
				enterpriseScale: this.state.enterpriseScale,
				legalPerson: this.state.legalPerson,
				legalPersonIdCard: this.state.legalPersonIdCard,
				legalPersonTel: this.state.legalPersonTel,
				legalPersonEmail: this.state.legalPersonEmail,
				highTechZone: this.state.highTechZone,
				listed: this.state.listed,
				contacts: this.state.contacts,
				orgCode: this.state.orgCode,
				businessScope: this.state.businessScope,
				introduction: this.state.introduction,
				// companyLogoUrl: thecompanyLogoUrl.length != 0 ? thecompanyLogoUrl : '',
				companyLogoUrl:this.state.companyLogoUrl.length>0?(this.state.companyLogoUrl).join(','):[],
				honorPicture: thequaliUrl.length != 0 ? thequaliUrl : '',
				orgCodeUrl: theorgCodeUrl.length != 0 ? theorgCodeUrl : '',
				auditStatus: this.state.auditStatus,
				authentication:this.state.authentication,
				type:this.state.type,
				qq:this.state.qq,
				email:this.state.email
			}
		}).done(
			function(data) {
				this.setState({
					loading: false
				});
				if (!data.error.length) {
					message.success('保存成功');
					this.loadInformation();
				} else {
					message.warning(data.error[0].message);
				}
			}.bind(this)
		);
	},
	subFun(){
		if(!this.state.identifyName){
			message.warning("请填写单位名称")
			return;
		}
		if (!this.state.industry) {
			message.warning('请选择行业！');
			return false;
		}
		if (!this.state.societyTag) {
			message.warning('请选择社会性质！');
			return false;
		}
		if (isNaN(this.state.registeredCapital)) {
			message.warning('注册资本只能输入数字!');
			return false;
		}
		if (!this.state.email) {
			message.warning('请填写企业邮箱!');
			return false;
		}
		if (!this.state.qq) {
			message.warning('请填写企业QQ!');
			return false;
		}
		if (this.state.companyLogoUrl&&(this.state.companyLogoUrl.length)<1) {
			message.warning('请上传企业LOGO.');
			return false;
		}
		if(!this.state.businessScope){
			message.warning('请填写业务范围!');
			return false;
		}
		if(!this.state.introduction){
			message.warning('请填写企业简介!');
			return false;
		}
		if (this.state.qualiUrl&&(this.state.qualiUrl.length)<1) {
			message.warning('请上传资质荣誉照片.');
			return false;
		}
		this.newSubmit()
	},
	handleOk(){
		this.newSubmit();
		this.setState({
			visible:false
		})
	},
	handleCancel(){
		this.setState({
			visible:false
		})
	},
	//logo图片获取
	getAllImg(imgArr){
		this.setState({
			companyLogoUrl:imgArr
		})
	},
	componentWillMount() {
		this.loadInformation();
	},
	componentWillReceiveProps(nextProps) {
		
	},
	render() {
		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" style={{ paddingLeft: '60px' }}>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label={<span><span className="color-red"> * </span>企业名称</span>}
							>
								<Input
									maxLength={128}
									value={this.state.identifyName}
									onChange={(e) => {
										this.setState({ identifyName: e.target.value });
									}}
									placeholder="请输入企业名称"
								/>
								
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="企业规模"
							>
								<InputNumber
									placeholder="企业规模"
									value={this.state.enterpriseScale}
									InputNumber min={0} maxLength={16}
									style={{width:120,marginRight:10}}
									onChange={(e) => {
										this.setState({ enterpriseScale: e });
									}}
								/>
								<span>人</span>
							</FormItem>
						</div>
						<div className="clearfix" style={{ paddingLeft: '60px' }}>
							<FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} 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"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								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"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="通信地址"
							>
								<Input
									maxLength={255}
									placeholder="客户通信地址"
									value={this.state.postalAddress}
									onChange={(e) => {
										this.setState({ postalAddress: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="固定电话"
							>
								<Input
									maxLength={16}
									placeholder="客户固定电话"
									value={this.state.fixedTel}
									onChange={(e) => {
										this.setState({ fixedTel: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="注册资本"
							>
								<Input
									placeholder="注册资本单位为万元"
									value={this.state.registeredCapital}
									maxLength={6}
									onChange={(e) => {
										this.setState({ registeredCapital: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="法人名称"
							>
								<Input
									maxLength={16}
									placeholder="法人名称"
									value={this.state.legalPerson}
									onChange={(e) => {
										this.setState({ legalPerson: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="法人身份证号码"
							>
								<Input
									maxLength={32}
									placeholder="法人身份证号码"
									value={this.state.legalPersonIdCard}
									onChange={(e) => {
										this.setState({ legalPersonIdCard: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="法人电话"
							>
								<Input
									maxLength={16}
									placeholder="法人电话"
									value={this.state.legalPersonTel}
									onChange={(e) => {
										this.setState({ legalPersonTel: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="法人电子邮箱"
							>
								<Input
									maxLength={32}
									placeholder="法人电子邮箱"
									value={this.state.legalPersonEmail}
									onChange={(e) => {
										this.setState({ legalPersonEmail: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label="机构代码"
							>
								<Input
									maxLength={32}
									placeholder="社会同意机构代码"
									value={this.state.orgCode}
									onChange={(e) => {
										this.setState({ orgCode: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label={<span><span className="color-red"> * </span>企业邮箱</span>}
							>
								<Input
									maxLength={32}
									placeholder="请填写企业邮箱"
									value={this.state.email}
									onChange={(e) => {
										this.setState({ email: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem
								className="half-item"
								labelCol={{ span: 4 }}
								wrapperCol={{ span: 18 }}
								label={<span><span className="color-red"> * </span>企业QQ</span>}
							>
								<Input
									maxLength={16}
									placeholder="填写企业QQ"
									value={this.state.qq}
									onChange={(e) => {
										this.setState({ qq: e.target.value });
									}}
								/>
							</FormItem>
							<FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="高新">
								<Radio.Group
									value={this.state.highTechZone}
									onChange={(e) => {
										this.setState({ highTechZone: e.target.value });
									}}
								>
									<Radio value={0}>是</Radio>
									<Radio value={1}>否 </Radio>
								</Radio.Group>
							</FormItem>
							<FormItem className="half-item" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }} label="上市">
								<Radio.Group
									value={this.state.listed}
									onChange={(e) => {
										this.setState({ listed: e.target.value });
									}}
								>
									<Radio value={0}>是</Radio>
									<Radio value={1}>否 </Radio>
								</Radio.Group>
							</FormItem>

							<div className="clearfix pictures">
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 18 }}
									style={{ marginTop: 15 }}
									label="机构证(PIC)"
								>
									<PicturesWall
										pictureSign="PIC"
										fileList={this.getOrgCodeUrl}
										pictureUrl={this.state.orgCodeUrl}
									/>
									<p>图片建议：图片要清晰。</p>
								</FormItem>
								<FormItem
									className="half-item"
									style={{paddingTop:15}}
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 18 }}
								label={<span><span className="color-red"> * </span>企业logo</span>}
								>
									<Crop 
										getAllImg={this.getAllImg}
										number = {1} 
										aspectRatio = {1/1}
										url ={globalConfig.context + '/api/user/uploadPicture64'}
										uploadData = {{sign:'user_picture'}} 
										urlArr = {this.state.companyLogoUrl} 
									/>
									<p>图片建议 : 图片要清晰。</p> 
								</FormItem>
							</div>
							<div className="clearfix">
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 18 }}
									label={<span><span className="color-red"> * </span>业务范围</span>}
								>
									<Input
										type="textarea"
										rows={4}
										maxLength={400}
										value={this.state.businessScope}
										placeholder="请输入业务范围"
										onChange={(e) => {
											this.setState({ businessScope: e.target.value });
										}}
									/>
								</FormItem>
								<FormItem
									className="half-item"
									labelCol={{ span: 4 }}
									wrapperCol={{ span: 18 }}
									label={<span><span className="color-red"> * </span>企业简介</span>}
								>
									<Input
										type="textarea"
										rows={4}
										maxLength={512}
										value={this.state.introduction}
										placeholder="请输入企业简介"
										onChange={(e) => {
											this.setState({ introduction: e.target.value });
										}}
									/>
								</FormItem>
							</div>
							<div className="clearfix">
							<FormItem
									labelCol={{ span: 2 }}
									wrapperCol={{ span: 18 }}
									style={{ marginTop: 15 }}
									label={<span><span className="color-red"> * </span>荣誉资质</span>}
								>
									<PicturesWallMore
										pictureSign="PIC"
										fileList={this.getQualiUrl}
										pictureUrl={this.state.qualiUrl}
									/>
									<p>图片建议：图片要清晰。</p>
								</FormItem>
							</div>
							<Row style={{ marginBottom: 20 ,marginTop:10}}>
								<Col offset={2} span={4}>
									<Button size="large" className="set-submit" type="primary" onClick={this.subFun} >
										保存
									</Button>
								</Col>
                       		 </Row>
							
						</div>
					</Spin>
				</Form>
			</div>
		);
	}
});
export default Unit;