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

import React, { useEffect, useMemo, useRef, useState } from "react";
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";
import ER from "./components/ER";
import AddTable from "./components/AddTable";
import { useModel, history } from "umi";
import NoData from "@/assets/no-data.png";
import { TableItemType } from "@/type";

const { Content, Header } = Layout;
export default function index() {
  const [active, setActive] = useState(0);
  const [showNavigator, setShowNavigator] = useState(true);
  const addTableRef = useRef<{ open: () => void }>();
  const { project, setProject, setPlayModeEnable } = useModel("erModel");
  const [searchKeyword, setSearchKeyword] = useState("");
  const [selectKey, setSelectKey] = useState<string>("");

  useEffect(() => {
    setPlayModeEnable(true);
  }, [project]);

  const descItems: DescriptionsProps["items"] = [
    {
      key: "1",
      label: "模型名称",
      children: "用户模型名称",
    },
    {
      key: "2",
      label: "创建用户",
      children: "张XX",
    },
    {
      key: "3",
      label: "创建时间",
      children: "2024-12-12 13:45",
    },
    {
      key: "4",
      label: "更新时间",
      children: "2024-12-12 13:45",
    },
    {
      key: "5",
      label: "发布状态",
      children: "未发布",
    },
    {
      key: "6",
      label: "数据库同步",
      children: "5/6",
    },
    {
      key: "7",
      label: "描述",
      children: "模型说明啊多发点是否，的发射点发射点，打发打发",
    },
  ];

  const tableData: MenuProps["items"] = useMemo(() => {
    const { tables } = project;
    const treeList: {
      key: string;
      label: string | React.ReactNode;
      icon: React.ReactNode;
      children?: MenuProps["items"];
    }[] = [];

    tables.forEach((item) => {
      const name = item.table.langNameList?.find(
        (item) => item.name === "zh-CN"
      )?.value;
      const newItem = {
        key: item.table.id,
        label: item.table.schemaName + `${name ? `(${name})}` : ""}`,
        icon: <i className="iconfont icon-biaogebeifen" />,
        // children: [],
      };
      if (!item.table.parentBusinessTableId) {
        treeList.push(newItem);
      } else {
        const parent = treeList.find(
          (tableItem) => tableItem?.key === item.table.parentBusinessTableId
        );
        if (parent) {
          if(!parent?.children) {
            parent.children = [];
          }
          parent.children?.push(newItem);
        }
      }
    });
    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],
    });
  };

  const extra = (
    <div className="flex gap-12px">
      <a>
        <i className="iconfont icon-tongbu text-12px" />
        一键同步
      </a>
      <a>
        <i className="iconfont icon-bianji text-12px" />
        修改
      </a>
      <a onClick={() => history.push(`/er/${project.id}`)}>
        <i className="iconfont icon-bianji text-12px" />
        进入编辑
      </a>
      <a>
        <i className="iconfont icon-moban text-14px" />
        保存为模板
      </a>
    </div>
  );

  return (
    <Layout className="h-100vh flex flex-col bg-#fafafa p-12px">
      <Header
        className="shadow-sm"
        style={{
          backgroundColor: "#fff",
          padding: 16,
          height: "auto",
          borderRadius: 8,
          // boxShadow: "0 2px 4px rgba(0, 0, 0, 0.15)",
          marginBottom: 12,
        }}
      >
        <Descriptions
          title={
            <span>
              <svg className="iconfont w-14px h-14px m-r-4px">
                <use xlinkHref="#icon-shujumoxing" />
              </svg>
              模型详情
            </span>
          }
          items={descItems}
          extra={extra}
        ></Descriptions>
      </Header>

      <Content className="flex-1 flex gap-12px">
        <div className="left w-300px shrink-0 h-full shadow-sm bg-#fff rounded-8px">
          <div
            className="
              flex 
              justify-between
              header-tit 
              p-x-16px 
              p-y-12px 
              text-16px 
              font-bold 
              text-rgba(0, 0, 0, 0.88) 
              border-b-1px 
              border-b-#eee 
              border-b-solid"
          >
            <div>
              <svg className="iconfont w-14px h-14px m-r-4px">
                <use xlinkHref="#icon-biaoge" />
              </svg>
              <span>数据表</span>
            </div>
            <div>
              <Input
                placeholder="搜索"
                className="w-100px m-r-4px"
                suffix={<SearchOutlined />}
                value={searchKeyword}
                onChange={(e) => setSearchKeyword(e.target.value)}
              />
              <Tooltip title="添加数据表">
                <Button
                  type="primary"
                  icon={<PlusOutlined />}
                  onClick={() => addTableRef.current?.open()}
                ></Button>
              </Tooltip>
            </div>
          </div>
          <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">
            <div className="left flex gap-8px">
              <Button
                type={active === 0 ? "primary" : "default"}
                onClick={() => setActive(0)}
              >
                ER图
              </Button>
              <Button
                type={active === 1 ? "primary" : "default"}
                onClick={() => setActive(1)}
              >
                实体
              </Button>
            </div>
            <div className="right flex gap-8px m-b-12px">
              {active === 0 ? (
                <>
                  <Input placeholder="搜索" suffix={<SearchOutlined />} />
                  <Button
                    type={showNavigator ? "primary" : "default"}
                    onClick={() => setShowNavigator(!showNavigator)}
                    icon={<i className="iconfont icon-xiaoditu text-14px" />}
                  >
                    导航
                  </Button>
                  <Button
                    type="primary"
                    icon={<i className="iconfont icon-quanping_o text-14px" />}
                  >
                    全屏
                  </Button>
                </>
              ) : (
                <>
                  <Input placeholder="搜索" suffix={<SearchOutlined />} />
                </>
              )}
            </div>
          </div>
          <div className="content w-full flex-1">
            {active === 0 ? (
              <div className="er w-full h-full bg-#ccc">
                <ER showNavigator={showNavigator} />
              </div>
            ) : (
              <TableEdit data={currentTable?.tableColumnList || []} />
            )}
          </div>
        </div>
      </Content>
      <AddTable ref={addTableRef} onChange={handleAddTable} />
    </Layout>
  );
}