From f6626b05f1275cc2f8ca77f773d4f6a6af1b0a89 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期一, 21 十一月 2022 16:11:55 +0800 Subject: [PATCH] 2022-11-21 --- src/menu/tableshell/index.jsx | 79 ++++++++++++++++++++++++++++++--------- 1 files changed, 60 insertions(+), 19 deletions(-) diff --git a/src/menu/tableshell/index.jsx b/src/menu/tableshell/index.jsx index 63fefeb..defc741 100644 --- a/src/menu/tableshell/index.jsx +++ b/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,15 +93,15 @@ const [, drop] = useDrop({ accept: 'menu', drop(item) { - if (item.added) { + if (item.added || item.index) { delete item.added // 鍒犻櫎缁勪欢娣诲姞鏍囪 + delete item.dropTargetId return } let newcard = { uuid: Utils.getuuid(), type: 'tabs', - subtype: 'tabs', isNew: true } @@ -81,13 +117,17 @@ const { index: overIndex } = findCard(`${targetId}`) const _cards = update(cards, { $splice: [[overIndex + 1, 0, newcard]] }) + // setCards(_cards) handleList({...menu, components: _cards}) - setCards(_cards) } }) + let style = JSON.stringify(menu.style || {}) + style = style.replace(/@mywebsite@\//ig, window.GLOB.baseurl) + style = JSON.parse(style) + return ( - <div ref={drop} className="table-shell-inner" style={menu.style}> + <div ref={drop} className="table-shell-inner" style={style}> <div className="ant-row"> {cards.map(card => ( <Card @@ -97,6 +137,7 @@ delCard={deleteCard} findCard={findCard} updateConfig={updateConfig} + switchConfig={switchConfig} /> ))} </div> -- Gitblit v1.8.0