fix:拖动bug

platform/example/src/component/AddStep.tsx

@@ -0,0 +1,24 @@
+import {Dropdown, MenuProps, Space} from "antd";
+import style from "@/component/layout/css/header.module.less";
+import {DownOutlined} from "@ant-design/icons";
+import {menus, stepList, stepMap} from "@/component/step";
+import drapStore from "@/mobx/DrapStore";
+
+console.log(stepList)
+const items: MenuProps['items'] = [...menus];
+
+const onClick: MenuProps['onClick'] = ({ key }) => {
+ // 给容器添加组件
+ // message.info(`Click on item ${key}`);
+ const component = stepMap[key];
+ console.log(key,component)
+ drapStore.addChildren(null,component.defaultDataFunc())
+};
+const AddStep :React.FC= (props)=>{
+ return <Dropdown menu={{ items,onClick }}>
+ <div className={style.addStep} onClick={(e) => e.preventDefault()}>
+ {props.children}
+ </div>
+ </Dropdown>
+}
+export default AddStep

platform/example/src/component/CardItem.tsx

@@ -1,9 +1,12 @@
 import {memo, useRef} from "react";
 import {useDrag, useDrop} from "react-dnd";
 import drapStore from "@/mobx/DrapStore";
-import {Content, StepDragType, StepType} from "@/component/type";
+import {Content, StepDragEnum, StepDragType, StepType} from "@/component/type";
 import style from "./css/DrapItem.module.less"
 import {stepMap} from "@/component/step";
