|
@@ -8,339 +8,339 @@ 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>
|
|
|
+ <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,
|
|
|
+ constructor(props) {
|
|
|
+ super(props);
|
|
|
+ this.state = {
|
|
|
+ seeMore: false,
|
|
|
+ gallery: null,
|
|
|
+ loading: true,
|
|
|
+ imgLoadNum: 0,
|
|
|
|
|
|
- uploadLoading: false,
|
|
|
- percent: 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;
|
|
|
+ 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)
|
|
|
+ }
|
|
|
|
|
|
- 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
|
|
|
+ })
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- 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 {
|
|
|
|
|
|
- // 删除绑定的图片
|
|
|
- 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;
|
|
|
+ }
|
|
|
|
|
|
- };
|
|
|
- }.bind(this));
|
|
|
- },
|
|
|
- onCancel() {
|
|
|
- resolve(false)
|
|
|
- },
|
|
|
- })
|
|
|
- });
|
|
|
- return await remove;
|
|
|
- }
|
|
|
+ componentWillUnmount() {
|
|
|
+ this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
|
|
|
+ }
|
|
|
|
|
|
- componentWillUnmount() {
|
|
|
- this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
|
|
|
+ render() {
|
|
|
+ const { fileList } = this.props;
|
|
|
+ if (!fileList || !Array.isArray(fileList)) {
|
|
|
+ return null;
|
|
|
}
|
|
|
-
|
|
|
- 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>
|
|
|
- ))
|
|
|
+ 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
|
|
|
}
|
|
|
- </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={() => {
|
|
|
+ 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({
|
|
|
- isPDF: false,
|
|
|
- file: "",
|
|
|
+ percent: 0,
|
|
|
+ newUploadArr: [],
|
|
|
+ newUploadInforArr: {}
|
|
|
})
|
|
|
- }}
|
|
|
- >
|
|
|
- <embed src={this.state.file} type="application/pdf" style={{ width: "100%", height: 700 }} />
|
|
|
- </Modal>
|
|
|
+ })
|
|
|
+ }, 1500)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else if (infor.file && infor.file.status === 'removed') {
|
|
|
+ this.setState({
|
|
|
+ percent: 0,
|
|
|
+ newUploadArr: [],
|
|
|
+ newUploadInforArr: {}
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
+ }}
|
|
|
+ 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, //选择图片
|
|
|
+ domId: PropTypes.string, //如果一个界面有多个该组件,需要传入自定义id名称,用于图片列表显示
|
|
|
+ fileList: PropTypes.array.isRequired, //图片文件列表
|
|
|
+ uploadConfig: PropTypes.object, //上传图片配置参数(需要上传图片时需要,存在与否,用于区分是否为上传或者为查看)
|
|
|
+ onChange: PropTypes.func, //选择图片
|
|
|
}
|
|
|
|
|
|
ImgList.defaultProps = {
|
|
|
- domId: 'images',
|
|
|
- fileList: [],
|
|
|
- uploadConfig: {},
|
|
|
- onChange: () => { }
|
|
|
+ domId: 'images',
|
|
|
+ fileList: [],
|
|
|
+ uploadConfig: {},
|
|
|
+ onChange: () => { }
|
|
|
}
|
|
|
|
|
|
export default ImgList;
|