傅行帆 5 vuotta sitten
vanhempi
commit
aef095c9da

+ 46
- 0
src/components/DragableUploadImageList/Item.jsx Näytä tiedosto

1
+import React from 'react'
2
+import { Icon } from 'antd'
3
+
4
+export default (props) => {
5
+    const { dataset = {}, onPreview, onDelete, onClick, onSticky } = props
6
+    const { url } = dataset
7
+
8
+    const handlePreview = () => {
9
+        onPreview && onPreview(dataset)
10
+    }
11
+
12
+    const handleDelete = () => {
13
+        onDelete && onDelete(dataset)
14
+    }
15
+
16
+    const handleClick = () => {
17
+        return onClick ? onClick(dataset) : null
18
+    }
19
+
20
+    const handleSticky = () => {
21
+        onSticky && onSticky(dataset)
22
+    }
23
+
24
+    return (
25
+        <div className="ant-upload-list-picture-card-container">
26
+            <span>
27
+                <div className="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card">
28
+                    <div className="ant-upload-list-item-info">
29
+                        <span>
30
+                            <a className="ant-upload-list-item-thumbnail" href={url} target="_blank" rel="noopener noreferrer" onClick={handleClick}>
31
+                                <img className="ant-upload-list-item-image" src={url} alt="image" />
32
+                            </a>
33
+                        </span>
34
+                    </div>
35
+
36
+                    <span className="ant-upload-list-item-actions">
37
+                        <Icon type="vertical-align-top" className="anticon anticon-eye-o" onClick={handleSticky} />
38
+                        <Icon type="eye" className="anticon anticon-eye-o" onClick={handlePreview} />
39
+                        <Icon type="delete" onClick={handleDelete} />
40
+                    </span>
41
+                </div>
42
+            </span>
43
+        </div>
44
+    )
45
+}
46
+

+ 113
- 0
src/components/DragableUploadImageList/index.jsx Näytä tiedosto

1
+import React from 'react';
2
+import { Upload, Icon, Modal } from 'antd';
3
+import './style.less';
4
+import { uploaderProps } from '../../utils/upload';
5
+import Item from './Item'
6
+
7
+/**
8
+ * unlimited  属性表示上传图片无限制
9
+ * 例子: <ImageListUpload unlimited/>
10
+ */
11
+class ImageListUpload extends React.Component {
12
+  state = {
13
+    previewVisible: false,
14
+    previewImage: '',
15
+    loadding: false,
16
+  };
17
+
18
+  getFileList = () => {
19
+    return (this.props.value || []).map((img, inx) => ({ uid: inx, url: img, status: 'done' }))
20
+  }
21
+
22
+  handleCancel = () => this.setState({ previewVisible: false });
23
+
24
+  handlePreview = async file => {
25
+    this.setState({
26
+      previewImage: file.url ,
27
+      previewVisible: true,
28
+    });
29
+  };
30
+
31
+  handleSticky = ({ url }) => {
32
+    const fileList = this.props.value || [];
33
+    this.props.onChange([url].concat(fileList.filter(x => x != url)))
34
+  }
35
+
36
+  handleDelete = ({ url }) => {
37
+    const fileList = this.props.value || [];
38
+    this.props.onChange(fileList.filter(x => x != url))
39
+  }
40
+
41
+  handleChange = (e) => {
42
+    if (e.file.status === "uploading") {
43
+      this.setState({ loading: true });
44
+      return;
45
+    }
46
+
47
+    const fileList = (this.props.value || []).filter(x => x != e.file.url);
48
+    this.props.onChange(fileList);
49
+
50
+    // console.log('删除图片触发了', e.file)
51
+    // if (e.file.state === 'removed') {
52
+    //   const fileList = (this.props.value || []).filter(x => x != e.file.url);
53
+    //   this.props.onChange(fileList);
54
+    // }
55
+
56
+    // if (e.file.status === "done") {
57
+    //   this.setState({
58
+    //     loading: false,
59
+    //   })
60
+
61
+    //   if (e.file.response && e.file.response.url) {
62
+    //     if (typeof this.props.onChange === 'function') {
63
+    //       const fileList = this.getFileList()
64
+    //       this.props.onChange([...fileList || [], e.file.response.url]);
65
+    //     }
66
+    //   }
67
+    // }
68
+  };
69
+
70
+  handleUploadSucess = (url) => {
71
+    this.setState({ loading: false });
72
+    if (typeof this.props.onChange === 'function') {
73
+      const fileList = this.props.value || [];
74
+      this.props.onChange([...fileList, url]);
75
+    }
76
+  }
77
+
78
+  render() {
79
+    const { previewVisible, previewImage } = this.state;
80
+    const fileList = this.getFileList();
81
+
82
+    const uploadButton = (
83
+      <div>
84
+        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"}  />
85
+      </div>
86
+    );
87
+    return (
88
+      <div className="clearfix x-dargable-image-upload-list">
89
+        <div className="ant-upload-list ant-upload-list-picture-card">
90
+            {fileList.map(img => <Item key={img.url} dataset={img} onPreview={this.handlePreview} onSticky={this.handleSticky} onDelete={this.handleDelete}/>)}
91
+        </div>
92
+          
93
+        <Upload
94
+          listType="picture-card"
95
+          showUploadList={false}
96
+          onPreview={this.handlePreview}
97
+          onChange={this.handleChange}
98
+          { ...uploaderProps }
99
+          onSuccess={this.handleUploadSucess}
100
+        >
101
+        
102
+          {/* unlimited 表示上传无限制数量 */}
103
+          {(this.props.unlimited && uploadButton) || ((fileList || images).length >= 8 ? null : uploadButton)}
104
+        </Upload>
105
+        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
106
+          <img alt="example" style={{ width: '100%' }} src={previewImage} />
107
+        </Modal>
108
+      </div>
109
+    );
110
+  }
111
+}
112
+
113
+export default ImageListUpload;

