fix:去除类型错误显示

platform/example/src/App.tsx

@@ -1,9 +1,5 @@
 import React, {Component, useCallback, useRef, useState} from "react";
 import "./App.css"
-import CustDrag from "./component/CustDrag.js"
-import {DndProvider, useDrop} from "react-dnd";
-import CardItem, {getDropStoreId} from "./component/CardItem.js"
-import {HTML5Backend} from "react-dnd-html5-backend";
 import {Content, StepDragEnum, StepDragType} from "@/component/type";
 import drapStore from "./mobx/DrapStore.js";
 import {observer} from "mobx-react";

platform/example/src/component/CardItem.tsx

@@ -1,7 +1,7 @@
 import {memo, useRef} from "react";
 import {useDrag, useDrop} from "react-dnd";
 import drapStore from "@/mobx/DrapStore";
-import {StepDragType, StepType} from "@/component/type";
+import {Content, StepDragType, StepType} from "@/component/type";
 import style from "./css/DrapItem.module.less"
 import {stepMap} from "@/component/step";
 
@@ -24,14 +24,14 @@ export const getDropStoreId = (type?:string) =>{
 
 interface CardItemProps {
  tag:string
- data:StepDragType<object>
+ data:StepDragType<Content>
- parent:StepDragType<object>|null
+ parent:StepDragType<Content>|null
  len:number
- moveCard: (id: string, to: number, item: StepDragType<object>, parentItem: StepDragType<object> | null) => void
+ moveCard: (id: string, to: number, item: StepDragType<Content>, parentItem: StepDragType<Content> | null) => void
  findCard: (id: string,item:any) => { index: number }
- insertCard: (currentDrop:StepDragType<object>|null, atIndex: number,item:StepDragType<object>) => void
+ insertCard: (currentDrop:StepDragType<Content>|null, atIndex: number,item:StepDragType<Content>) => void
- deleteCard: (currentDrop:StepDragType<object>|null,item:StepDragType<object>) => void
+ deleteCard: (currentDrop:StepDragType<Content>|null,item:StepDragType<Content>) => void
- childrenCreate: (item: StepDragType<object>) => void
+ childrenCreate: (item: StepDragType<Content>) => void
  children?:any
 }
 
@@ -66,7 +66,6 @@ const CardItem = memo((props:CardItemProps) => {
  if(props.parent===null){
  return;
  }
- console.log(item,props.parent)
  // 跨组件移动--移除自身
  deleteCard(props.parent,props.data)
 
@@ -77,7 +76,7 @@ const CardItem = memo((props:CardItemProps) => {
  const [{isOver,canDrop,isOverCurrent}, drop] = useDrop(
  () => ({
  accept: StepType.CARD,
- hover(item: StepDragType<object>,monitor) {
+ hover(item: StepDragType<Content>,monitor) {
  const { id: draggedId,tag } = item;
  if(!draggedId) {
  const hoverBoundingRect = nodeRef?.current?.getBoundingClientRect() as DOMRect;
@@ -106,7 +105,7 @@ const CardItem = memo((props:CardItemProps) => {
  canDrop: monitor.canDrop(),
  isOverCurrent: monitor.isOver({ shallow: true }),
  }),
- drop:(item, monitor)=>{
+ drop:(item:StepDragType<Content>, monitor)=>{
  const { id: currentId,tag } = item
  if(tag===props.data.tag) return
  let { index: overIndex } = findCard(id,item)
@@ -123,9 +122,9 @@ const CardItem = memo((props:CardItemProps) => {
  [findCard, moveCard],
  )
 
- const [{childrenIsOver,childrenIsOverCurrent},childrenDrop] = useDrop(()=>({
+ const [,childrenDrop] = useDrop(()=>({
  accept: StepType.CARD,
- drop:(item, monitor)=>{
+ drop:(item:StepDragType<Content>, monitor)=>{
  const isOver = monitor.isOver({ shallow: false })
  const { tag } = item;
  if(isOver){
@@ -135,9 +134,7 @@ const CardItem = memo((props:CardItemProps) => {
  if(tag!==Propstag){
  // @ts-ignore
  const newItem = { ...item, id: String(new Date().getTime()) }
- // insertCard(props.parent,0, newItem)
  childrenCreate(newItem)
- console.log(1)
  }
  return
  }
@@ -152,6 +149,13 @@ const CardItem = memo((props:CardItemProps) => {
  }),[data])
  const step = stepMap[data.mold]
  const StepComponent = step&&step.Menu.component;
+
+ const updateData = (data:string) =>{
+ props.data.data.content = data
+ drapStore.updateState()
+
+ }
+
  return (
  <div className={style.woodExampleBody}>
  <div ref={(node) => drag(drop(node))} >
@@ -166,7 +170,7 @@ const CardItem = memo((props:CardItemProps) => {
  </div>
  </div>
  <div>
- {step&&(<StepComponent />)}
+ {step&&(<StepComponent updateData={updateData} data={data.data} />)}
  </div>
 
  {props.data.children&&props.data.children.length>0&&(<div ref={(node)=>childrenDrop(node)} className={style.woodExampleChildren}>

platform/example/src/component/CustDrag.tsx

@@ -1,47 +0,0 @@
-import {useDrag, useDrop} from "react-dnd";
-import {isElement} from "react-dom/test-utils";
-import {StepType} from "@/component/type";
-
-// @ts-ignore
-const CustDrag = (props) => {
- const {data} = props
- const [{ opacity }, dragRef] = useDrag({
-
- type: StepType.CARD,
- item: { ...data },
- collect: (monitor) => ({
- opacity: monitor.isDragging() ? 0.5 : 1,
- }),
- end: (item, monitor) => {
- // const { id: droppedId, originalIndex } = item
- const didDrop = monitor.didDrop()
- // 每次拖动完成更改自身id
- if(didDrop){
- data.id = String(new Date().getTime())
- }
- // 每次拖动
- // console.log(didDrop,item,data)
- // if (!didDrop) {
- // moveCard(droppedId, originalIndex)
- // }
- },
- });
- // const [, drop] = useDrop(
- // () => ({
- // accept: "card",
- // hover({ id: draggedId }: Item) {
- // if (draggedId !== id) {
- // const { index: overIndex } = findCard(id)
- // moveCard(draggedId, overIndex)
- // }
- // },
- // }),
- // [findCard, moveCard],
- // )
- return (
- <span ref={dragRef} style={{ opacity, cursor: "move" }}>
- {data?.data?.value}
- </span>
- );
-};
-export default CustDrag

platform/example/src/component/CustDrop.tsx

@@ -1,170 +0,0 @@
-import { useDrop } from "react-dnd";
-import React, {useCallback, useRef, useState} from "react";
-import CustDrag from "@/component/CustDrag";
-import update from 'immutability-helper'
-// 同级为排序
-// 跨级为插入
-import {Content, StepDragEnum, StepDragType, StepType} from "@/component/type";
-
-
-const DrapStore = {
- id:0,
- tag:"",
- type:"drop"
-}
-const getDrapStoreId = () =>{
- DrapStore.id +=1
- const store = {...DrapStore}
- store.tag = store.type+"-"+store.id
- return store
-}
-
-
-
-const dndList:StepDragType[] = [
- {id:1, label: "组件1", value: "组件1" },
- {id:2,label: "组件2", value: "组件2" },
- {id:3, label: "组件3", value: "组件3" },
-].map((item:Content,index)=>{
- let content:Content = {...item}
- return {
- tag:"",
- type:StepDragEnum.NODE,
- id: String(index),
- index:index,
- originalIndex: index,
- data: content,
- }
-})
-
-
- // @ts-ignore
-const CustDrop = ({ onChange }) => {
- const [tag,setTag] = useState(getDrapStoreId())
- const [itemClass, setItemClass] = useState<{ key: number | null; value: string }>({
- key: null,
- value: '',
- })
- const sortItems = useRef<{ dragRow: any; placeRow: any; posi: string }>({
- dragRow: {},
- placeRow: {},
- posi: '',
- })
- const propsList = dndList.map(item=>{
- item.tag = tag.tag
- return item
- })
- const [value, setValue] = useState<StepDragType[]>(propsList);
- console.log(value)
-
- const [{ canDrop, isOver }, drop] = useDrop({
- accept: StepType.CARD,
- hover(item:Content) {
- console.log(item)
- },
- // 同组的打上标签-同标签不允许添加，
- drop: (item:StepDragType) => {
-
- // const { dragRow, placeRow, posi } = sortItems.current
- // let _map: any[] = JSON.parse(JSON.stringify(dndList))
- // let index1 = _map.findIndex(v => v.id === dragRow.id) // 拖拽的itemIndex
- // _map.splice(index1, 1) // 先删掉拖拽的，在获取放置的
- const targetValue = [...value];
- console.log(item.tag,tag.tag)
- if (item.tag==tag.tag) {
- return
- }
- // 没有tag就设置tag 不一样就重新设置
- if(item.tag == "" || item.tag == null||item.tag!=tag.tag){
- item.tag = tag.tag
- }
- targetValue.push(item);
- setValue(targetValue);
- console.log(item,value)
- onChange(targetValue);
- // let index = _map.findIndex(v => v.id === placeRow.id) // 放置的itemIndex
- // if (index !== -1 && index1 !== -1) {
- // _map.splice(posi === 'bottom' ? index + 1 : index, 0, dragRow)
- // setValue(() => _map)
- // }
- },
- collect: (monitor) => ({
- // 是否放置在目标上
- isOver: monitor.isOver(),
- // 是否开始拖拽
- canDrop: monitor.canDrop(),
- }),
-
- });
-
- // 展示拖动时的界面效果
- const showCanDrop = () => {
- if (canDrop && !isOver && !value.length) return <div>请拖拽到此处</div>;
- };
-
- const delItem = (ind: number) => {
- const newValue = [...value];
- newValue.splice(ind, 1);
- setValue(newValue);
- onChange(newValue);
- };
- const onItemDragClass = (key:number,value:string) => {
- console.log(key,value,itemClass.value)
- if (itemClass.value !== value) {
- setItemClass(() => {
- let data = { key, value }
- return data
- })
- }
- }
- const onSortItemChange = (dragRow: any, placeRow: any, posi: string) => {
- console.log(dragRow,placeRow,posi)
- sortItems.current = { dragRow, placeRow, posi }
- }
- const findCard = useCallback(
- (id: string) => {
- const card = value.filter((c) => `${c.id}` === id)[0]
- return {
- card,
- index: value.indexOf(card),
- }
- },
- [value],
- )
- const moveCard = useCallback(
- (id: string, atIndex: number) => {
- const { card, index } = findCard(id)
- setValue(
- update(value, {
- $splice: [
- [index, 1],
- [atIndex, 0, card],
- ],
- }),
- )
- },
- [findCard, value, setValue],
- )
- // 内容展示
- const showValue = () => {
- const [, sortDrop] = useDrop(() => ({ accept: "Sort" }))
- return value.map((item, index: number) => {
- return (
- <div key={index} >
- <CustDrag data={item} />
- </div>
- );
- });
- };
-
- return (
- <div
- ref={drop}
- style={{ border: '1px solid #000', marginTop: '10px', minHeight: '200px', background: '#fff' }}
- >
- {showCanDrop()}
- {showValue()}
- </div>
- );
-};
-export default CustDrop

platform/example/src/component/DragList.tsx

@@ -1,13 +1,13 @@
 import CardItem, {getDropStoreId} from "@/component/CardItem";
-import {StepDragType} from "@/component/type";
+import {Content, StepDragType} from "@/component/type";
 import React, {useCallback} from "react";
 import drapStore from "@/mobx/DrapStore";
 import {observer} from "mobx-react";
 
 
 interface DragListProps {
- data:StepDragType<object>[]
+ data:StepDragType<Content>[]
- parent:StepDragType<object>|null
+ parent:StepDragType<Content>|null
 }
 const _tagStore = getDropStoreId()
 const tagStore = _tagStore()
@@ -23,14 +23,14 @@ const DragList = ({data,parent}:DragListProps) => {
  })
  // 在当前位置插入模块
  const insertCard = useCallback(
- (currentDrop:StepDragType<object>,atIndex: number, element:StepDragType<object>) => {
+ (currentDrop:StepDragType<Content>|null,atIndex: number, element:StepDragType<Content>) => {
  drapStore.insertDrop(currentDrop,atIndex,element)
  },
  [data],
  )
  // 删除当前模块
  const deleteCard = useCallback(
- (currentDrop:StepDragType<object>|null,item:StepDragType<object>) => {
+ (currentDrop:StepDragType<Content>|null,item:StepDragType<Content>) => {
  if(currentDrop===null){
  drapStore.removeDrop(item)
  }else{
@@ -52,7 +52,7 @@ const DragList = ({data,parent}:DragListProps) => {
  [data],
  )
  const moveCard = useCallback(
- (id: string, to: number,item:StepDragType<object>,parentItem:StepDragType<object>) => {
+ (id: string, to: number,item:StepDragType<Content>,parentItem:StepDragType<Content>|null) => {
  // debugger
  // if(parent===null){
  // drapStore.moveDrop(id,to,item,parentItem)
@@ -72,25 +72,27 @@ const DragList = ({data,parent}:DragListProps) => {
  },
  [findCard, data],
  )
- const childrenCreate = useCallback((item:StepDragType<object>,newItem:StepDragType<object>) =>{
+ const childrenCreate = useCallback((item:StepDragType<Content>,newItem:StepDragType<Content>) =>{
  const Item = { ...newItem, id: String(new Date().getTime()) }
  drapStore.addChildren(item,Item)
  },[data])
  return (
  <div >
- {data&&data.map((item: StepDragType<object>,index:number) => {
+ {data&&data.map((item: StepDragType<Content>,index:number) => {
  return <span key={item?.id}>
  <CardItem
  parent={parent} key={item?.id}
  tag={tagStore.tag}
- childrenCreate={(newItem)=>childrenCreate(item as StepDragType,newItem)}
+ childrenCreate={(newItem)=>childrenCreate(item as StepDragType<Content>,newItem)}
- len={data.length}
+ len={data?data?.length:0}
  data={item}
  deleteCard={deleteCard}
  insertCard={insertCard}
  moveCard={moveCard}
  findCard={findCard}>
- <DragList parent={item} data={item.children} />
+ <DragList
+ parent={item}
+ data={item.children?item.children:[]} />
  </CardItem>
  </span>;
  })}

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

@@ -1,4 +0,0 @@
-export interface StepProps <T>{
- data:T
-
-}

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

@@ -147,6 +147,7 @@ const Headers: React.FC = () => {
  const newData = dataSource.filter((item) => item.key !== key);
  setDataSource(newData);
  };
+ // 用户操作
  const TitleSelectClick: MenuProps['onClick'] = ({key}) => {
  const SelectKey = Number(key)
  switch (SelectKey){

platform/example/src/component/step/http/Http.module.less

@@ -18,3 +18,6 @@
  cursor: pointer;
  color: #19abdb;
 }
+.HttpTab{
+ margin-top: 10px;
+}

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

@@ -1,7 +1,6 @@
 import React, {Component} from "react";
-import {StepProps} from "@/component/step/StepProps";
 import {Input, Select, Space, Tabs, TabsProps} from "antd";
-import Head from "./Headers"
+import Heads from "./Headers"
 import Host from "./Host"
 import Params from "./Params";
 import Path from "./Path";
@@ -11,10 +10,9 @@ import Check from "@/component/step/http/Check";
 import Extract from "@/component/step/http/Extract";
 import Options from "@/component/step/http/Options";
 import style from "@/component/step/http/Http.module.less";
+import {stepProps} from "@/component/step/type";
 
-interface httpInterface {
 
-}
 
 const onChange = (key: string) => {
  console.log(key);
@@ -31,7 +29,7 @@ const items: TabsProps['items'] = [
  key: 'Headers',
  label: `Headers`,
  closable: false,
- children: <Head/>,
+ children: <Heads/>,
  },
  {
  key: 'Params',
@@ -76,9 +74,15 @@ const defaultMetod = ["GET","POST","PUT","DELETE","PATCH","HEAD","OPTIONS"].map(
  label:method
  }
 })
-class HttpEditComponent extends Component<StepProps<httpInterface>, any> {
+class HttpEditComponent extends Component<stepProps, any> {
- constructor(props: StepProps<httpInterface>) {
+ constructor(props: stepProps) {
  super(props);
+ this.state = {
+ data:JSON.parse(props.data.content)
+ }
+ }
+ updateData(){
+ this.props.updateData(JSON.stringify(this.state.data))
  }
  handleChange(value:string){
  console.log(value)
@@ -105,8 +109,8 @@ class HttpEditComponent extends Component<StepProps<httpInterface>, any> {
  render() {
  return (<div>
  {this.HttpMetod()}
- <div>
+ <div className={style.HttpTab}>
- <Tabs defaultActiveKey="Headers" type="editable-card" items={items} onChange={onChange}/>
+ <Tabs defaultActiveKey="Options" type="editable-card" items={items} onChange={onChange}/>
  </div>
  </div>)
  }

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

@@ -0,0 +1,53 @@
+
+
+interface httpInterface extends stepProps{
+
+}
+type allData = HostData|HeaderData|ParamsData|BeforeRequestData|ResponseData|CheckData|OptionsData|ExtractData
+interface HttpMethod{
+ type:string
+ data:allData
+}
+interface HttpChilProps{
+ onchange:(data:HttpMethod)=>void
+}
+
+
+interface HttpData {
+ host:HostData
+ header:HeaderData
+ params:ParamsData
+ beforeRequest:BeforeRequestData
+ response:ResponseData
+ check:CheckData
+ options:OptionsData
+ extract:ExtractData
+}
+interface HostData {
+
+}
+interface CheckData {
+
+}
+interface HeaderData {
+
+}
+interface ParamsData {
+
+}
+interface BeforeRequestData {
+
+}
+interface ResponseData {
+
+}
+interface OptionsData {
+
+}
+interface ExtractData {
+
+}
+
+interface childrenProps {
+ onchange:()=>void
+}

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

@@ -1,6 +1,7 @@
 import HttpStepComponent from "./http"
 import {ComponentClass} from "react"
 import {Content, StepDragType} from "@/component/type";
+import {stepProps} from "@/component/step/type";
 
 
 export interface StepComponentExport {
@@ -8,7 +9,7 @@ export interface StepComponentExport {
  label: string
  key: string
  options: {}
- component: ComponentClass<any,any>
+ component: ComponentClass<stepProps,any>
  }
 
  defaultDataFunc: () => StepDragType<Content>

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

@@ -0,0 +1,9 @@
+import {Content} from "@/component/type";
+
+export interface stepProps {
+ updateData:(data:string)=>void
+ data:Content
+}
+export interface stepState {
+ data:string
+}

platform/example/src/component/type.ts

@@ -21,6 +21,7 @@ export interface StepDragType<T> {
 }
 // 组件内容
 export interface Content {
+ content:string
  id:number
  label:string
  value:string

platform/example/src/main.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App.tsx';
+import App from './App';
 
 ReactDOM.render(
  <App />

platform/example/src/mobx/DrapStore.ts

@@ -4,15 +4,15 @@ import { makeAutoObservable, observable, action } from "mobx"
 import update from "immutability-helper";
 import _ from 'lodash'
 import cardItem from "@/component/CardItem";
-import { StepDragType } from "@/component/type";
+import {Content, StepDragType} from "@/component/type";
 
 
 class DrapStore {
  @observable
- state: StepDragType<object>[] = []
+ state: StepDragType<Content>[] = []
 
- treeData: Map<object, StepDragType> = new Map<object, StepDragType>()
+ treeData: Map<object, StepDragType<Content>> = new Map<object, StepDragType<Content>>()
- treeListData: WeakMap<object, StepDragType[]> = new WeakMap<object, StepDragType[]>()
+ treeListData: WeakMap<object, StepDragType<Content>[]> = new WeakMap<object, StepDragType<Content>[]>()
 
  @observable
  data: string[] = ["1", "2"]
@@ -26,7 +26,7 @@ class DrapStore {
  * @param dropItem
  */
  @action
- registerTree(dropItem: StepDragType) {
+ registerTree(dropItem: StepDragType<Content>) {
  const key = dropItem.tag+dropItem.id
  if (!this.treeData.has(dropItem)) {
  this.treeData.set(dropItem, dropItem)
@@ -43,7 +43,7 @@ class DrapStore {
  // this.setState([])
  }
  @action
- insertDrop(drop: StepDragType, index: number, dropNew: StepDragType) {
+ insertDrop(drop: StepDragType<Content>|null, index: number, dropNew: StepDragType<Content>) {
 
  if(drop===null){
  this.state.splice(index,0,dropNew)
@@ -56,7 +56,7 @@ class DrapStore {
 
  }
  @action
- removeDrop(drop: StepDragType){
+ removeDrop(drop: StepDragType<Content>){
  const state = this.state.filter(cardItem=>cardItem.id!==drop.id)
  if(state.length!==this.state.length){
  this.setState(state)
@@ -64,7 +64,7 @@ class DrapStore {
  }
  }
  @action
- addChildren(drop: StepDragType, dropNew: StepDragType) {
+ addChildren(drop: StepDragType<Content>, dropNew: StepDragType<Content>) {
  console.log(drop)
  if(drop===null){
  this.state.push(dropNew)
@@ -82,14 +82,15 @@ class DrapStore {
 
  }
  @action
- moveDrop(id: string, to: number,item:StepDragType,parentItem:StepDragType){
+ moveDrop(id: string, to: number,item:StepDragType<Content>,parentItem:StepDragType<Content>|null){
  let drop = null
  let index = -1
- const drap:StepDragType = this.treeData.get(parentItem);
+ // @ts-ignore
+ const drap:StepDragType<Content> = this.treeData.get(parentItem);
  // console.log(id,to,drap,item,this.treeData)
- let DrapChildren:StepDragType[] = []
+ let DrapChildren:StepDragType<Content>[] = []
  if(drap){
- DrapChildren = drap.children
+ DrapChildren = drap.children||[]
  }
  if(parentItem===null){
  DrapChildren = this.state
@@ -110,6 +111,7 @@ class DrapStore {
  this.state[to] = drop
  this.state[index] = ord
  }else{
+ // @ts-ignore
  const ord = parentItem.children[to]
  DrapChildren[to] = drop
  DrapChildren[index] = ord
@@ -118,7 +120,7 @@ class DrapStore {
  this.updateState()
  }
  @action
- setState(dropList: StepDragType<object>[]) {
+ setState(dropList: StepDragType<Content>[]) {
  this.state = dropList
  }