feat: Added the function of importing SQL messages

JerryFan626 · JerryFan626 · commit 311b97fa80e5 · 2023-10-14T22:21:02.000+08:00
diff --git a/chat2db-client/src/components/Console/index.tsx b/chat2db-client/src/components/Console/index.tsx
@@ -21,6 +21,7 @@ import configService from '@/service/config';
 // import NewEditor from './NewMonacoEditor';
 import styles from './index.less';
 import indexedDB from '@/indexedDB';
+import ImportBlock from '../ImportBlock';
 
 enum IPromptType {
   NL_2_SQL = 'NL_2_SQL',
@@ -410,6 +411,8 @@ function Console(props: IProps) {
     setPopularizeModal(true);
   };
 
+  const handleImportSQL = () => {};
+
   /**
    * 格式化sql
    */
diff --git a/chat2db-client/src/components/ImportBlock/index.tsx b/chat2db-client/src/components/ImportBlock/index.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Modal, Upload, Button } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import i18n from '@/i18n';
+
+interface IImportBlockProps {
+  children: React.ReactNode;
+  title?: string;
+  accept: string;
+  maxCount?: number;
+  onConfirm?: (fileList: Array<File> | File) => Promise<boolean>;
+}
+
+function ImportBlock(props: IImportBlockProps) {
+  const { title, children, accept, maxCount = 1 } = props;
+
+  const [open, setOpen] = React.useState(false);
+  const [selectedFile, setSelectedFile] = React.useState<Array<File> | null>(null);
+
+  const onClose = () => {
+    setOpen(false);
+  };
+
+  const onOk = async () => {
+    if (!selectedFile) return;
+
+    if (props.onConfirm) {
+      const success = await props.onConfirm(maxCount === 1 ? selectedFile?.[0] : selectedFile);
+      if (success) {
+        setOpen(false);
+      }
+    }
+  };
+
+  const handleBeforeUpload = (file: File, FileList: File[]) => {
+    setSelectedFile(FileList);
+    return false; // 停止自动上传
+  };
+
+  return (
+    <div
+      onClick={() => {
+        setOpen(true);
+      }}
+    >
+      {children}
+
+      <Modal title={title} open={open} onCancel={onClose} onOk={onOk}>
+        <Upload
+          name="file"
+          accept={accept}
+          beforeUpload={handleBeforeUpload}
+          maxCount={maxCount}
+          fileList={selectedFile ? [...selectedFile] : null}
+        >
+          <Button icon={<UploadOutlined />}>{i18n('common.text.selectFile')}</Button>
+        </Upload>
+      </Modal>
+    </div>
+  );
+}
+
+export default ImportBlock;
diff --git a/chat2db-client/src/components/ImportConnection/index.tsx b/chat2db-client/src/components/ImportConnection/index.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Modal, Upload, Button, message } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
+import i18n from '@/i18n';
 
 const uploadFileType = {
   ncx: {
@@ -77,10 +78,9 @@ const ImportConnection: React.FC<IImportConnectionProps> = ({ open, onClose, onC
         accept=".ncx,.dbp"
         beforeUpload={handleBeforeUpload}
         maxCount={1}
-        
         fileList={selectedFile ? [selectedFile] : []}
       >
-        <Button icon={<UploadOutlined />}>Select File</Button>
+        <Button icon={<UploadOutlined />}>{i18n('common.text.selectFile')}</Button>
       </Upload>
     </Modal>
   );
diff --git a/chat2db-client/src/i18n/en-us/common.ts b/chat2db-client/src/i18n/en-us/common.ts
@@ -25,6 +25,7 @@ export default {
   'common.button.open': 'Open',
   'common.button.refresh': 'Refresh',
   'common.button.execute': 'Run',
+  "common.button.import": 'Import SQL',
   'common.button.format': 'Format',
   'common.message.successfulConfig': 'Successful configuration',
   'common.text.successful': 'successful',
@@ -89,5 +90,5 @@ export default {
   'common.text.errorMessage': 'Error Message',
   'common.button.cancelRequest': 'Cancel Request',
   'common.button.executionError': 'Execution Error',
-
+  'common.text.selectFile' : 'Select File'
 };
diff --git a/chat2db-client/src/i18n/zh-cn/common.ts b/chat2db-client/src/i18n/zh-cn/common.ts
@@ -25,6 +25,7 @@ export default {
   'common.button.open': '打开',
   'common.button.refresh': '刷新',
   'common.button.execute': '执行',
+  "common.button.import": '导入SQL',
   'common.button.format': '格式化',
   'common.message.successfulConfig': '配置成功',
   'common.text.successful': '成功',
@@ -87,5 +88,5 @@ export default {
   'common.text.errorMessage': '错误信息',
   'common.button.cancelRequest': '取消请求',
   'common.button.executionError': '执行错误',
-  
+  'common.text.selectFile' : '选择文件'
 };
diff --git a/chat2db-client/src/pages/main/workspace/components/TableList/index.tsx b/chat2db-client/src/pages/main/workspace/components/TableList/index.tsx
@@ -14,11 +14,12 @@ import { approximateTreeNode } from '@/utils';
 import { useUpdateEffect } from '@/hooks/useUpdateEffect';
 import { v4 as uuidV4 } from 'uuid';
 import { IPagingData, ITreeNode } from '@/typings';
-import styles from './index.less';
 import { ExportTypeEnum } from '@/typings/resultTable';
 import historyService from '@/service/history';
 import { debounce } from 'lodash';
 import { dataSourceFormConfigs } from '@/components/ConnectionEdit/config/dataSource';
+import styles from './index.less';
+import ImportBlock from '@/components/ImportBlock';
 
 interface IOption {
   value: TreeNodeType;
@@ -87,6 +88,36 @@ const TableList = dvaModel((props: any) => {
           addConsole();
         },
       },
+      {
+        label: (
+          <ImportBlock
+            title={i18n('common.button.import')}
+            accept={'.sql'}
+            onConfirm={async (file) => {
+              if (Array.isArray(file)) return Promise.resolve(false);
+
+              const reader = new FileReader();
+
+              reader.onload = function (event) {
+                const sqlContent = event.target?.result ?? '';
+                addConsole(sqlContent);
+              };
+
+              reader.readAsText(file);
+              return Promise.resolve(true);
+            }}
+          >
+            <div className={styles.operationItem}>
+              <Iconfont className={styles.operationIcon} code="&#xe66c;" />
+              <div className={styles.operationTitle}>{i18n('common.button.import')}</div>
+            </div>
+          </ImportBlock>
+        ),
+        key: 'importSQL',
+        onClick: () => {
+          // addConsole();
+        },
+      },
       {
         label: (
           <div className={styles.operationItem}>
@@ -238,11 +269,11 @@ const TableList = dvaModel((props: any) => {
     };
   }, [treeBoxRef.current, leftModuleTitleRef.current]);
 
-  const addConsole = () => {
+  const addConsole = (ddl?: string) => {
     const { dataSourceId, databaseName, schemaName, databaseType } = curWorkspaceParams;
     const params = {
       name: `new console`,
-      ddl: '',
+      ddl: ddl || '',
       dataSourceId: dataSourceId!,
       databaseName: databaseName!,
       schemaName: schemaName!,
@@ -326,7 +357,7 @@ const TableList = dvaModel((props: any) => {
     setCurType(selectedOptions[0]);
   }
 
-  const handelChangePagination = (pageNo: number) => {
+  const handleChangePagination = (pageNo: number) => {
     setPagingData({
       ...pagingData,
       pageNo,
@@ -405,16 +436,18 @@ const TableList = dvaModel((props: any) => {
           </div>
         )}
       </div>
+
       <div ref={treeBoxRef} className={styles.treeBox}>
         <LoadingContent isLoading={tableLoading}>
           <Tree initialData={searchedTableList || curList} />
         </LoadingContent>
       </div>
+
       {pagingData?.total > 100 && !searchKey && (
         <div className={styles.paging}>
           <div className={styles.paginationBox}>
             <Pagination
-              onChange={handelChangePagination}
+              onChange={handleChangePagination}
               current={pagingData?.pageNo}
               pageSize={pagingData?.pageSize}
               simple
diff --git a/chat2db-client/src/utils/IntelliSense/field.ts b/chat2db-client/src/utils/IntelliSense/field.ts
@@ -48,7 +48,7 @@ const registerIntelliSenseField = (tableList: string[], dataSourceId, databaseNa
   intelliSenseField.dispose();
   fieldList = {};
   intelliSenseField = monaco.languages.registerCompletionItemProvider('sql', {
-    triggerCharacters: [' ', '.', '('],
+    triggerCharacters: [' ', ',','.', '('],
     provideCompletionItems: async (model, position) => {
       // 获取到当前行文本
       const textUntilPosition = model.getValueInRange({
diff --git a/chat2db-client/src/utils/IntelliSense/table.ts b/chat2db-client/src/utils/IntelliSense/table.ts
@@ -55,7 +55,7 @@ const registerIntelliSenseTable = (
 
   intelliSenseTable.dispose();
   intelliSenseTable = monaco.languages.registerCompletionItemProvider('sql', {
-    triggerCharacters: [' '],
+    triggerCharacters: [' ', ],
     provideCompletionItems: (model, position) => {
       const lineContentUntilPosition = model.getValueInRange({
         startLineNumber: position.lineNumber,
