app-base-web/src/library/attachment/index.js

web development common base package.

import React from 'react'
import net from '../util-net'
//附件
export default class Attachment extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      urlArr: [],
      attnameArr: []
    }
  }
  componentDidMount() {
    if (!this.props.url) return;
    let url = this.props.url || "";
    let urlArr;
    try {
      urlArr = [];
      let _urlArr = JSON.parse(url);
      for (let i = 0; i < _urlArr.length; i++) {
        urlArr.push(_urlArr[i].url);
      }
    } catch (e) {
      urlArr = url.split(",");
    }
    let attnameArr = [];
    for (var i = 0; i < urlArr.length; i++) {
      let attname = net.getUrlParam(urlArr[i], "attname");
      attnameArr.push(attname);
    }
    this.setState({
      urlArr,
      attnameArr
    });
  }
  render() {
    return (
      <span className="app-attachment">
        {this.state.urlArr.map((url, index) => (
          //传入点击事件则不能下载文件
          this.props.onClick ?
            (this.props.type && this.props.type == "img" ?
              <a style={{ marginLeft: index > 0 ? "8px" : "" }} key={index} onClick={this.props.onClick} ><img style={this.props.style} src={url} /></a>
              : <a style={{ marginLeft: index > 0 ? "8px" : "" }} key={index} onClick={this.props.onClick}>{this.state.attnameArr[index]}</a>
            )
            :
            (this.props.type && this.props.type == "img" ?
              <a style={{ marginLeft: index > 0 ? "8px" : "" }} key={index} href={url} download={this.state.attnameArr[index]}><img style={this.props.style} src={url} /></a>
              : <a style={{ marginLeft: index > 0 ? "8px" : "" }} key={index} href={url} download={this.state.attnameArr[index]}>{this.state.attnameArr[index]}</a>
            )
        ))}
      </span>
    );
  }
}