feat: added nav for task detail

crawlab-team · Oct 17, 2024 · c705628 · c705628
1 parent 22c5285
commit c705628
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 40 deletions.
diff --git a/src/components/core/task/TaskForm.vue b/src/components/core/task/TaskForm.vue
@@ -148,7 +148,7 @@ defineOptions({ name: 'ClTaskForm' });
       />
       <cl-nav-link
         v-else
-        :label="getNodeName(form.node_id)"
+        :label="form.node?.name || getNodeName(form.node_id)"
         :path="`/nodes/${form.node_id}`"
       />
     </cl-form-item>

diff --git a/src/interfaces/views/task.d.ts b/src/interfaces/views/task.d.ts
@@ -24,6 +24,7 @@ export declare global {
     priority?: number;
 
     // view model
+    node?: CNode;
     spider?: Spider;
     schedule?: Schedule;
   }

diff --git a/src/views/index.ts b/src/views/index.ts
@@ -99,6 +99,7 @@ import TaskDetail from './task/detail/TaskDetail.vue';
 import TaskDetailActionsCommon from './task/detail/actions/TaskDetailActionsCommon.vue';
 import TaskDetailActionsData from './task/detail/actions/TaskDetailActionsData.vue';
 import TaskDetailActionsLogs from './task/detail/actions/TaskDetailActionsLogs.vue';
+import TaskDetailActionGroupNav from './task/detail/actions/groups/TaskDetailActionGroupNav.vue';
 import TaskDetailTabData from './task/detail/tabs/TaskDetailTabData.vue';
 import TaskDetailTabLogs from './task/detail/tabs/TaskDetailTabLogs.vue';
 import TaskDetailTabOverview from './task/detail/tabs/TaskDetailTabOverview.vue';
@@ -215,6 +216,7 @@ export {
   TaskDetailActionsCommon as ClTaskDetailActionsCommon,
   TaskDetailActionsData as ClTaskDetailActionsData,
   TaskDetailActionsLogs as ClTaskDetailActionsLogs,
+  TaskDetailActionGroupNav as ClTaskDetailActionGroupNav,
   TaskDetailTabData as ClTaskDetailTabData,
   TaskDetailTabLogs as ClTaskDetailTabLogs,
   TaskDetailTabOverview as ClTaskDetailTabOverview,

diff --git a/src/views/task/detail/TaskDetail.vue b/src/views/task/detail/TaskDetail.vue
@@ -2,6 +2,7 @@
 import { useStore } from 'vuex';
 import { useTaskDetail } from '@/views';
 import { useTask } from '@/components';
+import { isPro } from '@/utils';
 
 const { activeTabName } = useTaskDetail();
 
@@ -19,7 +20,9 @@ defineOptions({ name: 'ClTaskDetail' });
     <template #actions>
       <cl-task-detail-actions-common />
       <cl-task-detail-actions-logs v-if="activeTabName === 'logs'" />
-      <cl-task-detail-actions-data v-if="activeTabName === 'data'" />
+      <template v-if="isPro()">
+        <cl-task-detail-actions-data v-if="activeTabName === 'data'" />
+      </template>
     </template>
   </cl-detail-layout>
 </template>

diff --git a/src/views/task/detail/actions/TaskDetailActionsCommon.vue b/src/views/task/detail/actions/TaskDetailActionsCommon.vue
@@ -6,7 +6,7 @@ import { ElMessage, ElMessageBox } from 'element-plus';
 import dayjs from 'dayjs';
 import { TASK_STATUS_PENDING, TASK_STATUS_RUNNING } from '@/constants';
 import useRequest from '@/services/request';
-import { translate, isCancellable } from '@/utils';
+import { translate, isCancellable, isPro } from '@/utils';
 import useTask from '@/components/core/task/useTask';
 import useTaskDetail from '@/views/task/detail/useTaskDetail';
 
@@ -84,29 +84,7 @@ defineOptions({ name: 'ClTaskDetailActionsCommon' });
 </script>
 
 <template>
-  <cl-nav-action-group class="task-detail-actions-common">
-    <cl-nav-action-fa-icon :icon="['fa', 'compass']" />
-    <cl-nav-action-item>
-      <cl-tag
-        type="primary"
-        size="large"
-        :icon="['fa', 'spider']"
-        :tooltip="t('components.task.form.spider')"
-        clickable
-        @click="router.push(`/spiders/${form.spider_id}`)"
-      />
-    </cl-nav-action-item>
-    <cl-nav-action-item v-if="form.schedule_id">
-      <cl-tag
-        type="primary"
-        size="large"
-        :icon="['fa', 'clock']"
-        :tooltip="t('components.task.form.schedule')"
-        clickable
-        @click="router.push(`/spiders/${form.spider_id}`)"
-      />
-    </cl-nav-action-item>
-  </cl-nav-action-group>
+  <cl-task-detail-action-group-nav v-if="isPro()" />
   <cl-nav-action-group class="task-detail-actions-common">
     <cl-nav-action-fa-icon :icon="['fa', 'tools']" />
     <cl-nav-action-item>

diff --git a/src/views/task/detail/actions/TaskDetailActionsData.vue b/src/views/task/detail/actions/TaskDetailActionsData.vue
@@ -72,20 +72,6 @@ defineOptions({ name: 'ClTaskDetailActionsData' });
         </div>
       </el-tooltip>
     </cl-nav-action-item>
-    <cl-nav-action-item
-      v-export="{
-        target,
-        conditions,
-      }"
-    >
-      <cl-fa-icon-button
-        :icon="['fa', 'download']"
-        :tooltip="t('components.task.actions.data.tooltip.export')"
-        type="primary"
-        id="export-btn"
-        class-name="export-btn"
-      />
-    </cl-nav-action-item>
   </cl-nav-action-group>
 </template>
 

