2021-09-01

king

2021-09-01 31ec63f0419895876cbaba99637a884a32d33d0d

 src/menu/picturecontroller/index.jsx

@@ -1,48 +1,357 @@
import React, {Component} from 'react'
// import { fromJS } from 'immutable'
import { Modal, Button } from 'antd'
import { Modal, Button, Row, Col, Input, Icon, message, Tabs, Empty, Pagination, notification } 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 Video = asyncComponent(() => import('./video'))
const Image = asyncComponent(() => import('@/components/Image'))

class PasteController extends Component {
  state = {
    visible: false
    visible: false,
    editvisible: false,
    pictures: [],
    imageKey: '',
    videoKey: '',
    videos: [],
    card: null,
    pageSize: 12,
    filpictures: [],
    filvideos: [],
    colorlist: [],
    piclist: [],
    vidlist: [],
    picIndex: 1,
    vidIndex: 1,
  }

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

    try {
      pictures = JSON.parse(pictures)
      videos = JSON.parse(videos)
      colorlist = JSON.parse(colorlist)
    } catch (e) {
      pictures = []
      videos = []
      colorlist = []
    }

    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,
      colorlist,
      videos
    })
  }
  
  addSource = () => {
  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.resetPicture(result.data || [])
          } else if (card.typecharone === 'video') {
            sessionStorage.setItem('app_videos', JSON.stringify(result.data || []))
            this.resetVideo(result.data || [])
          } else if (card.typecharone === 'color') {
            sessionStorage.setItem('app_colors', JSON.stringify(result.data || []))
            this.resetColor(result.data || [])
          }
          this.setState({editvisible: false})
        } else {
          notification.warning({
            top: 92,
            message: result.message,
            duration: 5
          })
        }
      })
    })
  }

  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.resetPicture(res.data || [])
              } else if (item.typecharone === 'video') {
                sessionStorage.setItem('app_videos', JSON.stringify(res.data || []))
                _this.resetVideo(res.data || [])
              } else if (item.typecharone === 'color') {
                sessionStorage.setItem('app_colors', JSON.stringify(res.data || []))
                _this.resetColor(res.data || [])
              }
            } else {
              notification.warning({
                top: 92,
                message: res.message,
                duration: 5
              })
            }
            resolve()
          })
        })
      },
      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})
  }
  
  resetColor = (data) => {
    this.setState({colorlist: 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 } = this.state
    const { visible, editvisible, card, filpictures, filvideos, piclist, vidlist, imageKey, videoKey, pageSize, picIndex, vidIndex, colorlist } = this.state

    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>

          </div>
          <Tabs>
            <TabPane tab="图片管理" key="picture">
              <Row style={{marginBottom: '15px'}}>
                <Col span={8}>
                  <Search placeholder="" value={imageKey} onChange={(e) => this.setState({imageKey: e.target.value})} onSearch={this.filterPicture} enterButton />
                </Col>
                <Col span={16}>
                  <Button className="picture-plus mk-green" icon="plus" onClick={() => this.handleSource({typecharone: 'image'})}>
                    添加
                  </Button>
                </Col>
              </Row>
              <Row gutter={16} style={{height: '340px'}}>
                {piclist.length > 0 && piclist.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>
                ))}
                {!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="" value={videoKey} onChange={e => this.setState({videoKey: e.target.value})} onSearch={this.filterVideo} enterButton />
                </Col>
                <Col span={16}>
                  <Button className="picture-plus mk-green" icon="plus" onClick={() => this.handleSource({typecharone: 'video'})}>
                    添加
                  </Button>
                </Col>
              </Row>
              <Row gutter={16} style={{height: '340px'}}>
                {vidlist.length > 0 && vidlist.map(item => (
                  <Col span={4} key={item.id}>
                    <div className="image-video-box">
                      <div className="image-video-box-body">
                        <Video value={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>
                ))}
                {!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>
            <TabPane tab="颜色管理" key="color">
              <Row style={{marginBottom: '15px'}}>
                <Col span={24}>
                  可添加应用中常用的颜色，可以是英文代码、HEX格式、RGB格式，最多可添加25种。
                  {colorlist.length < 25 ? <Button className="picture-plus mk-green" icon="plus" onClick={() => this.handleSource({typecharone: 'color'})}>
                    添加
                  </Button> : null}
                </Col>
              </Row>
              <Row gutter={16} style={{height: '340px'}}>
                {colorlist.length > 0 && colorlist.map(item => (
                  <Col span={4} key={item.id}>
                    <div className="image-video-box">
                      <div className="image-video-box-body" style={{background: item.linkurl}}>
                      </div>
                      <div className="image-video-control">
                        <Icon type="copy" onClick={() => this.copySource(item)}/>
                        <Icon type="delete" onClick={() => this.deleteSource(item)}/>
                      </div>
                    </div>
                    <p className="image-video-remark">{item.remark}</p>
                  </Col>
                ))}
                {!colorlist.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>
    )