fix(frontend): sql文件展示问题修复 TencentBlueKing#8261

jinquantianxia · Nov 28, 2024 · f633f94 · f633f94
1 parent a172a46
commit f633f94
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 14 deletions.
diff --git a/dbm-ui/frontend/src/locales/zh-cn.json b/dbm-ui/frontend/src/locales/zh-cn.json
@@ -3677,5 +3677,7 @@
   "冷_热节点规格": "冷_热节点规格",
   "同主机关联的其他集群，勾选后一并添加": "同主机关联的其他集群，勾选后一并添加",
   "密码不符合规则": "密码不符合规则",
+  "点击上传": "点击上传",
+  "请选择本地 SQL 文件": "请选择本地 SQL 文件",
   "这行勿动！新增翻译请在上一行添加！": ""
 }
diff --git a/dbm-ui/frontend/src/types/auto-imports.d.ts b/dbm-ui/frontend/src/types/auto-imports.d.ts
@@ -71,6 +71,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
diff --git a/.../common/sql-execute/common/RenderSql/components/sql-content/components/RenderFileList.vue b/.../common/sql-execute/common/RenderSql/components/sql-content/components/RenderFileList.vue
@@ -163,10 +163,12 @@
   watch(
     filenameList,
     () => {
-      localList.value = filenameList.value.map((fileName) => ({
-        id: fileName,
-        name: fileName,
-      }));
+      if (filenameList.value.length) {
+        localList.value = filenameList.value.map((fileName) => ({
+          id: fileName,
+          name: fileName,
+        }));
+      }
     },
     {
       immediate: true,
@@ -182,6 +184,7 @@
   };
 
   const handleRemove = (filename: string) => {
+    modelValue.value = filename;
     const lastesfilenameList = [...filenameList.value];
     _.remove(lastesfilenameList, (item) => item === filename);
     filenameList.value = lastesfilenameList;
@@ -208,18 +211,18 @@
 
   .sql-execute-render-file-list {
     height: 100%;
-    border-right: 1px solid #3d3d40;
     background: #2e2e2e;
+    border-right: 1px solid #3d3d40;
 
     .file-list-header {
+      display: flex;
       height: 40px;
       padding: 0 16px;
+      margin-bottom: 16px;
       font-weight: bold;
       line-height: 16px;
       color: #fff;
-      display: flex;
       align-items: center;
-      margin-bottom: 16px;
     }
 
     .file-list-wrapper {

diff --git a/...ommon/sql-execute/common/RenderSql/components/sql-content/components/local-file/Index.vue b/...ommon/sql-execute/common/RenderSql/components/sql-content/components/local-file/Index.vue
@@ -160,9 +160,11 @@
     }
 
     isInnerChange = true;
-    modelValue.value = uploadFileNameList.value.map(
-      (localFileName) => uploadFileDataMap.value[localFileName].realFilePath,
-    );
+    if (uploadFileNameList.value.length) {
+      modelValue.value = uploadFileNameList.value.map(
+        (localFileName) => uploadFileDataMap.value[localFileName].realFilePath,
+      );
+    }
 
     emits('grammar-check', true, true);
   };
@@ -279,7 +281,7 @@
     delete lastUploadFileDataMap[fileName];
     uploadFileDataMap.value = lastUploadFileDataMap;
 
-    // 如果删除的是当前选中的文件，则重新选择第一个文件
+    // // 如果删除的是当前选中的文件，则重新选择第一个文件
     if (fileName === selectFileName.value && uploadFileNameList.value.length > 0) {
       [selectFileName.value] = uploadFileNameList.value;
     } else {

diff --git a/...tickets/common/components/demand-factory/mysql/import-sql-file/components/SqlFileList.vue b/...tickets/common/components/demand-factory/mysql/import-sql-file/components/SqlFileList.vue
@@ -28,7 +28,11 @@
           active: fileItemData.name === modelValue,
         }"
         @click="handleClick(fileItemData.name)">
-        <span v-overflow-tips>{{ getSQLFilename(fileItemData.name) }}</span>
+        <span
+          v-overflow-tips
+          class="file-name">
+          {{ getSQLFilename(fileItemData.name) }}
+        </span>
       </div>
     </div>
   </div>
@@ -84,10 +88,13 @@
   }
 
   .sql-execute-sql-file-list {
+    display: flex;
     width: 238px;
-    height: 500px;
+    height: calc(100vh - 120px);
     padding-top: 18px;
+    overflow-y: auto;
     border-right: 1px solid #3d3d40;
+    flex-direction: column;
 
     .file-list-title {
       padding: 0 16px;
@@ -131,6 +138,13 @@
         & ~ .file-item {
           margin-top: 8px;
         }
+
+        .file-name {
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
     }
   }