feat: 详情创建表数据联动

apps/er-designer/src/models/renderer.ts

@@ -14,8 +14,8 @@ export const render = (graph: Graph, project: ProjectInfo) => {
   const renderTable = (tableItem: TableItemType) => {
     graph.addNode({
       shape: "table-node",
-      x: tableItem.table.style?.x || 1000,
-      y: tableItem.table.style?.y || 1000,
+      x: tableItem.table.style?.x || 100,
+      y: tableItem.table.style?.y || 100,
       width: project.setting.tableWidth,
       height: 69,
       id: tableItem.table.id,
@@ -51,8 +51,8 @@ export const render = (graph: Graph, project: ProjectInfo) => {
   const renderTopicArea = (topicArea: TopicAreaInfo) => {
     graph.addNode({
       shape: "topic-node",
-      x: topicArea.style?.x || 1000,
-      y: topicArea.style?.y || 1000,
+      x: topicArea.style?.x || 100,
+      y: topicArea.style?.y || 100,
       width: 200,
       height: 200,
       id: topicArea.id,
@@ -64,8 +64,8 @@ export const render = (graph: Graph, project: ProjectInfo) => {
   const renderRemark = (remark: RemarkInfo) => {
     graph?.addNode({
       shape: "notice-node",
-      x: remark.style?.x || 1000,
-      y: remark.style?.y || 1000,
+      x: remark.style?.x || 100,
+      y: remark.style?.y || 100,
       width: 200,
       height: 200,
       id: remark.id,

apps/er-designer/src/pages/detail/index.tsx

@@ -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>
   );
 }

apps/er-designer/src/utils/index.ts

@@ -95,6 +95,7 @@ export const createBasePredefinedField = (tableId: string): ColumnItem[] => {
       maxLength: 50,
       businessTableId: tableId,
       isRequired: true,
+      isUnique: false,
       isPreDefined: true,
       langNameList: [
         { name: "zh-CN", value: "Id" },
@@ -110,6 +111,7 @@ export const createBasePredefinedField = (tableId: string): ColumnItem[] => {
       maxLength: 0,
       businessTableId: tableId,
       isRequired: true,
+      isUnique: false,
       isPreDefined: true,
       defaultValue: "<%SystemDate%>",
       langNameList: [
@@ -126,6 +128,7 @@ export const createBasePredefinedField = (tableId: string): ColumnItem[] => {
       maxLength: 50,
       businessTableId: tableId,
       isRequired: true,
+      isUnique: false,
       isPreDefined: true,
       defaultValue: "<%UserId%>",
       langNameList: [
@@ -142,6 +145,7 @@ export const createBasePredefinedField = (tableId: string): ColumnItem[] => {
       maxLength: 0,
       businessTableId: tableId,
       isRequired: false,
+      isUnique: false,
       isPreDefined: true,
       defaultValue: "<%SystemDate%>",
       langNameList: [
@@ -158,6 +162,7 @@ export const createBasePredefinedField = (tableId: string): ColumnItem[] => {
       maxLength: 50,
       businessTableId: tableId,
       isRequired: false,
+      isUnique: false,
       isPreDefined: true,
       defaultValue: "<%UserId%>",
       langNameList: [
@@ -174,6 +179,7 @@ export const createBasePredefinedField = (tableId: string): ColumnItem[] => {
       maxLength: 0,
       businessTableId: tableId,
       isRequired: false,
+      isUnique: false,
       isPreDefined: true,
       langNameList: [
         { name: "zh-CN", value: "删除时间" },
@@ -189,6 +195,7 @@ export const createBasePredefinedField = (tableId: string): ColumnItem[] => {
       maxLength: 50,
       businessTableId: tableId,
       isRequired: false,
+      isUnique: false,
       isPreDefined: true,
       defaultValue: "<%UserId%>",
       langNameList: [
@@ -205,6 +212,7 @@ export const createBasePredefinedField = (tableId: string): ColumnItem[] => {
       maxLength: 0,
       businessTableId: tableId,
       isRequired: false,
+      isUnique: false,
       isPreDefined: true,
       langNameList: [
         { name: "zh-CN", value: "删除状态" },
@@ -231,6 +239,7 @@ export const createFlowPredefinedFields = (
       maxLength: 50,
       businessTableId: tableId,
       isRequired: true,
+      isUnique: false,
       isPreDefined: true,
       langNameList: [
         { name: "zh-CN", value: "Id" },
@@ -246,6 +255,7 @@ export const createFlowPredefinedFields = (
       maxLength: 50,
       businessTableId: tableId,
       isRequired: true,
+      isUnique: false,
       isPreDefined: true,
       langNameList: [
         { name: "zh-CN", value: "任务Id" },
@@ -262,6 +272,7 @@ export const createFlowPredefinedFields = (
             maxLength: 50,
             businessTableId: tableId,
             isRequired: true,
+            isUnique: false,
             isPreDefined: true,
             langNameList: [
               { name: "zh-CN", value: "单号" },
@@ -276,6 +287,7 @@ export const createFlowPredefinedFields = (
             maxLength: 0,
             businessTableId: tableId,
             isRequired: false,
+            isUnique: false,
             isPreDefined: true,
             langNameList: [
               { name: "zh-CN", value: "任务状态" },
@@ -289,6 +301,7 @@ export const createFlowPredefinedFields = (
             displayOrder: 5,
             businessTableId: tableId,
             isRequired: true,
+            isUnique: false,
             isPreDefined: true,
             langNameList: [
               { name: "zh-CN", value: "创建时间" },
@@ -304,6 +317,7 @@ export const createFlowPredefinedFields = (
             displayOrder: 3,
             businessTableId: tableId,
             isRequired: false,
+            isUnique: false,
             isPreDefined: true,
             langNameList: [
               { name: "zh-CN", value: "序号" },