king
2023-08-27 da64ab0923bf8817fc8599a6e37b953ce38f64c8
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'
@@ -16,9 +15,10 @@
    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)
  }
  
@@ -31,7 +31,28 @@
  }
  const updateConfig = (element) => {
    handleList({...menu, components: cards.map(item => item.uuid === element.uuid ? element : item)})
    const _cards = cards.map(item => item.uuid === element.uuid ? element : item)
    handleList({...menu, components: _cards})
    setCards(_cards)
  }
  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) => {
@@ -50,7 +71,9 @@
      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() {}
    })
@@ -63,6 +86,7 @@
        delete item.added // 删除组件添加标记
        return
      }
      if (item.component === 'search') { // 搜索组件不可重复添加
        if (cards.filter(card => card.type === 'search').length > 0) {
          notification.warning({
@@ -77,10 +101,27 @@
      let name = ''
      let names = {
        bar: '柱状图',
        chart: '图表',
        line: '折线图',
        tabs: '标签组',
        pie: '饼图',
        search: '搜索',
        table: '表格',
        group: '分组',
        editor: '富文本',
        code: '自定义',
        carousel: '轮播',
        form: '表单',
        dashboard: '仪表盘',
        scatter: '散点图',
        tree: '树形列表',
        balcony: '浮动卡',
        timeline: '时间轴',
        antvG6: '树图',
        antvX6: '流程图',
        iframe: 'iframe',
        module: '模块',
        calendar: '日历',
        card: '卡片'
      }
      let i = 1
@@ -104,23 +145,29 @@
        isNew: true // 新添加标志,用于初始化
      }
      
      let targetId = '0'
      let targetId = ''
      if (item.dropTargetId) {
        targetId = item.dropTargetId
        delete item.dropTargetId
      } else if (cards.length > 0) {
        targetId = cards[cards.length - 1].uuid
        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)
    }
  })
  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
@@ -129,6 +176,7 @@
            card={card}
            moveCard={moveCard}
            delCard={deleteCard}
            unGroup={unGroup}
            findCard={findCard}
            updateConfig={updateConfig}
          />