yiniantt
/
quality_frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix:去除类型错误显示

This commit is contained in:
tiantang 2023-07-02 22:41:56 +08:00
parent 4a2b0bc450
commit b55eb21dd3
15 changed files with 130 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
platform/example/src/App.tsx
View File

@ -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";

34
platform/example/src/component/CardItem.tsx
View File

@ -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>
parent:StepDragType<object>|null
data:StepDragType<Content>
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
deleteCard: (currentDrop:StepDragType<object>|null,item:StepDragType<object>) => void
childrenCreate: (item: StepDragType<object>) => void
insertCard: (currentDrop:StepDragType<Content>|null, atIndex: number,item:StepDragType<Content>) => void
deleteCard: (currentDrop:StepDragType<Content>|null,item:StepDragType<Content>) => 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}>

47
platform/example/src/component/CustDrag.tsx
View File

@ -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

170
platform/example/src/component/CustDrop.tsx
View File

@ -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

24
platform/example/src/component/DragList.tsx
View File

@ -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>[]
parent:StepDragType<object>|null
data:StepDragType<Content>[]
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)}
len={data.length}
childrenCreate={(newItem)=>childrenCreate(item as StepDragType<Content>,newItem)}
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>;
})}

4
platform/example/src/component/step/StepProps.ts
View File

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

1
platform/example/src/component/step/http/Headers.tsx
View File

@ -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){

3
platform/example/src/component/step/http/Http.module.less
View File

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

22
platform/example/src/component/step/http/edit.tsx
View File

@ -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> {
constructor(props: StepProps<httpInterface>) {
class HttpEditComponent extends Component<stepProps, any> {
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>
<Tabs defaultActiveKey="Headers" type="editable-card" items={items} onChange={onChange}/>
<div className={style.HttpTab}>
<Tabs defaultActiveKey="Options" type="editable-card" items={items} onChange={onChange}/>
</div>
</div>)
}

53
platform/example/src/component/step/http/type.d.ts vendored Normal file
View File

@ -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
}

3
platform/example/src/component/step/index.ts
View File

@ -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>

9
platform/example/src/component/step/type.d.ts vendored Normal file
View File

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

1
platform/example/src/component/type.ts
View File

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

2
platform/example/src/main.tsx
View File

@ -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 />

28
platform/example/src/mobx/DrapStore.ts
View File

@ -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>()
treeListData: WeakMap<object, StepDragType[]> = new WeakMap<object, StepDragType[]>()
treeData: Map<object, StepDragType<Content>> = new Map<object, StepDragType<Content>>()
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
}