From f3167f8371d19d0ea8fe7d0e7af5517ff0b08cd2 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 07 四月 2021 23:25:29 +0800
Subject: [PATCH] 2021-04-07
---
src/mob/mobshell/index.jsx | 136 ++++++++++++++++++++++++++++++++++-----------
1 files changed, 102 insertions(+), 34 deletions(-)
diff --git a/src/mob/mobshell/index.jsx b/src/mob/mobshell/index.jsx
index 2dd4b00..ee23621 100644
--- a/src/mob/mobshell/index.jsx
+++ b/src/mob/mobshell/index.jsx
@@ -1,23 +1,23 @@
import React, { useState } from 'react'
import { useDrop } from 'react-dnd'
-import { is, fromJS } from 'immutable'
import update from 'immutability-helper'
-import { message, Empty } from 'antd'
+import { Empty, notification, Modal } from 'antd'
import Utils from '@/utils/utils.js'
+import MKEmitter from '@/utils/events.js'
+import MenuUtils from '@/utils/utils-custom.js'
import Card from './card'
import './index.scss'
-const Container = ({config, editId, handleList, editCard, deleteCard, doubleClickCard }) => {
- const [cards, setCards] = useState(config.components)
+const { confirm } = Modal
+
+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({...config, components: _cards})
- }
-
- if (!is(fromJS(cards), fromJS(config.components))) {
- setCards(config.components)
+ handleList({...menu, components: _cards})
+ setCards(_cards)
}
const findCard = id => {
@@ -29,27 +29,94 @@
}
const updateConfig = (element) => {
- handleList({...config, 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 deleteCard = (id) => {
+ const { card } = findCard(id)
+
+ let hasComponent = false
+ if (card.type === 'tabs') {
+ card.subtabs.forEach(tab => {
+ if (tab.components.length > 0) {
+ hasComponent = true
+ }
+ })
+ }
+
+ let uuids = MenuUtils.getDelButtonIds(card)
+
+ confirm({
+ title: `纭畾鍒犻櫎銆�${card.name}銆嬪悧锛焋,
+ content: hasComponent ? '褰撳墠缁勪欢涓惈鏈夊瓙缁勪欢锛�' : '',
+ onOk() {
+ MKEmitter.emit('delButtons', uuids)
+ const _cards = cards.filter(item => item.uuid !== card.uuid)
+ handleList({...menu, components: _cards})
+ setCards(_cards)
+ },
+ onCancel() {}
+ })
}
const [, drop] = useDrop({
- accept: 'mob',
+ accept: 'menu',
drop(item) {
- if (item.hasOwnProperty('originalIndex')) {
+ if (item.hasOwnProperty('originalIndex') || item.added) {
+ delete item.added // 鍒犻櫎缁勪欢娣诲姞鏍囪
return
}
- if (cards.length > 0 && cards[0].type === 'login') {
- message.warning('鐧诲綍椤典笉鍙坊鍔犲叾浠栧厓绱狅紒')
- return
+ if (item.component === 'search') { // 鎼滅储缁勪欢涓嶅彲閲嶅娣诲姞
+ if (cards.filter(card => card.type === 'search').length > 0) {
+ notification.warning({
+ top: 92,
+ message: '鎼滅储鏉′欢涓嶅彲閲嶅娣诲姞锛�',
+ duration: 5
+ })
+ return
+ }
+ }
+
+ let name = ''
+ let names = {
+ bar: '鏌辩姸鍥�',
+ line: '鎶樼嚎鍥�',
+ tabs: '鏍囩缁�',
+ pie: '楗煎浘',
+ search: '鎼滅储',
+ table: '琛ㄦ牸',
+ group: '鍒嗙粍',
+ editor: '瀵屾枃鏈�',
+ code: '鑷畾涔�',
+ carousel: '杞挱',
+ form: '琛ㄥ崟',
+ card: '鍗＄墖'
+ }
+ let i = 1
+
+ while (!name && names[item.component]) {
+ let _name = names[item.component] + i
+ if (menu.components.filter(com => com.name === _name).length === 0) {
+ name = _name
+ }
+ i++
}
let newcard = {
uuid: Utils.getuuid(),
- type: item.componentType,
+ type: item.component,
subtype: item.subtype,
+ config: item.config,
+ width: item.width || 24,
+ dataName: Utils.getdataName(),
+ name: name,
+ floor: 1, // 缁勪欢鐨勫眰绾�
+ isNew: true // 鏂版坊鍔犳爣蹇楋紝鐢ㄤ簬鍒濆鍖�
}
-
+
let targetId = ''
if (item.dropTargetId) {
@@ -59,29 +126,29 @@
targetId = cards.slice(-1)[0].uuid
}
- const { index: overIndex } = findCard(`${targetId}`) // cards涓虹┖鏃� overIndex 涓� -1
+ const { index: overIndex } = findCard(`${targetId}`)
const _cards = update(cards, { $splice: [[overIndex + 1, 0, newcard]] })
- handleList({...config, components: _cards})
+ handleList({...menu, components: _cards})
+ setCards(_cards)
}
})
return (
- <div ref={drop} className="mob-shell-inner">
- {cards.map(card => (
- <Card
- id={card.uuid}
- key={card.uuid}
- card={card}
- editId={editId}
- moveCard={moveCard}
- editCard={editCard}
- delCard={deleteCard}
- findCard={findCard}
- updateConfig={updateConfig}
- doubleClickCard={doubleClickCard}
- />
- ))}
+ <div ref={drop} className="mob-shell-inner" id="menu-shell-inner" style={menu.style}>
+ <div className="ant-row">
+ {cards.map(card => (
+ <Card
+ id={card.uuid}
+ key={card.uuid}
+ card={card}
+ moveCard={moveCard}
+ delCard={deleteCard}
+ findCard={findCard}
+ updateConfig={updateConfig}
+ />
+ ))}
+ </div>
{cards.length === 0 ?
<Empty description="璇锋坊鍔犵粍浠�" /> : null
}
@@ -89,3 +156,4 @@
)
}
export default Container
+
--
Gitblit v1.8.0