2024-08-25

king

2024-08-25 326aa6b3effaccc71cfe0775d47b0f29eb3695a6

 src/menu/picturecontroller/index.jsx

@@ -1,20 +1,24 @@
import React, {Component} from 'react'
import { Modal, Button, Row, Col, Input, Icon, message, Tabs, Empty, Pagination, notification } from 'antd'
import { Modal, Button, Row, Col, Input, message, Tabs, Empty, Pagination, notification, Typography } from 'antd'
import { PlusOutlined, CopyOutlined, EditOutlined, DeleteOutlined, PictureOutlined } from '@ant-design/icons'

import Api from '@/api'
import Utils from '@/utils/utils.js'
import asyncComponent from '@/utils/asyncComponent'
import { minkeIconSystem } from '@/utils/option.js'
import MkIcon from '@/components/mk-icon'
import './index.scss'

const { Search } = Input
const { confirm } = Modal
const { TabPane } = Tabs
const { Paragraph } = Typography

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

class PasteController extends Component {
class SourceController extends Component {
  state = {
    visible: false,
    editvisible: false,
@@ -29,25 +33,48 @@
    colorlist: [],
    piclist: [],
    vidlist: [],
    iconlist: [...minkeIconSystem.direction, ...minkeIconSystem.edit, ...minkeIconSystem.normal, ...minkeIconSystem.data, ...minkeIconSystem.hint],
    picIndex: 1,
    vidIndex: 1,
  }

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

    try {
      pictures = JSON.parse(pictures)
      videos = JSON.parse(videos)
      colorlist = JSON.parse(colorlist)
    } catch (e) {
      pictures = []
      videos = []
      colorlist = []
    }
    deffers.push(this.getSource('image', 'app_pictures', 0))
    deffers.push(this.getSource('video', 'app_videos', 50))
    deffers.push(this.getSource('color', 'app_colors', 100))
    
    Promise.all(deffers).then(result => {
      this.open(...result)
    })
  }

  getSource = (type, sessionName, delay) => {
    return new Promise(resolve => {
      if (window.GLOB[sessionName]) {
        resolve(window.GLOB[sessionName])
      } else {
        let param = {
          func: 's_url_db_adduptdel',
          PageIndex: 0,  // 0 代表全部
          PageSize: 0,   // 0 代表全部
          type: 'search',
          typecharone: type
        }
        setTimeout(() => {
          Api.getCloudConfig(param).then(res => {
            let data = res.data || []
            window.GLOB[sessionName] = data
  
            resolve(data)
          })
        }, delay)
      }
    })
  }

  open = (pictures, videos, colorlist) => {
    let filpictures = pictures
    let filvideos = videos

@@ -86,7 +113,7 @@
        res.id = Utils.getuuid()
      }

