2021-01-28

king

2021-01-28 86b366cac525ad676da3cfd65f67a551b9260aeb

 src/menu/picturecontroller/index.jsx

@@ -1,48 +1,227 @@
import React, {Component} from 'react'
// import { fromJS } from 'immutable'
import { Modal, Button } from 'antd'
import { Modal, Button, Row, Col, Input, Icon, message, Tabs, Empty } from 'antd'

// import Utils from '@/utils/utils.js'
// import asyncComponent from '@/utils/asyncComponent'
import Api from '@/api'
import Utils from '@/utils/utils.js'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

// const PasteForm = asyncComponent(() => import('@/templates/zshare/pasteform'))
const { Search } = Input
const { confirm } = Modal
const { TabPane } = Tabs
const EditForm = asyncComponent(() => import('./editform'))
const Image = asyncComponent(() => import('@/components/Image'))

class PasteController extends Component {
  state = {
    visible: false
    visible: false,
    editvisible: false,
    pictures: [],
    imageKey: '',
    videoKey: '',
    videos: [],
    card: null
  }
  
  addSource = () => {
  trigger = () => {
    let pictures = sessionStorage.getItem('app_pictures')
    let videos = sessionStorage.getItem('app_videos')
    try {
      pictures = JSON.parse(pictures)
      videos = JSON.parse(videos)
    } catch {
      pictures = []
      videos = []
    }

    this.setState({visible: true, pictures, videos})
  }
  
  handleSource = (item) => {
    this.setState({
      editvisible: true,
      card: item || null
    })
  }

  save = () => {
    const { card } = this.state
    this.editFormRef.handleConfirm().then(res => {
      res = {...card, ...res}

      if (!res.id) {
        res.id = Utils.getuuid()
      }

      Api.getSystemConfig({
        func: 's_url_db_adduptdel',
        id: res.id,
        PageIndex: 0, // 0 代表全部
        PageSize: 0,  // 0 代表全部
        remark: res.remark || '',
        linkurl: res.linkurl,
        typecharone: card.typecharone,
        type: card.id ? 'upt' : 'add'
      }).then(result => {
        if (result.status) {
          if (card.typecharone === 'image') {
            sessionStorage.setItem('app_pictures', JSON.stringify(result.data || []))
            this.setState({pictures: result.data || [], editvisible: false})
          } else {
            sessionStorage.setItem('app_videos', JSON.stringify(result.data || []))
            this.setState({videos: result.data || [], editvisible: false})
          }
        }
      })
    })
  }

  copySource = (item) => {
    if (item.linkurl) {
      let oInput = document.createElement('input')
      oInput.value = item.linkurl
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      document.body.removeChild(oInput)

      message.success('复制成功。')
    }
  }

  deleteSource = (item) => {
    const _this = this

    confirm({
      title: '确定删除吗？',
      content: '',
      onOk() {
        return new Promise((resolve) => {
          Api.getSystemConfig({
            func: 's_url_db_adduptdel',
            id: item.id,
            PageIndex: 0, // 0 代表全部
            PageSize: 0,  // 0 代表全部
            remark: '',
            linkurl: '',
            typecharone: item.typecharone,
            type: 'del'
          }).then(res => {
            if (res.status) {
              if (item.typecharone === 'image') {
                sessionStorage.setItem('app_pictures', JSON.stringify(res.data || []))
                _this.setState({pictures: res.data || []})
              } else {
                sessionStorage.setItem('app_videos', JSON.stringify(res.data || []))
                _this.setState({videos: res.data || []})
              }
            }
            resolve()
          })
        })
      },
      onCancel() {}
    })
  }
  
  render() {
    const { visible } = this.state
    const { visible, editvisible, card, imageKey, videoKey } = this.state

    const pictures = this.state.pictures.filter(item => !imageKey || item.remark.indexOf(imageKey) > -1)
    const videos = this.state.videos.filter(item => !videoKey || item.remark.indexOf(videoKey) > -1)

    return (
      <div style={{display: 'inline-block'}}>
        <Button className="mk-border-purple" icon="picture" onClick={() => {this.setState({visible: true})}}>资源管理</Button>
        <Button className="mk-border-purple" icon="picture" onClick={this.trigger}>资源管理</Button>
        <Modal
          title="粘贴"
          wrapClassName="picture-control-model"
          visible={visible}
          width={600}
          width={1200}
          maskClosable={false}
          onOk={this.pasteSubmit}
          onCancel={() => {this.setState({visible: false})}}
          footer={[
            <Button key="back" type="link" icon="plus" onClick={this.addSource}>
              添加
            </Button>,
            <Button key="colse" onClick={() => {this.setState({visible: false})}}>
              关闭
            </Button>
          ]}
          destroyOnClose
        >
          <div>

          <Tabs>
            <TabPane tab="图片管理" key="picture">
              <Row style={{marginBottom: '15px'}}>
                <Col span={8}>
                  <Search placeholder="" onSearch={value => this.setState({imageKey: value})} enterButton />
                </Col>
                <Col span={16}>
                  <Button className="picture-plus" type="link" icon="plus" onClick={() => this.handleSource({typecharone: 'image'})}>
                    添加
                  </Button>
                </Col>
              </Row>
              <Row gutter={16}>
                {pictures.length && pictures.map(item => (
                  <Col span={4} key={item.id}>
                    <div className="image-video-box">
                      <div className="image-video-box-body">
                        <Image url={item.linkurl} />
          </div>
                      <div className="image-video-control">
                        <Icon type="copy" onClick={() => this.copySource(item)}/>
                        <Icon type="edit" onClick={() => this.handleSource(item)}/>
                        <Icon type="delete" onClick={() => this.deleteSource(item)}/>
                      </div>
                    </div>
                    <p className="image-video-remark">{item.remark}</p>
                  </Col>
                ))}
                {!pictures.length ? <Empty description={null}/> : null}
              </Row>
            </TabPane>
            <TabPane tab="视频管理" key="video">
              <Row style={{marginBottom: '15px'}}>
                <Col span={8}>
                  <Search placeholder="" onSearch={value => this.setState({videoKey: value})} enterButton />
                </Col>
                <Col span={16}>
                  <Button className="picture-plus" type="link" icon="plus" onClick={() => this.handleSource({typecharone: 'video'})}>
                    添加
                  </Button>
                </Col>
              </Row>
              <Row gutter={16}>
                {videos.length && videos.map(item => (
                  <Col span={4} key={item.id}>
                    <div className="image-video-box">
                      <div className="image-video-box-body">
                        <Image url={item.linkurl} />
                      </div>
                      <div className="image-video-control">
                        <Icon type="copy" onClick={() => this.copySource(item)}/>
                        <Icon type="edit" onClick={() => this.handleSource(item)}/>
                        <Icon type="delete" onClick={() => this.deleteSource(item)}/>
                      </div>
                    </div>
                    <p className="image-video-remark">{item.remark}</p>
                  </Col>
                ))}
                {!videos.length ? <Empty description={null}/> : null}
              </Row>
            </TabPane>
          </Tabs>
        </Modal>
        <Modal
          title={card ? '编辑' : '新建'}
          wrapClassName="picture-edit-model"
          visible={editvisible}
          width={600}
          maskClosable={false}
          onOk={this.save}
          onCancel={() => {this.setState({editvisible: false})}}
          destroyOnClose
        >
          <EditForm card={card} wrappedComponentRef={(inst) => this.editFormRef = inst} inputSubmit={this.save}/>
        </Modal>
      </div>
    )