feat: 完成批量引入及节点添加位置

apps/er-designer/src/components/TableEdit.tsx

@@ -428,7 +428,7 @@ export default function TableEdit(props: {
           onChange: setEditableRowKeys,
         }}
         toolBarRender={() => [
-          <span key="paste" className="text-gray-500">可使用粘贴板导入</span>,
+          <span key="paste" className="text-gray-500">可使用粘贴导入</span>,
           <Tooltip
             key="info"
             title={

apps/er-designer/src/models/erModel.tsx

@@ -425,9 +425,10 @@ export default function erModel() {
    * 添加表
    */
   const addTable = (parentId?: string) => {
-    const area = graphRef.current?.getGraphArea();
-    const x = area?.center.x || 300;
-    const y = area?.center.y || 300;
+    // const area = graphRef.current?.getGraphArea();
+    const rect = graph?.getAllCellsBBox();
+    const x = 100;
+    const y = (rect?.height || 0) + (rect?.y || 0) + 20;
     // 数据表类型动态路由传参
     const newTable = createTable(project.type || 3, project.id, parentId);
     newTable.table.style.x = x;
@@ -439,7 +440,7 @@ export default function erModel() {
       const index = list.findIndex((item) => item.table.id === parentId);
       list.splice(index + 1, 0, newTable);
     } else {
-      list.push(newTable);
+      list.unshift(newTable);
     }
     setProject({
       ...project,

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

@@ -12,7 +12,7 @@ export const render = (graph: Graph, project: ProjectInfo) => {
   const { tables, relations, topicAreas, remarkInfos } = project;
   // 渲染表格
   const renderTable = (tableItem: TableItemType) => {
-    graph.addNode({
+    const node = graph.addNode({
       shape: "table-node",
       x: tableItem.table.style?.x || 100,
       y: tableItem.table.style?.y || 100,
@@ -46,6 +46,7 @@ export const render = (graph: Graph, project: ProjectInfo) => {
         },
       },
     });
+    console.log(node)
   };
   // 渲染主题区域
   const renderTopicArea = (topicArea: TopicAreaInfo) => {

apps/er-designer/src/pages/detail/components/AddTable.tsx

@@ -30,21 +30,23 @@ import {
 } from "@/api";
 import { validateTableCode, validateAliasName } from "@/utils/validator";
 import { pick } from "lodash-es";
+import CustomColorPicker from "@/components/CustomColorPicker";
 
 export default forwardRef(function AddTable(
   props: {
-    onChange: (value: TableItemType) => void;
+    onChange: (tables: TableItemType[]) => void;
   },
   ref
 ) {
   const [open, setOpen] = useState(false);
   const tableItemRef = useRef<TableItemType>();
-  const { project } = useModel("erModel");
+  const { project, graph } = useModel("erModel");
   const [tabActiveKey, setTabActiveKey] = useState("1");
   const [form] = Form.useForm();
   const [form1] = Form.useForm();
   const [formModel, setFormModel] = useState<TableItemType["table"]>();
   const [hideAddTab, setHideAddTab] = useState(false);
+  const [color, setColor] = useState<string>();
 
   useImperativeHandle(ref, () => ({
     open: () => {
@@ -52,6 +54,7 @@ export default forwardRef(function AddTable(
       tableItemRef.current = createTable(project.type, project.id);
       setFormModel(tableItemRef.current.table);
       setOpen(true);
+      setColor(undefined);
     },
     openImportMode: () => {
       setTabActiveKey("2");
@@ -74,17 +77,24 @@ export default forwardRef(function AddTable(
         ?.filter(
           (item: any) =>
             // 过滤当前数据表类型及存在相同schemaName、aliasName的表
-            item?.type == project?.type 
-            // && !project.tables.find(
-            //   (tableItem) =>
-            //     tableItem.table.schemaName === item.schemaName ||
-            //     tableItem.table.aliasName === item.aliasName
-            // )
+            item?.type == project?.type
+          // && !project.tables.find(
+          //   (tableItem) =>
+          //     tableItem.table.schemaName === item.schemaName ||
+          //     tableItem.table.aliasName === item.aliasName
+          // )
         )
         ?.map((item: any) => {
+          // 判断是否存在已引入的表
+          const hasTable = project.tables.find(
+            (tableItem: TableItemType) =>
+              tableItem.table.schemaName === item.schemaName ||
+              tableItem.table.aliasName === item.aliasName
+          );
           return {
             label: `${item?.schemaName}(${item.name})`,
             value: item?.id,
+            disabled: hasTable,
           };
         }) || [];
 
@@ -189,11 +199,26 @@ export default forwardRef(function AddTable(
               rules={[{ required: true, message: "请选择表" }]}
             >
               <Select
+                mode="multiple"
                 placeholder="请选择"
                 loading={loading}
                 options={tableOptions}
               />
             </Form.Item>
+            <Form.Item label="颜色" name="color">
+              <CustomColorPicker onChange={setColor}>
+                {color ? (
+                  <div
+                    className="rounded-4px cus-btn w-32px h-32px bg-#eee flex-none cursor-pointer shadow-inner"
+                    style={{ background: color || "#eee" }}
+                  ></div>
+                ) : (
+                  <span className="bg-#eee px-5px py-3px rounded-4px cursor-pointer text-12px text-#666">
+                    随机生成,点击可选择颜色
+                  </span>
+                )}
+              </CustomColorPicker>
+            </Form.Item>
           </Form>
         </div>
       ),
@@ -211,7 +236,8 @@ export default forwardRef(function AddTable(
   // 获取引入的表转换成模型表
   const getNewTableByTable = async (
     tableData: any,
-    columns: any[]
+    columns: any[],
+    tableOther: Record<string, any> = {}
   ): Promise<TableItemType> => {
     const newTable = createTable(project.type, project.id);
     const langKeyList: string[] = [];
@@ -226,6 +252,7 @@ export default forwardRef(function AddTable(
         langKeyList.push(item.langName);
       }
     });
+
     // 获取全部多语言数据
     const langList = await Promise.all(
       [...new Set(langKeyList)].map((key) =>
@@ -251,6 +278,7 @@ export default forwardRef(function AddTable(
           { name: "zh-CN", value: descName?.["zh-CN"] || "" },
           { name: "en", value: descName?.["en"] || "" },
         ],
+        ...tableOther,
       },
       // 字段数据
       tableColumnList: columns.map((item) => {
@@ -275,10 +303,12 @@ export default forwardRef(function AddTable(
     if (tabActiveKey === "1") {
       form.validateFields().then(() => {
         if (tableItemRef.current && formModel) {
-          props.onChange({
-            ...tableItemRef.current,
-            table: formModel,
-          });
+          props.onChange([
+            {
+              ...tableItemRef.current,
+              table: formModel,
+            },
+          ]);
         }
         form.resetFields();
         setOpen(false);
@@ -291,8 +321,8 @@ export default forwardRef(function AddTable(
         const values = form1.getFieldsValue();
         try {
           setLoadingColumns(true);
-          const resArr = await Promise.all([
-            GetBusinessTablesByTableId(values.table),
+          const requestList = values.table.map((tableId: string) => [
+            GetBusinessTablesByTableId(tableId),
             GetAllBusinessTableColumns({
               currentPage: 1,
               pageSize: 2000,
@@ -303,23 +333,73 @@ export default forwardRef(function AddTable(
               filters: [
                 {
                   name: "BusinessTableId",
-                  value: values.table,
+                  value: tableId,
                 },
               ],
             }),
           ]);
-          if (resArr[0]?.result?.[0]) {
-            const tableItem = await getNewTableByTable(
-              resArr[0]?.result?.[0],
-              resArr[1]?.result?.model || []
-            );
-            props.onChange(tableItem);
-            console.log(tableItem);
-            form1.resetFields();
-            setOpen(false);
-          } else {
-            message.error("获取数据失败");
+          if (requestList.length === 0) {
+            message.error("请选择要引入的表");
+            return;
           }
+          const resArr = await Promise.allSettled(
+            (requestList as Promise<any>[]).flat(1)
+          );
+
+          const tableMap: Record<string, any> = {};
+          resArr.forEach((res) => {
+            if (res.status === "fulfilled") {
+              const value = res.value?.result;
+              // 表格数据
+              if (Array.isArray(value) && value[0]) {
+                tableMap[value[0].id] = {
+                  table: value[0],
+                  tableColumnList: [],
+                };
+              } else {
+                // 字段数据
+                const model = res.value?.result?.model;
+                const tableId = model?.[0]?.businessTableId;
+                if (tableId) {
+                  if (tableMap[tableId]) {
+                    tableMap[tableId].tableColumnList = model;
+                  } else {
+                    tableMap[tableId] = {
+                      table: {},
+                      tableColumnList: model,
+                    };
+                  }
+                }
+              }
+            }
+          });
+
+          const rect = graph?.getAllCellsBBox();
+          // 计算起始位置 默认往最后加
+          const startY = (rect?.height || 0) + (rect?.y || 0) + 20;
+          const result = Object.keys(tableMap).map(async (key, index) => {
+            const table = await getNewTableByTable(
+              tableMap[key].table,
+              tableMap[key].tableColumnList
+            );
+            table.table.style.y = startY;
+            table.table.style.x =
+              100 + index * (project.setting.tableWidth + 20);
+            if (color) {
+              table.table.style.color = color;
+            }
+            return table;
+          });
+
+          const newTables = await Promise.all(result);
+
+          props.onChange(newTables);
+          console.log(newTables);
+          form1.resetFields();
+          setOpen(false);
+        } catch (err) {
+          console.error(err);
+          message.warning("引入失败");
         } finally {
           setLoadingColumns(false);
         }
@@ -347,7 +427,7 @@ export default forwardRef(function AddTable(
       }}
     >
       <Tabs
-        items={items.filter(item => hideAddTab ? item.key === '2' : true)}
+        items={items.filter((item) => (hideAddTab ? item.key === "2" : true))}
         activeKey={tabActiveKey}
         onChange={handleChangeTableActiveKey}
       />

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

@@ -213,12 +213,14 @@ export default function index() {
     });
   }, [currentTable, seachColumn]);
 
-  const handleAddTable = (tableItem: TableItemType) => {
+  // 处理添加表
+  const handleAddTable = (tables: TableItemType[]) => {
     setProject({
       ...project,
-      tables: [...project.tables, tableItem],
+      tables: [...tables, ...project.tables],
     });
-    setSelectKey(tableItem.table.id);
+    setSelectKey(tables[0].table.id);
+    graph?.select(tables[0].table.id);
   };
 
   const handleEnterFullscreen = () => {

apps/er-designer/src/pages/er/components/TablePanel.tsx

@@ -57,12 +57,13 @@ export default function TablePanel() {
   };
 
   // 引入表
-  const handleImport = (table: TableItemType) => {
+  const handleImport = (tables: TableItemType[]) => {
     setProject({
       ...project,
-      tables: [...project.tables, table],
+      tables: [...tables, ...project.tables],
     });
-    graph?.select(table.table.id);
+    setTableActive(tables[0].table.id);
+    graph?.select(tables[0].table.id);
   };
 
   return (