2022-10-08

king

2022-10-08 2ccd33975abf91f9a7929ca8ed6fc03d74ee424d

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import React, { useState } from 'react'
import { useDrop } from 'react-dnd'
import update from 'immutability-helper'
import { Modal } from 'antd'
 
import Utils from '@/utils/utils.js'
import Card from './card'
import './index.scss'
 
const { confirm } = Modal
 
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) {
    setCards(menu.components)
  }
  
  const findCard = id => {
    const card = cards.filter(c => `${c.uuid}` === id)[0]
    return {
      card,
      index: cards.indexOf(card),
    }
  }
 
  const updateConfig = (element) => {
    const _cards = cards.map(item => item.uuid === element.uuid ? element : item)
    handleList({...menu, components: _cards})
    setCards(_cards)
  }
 
  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 ? '当前组件中含有子组件！' : '',
      onOk() {
        const _cards = cards.filter(item => item.uuid !== card.uuid)
        handleList({...menu, components: _cards})
        setCards(_cards)
      },
      onCancel() {}
    })
  }
 
  const [, drop] = useDrop({
    accept: 'menu',
    drop(item) {
      if (item.hasOwnProperty('originalIndex') || item.added) {
        delete item.added // 删除组件添加标记
        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 // 新添加标志，用于初始化
      }
      
      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}`)
      const _cards = update(cards, { $splice: [[overIndex + 1, 0, newcard]] })
 
      handleList({...menu, components: _cards})
      setCards(_cards)
    }
  })
 
  return (
    <div ref={drop} className="table-shell-inner" style={menu.style}>
      <div className="ant-row">
        {cards.map(card => (
          <Card
            id={card.uuid}
            key={card.uuid}
            card={card}
            moveCard={moveCard}
            delCard={deleteCard}
            findCard={findCard}
            updateConfig={updateConfig}
          />
        ))}
      </div>
    </div>
  )
}
export default Container