2022-10-19

king

2022-10-19 8f394e7ef20cc0abba3f47c23a63b069e9dd0e45

 src/menu/stylecombcontrolbutton/index.jsx

@@ -1,6 +1,5 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Button } from 'antd'
import { FontColorsOutlined } from '@ant-design/icons'

@@ -18,6 +17,10 @@
    type: '',
    components: []
  }

  type = null

  components = {}

  componentDidMount () {
    sessionStorage.setItem('style-control', 'false')
@@ -37,90 +40,76 @@
  }

  submitCombineStyle = (style) => {
    const { components, parent } = this.state

    let keys = components.map(item => item.uuid)
  
    MKEmitter.emit('submitComponentStyle', parent.uuid, keys, style)

    setTimeout(() => {
      keys.forEach(key => {
        document.getElementById(key).classList.add('selected-control-element')
      })
    }, 100)
  }

  clickComponent = (card, _p, _type) => {
    const { menu } = this.props
    const { parent, type } = this.state
    let components = fromJS(this.state.components).toJS()

    if (!parent) {
      let _parent = null

      if (_type === 'cardcell') {
        _parent = _p
        MKEmitter.emit('switchMultiStyle', 'open')
      } else {
        let getParents = (box) => {
          box.components.forEach(item => {
            if (item.type === 'tabs') {
              item.subtabs.forEach(tab => {
                if (tab.components.findIndex(cell => cell.uuid === card.uuid) > -1) {
                  _parent = tab
                } else {
                  getParents(tab)
                }
              })
            } else if (item.type === 'group') {
              if (item.components.findIndex(cell => cell.uuid === card.uuid) > -1) {
                _parent = item
              }
            }
          })
        }
  
        if (menu.components.findIndex(cell => cell.uuid === card.uuid) > -1) {
          _parent = menu
        } else {
          getParents(menu)
        }

        MKEmitter.emit('switchMultiStyle', 'open')
      }

      document.getElementById(card.uuid).classList.add('selected-control-element')

      sessionStorage.setItem('style-control', (_type ? _type : 'component'))

      this.setState({
        type: _type ? _type : 'component',
        parent: _parent,
        components: [card]
    if (this.type === 'component') {
      Object.keys(this.components).forEach((key, i) => {
        setTimeout(() => {
          this.components[key](style)
        }, i * 10)
      })
    } else {
      if (components.findIndex(cell => cell.uuid === card.uuid) > -1) {
        components = components.filter(cell => cell.uuid !== card.uuid)
        document.getElementById(card.uuid).classList.remove('selected-control-element')
      } else if (type === 'cardcell' && parent.elements.findIndex(cell => cell.uuid === card.uuid) > -1) {
        components.push(card)
        document.getElementById(card.uuid).classList.add('selected-control-element')
      }

      if (components.length === 0) {
        MKEmitter.emit('switchMultiStyle', 'close')
        sessionStorage.setItem('style-control', 'true')
      }

      this.setState({
        components: components,
        parent: components.length ? parent : null
      Object.keys(this.components).forEach((key, i) => {
        setTimeout(() => {
          MKEmitter.emit('submitComponentStyle', key, this.components[key], style)
        }, i * 10)
      })
    }
  }

  clickComponent = (id, pid, callback) => {
    if (!this.type) {
      if (pid) {
        this.type = 'cardcell'
      } else {
        this.type = 'component'
      }
    } else if ((this.type === 'cardcell' && !pid) || (this.type === 'component' && pid)) {
      return
    }

    let plus = true
    if (this.type === 'cardcell') {
      if (this.components[pid]) {
        if (this.components[pid].includes(id)) {
          this.components[pid] = this.components[pid].filter(item => item !== id)
          if (this.components[pid].length === 0) {
            delete this.components[pid]
          }
          plus = false
        } else {
          this.components[pid].push(id)
        }
      } else {
        this.components[pid] = [id]
      }
    } else {
      if (this.components[id]) {
        delete this.components[id]
        plus = false
      } else {
        this.components[id] = callback
      }
    }

    if (plus) {
      document.getElementById(id).classList.add('selected-control-element')
      MKEmitter.emit('switchMultiStyle', 'open', this.type)
    } else {
      document.getElementById(id).classList.remove('selected-control-element')
    }

    let length = Object.keys(this.components).length

    if (length === 0) {
      MKEmitter.emit('switchMultiStyle', 'close')
      sessionStorage.setItem('style-control', 'true')
      this.type = null
    } else {
      sessionStorage.setItem('style-control', this.type)
    }
  }

  triggerStyleChange = () => {
    const { label, components } = this.state
    const { label } = this.state

    if (label === '批量调整') {
      document.body.className = 'style-control'
@@ -130,13 +119,23 @@
      document.body.className = ''
      sessionStorage.setItem('style-control', 'false')

      components.forEach(item => {
        document.getElementById(item.uuid).classList.remove('selected-control-element')
      })
      if (this.type === 'cardcell') {
        Object.keys(this.components).forEach(key => {
          this.components[key].forEach(id => {
            document.getElementById(id).classList.remove('selected-control-element')
          })
        })
      } else {
        Object.keys(this.components).forEach(key => {
          document.getElementById(key).classList.remove('selected-control-element')
        })
      }

      MKEmitter.emit('switchMultiStyle', 'close')
      this.components = {}
      this.type = null

      this.setState({label: '批量调整', parent: null, components: []})
      this.setState({label: '批量调整'})
    }
  }