qm-bus/src/UploadBox/components/upload-panel.js

千米公有云业务组件库

import '../index.less'

import React from 'react'
import { Tabs, Button, Checkbox, message } from 'antd'
import { QMConst } from 'qm-ux'

import MediaUpload from './media-upload'
import ImageUpload from './image-upload'
const TabPane = Tabs.TabPane

/**
 * 上传面板
 */
class UploadPanel extends React.Component {
  static defaultProps = {
    type: 'pic',
    close: () => {},
    switchView: () => {},
  }

  constructor(props) {
    super(props)
    let check = !!(localStorage.getItem('qm.common.gallery.protocol') === 'true')
    this.state = {
      type: '', // 当前上传类型
      files: [], // 文件容器
      netImages: [], // 远程图片容器
      images: [], // 图片容器
      videos: [], // 视频容器
      protCheck: check, // 是否同意上传协议
    }
  }

  // 确认协议
  onConfirmProt = e => {
    localStorage.setItem('qm.common.gallery.protocol', e.target.checked)
    this.setState({ protCheck: e.target.checked })
  }

  /**
   * 取消
   */
  onCancel = () => this.props.close()

  /**
   * 上传
   */
  onUpload = () => {
    let { images, videos, protCheck } = this.state
    this.setState({
      files: images.concat(videos),
    })
    let files = images.concat(videos)
    const arr = this.state.netImages.concat(files.map(i => i.response.data[0]))
    if (arr.length <= 0) {
      message.error('上传图片或者视频不得为空！')
      return
    }
    if (!protCheck) {
      message.error('请仔细阅读《媒体素材上传服务协议》并同意！')
      return
    }

    this.props.close([].concat(this.state.netImages).concat(files.map(i => i.response.data[0])))
  }

  render() {
    const { Platform, SystemId } = QMConst.get('project') || {}
    const headers = {
      Platform: Platform,
      systemId: SystemId,
    }

    const formLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
    }

    const { type, switchView, limit, pic_rule, video_rule } = this.props
    const { protCheck } = this.state
    return (
      <div className={'upload-picture-library modal-body-main' + (type == 'all' ? 'multiple' : '')}>
        <div className={'upload-picture-main upload'}>
          {type == 'all' ? (
            <Tabs defaultActiveKey="1">
              <TabPane tab="上传图片" key="1" className="pushtt">
                <ImageUpload
                  setImg={this.setImg}
                  setNetImg={this.setNetImg}
                  formLayout={formLayout}
                  headers={headers}
                  limit={limit}
                  rule={pic_rule}
                />
              </TabPane>
              <TabPane tab="上传视频" key="2" className="pushtt">
                <MediaUpload
                  setVideo={this.setVideo}
                  formLayout={formLayout}
                  headers={headers}
                  limit={limit}
                  rule={video_rule}
                />
              </TabPane>
            </Tabs>
          ) : type == 'video' ? (
            <MediaUpload
              setVideo={this.setVideo}
              formLayout={formLayout}
              headers={headers}
              limit={limit}
              rule={video_rule}
            />
          ) : (
            <ImageUpload
              setImg={this.setImg}
              formLayout={formLayout}
              headers={headers}
              limit={limit}
              rule={pic_rule}
            />
          )}
        </div>
        <div className="modal-footer-main">
          <div style={{ display: '-webkit-inline-box' }}>
            <Checkbox defaultChecked={protCheck} onChange={this.onConfirmProt} />
            <span>
              同意《
              <a href="javascript:void(0)" onClick={() => switchView('prot')}>
                媒体素材上传服务协议
              </a>
              》
            </span>
          </div>

          <Button size="large" onClick={this.onCancel}>
            取消
          </Button>
          <Button size="large" type="primary" onClick={this.onUpload}>
            确定
          </Button>
        </div>
      </div>
    )
  }

  setVideo = (files = []) => {
    this.setState({ videos: files })
  }

  setImg = (files = []) => {
    this.setState({ images: files })
  }

  setNetImg = (files = []) => {
    this.setState({ netImages: this.state.netImages.concat(files) })
  }
}

export default UploadPanel