+import lodash from "lodash"
+// import AddStep from "./AddStep";
+import {DownOutlined} from "@ant-design/icons";
 let id = 0
 export const getDropStoreId = (type?:string) =>{
  const DropStore = {
@@ -67,6 +70,10 @@ const CardItem = memo((props:CardItemProps) => {
  // 如果是根组件，不移除自身
  if(props.parent===null){
  return;
+ }
+ // 子组件不移除
+ if(childrenFind(droppedId)){
+ return;
  }
  // 跨组件移动--移除自身
  deleteCard(props.parent,props.data)
@@ -75,6 +82,20 @@ const CardItem = memo((props:CardItemProps) => {
  }),
  [id, originalIndex, moveCard],
  )
+ // 父级是否存在
+ const childrenFind = (id:string)=>{
+ // @ts-ignore
+ if(Array.isArray(props.parent.children)){
+ // @ts-ignore
+ for (let i = 0; i < props.parent.children?.length; i++) {
+ // @ts-ignore
+ if(props.parent.children[i].id===id){
+ return true
+ }
+ }
+ }
+ return false
+ }
  const [{isOver,canDrop,isOverCurrent}, drop] = useDrop(
  () => ({
  accept: StepType.CARD,
@@ -135,8 +156,10 @@ const CardItem = memo((props:CardItemProps) => {
  // @ts-ignore
  const newItem = { ...item, id: String(new Date().getTime()) }
  if(tag!==Propstag){
- // @ts-ignore
+ // 销毁自己
- const newItem = { ...item, id: String(new Date().getTime()) }
+ item.destruction()
+ const newItem = lodash.cloneDeep(item)
+ newItem.id = String(new Date().getTime())
  childrenCreate(newItem)
  }
  return
@@ -158,7 +181,12 @@ const CardItem = memo((props:CardItemProps) => {
  drapStore.updateState()
 
  }
-
+ // const addStepDom = ()=>{
+ // return <AddStep >
+ // <span>新增步骤</span>
+ // <DownOutlined />
+ // </AddStep>
+ // }
  return (
  <div className={style.woodExampleBody}>
  <div ref={(node) => drag(drop(node))} >
@@ -175,11 +203,13 @@ const CardItem = memo((props:CardItemProps) => {
  <div>
  {step&&(<StepComponent updateData={updateData} data={data.data} />)}
  </div>
-
+ {props.children}
- {props.data.children&&props.data.children.length>0&&(<div ref={(node)=>childrenDrop(node)} className={style.woodExampleChildren}>
+ {props.data.type===StepDragEnum.CONTAINER&&(<div ref={(node)=>childrenDrop(node)} className={style.woodExampleChildren}>
- {props.children}
+ 拖动到此处或者
+ {/*{addStepDom()}*/}
  </div>)}
 
+
  </div>
  )
 })

platform/example/src/component/DragList.tsx

@@ -12,15 +12,15 @@ interface DragListProps {
 const _tagStore = getDropStoreId()
 const tagStore = _tagStore()
 const DragList = ({data,parent}:DragListProps) => {
- console.log(data)
  if(!Array.isArray(data)){
  data = []
  }
  // const [list, setList] = useState(data);
- data.forEach((e:StepDragType<object>)=>{
+ data.forEach((e:StepDragType<Content>)=>{
  if(!e.tag){
  e.tag = tagStore.tag
  }
+ e.destruction = () => deleteCard(null,e)
  })
  // 在当前位置插入模块
  const insertCard = useCallback(

platform/example/src/component/layout/header.tsx

@@ -4,6 +4,7 @@ import {Dropdown, message, Space} from 'antd';
 import style from "./css/header.module.less"
 import {stepMap,stepList} from "../step/index"
 import drapStore from "@/mobx/DrapStore";
+import AddStep from "@/component/AddStep";
 
 const items: MenuProps['items'] = [
  ...stepList.map(step=>step.Menu)
@@ -15,20 +16,17 @@ const onClick: MenuProps['onClick'] = ({ key }) => {
  const component = stepMap[key];
  console.log(key,component)
  drapStore.addChildren(null,component.defaultDataFunc())
-
 };
 
 const Header = () => {
  return (<div className={style.woodheader}>
 
- <Dropdown menu={{ items,onClick }}>
+ <AddStep >
- <span className={style.addStep} onClick={(e) => e.preventDefault()}>
+ <Space>
- <Space>
+ 新增步骤
- 新增步骤
+ <DownOutlined />
- <DownOutlined />
+ </Space>
- </Space>
+ </AddStep>
- </span>
- </Dropdown>
  <span className={style.addStep} onClick={(e) => e.preventDefault()}>
  <Space>
  变量管理

platform/example/src/component/step/index.ts

@@ -5,13 +5,15 @@ import {Content, StepDragType} from "@/component/type";
 import {stepProps} from "@/component/step/type";
 
 
+interface Menu {
+ label: string
+ key: string
+ options: {}
+ component: ComponentClass<stepProps,any>
+}
+
 export interface StepComponentExport {
- Menu: {
+ Menu: Menu
- label: string
- key: string
- options: {}
- component: ComponentClass<stepProps,any>
- }
 
  defaultDataFunc: () => StepDragType<Content>
 }
@@ -24,6 +26,7 @@ export const stepList = [
  HttpStepComponent,
  LoopEditComponent
 ]
+export const menus:Menu[] = stepList.map(step=>step.Menu)
 
 export const stepMap: stepMapType = {}
 stepList.forEach(step => {

platform/example/src/component/type.ts

@@ -18,6 +18,7 @@ export interface StepDragType<T> {
  children?:StepDragType<T>[]
  parent:StepDragType<T>|null
  data:T
+ destruction:()=>void
 }
 // 组件内容
 export interface Content {

platform/example/src/mobx/DrapStore.ts

@@ -95,7 +95,6 @@ class DrapStore {
  if(parentItem===null){
  DrapChildren = this.state
  }
- console.log(DrapChildren)
  DrapChildren.forEach((dropItem,idx)=>{
  if(dropItem.id===item.id){
  drop = dropItem
@@ -105,7 +104,6 @@ class DrapStore {
  if(drop===null){
  return
  }
- console.log(drop)
  if(parentItem===null){
  const ord = this.state[to]
  this.state[to] = drop