feat: 资源文档导入页逻辑优化和修正

# Reviewed, transaction id: 15314
ielgnaw · Aug 14, 2024 · 5b38eef · 5b38eef
1 parent e3cf02d
commit 5b38eef
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
@@ -1577,6 +1577,9 @@ const lang: ILANG = {
   '环境删除': ['Stage Delete'],
   '环境更新': ['Stage Update'],
   '服务更新': ['Backend Update'],
+  '文件名需要跟资源名称完全一致才能导入，请检查文件名': ['Filename must matches resource name'],
+  '已匹配到资源': ['Resource matched'],
+  '未匹配到资源': ['Resource not matched'],
 
   // 变量的使用 $t('test', { vari1: 1, vari2: 2 })
   // // 变量的使用 $t('test', { vari1: 1, vari2: 2 })

diff --git a/src/dashboard-front/src/views/resource/setting/import-doc.vue b/src/dashboard-front/src/views/resource/setting/import-doc.vue
@@ -120,12 +120,14 @@
         show-overflow-tooltip
         :checked="checkData"
         :is-row-select-enable="isRowSelectEnable"
+        :row-class="getRowClass"
         @selection-change="handleSelectionChange"
       >
         <bk-table-column
           width="80"
           type="selection"
           align="center"
+          :explain="{ content: (col: any, row: any) => getColExplainContent(row) }"
         />
         <bk-table-column
           v-if="docType === 'archive'"
@@ -163,8 +165,14 @@
           prop="path"
         >
           <template #default="{ data }">
-            <span class="danger-c" v-if="!!data?.resource_doc">{{ t('覆盖') }}</span>
-            <span class="success-c" v-else>{{ t('新建') }}</span>
+            <!--  若是没匹配到资源，给出提示  -->
+            <template v-if="!data?.resource">
+              <span class="warning-c">{{ t('未匹配到资源') }}</span>
+            </template>
+            <template v-else>
+              <span class="danger-c" v-if="!!data?.resource_doc">{{ t('覆盖') }}</span>
+              <span class="success-c" v-else>{{ t('新建') }}</span>
+            </template>
           </template>
         </bk-table-column>
       </bk-table>
@@ -360,11 +368,24 @@ const handleImportDoc = async () => {
 
 // 没有资源不能导入
 const isRowSelectEnable = (data: any) => {
-  console.log('row', data);
+  // console.log('row', data);
   if (docType.value === 'swagger') return true; // 如果是swagger 则可以选择
   return !!data?.row.resource;
 };
 
+// 获取 checkbox 悬浮时的文本
+const getColExplainContent = (row: any) => {
+  if (docType.value !== 'swagger' && !row?.resource) {
+    return t('文件名需要跟资源名称完全一致才能导入，请检查文件名');
+  }
+  return t('已匹配到资源');
+};
+
+// 为不能选中的行添加类名
+const getRowClass = (data: any) => {
+  if (docType.value !== 'swagger' && !data?.resource) return 'row-disabled';
+};
+
 // 取消返回到资源列表
 const goBack = () => {
   router.push({
@@ -431,5 +452,12 @@ const handleHiddenExample = () => {
       display: none !important;
     }
   }
+
+  // 不能被选中的表格行的样式
+  :deep(.row-disabled) {
+    td {
+      background-color: #fafbfd;
+    }
+  }
 }
 </style>