feat:增加loop组件,调整步骤增加下拉选项

platform/example/src/component/AddStep.tsx

@@ -1,25 +1,42 @@
 import {Dropdown, MenuProps, Space} from "antd";
 import style from "@/component/layout/css/header.module.less";
-import {DownOutlined} from "@ant-design/icons";
+import {DownOutlined, PlusOutlined} from "@ant-design/icons";
 import {stepMap} from "@/component/step";
 import drapStore from "@/mobx/DrapStore";
 import Menus from "@/component/step/menus";
-
+import {Props} from "react"
+import {Content, StepDragType} from "@/component/type";
+// <PlusOutlined />
 // console.log(stepList)
-const items: MenuProps['items'] = [...Menus];
+const items: MenuProps['items'] = [...Menus].map(e=>{
+ e.label = <div>
+ <PlusOutlined />
+ <span style={{marginLeft:"10px"}}>{e.label}</span>
 
-const onClick: MenuProps['onClick'] = ({ key }) => {
+ </div>
- // 给容器添加组件
+ return e
- // message.info(`Click on item ${key}`);
+});
- console.log(stepMap)
+interface addStepProps {
- const component = stepMap[key];
+ className?:string
- console.log(key,component)
+ step?:StepDragType<Content>
- drapStore.addChildren(null,component.defaultDataFunc())
+}
-};
+
-const AddStep :React.FC= (props)=>{
+const AddStep :React.FC<addStepProps>= (props)=>{
+ const onClick: MenuProps['onClick'] = ({ key }) => {
+ // 给容器添加组件
+ // message.info(`Click on item ${key}`);
+ const component = stepMap[key];
+ console.log(key,component,props.step)
+ if(props.step){
+ drapStore.addChildren(props.step,component.defaultDataFunc())
+ return
+ }
+ drapStore.addChildren(null,component.defaultDataFunc())
+ };
  return <Dropdown menu={{ items,onClick }}>
- <div className={style.addStep} onClick={(e) => e.preventDefault()}>
+
- {props.children}
+ <div className={props.className} onClick={(e) => e.preventDefault()}>
+ {props.children}
  </div>
  </Dropdown>
 }

platform/example/src/component/CardItem.tsx

@@ -175,6 +175,7 @@ const CardItem = memo((props:CardItemProps) => {
  }),
  }),[data])
  const step = stepMap[data.mold]
