1

Mr Ke

2020-05-27 04990562a326e33f6a9e05aa456981ecc62fedd5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
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>
        );
    }
}