feat:增加loop容器组件

platform/example/src/App.tsx

@@ -134,7 +134,7 @@ const dndList2 = [
 });
 
 
-drapStore.setState(dndList)
+// drapStore.setState(dndList)
 
 
 class App extends Component {

platform/example/src/component/CardItem.tsx

@@ -4,7 +4,7 @@ import drapStore from "@/mobx/DrapStore";
 import {Content, StepDragType, StepType} from "@/component/type";
 import style from "./css/DrapItem.module.less"
 import {stepMap} from "@/component/step";
-
+let id = 0
 export const getDropStoreId = (type?:string) =>{
  const DropStore = {
  id:0,
@@ -15,8 +15,9 @@ export const getDropStoreId = (type?:string) =>{
  DropStore.type = type
  }
  return function (){
- DropStore.id +=1
+ id +=1
  const store = {...DropStore}
+ store.id = id;
  store.tag = store.type+"-"+store.id
  return store
  }
@@ -58,6 +59,7 @@ const CardItem = memo((props:CardItemProps) => {
  moveCard(droppedId, originalIndex,item, props.parent)
  return
  }
+ console.log(props.tag,tag)
  // 相同组件不允许移动
  if(props.tag===tag){
  return
@@ -94,9 +96,10 @@ const CardItem = memo((props:CardItemProps) => {
  return
  }
 
- // 存在id，id不同时，移动
- if (tag===data.tag&&draggedId !== id) {
  const { index: overIndex } = findCard(id,item)
+ // 不同组件之间 tag不一样
+ // 存在id，id不同时，移动
+ if (draggedId !== id&&overIndex>-1) {
  moveCard(draggedId, overIndex,item,props.parent)
  }
  },
@@ -111,7 +114,7 @@ const CardItem = memo((props:CardItemProps) => {
  let { index: overIndex } = findCard(id,item)
  console.log(overIndex,id,tag,Propstag,item)
  if(positionRef.current === 'bottom') overIndex += 1
- if(tag!==Propstag){
+ if(tag!==Propstag&&overIndex===-1){
  const newItem = { ...item, id: String(new Date().getTime()) }
  console.log(data, props.data, props.data===props.parent)
  insertCard(props.parent,overIndex, newItem)
@@ -174,9 +177,7 @@ const CardItem = memo((props:CardItemProps) => {
  </div>
 
  {props.data.children&&props.data.children.length>0&&(<div ref={(node)=>childrenDrop(node)} className={style.woodExampleChildren}>
-
  {props.children}
-
  </div>)}
 
  </div>

platform/example/src/component/DragList.tsx

@@ -12,6 +12,7 @@ interface DragListProps {
 const _tagStore = getDropStoreId()
 const tagStore = _tagStore()
 const DragList = ({data,parent}:DragListProps) => {
+ console.log(data)
  if(!Array.isArray(data)){
  data = []
  }

platform/example/src/component/step/http/Edit.tsx

@@ -12,12 +12,15 @@ import Options from "@/component/step/http/Options";
 import style from "@/component/step/http/Http.module.less";
 import {stepProps} from "@/component/step/type";
 import Body from "./Body";
-import {allData, HttpData, OptionsDataType} from "@/component/step/http/type";
+import {allData, HttpData, OptionsDataType, UrlData} from "@/component/step/http/type";
 
 interface State {
  data:HttpData
 }
-
+const urlDefaultData:UrlData = {
+ path:"",
+ method:"GET"
+}
 
 const defaultMetod = ["GET","POST","PUT","DELETE","PATCH","HEAD","OPTIONS"].map(method=>{
  return {
@@ -28,8 +31,9 @@ const defaultMetod = ["GET","POST","PUT","DELETE","PATCH","HEAD","OPTIONS"].map(
 class HttpEditComponent extends Component<stepProps, State> {
  constructor(props: stepProps) {
  super(props);
- const content = props.data
- console.log(props.data)
+ const content = Object.assign({
+ url:urlDefaultData
+ },props.data)
  this.state = {
  data:content
  }

platform/example/src/component/step/http/index.tsx

@@ -1,9 +1,9 @@
 import {Content, StepDragEnum, StepDragType} from "@/component/type";
 import {getDropStoreId} from "@/component/CardItem";
-import HttpEditComponent from "./edit"
+import HttpEditComponent from "./Edit"
 import {StepComponentExport} from "@/component/step";
 const name = "HttpStepComponent"
-const tagStore = getDropStoreId()
+const tagStore = getDropStoreId("http")
 interface HttpInterface extends Content{
 
 }
@@ -35,7 +35,6 @@ const defaultDataFunc = () =>{
  data:data
  }
  return defaultData
-
 }
 
 

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

@@ -1,4 +1,5 @@
 import HttpStepComponent from "./http"
+import LoopEditComponent from "./loop"
 import {ComponentClass} from "react"
 import {Content, StepDragType} from "@/component/type";
 import {stepProps} from "@/component/step/type";
@@ -20,7 +21,8 @@ interface stepMapType {
 }
 
 export const stepList = [
- HttpStepComponent
+ HttpStepComponent,
+ LoopEditComponent
 ]
 
 export const stepMap: stepMapType = {}

platform/example/src/component/step/loop/Edit.tsx

@@ -0,0 +1,13 @@
+import {Component} from "react";
+import {LoopProps, LoopState} from "@/component/step/loop/type";
+interface Interface {
+
+}
+
+class LoopEditComponent extends Component<LoopProps, LoopState>{
+ render() {
+ return <div>loop</div>;
+ }
+}
+
+export default LoopEditComponent

platform/example/src/component/step/loop/index.tsx

@@ -0,0 +1,51 @@
+import {StepDragEnum, StepDragType} from "@/component/type";
+import {LoopInterface} from "@/component/step/loop/type";
+import {getDropStoreId} from "@/component/CardItem";
+import {StepComponentExport} from "@/component/step";
+import HttpEditComponent from "@/component/step/http/Edit";
+import LoopEditComponent from "@/component/step/loop/Edit";
+const tagStore = getDropStoreId("loop")
+const name = "LoopStepComponent"
+const LoopData:LoopInterface = {
+ content: "",
+ id:0,
+ label:"循环组件",
+ remark:"",
+ color:"red",
+ tag:"LOOP",
+ value:"",
+}
+
+const defaultDataFunc = () =>{
+
+ const data = {...LoopData}
+
+ const store = tagStore()
+ data.id = store.id
+ // data.mold = name
+ const defaultData:StepDragType<LoopInterface> = {
+ mold:name,
+ type:StepDragEnum.CONTAINER,
+ tag:store.tag,
+ id:String(store.id),
+ index:store.id,
+ originalIndex:store.id,
+ children:[],
+ parent:null,
+ data:data
+ }
+ return defaultData
+}
+const LoopStepOption = {
+
+}
+const exportData:StepComponentExport = {
+ Menu:{
+ label:"LOOP",
+ key:name,
+ options:LoopStepOption,
+ component:LoopEditComponent
+ },
+ defaultDataFunc
+}
+export default exportData

platform/example/src/component/step/loop/type.d.ts

@@ -0,0 +1,16 @@
+import {Content, StepDragEnum, StepDragType} from "@/component/type";
+import {HttpData} from "@/component/step/http/type";
+
+interface LoopData {
+
+}
+interface LoopProps {
+ updateData:(data:string)=>void
+ data:HttpData
+}
+interface LoopState {
+ data:LoopData
+}
+interface LoopInterface extends Content{
+
+}

platform/example/src/component/step/type.d.ts

@@ -1,9 +1,10 @@
 import {Content, StepDragType} from "@/component/type";
 import {HttpData} from "@/component/step/http/type";
+import {LoopData} from "@/component/step/loop/type";
 
 export interface stepProps {
  updateData:(data:string)=>void
- data:HttpData
+ data:HttpData|LoopData
 }
 export interface stepState {
  data:string

platform/example/src/mobx/DrapStore.ts

@@ -64,7 +64,7 @@ class DrapStore {
  }
  }
  @action
- addChildren(drop: StepDragType<Content>, dropNew: StepDragType<Content>) {
+ addChildren(drop: StepDragType<Content>|null, dropNew: StepDragType<Content>) {
  console.log(drop)
  if(drop===null){
  this.state.push(dropNew)