2023-11-14

king

2023-11-14 ef8acbf3859bd13e759fbb9b8ba726039c1fb2c5

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
import React from 'react'
import { useDrop } from 'react-dnd'
 
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'
 
const AntvTabs = asyncComponent(() => import('@/menu/components/tabs/table-tabs'))
const BaseTable = asyncComponent(() => import('@/menu/components/table/base-table'))
 
const Card = ({ id, card, delCard, updateConfig, switchConfig }) => {
  const [, drop] = useDrop({
    accept: 'menu',
    canDrop: () => true,
    drop: (item) => {
      item.dropTargetId = id
    }
  })
 
  const getCardComponent = () => {
    if (card.type === 'table') {
      return (<BaseTable card={card} updateConfig={updateConfig}/>)
    } else if (card.type === 'tabs') {
      return (<AntvTabs tabs={card} updateConfig={updateConfig} switchConfig={switchConfig} deletecomponent={delCard}/>)
    }
  }
  return (
    <div className={'ant-col mk-component-card ant-col-' + (card.width || 24)} ref={node => drop(node)}>
      {getCardComponent()}
    </div>
  )
}
export default Card