debug:增加弹窗

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

@@ -1,9 +1,9 @@
 import React, {useContext, useEffect, useRef, useState} from 'react';
-import type {InputRef, MenuProps} from 'antd';
+import type {InputRef, MenuProps, TabsProps} from 'antd';
-import {Button, Dropdown, Form, Input, Popconfirm, Space, Table} from 'antd';
+import { Dropdown, Form, Input, Modal, Space, Table, Tabs} from 'antd';
 import type {FormInstance} from 'antd/es/form';
 import style from "./Http.module.less"
-import {DownOutlined, PlusOutlined} from "@ant-design/icons";
+import { PlusOutlined} from "@ant-design/icons";
 
 const EditableContext = React.createContext<FormInstance<any> | null>(null);
 
@@ -104,8 +104,9 @@ const EditableCell: React.FC<EditableCellProps> = ({
  <Input ref={inputRef} placeholder={`编辑 ${title}`} onPressEnter={save} onBlur={save}/>
  </Form.Item>
  ) : (
- <div className={children[1]&&children[1].length>0?"":style.HttpEditable} style={{paddingRight: 24}} onClick={toggleEdit}>
+ <div className={children[1] && children[1].length > 0 ? "" : style.HttpEditable} style={{paddingRight: 24}}
- {children[1]&&children[1].length>0?children:"点击编辑 "+title}
+ onClick={toggleEdit}>
+ {children[1] && children[1].length > 0 ? children : "点击编辑 " + title}
  </div>
  );
  }
@@ -143,7 +144,19 @@ const Headers: React.FC = () => {
  ]);
 
  const [count, setCount] = useState(2);
+ const [isModalOpen, setIsModalOpen] = useState(false);
 
+ const showModal = () => {
+ setIsModalOpen(true);
+ };
+
+ const handleOk = () => {
+ setIsModalOpen(false);
+ };
+
+ const handleCancel = () => {
+ setIsModalOpen(false);
+ };
  const handleDelete = (key: React.Key) => {
  const newData = dataSource.filter((item) => item.key !== key);
  setDataSource(newData);
@@ -157,6 +170,7 @@ const Headers: React.FC = () => {
  break
  case SelectAddEnum.IMPORT:
  console.log("import")
+ showModal()
  break
  default:
  break
@@ -244,6 +258,21 @@ const Headers: React.FC = () => {
  }),
  };
  });
+ const ImportItems: TabsProps['items'] = [
+ {
+ key: '1',
+ label: `参数批量导入`,
+ children: `Content of Tab Pane 1`,
+ },
+ {
+ key: '2',
+ label: `QueryString导入`,
+ children: `Content of Tab Pane 1`,
+ },
+ ];
+ const onImportChange = (key:string) =>{
+ console.log(key)
+ }
 
  return (
  <div>
@@ -254,6 +283,9 @@ const Headers: React.FC = () => {
  dataSource={dataSource}
  columns={columns as ColumnTypes}
  />
+ <Modal title="批量参数导入" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+ <Tabs defaultActiveKey="1" items={ImportItems} onChange={onImportChange} />
+ </Modal>
  </div>
  );
 };

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

@@ -2,13 +2,13 @@ import {Content, StepDragEnum, StepDragType} from "@/component/type";
 import {getDropStoreId} from "@/component/CardItem";
 import HttpEditComponent from "./edit"
 import {StepComponentExport} from "@/component/step";
-import {Component} from "react";
 const name = "HttpStepComponent"
 const tagStore = getDropStoreId()
 interface HttpInterface extends Content{
 
 }
 const HttpData:HttpInterface = {
+ content: "",
  id:0,
  label:"HTTP组件",
  remark:"",
@@ -53,4 +53,4 @@ const exportData:StepComponentExport = {
  },
  defaultDataFunc
 }
-export default exportData
+export default exportData