Sfoglia il codice sorgente

feat: 添加粘贴板导入功能

liaojiaxing 1 mese fa
parent
commit
ab91005d07
1 ha cambiato i file con 51 aggiunte e 0 eliminazioni
  1. 51 0
      apps/er-designer/src/components/TableEdit.tsx

+ 51 - 0
apps/er-designer/src/components/TableEdit.tsx

@@ -352,6 +352,56 @@ export default function TableEdit(props: {
       });
   };
 
+  // 解析粘贴板数据
+  // 解析出每一行的数据
+  const parseClipBoard = (text: string) => {
+    const arr = text.split("\r\n");
+    return arr.map((item) => item.split("\t"));
+  };
+
+  const regex = /^[a-z][a-z0-9_]*$/;
+
+  const handlePaste = () => {
+    // 获取粘贴板数据
+    navigator.clipboard.readText().then((text) => {
+      console.log("粘贴板数据:", text);
+      // 无文本,或格式不对
+      if (!text || !text.includes("\t")) {
+        message.warning("粘贴数据格式不正确,请检查");
+        return;
+      }
+
+      const parseList = parseClipBoard(text);
+      // 过滤无效数据
+      const list = parseList
+        .filter((item) => item.length >= 3 && regex.test(item?.[0]))
+        .map((item) => ({
+          字段名: item[0],
+          类型: item[1],
+          长度: item[2],
+          中文名: item[3],
+          英文名: item[4],
+          是否必填: item[5],
+          描述: item[6],
+          默认值: item[7],
+        }));
+      if (!list.length) {
+        message.warning("粘贴板无有效数据,请检查");
+        return;
+      }
+
+      importResultRef.current?.open(list, dataSource);
+    });
+  };
+
+  useEffect(() => {
+    // 监听ctrl+v 粘贴表格数据
+    document.addEventListener("paste", handlePaste);
+    return () => {
+      document.removeEventListener("paste", handlePaste);
+    };
+  }, []);
+
   const handleChangeColumn = (list: ColumnItem[]) => {
     setDataSource(list);
   };
@@ -378,6 +428,7 @@ export default function TableEdit(props: {
           onChange: setEditableRowKeys,
         }}
         toolBarRender={() => [
+          <span key="paste" className="text-gray-500">可使用粘贴板导入</span>,
           <Tooltip
             key="info"
             title={