From 20552f58f1a57b07ee237da02d8e87c574b669d6 Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期六, 28 十月 2023 17:45:33 +0800
Subject: [PATCH] feat: 任务分类切换组件
---
src/views/dashboard/components/TaskTabs.vue | 76 ++++++++++++++++++++++++++++++++++++++
src/views/dashboard/components/TaskInfo.vue | 2 +
src/views/dashboard/index.vue | 13 +++++-
src/views/dashboard/components/ChannelCollapse.vue | 3 -
4 files changed, 90 insertions(+), 4 deletions(-)
diff --git a/src/views/dashboard/components/ChannelCollapse.vue b/src/views/dashboard/components/ChannelCollapse.vue
index dcedc3d..693ab61 100644
--- a/src/views/dashboard/components/ChannelCollapse.vue
+++ b/src/views/dashboard/components/ChannelCollapse.vue
@@ -4,10 +4,9 @@
<el-collapse-item
v-for="(tasks, channelNumber) in channels"
:key="channelNumber"
- :title="channelNumber + ' 閫氶亾'"
+ :title="CHANNEL_NAME_MAP[channelNumber] + ' 閫氶亾'"
:name="String(channelNumber)"
>
- <template #title>{{ CHANNEL_NAME_MAP[channelNumber] + ' 閫氶亾' }}</template>
<TaskInfo v-for="task in tasks" :key="task.Procedure.ID" :task="task"></TaskInfo>
</el-collapse-item>
</el-collapse>
diff --git a/src/views/dashboard/components/TaskInfo.vue b/src/views/dashboard/components/TaskInfo.vue
index 9f151d4..e085d73 100644
--- a/src/views/dashboard/components/TaskInfo.vue
+++ b/src/views/dashboard/components/TaskInfo.vue
@@ -55,6 +55,7 @@
$status-running: #ffcc00;
$status-ready: #13235a;
$status-done: #13235a;
+$text-color: #d7d7d7;
.task-info {
background-color: #6b83ff;
border-radius: 4px;
@@ -81,6 +82,7 @@
.task-info-content {
font-size: 13px;
padding: 10px 20px;
+ color: $text-color;
.row {
width: 100%;
height: 24px;
diff --git a/src/views/dashboard/components/TaskTabs.vue b/src/views/dashboard/components/TaskTabs.vue
new file mode 100644
index 0000000..4c848ab
--- /dev/null
+++ b/src/views/dashboard/components/TaskTabs.vue
@@ -0,0 +1,76 @@
+<template>
+ <div class="task-tabs">
+ <div
+ v-for="tabName in list"
+ :key="tabName"
+ class="task-tab-item triangle-tip"
+ :class="{ active: props.modelValue === tabName }"
+ @click="selectTab(tabName)"
+ >
+ {{ tabName }}
+ </div>
+ </div>
+</template>
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+ list: string[]
+ modelValue?: string
+}>()
+const emit = defineEmits(['update:modelValue'])
+const data = useVModel(props, 'modelValue', emit)
+
+function selectTab(tabName: string) {
+ data.value = tabName
+}
+</script>
+<style scoped lang="scss">
+$active-bg: #6b83ff;
+$tab-bg: #0b4694;
+$tab-height: 50px;
+.task-tabs {
+ background-color: transparent;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: $tab-height;
+ font-size: 20px;
+
+ .task-tab-item {
+ background-color: $tab-bg;
+ margin-right: 10px;
+ flex: 1;
+ height: $tab-height;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ border-radius: 4px;
+ cursor: pointer;
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+ .active {
+ background-color: $active-bg;
+ font-weight: 600;
+ }
+ .triangle-tip:before {
+ content: '';
+ width: 0;
+ height: 0;
+ border-width: 10px 10px 0;
+ border-style: solid;
+ border-color: $active-bg transparent transparent;
+ position: absolute;
+ left: 50%;
+ margin-left: -10px;
+ bottom: -10px;
+ display: none;
+ }
+ .active.triangle-tip:before {
+ display: block;
+ }
+}
+</style>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index bba3bcc..ea2a7f4 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,6 +1,8 @@
<template>
<DashboardLayout>
- <template #leftBlock1>浠诲姟绛涢�塼abs</template>
+ <template #leftBlock1>
+ <TaskTabs v-model="activeTaskTab" style="margin-top: 20px" :list="taskTabsTitle"></TaskTabs>
+ </template>
<template #leftBlock2>
<ChannelCollapse :channels="channels"></ChannelCollapse>
</template>
@@ -15,10 +17,11 @@
</template>
<script setup lang="ts">
import { getTaskList } from '@/api'
-import { computed, ref } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
import ChannelCollapse from '@/views/dashboard/components/ChannelCollapse.vue'
import type { Task } from '@/api/task'
import { chain } from 'lodash-es'
+import TaskTabs from '@/views/dashboard/components/TaskTabs.vue'
defineOptions({
name: 'DashboardView'
@@ -44,6 +47,12 @@
})
getChannels()
+const taskTabsTitle = ['鏈畬鎴�', '浠婃棩浠诲姟', '宸插畬鎴�']
+const activeTaskTab = ref('鏈畬鎴�')
+
+watchEffect(() => {
+ // console.log(activeTaskTab?.value, 111111)
+})
</script>
<style scoped></style>
--
Gitblit v1.8.0