fix(frontend): 版本文件上传交互修复 TencentBlueKing#4804

yyhenryyy · Jun 6, 2024 · c355d80 · c355d80
1 parent 6129bdc
commit c355d80
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git a/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/LogDetails.vue b/dbm-ui/frontend/src/views/tickets/common/components/demand-factory/mysql/LogDetails.vue
@@ -30,7 +30,7 @@
         <div class="log-status">
           <DbIcon
             v-if="currentSelectFileData?.isSuccessed"
-            style="color: #2dcb56;"
+            style="color: #2dcb56"
             type="check-circle-fill" />
           <DbIcon
             v-else-if="currentSelectFileData?.isPending"
@@ -44,10 +44,10 @@
             type="check-circle-fill" />
           <DbIcon
             v-else
-            style="color: #ea3636;"
+            style="color: #ea3636"
             svg
             type="delete-fill" />
-          <span style="padding-left: 4px; font-size: 12px;">{{ executedStatusDisplayText }}</span>
+          <span style="padding-left: 4px; font-size: 12px">{{ executedStatusDisplayText }}</span>
         </div>
       </div>
       <div style="height: calc(100% - 40px)">
@@ -94,13 +94,15 @@
   // 执行日志
   const { fileLogMap } = useLog(props.rootId, props.nodeId);
 
-  const fileDataList = computed<IFileItem[]>(() => fileList.value.map(name => ({
-    name,
-    isPending: fileLogMap.value[name]?.status === 'RUNNING',
-    isSuccessed: fileLogMap.value[name]?.status === 'SUCCEEDED',
-    isFailed: fileLogMap.value[name]?.status === 'FAILED',
-    isWaiting: fileLogMap.value[name]?.status === 'PENDING',
-  })));
+  const fileDataList = computed<IFileItem[]>(() =>
+    fileList.value.map((name) => ({
+      name,
+      isPending: fileLogMap.value[name]?.status === 'RUNNING',
+      isSuccessed: fileLogMap.value[name]?.status === 'SUCCEEDED',
+      isFailed: fileLogMap.value[name]?.status === 'FAILED',
+      isWaiting: fileLogMap.value[name]?.status === 'PENDING',
+    })),
+  );
 
   const currentSelectFileData = computed(() =>
     _.find(fileDataList.value, (item) => item.name === selectFileName.value),
@@ -109,9 +111,11 @@
   const executedStatusDisplayText = computed(() => {
     if (currentSelectFileData.value?.isSuccessed) {
       return t('执行成功');
-    } if (currentSelectFileData.value?.isPending) {
+    }
+    if (currentSelectFileData.value?.isPending) {
       return t('执行中');
-    } if (currentSelectFileData.value?.isWaiting) {
+    }
+    if (currentSelectFileData.value?.isWaiting) {
       return t('待执行');
     }
     return t('执行失败');
@@ -137,7 +141,7 @@
   .log-layout {
     display: flex;
     width: 928px;
-    height: 100%;
+    height: (calc(100vh - 80px));
     margin: 0 auto;
     overflow: hidden;
     border-radius: 2px;

diff --git a/dbm-ui/frontend/src/views/version-files/list/components/FileContent.vue b/dbm-ui/frontend/src/views/version-files/list/components/FileContent.vue
@@ -119,10 +119,10 @@
             method="put"
             :multiple="false"
             name="file"
+            :select-change="handleSelectFileChange"
             :size="10240"
             :tip="acceptInfo.tips"
             :url="createFileState.uploadUrl"
-            @change="handleSeleFileChange"
             @delete="handleDeleteFile"
             @success="handleUpdateSuccess" />
         </BkFormItem>
@@ -398,8 +398,11 @@
     }
   }, { immediate: true });
 
-  // TODO:旧版本的组件库不支持 select-change属性，只能暂时用change事件来处理
-  const handleSeleFileChange = async (e: { target: HTMLInputElement }) => {
+  const handleSelectFileChange = async (e: { target: HTMLInputElement }) => {
+    if (!e.target.files) {
+      return false;
+    }
+
     const dbType = props.info.name;
     const pkgType = state.active;
     const { version } = createFileState.formdata;
@@ -423,7 +426,9 @@
         raw: fileObj,
       });
     });
-  };
+
+    return true;
+  }
 
   const handleSetDefaultVersion = (row: VersionFileModel) => {
     if (!row.enable) {