fix(frontend): spider工具箱自测问题 #902

TencentBlueKing · Nov 1, 2023 · c416498 · c416498
1 parent cfa25a3
commit c416498
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 90 deletions.
diff --git a/dbm-ui/frontend/src/styles/base.less b/dbm-ui/frontend/src/styles/base.less
@@ -141,3 +141,12 @@ li {
     }
   }
 }
+
+.tickets-main-is-fullscreen {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+}
diff --git a/dbm-ui/frontend/src/types/auto-imports.d.ts b/dbm-ui/frontend/src/types/auto-imports.d.ts
@@ -1,7 +1,6 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
-// noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 export {}
 declare global {

diff --git a/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/Index.vue b/dbm-ui/frontend/src/views/tickets/my-tickets/components/details/Index.vue
@@ -25,15 +25,19 @@
             :data="state.ticketData"
             width="30%" />
         </DbCard>
-        <DbCard
-          v-model:collapse="demandCollapse"
-          :class="{'is-fullscreen': isFullscreen}"
-          mode="collapse"
-          :title="$t('需求信息')">
-          <DemandInfo
-            :data="state.ticketData"
-            :is-loading="state.isLoading" />
-        </DbCard>
+        <Teleport
+          :disabled="!isFullscreen"
+          to="body">
+          <DbCard
+            v-model:collapse="demandCollapse"
+            :class="{'tickets-main-is-fullscreen' : isFullscreen}"
+            mode="collapse"
+            :title="$t('需求信息')">
+            <DemandInfo
+              :data="state.ticketData"
+              :is-loading="state.isLoading" />
+          </DbCard>
+        </Teleport>
         <DbCard
           class="ticket-flows"
           mode="collapse"
@@ -48,6 +52,7 @@
 <script setup lang="tsx">
   import { format } from 'date-fns';
   import { useI18n } from 'vue-i18n';
+  import type { LocationQueryValue } from 'vue-router';
 
   import TicketModel from '@services/model/ticket/ticket';
   import { getTicketDetails } from '@services/ticket';
@@ -67,24 +72,47 @@
 
   const props = defineProps<Props>();
 
+  /**
+   * 获取单据详情
+   */
+  const fetchTicketDetails = (id: number, isPoll = false) => {
+    state.isLoading = !isPoll;
+    getTicketDetails({ id })
+      .then((res) => {
+        state.ticketData = res;
+        // 设置轮询
+        if (currentScope?.active) {
+          !isActive.value && ['PENDING', 'RUNNING'].includes(state.ticketData?.status) && resume();
+        } else {
+          pause();
+        }
+      })
+      .catch(() => {
+        state.ticketData = null;
+      })
+      .finally(() => {
+        state.isLoading = false;
+      });
+  };
+
   const currentScope = getCurrentScope();
   const { t } = useI18n();
   const route = useRoute();
 
+  const isFullscreen = ref<LocationQueryValue | LocationQueryValue[]>();
+  const demandCollapse = ref(false);
   const state = reactive({
     isLoading: false,
     ticketData: null as TicketModel | null,
   });
-  const isFullscreen = computed(() => route.query.isFullscreen);
-  const demandCollapse = ref(false);
+
   // 轮询
   const { isActive, resume, pause } = useTimeoutPoll(() => {
     if (props.data) {
       fetchTicketDetails(props.data.id, true);
     }
   }, 10000);
 
-
   /**
    * 基础信息配置
    */
@@ -129,29 +157,6 @@
     ],
   ];
 
-  /**
-   * 获取单据详情
-   */
-  const fetchTicketDetails = (id: number, isPoll = false) => {
-    state.isLoading = !isPoll;
-    getTicketDetails({ id })
-      .then((res) => {
-        state.ticketData = res;
-        // 设置轮询
-        if (currentScope?.active) {
-          !isActive.value && ['PENDING', 'RUNNING'].includes(state.ticketData?.status) && resume();
-        } else {
-          pause();
-        }
-      })
-      .catch(() => {
-        state.ticketData = null;
-      })
-      .finally(() => {
-        state.isLoading = false;
-      });
-  };
-
   watch(() => props.data?.id, (id) => {
     if (id) {
       state.ticketData = null;
@@ -164,21 +169,35 @@
       demandCollapse.value = true;
     }
   }, { immediate: true });
