2021-01-29

king

2021-01-29 d62c168d0656fac4242581609c3c5c0d88cf6a48

 src/menu/picturecontroller/index.jsx

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

import Api from '@/api'
import Utils from '@/utils/utils.js'
@@ -10,7 +9,9 @@
const { Search } = Input
const { confirm } = Modal
const { TabPane } = Tabs

const EditForm = asyncComponent(() => import('./editform'))
const Video = asyncComponent(() => import('./video'))
const Image = asyncComponent(() => import('@/components/Image'))

class PasteController extends Component {
@@ -21,12 +22,20 @@
    imageKey: '',
    videoKey: '',
    videos: [],
    card: null
    card: null,
    pageSize: 12,
    filpictures: [],
    filvideos: [],
    piclist: [],
    vidlist: [],
    picIndex: 1,
    vidIndex: 1,
  }

  trigger = () => {
    let pictures = sessionStorage.getItem('app_pictures')
    let videos = sessionStorage.getItem('app_videos')

    try {
      pictures = JSON.parse(pictures)
      videos = JSON.parse(videos)
@@ -35,7 +44,25 @@
      videos = []
    }

    this.setState({visible: true, pictures, videos})
    let filpictures = pictures
    let filvideos = videos

    let piclist = filpictures.filter((item, index) => index < this.state.pageSize)
    let vidlist = filvideos.filter((item, index) => index < this.state.pageSize)

    this.setState({
      visible: true,
      filpictures,
      filvideos,
      pictures,
      picIndex: 1,
      vidIndex: 1,
      imageKey: '',
      videoKey: '',
      piclist,
      vidlist,
      videos
    })
  }
  
  handleSource = (item) => {
@@ -67,11 +94,12 @@
        if (result.status) {
          if (card.typecharone === 'image') {
            sessionStorage.setItem('app_pictures', JSON.stringify(result.data || []))
            this.setState({pictures: result.data || [], editvisible: false})
            this.resetPicture(result.data || [])
          } else {
            sessionStorage.setItem('app_videos', JSON.stringify(result.data || []))
            this.setState({videos: result.data || [], editvisible: false})
            this.resetVideo(result.data || [])
          }
          this.setState({editvisible: false})
        }
      })
    })
@@ -111,10 +139,10 @@
            if (res.status) {
              if (item.typecharone === 'image') {
                sessionStorage.setItem('app_pictures', JSON.stringify(res.data || []))
                _this.setState({pictures: res.data || []})
                _this.resetPicture(res.data || [])
              } else {
                sessionStorage.setItem('app_videos', JSON.stringify(res.data || []))
                _this.setState({videos: res.data || []})
                _this.resetVideo(res.data || [])
              }
            }
            resolve()