      Api.getSystemConfig({
      Api.getCloudConfig({
        func: 's_url_db_adduptdel',
        id: res.id,
        PageIndex: 0, // 0 代表全部
@@ -98,12 +125,13 @@
      }).then(result => {
        if (result.status) {
          if (card.typecharone === 'image') {
            sessionStorage.setItem('app_pictures', JSON.stringify(result.data || []))
            window.GLOB.app_pictures = result.data || []
            this.resetPicture(result.data || [])
          } else if (card.typecharone === 'video') {
            sessionStorage.setItem('app_videos', JSON.stringify(result.data || []))
            window.GLOB.app_videos = result.data || []
            this.resetVideo(result.data || [])
          } else if (card.typecharone === 'color') {
            window.GLOB.app_colors = result.data || []
            sessionStorage.setItem('app_colors', JSON.stringify(result.data || []))
            this.resetColor(result.data || [])
          }
@@ -133,14 +161,14 @@
  }

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

    confirm({
      title: '确定删除吗？',
      content: '',
      onOk() {
        return new Promise((resolve) => {
          Api.getSystemConfig({
          Api.getCloudConfig({
            func: 's_url_db_adduptdel',
            id: item.id,
            PageIndex: 0, // 0 代表全部
@@ -152,14 +180,15 @@
          }).then(res => {
            if (res.status) {
              if (item.typecharone === 'image') {
                sessionStorage.setItem('app_pictures', JSON.stringify(res.data || []))
                _this.resetPicture(res.data || [])
                window.GLOB.app_pictures = res.data || []
                that.resetPicture(res.data || [])
              } else if (item.typecharone === 'video') {
                sessionStorage.setItem('app_videos', JSON.stringify(res.data || []))
                _this.resetVideo(res.data || [])
                window.GLOB.app_videos = res.data || []
                that.resetVideo(res.data || [])
              } else if (item.typecharone === 'color') {
                window.GLOB.app_colors = res.data || []
                sessionStorage.setItem('app_colors', JSON.stringify(res.data || []))
                _this.resetColor(res.data || [])
                that.resetColor(res.data || [])
              }
            } else {
              notification.warning({
@@ -231,14 +260,13 @@
  }
  
  render() {
    const { visible, editvisible, card, filpictures, filvideos, piclist, vidlist, imageKey, videoKey, pageSize, picIndex, vidIndex, colorlist } = this.state
    const { visible, editvisible, card, filpictures, filvideos, piclist, vidlist, imageKey, videoKey, pageSize, picIndex, vidIndex, colorlist, iconlist } = this.state

    return (
      <div style={{display: 'inline-block'}}>
        <Button className="mk-border-purple" icon="picture" onClick={this.trigger}>资源管理</Button>
      <>
        <Button className="mk-border-purple" onClick={this.trigger}><PictureOutlined /> 资源管理</Button>
        <Modal
          title="粘贴"
          wrapClassName="picture-control-model"
          wrapClassName="mk-pop-modal picture-control-model"
          visible={visible}
          width={1200}
          maskClosable={false}
@@ -257,8 +285,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 className="picture-plus mk-green" onClick={() => this.handleSource({typecharone: 'image'})}>
                    <PlusOutlined /> 添加
                  </Button>
                </Col>
              </Row>
@@ -267,12 +295,12 @@
                  <Col span={4} key={item.id}>
                    <div className="image-video-box">
                      <div className="image-video-box-body">
                        <Image url={item.linkurl} />
                        <Image url={item.linkurl.replace(/@mywebsite@\//ig, window.GLOB.baseurl)} />
                      </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)}/>
                        <CopyOutlined onClick={() => this.copySource(item)}/>
                        <EditOutlined onClick={() => this.handleSource(item)}/>
                        <DeleteOutlined onClick={() => this.deleteSource(item)}/>
                      </div>
                    </div>
                    <p className="image-video-remark">{item.remark}</p>
@@ -288,8 +316,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 className="picture-plus mk-green" onClick={() => this.handleSource({typecharone: 'video'})}>
                    <PlusOutlined /> 添加
                  </Button>
                </Col>
              </Row>
@@ -301,9 +329,9 @@
                        <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)}/>
                        <CopyOutlined onClick={() => this.copySource(item)}/>
                        <EditOutlined onClick={() => this.handleSource(item)}/>
                        <DeleteOutlined onClick={() => this.deleteSource(item)}/>
                      </div>
                    </div>
                    <p className="image-video-remark">{item.remark}</p>
@@ -317,8 +345,8 @@
              <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'})}>
                    添加
                  {colorlist.length < 25 ? <Button className="picture-plus mk-green" onClick={() => this.handleSource({typecharone: 'color'})}>
                    <PlusOutlined /> 添加
                  </Button> : null}
                </Col>
              </Row>
@@ -329,14 +357,24 @@
                      <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)}/>
                        <CopyOutlined onClick={() => this.copySource(item)}/>
                        <DeleteOutlined onClick={() => this.deleteSource(item)}/>
                      </div>
                    </div>
                    <p className="image-video-remark">{item.remark}</p>
                  </Col>
                ))}
                {!colorlist.length ? <Empty description={null}/> : null}
              </Row>
            </TabPane>
            <TabPane tab="图标库" key="icon">
              <Row gutter={16}>
                {iconlist.map(item => (
                  <Col className="icon-wrap" span={4} key={item}>
                    <MkIcon type={item} />
                    <Paragraph copyable={{ text: item }}>{item}</Paragraph>
                  </Col>
                ))}
              </Row>
            </TabPane>
          </Tabs>
@@ -353,9 +391,9 @@
        >
          <EditForm card={card} wrappedComponentRef={(inst) => this.editFormRef = inst} inputSubmit={this.save}/>
        </Modal>
      </div>
      </>
    )
  }
}

export default PasteController
export default SourceController