+
+  watch(() => route.query.isFullscreen, (value) => {
+    setTimeout(() => {
+      isFullscreen.value = value;
+    });
+  }, {
+    immediate: true,
+  });
+
+  const exitFullscreen = (e: KeyboardEvent) => {
+    if (e.keyCode === 27) {
+      isFullscreen.value = undefined;
+    }
+  };
+
+  onMounted(() => {
+    window.addEventListener('keydown', exitFullscreen);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('keydown', exitFullscreen);
+  });
+
 </script>
 
 <style lang="less" scoped>
 .ticket-details {
   padding: 24px;
 
-  :deep(.is-fullscreen) {
-    position: fixed;
-    top: 0;
-    right: 0;
-    z-index: 9999;
-    width: 100%;
-    height: 100%;
-  }
-
   .db-card {
     margin-bottom: 16px;
 

diff --git a/dbm-ui/frontend/src/views/tickets/my-todos/components/details/Index.vue b/dbm-ui/frontend/src/views/tickets/my-todos/components/details/Index.vue
@@ -25,15 +25,19 @@
             :data="state.ticketData"
             width="30%" />
         </DbCard>
-        <DbCard
-          v-model:collapse="demandCollapse"
-          :class="{'is-fullscreen': isFullscreen}"
-          mode="collapse"
-          :title="$t('需求信息')">
-          <DemandInfo
-            :data="state.ticketData"
-            :is-loading="state.isLoading" />
-        </DbCard>
+        <Teleport
+          :disabled="!isFullscreen"
+          to="body">
+          <DbCard
+            v-model:collapse="demandCollapse"
+            :class="{'tickets-main-is-fullscreen' : isFullscreen}"
+            mode="collapse"
+            :title="$t('需求信息')">
+            <DemandInfo
+              :data="state.ticketData"
+              :is-loading="state.isLoading" />
+          </DbCard>
+        </Teleport>
         <DbCard
           class="ticket-flows"
           mode="collapse"
@@ -48,6 +52,7 @@
 <script setup lang="tsx">
   import { format } from 'date-fns';
   import { useI18n } from 'vue-i18n';
+  import type { LocationQueryValue } from 'vue-router';
 
   import TicketModel from '@services/model/ticket/ticket';
   import { getTicketDetails } from '@services/ticket';
@@ -68,25 +73,50 @@
 
   const props = defineProps<Props>();
 
+  /**
+   * 获取单据详情
+   */
+  const fetchTicketDetails = (id: number, isPoll = false) => {
+    state.isLoading = !isPoll;
+    getTicketDetails({
+      id,
+      is_reviewed: 1,
+    }).then((res) => {
+      state.ticketData = res;
+      // 设置轮询
+      if (currentScope?.active) {
+        !isActive.value && needPollStatus.includes(state.ticketData?.status) && resume();
+      } else {
+        pause();
+      }
+    })
+      .catch(() => {
+        state.ticketData = null;
+      })
+      .finally(() => {
+        state.isLoading = false;
+      });
+  };
+
   const currentScope = getCurrentScope();
   const { t } = useI18n();
   const route = useRoute();
 
+  const isFullscreen = ref<LocationQueryValue | LocationQueryValue[]>();
+  const demandCollapse = ref(false);
   const state = reactive<{
     isLoading: boolean,
     ticketData: TicketModel | null
   }>({
     isLoading: false,
     ticketData: null,
   });
-  const isFullscreen = computed(() => route.query.isFullscreen);
-  const demandCollapse = ref(false);
+
   // 轮询
   const { isActive, resume, pause } = useTimeoutPoll(() => {
     fetchTicketDetails(props.data.id, true);
   }, 10000);
 
-
   /**
    * 基础信息配置
    */
@@ -124,30 +154,6 @@
 
   const needPollStatus = ['PENDING', 'RUNNING'];
 
-  /**
-   * 获取单据详情
-   */
-  const fetchTicketDetails = (id: number, isPoll = false) => {
-    state.isLoading = !isPoll;
-    getTicketDetails({
-      id,
-      is_reviewed: 1,
-    }).then((res) => {
-      state.ticketData = res;
-      // 设置轮询
-      if (currentScope?.active) {
-        !isActive.value && needPollStatus.includes(state.ticketData?.status) && resume();
-      } else {
-        pause();
-      }
-    })
-      .catch(() => {
-        state.ticketData = null;
-      })
-      .finally(() => {
-        state.isLoading = false;
-      });
-  };
 
   watch(() => props.data.id, (id: number) => {
     if (id) {
@@ -161,6 +167,28 @@
       demandCollapse.value = true;
     }
   }, { immediate: true });
+
+  watch(() => route.query.isFullscreen, (value) => {
+    setTimeout(() => {
+      isFullscreen.value = value;
+    });
+  }, {
+    immediate: true,
+  });
+
+  const exitFullscreen = (e: KeyboardEvent) => {
+    if (e.keyCode === 27) {
+      isFullscreen.value = undefined;
+    }
+  };
+
+  onMounted(() => {
+    window.addEventListener('keydown', exitFullscreen);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('keydown', exitFullscreen);
+  });
 </script>
 
 <style lang="less" scoped>
@@ -169,15 +197,6 @@
 
   .db-card {
     margin-bottom: 16px;
-
-    &.is-fullscreen {
-      position: fixed;
-      top: 0;
-      right: 0;
-      z-index: 9999;
-      width: 100%;
-      height: 100%;
-    }
   }
 }