weaver_trunk_cli/pc4mobx/hrm/components/card/PortraitSetting.js

import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaDialog,
	WeaUpload,
	WeaImageCropper,
	WeaTools
} from 'ecCom';
import {Spin, message} from 'antd';
import {
	i18n
} from '../../public/i18n';
const { ua } = WeaTools;
const isIE9 = (ua.browser === "IE");

@observer
export default class PortraitSetting extends Component {
	constructor(props) {
		super(props);
		this.isIE9 = (ua.browser === "IE" && parseInt(ua.version, 10) < 10);
		this.defaultImg = ['/messager/images/icon_m_wev8.jpg', '/messager/images/icon_w_wev8.jpg'];
		this.state = {
			imgSrc: null,
			fileId: '',
			uploading: false
		}
	}

	componentDidMount() {
		this.setState({
			imgSrc: this.props.store.info.messagerurl
		})
	}

	componentWillReceiveProps(nextProps) {
		this.setState({
			imgSrc: nextProps.store.info.messagerurl
		})
	}

	zoom = (type) => {
		switch(type){
			case 'in':
				this.refs.cropper.cropper.zoom(-0.1)
				break;
			case 'out':
				this.refs.cropper.cropper.zoom(0.1)
				break;
		}
	}

	rotate = () => {
		this.refs.cropper.cropper.rotate(90)
	}

	onOk = () => {
		const {
			store
		} = this.props;
		if(this.state.uploading){
			message.warning('图片上传中...');
			return;
		}
		let imgData = null;
		if(this.refs.cropper){
			if (typeof this.refs.cropper.getCroppedCanvas() === 'undefined') {
			}else{
				const canvas = this.refs.cropper.getCroppedCanvas();
				imgData = canvas.toDataURL();
			}
		}
		
		store.onOk(imgData);
	}

	onCancel = () => {
		const {
			store
		} = this.props;
		this.setState({
			imgSrc: this.props.store.info.messagerurl,
			fileId: '',
			uploading: false
		})
	}

	remove = () => {
		this.setState({
			imgSrc: null
		})
	}

	generateUploadCom = (label) => {
		return (
			<WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@ihuno4`}
				ref='upload'
				uploadUrl='/api/doc/upload/uploadFile'
				category='string'
				maxFilesNumber={1}
				autoUpload={false}
				maxUploadSize={4}
				getShowListDatas={(listT, listB) => {
					// console.debug(listT, listB)
					// if (!this.isIE9 && listB.length > 0) {
					// 	const { fileId } = this.state;
					// 	const file = listB[0];
					// 	if (window.FileReader && file.id !== fileId) {
					// 		const reader = new FileReader();
					// 		reader.onload = () => {
					// 			this.setState({ imgSrc: reader.result, fileId: file.id });
					// 		};
					// 		reader.readAsDataURL(file.getNative());
					// 	}
					// }
					if(listB.length > 0 && !this.state.uploading){
						this.setState({uploading: true})
						window.startUploadAll();
					}
				}}
				onChange={(ids, list) => {
					const obj = {uploading: false};
					if(list.length > 0){
						Object.assign(obj, {
							fileId: list[0].fileid,
							imgSrc: list[0].imgSrc
						});
					}
					this.setState(obj);
				}}
			>
				<div className='uploadImg'>{label}</div>
			</WeaUpload>
		)
	}

	renderOpBar = () => {
		let children = [];
		if(this.state.imgSrc == null || (this.state.imgSrc != null && this.defaultImg.indexOf(this.state.imgSrc) >= 0)){
			children = [
				this.generateUploadCom(i18n.button.clickUpload())
			];
		}else{
			children = [
				this.generateUploadCom(i18n.button.reUpload()),
				<div className='remove' onClick={this.remove}>{i18n.button.removeHeadImg()}</div>,
				<div className='icon-coms-Refresh op' style={{marginRight: '0px'}} title={i18n.button.rotate()} onClick={this.rotate}/>,
				<div className='icon-coms-Narrow op' title={i18n.button.zoomIn()} onClick={() => this.zoom('in')}/>,
				<div className='icon-coms-Enlarge op' title={i18n.button.zoomOut()} onClick={() => this.zoom('out')}/>,
			]
		}
		return children;
	}

	render() {
		const {
			store
		} = this.props;
		const {
			info,
			dialogParams,
			editorDialogRightMenu,
			getDialogOpButtons,
			spinning
		} = store;
		const dProps = {
			...dialogParams,
			buttons: getDialogOpButtons({ok: this.onOk, cancel: this.onCancel})
		}
		if(dialogParams.visible){
			return (
				<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@374847`} {...dProps} title={dProps.title()}>
					<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@jqcd5d`} spinning={spinning}>
						<div className='uploadPortrait'>
							<div className='left'>
								<div className='currImg'>
								{
									this.state.imgSrc != null && this.defaultImg.indexOf(this.state.imgSrc) < 0 ?
									<WeaImageCropper ecId={`${this && this.props && this.props.ecId || ''}_WeaImageCropper@qr52a1`}
										ref='cropper'
										preview='.preview'
										src={this.state.imgSrc}
										aspectRatio={1 / 1}
										style={{ height: '100%', width: '100%' }}
										/>
									:
									<div className='icon-coms-pic defaultImg'></div>
								}
								</div>
								<div className='opBar'>
								{
									this.renderOpBar()
								}
								</div>
							</div>
							<div className='right'>
								<div className='preview'>
								{
									(this.state.imgSrc == null || (this.state.imgSrc != null && this.defaultImg.indexOf(this.state.imgSrc) >= 0)) &&
									<div className='icon-coms-pic defaultImg'></div>
								}
								</div>
								<div className='lbl'>{i18n.label.headImagePreview()}</div>
							</div>
						</div>
					</Spin>
				</WeaDialog>
			)
		}

		return <div></div>
	}
}