feat(frontend): sqlserver 工具箱 #3485 (#5317)

TencentBlueKing · Jul 2, 2024 · 2a1fe95 · 2a1fe95
2 parents f6039e4 + d18af5e
commit 2a1fe95
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 81 deletions.
diff --git a/dbm-ui/frontend/src/components/instance-selector/components/sql-server/table/Index.vue b/dbm-ui/frontend/src/components/instance-selector/components/sql-server/table/Index.vue
@@ -123,11 +123,8 @@
     columnFilterChange,
     validateSearchValues,
     handleSearchValueChange,
-  } = useLinkQueryColumnSerach(
-    ClusterTypes.SQLSERVER_HA,
-    ['bk_cloud_id'],
-    () => fetchResources(),
-  );
+  } = useLinkQueryColumnSerach(ClusterTypes.SQLSERVER_HA, ['bk_cloud_id'], () => fetchResources());
+  console.log('debug sqlserver instance')
 
   const activePanel = inject(activePanelInjectionKey);
 

diff --git a/...frontend/src/views/mysql/sql-execute/steps/step1/components/sql-file/local-file/Index.vue b/...frontend/src/views/mysql/sql-execute/steps/step1/components/sql-file/local-file/Index.vue
@@ -76,12 +76,7 @@
 </template>
 <script setup lang="ts">
   import _ from 'lodash';
-  import {
-    computed,
-    onActivated,
-    onDeactivated,
-    ref,
-  } from 'vue';
+  import { computed, onActivated, onDeactivated, ref } from 'vue';
   import { useI18n } from 'vue-i18n';
 
   import { grammarCheck } from '@services/source/sqlImport';
@@ -94,13 +89,10 @@
 
   import CheckError from './components/CheckError.vue';
   import CheckSuccess from './components/CheckSuccess.vue';
-  import RenderFileList, {
-    createFileData,
-    type IFileData,
-  } from './components/FileList.vue';
+  import RenderFileList, { createFileData, type IFileData } from './components/FileList.vue';
 
   interface Props {
-    modelValue: string[]
+    modelValue: string[];
   }
 
   interface Emits {
@@ -132,10 +124,7 @@
         }
         const uploadFileDataList = Object.values(uploadFileDataMap.value);
         for (let i = 0; i < uploadFileDataList.length; i++) {
-          const {
-            isUploadFailed,
-            isCheckFailded,
-          } = uploadFileDataList[i];
+          const { isUploadFailed, isCheckFailded } = uploadFileDataList[i];
           if (isUploadFailed) {
             return false;
           }
@@ -151,8 +140,8 @@
   ];
 
   // 文件结果
