feat(frontend): 集群、实例补充字段 TencentBlueKing#7813

# Reviewed, transaction id: 26013

dbm-ui/frontend/src/views/ticket-center/common/CardModeList.vue

@@ -151,7 +151,7 @@
 
   let isInit = true;
 
-  const { pause: pauseFetchData } = watch(
+  const { pause: pauseFetchData, resume: resumeFetchData } = watch(
     [formatDateValue, formatSearchValue],
     _.debounce(() => {
       if (!isInit) {
@@ -188,6 +188,7 @@
   };
 
   onActivated(() => {
+    resumeFetchData();
     currentTicketScrollToTop();
     eventBus.on('refreshTicketStatus', fetchData);
   });

dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/Index.vue

@@ -47,6 +47,11 @@
               :text="false"
               theme="" />
             <TicketRevoke :data="ticketData" />
+            <BkButton
+              v-if="isShowGoDetail"
+              @click="handleGoDetail">
+              {{ t('新窗口打开') }}
+            </BkButton>
           </template>
         </SmartAction>
       </PermissionCatch>
@@ -56,6 +61,7 @@
 <script setup lang="tsx">
   import { useI18n } from 'vue-i18n';
   import { useRequest } from 'vue-request';
+  import { useRoute, useRouter } from 'vue-router';
 
   import TicketModel from '@services/model/ticket/ticket';
   import { getTicketDetails } from '@services/source/ticket';
@@ -79,13 +85,16 @@
 
   const props = defineProps<Props>();
 
+  const router = useRouter();
+  const route = useRoute();
   const eventBus = useEventBus();
   const { t } = useI18n();
 
   const getOffsetTarget = () => document.body.querySelector('.ticket-details-page .db-card');
 
-  const isTaskInfoCardCollapse = useStorage('ticketTaskInfo', false);
+  const isShowGoDetail = route.name !== 'ticketDetail';
 
+  const isTaskInfoCardCollapse = useStorage('ticketTaskInfo', false);
   const isLoading = ref(true);
   const ticketData = shallowRef<TicketModel>();
 
@@ -131,6 +140,16 @@
     },
   );
 
+  const handleGoDetail = () => {
+    const { href } = router.resolve({
+      name: 'ticketDetail',
+      params: {
+        ticketId: props.ticketId,
+      },
+    });
+    window.open(href);
+  };
+
   eventBus.on('refreshTicketStatus', refreshTicketData);
 
   onBeforeUnmount(() => {

dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/flow-info/components/flow-type-itsm/StatusSucceeded.vue

@@ -17,6 +17,10 @@
           {{ t('查看详情') }}
         </a>
       </template>
+      <TodoList
+        v-if="data.todos.length > 0"
+        :data="data.todos"
+        :flow-data="data" />
     </template>
   </StatusSucceeded>
 </template>
@@ -30,6 +34,7 @@
   import { utcTimeToSeconds } from '@utils';
 
   import StatusSucceeded from '../flow-type-common/StatusSucceeded.vue';
+  import TodoList from '../todo-list/Index.vue';
 
   interface Props {
     data: FlowMode<

dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/flow-info/components/todo-list/type-itsm/Index.vue

@@ -12,6 +12,7 @@
   import StatusCommon from '../common';
 
   import StatusDoneFailed from './StatusDoneFailed.vue';
+  import StatusSuccess from './StatusSuccess.vue';
   import StatusTodo from './StatusTodo.vue';
 
   interface Props {
@@ -24,5 +25,6 @@
   const renderCom = Object.assign({}, StatusCommon, {
     [FlowMode.TODO_STATUS_TODO]: StatusTodo,
     [FlowMode.TODO_STATUS_DONE_FAILED]: StatusDoneFailed,
+    [FlowMode.TODO_STATUS_DONE_SUCCESS]: StatusSuccess,
   })[props.data.status];
 </script>

dbm-ui/frontend/src/views/ticket-center/common/ticket-detail/components/flow-info/components/todo-list/type-itsm/StatusSuccess.vue

@@ -0,0 +1,18 @@
+<template>
+  <div style="margin-top: 10px; color: #979ba5">{{ utcDisplayTime(data.done_at) }}</div>
+</template>
+<script setup lang="ts">
+  import FlowMode from '@services/model/ticket/flow';
+
+  import { utcDisplayTime } from '@utils';
+
+  interface Props {
+    data: FlowMode<unknown>['todos'][number];
+  }
+
+  defineProps<Props>();
+
+  defineOptions({
+    name: FlowMode.TODO_STATUS_DONE_SUCCESS,
+  });
+</script>