2021-09-01

king

2021-09-01 31ec63f0419895876cbaba99637a884a32d33d0d

 src/menu/picturecontroller/index.jsx

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

import Api from '@/api'
import Utils from '@/utils/utils.js'
@@ -26,6 +26,7 @@
    pageSize: 12,
    filpictures: [],
    filvideos: [],
    colorlist: [],
    piclist: [],
    vidlist: [],
    picIndex: 1,
@@ -35,13 +36,16 @@
  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)
    } catch {
      colorlist = JSON.parse(colorlist)
    } catch (e) {
      pictures = []
      videos = []
      colorlist = []
    }

    let filpictures = pictures
@@ -61,6 +65,7 @@
      videoKey: '',
      piclist,
      vidlist,
      colorlist,
      videos
    })
  }
@@ -95,11 +100,20 @@
          if (card.typecharone === 'image') {
            sessionStorage.setItem('app_pictures', JSON.stringify(result.data || []))
            this.resetPicture(result.data || [])
          } else {
          } 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
          })
        }
      })
    })
@@ -140,10 +154,19 @@
              if (item.typecharone === 'image') {
                sessionStorage.setItem('app_pictures', JSON.stringify(res.data || []))
                _this.resetPicture(res.data || [])
              } else {
              } 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()
          })
@@ -169,6 +192,10 @@
    let vidlist = filvideos.filter((item, index) => index < pageSize)

    this.setState({vidIndex: 1, filvideos, vidlist, videos: data})
  }
  
  resetColor = (data) => {
    this.setState({colorlist: data})
  }

  filterPicture = () => {
@@ -204,7 +231,7 @@
  }
  
  render() {
    const { visible, editvisible, card, filpictures, filvideos, piclist, vidlist, imageKey, videoKey, pageSize, picIndex, vidIndex } = this.state
    const { visible, editvisible, card, filpictures, filvideos, piclist, vidlist, imageKey, videoKey, pageSize, picIndex, vidIndex, colorlist } = this.state

    return (
      <div style={{display: 'inline-block'}}>
@@ -230,13 +257,13 @@
                  <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'})}>
                  <Button className="picture-plus mk-green" icon="plus" onClick={() => this.handleSource({typecharone: 'image'})}>
                    添加
                  </Button>
                </Col>
              </Row>
              <Row gutter={16} style={{height: '340px'}}>
                {piclist.length && piclist.map(item => (
                {piclist.length > 0 && piclist.map(item => (
                  <Col span={4} key={item.id}>
                    <div className="image-video-box">
                      <div className="image-video-box-body">
@@ -261,13 +288,13 @@
                  <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'})}>
                  <Button className="picture-plus mk-green" icon="plus" onClick={() => this.handleSource({typecharone: 'video'})}>
                    添加
                  </Button>
                </Col>
              </Row>
              <Row gutter={16} style={{height: '340px'}}>
                {vidlist.length && vidlist.map(item => (
                {vidlist.length > 0 && vidlist.map(item => (
                  <Col span={4} key={item.id}>
                    <div className="image-video-box">
                      <div className="image-video-box-body">
@@ -286,6 +313,32 @@
              </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