|
@@ -1,5 +1,13 @@
|
|
|
import React, { useEffect, useMemo, useRef, useState } from "react";
|
|
|
-import { Layout, Menu, Button, Descriptions, Input, Tooltip, Empty } from "antd";
|
|
|
+import {
|
|
|
+ Layout,
|
|
|
+ Menu,
|
|
|
+ Button,
|
|
|
+ Descriptions,
|
|
|
+ Input,
|
|
|
+ Tooltip,
|
|
|
+ Empty,
|
|
|
+} from "antd";
|
|
|
import type { DescriptionsProps, MenuProps } from "antd";
|
|
|
import { PlusOutlined, SearchOutlined } from "@ant-design/icons";
|
|
|
import TableEdit from "@/components/TableEdit";
|
|
@@ -13,9 +21,10 @@ const { Content, Header } = Layout;
|
|
|
export default function index() {
|
|
|
const [active, setActive] = useState(0);
|
|
|
const [showNavigator, setShowNavigator] = useState(true);
|
|
|
- const addTableRef = useRef<{open: () => void}>();
|
|
|
+ const addTableRef = useRef<{ open: () => void }>();
|
|
|
const { project, setProject, setPlayModeEnable } = useModel("erModel");
|
|
|
const [searchKeyword, setSearchKeyword] = useState("");
|
|
|
+ const [selectKey, setSelectKey] = useState<string>("");
|
|
|
|
|
|
useEffect(() => {
|
|
|
setPlayModeEnable(true);
|
|
@@ -65,22 +74,29 @@ export default function index() {
|
|
|
key: string;
|
|
|
label: string | React.ReactNode;
|
|
|
icon: React.ReactNode;
|
|
|
- children: MenuProps["items"];
|
|
|
+ children?: MenuProps["items"];
|
|
|
}[] = [];
|
|
|
|
|
|
tables.forEach((item) => {
|
|
|
- const name = item.table.langNameList?.find((item) => item.name === "zh-CN")?.value;
|
|
|
+ const name = item.table.langNameList?.find(
|
|
|
+ (item) => item.name === "zh-CN"
|
|
|
+ )?.value;
|
|
|
const newItem = {
|
|
|
key: item.table.id,
|
|
|
- label: item.table.schemaName + `${name ? `(${name})}` : ''}`,
|
|
|
+ label: item.table.schemaName + `${name ? `(${name})}` : ""}`,
|
|
|
icon: <i className="iconfont icon-biaogebeifen" />,
|
|
|
- children: []
|
|
|
+ // children: [],
|
|
|
};
|
|
|
- if(!item.table.parentBusinessTableId) {
|
|
|
+ if (!item.table.parentBusinessTableId) {
|
|
|
treeList.push(newItem);
|
|
|
} else {
|
|
|
- const parent = treeList.find(tableItem => tableItem?.key === item.table.parentBusinessTableId);
|
|
|
- if(parent) {
|
|
|
+ const parent = treeList.find(
|
|
|
+ (tableItem) => tableItem?.key === item.table.parentBusinessTableId
|
|
|
+ );
|
|
|
+ if (parent) {
|
|
|
+ if(!parent?.children) {
|
|
|
+ parent.children = [];
|
|
|
+ }
|
|
|
parent.children?.push(newItem);
|
|
|
}
|
|
|
}
|
|
@@ -88,12 +104,16 @@ export default function index() {
|
|
|
return treeList;
|
|
|
}, [project]);
|
|
|
|
|
|
+ const currentTable = useMemo(() => {
|
|
|
+ return project.tables.find((item) => item.table.id === selectKey);
|
|
|
+ }, [project, selectKey]);
|
|
|
+
|
|
|
const handleAddTable = (tableItem: TableItemType) => {
|
|
|
setProject({
|
|
|
...project,
|
|
|
- tables: [...project.tables, tableItem]
|
|
|
- })
|
|
|
- }
|
|
|
+ tables: [...project.tables, tableItem],
|
|
|
+ });
|
|
|
+ };
|
|
|
|
|
|
const extra = (
|
|
|
<div className="flex gap-12px">
|
|
@@ -182,10 +202,15 @@ export default function index() {
|
|
|
</Tooltip>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <Menu mode="inline" items={tableData} />
|
|
|
- {
|
|
|
- !tableData.length && <Empty image={NoData} description="点击+添加数据表!" />
|
|
|
- }
|
|
|
+ <Menu
|
|
|
+ mode="inline"
|
|
|
+ items={tableData}
|
|
|
+ selectedKeys={[selectKey]}
|
|
|
+ onSelect={({ key }) => setSelectKey(key)}
|
|
|
+ />
|
|
|
+ {!tableData.length && (
|
|
|
+ <Empty image={NoData} description="点击+添加数据表!" />
|
|
|
+ )}
|
|
|
</div>
|
|
|
<div className="right flex-1 h-full shadow-sm bg-#fff rounded-8px p-12px flex flex-col">
|
|
|
<div className="head flex justify-between">
|
|
@@ -234,12 +259,12 @@ export default function index() {
|
|
|
<ER showNavigator={showNavigator} />
|
|
|
</div>
|
|
|
) : (
|
|
|
- <TableEdit data={[]}/>
|
|
|
+ <TableEdit data={currentTable?.tableColumnList || []} />
|
|
|
)}
|
|
|
</div>
|
|
|
</div>
|
|
|
</Content>
|
|
|
- <AddTable ref={addTableRef} onChange={handleAddTable}/>
|
|
|
+ <AddTable ref={addTableRef} onChange={handleAddTable} />
|
|
|
</Layout>
|
|
|
);
|
|
|
}
|