From e1cee96b38805bcccf48e7bcb9d296f2bc54c720 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 24 一月 2025 11:10:32 +0800 Subject: [PATCH] 2025-01-24 --- src/menu/menushell/index.jsx | 91 +++++++++++++++++++++++++++++++++------------ 1 files changed, 66 insertions(+), 25 deletions(-) diff --git a/src/menu/menushell/index.jsx b/src/menu/menushell/index.jsx index 4e4541d..6c73b42 100644 --- a/src/menu/menushell/index.jsx +++ b/src/menu/menushell/index.jsx @@ -1,6 +1,5 @@ import React, { useState } from 'react' import { useDrop } from 'react-dnd' -import { is, fromJS } from 'immutable' import update from 'immutability-helper' import { Empty, notification, Modal } from 'antd' @@ -10,17 +9,16 @@ const { confirm } = Modal -const Container = ({menu, handleList, doubleClickCard }) => { - let target = null - +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 (!is(fromJS(cards), fromJS(menu.components))) { + if (menu.components.length > cards.length) { setCards(menu.components) } @@ -32,12 +30,29 @@ } } - const hasDrop = (item) => { - target = item + const updateConfig = (element) => { + const _cards = cards.map(item => item.uuid === element.uuid ? element : item) + handleList({...menu, components: _cards}) + setCards(_cards) } - const updateConfig = (element) => { - handleList({...menu, components: cards.map(item => item.uuid === element.uuid ? element : item)}) + const unGroup = (id) => { + let { card, index } = findCard(`${id}`) + let components = [...card.components].map(item => { + if (item.wrap) { + item.wrap.width = card.width + item.width = card.width + } else if (item.plot) { + item.plot.width = card.width + item.width = card.width + } + return item + }) + card.components = [] + + const _cards = update(cards, { $splice: [[index, 1, card, ...components]] }) + + handleList({...menu, components: _cards}) } const deleteCard = (id) => { @@ -53,10 +68,12 @@ } confirm({ - title: `纭畾鍒犻櫎銆�${card.setting.name}銆嬪悧锛焋, + title: `纭畾鍒犻櫎銆�${card.name}銆嬪悧锛焋, content: hasComponent ? '褰撳墠缁勪欢涓惈鏈夊瓙缁勪欢锛�' : '', onOk() { - handleList({...menu, components: cards.filter(item => item.uuid !== card.uuid)}) + const _cards = cards.filter(item => item.uuid !== card.uuid) + handleList({...menu, components: _cards}) + setCards(_cards) }, onCancel() {} }) @@ -69,6 +86,7 @@ delete item.added // 鍒犻櫎缁勪欢娣诲姞鏍囪 return } + if (item.component === 'search') { // 鎼滅储缁勪欢涓嶅彲閲嶅娣诲姞 if (cards.filter(card => card.type === 'search').length > 0) { notification.warning({ @@ -83,15 +101,34 @@ let name = '' let names = { bar: '鏌辩姸鍥�', + chart: '鍥捐〃', line: '鎶樼嚎鍥�', tabs: '鏍囩缁�', + pie: '楗煎浘', + search: '鎼滅储', + table: '琛ㄦ牸', + group: '鍒嗙粍', + editor: '瀵屾枃鏈�', + code: '鑷畾涔�', + carousel: '杞挱', + form: '琛ㄥ崟', + dashboard: '浠〃鐩�', + scatter: '鏁g偣鍥�', + tree: '鏍戝舰鍒楄〃', + balcony: '娴姩鍗�', + timeline: '鏃堕棿杞�', + antvG6: '鏍戝浘', + antvX6: '娴佺▼鍥�', + iframe: 'iframe', + module: '妯″潡', + calendar: '鏃ュ巻', card: '鍗$墖' } let i = 1 while (!name && names[item.component]) { let _name = names[item.component] + i - if (menu.components.filter(com => com.setting && com.setting.name === _name).length === 0) { + if (menu.components.filter(com => com.name === _name).length === 0) { name = _name } i++ @@ -101,30 +138,35 @@ uuid: Utils.getuuid(), type: item.component, subtype: item.subtype, + config: item.config, + width: item.width || 24, name: name, - floor: 1, // 缁勪欢鐨勫眰绾� 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({...menu, components: _cards}) - target = null + 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="menu-shell-inner" style={menu.style}> + <div ref={drop} className="menu-shell-inner" id="menu-shell-inner" style={style}> <div className="ant-row"> {cards.map(card => ( <Card @@ -133,10 +175,9 @@ card={card} moveCard={moveCard} delCard={deleteCard} + unGroup={unGroup} findCard={findCard} - hasDrop={hasDrop} updateConfig={updateConfig} - doubleClickCard={doubleClickCard} /> ))} </div> -- Gitblit v1.8.0