import React from 'react';
|
|
import { Upload, Icon, message, Modal, Button, Row, Col, Breadcrumb } from 'antd';
|
|
import { domain } from '../fetch/_fetch';
|
import Fetch from '../fetch';
|
import HeadView from '../view/HeadView';
|
const divStyle = {
|
margin: '20px',
|
minHeight: "500px",
|
padding: "12px"
|
}
|
export default class TopImage extends React.Component {
|
constructor(props) {
|
super(props);
|
this.state = {
|
previewVisible: false,
|
previewImage: '',
|
fileList: []
|
};
|
}
|
|
|
componentDidMount() {
|
document.title = '顶部图片设置';
|
this.getData();
|
}
|
|
getData = () => {
|
Fetch.findImage()
|
.then(res => {
|
if (res.code == 0) {
|
this.setState({
|
fileList: res.data.length > 0 ? [res.data[0]] : []
|
});
|
}
|
}, err => {
|
message.error(err);
|
});
|
}
|
|
handlePreview = (file) => {
|
this.setState({
|
previewImage: file.url || file.thumbUrl,
|
previewVisible: true,
|
});
|
}
|
|
//只能上传一张
|
beforeUpload = (file) => {
|
if (this.state.fileList.length === 0) {
|
this.setState(state => ({
|
fileList: [...state.fileList, file],
|
}));
|
} else {
|
message.error('只能上传一个文件');
|
this.setState(state => ({
|
fileList: [...state.fileList],
|
}));
|
}
|
return false;
|
}
|
|
handleCancel = () => {
|
this.setState({
|
previewVisible: false
|
});
|
}
|
|
|
render() {
|
const { fileList, previewVisible, previewImage } = this.state;
|
console.log(fileList)
|
const uploadButton = (
|
<div>
|
<Icon type="plus" />
|
<div className="ant-upload-text">上传图片</div>
|
</div>
|
);
|
return (
|
<div className="app-page" >
|
<HeadView history={this.props.history} />
|
<div className="top-image-main" style={{ background: '#fff', margin: 20 }}>
|
<div style={divStyle}>
|
<Breadcrumb>
|
<Breadcrumb.Item>顶不图片设置</Breadcrumb.Item>
|
</Breadcrumb>
|
<Row type="flex" align='middle'>
|
<Col span={18} push={0} >
|
<Upload
|
action={domain + `api/v1/attachment/materials?associateTypeId=1021&entityId=image`}
|
listType="picture-card"
|
fileList={fileList}
|
onPreview={this.handlePreview}
|
onRemove={(file) => {
|
Fetch.deleteAttachment(file.uid)
|
.then(res => {
|
message.success("移除成功！");
|
});
|
this.setState(({ fileList }) => {
|
const index = fileList.indexOf(file);
|
const newFileList = fileList.slice();
|
newFileList.splice(index, 1);
|
return {
|
fileList: newFileList,
|
};
|
});
|
}}
|
onDownload={(file) => {
|
console.log(file)
|
Fetch.attachmentDownload(file.uid)
|
.then(res => {
|
message.success("下载成功！");
|
});
|
}}
|
onChange={({ file, fileList }) => {
|
if (file.status !== 'uploading') {
|
console.log(file);
|
console.log(fileList);
|
}
|
this.setState({ fileList });
|
}}>
|
{fileList.length >= 1 ? null : uploadButton}
|
</Upload>
|
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
|
<img alt="example" style={{ width: '100%' }} src={previewImage} />
|
</Modal>
|
</Col>
|
</Row>
|
</div>
|
</div >
|
</div>
|
);
|
}
|
}
|
