2022-02-08

king

2022-02-08 f393af9623c26ae177a3f69b8676afc4e23bff8d

 src/menu/components/tabs/tabcomponents/index.jsx

@@ -2,15 +2,17 @@
import { useDrop } from 'react-dnd'
import { is, fromJS } from 'immutable'
import update from 'immutability-helper'
import { Empty, notification } from 'antd'
import { Empty, notification, Modal } from 'antd'

import Utils from '@/utils/utils.js'
import MKEmitter from '@/utils/events.js'
import MenuUtils from '@/utils/utils-custom.js'
import Card from './card'
import './index.scss'

const Container = ({menu, config, handleList, deleteCard, doubleClickCard }) => {
  let target = null
const { confirm } = Modal

const Container = ({ config, handleList }) => {
  const [cards, setCards] = useState(config.components)
  const moveCard = (id, atIndex) => {
    const { card, index } = findCard(id)
@@ -30,12 +32,36 @@
    }
  }

  const hasDrop = (item) => {
    target = item
  }

  const updateConfig = (element) => {
    handleList({...config, components: cards.map(item => item.uuid === element.uuid ? element : item)})
  }

  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
        }
      })
    }

    let uuids = MenuUtils.getDelButtonIds(card)

    confirm({
      title: `确定删除《${card.name}》吗？`,
      content: hasComponent ? '当前组件中含有子组件！' : '',
      onOk() {
        handleList({...config, components: cards.filter(item => item.uuid !== card.uuid)})

        if (uuids.length === 0) return
        
        MKEmitter.emit('delButtons', uuids)
      },
      onCancel() {}
    })
  }

  const [, drop] = useDrop({
@@ -43,7 +69,10 @@
    drop(item) {
      if (item.hasOwnProperty('originalIndex') || item.added) {
        return
      } else if (['login', 'navbar', 'topbar'].includes(item.component)) {
        return
      }
      
      item.added = true

      if (item.component === 'search') { // 搜索组件不可重复添加
@@ -55,30 +84,75 @@
          })
          return
        }
      } else if (item.component === 'tabs') {
        let floor = MenuUtils.getFloor(config.parentId)
        if (floor >= 3 ) {
          notification.warning({
            top: 92,
            message: '标签页最多为三重结构！',
            duration: 5
          })
          return
        }
      }

      let name = ''
      let names = {
        bar: '柱状图',
        chart: '图表',
        line: '折线图',
        tabs: '标签组',
        pie: '饼图',
        search: '搜索',
        table: '表格',
        group: '分组',
        editor: '富文本',
        code: '自定义',
        carousel: '轮播',
        form: '表单',
        dashboard: '仪表盘',
        scatter: '散点图',
        tree: '树形列表',
        balcony: '浮动卡',
        timeline: '时间轴',
        card: '卡片'
      }
      let i = 1
      
      while (!name && names[item.component]) {
        let _name = names[item.component] + i
        if (config.components.filter(com => com.name === _name).length === 0) {
          name = _name
        }
        i++
      }
      
      let newcard = {
        uuid: Utils.getuuid(),
        tabId: config.uuid,
        parentId: config.parentId,
        type: item.component,
        subtype: item.subtype,
        floor: 2,   // 组件的层级
        isNew: true // 新添加标志，用于初始化
        config: item.config,
        width: item.width || 24,
        dataName: Utils.getdataName(),
        name: name,
        isNew: true                                   // 新添加标志，用于初始化
      }
      
      let targetId = cards.length > 0 ? cards[cards.length - 1].uuid : 0
      if (target) {
        targetId = target.uuid
      let targetId = ''

      if (item.dropTargetId) {
        targetId = item.dropTargetId
        delete item.dropTargetId
      } else if (cards.length > 0) {
        targetId = cards.slice(-1)[0].uuid
      }

      const { index: overIndex } = findCard(`${targetId}`)
      let targetIndex = overIndex

      targetIndex++

      const _cards = update(cards, { $splice: [[targetIndex, 0, newcard]] })
      const _cards = update(cards, { $splice: [[overIndex + 1, 0, newcard]] })

      handleList({...config, components: _cards})
      target = null
    }
  })

@@ -88,15 +162,12 @@
        <Card
          id={card.uuid}
          key={card.uuid}
          menu={menu}
          config={config}
          card={card}
          moveCard={moveCard}
          delCard={deleteCard}
          findCard={findCard}
          hasDrop={hasDrop}
          updateConfig={updateConfig}
          doubleClickCard={doubleClickCard}
        />
      ))}
      {cards.length === 0 ?