diff --git a/src/views/task/detail/actions/groups/TaskDetailActionGroupNav.vue b/src/views/task/detail/actions/groups/TaskDetailActionGroupNav.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+import { useTask } from '@/components';
+import { translate } from '@/utils';
+
+const t = translate;
+
+const router = useRouter();
+
+const store = useStore();
+
+const { form } = useTask(store);
+defineOptions({ name: 'ClTaskDetailActionGroupNav' });
+</script>
+
+<template>
+  <cl-nav-action-group class="task-detail-actions-common">
+    <cl-nav-action-fa-icon :icon="['fa', 'compass']" />
+    <cl-nav-action-item v-if="form?.node_id">
+      <cl-tag
+        type="primary"
+        size="large"
+        :icon="['fa', 'server']"
+        :tooltip="`${t('components.task.form.node')}: ${form?.node?.name || form?.node_id}`"
+        clickable
+        @click="router.push(`/nodes/${form.node_id}`)"
+      />
+    </cl-nav-action-item>
+    <cl-nav-action-item v-if="form?.spider_id">
+      <cl-tag
+        type="primary"
+        size="large"
+        :icon="['fa', 'spider']"
+        :tooltip="`${t('components.task.form.spider')}: ${form?.spider?.name || form?.spider_id}`"
+        clickable
+        @click="router.push(`/spiders/${form.spider_id}`)"
+      />
+    </cl-nav-action-item>
+    <cl-nav-action-item v-if="form?.schedule_id">
+      <cl-tag
+        type="primary"
+        size="large"
+        :icon="['fa', 'clock']"
+        :tooltip="`${t('components.task.form.schedule')}: ${form?.schedule?.name || form?.schedule_id}`"
+        clickable
+        @click="router.push(`/spiders/${form.spider_id}`)"
+      />
+    </cl-nav-action-item>
+  </cl-nav-action-group>
+</template>
+
+<style scoped lang="scss"></style>