From ecbe0dc46ce2b8f607b9afd063104adeb7f10fe8 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期二, 30 三月 2021 15:19:31 +0800 Subject: [PATCH] 2021-03-30 --- src/mob/mobshell/card.jsx | 74 ++++++++++++++++++++++++++----------- 1 files changed, 52 insertions(+), 22 deletions(-) diff --git a/src/mob/mobshell/card.jsx b/src/mob/mobshell/card.jsx index 5b7a510..30225a7 100644 --- a/src/mob/mobshell/card.jsx +++ b/src/mob/mobshell/card.jsx @@ -2,56 +2,86 @@ import { useDrag, useDrop } from 'react-dnd' import asyncComponent from '@/utils/asyncComponent' - import './index.scss' -// const Home = asyncComponent(() => import('@/mob/home')) -const MobLogin1 = asyncComponent(() => import('@/mob/components/login/mob-login-1')) -const MobLogin2 = asyncComponent(() => import('@/mob/components/login/mob-login-2')) +const AntvBar = asyncComponent(() => import('@/menu/components/chart/antv-bar')) +const MainSearch = asyncComponent(() => import('@/menu/components/search/main-search')) +const AntvPie = asyncComponent(() => import('@/menu/components/chart/antv-pie')) +const AntvTabs = asyncComponent(() => import('@/menu/components/tabs/antv-tabs')) +const DataCard = asyncComponent(() => import('@/menu/components/card/data-card')) +const PropCard = asyncComponent(() => import('@/menu/components/card/prop-card')) +const CarouselDataCard = asyncComponent(() => import('@/menu/components/carousel/data-card')) +const CarouselPropCard = asyncComponent(() => import('@/menu/components/carousel/prop-card')) +const TableCard = asyncComponent(() => import('@/menu/components/card/table-card')) +const NormalTable = asyncComponent(() => import('@/menu/components/table/normal-table')) +const NormalForm = asyncComponent(() => import('@/menu/components/form/normal-form')) +const NormalGroup = asyncComponent(() => import('@/menu/components/group/normal-group')) +const CodeSandbox = asyncComponent(() => import('@/menu/components/code/sandbox')) -const Card = ({ id, card, moveCard, findCard, editId, editCard, delCard, doubleClickCard, updateConfig }) => { +const Card = ({ id, card, moveCard, findCard, delCard, updateConfig }) => { const originalIndex = findCard(id).index const [{ isDragging }, drag] = useDrag({ - item: { type: 'mob', id, originalIndex }, + item: { type: 'menu', id, originalIndex, floor: card.floor }, collect: monitor => ({ isDragging: monitor.isDragging(), }), }) const [, drop] = useDrop({ - accept: 'mob', + accept: 'menu', canDrop: () => true, drop: (item) => { - const { id: draggedId, originalIndex } = item - + const { id: draggedId, originalIndex, floor } = item if (originalIndex === undefined) { item.dropTargetId = id - } else if (draggedId && draggedId !== id) { + } else if (draggedId && floor === card.floor) { + if (draggedId === id) return + const { index: originIndex } = findCard(draggedId) + + if (originIndex === -1) return + const { index: overIndex } = findCard(id) + moveCard(draggedId, overIndex) } } }) let style = { opacity: 1} - if (isDragging && card.type !== 'login') { + if (isDragging) { style = { opacity: 0.3} - } - if (card.type === 'login') { - style.height = '100%' } const getCardComponent = () => { - if (card.type === 'login') { - if (card.subtype === 'mob-login-1') { - return (<MobLogin1 card={card} triggerEdit={editCard} editId={editId} onDoubleClick={doubleClickCard} updateConfig={updateConfig} />) - } else if (card.subtype === 'mob-login-2') { - return (<MobLogin2 card={card} triggerEdit={editCard} editId={editId} onDoubleClick={doubleClickCard} updateConfig={updateConfig} />) - } + if (card.type === 'bar' || card.type === 'line') { + return (<AntvBar card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) + } else if (card.type === 'search') { + return (<MainSearch card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) + } else if (card.type === 'pie') { + return (<AntvPie card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) + } else if (card.type === 'form') { + return (<NormalForm card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) + } else if (card.type === 'tabs') { + return (<AntvTabs tabs={card} updateConfig={updateConfig} deletecomponent={delCard}/>) + } else if (card.type === 'card' && card.subtype === 'datacard') { + return (<DataCard card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) + } else if (card.type === 'card' && card.subtype === 'propcard') { + return (<PropCard card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) + } else if (card.type === 'carousel' && card.subtype === 'datacard') { + return (<CarouselDataCard card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) + } else if (card.type === 'carousel' && card.subtype === 'propcard') { + return (<CarouselPropCard card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) + } else if (card.type === 'table' && card.subtype === 'tablecard') { + return (<TableCard card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) + } else if (card.type === 'table' && card.subtype === 'normaltable') { + return (<NormalTable card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) + } else if (card.type === 'group' && card.subtype === 'normalgroup') { + return (<NormalGroup group={card} updateConfig={updateConfig} deletecomponent={delCard}/>) + } else if (card.type === 'code') { + return (<CodeSandbox card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) } } - return ( - <div className="mk-component-card" ref={node => drag(drop(node))} style={style}> + <div className={'ant-col mk-component-card ant-col-' + (card.width || 24)} ref={node => drag(drop(node))} style={style}> {getCardComponent()} </div> ) -- Gitblit v1.8.0