diff --git a/package.json b/package.json index 6d2a842..e0206fe 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "lint": "eslint --ext .js,.jsx,.tsx --fix src" }, "dependencies": { + "@ahooksjs/use-url-state": "^3.5.1", "@ant-design/icons": "^6.1.0", "@ant-design/pro-components": "^2.8.10", "@cqsjjb/jjb-common-decorator": "latest", diff --git a/src/pages/Container/BranchCompany/Average/Part/index.js b/src/pages/Container/BranchCompany/Average/Part/index.js index e6e3610..c8d19d8 100644 --- a/src/pages/Container/BranchCompany/Average/Part/index.js +++ b/src/pages/Container/BranchCompany/Average/Part/index.js @@ -1,3 +1,4 @@ +import useUrlState from "@ahooksjs/use-url-state"; import { RightOutlined } from "@ant-design/icons"; import { Permission } from "@cqsjjb/jjb-common-decorator/permission"; import { Connect } from "@cqsjjb/jjb-dva-runtime"; @@ -12,17 +13,28 @@ import PersonnelSelect from "zy-react-library/components/Select/Personnel/Gwj"; import DepartmentSelectTree from "zy-react-library/components/SelectTree/Department/Gwj"; import Table from "zy-react-library/components/Table"; import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender"; -import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery"; import useTable from "zy-react-library/hooks/useTable"; import { NS_PART } from "~/enumerate/namespace"; function Part(props) { - const urlQuery = useGetUrlQuery(); const [treeData, setTreeData] = useState([]); - const [parentId, setParentId] = useState(urlQuery.eqParentId || ""); - const [parentName, setParentName] = useState(urlQuery.eqParentName || ""); const [addModalOpen, setAddModalOpen] = useState(false); const [currentId, setCurrentId] = useState(""); + const [urlState, setUrlState] = useUrlState({ + parentId: "0", + parentName: "", + backParentIds: [], + backParentNames: [], + }, { + navigateMode: "replace", + parseOptions: { + arrayFormat: "index", + }, + stringifyOptions: { + arrayFormat: "index", + }, + }); + const getTreeData = async () => { const { data } = await props["partTreeList"](); setTreeData(data); @@ -31,7 +43,8 @@ function Part(props) { getTreeData(); }, []); const { tableProps, getData } = useTable(props["partList"], { - params: () => ({ eqParentId: parentId }), + params: () => ({ eqParentId: urlState.parentId }), + manual: true, }); const onDelete = (id) => { @@ -50,31 +63,8 @@ function Part(props) { }; useEffect(() => { - const unlisten = props.history.listen((location) => { - const searchParams = new URLSearchParams(location.search); - const newParentId = searchParams.get("eqParentId"); - const newParentName = searchParams.get("eqParentName"); - - if (newParentId !== parentId || newParentName !== parentName) { - setParentId(newParentId); - setParentName(newParentName); - getData(); - } - }); - - return unlisten; - }, [parentId, parentName]); - - const getNextLevel = (hiddenregion, hiddenregionId) => { - setParentName(hiddenregion); - setParentId(hiddenregionId); - const currentSearchParams = new URLSearchParams(props.history.location.search); - currentSearchParams.set("eqParentId", hiddenregionId); - currentSearchParams.set("eqParentName", hiddenregion); - const queryString = currentSearchParams.toString(); - const newPath = `./part${queryString ? `?${queryString}` : ""}`; - props.history.push(newPath); - }; + getData(); + }, [urlState.parentId]); return ( @@ -88,7 +78,12 @@ function Part(props) { onGetNodePaths={(event) => { const hiddenregion = event.at(-1).hiddenregion; const hiddenregionId = event.at(-1).hiddenregionId; - getNextLevel(hiddenregion, hiddenregionId); + setUrlState({ + parentId: hiddenregionId, + parentName: hiddenregion, + backParentIds: [...urlState.backParentIds, urlState.parentId], + backParentNames: [...urlState.backParentNames, urlState.parentName], + }); }} /> @@ -110,11 +105,16 @@ function Part(props) { )} { - parentId && ( + urlState.parentId !== "0" && (