@@ -124,12 +152,59 @@
      onCancel() {}
    })
  }

  resetPicture = (data) => {
    const { imageKey, pageSize } = this.state

    let filpictures = data.filter(item => !imageKey || item.remark.indexOf(imageKey) > -1)
    let piclist = filpictures.filter((item, index) => index < pageSize)

    this.setState({picIndex: 1, filpictures, piclist, pictures: data})
  }
  
  resetVideo = (data) => {
    const { videoKey, pageSize } = this.state

    let filvideos = data.filter(item => !videoKey || item.remark.indexOf(videoKey) > -1)
    let vidlist = filvideos.filter((item, index) => index < pageSize)

    this.setState({vidIndex: 1, filvideos, vidlist, videos: data})
  }

  filterPicture = () => {
    const { imageKey, pictures, pageSize } = this.state

    let filpictures = pictures.filter(item => !imageKey || item.remark.indexOf(imageKey) > -1)
    let piclist = filpictures.filter((item, index) => index < pageSize)

    this.setState({picIndex: 1, filpictures, piclist})
  }
  
  filterVideo = () => {
    const { videoKey, videos, pageSize } = this.state

    let filvideos = videos.filter(item => !videoKey || item.remark.indexOf(videoKey) > -1)
    let vidlist = filvideos.filter((item, index) => index < pageSize)

    this.setState({vidIndex: 1, filvideos, vidlist})
  }

  changePicSize = (page) => {
    const { filpictures, pageSize } = this.state
    let piclist = filpictures.filter((item, index) => index < pageSize * page && index >= pageSize * (page - 1))

    this.setState({picIndex: page, piclist})
  }

  changeVidSize = (page) => {
    const { filvideos, pageSize } = this.state
    let vidlist = filvideos.filter((item, index) => index < pageSize * page && index >= pageSize * (page - 1))
    
    this.setState({vidIndex: page, vidlist})
  }
  
  render() {
    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)
    const { visible, editvisible, card, filpictures, filvideos, piclist, vidlist, imageKey, videoKey, pageSize, picIndex, vidIndex } = this.state

    return (
      <div style={{display: 'inline-block'}}>
@@ -152,7 +227,7 @@
            <TabPane tab="图片管理" key="picture">
              <Row style={{marginBottom: '15px'}}>
                <Col span={8}>
                  <Search placeholder="" onSearch={value => this.setState({imageKey: value})} enterButton />
                  <Search placeholder="" value={imageKey} onChange={(e) => this.setState({imageKey: e.target.value})} onSearch={this.filterPicture} enterButton />
                </Col>
                <Col span={16}>
                  <Button className="picture-plus" type="link" icon="plus" onClick={() => this.handleSource({typecharone: 'image'})}>
@@ -160,8 +235,8 @@
                  </Button>
                </Col>
              </Row>
              <Row gutter={16}>
                {pictures.length && pictures.map(item => (
              <Row gutter={16} style={{height: '340px'}}>
                {piclist.length && piclist.map(item => (
                  <Col span={4} key={item.id}>
                    <div className="image-video-box">
                      <div className="image-video-box-body">
@@ -176,13 +251,14 @@
                    <p className="image-video-remark">{item.remark}</p>
                  </Col>
                ))}
                {!pictures.length ? <Empty description={null}/> : null}
                {!piclist.length ? <Empty description={null}/> : null}
              </Row>
              {filpictures.length > pageSize ? <Pagination size="small" current={picIndex} pageSize={pageSize} onChange={this.changePicSize} total={filpictures.length} /> : null}
            </TabPane>
            <TabPane tab="视频管理" key="video">
              <Row style={{marginBottom: '15px'}}>
                <Col span={8}>
                  <Search placeholder="" onSearch={value => this.setState({videoKey: value})} enterButton />
                  <Search placeholder="" value={videoKey} onChange={e => this.setState({videoKey: e.target.value})} onSearch={this.filterVideo} enterButton />
                </Col>
                <Col span={16}>
                  <Button className="picture-plus" type="link" icon="plus" onClick={() => this.handleSource({typecharone: 'video'})}>
@@ -190,12 +266,12 @@
                  </Button>
                </Col>
              </Row>
              <Row gutter={16}>
                {videos.length && videos.map(item => (
              <Row gutter={16} style={{height: '340px'}}>
                {vidlist.length && vidlist.map(item => (
                  <Col span={4} key={item.id}>
                    <div className="image-video-box">
                      <div className="image-video-box-body">
                        <Image url={item.linkurl} />
                        <Video value={item.linkurl} />
                      </div>
                      <div className="image-video-control">
                        <Icon type="copy" onClick={() => this.copySource(item)}/>
@@ -206,8 +282,9 @@
                    <p className="image-video-remark">{item.remark}</p>
                  </Col>
                ))}
                {!videos.length ? <Empty description={null}/> : null}
                {!vidlist.length ? <Empty description={null}/> : null}
              </Row>
              {filvideos.length > pageSize ? <Pagination size="small" current={vidIndex} pageSize={pageSize} onChange={this.changeVidSize} total={filvideos.length} /> : null}
            </TabPane>
          </Tabs>
        </Modal>