85 lines
2.1 KiB
JavaScript
85 lines
2.1 KiB
JavaScript
import React, { Component } from "react";
|
|
import { WeaLocaleProvider, WeaTools, WeaUpload } from "ecCom";
|
|
import { Icon, Modal } from "antd";
|
|
import "./index.less";
|
|
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
const { viewer } = WeaTools;
|
|
|
|
class ImageUploadList extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
imageUrl: ""
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
const { wmImg } = this.props;
|
|
if (!_.isEmpty(wmImg)) {
|
|
this.setState({
|
|
imageUrl: wmImg[0].imgSrc
|
|
});
|
|
}
|
|
}
|
|
|
|
handleChange = (ids, list) => {
|
|
this.setState({
|
|
imageUrl: list[0].imgSrc
|
|
}, () => this.props.onChange([{ imgSrc: this.state.imageUrl }]));
|
|
};
|
|
handleDelete = () => {
|
|
Modal.confirm({
|
|
title: getLabel(111, "信息确认"),
|
|
content: getLabel(111, "确认要删除吗?"),
|
|
onOk: () => {
|
|
this.setState({
|
|
imageUrl: ""
|
|
}, () => this.props.onChange(null));
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
render() {
|
|
const { imageUrl } = this.state;
|
|
const uploadProps = {
|
|
uploadUrl: "/api/doc/upload/uploadFile",
|
|
listType: "img",
|
|
limitType: "jpg,jpeg,png,gif",
|
|
category: "string",
|
|
maxFilesNumber: 1,
|
|
onChange: this.handleChange
|
|
};
|
|
const imgPreviewProps = {
|
|
src: imageUrl,
|
|
width: 100,
|
|
height: 100
|
|
};
|
|
return (
|
|
<div className="uploadWrapper">
|
|
{
|
|
imageUrl &&
|
|
<div className="previewWrapper">
|
|
<img data-imgsrc={imgPreviewProps.src} {...imgPreviewProps} onClick={viewer} alt=""/>
|
|
<div className="operateWrapper">
|
|
<i className="icon-coms-Delete operateIcon" onClick={this.handleDelete}/>
|
|
</div>
|
|
</div>
|
|
}
|
|
{
|
|
!imageUrl &&
|
|
<WeaUpload {...uploadProps}>
|
|
<div className="upload-select-picture-card">
|
|
<Icon type="plus"/>
|
|
<div className="uploadText">{getLabel(111, "上传图片")}</div>
|
|
</div>
|
|
</WeaUpload>
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ImageUploadList;
|