| | |
| | | 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' |
| | | |
| | |
| | | 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) |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | 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) => { |
| | |
| | | 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() {} |
| | | }) |
| | |
| | | delete item.added // 删除组件添加标记 |
| | | return |
| | | } |
| | | |
| | | if (item.component === 'search') { // 搜索组件不可重复添加 |
| | | if (cards.filter(card => card.type === 'search').length > 0) { |
| | | notification.warning({ |
| | |
| | | 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 |
| | |
| | | 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 |
| | |
| | | card={card} |
| | | moveCard={moveCard} |
| | | delCard={deleteCard} |
| | | unGroup={unGroup} |
| | | findCard={findCard} |
| | | updateConfig={updateConfig} |
| | | /> |