feat:增加params操作

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

@@ -127,12 +127,12 @@ const EditableCell: React.FC<EditableCellProps> = ({
  <Input ref={inputRef} onPressEnter={save} onBlur={save}/>
  </Form.Item>
  ) : (
- <div className={style.HttpEditable} style={{paddingRight: 24}} onClick={toggleEdit}>
- {children}
+ <div className={children[1]&&children[1].length>0?"":style.HttpEditable} style={{paddingRight: 24}} onClick={toggleEdit}>
+ {children[1]&&children[1].length>0?children:"点击编辑 "+title}
  </div>
  );
  }
-
+ console.log(children)
  return <td {...restProps}>{childNode}</td>;
 };
 
@@ -195,13 +195,13 @@ const Check = () => {
  const defaultColumns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[] = [
  {
  title: '校验对象',
- dataIndex: 'index',
+ dataIndex: 'obj',
  width: '300px',
  editable: true,
  },
  {
  title: '检查条件',
- dataIndex: 'index',
+ dataIndex: 'condition',
  width: "200px",
  render: (_, record:DataType) => {
  return (<div>
@@ -217,12 +217,8 @@ const Check = () => {
 
  {
  title: '校验内容',
- dataIndex: 'index',
- render: (_, record: DataType) => {
- return (<div key={record.condition}>
- {paramsRender(Number(record.condition), record, handleSave)}
- </div>)
- }
+ dataIndex: 'check',
+ editable: true
  },
  {
  width: "80px",
@@ -306,4 +302,4 @@ const Check = () => {
  />
  </div>
 }
-export default Check
+export default Check

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

@@ -122,12 +122,11 @@ const EditableCell: React.FC<EditableCellProps> = ({
  <Input ref={inputRef} onPressEnter={save} onBlur={save}/>
  </Form.Item>
  ) : (
- <div className={style.HttpEditable} style={{paddingRight: 24}} onClick={toggleEdit}>
- {children}
+ <div className={children[1]&&children[1].length>0?"":style.HttpEditable} style={{paddingRight: 24}} onClick={toggleEdit}>
+ {children[1]&&children[1].length>0?children:"点击编辑 "+title}
  </div>
  );
  }
-
  return <td {...restProps}>{childNode}</td>;
 };
 
@@ -364,4 +363,4 @@ const Extract = () =>{
  />
  </div>;
 }
-export default Extract
+export default Extract

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

@@ -104,8 +104,8 @@ const EditableCell: React.FC<EditableCellProps> = ({
  <Input ref={inputRef} placeholder={`编辑 ${title}`} onPressEnter={save} onBlur={save}/>
  </Form.Item>
  ) : (
- <div className={style.HttpEditable} style={{paddingRight: 24}} onClick={toggleEdit}>
- {children}
+ <div className={children[1]&&children[1].length>0?"":style.HttpEditable} style={{paddingRight: 24}} onClick={toggleEdit}>
+ {children[1]&&children[1].length>0?children:"点击编辑 "+title}
  </div>
  );
  }
@@ -258,4 +258,4 @@ const Headers: React.FC = () => {
  );
 };
 
-export default Headers;
+export default Headers;

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

@@ -13,6 +13,7 @@
 }
 .HttpEditable{
  min-height: 24px;
+ color: #d8d9d9;
 }
 .HttpHandleAdd{
  cursor: pointer;
@@ -36,4 +37,4 @@
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
-}
+}

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

@@ -1,11 +1,261 @@
-import {Component} from "react";
+import React, {useContext, useEffect, useRef, useState} from 'react';
+import type {InputRef, MenuProps} from 'antd';
+import {Button, Dropdown, Form, Input, Popconfirm, Space, Table} from 'antd';
+import type {FormInstance} from 'antd/es/form';
+import style from "./Http.module.less"
+import {DownOutlined, PlusOutlined} from "@ant-design/icons";
 
-class Params extends Component<any,any>{
- render() {
- return <div>
+const EditableContext = React.createContext<FormInstance<any> | null>(null);
 
- Params
- </div>;
- }
+interface Item {
+ key: string;
+ name: string;
+ age: string;
+ address: string;
 }
-export default Params
+
+interface EditableRowProps {
+ index: number;
+}
+
+
+type EditableTableProps = Parameters<typeof Table>[0];
+
+interface DataType {
+ key: React.Key;
+ name: string;
+ value: string;
+}
+
+type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
+
+enum SelectAddEnum {
+ ADD,
+ IMPORT
+}
+
+interface EditableCellProps {
+ title: React.ReactNode;
+ editable: boolean;
+ children: React.ReactNode;
+ dataIndex: keyof Item;
+ record: Item;
+ handleSave: (record: Item) => void;
+}
+
+const EditableRow: React.FC<EditableRowProps> = ({index, ...props}) => {
+ const [form] = Form.useForm();
+ return (
+ <Form form={form} component={false}>
+ <EditableContext.Provider value={form}>
+ <tr {...props} />
+ </EditableContext.Provider>
+ </Form>
+ );
+};
+const EditableCell: React.FC<EditableCellProps> = ({
+ title,
+ editable,
+ children,
+ dataIndex,
+ record,
+ handleSave,
+ ...restProps
+ }) => {
+ const [editing, setEditing] = useState(false);
+ const inputRef = useRef<InputRef>(null);
+ const form = useContext(EditableContext)!;
+
+ useEffect(() => {
+ if (editing) {
+ inputRef.current!.focus();
+ }
+ }, [editing]);
+
+ const toggleEdit = () => {
+ setEditing(!editing);
+ form.setFieldsValue({[dataIndex]: record[dataIndex]});
+ };
+
+ const save = async () => {
+ try {
+ const values = await form.validateFields();
+ toggleEdit();
+ handleSave({...record, ...values});
+ } catch (errInfo) {
+ console.log('Save failed:', errInfo);
+ }
+ };
+
+ let childNode = children;
+
+ if (editable) {
+ childNode = editing ? (
+ <Form.Item
+ style={{margin: 0}}
+ name={dataIndex}
+ rules={[
+ {
+ required: true,
+ message: `${title} 不能为空`,
+ },
+ ]}
+ >
+ <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}>
+ {children[1]&&children[1].length>0?children:"点击编辑 "+title}
+ </div>
+ );
+ }
+
+ return <td {...restProps}>{childNode}</td>;
+};
+
+
+const addSelectItem: MenuProps['items'] = [
+ {
+ key: SelectAddEnum.ADD,
+ label: (
+ <div>添加一行</div>
+ ),
+ },
+ {
+ key: SelectAddEnum.IMPORT,
+ label: (
+ <div>导入</div>
+ ),
+ }
+]
+const Params: React.FC = () => {
+ const [dataSource, setDataSource] = useState<DataType[]>([
+ {
+ key: '0',
+ name: '',
+ value: '',
+ },
+ {
+ key: '1',
+ name: '',
+ value: '',
+ },
+ ]);
+
+ const [count, setCount] = useState(2);
+
+ const handleDelete = (key: React.Key) => {
+ const newData = dataSource.filter((item) => item.key !== key);
+ setDataSource(newData);
+ };
+ // 用户操作
+ const TitleSelectClick: MenuProps['onClick'] = ({key}) => {
+ const SelectKey = Number(key)
+ switch (SelectKey) {
+ case SelectAddEnum.ADD:
+ handleAdd()
+ break
+ case SelectAddEnum.IMPORT:
+ console.log("import")
+ break
+ default:
+ break
+ }
+ console.log(key)
+ }
+ const defaultColumns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[] = [
+ {
+ title: 'key',
+ dataIndex: 'name',
+ width: '30%',
+ editable: true,
+ },
+ {
+ title: 'value',
+ dataIndex: 'value',
+ editable: true,
+ },
+ {
+ width: "80px",
+ title: () => {
+ return (
+ <div className={style.HttpHandleAdd}>
+
+ <Dropdown menu={{items: addSelectItem, onClick: TitleSelectClick}}>
+ <Space>
+ <div>
+ <PlusOutlined/>
+ </div>
+ </Space>
+ </Dropdown>
+
+ </div>
+ )
+
+ },
+ dataIndex: 'operation',
+ render: (_, record: { key: React.Key }) =>
+ dataSource.length >= 1 ? (
+ <span className={style.HttpHandleAdd} onClick={() => handleDelete(record.key)}>删除</span>
+ ) : null,
+ },
+ ];
+
+ const handleAdd = () => {
+ const newData: DataType = {
+ key: count,
+ name: ``,
+ value: ``,
+ };
+ setDataSource([...dataSource, newData]);
+ setCount(count + 1);
+ };
+
+ const handleSave = (row: DataType) => {
+ const newData = [...dataSource];
+ const index = newData.findIndex((item) => row.key === item.key);
+ const item = newData[index];
+ newData.splice(index, 1, {
+ ...item,
+ ...row,
+ });
+ setDataSource(newData);
+ };
+
+ const components = {
+ body: {
+ row: EditableRow,
+ cell: EditableCell,
+ },
+ };
+
+ const columns = defaultColumns.map((col) => {
+ if (!col.editable) {
+ return col;
+ }
+ return {
+ ...col,
+ onCell: (record: DataType) => ({
+ record,
+ editable: col.editable,
+ dataIndex: col.dataIndex,
+ title: col.title,
+ handleSave,
+ }),
+ };
+ });
+
+ return (
+ <div>
+ <Table
+ components={components}
+ rowClassName={() => 'editable-row'}
+ bordered
+ dataSource={dataSource}
+ columns={columns as ColumnTypes}
+ />
+ </div>
+ );
+};
+
+export default Params;