From 5f48054dc8693c384fc9620b7049283c9fc96771 Mon Sep 17 00:00:00 2001 From: zjc <123> Date: Mon, 10 Jul 2023 16:57:35 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0params=E6=93=8D=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../example/src/component/step/http/Check.tsx | 20 +- .../src/component/step/http/Extract.tsx | 7 +- .../src/component/step/http/Headers.tsx | 6 +- .../src/component/step/http/Http.module.less | 3 +- .../src/component/step/http/Params.tsx | 266 +++++++++++++++++- 5 files changed, 274 insertions(+), 28 deletions(-) diff --git a/platform/example/src/component/step/http/Check.tsx b/platform/example/src/component/step/http/Check.tsx index 65a19b4..1c3fe2d 100644 --- a/platform/example/src/component/step/http/Check.tsx +++ b/platform/example/src/component/step/http/Check.tsx @@ -127,12 +127,12 @@ const EditableCell: React.FC = ({ ) : ( -
- {children} +
0?"":style.HttpEditable} style={{paddingRight: 24}} onClick={toggleEdit}> + {children[1]&&children[1].length>0?children:"点击编辑 "+title}
); } - + console.log(children) return {childNode}; }; @@ -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 (
@@ -217,12 +217,8 @@ const Check = () => { { title: '校验内容', - dataIndex: 'index', - render: (_, record: DataType) => { - return (
- {paramsRender(Number(record.condition), record, handleSave)} -
) - } + dataIndex: 'check', + editable: true }, { width: "80px", @@ -306,4 +302,4 @@ const Check = () => { />
} -export default Check \ No newline at end of file +export default Check diff --git a/platform/example/src/component/step/http/Extract.tsx b/platform/example/src/component/step/http/Extract.tsx index 9e51035..dfc659c 100644 --- a/platform/example/src/component/step/http/Extract.tsx +++ b/platform/example/src/component/step/http/Extract.tsx @@ -122,12 +122,11 @@ const EditableCell: React.FC = ({ ) : ( -
- {children} +
0?"":style.HttpEditable} style={{paddingRight: 24}} onClick={toggleEdit}> + {children[1]&&children[1].length>0?children:"点击编辑 "+title}
); } - return {childNode}; }; @@ -364,4 +363,4 @@ const Extract = () =>{ />
; } -export default Extract \ No newline at end of file +export default Extract diff --git a/platform/example/src/component/step/http/Headers.tsx b/platform/example/src/component/step/http/Headers.tsx index dde0244..a319313 100644 --- a/platform/example/src/component/step/http/Headers.tsx +++ b/platform/example/src/component/step/http/Headers.tsx @@ -104,8 +104,8 @@ const EditableCell: React.FC = ({ ) : ( -
- {children} +
0?"":style.HttpEditable} style={{paddingRight: 24}} onClick={toggleEdit}> + {children[1]&&children[1].length>0?children:"点击编辑 "+title}
); } @@ -258,4 +258,4 @@ const Headers: React.FC = () => { ); }; -export default Headers; \ No newline at end of file +export default Headers; diff --git a/platform/example/src/component/step/http/Http.module.less b/platform/example/src/component/step/http/Http.module.less index 19e64fa..c05dc46 100644 --- a/platform/example/src/component/step/http/Http.module.less +++ b/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; -} \ No newline at end of file +} diff --git a/platform/example/src/component/step/http/Params.tsx b/platform/example/src/component/step/http/Params.tsx index c73167a..e5a6115 100644 --- a/platform/example/src/component/step/http/Params.tsx +++ b/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{ - render() { - return
+const EditableContext = React.createContext | null>(null); - Params -
; - } +interface Item { + key: string; + name: string; + age: string; + address: string; } -export default Params \ No newline at end of file + +interface EditableRowProps { + index: number; +} + + +type EditableTableProps = Parameters[0]; + +interface DataType { + key: React.Key; + name: string; + value: string; +} + +type ColumnTypes = Exclude; + +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 = ({index, ...props}) => { + const [form] = Form.useForm(); + return ( +
+ + + +
+ ); +}; +const EditableCell: React.FC = ({ + title, + editable, + children, + dataIndex, + record, + handleSave, + ...restProps + }) => { + const [editing, setEditing] = useState(false); + const inputRef = useRef(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 ? ( + + + + ) : ( +
0?"":style.HttpEditable} style={{paddingRight: 24}} onClick={toggleEdit}> + {children[1]&&children[1].length>0?children:"点击编辑 "+title} +
+ ); + } + + return {childNode}; +}; + + +const addSelectItem: MenuProps['items'] = [ + { + key: SelectAddEnum.ADD, + label: ( +
添加一行
+ ), + }, + { + key: SelectAddEnum.IMPORT, + label: ( +
导入
+ ), + } +] +const Params: React.FC = () => { + const [dataSource, setDataSource] = useState([ + { + 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 ( +
+ + + +
+ +
+ + + +
+ ) + + }, + dataIndex: 'operation', + render: (_, record: { key: React.Key }) => + dataSource.length >= 1 ? ( + handleDelete(record.key)}>删除 + ) : 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 ( +
+ 'editable-row'} + bordered + dataSource={dataSource} + columns={columns as ColumnTypes} + /> + + ); +}; + +export default Params;