新需求

src/components/DragableUploadImageList/Item.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Icon } from 'antd'
+
+export default (props) => {
+    const { dataset = {}, onPreview, onDelete, onClick, onSticky } = props
+    const { url } = dataset
+
+    const handlePreview = () => {
+        onPreview && onPreview(dataset)
+    }
+
+    const handleDelete = () => {
+        onDelete && onDelete(dataset)
+    }
+
+    const handleClick = () => {
+        return onClick ? onClick(dataset) : null
+    }
+
+    const handleSticky = () => {
+        onSticky && onSticky(dataset)
+    }
+
+    return (
+        <div className="ant-upload-list-picture-card-container">
+            <span>
+                <div className="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card">
+                    <div className="ant-upload-list-item-info">
+                        <span>
+                            <a className="ant-upload-list-item-thumbnail" href={url} target="_blank" rel="noopener noreferrer" onClick={handleClick}>
+                                <img className="ant-upload-list-item-image" src={url} alt="image" />
+                            </a>
+                        </span>
+                    </div>
+
+                    <span className="ant-upload-list-item-actions">
+                        <Icon type="vertical-align-top" className="anticon anticon-eye-o" onClick={handleSticky} />
+                        <Icon type="eye" className="anticon anticon-eye-o" onClick={handlePreview} />
+                        <Icon type="delete" onClick={handleDelete} />
+                    </span>
+                </div>
+            </span>
+        </div>
+    )
+}
+

src/components/DragableUploadImageList/index.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { Upload, Icon, Modal } from 'antd';
+import './style.less';
+import { uploaderProps } from '../../utils/upload';
+import Item from './Item'
+
+/**
+ * unlimited  属性表示上传图片无限制
+ * 例子： <ImageListUpload unlimited/>
+ */
+class ImageListUpload extends React.Component {
+  state = {
+    previewVisible: false,
+    previewImage: '',
+    loadding: false,
+  };
+
+  getFileList = () => {
+    return (this.props.value || []).map((img, inx) => ({ uid: inx, url: img, status: 'done' }))
+  }
+
+  handleCancel = () => this.setState({ previewVisible: false });
+
+  handlePreview = async file => {
+    this.setState({
+      previewImage: file.url ,
+      previewVisible: true,
+    });
+  };
+
+  handleSticky = ({ url }) => {
+    const fileList = this.props.value || [];
+    this.props.onChange([url].concat(fileList.filter(x => x != url)))
+  }
+
+  handleDelete = ({ url }) => {
+    const fileList = this.props.value || [];
+    this.props.onChange(fileList.filter(x => x != url))
+  }
+
+  handleChange = (e) => {
+    if (e.file.status === "uploading") {
+      this.setState({ loading: true });
+      return;
+    }
+
+    const fileList = (this.props.value || []).filter(x => x != e.file.url);
+    this.props.onChange(fileList);
+
+    // console.log('删除图片触发了', e.file)
+    // if (e.file.state === 'removed') {
+    //   const fileList = (this.props.value || []).filter(x => x != e.file.url);
+    //   this.props.onChange(fileList);
+    // }
+
+    // if (e.file.status === "done") {
+    //   this.setState({
+    //     loading: false,
+    //   })
+
+    //   if (e.file.response && e.file.response.url) {
+    //     if (typeof this.props.onChange === 'function') {
+    //       const fileList = this.getFileList()
+    //       this.props.onChange([...fileList || [], e.file.response.url]);
+    //     }
+    //   }
+    // }
+  };
+
+  handleUploadSucess = (url) => {
+    this.setState({ loading: false });
+    if (typeof this.props.onChange === 'function') {
+      const fileList = this.props.value || [];
+      this.props.onChange([...fileList, url]);
+    }
+  }
+
+  render() {
+    const { previewVisible, previewImage } = this.state;
+    const fileList = this.getFileList();
+
+    const uploadButton = (
+      <div>
+        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"}  />
+      </div>
+    );
+    return (
+      <div className="clearfix x-dargable-image-upload-list">
+        <div className="ant-upload-list ant-upload-list-picture-card">
+            {fileList.map(img => <Item key={img.url} dataset={img} onPreview={this.handlePreview} onSticky={this.handleSticky} onDelete={this.handleDelete}/>)}
+        </div>
+          
+        <Upload
+          listType="picture-card"
+          showUploadList={false}
+          onPreview={this.handlePreview}
+          onChange={this.handleChange}
+          { ...uploaderProps }
+          onSuccess={this.handleUploadSucess}
+        >
+        
+          {/* unlimited 表示上传无限制数量 */}
+          {(this.props.unlimited && uploadButton) || ((fileList || images).length >= 8 ? null : uploadButton)}
+        </Upload>
+        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
+          <img alt="example" style={{ width: '100%' }} src={previewImage} />
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default ImageListUpload;

src/components/DragableUploadImageList/style.less

@@ -0,0 +1,23 @@
+:global {
+  .x-dargable-image-upload-list {
+    display: flex;
+  }
+
+  
+  .x-dargable-image-upload-list  .ant-upload-picture-card-wrapper {
+    width: auto !important;
+  }
+
+}
+
+
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}

src/pages/building/list/add/components/buildingImage.jsx

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