From bbc39fd4d36826465ecddd3683e13cc64c2c2bad Mon Sep 17 00:00:00 2001 From: wulibaibao <13366578180@163.com> Date: Fri, 15 Apr 2022 16:27:47 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=A8=E4=BE=8B=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E6=8B=96=E6=8B=BD=E5=AE=BD=E5=BA=A6=EF=BC=8C=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=88=86=E7=B1=BB=E6=8F=90=E7=A4=BA=E6=A1=86?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/components/Public/ConfirmInput.tsx | 51 ++++++++++ src/pages/Suite/components/Case/index.tsx | 3 +- src/pages/Suite/components/LeftList/index.tsx | 99 ++++++++++--------- .../components/RightContent/BatchMoveCase.tsx | 28 ++---- .../components/RightContent/SuiteList.tsx | 3 +- .../Suite/components/RightContent/index.tsx | 95 +++++++++++++++--- 7 files changed, 201 insertions(+), 79 deletions(-) create mode 100644 src/components/Public/ConfirmInput.tsx diff --git a/package.json b/package.json index d7827d7..f45c57f 100644 --- a/package.json +++ b/package.json @@ -83,6 +83,7 @@ "react-fittext": "^1.0.0", "react-helmet-async": "^1.0.4", "react-router": "^4.3.1", + "react-split-pane": "^0.1.92", "reactcss": "^1.2.3", "styled-components": "^5.3.5", "umi": "^3.5.0", diff --git a/src/components/Public/ConfirmInput.tsx b/src/components/Public/ConfirmInput.tsx new file mode 100644 index 0000000..4c9e262 --- /dev/null +++ b/src/components/Public/ConfirmInput.tsx @@ -0,0 +1,51 @@ +import React from "react" +import { Space, Input } from "antd" + +import { ReactComponent as CancelIcon } from "@/assets/case/cancel.svg" +import { ReactComponent as ConfirmIcon } from "@/assets/case/confirm.svg" +import styled from "styled-components" + +type IProps = { + onOk: (val: any) => void; + onCancel?: () => void; + style?: any +} + +const IconWrapper = styled.div` + cursor: pointer; + display: flex; + align-items: center; +` + +const ConfirmInput: React.FC = (props) => { + const { onOk, onCancel, style } = props + + const [inp, setInp] = React.useState("") + + const handleCancel = () => { + setInp("") + onCancel && onCancel() + } + + const handleOk = () => { + onOk && onOk(inp) + setInp("") + } + + return ( + + setInp(target.value)} + /> + + + + + + + + ) +} + +export default ConfirmInput \ No newline at end of file diff --git a/src/pages/Suite/components/Case/index.tsx b/src/pages/Suite/components/Case/index.tsx index b61f83f..39b6bc9 100644 --- a/src/pages/Suite/components/Case/index.tsx +++ b/src/pages/Suite/components/Case/index.tsx @@ -75,8 +75,9 @@ const Case: React.FC = (props) => { setEditing(false) } + //width: 513, borderLeft: "1px solid rgba(0, 0, 0, 0.06)" return ( -
+
{currentCase?.gmt_created} diff --git a/src/pages/Suite/components/LeftList/index.tsx b/src/pages/Suite/components/LeftList/index.tsx index b8b449a..4818497 100644 --- a/src/pages/Suite/components/LeftList/index.tsx +++ b/src/pages/Suite/components/LeftList/index.tsx @@ -1,33 +1,61 @@ import React from "react" -import { Space, Input, message, Row, Typography, Dropdown, Menu } from "antd" +import { Space, Input, message, Row, Typography, Dropdown, Menu, Tooltip } from "antd" import { PlusOutlined, MoreOutlined } from "@ant-design/icons" import styled from "styled-components" -import { createModule, queryModuleName, renameModule, deleteModule, queryModules } from "@/pages/Suite/services" +import { createModule, renameModule, deleteModule } from "@/pages/Suite/services" import { useCaseProvider } from "../../provider" import { history, useParams } from "umi" import { ModuleItem, ModulesContainer, FuncModuleIcon } from "./styled" +import ConfirmInput from "@/components/Public/ConfirmInput" +import { useSize } from "ahooks" + +const ResizeRow: React.FC = (props) => { + const { style, name, count } = props + const countRef = React.useRef(null) as any + const row = React.useRef(null) as any + const countSize = useSize(countRef) + const rowSize = useSize(row) + + const width = React.useMemo(() => { + if (rowSize && countSize) return rowSize.width - countSize.width - 1 + return 0 + }, [rowSize, countSize]) + + return ( + +
+ + + {name} + + +
+
+ + {`(${count || 0})`} + +
+ + ) +} type IProps = { [k: string]: any } const LeftList: React.FC = (props) => { - const { state, dispath } = useCaseProvider() + const { state, refreshModules } = useCaseProvider() const { mod_id } = useParams() as any const { modules, caseCount } = state const [edit, setEdit] = React.useState(false) - const [inp, setInp] = React.useState('') const [rename, setRename] = React.useState(null) - const getModules = async () => { - const { data, code, msg, count } = await queryModules(0) - if (code !== 200) return dispath({ type: "update", payload: [] }) - dispath({ type: "update", payload: { modules: data, caseCount: count } }) - } - React.useEffect(() => { - getModules() + refreshModules() return () => { handleRestInput() } @@ -35,7 +63,6 @@ const LeftList: React.FC = (props) => { const handleRestInput = () => { setRename(null) - setInp("") setEdit(false) } @@ -43,24 +70,18 @@ const LeftList: React.FC = (props) => { setEdit(true) } - const handleCreateModuleOk = async () => { - if (!inp) { - setEdit(false) - setInp("") - return - } - const { code, msg, data } = await createModule({ name: inp, parent: 0, level: 0 }) + const handleCreateModuleOk = async (name: string) => { + if (!name) return + const { code, msg, data } = await createModule({ name, parent: 0, level: 0 }) if (code !== 200) { message.error(msg) return } - dispath({ type: "update", payload: modules.concat(data) }) + refreshModules() setEdit(false) - setInp("") } const handleMenuClick = (e: any, id: string) => { - console.log(e, id) switch (e.key) { case "rename": return setRename(id); case "delete": return moduleDelete(id); @@ -79,7 +100,7 @@ const LeftList: React.FC = (props) => { if (!name) return handleRestInput() const { code, msg } = await renameModule(id, { name }) if (code !== 200) return message.error(msg) - await getModules() + refreshModules() handleRestInput() } @@ -123,29 +144,19 @@ const LeftList: React.FC = (props) => { { rename === mod.id ? - handleRenameOk(mod.id, e.target.value)} + handleRenameOk(mod.id, val)} + onCancel={() => setRename(null)} /> : <> - - - {mod.name} - - - {`(${mod.count || 0})`} - - + name={mod.name} + count={mod.count} + /> handleMenuClick(e, mod.id)}> @@ -171,11 +182,9 @@ const LeftList: React.FC = (props) => { { edit && - setInp(target.value)} + setEdit(false)} /> } diff --git a/src/pages/Suite/components/RightContent/BatchMoveCase.tsx b/src/pages/Suite/components/RightContent/BatchMoveCase.tsx index cc1a98a..892a394 100644 --- a/src/pages/Suite/components/RightContent/BatchMoveCase.tsx +++ b/src/pages/Suite/components/RightContent/BatchMoveCase.tsx @@ -2,8 +2,8 @@ import React from "react" import { Modal, Form, Input, Space, Button, Radio, Divider, Typography, message } from "antd" import { useCaseProvider } from "../../provider"; import { useParams } from "umi" -import { CheckOutlined, CloseOutlined } from "@ant-design/icons" import { createModule, moveCase } from "../../services"; +import ConfirmInput from "@/components/Public/ConfirmInput"; type IProps = { onOk: () => void; @@ -21,7 +21,6 @@ const BatchMoveCase: React.ForwardRefRenderFunction = (props, ref const { state: { modules }, refreshModules } = useCaseProvider() const [edit, setEdit] = React.useState(false) - const [inp, setInp] = React.useState("") const [visible, setVisible] = React.useState(false) const [loading, setLoading] = React.useState(false) @@ -42,7 +41,6 @@ const BatchMoveCase: React.ForwardRefRenderFunction = (props, ref setVisible(false) setLoading(false) setSource(undefined) - setInp("") setEdit(false) setMoveCaseId(mod_id) } @@ -64,8 +62,8 @@ const BatchMoveCase: React.ForwardRefRenderFunction = (props, ref handleCancel() } - const handleCreate = async () => { - const { code, msg } = await createModule({ name: inp, parent: 0, level: 0 }) + const handleCreate = async (name: string) => { + const { code, msg } = await createModule({ name, parent: 0, level: 0 }) if (code !== 200) { return message.error(msg) } @@ -74,7 +72,6 @@ const BatchMoveCase: React.ForwardRefRenderFunction = (props, ref } const handleEidtOK = () => { - setInp(""); setEdit(false) } @@ -107,21 +104,10 @@ const BatchMoveCase: React.ForwardRefRenderFunction = (props, ref { edit ? - - setInp(target.value)} - /> - - - : + setEdit(false)} + /> : setEdit(true)}> diff --git a/src/pages/Suite/components/RightContent/SuiteList.tsx b/src/pages/Suite/components/RightContent/SuiteList.tsx index f996bf7..19df190 100644 --- a/src/pages/Suite/components/RightContent/SuiteList.tsx +++ b/src/pages/Suite/components/RightContent/SuiteList.tsx @@ -72,8 +72,9 @@ const SuiteList: React.FC = (props) => { setCheckAll(list.length === allCaseId.length); } + //width: "calc(100% - 514px)", return ( -
+
= (props) => { return null }, [mod_id, modules]) + const contentRef = React.useRef(null) as any + const contentSize = useSize(contentRef) + return (
@@ -182,17 +247,25 @@ const RightContent: React.FC = (props) => { { cases.length === 0 ? : - - - getModalCase(defaultParams)} - /> - + + + + + getModalCase(defaultParams)} + /> + + }
-- Gitee