| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347 | 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 isLt2M = file.size / 1024 / 1024 < 20;        if (!isLt2M) {            message.error('文件大小不能超过 20MB!');            return isLt2M;        }        if (this.props.accept) {            if (isLt2M) {                this.state.newUploadArr.push(file)                this.setState({                    newUploadArr: this.state.newUploadArr                })            }            return isLt2M;        } else {            const isJPG = file.type.split('/');            // if (isJPG[0] !== 'image' && isJPG[0] !== "application") {            //     message.error('只能上传图片或pdf文件!');            //     return false;            // }            if (isJPG[0] !== 'image') {                message.error('只能上传图片!');                return false;            }            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 }} />                    </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;
 |