-  const getResultValue = () => uploadFileNameList.value
-    .map(localFileName => uploadFileDataMap.value[localFileName].realFilePath);
+  const getResultValue = () =>
+    uploadFileNameList.value.map((localFileName) => uploadFileDataMap.value[localFileName].realFilePath);
 
   // 获取文件内容
   const fetchFileContent = (fileName: string) => {
@@ -176,63 +165,73 @@
   let isInnerChange = false;
 
   // 同步外部值
-  watch(() => props.modelValue, () => {
-    if (isInnerChange) {
-      isInnerChange = false;
-      return;
-    }
-    if (props.modelValue.length < 1) {
-      return;
-    }
-    const localFileNameList = [] as string[];
-    const filePathMap = {} as Record<string, string>;
-
-    props.modelValue.forEach((filePath: string) => {
-      // 本地 SQL 文件上传后会拼接随机数前缀，需要解析正确的文件名
-      const localFileName = getSQLFilename(filePath);
-      localFileNameList.push(localFileName);
-      filePathMap[localFileName] = filePath;
-    });
-
-    uploadFileNameList.value = localFileNameList;
+  watch(
+    () => props.modelValue,
+    () => {
+      if (isInnerChange) {
+        isInnerChange = false;
+        return;
+      }
+      if (props.modelValue.length < 1) {
+        return;
+      }
+      const localFileNameList = [] as string[];
+      const filePathMap = {} as Record<string, string>;
+
+      props.modelValue.forEach((filePath: string) => {
+        // 本地 SQL 文件上传后会拼接随机数前缀，需要解析正确的文件名
+        const localFileName = getSQLFilename(filePath);
+        localFileNameList.push(localFileName);
+        filePathMap[localFileName] = filePath;
+      });
 
-    uploadFileDataMap.value = uploadFileNameList.value.reduce((result, localFileName) => ({
-      ...result,
-      [localFileName]: createFileData({
-        isSuccess: true,
-        isCheckFailded: false,
-        realFilePath: filePathMap[localFileName],
-      }),
-    }), {} as Record<string, IFileData>);
+      uploadFileNameList.value = localFileNameList;
 
-    // 默认选中第一个文件
-    [selectFileName.value] = uploadFileNameList.value;
-    if (props.modelValue.length > 0) {
+      uploadFileDataMap.value = uploadFileNameList.value.reduce(
+        (result, localFileName) => ({
+          ...result,
+          [localFileName]: createFileData({
+            isSuccess: true,
+            isCheckFailded: false,
+            realFilePath: filePathMap[localFileName],
+          }),
+        }),
+        {} as Record<string, IFileData>,
+      );
+
+      // 默认选中第一个文件
+      [selectFileName.value] = uploadFileNameList.value;
+      if (props.modelValue.length > 0) {
+        fetchFileContent(uploadFileDataMap.value[selectFileName.value].realFilePath);
+      }
+    },
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    selectFileName,
+    () => {
+      // 编辑状态不需要 SQL 文件检测，需要异步获取文件内容
+      if (
+        !selectFileName.value ||
+        uploadFileDataMap.value[selectFileName.value].content ||
+        uploadFileDataMap.value[selectFileName.value].grammarCheck
+      ) {
+        return;
+      }
       fetchFileContent(uploadFileDataMap.value[selectFileName.value].realFilePath);
-    }
-  }, {
-    immediate: true,
-  });
-
-  watch(selectFileName, () => {
-    // 编辑状态不需要 SQL 文件检测，需要异步获取文件内容
-    if (!selectFileName.value
-      || uploadFileDataMap.value[selectFileName.value].content
-      || uploadFileDataMap.value[selectFileName.value].grammarCheck) {
-      return;
-    }
-    fetchFileContent(uploadFileDataMap.value[selectFileName.value].realFilePath);
-  }, {
-    immediate: true,
-  });
+    },
+    {
+      immediate: true,
+    },
+  );
 
   const triggerChange = () => {
     const uploadFileDataList = Object.values(uploadFileDataMap.value);
     for (let i = 0; i < uploadFileDataList.length; i++) {
-      const {
-        isUploadFailed,
-        isCheckFailded,
-      } = uploadFileDataList[i];
+      const { isUploadFailed, isCheckFailded } = uploadFileDataList[i];
       if (isUploadFailed || isCheckFailded) {
         emits('grammar-check', false, false);
         return;
@@ -250,17 +249,14 @@
 
   // 开始上传本地文件
   const handleStartUpdate = (event: Event) => {
-    const {
-      files = [],
-    } = event.target as HTMLInputElement;
+    const { files = [] } = event.target as HTMLInputElement;
     if (!files) {
       return;
     }
     const fileNameList: Array<string> = [];
     const currentFileDataMap = {} as Record<string, IFileData>;
     const params = new FormData();
 
-
     Array.from(files).forEach((curFile) => {
       fileNameList.push(curFile.name);
       currentFileDataMap[curFile.name] = createFileData({
@@ -269,7 +265,7 @@
       });
 
       // 上传文件大小限制 1GB (1024 * 1024 * 1024 = 1073741824)
-      if (curFile.size > 1073741824){
+      if (curFile.size > 1073741824) {
         currentFileDataMap[curFile.name] = {
           ...currentFileDataMap[curFile.name],
           realFilePath: '/',
@@ -281,7 +277,6 @@
           isUploading: false,
           uploadErrorMessage: t('文件上传失败——文件大小超过限制（最大为1GB）'),
           grammarCheck: undefined,
-
         };
         return;
       }
@@ -299,7 +294,6 @@
       selectFileName.value = firstFileName;
     }
 
-
     grammarCheck(params)
       .then((data) => {
         const lastUploadFileDataMap = { ...uploadFileDataMap.value };
@@ -338,6 +332,8 @@
           };
         });
         uploadFileDataMap.value = lastUploadFileDataMap;
+
+        console.log('lastUploadFileDataMap = ', lastUploadFileDataMap);
       });
   };
   // 文件排序
@@ -355,8 +351,7 @@
     delete lastUploadFileDataMap[fileName];
     uploadFileDataMap.value = lastUploadFileDataMap;
 
-    if (fileName === selectFileName.value
-      && fileList.length > 0) {
+    if (fileName === selectFileName.value && fileList.length > 0) {
       [selectFileName.value] = fileList;
     }
     triggerChange();