+ console.log(step,stepMap,data.mold)
  const StepComponent = step&&step.component;
 
  const updateData = (data:string) =>{
@@ -183,9 +184,8 @@ const CardItem = memo((props:CardItemProps) => {
 
  }
  const addStepDom = ()=>{
- return<AddStep >
+ return<AddStep className={style.woodExampleAddStepbtn} step={props.data as StepDragType<Content>}>
- <span>新增步骤</span>
+ <span>新建步骤</span>
- <DownOutlined />
  </AddStep>
 
  }
@@ -193,23 +193,28 @@ const CardItem = memo((props:CardItemProps) => {
  <div className={style.woodExampleBody}>
  <div ref={(node) => drag(drop(node))} >
  <div ref={nodeRef} className={style.woodExampleHeader}>
- { (isOver && canDrop && positionRef.current === 'top') && <div >拖拽到此处top</div> }
+ {/*{ (isOver && canDrop && positionRef.current === 'top') && <div >拖拽到此处top</div> }*/}
  <span className={style.woodExampleIndex}>{data?.index}</span>
  <span>{data?.data?.label}</span>
  <span className={style.woodExampleRemark}>{data?.data?.remark?data.data.remark:"步骤备注"}</span>
  {data?.data?.tag&&<span className={style.woodExampleTag} style={{"background":data?.data?.color}}>{data?.data?.tag}</span>}
- { (isOver && canDrop && positionRef.current === 'bottom' && originalIndex !== len-1 ) && <div >拖拽到此处bottom</div> }
+ {/*{ (isOver && canDrop && positionRef.current === 'bottom' && originalIndex !== len-1 ) && <div >拖拽到此处bottom</div> }*/}
- { (isDragging && canDrop && originalIndex === len-1 && positionRef.current !== 'top') && <div >拖拽到此处len</div> }
+ {/*{ (isDragging && canDrop && originalIndex === len-1 && positionRef.current !== 'top') && <div >拖拽到此处len</div> }*/}
  </div>
  </div>
- <div>
+ <div className={style.woodExampleContent}>
- {step&&(<StepComponent updateData={updateData} data={data.data} />)}
+ <div>
- </div>
+ {step&&(<StepComponent updateData={updateData} data={data.data} />)}
- {props.children}
+ </div>
- {props.data.type===StepDragEnum.CONTAINER&&(<div ref={(node)=>childrenDrop(node)} className={style.woodExampleChildren}>
+ <div className={style.woodExampleChildren}>
- 拖动到此处或者
+ {props.children}
+ </div>
+ {props.data.type===StepDragEnum.CONTAINER&&(<div className={style.woodExampleAddStep} ref={(node)=>childrenDrop(node)} >
+ <span>拖动到此处或者</span>
  {addStepDom()}
- </div>)}
+ <span>完成添加</span>
+ </div>)}
+ </div>
 
 
  </div>

platform/example/src/component/css/DrapItem.module.less

@@ -39,3 +39,18 @@
  margin: 0 5px;
  color: #333;
 }
+.woodExampleAddStep{
+ text-align: center;
+ padding: 5px 0;
+ margin: 10px 0;
+ border: 1px dashed #d9d9d9;
+}
+.woodExampleContent{
+ padding: 0 10px;
+}
+.woodExampleAddStepbtn{
+ display: inline-block;
+ margin: 0 5px;
+ color: #60abfd;
+ cursor: pointer;
+}

platform/example/src/component/layout/css/header.module.less

@@ -8,6 +8,7 @@
  padding: 3px 5px;
  cursor: pointer;
  transition: background-color 1s;
+ border-radius: 5px;
  &:hover{
  background: #95bbff;
  }

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

@@ -6,26 +6,16 @@ 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)
-];
-
-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 Header = () => {
  return (<div className={style.woodheader}>
 
- <AddStep >
+ <AddStep className={style.addStep}>
  <Space>
  新增步骤
  <DownOutlined />
  </Space>
+
  </AddStep>
  <span className={style.addStep} onClick={(e) => e.preventDefault()}>
  <Space>

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

@@ -34,9 +34,9 @@ class HttpEditComponent extends Component<stepProps, State> {
  const content = Object.assign({
  url:urlDefaultData
  },props.data)
- console.log(1)
+ console.log(props)
  this.state = {
- data:content
+ data:content as HttpData
  }
  console.log(this.state.data)
  }

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

@@ -6,7 +6,7 @@ import {stepProps} from "@/component/step/type";
 
 
 export interface MenuItem {
- label: string
+ label: React.ReactNode
  key: string
  options: {}
 }

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

@@ -1,12 +1,43 @@
 import {Component} from "react";
 import {LoopProps, LoopState} from "@/component/step/loop/type";
+import {InputNumber} from "antd";
+import style from "./loop.module.less"
+import {InfoCircleOutlined} from "@ant-design/icons";
 interface Interface {
 
 }
 
 class LoopEditComponent extends Component<LoopProps, LoopState>{
+ constructor(props:LoopProps) {
+ super(props);
+ this.state = {
+ loop:props.data.loop
+ }
+ console.log(props.data)
+ }
+ updateData(){
+ this.props.updateData(JSON.stringify(this.state.data))
+ }
+ valueChange(value:number){
+ this.setState({loop:value})
+ this.updateData()
+ console.log(this.state.loop)
+ }
  render() {
- return <div>loop</div>;
+ return <div className={style.loopBody}>
+ <div className={style.loopHeader}>
+ <span style={{marginRight:"20px"}}><InfoCircleOutlined /></span>
+ <span className={style.loopTitle}>循环步骤</span>
+
+ </div>
+ <div className={style.loopContent}>
+ <span>可以使用$_index变量获取当前循环的次数,次数从0开始计数</span>
+ <span>
+ <InputNumber addonBefore="执行次数" value={this.state.loop} onChange={(e)=>this.valueChange(e)} min={0} defaultValue={0} />
+ </span>
+ </div>
+
+ </div>;
  }
 }
 

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

@@ -5,15 +5,16 @@ 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 = "Loop"
+const name = "LOOP"
 const LoopData:LoopInterface = {
  content: "",
  id:0,
  label:"循环组件",
  remark:"",
- color:"red",
+ color:"#7eabbe",
  tag:"LOOP",
  value:"",
+ loop:0
 }
 
 const defaultDataFunc = () =>{
@@ -32,7 +33,8 @@ const defaultDataFunc = () =>{
  originalIndex:store.id,
  children:[],
  parent:null,
- data:data
+ data:data,
+ destruction:()=>{}
  }
  return defaultData
 }

platform/example/src/component/step/loop/loop.module.less

@@ -0,0 +1,28 @@
+.loopContent{
+ padding: 0 10px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ >span:last-child{
+ background: #fff;
+ }
+}
+.loopBody{
+ background: #e6f7ff;
+ border: 2px solid #bae4fe;
+ border-radius: 5px;
+ margin: 10px 0;
+ padding: 10px 0;
+
+}
+.loopTitle{
+ font-size: 16px;
+ font-weight: 600;
+}
+.loopHeader{
+ padding: 0 10px;
+ display: flex;
+ align-items: center;
+ justify-content: start;
+}

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

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