fix(frontend): 单据前端交互问题 #8656

TencentBlueKing · Dec 18, 2024 · 96dd56f · 96dd56f
1 parent dfb422f
commit 96dd56f
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 51 deletions.
diff --git a/dbm-ui/frontend/src/components/tag-block/Index.vue b/dbm-ui/frontend/src/components/tag-block/Index.vue
@@ -36,7 +36,7 @@
     <div style="display: none">
       <div
         ref="tipsPanel"
-        style="word-break: keep-all; white-space: nowrap">
+        class="dbm-tag-block-more-panel">
         <BkTag
           v-for="item in data.slice(renderData.length)"
           :key="item">
@@ -151,6 +151,7 @@
           theme: 'light',
           interactive: true,
           arrow: true,
+          maxWidth: 400,
           offset: [0, 8],
           zIndex: 999999,
           hideOnClick: true,
@@ -228,4 +229,12 @@
       }
     }
   }
+
+  .dbm-tag-block-more-panel {
+    margin-top: -8px;
+
+    .bk-tag {
+      margin-top: 8px;
+    }
+  }
 </style>
diff --git a/dbm-ui/frontend/src/services/model/ticket/ticket.ts b/dbm-ui/frontend/src/services/model/ticket/ticket.ts
@@ -139,4 +139,8 @@ export default class Ticket<T extends unknown | DetailBase = unknown> {
       Ticket.STATUS_RUNNING,
     ].includes(this.status);
   }
+
+  get isFinished() {
+    return [Ticket.STATUS_SUCCEEDED, Ticket.STATUS_TERMINATED].includes(this.status);
+  }
 }
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/TableModeTable.vue b/dbm-ui/frontend/src/views/ticket-center/common/TableModeTable.vue
@@ -162,7 +162,7 @@
                 </BkTag>
               </div>
             </div>
-            <template v-else> -- </template>
+            <template v-if="data.related_object.objects.length < 1"> -- </template>
           </template>
         </BkTableColumn>
         <BkTableColumn

diff --git a/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/Index.vue b/dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/Index.vue
@@ -98,7 +98,10 @@
           return;
         }
         ticketData.value = data;
-        loopFetchTicketDetails();
+        // 单据为完成继续下一次轮询
+        if (!data.isFinished) {
+          loopFetchTicketDetails();
+        }
       },
     },
   );
@@ -109,7 +112,7 @@
     });
   };
 
-  const { start: loopFetchTicketDetails } = useTimeoutFn(refreshTicketData, 10000);
+  const { start: loopFetchTicketDetails } = useTimeoutFn(refreshTicketData, 3000);
 
   watch(
     () => props.ticketId,

diff --git a/...nts/task-info/com-factory/common/mysql-import-sqlfile/components/render-sqlfile/Index.vue b/...nts/task-info/com-factory/common/mysql-import-sqlfile/components/render-sqlfile/Index.vue
@@ -13,19 +13,33 @@
         <span>{{ t('变更的 DB:') }}</span>
         <span class="ml-4">
           <BkTag
-            v-for="item in executeObject.dbnames"
+            v-for="item in executeObject.dbnames.slice(0, 3)"
             :key="item">
             {{ item }}
           </BkTag>
+          <BkTag
+            v-if="executeObject.dbnames.length > 3"
+            v-bk-tooltips="{
+              content: executeObject.dbnames.join('\n'),
+            }">
+            ...
+          </BkTag>
           <template v-if="executeObject.dbnames.length < 1">--</template>
         </span>
         <span class="ml-25">{{ t('忽略的 DB:') }}</span>
         <span class="ml-4">
           <BkTag
-            v-for="item in executeObject.ignore_dbnames"
+            v-for="item in executeObject.ignore_dbnames.slice(0, 3)"
             :key="item">
             {{ item }}
           </BkTag>
+          <BkTag
+            v-if="executeObject.ignore_dbnames.length > 3"
+            v-bk-tooltips="{
+              content: executeObject.ignore_dbnames.join('\n'),
+            }">
+            ...
+          </BkTag>
           <template v-if="executeObject.ignore_dbnames.length < 1">--</template>
         </span>
       </span>

diff --git a/...ctory/common/mysql-import-sqlfile/components/render-sqlfile/components/RenderFileList.vue b/...ctory/common/mysql-import-sqlfile/components/render-sqlfile/components/RenderFileList.vue
@@ -28,7 +28,11 @@
           active: fileItemData.name === modelValue,
         }"
         @click="handleClick(fileItemData.name)">
-        <span v-overflow-tips>{{ getSQLFilename(fileItemData.name) }}</span>
+        <div
+          v-overflow-tips
+          class="file-item-text">
+          {{ getSQLFilename(fileItemData.name) }}asdasdasdasdasdasd
+        </div>
       </div>
     </div>
   </div>
