yylib-quick-mobile/dist/yylib/image-picker/YYImagePicker.js

yylib-quick-mobile

import React, {Component} from 'react';
import classnames from 'classnames';
import './YYImagePicker.css';
import {ImagePicker, Modal,Toast} from 'antd-mobile';
import {isFunction} from '../../utils/FunctionUtil';
import UploadFileUtils from '../../utils/UploadFileUtils';
import {ADDR} from '../../common/RestUrl'
import YYFile from './YYFile';
//import AuthToken from '../../utils/authToken';
//var   AuthToken=window.YYUtils.AuthToken;
const alert = Modal.alert;
class YYImagePicker extends Component {
      state = {
        files: this.props.files,
        scrollTop:'0',
        showFile:false
    };
       componentDidMount() {
        let _self = this;
        if (this.props.source) {
            this.loadAttachList(this.props.source);
        }
        window.addEventListener('scroll', (val)=>{
            _self.state.scrollTop = document.documentElement.scrollTop;
        });
        if(this.props.RunInDesign){
            /****设计时 模拟两条记录****/
           var filesList=[{url:'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',name:'a.jpeg',gid:'1111'},{url:'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',name:'b.jpeg',gid:'1111'}]
           this.setState({files:filesList});
        }
    }

    componentWillReceiveProps(nextProps) {
    	 let  {source}=this.props;
        if (nextProps.source && nextProps.source.sourceId&&(source.sourceId!=nextProps.source.sourceId||source.sourceType!=nextProps.source.sourceType)) {
            this.loadAttachList(nextProps.source);
        }
        if (JSON.stringify(nextProps.files) !== JSON.stringify(this.props.files)) {
            this.setState({
                files: nextProps.files
            })
        }
    }
    loadAttachList(source) {
    	 let params = {
            sourceId: source.sourceId,
            billType: source.billType,
            sourceType: source.sourceType,
            id: source.sourceId,
            type: source.sourceType
        };
    		//离线情况下 需要调用本地的方法  本地的查询方法 有个问题   代码包必须变成本地的
        let that = this;
        if (source.sourceId && source.sourceType && source.billType) {
        	if(this.props.offline){
            that.getAttachList(params, function (data) {
                if (data.length > 0) {
                    that.setState({
                        files: data
                    })
                }
            })
        }else{
        	 UploadFileUtils.loadAttachList(params, function (data) {
                if (data.length > 0) {
                    that.setState({
                        files: data
                    })
                }
            })
        }
    	}
    }
    //通过source获取附件数据
    getAttachList=(params, callback)=>{
        var fileList = [];
        if (window.YYPlugin) {
            window.YYPlugin.call("ExpandPlugin", "queryTempAttachList", params,  (data)=>{
                    var backData = data.backData;
                    if (backData != null) {
                        for (var i = 0; i < backData.length; i++) {
                            var item = backData[i]
                            var fileUrl = ADDR + '/' + item.filePath;
                            var file = {
                                gid: item.gid,
                                name: item.fileName,
                                url: item.filePath,
                                fileUrl: fileUrl,
                                backData: item,
                            }
                            fileList.push(file)
                        }
                    }
                    if (callback && _.isFunction(callback)) {
                        callback(fileList)
                    }
            }, (data)=>{
                console.log(data);
            })
        }
        else {
            Toast.info('请在手机上进行调试或检查yyplus的引入！')
        }
    }
    onChange = (files, type, index) => {
        if (type == 'add') {
          this.postPCFile(files)
        } else if (type == 'remove') {
            this.deleteFile(index);
        } else {
            console.log('上传错误！')
        }
    }
    //在pc端上传文件
    postPCFile(files){
    	 const {orderQuality, orderWidth,camera,picture,inChild} = this.props;
        let that = this;
        let params = {
            billType: this.props.source.billType,
            sourceType: this.props.source.sourceType,
            sourceId: this.props.source.sourceId,
            userId: window.YYUtils.AuthToken.getUserId(),
            userName: window.YYUtils.AuthToken.getUserName(),
            camera:camera,
            picture:picture,
            file:files[files.length-1].file,
            billId:this.props.source.billId,
        };
        if (orderQuality) {
            params.orderQuality = orderQuality;
        }
        if (orderWidth) {
            params.orderWidth = orderWidth;
        }
        var file = {};
        UploadFileUtils.multiFilesUpLoad(params,
        	                              params.billType,
        	                              {sourceId:params.sourceId,sourceType:params.sourceType},
        	                              ([result])=>{
        	                              	 file.gid = result.gid;
                file.name = result.name;
                file.url = result.fileUrl;
                file.openurl = result.fileUrl;
                file.backData = result;
                let files= that.state.files.concat(file);
                that.setState({
                    files: files,
                }, () => {
                	       let fields = {};
                	       let  values=that.state.files.map(item=>item.gid).join(',')
                	      if(inChild){
                	      	 //在子表中的时候 附件处理和主表处理有差异
                	      	  fields[that.props.uikey] = {
                               dirty: true,
                               errors: undefined,
                               name: that.props.uikey,
                               touched: true,
                               validating: true,
                               value: that.props.sourceType
                          }
                	      }else{
                	      	  fields[that.props.sourceType] = {
                               dirty: true,
                               errors: undefined,
                               name: that.props.uikey?that.props.uikey:that.props.sourceType,
                               touched: true,
                               validating: true,
                               value: values
                          }
                	      }
                      that.props.form&&that.props.form.setFields(fields);
                    if (_.isFunction(that.props.onChange)) {
                        that.props.onChange(that.state.files);
                    }
                });
        	                              }
         )
    }
    //删除文件
    deleteFile = (index) => {
        let that = this;
        const alertInstance = alert('删除', '删除后不可恢复!', [
            {
                text: '取消', onPress: () => {
                alertInstance.close();
            }, style: 'default'
            },
            {
                text: '确定', onPress: () => {
                if(that.props.offline){
                	  window.YYPlugin.call("ExpandPlugin", "delAttach", {'gid':that.state.files[index].gid},()=>{
                    that.setState({
                        files: that.state.files.filter((e, i) => i != index),
                    }, () => {
                        Toast.success('删除成功',1);
                        if (_.isFunction(that.props.onChange)) {
                            that.props.onChange(this.state.files);
                        }
                    });
                  });
                }else{
                	 if (this.props.source.sourceType) {
                    let params = {
                        id: this.props.source.sourceId,
                        billType: this.props.source.billType,
                        sourceType: this.props.source.sourceType,
                        attachIds: this.state.files[index].gid
                    };
                    UploadFileUtils.delAttach(params, () => {
                        that.setState({
                            files: that.state.files.filter((e, i) => i != index),
                        }, () => {
                            window.YYPlugin&&YYPlugin.call("ExpandPlugin", "delAttach", {'gid':that.state.files[index].gid},f=>f);
                            if (_.isFunction(that.props.onChange)) {
                                that.props.onChange(this.state.files);
                            }
                        });
                    });
                } else {
                    this.setState({
                        files: that.state.files.filter((e, i) => i != index),
                    }, () => {
                        if (_.isFunction(that.props.onChange)) {
                            that.props.onChange(this.state.files);
                        }
                    })
                  }
                }
               }
            },
        ]);
    }
     onAddImageClick = (e) => {
        const {orderQuality, orderWidth,camera,picture,inChild} = this.props;
        let that = this;
        e.preventDefault();//阻止触发onChange事件！
        let params = {
            billType: this.props.source.billType,
            sourceType: this.props.source.sourceType,
            sourceId: this.props.source.sourceId,
            userId: window.YYUtils.AuthToken.getUserId(),
            userName: window.YYUtils.AuthToken.getUserName(),
            camera:camera,
            picture:picture,
            file:this.props.file,
            billId:this.props.source.billId,
            upload:this.props.offline?"1":"0",
        };
        if (orderQuality) {
            params.orderQuality = orderQuality;
        }
        if (orderWidth) {
            params.orderWidth = orderWidth;
        }
        var file = {};
        if (window.YYPlugin) {
            window.YYPlugin.call("CommonPlugin", "postFile", params, function success(result) {
            	 try{
            	  file.gid = result.gid;
                file.name = result.fileName;
                let urlArray = result.filePath.split('.');
                if(!that.props.offline){
                	//在线情况下 开启缩略图情景
                    file.url = result.filePath.replace('.'+urlArray[urlArray.length-1],'_100x100.'+urlArray[urlArray.length-1]);
                } else {
                    file.url = result.filePath;
                }
                file.openurl = result.filePath;
                file.backData = result;
                let files= that.state.files.concat(file);
                that.setState({
                    files: files,
                }, () => {
                	       let fields = {};
                	       let  values=that.state.files.map(item=>item.gid).join(',')
                	      if(inChild){
                	      	 //在子表中的时候 附件处理和主表处理有差异
                	      	  fields[that.props.uikey] = {
                               dirty: true,
                               errors: undefined,
                               name: that.props.uikey,
                               touched: true,
                               validating: true,
                               value: that.props.sourceType
                          }
                	      }else{
                	      	  fields[that.props.sourceType] = {
                               dirty: true,
                               errors: undefined,
                               name: that.props.uikey?that.props.uikey:that.props.sourceType,
                               touched: true,
                               validating: true,
                               value: values
                          }
                	      }
                      that.props.form&&that.props.form.setFields(fields);
                    if (_.isFunction(that.props.onChange)) {
                        that.props.onChange(that.state.files);
                    }
                });
            	 }catch(e){
            	 	   alert(e.message)
            	 }

            });
        } else {
            Toast.info('请在手机上进行调试或检查yyplus的引入！')
        }
    };
    /***点击图片预览*****/
    onImageClick = (index, val) => {
    	let src = this.state.files[index]?this.state.files[index].openurl:null;
        let fileUrl = this.state.files[index]?this.state.files[index].fileUrl:val[index].fileUrl;
        let filename = this.state.files[index]?this.state.files[index].name:val[index].name;
        let filetype = filename&&filename.split('.')?filename.split('.')[1]:null;
        if (['jpg', 'png', 'gif', 'jpeg', 'PNG', 'JPG', 'GIF'].indexOf(filetype) >= 0) {
            if(src){
                let url = src.split('.');
                let params = {
                    thumbnailUrl:this.props.offline?src:src.replace('.'+url[url.length-1],'_355x500.'+url[url.length-1]),
                    originalUrl:src
                }
                if (window.YYPlugin) {
                  window.YYPlugin.call("CommonPlugin", "openPic", params);
                }
                else {//pc端图片预览
                    this.setState({showFile:true,filePath:src});
                }
            } else {
                let Vurl =val[index].fileUrl?val[index].fileUrl.split('.'):val[index].url.split('.');
                let  realUrl=val[index].fileUrl?val[index].fileUrl:val[index].url;
                let Vparams = {
                    thumbnailUrl:this.props.offline?realUrl:realUrl.replace('.'+Vurl[Vurl.length-1],'_355x500.'+Vurl[Vurl.length-1]),
                    originalUrl:realUrl
                }
                if (window.YYPlugin) {
                  window.YYPlugin.call("CommonPlugin", "openPic", Vparams);
                }
                else {//pc端图片预览
                    this.setState({showFile:true,filePath:realUrl});
                }
            }
        }
        else {
          let params = {
                  url:fileUrl,
                  filename:filename
          };
          if (window.YYPlugin) {
              window.YYPlugin.call("CommonPlugin","openAttach", params)
          }
          else {//pc端文件预览
            this.setState({showFile:true,filePath:fileUrl});
          }
        }
    }
    //关闭
    closeFile(){
        this.setState({showFile:false})
    }
    onImageClickNew = ({index, filesList}) => {
      this.onImageClick(index,filesList);
    }
    pcChange(event){
    	if(event&&event.target){
    		let file=event.target.files[0];
    		this.postPCFile([{file:file}])
    	}
    }
    renderAdd() {
      return(
         <div className='am-flexbox am-flexbox-align-center'>
           <div className="am-flexbox-item">
               <div className="am-image-picker-item am-image-picker-upload-btn" role="button" onClick={window.YYPlugin?this.onAddImageClick:null}>
                 {window.YYPlugin?null:<input type="file" onChange={this.pcChange.bind(this)} />}
               </div>
            </div>
            <div className="am-flexbox-item"></div>
            <div className="am-flexbox-item"></div>
            <div className="am-flexbox-item"></div>
          </div>
      );
    }
    renderFiles(filesList) {
      var {disabled,maxSize} = this.props;
      var list = [];
      filesList.map((item,index)=>{
          let itemContent = null;
          itemContent = (
                <div className='item' key={index}>
                  <div className='am-image-picker-item-remove' onClick={this.deleteFile.bind(this,index)}></div>
                  <div onClick={this.onImageClickNew.bind(this,{index,filesList})}>
                    <span style={{fontSize:'14px',wordWrap: 'break-word',wordBreak: 'normal',lineHeight:'1'}}>
                    {item.name}
                    </span>
                  </div>
                </div>
          );
          list.push(itemContent);
      });
      return list;
    }
    render() {
        //所有外部props都需要定义，防止警告  不可用时
        let  getFieldProps=this.props.form?this.props.form.getFieldProps:null;
        const {RunInDesign,disabled, maxSize, label, className,orderWidth,source,files,file,visible,sourceType,
             orderQuality,selectable,camera,picture,upload,inChild,findUI, offline,parentType, uiorigin,
             uititle, uitype, uikey, nid,control_event,...restProps} = this.props;
        let filesList=this.state.files;
        let  field=this.props.uikey?this.props.uikey:this.props.sourceType;
        let wrapClz = classnames('yy-image-picker',(!visible&&'hidden'), className,(disabled&&"yy-image-picker-disabled"));
        if(this.props.RunInDesign){
            /****设计时 模拟两条记录****/
           filesList=[{url:'https://zos.alipayobjects.com/rmsportal/hqQWgTXdrlmVVYi.jpeg',name:'a.jpeg',gid:'1111'},{url:'https://zos.alipayobjects.com/rmsportal/PZUUCKTRIHWiZSY.jpeg',name:'b.jpeg',gid:'1111'}]
        }
        let {showFile,filePath} = this.state;
        return (
            <div {...restProps} className={wrapClz} {...isFunction(getFieldProps) ? getFieldProps(field, {}) : null}
  >
              {!showFile||<YYFile filePath={filePath} closeFile={this.closeFile.bind(this)}/>}
              {label && <div className="label">{label}</div>}
                {(disabled === true && filesList.length === 0) ? null :
                    file ? <div className='am-image-picker'>
                            <div className='am-image-picker-list'
                                 files={filesList}>
                                {(!disabled && this.state.files.length < maxSize) ? this.renderAdd() : null}
                                {this.renderFiles(filesList)}
                            </div>
                        </div> :
                        <ImagePicker
                            files={filesList}
                            onChange={disabled ? null : this.onChange}
                            onImageClick={this.onImageClick}
                            selectable={!disabled && this.state.files.length < maxSize}
                            onAddImageClick={window.YYPlugin ? this.onAddImageClick : null}
                        />
                }
            </div>
        );
    }
}
YYImagePicker.defaultProps = {
    label: '上传图片',
    maxSize: 5,
    disabled: false,
    source: {
        sourceId: '',
        billType: '',
        sourceType: 'MD001',
    },
    // sourceType:"MD001",
    files: [],
    orderQuality:null,
    orderWidth:null,
    visible:true,
	selectable: true,
	camera:true,
    picture:true,
    file:false,
    upload:'1',           //是否暂缓上传，默认为暂缓1
    inChild:false,
    sourceType:'',       //是否在子表中使用 在子表中使用时  sourceId是固定的 sourceType是不固定的
    //处理warning
    control_event:{},
    findUI:'',
    offline:false,
    parentType:'',
    uiorigin:'',
    RunInDesign:false,
    uititle:'',
    uitype:'',
    uikey:'',
    nid:'',

};
module.exports = YYImagePicker;