qm-bus/src/GalleryBox/components/Operation.js

千米公有云业务组件库

import React, { Component } from 'react'
import { Button, Checkbox, message } from 'antd'
import { Relax } from 'iflux2'
import { fromJS } from 'immutable'

import { uploadQL, netImagesQL, imagesQL, scopeQL, videosQL, selectedQL } from '../ql'
import { saveImages } from '../webapi'

const noop = () => {}

@Relax
export default class Operation extends Component {
  static defaultProps = {
    protCheck: false,
    view: 'selector', //

    upload: uploadQL,
    netImages: netImagesQL,
    images: imagesQL,
    cellSelected: {}, //
    scope: scopeQL,
    videos: videosQL,
    selects: selectedQL,

    uploadSwitch: noop,
    onRefresh: noop,
    onFormReset: noop,
    uploadClearAll: noop,
    setLinkAddress: noop,
    elementOnChange: noop,
    onCellSelect: noop, //
    switchview: noop, // 切换视图
  }

  constructor(props) {
    super(props)
    let check = localStorage.getItem('qm.common.gallery.protocol') === 'true'
    this.state = { protCheck: check }
  }

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

  render() {
    const { view, switchview, onSave } = this.props
    const { protCheck } = this.state
    if (view === 'selector') {
      return (
        <div className="modal-footer-main">
          <Button size="large" onClick={this.props.onClose}>
            取消
          </Button>
          <Button size="large" type="primary" onClick={onSave}>
            确认
          </Button>
        </div>
      )
    }

    if (view === 'upload') {
      let userAgent = navigator.userAgent
      let appName = ''
      if (userAgent.indexOf('appName') != -1) {
        appName = '平台'
      }
      return (
        <div className="modal-footer-main upload">
          {appName == '平台' ? (
            <div></div>
          ) : (
            <div style={{ display: '-webkit-inline-box' }}>
              <Checkbox defaultChecked={protCheck} onChange={this.onConfirmProt} />
              <span>
                同意《
                <a href="javascript:void(0)" onClick={() => switchview('protocol')}>
                  媒体素材上传服务协议
                </a>
                》
              </span>
            </div>
          )}
          <Button size="large" onClick={() => switchview('selector')}>
            返回
          </Button>
          <Button size="large" type="primary" onClick={this._onUpload}>
            确定
          </Button>
        </div>
      )
    } else {
      return (
        <div className="modal-footer-main proptocol">
          <Button size="large" type="primary" onClick={() => switchview('upload')}>
            知道了
          </Button>
        </div>
      )
    }
  }

  /**
   * 上传
   */
  _onUpload = async () => {
    const { protCheck } = this.state
    if (this.props.netImages.concat(this.props.images).concat(this.props.videos).size <= 0) {
      message.error('上传图片或者视频不得为空！')
      return
    }
    let userAgent = navigator.userAgent
    let appName = ''
    if (userAgent.indexOf('appName') != -1) {
      appName = '平台'
    }
    if (appName == '平台') {
    } else {
      if (!protCheck) {
        message.error('请仔细阅读《媒体素材上传服务协议》并同意！')
        return
      }
    }

    try {
      let cateId = 0
      let { selects } = this.props
      if (selects && selects.length > 0) {
        cateId = selects[selects.length - 1]
      }
      let res = await saveImages(
        {
          cateId: cateId,
          imageForms: this.props.netImages
            .concat(this.props.images)
            .concat(this.props.videos)
            .toJS(),
        },
        this.props.scope
      )

      if (res.err) {
        message.error(res.err.msg)
      } else {
        let { cellSelected, switchview } = this.props
        // let { data } = res
        // cellSelected = cellSelected.withMutations(cell => {
        //   ;(data || []).forEach(v => {
        //     let { id, picName: name, isCate, url: path } = v
        //     cell.set(v.id + '', fromJS({ id, name, isCate, path }))
        //   })
        // })
        // this.props.onCellSelect(cellSelected)
        this.props.onFormReset('simple')
        this.props.elementOnChange({
          index: 'cateId',
          source: { index: 'cateId', value: cateId, group: 'simple' },
        })
        this.props.onRefresh(true)
        switchview('selector')
        this.props.uploadClearAll()
        this.props.setLinkAddress('')
      }
    } catch (e) {}
  }
}