perf(sj_1.0.1): 优化携带参数路由跳转体验

packages/hooks/src/use-table.ts

@@ -29,6 +29,8 @@ export type TableConfig<A extends ApiFn, T, C> = {
   apiFn: A;
   /** api params */
   apiParams?: Parameters<A>[0];
+  /** search params */
+  searchParams?: Parameters<A>[0];
   /** transform api response to table data */
   transformer: Transformer<T, Awaited<ReturnType<A>>>;
   /** columns factory */
@@ -133,6 +135,9 @@ export default function useHookTable<A extends ApiFn, T, C>(config: TableConfig<
   }
 
   if (immediate) {
+    if (config.searchParams) {
+      updateSearchParams(config.searchParams);
+    }
     getData();
   }
 

src/hooks/common/table.ts

@@ -36,6 +36,7 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
   } = useHookTable<A, GetTableData<A>, TableColumn<NaiveUI.TableDataWithIndex<GetTableData<A>>>>({
     apiFn,
     apiParams,
+    searchParams: config.searchParams,
     columns: config.columns,
     transformer: res => {
       const { data: records = [], page: current = 1, size = 10, total = 0 } = res.data || {};

src/typings/naive-ui.d.ts

@@ -42,7 +42,7 @@ declare namespace NaiveUI {
 
   type NaiveTableConfig<A extends TableApiFn> = Pick<
     import('@sa/hooks').TableConfig<A, GetTableData<A>, TableColumn<TableDataWithIndex<GetTableData<A>>>>,
-    'apiFn' | 'apiParams' | 'columns' | 'immediate'
+    'apiFn' | 'apiParams' | 'columns' | 'immediate' | 'searchParams'
   > & {
     /**
      * whether to display the total items count

src/views/job/batch/index.vue

@@ -1,9 +1,8 @@
 <script setup lang="tsx">
 import { NButton, NPopconfirm, NTag } from 'naive-ui';
 import { useBoolean } from '@sa/hooks';
-import { ref, watch } from 'vue';
+import { ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { fetchGetJobBatchList, fetchJobBatchRetry, fetchJobBatchStop } from '@/service/api';
-import { fetchGetJobBatchList, fetchGetJobNameList, fetchJobBatchRetry, fetchJobBatchStop } from '@/service/api';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable } from '@/hooks/common/table';
@@ -13,12 +12,12 @@ import JobBatchSearch from './modules/job-batch-search.vue';
 import JobBatchDetailDrawer from './modules/job-batch-detail-drawer.vue';
 
 const appStore = useAppStore();
-const route = useRoute();
-
 /** 详情页属性数据 */
 const detailData = ref<Api.JobBatch.JobBatch | null>();
 /** 详情页可见状态 */
 const { bool: detailVisible, setTrue: openDetail } = useBoolean(false);
+const jobName = history.state.jobName;
+const taskBatchStatus = history.state.taskBatchStatus;
 
 const { columnChecks, columns, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetJobBatchList,
@@ -29,6 +28,10 @@ const { columnChecks, columns, data, getData, loading, mobilePagination, searchP
     jobName: null,
     taskBatchStatus: null
   },
+  searchParams: {
+    jobName,
+    taskBatchStatus
+  },
   columns: () => [
     {
       key: 'id',
@@ -163,41 +166,6 @@ async function handleStopJob(id: string) {
     getData();
   }
 }
-
-/** 处理路由 query 参数变化 */
-async function handleQueryChanged(jobId: number) {
-  if (!jobId) {
-    searchParams.jobName = null;
-  } else {
-    const { data: jobList, error } = await fetchGetJobNameList({ jobId });
-    if (!error && jobList.length > 0) {
-      const jobName = jobList[0].jobName;
-      searchParams.jobName = jobName;
-    }
-  }
-  getData();
-}
-
-watch(
-  () => route.query,
-  () => {
-    if (route.name === 'job_batch' && route.query.jobId) {
-      const jobId = Number(route.query.jobId);
-      handleQueryChanged(jobId);
-    }
-  },
-  { immediate: true }
-);
-
-function initParams() {
-  const taskBatchStatus = history.state.taskBatchStatus;
-  if (taskBatchStatus) {
-    searchParams.taskBatchStatus = taskBatchStatus;
-    getData();
-  }
-}
-
-initParams();
 </script>
 
 <template>

src/views/job/task/index.vue

@@ -250,7 +250,8 @@ async function handleTriggerJob(id: string) {
 }
 
 function goToBatch(jobId: string) {
-  routerPushByKey('job_batch', { query: { jobId } });
+  const findItem = data.value.find(item => item.id === jobId)!;
+  routerPushByKey('job_batch', { state: { jobName: findItem.jobName } });
 }
 
 function body(): Api.Job.ExportJob {

src/views/retry/log/index.vue

@@ -17,6 +17,7 @@ const appStore = useAppStore();
 const detailData = ref<Api.RetryLog.RetryLog | null>();
 /** 详情页可见状态 */
 const { bool: detailVisible, setTrue: openDetail } = useBoolean(false);
+const retryStatus = history.state.retryStatus;
 
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchRetryLogPageList,
@@ -32,6 +33,9 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
     bizNo: null,
     retryStatus: null
   },
+  searchParams: {
+    retryStatus
+  },
   columns: () => [
     {
       type: 'selection',
@@ -168,16 +172,6 @@ async function loadRetryInfo(row: Api.RetryLog.RetryLog) {
   const res = await fetchRetryLogById(row.id!);
   detailData.value = (res.data as Api.RetryLog.RetryLog) || null;
 }
-
-function initParams() {
-  const retryStatus = history.state.retryStatus;
-  if (retryStatus) {
-    searchParams.retryStatus = retryStatus;
-    getData();
-  }
-}
-
-initParams();
 </script>
 
 <template>

src/views/workflow/batch/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="tsx">
 import { NButton, NPopconfirm, NTag } from 'naive-ui';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import { fetchGetWorkflowBatchList, fetchStopWorkflowBatch } from '@/service/api';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
@@ -8,13 +8,10 @@ import { useTable, useTableOperate } from '@/hooks/common/table';
 import { operationReasonRecord, taskBatchStatusRecord } from '@/constants/business';
 import WorkflowBatchSearch from './modules/workflow-batch-search.vue';
 const router = useRouter();
-const route = useRoute();
-
-// 此处可能有问题
-const workflowId =
-  route.query?.workflowId === undefined ? null : Number.parseInt(route.query?.workflowId as string, 10);
 
 const appStore = useAppStore();
+const workflowId = history.state.workflowId;
+const taskBatchStatus = history.state.taskBatchStatus;
 
 const { columns, columnChecks, data, getData, loading, mobilePagination, searchParams, resetSearchParams } = useTable({
   apiFn: fetchGetWorkflowBatchList,
@@ -23,10 +20,14 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
     size: 10,
     // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
     // the value can not be undefined, otherwise the property in Form will not be reactive
-    workflowId,
+    workflowId: null,
     groupName: null,
     taskBatchStatus: null
   },
+  searchParams: {
+    workflowId,
+    taskBatchStatus
+  },
   columns: () => [
     {
       key: 'id',
@@ -155,16 +156,6 @@ async function handleStop(id: string) {
 function detail(id: string) {
   router.push({ path: '/workflow/form/batch', query: { id } });
 }
-
-function initParams() {
-  const taskBatchStatus = history.state.taskBatchStatus;
-  if (taskBatchStatus) {
-    searchParams.taskBatchStatus = taskBatchStatus;
-    getData();
-  }
-}
-
-initParams();
 </script>
 
 <template>

src/views/workflow/task/index.vue

@@ -238,7 +238,7 @@ function copy(id: string) {
 }
 
 function batch(id: string) {
-  router.push({ path: '/workflow/batch', query: { workflowId: id } });
+  router.push({ path: '/workflow/batch', state: { workflowId: id } });
 }
 
 async function execute(id: string) {