kede-client/js/component/manageCenter/statistics/personnel/picModal.jsx

import React from "react";
import {
  Spin,
  Button,
  Tabs,
  Table,
  message,
  Modal,
  Upload,
  Tooltip,
} from "antd";
import { splitUrl } from "@/tools";
import "./remove.less"

const PicModal = React.createClass({
  getInitialState() {
    return {
      newVisible: false,
      rotateDeg: 0,
    };
  },
  componentWillReceiveProps(nextProps) {
    this.setState({
      newVisible: nextProps.ShowModal,
    });
  },
  handleOk() {
    this.setState({
      newVisible: false,
    });
    // window.setTimeout( () => {
    //   this.setState({
    //     newVisible: true
    //   });
    // },)
  },
  downImg() {
    let num = 0;
    for (let i = 0; i < this.props.picUrl.length; i++) {
      if (globalConfig.avatarHost + "/upload" + this.props.picUrl[i] == this.state.previewImage) {
        num = i;
      }
    }
    if (num == this.props.picUrl.length - 1) {
      return message.warning("已经是最后一张了哦");
    }
    this.state.previewImage = globalConfig.avatarHost + "/upload" + this.props.picUrl[num + 1];
    this.setState({
      previewImage: this.state.previewImage,
      rotateDeg: 0
    });
  },
  upImg() {
    let num = 0;
    for (let i = 0; i < this.props.picUrl.length; i++) {
      if (globalConfig.avatarHost + "/upload" + this.props.picUrl[i] == this.state.previewImage) {
        num = i;
      }
    }
    if (num == 0) {
      return message.warning("已经是第一张了哦");
    }
    this.state.previewImage = globalConfig.avatarHost + "/upload" + this.props.picUrl[num - 1];
    this.setState({
      previewImage: this.state.previewImage,
      rotateDeg: 0
    });
  },
  rotate() {
    let rotateDeg = this.state.rotateDeg + 90;
    this.setState({
      rotateDeg
    });
  },
  render() {
    return (
      <div>
        {this.props.picUrl.map((item, index) => {
          return (
            <div style={{ display: "inline-block" }}>
              <Upload
                className="demandDetailShow-upload"
                listType="picture-card"
                onChange={this.props.remove}
                fileList={
                  item
                    ? splitUrl(item, ",", globalConfig.avatarHost + "/upload")
                    : []
                }
                onPreview={(file) => {
                  this.setState({
                    previewImage: file.url || file.thumbUrl,
                    previewVisible: true,
                  });
                }}
              />
              <Tooltip placement="top" title={this.props.remarks[index]}>
                <div style={{ textAlign: "center" }}>
                  {this.props.remarks[index].length > 7 ? this.props.remarks[index].substring(0,7) + "..." : this.props.remarks[index]}
                </div>
              </Tooltip>
            </div>
          );
        })}
        <Modal
          maskClosable={false}
          footer={null}
          width={"50%"}
          visible={this.state.previewVisible}
          onCancel={() => {
            this.setState({ previewVisible: false, rotateDeg: 0 }, () => {
            });
          }}
        >
          <img
            alt=""
            style={{
              width: "100%",
              transform: `rotate(${this.state.rotateDeg}deg)`,
            }}
            src={this.state.previewImage || ""}
          />
          <Button
            onClick={this.rotate}
            style={{
              position: "relative",
              left: "50%",
              transform: "translateX(-50%)",
            }}
          >
            旋转
          </Button>
          <Button
            onClick={this.upImg}
            style={{
              position: "absolute",
              left: -81,
              top: "50%",
              transform: "translateY(-50%)",
            }}
          >
            上一张
          </Button>
          <Button
            onClick={this.downImg}
            style={{
              position: "absolute",
              right: -81,
              top: "50%",
              transform: "translateY(-50%)",
            }}
          >
            下一张
          </Button>
        </Modal>
      </div>
    );
  },
});

export default PicModal;