2022-10-25

king

2022-10-25 5891206952e2ff63e87aed2f47df5324b019d32e

 src/menu/tableshell/index.jsx

@@ -1,5 +1,6 @@
import React, { useState } from 'react'
import { useDrop } from 'react-dnd'
import { is, fromJS } from 'immutable'
import update from 'immutability-helper'
import { Modal } from 'antd'

@@ -11,14 +12,8 @@

const Container = ({menu, handleList }) => {
  const [cards, setCards] = useState(menu.components)
  const moveCard = (id, atIndex) => {
    const { card, index } = findCard(id)
    const _cards = update(cards, { $splice: [[index, 1], [atIndex, 0, card]] })
    handleList({...menu, components: _cards})
    setCards(_cards)
  }

  if (menu.components.length > cards.length) {
  if (!is(fromJS(cards), fromJS(menu.components))) {
    setCards(menu.components)
  }
  
@@ -31,30 +26,65 @@
  }

  const updateConfig = (element) => {
    const _cards = cards.map(item => item.uuid === element.uuid ? element : item)
    let _cards = cards.map(item => item.uuid === element.uuid ? element : item)

    if (element.type === 'tabs' && element.subtabs.length === 0) {
      _cards = cards.filter(item => item.uuid !== element.uuid)
    }

    handleList({...menu, components: _cards})
    setCards(_cards)
  }

  const switchConfig = (dragKey, hoverKey, callback) => {
    let _tab = null

    let hoverTabsIndex = 0
    let hoverIndex = 0
    let _cards = cards.map((item, pindex) => {
      if (item.type === 'tabs') {
        item.subtabs = item.subtabs.filter((tab, index) => {
          if (tab.uuid === dragKey) {
            _tab = tab
            return false
          }
          if (tab.uuid === hoverKey) {
            hoverTabsIndex = pindex
            hoverIndex = index
          }
          return true
        })
      }
      return item
    })

    if (hoverTabsIndex && _tab) {
      _cards[hoverTabsIndex].subtabs.splice(hoverIndex + 1, 0, _tab)
    } else {
      return
    }

    _cards = _cards.filter(item => {
      if (item.type !== 'tabs') return true
      if (item.subtabs.length === 0) return false

      return true
    })

    handleList({...menu, components: _cards})

    setTimeout(() => {
      callback()
    }, 100)
  }

  const deleteCard = (id) => {
    const { card } = findCard(id)

    let hasComponent = false
    if (card.type === 'tabs') {
      card.subtabs.forEach(tab => {
        if (tab.components.length > 0) {
          hasComponent = true
        }
      })
    }

    confirm({
      title: `确定删除《${card.name}》吗？`,
      content: hasComponent ? '当前组件中含有子组件！' : '',
      title: `确定删除子表组吗？`,
      onOk() {
        const _cards = cards.filter(item => item.uuid !== card.uuid)
        handleList({...menu, components: _cards})
        setCards(_cards)
      },
      onCancel() {}
    })
@@ -63,35 +93,16 @@
  const [, drop] = useDrop({
    accept: 'menu',
    drop(item) {
      if (item.hasOwnProperty('originalIndex') || item.added) {
      if (item.added || item.index) {
        delete item.added // 删除组件添加标记
        delete item.dropTargetId
        return
      }

      let name = ''
      let names = {
        tabs: '标签组'
      }
      let i = 1
      
      while (!name && names[item.component]) {
        let _name = names[item.component] + i
        if (menu.components.filter(com => com.name === _name).length === 0) {
          name = _name
        }
        i++
      }

      let newcard = {
        uuid: Utils.getuuid(),
        type: item.component,
        subtype: item.subtype,
        config: item.config,
        width: item.width || 24,
        dataName: Utils.getdataName(),
        name: name,
        floor: 1,   // 组件的层级
        isNew: true // 新添加标志，用于初始化
        type: 'tabs',
        isNew: true
      }
      
      let targetId = ''
@@ -106,8 +117,8 @@
      const { index: overIndex } = findCard(`${targetId}`)
      const _cards = update(cards, { $splice: [[overIndex + 1, 0, newcard]] })

      // setCards(_cards)
      handleList({...menu, components: _cards})
      setCards(_cards)
    }
  })

@@ -119,10 +130,10 @@
            id={card.uuid}
            key={card.uuid}
            card={card}
            moveCard={moveCard}
            delCard={deleteCard}
            findCard={findCard}
            updateConfig={updateConfig}
            switchConfig={switchConfig}
          />
        ))}
      </div>