feat(frontend): 单据管理迭代_1 TencentBlueKing#7190

# Reviewed, transaction id: 24568

dbm-ui/frontend/src/components/ticket-status-tag/Index.vue

@@ -21,31 +21,31 @@
 
   const backgroundcolor = computed(() => {
     const colorMap = {
-      [TicketModel.STATUS_APPROVE]: '#FDEED8',
+      [TicketModel.STATUS_APPROVE]: '#DAE9FD',
       [TicketModel.STATUS_FAILED]: '#EA3636',
       [TicketModel.STATUS_RESOURCE_REPLENISH]: '#DFF5FD',
       [TicketModel.STATUS_RUNNING]: '#E1ECFF',
       [TicketModel.STATUS_SUCCEEDED]: '#DAF6E5',
       [TicketModel.STATUS_TERMINATED]: '#FFEBEB',
       [TicketModel.STATUS_TIMER]: '#C8E8E6',
-      [TicketModel.STATUS_TODO]: '#DAE9FD',
-      [TicketModel.STATUS_INNER_TODO]: '#F4EEFF',
+      [TicketModel.STATUS_TODO]: '#F0F1F5',
+      [TicketModel.STATUS_INNER_TODO]: '#FDEED8',
     };
 
     return colorMap[props.data.status] || '#f0f1f5';
   });
 
   const fontdcolor = computed(() => {
     const colorMap = {
-      [TicketModel.STATUS_APPROVE]: '#E38B02',
+      [TicketModel.STATUS_APPROVE]: '#267BCF',
       [TicketModel.STATUS_FAILED]: '#FFFFFF',
       [TicketModel.STATUS_RESOURCE_REPLENISH]: '#2F96A7',
       [TicketModel.STATUS_RUNNING]: '#1768EF',
       [TicketModel.STATUS_SUCCEEDED]: '#299E56',
       [TicketModel.STATUS_TERMINATED]: '#E71818',
       [TicketModel.STATUS_TIMER]: '#3F726F',
-      [TicketModel.STATUS_TODO]: '#267BCF',
-      [TicketModel.STATUS_INNER_TODO]: '#5135EA',
+      [TicketModel.STATUS_TODO]: '#4D4F56',
+      [TicketModel.STATUS_INNER_TODO]: '#E38B02',
     };
 
     return colorMap[props.data.status] || '#63656e';

dbm-ui/frontend/src/locales/zh-cn.json

@@ -3726,5 +3726,7 @@
   "已关单": "已关单",
   "共n个_查看更多": "共 {0} 个，查看更多",
   "待继续": "待继续",
+  "操作：": "操作：",
+  "冷/热节点": "冷/热节点",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

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

@@ -12,25 +12,21 @@
 -->
 
 <template>
-  <BkLoading
-    :loading="isLoading"
-    style="height: 100%">
-    <StretchLayout
-      :left-width="400"
-      :min-left-width="300"
-      name="ticketList"
-      style="background: #fff"
-      @change="handleStretchLayoutChange">
-      <template #list>
-        <List />
-      </template>
-      <template
-        v-if="ticketId"
-        #right>
-        <Detail :ticket-id="ticketId" />
-      </template>
-    </StretchLayout>
-  </BkLoading>
+  <StretchLayout
+    :left-width="400"
+    :min-left-width="300"
+    name="ticketList"
+    style="background: #fff"
+    @change="handleStretchLayoutChange">
+    <template #list>
+      <List />
+    </template>
+    <template
+      v-if="ticketId"
+      #right>
+      <Detail :ticket-id="ticketId" />
+    </template>
+  </StretchLayout>
 </template>
 <script setup lang="ts">
   import { computed } from 'vue';
@@ -40,7 +36,6 @@
 
   import StretchLayout from '@components/stretch-layout/StretchLayout.vue';
 
-  import useUrlRedirect from '@views/ticket-center/common/hooks/use-url-redirect';
   import Detail from '@views/ticket-center/common/ticket-detail/Index.vue';
 
   import List from './components/list/Index.vue';
@@ -51,8 +46,6 @@
 
   const ticketId = computed(() => Number(route.params.ticketId) || 0);
 
-  const { loading: isLoading } = useUrlRedirect(ticketId.value);
-
   const handleStretchLayoutChange = (value: boolean) => {
     if (!value) {
       router.replace({

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

@@ -301,6 +301,8 @@
       pagination.current = 1;
     }
 
+    console.log('from watch fetchdata = ', window.location.href)
+
     fetchData();
   });
 

dbm-ui/frontend/src/views/ticket-center/common/hooks/use-date-picker.ts

@@ -1,17 +1,15 @@
 import dayjs from 'dayjs';
 import { computed, ref } from 'vue';
-import { onBeforeRouteUpdate, useRoute } from 'vue-router';
+import { onBeforeRouteLeave } from 'vue-router';
 
 import { useUrlSearch } from '@hooks';
 
 interface IPicker {
   value: () => [Date, Date];
 }
 
-const value = ref<[Date, Date] | [string, string]>(['', '']);
-
-export default () => {
-  const currentRoute = useRoute();
+const create = () => {
+  const value = ref<[Date, Date] | [string, string]>(['', '']);
   const { getSearchParams } = useUrlSearch();
 
   const searchParams = getSearchParams();
@@ -68,18 +66,23 @@ export default () => {
     return {};
   });
 
-  onBeforeRouteUpdate((route) => {
-    setTimeout(() => {
-      if (currentRoute.name === route.name) {
-        return;
-      }
-      value.value = ['', ''];
-    });
-  });
-
   return {
     value,
     formatValue,
     shortcutsRange,
   };
 };
+
+let context: ReturnType<typeof create> | undefined;
+
+export default () => {
+  if (!context) {
+    context = create();
+  }
+
+  onBeforeRouteLeave(() => {
+    context = undefined;
+  });
+
+  return context;
+};

dbm-ui/frontend/src/views/ticket-center/common/hooks/use-fetch-data.ts

@@ -1,6 +1,6 @@
 import { reactive, ref } from 'vue';
 import { useRequest } from 'vue-request';
-import { onBeforeRouteLeave, useRoute } from 'vue-router';
+import { onBeforeRouteLeave } from 'vue-router';
 
 import TicketModel from '@services/model/ticket/ticket';
 import { getTicketStatus, getTodoTickets } from '@services/source/ticket';
@@ -9,29 +9,23 @@ import { useEventBus, useUrlSearch } from '@hooks';
 
 import { useTimeoutFn } from '@vueuse/core';
 
-const isLoading = ref(false);
-const dataList = ref<TicketModel<unknown>[]>([]);
-const pagination = reactive({
-  offset: 0,
-  limit: 10,
-  current: 1,
-  count: 0,
-  limitList: [10, 20, 50, 100, 500],
-});
-const tableMaxHeight = ref<number | 'auto'>('auto');
-
-let isMounted = false;
-
-export default (
-  dataSource: typeof getTodoTickets,
-  options?: { onSuccess?: (data: TicketModel<unknown>[]) => void },
-) => {
-  const route = useRoute();
+const create = (dataSource: typeof getTodoTickets, options?: { onSuccess?: (data: TicketModel[]) => void }) => {
   const eventBus = useEventBus();
   const { replaceSearchParams, getSearchParams } = useUrlSearch();
 
   const searchParams = getSearchParams();
 
+  const isLoading = ref(false);
+  const dataList = ref<TicketModel[]>([]);
+  const pagination = reactive({
+    offset: 0,
+    limit: 10,
+    current: 1,
+    count: 0,
+    limitList: [10, 20, 50, 100, 500],
+  });
+  const tableMaxHeight = ref<number | 'auto'>('auto');
+
   if (searchParams.limit && searchParams.current) {
     pagination.limit = Number(searchParams.limit);
     pagination.current = Number(searchParams.current);
@@ -96,27 +90,10 @@ export default (
 
   eventBus.on('refreshTicketStatus', fetchTicketStatus);
 
-  onMounted(() => {
-    if (isMounted) {
-      return;
-    }
-    isMounted = true;
-  });
-
   onBeforeUnmount(() => {
     eventBus.off('refreshTicketStatus', fetchTicketStatus);
   });
 
-  onBeforeRouteLeave((currentRoute) => {
-    setTimeout(() => {
-      if (currentRoute.name === route.name) {
-        return;
-      }
-      isMounted = false;
-      pagination.current = 1;
-    });
-  });
-
   return {
     loading: isLoading,
     tableMaxHeight,
@@ -125,3 +102,17 @@ export default (
     fetchTicketList,
   };
 };
+
+let context: ReturnType<typeof create> | undefined;
+
+export default (...args: Parameters<typeof create>) => {
+  if (!context) {
+    context = create(...args);
+  }
+
+  onBeforeRouteLeave(() => {
+    context = undefined;
+  });
+
+  return context;
+};

dbm-ui/frontend/src/views/ticket-center/common/hooks/use-search-select.ts

@@ -1,7 +1,7 @@
 import { computed, shallowRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRequest } from 'vue-request';
-import { onBeforeRouteLeave, useRoute } from 'vue-router';
+import { onBeforeRouteLeave } from 'vue-router';
 
 import TicketModel from '@services/model/ticket/ticket';
 import { getTicketTypes } from '@services/source/ticket';
@@ -16,8 +16,7 @@ const value = ref<SearchValue[]>([]);
 
 const ticketTypeList = shallowRef<{ id: string; name: string }[]>([]);
 
-export default (options = {} as { exclude: string[] }) => {
-  const route = useRoute();
+const create = (options = {} as { exclude: string[] }) => {
   const { t } = useI18n();
   const globalBizsStore = useGlobalBizs();
 
@@ -88,19 +87,24 @@ export default (options = {} as { exclude: string[] }) => {
     },
   });
 
-  onBeforeRouteLeave((currentRoute) => {
-    setTimeout(() => {
-      if (currentRoute.name === route.name) {
-        return;
-      }
-      value.value = [];
-    });
-  });
-
   return {
     ticketTypeList,
     value,
     searchSelectData,
     formatSearchValue,
   };
 };
+
+let context: ReturnType<typeof create> | undefined;
+
+export default (...args: Parameters<typeof create>) => {
+  if (!context) {
+    context = create(...args);
+  }
+
+  onBeforeRouteLeave(() => {
+    context = undefined;
+  });
+
+  return context;
+};