修改 LeftTree引入地址
parent
9a76737033
commit
ec3c5bc3ad
|
|
@ -1,147 +0,0 @@
|
||||||
import { Input, Tree } from "antd";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
|
|
||||||
const { Search } = Input;
|
|
||||||
|
|
||||||
const LeftTree = (props) => {
|
|
||||||
const {
|
|
||||||
onClick,
|
|
||||||
expandedKeys: externalExpandedKeys,
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
const [treeData, setTreeData] = useState([]);
|
|
||||||
const [expandedKeys, setExpandedKeys] = useState([]);
|
|
||||||
const [searchValue, setSearchValue] = useState("");
|
|
||||||
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
|
||||||
|
|
||||||
const getData = () => {
|
|
||||||
setTreeData([
|
|
||||||
{
|
|
||||||
title: "parent 1",
|
|
||||||
key: "0-0",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "parent 1-0",
|
|
||||||
key: "0-0-0",
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: "leaf",
|
|
||||||
key: "0-0-0-0",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "leaf",
|
|
||||||
key: "0-0-0-1",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "parent 1-1",
|
|
||||||
key: "0-0-1",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
getData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setExpandedKeys(externalExpandedKeys);
|
|
||||||
}, [externalExpandedKeys]);
|
|
||||||
|
|
||||||
// 展开所有包含匹配项的父节点
|
|
||||||
const getAllExpandedKeys = (data, searchValue, keys = []) => {
|
|
||||||
data.forEach((node) => {
|
|
||||||
if (node.children) {
|
|
||||||
if (node.title.includes(searchValue)
|
|
||||||
|| node.children.some(child => child.title.includes(searchValue))) {
|
|
||||||
keys.push(node.key);
|
|
||||||
}
|
|
||||||
getAllExpandedKeys(node.children, searchValue, keys);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return keys;
|
|
||||||
};
|
|
||||||
|
|
||||||
const onExpand = (newExpandedKeys) => {
|
|
||||||
setExpandedKeys(newExpandedKeys);
|
|
||||||
setAutoExpandParent(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onFilterTreeData = (value) => {
|
|
||||||
setSearchValue(value);
|
|
||||||
setAutoExpandParent(true);
|
|
||||||
|
|
||||||
if (!value) {
|
|
||||||
setExpandedKeys([]);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const expandedKeys = getAllExpandedKeys(treeData, value);
|
|
||||||
|
|
||||||
setExpandedKeys(expandedKeys);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSearch = (value) => {
|
|
||||||
if (value === searchValue)
|
|
||||||
return;
|
|
||||||
onFilterTreeData(value);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 渲染带高亮的标题
|
|
||||||
const renderTitle = (title) => {
|
|
||||||
if (!searchValue)
|
|
||||||
return title;
|
|
||||||
|
|
||||||
const index = title.indexOf(searchValue);
|
|
||||||
if (index === -1)
|
|
||||||
return title;
|
|
||||||
|
|
||||||
const beforeStr = title.substring(0, index);
|
|
||||||
const afterStr = title.substring(index + searchValue.length);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<span>
|
|
||||||
{beforeStr}
|
|
||||||
<span style={{ color: "#f50" }}>{searchValue}</span>
|
|
||||||
{afterStr}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 递归处理树节点标题显示
|
|
||||||
const processTreeData = (data) => {
|
|
||||||
return data.map(node => ({
|
|
||||||
...node,
|
|
||||||
title: renderTitle(node.title),
|
|
||||||
children: node.children ? processTreeData(node.children) : undefined,
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
const processedTreeData = processTreeData(treeData);
|
|
||||||
|
|
||||||
const onSelect = (selectedKeys, event) => {
|
|
||||||
onClick?.(selectedKeys, event);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{ width: 300 }}>
|
|
||||||
<Search
|
|
||||||
style={{ marginBottom: 8 }}
|
|
||||||
placeholder="输入关键字进行过滤"
|
|
||||||
onSearch={onSearch}
|
|
||||||
/>
|
|
||||||
<Tree
|
|
||||||
onExpand={onExpand}
|
|
||||||
onSelect={onSelect}
|
|
||||||
autoExpandParent={autoExpandParent}
|
|
||||||
expandedKeys={expandedKeys}
|
|
||||||
treeData={processedTreeData}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default LeftTree;
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
import { Button, Form, message, Modal, Space, Tag } from "antd";
|
import { Button, Form, message, Modal, Space, Tag } from "antd";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import FormBuilder from "zy-react-library/components/FormBuilder";
|
import FormBuilder from "zy-react-library/components/FormBuilder";
|
||||||
|
import LeftTree from "zy-react-library/components/LeftTree/Department/Gwj/index";
|
||||||
import Search from "zy-react-library/components/Search";
|
import Search from "zy-react-library/components/Search";
|
||||||
import Table from "zy-react-library/components/Table";
|
import Table from "zy-react-library/components/Table";
|
||||||
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
|
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
|
||||||
import useTable from "zy-react-library/hooks/useTable";
|
import useTable from "zy-react-library/hooks/useTable";
|
||||||
import { PHONE } from "zy-react-library/regular";
|
import { PHONE } from "zy-react-library/regular";
|
||||||
import LeftTree from "~/components/LeftTree";
|
|
||||||
|
|
||||||
const DEPARTMENT_LEVEL_ENUM = [
|
const DEPARTMENT_LEVEL_ENUM = [
|
||||||
{ id: "departmentLevel0001", name: "分公司" },
|
{ id: "departmentLevel0001", name: "分公司" },
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
import { Button, Form, message, Modal, Space, Tag } from "antd";
|
import { Button, Form, message, Modal, Space, Tag } from "antd";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import FormBuilder from "zy-react-library/components/FormBuilder";
|
import FormBuilder from "zy-react-library/components/FormBuilder";
|
||||||
|
import LeftTree from "zy-react-library/components/LeftTree/Department/Gwj/index";
|
||||||
import Search from "zy-react-library/components/Search";
|
import Search from "zy-react-library/components/Search";
|
||||||
import Table from "zy-react-library/components/Table";
|
import Table from "zy-react-library/components/Table";
|
||||||
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
|
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
|
||||||
import useTable from "zy-react-library/hooks/useTable";
|
import useTable from "zy-react-library/hooks/useTable";
|
||||||
import LeftTree from "~/components/LeftTree";
|
|
||||||
|
|
||||||
function Position() {
|
function Position() {
|
||||||
const [addModalOpen, setAddModalOpen] = useState(false);
|
const [addModalOpen, setAddModalOpen] = useState(false);
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
import { Button, Form, message, Modal, Space } from "antd";
|
import { Button, Form, message, Modal, Space } from "antd";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import ImportFile from "zy-react-library/components/ImportFile";
|
import ImportFile from "zy-react-library/components/ImportFile";
|
||||||
|
import LeftTree from "zy-react-library/components/LeftTree/Department/Gwj/index";
|
||||||
import Search from "zy-react-library/components/Search";
|
import Search from "zy-react-library/components/Search";
|
||||||
import Table from "zy-react-library/components/Table";
|
import Table from "zy-react-library/components/Table";
|
||||||
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
|
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
|
||||||
import useTable from "zy-react-library/hooks/useTable";
|
import useTable from "zy-react-library/hooks/useTable";
|
||||||
import LeftTree from "~/components/LeftTree";
|
|
||||||
import Scheduling from "~/pages/Container/Enterprise/User/components/Scheduling";
|
import Scheduling from "~/pages/Container/Enterprise/User/components/Scheduling";
|
||||||
|
|
||||||
function List(props) {
|
function List(props) {
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
import { Button, Form, message, Modal, Space, Tag } from "antd";
|
import { Button, Form, message, Modal, Space, Tag } from "antd";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import FormBuilder from "zy-react-library/components/FormBuilder";
|
import FormBuilder from "zy-react-library/components/FormBuilder";
|
||||||
|
import LeftTree from "zy-react-library/components/LeftTree/Department/Gwj/index";
|
||||||
import Search from "zy-react-library/components/Search";
|
import Search from "zy-react-library/components/Search";
|
||||||
import Table from "zy-react-library/components/Table";
|
import Table from "zy-react-library/components/Table";
|
||||||
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
|
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
|
||||||
import useTable from "zy-react-library/hooks/useTable";
|
import useTable from "zy-react-library/hooks/useTable";
|
||||||
import { PHONE } from "zy-react-library/regular";
|
import { PHONE } from "zy-react-library/regular";
|
||||||
import LeftTree from "~/components/LeftTree";
|
|
||||||
|
|
||||||
const DEPARTMENT_LEVEL_ENUM = [
|
const DEPARTMENT_LEVEL_ENUM = [
|
||||||
{ id: "1", name: "公司级" },
|
{ id: "1", name: "公司级" },
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,11 @@ import { useState } from "react";
|
||||||
import AddIcon from "zy-react-library/components/Icon/AddIcon";
|
import AddIcon from "zy-react-library/components/Icon/AddIcon";
|
||||||
import ImportIcon from "zy-react-library/components/Icon/ImportIcon";
|
import ImportIcon from "zy-react-library/components/Icon/ImportIcon";
|
||||||
import ImportFile from "zy-react-library/components/ImportFile";
|
import ImportFile from "zy-react-library/components/ImportFile";
|
||||||
|
import LeftTree from "zy-react-library/components/LeftTree/Department/Gwj/index";
|
||||||
import Search from "zy-react-library/components/Search";
|
import Search from "zy-react-library/components/Search";
|
||||||
import Table from "zy-react-library/components/Table";
|
import Table from "zy-react-library/components/Table";
|
||||||
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
|
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
|
||||||
import useTable from "zy-react-library/hooks/useTable";
|
import useTable from "zy-react-library/hooks/useTable";
|
||||||
import LeftTree from "~/components/LeftTree";
|
|
||||||
|
|
||||||
export const PERSONNEL_TYPE_ENUM = [
|
export const PERSONNEL_TYPE_ENUM = [
|
||||||
{ id: "0", name: "非流动人员" },
|
{ id: "0", name: "非流动人员" },
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ function Info() {
|
||||||
column={1}
|
column={1}
|
||||||
bordered
|
bordered
|
||||||
items={[
|
items={[
|
||||||
{ label: "企业名称", children: "Zhou" },
|
{ label: "分公司名称", children: "Zhou" },
|
||||||
{ label: "企业状态", children: "Zhou" },
|
{ label: "企业状态", children: "Zhou" },
|
||||||
{ label: "开户人", children: "Zhou" },
|
{ label: "开户人", children: "Zhou" },
|
||||||
{ label: "统一社会信用代码", children: "Zhou" },
|
{ label: "统一社会信用代码", children: "Zhou" },
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
import { Button, Form, message, Modal } from "antd";
|
import { Button, Form, message, Modal } from "antd";
|
||||||
|
import LeftTree from "zy-react-library/components/LeftTree/Department/Gwj/index";
|
||||||
import Search from "zy-react-library/components/Search";
|
import Search from "zy-react-library/components/Search";
|
||||||
import Table from "zy-react-library/components/Table";
|
import Table from "zy-react-library/components/Table";
|
||||||
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
|
import { FORM_ITEM_RENDER_ENUM } from "zy-react-library/enum/formItemRender";
|
||||||
import useTable from "zy-react-library/hooks/useTable";
|
import useTable from "zy-react-library/hooks/useTable";
|
||||||
import LeftTree from "~/components/LeftTree";
|
|
||||||
|
|
||||||
export const PERSONNEL_TYPE_ENUM = [
|
export const PERSONNEL_TYPE_ENUM = [
|
||||||
{ id: "0", name: "非流动人员" },
|
{ id: "0", name: "非流动人员" },
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue