feat(sj_1.0.0_beta4): 首页任务Card添加点击动作

src/hooks/common/router.ts

@@ -21,10 +21,11 @@ export function useRouterPush(inSetup = true) {
   interface RouterPushOptions {
     query?: Record<string, string>;
     params?: Record<string, string>;
+    state?: Record<string, string>;
   }
 
   async function routerPushByKey(key: RouteKey, options?: RouterPushOptions) {
-    const { query, params } = options || {};
+    const { query, params, state } = options || {};
 
     const routeLocation: RouteLocationRaw = {
       name: key
@@ -38,6 +39,10 @@ export function useRouterPush(inSetup = true) {
       routeLocation.params = params;
     }
 
+    if (state) {
+      routeLocation.state = state;
+    }
+
     return routerPush(routeLocation);
   }
 

src/views/home/modules/card-data.vue

@@ -77,20 +77,18 @@ const props = withDefaults(defineProps<Props>(), {
   })
 });
 
-/** 卡片 key 类型, 与卡片的路由的 name 一致, 便于直接使用 routerPushByKey */
-type KeyType = 'job_task' | 'retry_task' | 'workflow_task' | 'pods';
-
 interface CardData {
-  key: KeyType;
+  key: string;
   title: string;
   tip: string;
   value: number;
+  click?: () => void;
   color: {
     start: string;
     end: string;
   };
   icon: string;
-  bottom: { label: string; value: number }[];
+  bottom: { label: string; value: number; click?: () => void }[];
 }
 
 // eslint-disable-next-line complexity
@@ -100,6 +98,7 @@ const cardData = computed<CardData[]>(() => [
     title: $t('page.home.jobTask'),
     tip: $t('page.home.jobTaskTip'),
     value: props.modelValue?.jobTask.totalNum ?? 0,
+    click: () => routerPushByKey('job_task'),
     color: {
       start: '#f5b386',
       end: '#FFD6BA'
@@ -108,19 +107,23 @@ const cardData = computed<CardData[]>(() => [
     bottom: [
       {
         label: $t('common.success'),
-        value: props.modelValue?.jobTask.successNum ?? 0
+        value: props.modelValue?.jobTask.successNum ?? 0,
+        click: () => routerPushByKey('job_batch', { state: { taskBatchStatus: '3' } })
       },
       {
         label: $t('common.fail'),
-        value: props.modelValue?.jobTask.failNum ?? 0
+        value: props.modelValue?.jobTask.failNum ?? 0,
+        click: () => routerPushByKey('job_batch', { state: { taskBatchStatus: '4' } })
       },
       {
         label: $t('common.stop'),
-        value: props.modelValue?.jobTask.stopNum ?? 0
+        value: props.modelValue?.jobTask.stopNum ?? 0,
+        click: () => routerPushByKey('job_batch', { state: { taskBatchStatus: '5' } })
       },
       {
         label: $t('common.cancel'),
-        value: props.modelValue?.jobTask.cancelNum ?? 0
+        value: props.modelValue?.jobTask.cancelNum ?? 0,
+        click: () => routerPushByKey('job_batch', { state: { taskBatchStatus: '6' } })
       }
     ]
   },
@@ -129,6 +132,7 @@ const cardData = computed<CardData[]>(() => [
     title: $t('page.home.retryTask'),
     tip: $t('page.home.retryTaskTip'),
     value: props.modelValue?.retryTask.totalNum ?? 0,
+    click: () => routerPushByKey('retry_task'),
     unit: '',
     color: {
       start: '#40e9c5',
@@ -159,6 +163,7 @@ const cardData = computed<CardData[]>(() => [
     title: $t('page.home.workflow'),
     tip: $t('page.home.workflowTip'),
     value: props.modelValue?.workFlowTask.totalNum,
+    click: () => routerPushByKey('workflow_task'),
     unit: '',
     color: {
       start: '#ec6f6f',
@@ -189,6 +194,7 @@ const cardData = computed<CardData[]>(() => [
     title: $t('page.home.onlineServiceCount'),
     tip: $t('page.home.onlineServiceTip'),
     value: props.modelValue?.onLineService.total ?? 0,
+    click: () => routerPushByKey('pods'),
     unit: '',
     color: {
       start: '#b686d4',
@@ -234,11 +240,8 @@ function getGradientColor(color: CardData['color']) {
     <NGrid :cols="gridCol" responsive="screen" :x-gap="16" :y-gap="16">
       <NGi v-for="item in cardData" :key="item.key">
         <NSpin :show="false">
-          <GradientBg
+          <GradientBg :gradient-color="getGradientColor(item.color)" class="h-165px flex-1">
-            :gradient-color="getGradientColor(item.color)"
+            <div :class="item.click ? 'cursor-pointer' : null" @click="item.click">
-            class="h-165px flex-1 cursor-pointer"
-            @click="routerPushByKey(item.key)"
-          >
               <div class="flex justify-between">
                 <div class="align-center flex">
                   <SvgIcon :icon="item.icon" class="text-26px" />
@@ -256,6 +259,7 @@ function getGradientColor(color: CardData['color']) {
               <div class="flex">
                 <CountTo :start-value="0" :end-value="item.value" class="text-30px text-white" />
               </div>
+            </div>
             <NProgress
               v-if="item.key === 'job_task'"
               class="mb-24px h-20px pt-18px"
@@ -279,8 +283,10 @@ function getGradientColor(color: CardData['color']) {
             <NDivider />
             <template v-for="(bottomItem, bottomIndex) in item.bottom" :key="bottomIndex">
               <NDivider v-if="bottomIndex !== 0" vertical />
+              <span :class="bottomItem.click ? 'cursor-pointer' : null" @click="bottomItem.click">
                 {{ bottomItem.label }}
                 <CountTo :start-value="0" :end-value="bottomItem.value" class="text-white" />
+              </span>
             </template>
           </GradientBg>
         </NSpin>
@@ -295,7 +301,7 @@ function getGradientColor(color: CardData['color']) {
 }
 
 .n-divider--vertical {
-  margin: 0 1px 0 5px;
+  margin: 0 5px 0 5px;
 }
 
 :deep(.n-progress-icon--as-text) {

src/views/job/batch/modules/job-batch-search.vue

@@ -23,6 +23,12 @@ function reset() {
 function search() {
   emit('search');
 }
+
+const taskBatchStatus = history.state.taskBatchStatus;
+
+if (taskBatchStatus) {
+  model.value.taskBatchStatus = Number(taskBatchStatus) as Api.Common.TaskBatchStatus;
+}
 </script>
 
 <template>

src/views/workflow/form/add/index.vue

@@ -13,7 +13,7 @@ onMounted(() => {
 });
 
 const node = ref<Flow.NodeDataType>({
-  workflowName: `Workflow ${new Date().getTime()}`,
+  workflowName: `WF-${new Date().getTime()}`,
   workflowStatus: 1,
   blockStrategy: 1,
   description: undefined,