+ 23
- 0
src/components/DragableUploadImageList/style.less Näytä tiedosto

1
+:global {
2
+  .x-dargable-image-upload-list {
3
+    display: flex;
4
+  }
5
+
6
+  
7
+  .x-dargable-image-upload-list  .ant-upload-picture-card-wrapper {
8
+    width: auto !important;
9
+  }
10
+
11
+}
12
+
13
+
14
+/* you can make up upload button and sample style by using stylesheets */
15
+.ant-upload-select-picture-card i {
16
+  font-size: 32px;
17
+  color: #999;
18
+}
19
+
20
+.ant-upload-select-picture-card .ant-upload-text {
21
+  margin-top: 8px;
22
+  color: #666;
23
+}

+ 3
- 1
src/pages/building/list/add/components/buildingImage.jsx Näytä tiedosto

5
 import request from '../../../../../utils/request';
5
 import request from '../../../../../utils/request';
6
 import apis from '../../../../../services/apis';
6
 import apis from '../../../../../services/apis';
7
 import router from 'umi/router';
7
 import router from 'umi/router';
8
+import DragableUploadImageList from '@/components/DragableUploadImageList'
8
 
9
 
9
 const { Header, Footer, Sider, Content } = Layout;
10
 const { Header, Footer, Sider, Content } = Layout;
10
 
11
 
226
       <span style={{ marginTop: '10px', marginBottom: '10px' }}>{props.apartment.apartmentName}({imageList.length})</span>
227
       <span style={{ marginTop: '10px', marginBottom: '10px' }}>{props.apartment.apartmentName}({imageList.length})</span>
227
       <Button type="link" style={{ color: 'blue' }} onClick={() => edi()}>重命名</Button>
228
       <Button type="link" style={{ color: 'blue' }} onClick={() => edi()}>重命名</Button>
228
       <Button type="link" style={{ color: 'blue' }} onClick={() => deletePhoto()}>删除相册</Button>
229
       <Button type="link" style={{ color: 'blue' }} onClick={() => deletePhoto()}>删除相册</Button>
229
-      <ImageListUpload value={imageList} onChange={onImageChange} unlimited/>
230
+      <DragableUploadImageList value={imageList} onChange={onImageChange} unlimited/>
231
+      {/* <ImageListUpload value={imageList} onChange={onImageChange} unlimited/> */}
230
 
232
 
231
        {/* 编辑页 */}
233
        {/* 编辑页 */}
232
        <WrappedModalEdiForm visibleData={visibleData} onCancel={e => onCancel(e)} onSuccess={() => props.onSuccess()} noImage/>
234
        <WrappedModalEdiForm visibleData={visibleData} onCancel={e => onCancel(e)} onSuccess={() => props.onSuccess()} noImage/>