@@ -105,12 +109,14 @@
 
       .file-item {
         display: flex;
-        align-items: center;
         height: 36px;
         padding: 0 8px;
+        white-space: pre;
         cursor: pointer;
         background: rgb(255 255 255 / 8%);
         border-radius: 2px;
+        align-items: center;
+        user-select: none;
 
         &:hover {
           background: rgb(255 255 255 / 20%);
@@ -132,6 +138,11 @@
           margin-top: 8px;
         }
       }
+
+      .file-item-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 </style>
diff --git a/dbm-ui/frontend/src/views/ticket-center/self-todo/components/list/components/TableMode.vue b/dbm-ui/frontend/src/views/ticket-center/self-todo/components/list/components/TableMode.vue
@@ -62,6 +62,7 @@
           <template #default="{ data }: { data: TicketModel }">
             <RowAction
               v-if="data"
+              :key="data.id"
               :data="data"
               :ticket-status="ticketStatus"
               @go-ticket-detail="() => handleShowDetail(data)" />

diff --git a/dbm-ui/frontend/src/views/ticket-flow-setting-biz/components/List.vue b/dbm-ui/frontend/src/views/ticket-flow-setting-biz/components/List.vue
@@ -47,29 +47,33 @@
           <BkTableColumn
             fixed="left"
             :label="t('单据类型')"
-            :rowspan="rowSpan"
-            :width="240">
+            :min-width="240"
+            :rowspan="rowSpan">
             <template #default="{ data }">
-              {{ data.ticket_type_display }}
-              <AuthButton
-                v-bk-tooltips="{
-                  content: appendBtnTipMap[appendBtnController[data.ticket_type]],
-                  disabled: !appendBtnController[data.ticket_type],
-                }"
-                action-id="biz_ticket_config_set"
-                class="append-config-btn"
-                :disabled="appendBtnController[data.ticket_type]"
-                :permission="data.permission.biz_ticket_config_set"
-                :resource="dbType"
-                size="small"
-                @click="(event: PointerEvent) => handleShowAppendConfig(data, event)">
-                {{ t('添加免审批') }}
-              </AuthButton>
+              <TextOverflowLayout>
+                {{ data.ticket_type_display }}
+                <template #append>
+                  <AuthButton
+                    v-bk-tooltips="{
+                      content: appendBtnTipMap[appendBtnController[data.ticket_type]],
+                      disabled: !appendBtnController[data.ticket_type],
+                    }"
+                    action-id="biz_ticket_config_set"
+                    class="append-config-btn"
+                    :disabled="appendBtnController[data.ticket_type]"
+                    :permission="data.permission.biz_ticket_config_set"
+                    :resource="dbType"
+                    size="small"
+                    @click="(event: PointerEvent) => handleShowAppendConfig(data, event)">
+                    {{ t('添加免审批') }}
+                  </AuthButton>
+                </template>
+              </TextOverflowLayout>
             </template>
           </BkTableColumn>
           <BkTableColumn
             :label="t('目标')"
-            :width="200">
+            :min-width="200">
             <template #default="{ data }">
               <RenderRow
                 v-if="data.isClusterTarget"
@@ -173,8 +177,8 @@
           <BkTableColumn
             field="flow_desc"
             :label="t('流程预览')"
-            show-overflow-tooltip
-            :width="400">
+            :min-width="400"
+            show-overflow-tooltip>
             <template #default="{ data }">
               <span>{{ data.flow_desc.join(' -> ') }}</span>
             </template>
@@ -481,7 +485,7 @@
     fetchData();
   });
 </script>
-<style lang="less" scoped>
+<style lang="less">
   .ticket-flow-list-content {
     display: flex;
     padding: 16px 24px;
@@ -506,38 +510,36 @@
     }
 
     .tickets-flow-table {
-      :deep(.bk-nested-loading) {
+      .bk-nested-loading {
         height: calc(100vh - 240px);
       }
 
-      :deep(.bk-table) {
-        height: 100% !important;
+      height: 100% !important;
 
-        .configs-head {
-          padding-bottom: 2px;
-          border-bottom: 1px dashed #313238;
-        }
+      .configs-head {
+        padding-bottom: 2px;
+        border-bottom: 1px dashed #313238;
+      }
 
-        .append-config-btn {
-          display: none;
-        }
+      .append-config-btn {
+        display: none;
+      }
 
-        tr {
-          &:hover {
-            .append-config-btn {
-              display: inline-flex;
-              margin-left: 8px;
-            }
+      tr {
+        &:hover {
+          .append-config-btn {
+            display: inline-flex;
+            margin-left: 8px;
           }
         }
+      }
 
-        .flow-node-action {
-          display: inline-block;
-          cursor: pointer;
+      .flow-node-action {
+        display: inline-block;
+        cursor: pointer;
 
-          & ~ .flow-node-action {
-            margin-left: 24px;
-          }
+        & ~ .flow-node-action {
+          margin-left: 24px;
         }
       }
     }