forgeplus-react/src/forge/Upload/attachment.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import { Popconfirm, Modal, Spin } from "antd";
import Videos from "./videos";
class Attachment extends Component {
  constructor(props) {
    super(props);
    this.state = {
      canDelete: false,
      show_video: false,
      video_url: undefined,
      video_title: undefined,
      video_id: undefined,
      move_spin: false,
      Deleted: [],
    };
  }

  componentDidMount = () => {
    this.getDetail();
  };

  getDetail = () => {
    this.setState({
      canDelete: this.props.canDelete,
    });
  };

  show_video_modal = (item) => {
    this.setState({
      video_title: item.title,
      move_spin: true,
      video_id: item.id,
    });
    this.move_attachment(item.id, "preview");
  };
  hide_video_modal = () => {
    const { video_id } = this.state;
    this.setState({
      video_title: undefined,
    });
    this.move_attachment(video_id, "close");
  };

  move_attachment = (id, status) => {
    axios
      .post(`/attachments/${id}/preview_attachment`, { status: status })
      .then((result) => {
        if (result) {
          this.setState({
            show_video: status === "preview",
            video_url: status === "preview" ? "https://forgeplus.trustie.net" + result.data.url : undefined,
            move_spin: false,
          });
        } else {
          this.setState({
            move_spin: false,
          });
        }
      })
      .catch((error) => {
        this.setState({
          move_spin: false,
        });
        console.log(error);
      });
  };

  is_video = (name) => {
    const video_names = ["mp4", "flv", "mkv", "3gp"];
    return video_names.indexOf(name.split(".").pop()) > -1;
  };

  deleteAttachment = (id) => {
    const url = `/attachments/${id}.json`;
    axios
      .delete(url, {})
      .then((response) => {
        if (response.data) {
          if (response.data.status === 0) {
            this.setState({
              Deleted: this.state.Deleted.concat(id),
            });
            this.props.showNotification("附件删除成功");
          } else {
            this.props.showNotification(response.data.message);
          }
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  };

  render() {
    const {
      Deleted,
      canDelete,
      show_video,
      video_url,
      video_title,
      move_spin,
    } = this.state;
    const { attachments } = this.props;
    return (
      <div>
        {attachments ? (
          <div className="attachmentsList mt5">
            {attachments.map((item, key) => {
              return (
                <div
                  key={key}
                  style={{
                    display:
                      Deleted.length > 0 && Deleted.indexOf(item.id) !== -1
                        ? "none"
                        : "block",
                  }}
                  className="pd510 attachment-list-div"
                >
                  {this.is_video(item.title) ? (
                    <Spin spinning={move_spin}>
                      <a
                        onClick={() => this.show_video_modal(item)}
                        className="attachment-list-a"
                      >
                        <i className="iconfont icon-fujian mr8 paper-clip-color font-12"></i>
                        <span>{item.title}</span>
                        <span className="ml20">{item.filesize}</span>
                      </a>
                    </Spin>
                  ) : (
                    <Link
                      to={`${item.url}`}
                      target="_blank"
                      className="attachment-list-a"
                    >
                      <i className="iconfont icon-fujian mr8 paper-clip-color font-12"></i>
                      <span>{item.title}</span>
                      <span className="ml20">{item.filesize}</span>
                    </Link>
                  )}

                  {canDelete ? (
                    <Popconfirm
                      placement="bottom"
                      title={"您确定要删除附件吗"}
                      okText="是"
                      cancelText="否"
                      onConfirm={() => this.deleteAttachment(item.id)}
                    >
                      <span className="attachment-list-delete fr">
                        <i className="iconfont icon-lajitong mr10 color-grey-9 font-14"></i>
                      </span>
                    </Popconfirm>
                  ) : (
                    ""
                  )}
                </div>
              );
            })}
          </div>
        ) : (
          ""
        )}
        {show_video ? (
          <Modal
            title={video_title}
            visible={true}
            width={690}
            footer={null}
            onCancel={this.hide_video_modal}
          >
            <Videos video_url={video_url}></Videos>
          </Modal>
        ) : (
          ""
        )}
      </div>
    );
  }
}
export default Attachment;