2022-10-22

king

2022-10-22 03a22ec6f9ad7303d10b4c65bb5bc6fa5cbd448a

 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'

@@ -12,7 +13,7 @@
const Container = ({menu, handleList }) => {
  const [cards, setCards] = useState(menu.components)

  if (menu.components.length > cards.length) {
  if (!is(fromJS(cards), fromJS(menu.components))) {
    setCards(menu.components)
  }
  
@@ -25,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() {}
    })
@@ -57,7 +93,7 @@
  const [, drop] = useDrop({
    accept: 'menu',
    drop(item) {
      if (item.added) {
      if (item.added || item.index) {
        delete item.added // 删除组件添加标记
        return
      }
@@ -65,7 +101,6 @@
      let newcard = {
        uuid: Utils.getuuid(),
        type: 'tabs',
        subtype: 'tabs',
        isNew: true
      }
      
@@ -81,8 +116,8 @@
      const { index: overIndex } = findCard(`${targetId}`)
      const _cards = update(cards, { $splice: [[overIndex + 1, 0, newcard]] })

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

@@ -97,6 +132,7 @@
            delCard={deleteCard}
            findCard={findCard}
            updateConfig={updateConfig}
            switchConfig={switchConfig}
          />
        ))}
      </div>