| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365 | 
							- import React, { Component } from 'react';
 
- import { Icon, message, Spin, Upload, Progress, Modal } from 'antd';
 
- import $ from 'jquery/src/ajax';
 
- import './index.less';
 
- import Viewer from 'viewerjs';
 
- import 'viewerjs/dist/viewer.css';
 
- import PropTypes from 'prop-types';
 
- import pdfimg from '../../../../image/pdf_logo.png';
 
- const uploadButton = (
 
-   <div>
 
-     <Icon type="plus" />
 
-     <div className="ant-upload-text" style={{ cursor: 'pointer' }}>点击上传</div>
 
-   </div>
 
- );
 
- class ImgList extends Component {
 
-   constructor(props) {
 
-     super(props);
 
-     this.state = {
 
-       seeMore: false,
 
-       gallery: null,
 
-       loading: true,
 
-       imgLoadNum: 0,
 
-       uploadLoading: false,
 
-       percent: 0,
 
-       newUploadArr: [],
 
-       newUploadInforArr: {},
 
-       isPDF: false,
 
-       file: {},
 
-     }
 
-     this.imgLoading = this.imgLoading.bind(this);
 
-     this.beforeUpload = this.beforeUpload.bind(this);
 
-     this.onRemove = this.onRemove.bind(this);
 
-     this.setTimeOutObj = null;
 
-   }
 
-   componentDidMount() {
 
-     this.setTimeOutObj = setTimeout(() => {
 
-       this.setState({
 
-         gallery: new Viewer(document.getElementById(this.props.domId))
 
-       }, () => {
 
-         this.setState({
 
-           loading: false
 
-         })
 
-       })
 
-     }, 10000)
 
-   }
 
-   imgLoading() {
 
-     if (Object.keys(this.props.uploadConfig).length !== 0) {
 
-       this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
 
-     } else {
 
-       let num = this.state.imgLoadNum + 1;
 
-       if (num >= this.props.fileList.length) {
 
-         this.state.gallery && this.state.gallery.destroy();
 
-         this.setState({
 
-           gallery: new Viewer(document.getElementById(this.props.domId))
 
-         }, () => {
 
-           this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
 
-           this.setState({
 
-             loading: false
 
-           })
 
-         })
 
-       }
 
-       this.setState({
 
-         imgLoadNum: num
 
-       })
 
-     }
 
-   }
 
-   beforeUpload(file) {
 
-     const { isSupportPDF = false, limitation = true } = this.props
 
-     const isLt2M = file.size / 1024 / 1024 < 20;
 
-     if (!isLt2M && limitation) {
 
-       message.error('文件大小不能超过 20MB!');
 
-       return isLt2M;
 
-     }
 
-     if (this.props.accept) {
 
-       this.state.newUploadArr.push(file)
 
-       this.setState({
 
-         newUploadArr: this.state.newUploadArr
 
-       })
 
-       return true;
 
-       // if (isLt2M) {
 
-       //   this.state.newUploadArr.push(file)
 
-       //   this.setState({
 
-       //     newUploadArr: this.state.newUploadArr
 
-       //   })
 
-       // }
 
-       // return isLt2M;
 
-     } else {
 
-       const isJPG = file.type.split('/');
 
-       if (isSupportPDF) {
 
-         if (isJPG[0] !== 'image' && isJPG[0] !== "application") {
 
-           message.error('只能上传图片或pdf文件!');
 
-           return false;
 
-         }
 
-       } else {
 
-         if (isJPG[0] !== 'image') {
 
-           message.error('只能上传图片!');
 
-           return false;
 
-         }
 
-       }
 
-       if (isJPG) {
 
-         // 用于计算当次选择的图片数量
 
-         this.state.newUploadArr.push(file)
 
-         this.setState({
 
-           newUploadArr: this.state.newUploadArr
 
-         })
 
-       }
 
-       return isJPG;
 
-       // if (isJPG && isLt2M) {
 
-       //   // 用于计算当次选择的图片数量
 
-       //   this.state.newUploadArr.push(file)
 
-       //   this.setState({
 
-       //     newUploadArr: this.state.newUploadArr
 
-       //   })
 
-       // }
 
-       // return isJPG && isLt2M;
 
-     }
 
-   }
 
-   // 删除绑定的图片
 
-   async onRemove(info) {
 
-     const { orderNo, bindId, sign, deleteApi } = this.props
 
-     if (!deleteApi) {
 
-       return
 
-     }
 
-     let name = info.response.data
 
-     let remove = new Promise(function (resolve, reject) {
 
-       Modal.confirm({
 
-         title: '操作确认',
 
-         content: '是否确认删除?',
 
-         okText: '确定',
 
-         cancelText: '取消',
 
-         onOk() {
 
-           $.ajax({
 
-             method: "post",
 
-             dataType: "json",
 
-             crossDomain: false,
 
-             url: globalConfig.context + deleteApi,
 
-             data: {
 
-               id: bindId, // 编号 (没有不用传)
 
-               orderNo, // 绑定的订单号
 
-               sign,
 
-               fileName: name
 
-             }
 
-           }).done(function (data) {
 
-             if (!data.error.length) {
 
-               resolve(true);
 
-             } else {
 
-             };
 
-           }.bind(this));
 
-         },
 
-         onCancel() {
 
-           resolve(false)
 
-         },
 
-       })
 
-     });
 
-     return await remove;
 
-   }
 
-   componentWillUnmount() {
 
-     this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
 
-   }
 
-   render() {
 
-     const { fileList } = this.props;
 
-     if (!fileList || !Array.isArray(fileList)) {
 
-       return null;
 
-     }
 
-     return (
 
-       <div className='ImgListComponent'>
 
-         <div className='ImgList'>
 
-           <Spin spinning={Object.keys(this.props.uploadConfig).length !== 0 ? false : (fileList.length === 0 ? false : this.state.loading)} tip="文件加载中...">
 
-             <Upload
 
-               {...this.props.uploadConfig}
 
-               accept={this.props.accept || "image/*,application/pdf"}
 
-               className={Object.keys(this.props.uploadConfig).length !== 0 ? "" : "demandDetailShow-upload"}
 
-               listType={this.props.accept ? this.props.uploadConfig.listType : "picture-card"}
 
-               fileList={
 
-                 Object.keys(this.props.uploadConfig).length !== 0 ?
 
-                   (
 
-                     fileList.map((v, i) => {
 
-                       v.index = i;
 
-                       v.url = v.url;
 
-                       v.thumbUrl = v.name.substr(v.name.lastIndexOf(".") + 1) == "pdf" ? pdfimg : v.url
 
-                       return v
 
-                     })
 
-                   ) : (
 
-                     this.state.seeMore ?
 
-                       fileList.map((v, i) => {
 
-                         v.index = i;
 
-                         v.url = v.url;
 
-                         v.thumbUrl = v.name.substr(v.name.lastIndexOf(".") + 1) == "pdf" ? pdfimg : v.url
 
-                         return v
 
-                       }) :
 
-                       fileList.map((v, i) => {
 
-                         v.index = i;
 
-                         v.url = v.url;
 
-                         v.thumbUrl = v.name.substr(v.name.lastIndexOf(".") + 1) == "pdf" ? pdfimg : v.url
 
-                         return v
 
-                       }).slice(0, 10)
 
-                   )
 
-               }
 
-               onPreview={(file) => {
 
-                 let types = file.name.substr(file.name.lastIndexOf(".") + 1)
 
-                 if (!!file.type && file.type.split('/')[0] == "application" || types == "pdf") {
 
-                   let url = file.response.data.indexOf("/upload") == -1
 
-                     ? globalConfig.avatarHost + "/upload" + file.response.data
 
-                     : file.response.data
 
-                   // this.setState({
 
-                   //   isPDF: true,
 
-                   //   file: url,
 
-                   // })
 
-                   window.open(url)
 
-                 } else {
 
-                   if (Object.keys(this.props.uploadConfig).length !== 0) {
 
-                     //TODO 上传组件,查看图片临时解决方法,无法查看下一张
 
-                     let image = new Image();
 
-                     image.src = file.url || file.thumbUrl;
 
-                     let viewer = new Viewer(image, {
 
-                       hidden: function () {
 
-                         viewer.destroy();
 
-                       },
 
-                     });
 
-                     viewer.show();
 
-                   } else {
 
-                     this.state.gallery.view(file.index).show();
 
-                   }
 
-                 }
 
-               }}
 
-               beforeUpload={this.beforeUpload}
 
-               onChange={(infor) => {
 
-                 if (infor.file.status) {
 
-                   let newUploadNum = this.state.newUploadArr.length
 
-                   this.state.gallery && this.state.gallery.destroy();
 
-                   this.props.onChange(infor);
 
-                   if (infor.file && infor.file.status === 'error') {
 
-                     message.error('上传失败,请重新上传!');
 
-                   }
 
-                   //用于控制进度条
 
-                   if (infor.file && infor.file.status !== 'removed' && infor.event) {
 
-                     let percent = 0;
 
-                     this.state.newUploadInforArr[infor.file.uid] = infor.event.percent;
 
-                     this.setState({
 
-                       newUploadInforArr: this.state.newUploadInforArr
 
-                     })
 
-                     for (let i of Object.values(this.state.newUploadInforArr)) {
 
-                       percent += i
 
-                     }
 
-                     let percentNum = percent / newUploadNum / 100;
 
-                     this.setState({
 
-                       percent: percentNum
 
-                     })
 
-                     if (percentNum <= 1) {
 
-                       this.setState({
 
-                         uploadLoading: true,
 
-                       })
 
-                     }
 
-                     if (percentNum >= 1) {
 
-                       this.setState({
 
-                         percent: 1,
 
-                       }, () => {
 
-                         setTimeout(() => {
 
-                           this.setState({
 
-                             uploadLoading: false,
 
-                           }, () => {
 
-                             this.setState({
 
-                               percent: 0,
 
-                               newUploadArr: [],
 
-                               newUploadInforArr: {}
 
-                             })
 
-                           })
 
-                         }, 1500)
 
-                       })
 
-                     }
 
-                   } else if (infor.file && infor.file.status === 'removed') {
 
-                     this.setState({
 
-                       percent: 0,
 
-                       newUploadArr: [],
 
-                       newUploadInforArr: {}
 
-                     })
 
-                   }
 
-                 }
 
-               }}
 
-               onRemove={this.onRemove}
 
-             >
 
-               {Object.keys(this.props.uploadConfig).length === 0 ? "" : uploadButton}
 
-             </Upload>
 
-           </Spin>
 
-         </div>
 
-         {fileList.length > 10 && Object.keys(this.props.uploadConfig).length === 0
 
-           ? <div className='seeMore' onClick={() => { this.setState({ seeMore: !this.state.seeMore }) }}>
 
-             {this.state.seeMore ? '收起' : '查看更多'}
 
-           </div>
 
-           : <div />}
 
-         <ul id={this.props.domId} style={{ display: 'none', zIndex: -1, }}>
 
-           {
 
-             fileList.map((value, index) => (
 
-               <li key={index}>
 
-                 <img src={value.name.substr(value.name.lastIndexOf(".") + 1) == "pdf" ? pdfimg : (value.url || value.thumbUrl)} onLoad={() => {
 
-                   this.imgLoading();
 
-                 }} />
 
-               </li>
 
-             ))
 
-           }
 
-         </ul>
 
-         {this.state.uploadLoading ? <div className='mask'>
 
-           <Progress
 
-             className='progress'
 
-             type="circle"
 
-             status="active"
 
-             percent={parseFloat(this.state.percent * 100).toFixed(0)}
 
-           />
 
-           <div className='promptText'>文件上传中...</div>
 
-         </div> : <div />}
 
-         {
 
-           // PDF文件预览弹窗
 
-           this.state.isPDF &&
 
-           <Modal
 
-             // maskClosable={false}
 
-             wrapClassName={"pdfmodal"}
 
-             visible={this.state.isPDF}
 
-             className="admin-desc-content"
 
-             footer=""
 
-             title=""
 
-             width="1200px"
 
-             onCancel={() => {
 
-               this.setState({
 
-                 isPDF: false,
 
-                 file: "",
 
-               })
 
-             }}
 
-           >
 
-             <embed src={this.state.file} type="application/pdf" style={{ width: "100%", height: 700 }} />
 
-             <div className='no'></div>
 
-           </Modal>
 
-         }
 
-       </div>
 
-     )
 
-   }
 
- }
 
- ImgList.propTypes = {
 
-   domId: PropTypes.string,                            //如果一个界面有多个该组件,需要传入自定义id名称,用于图片列表显示
 
-   fileList: PropTypes.array.isRequired,                //图片文件列表
 
-   uploadConfig: PropTypes.object,                      //上传图片配置参数(需要上传图片时需要,存在与否,用于区分是否为上传或者为查看)
 
-   onChange: PropTypes.func,                            //选择图片
 
- }
 
- ImgList.defaultProps = {
 
-   domId: 'images',
 
-   fileList: [],
 
-   uploadConfig: {},
 
-   onChange: () => { }
 
- }
 
- export default ImgList;
 
 
  |