feat: 任务分类切换组件

songshankun

2023-10-28 20552f58f1a57b07ee237da02d8e87c574b669d6

feat: 任务分类切换组件

 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>

 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;

 src/views/dashboard/components/TaskTabs.vue

New file
@@ -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>

 src/views/dashboard/index.vue

@@ -1,6 +1,8 @@
<template>
  <DashboardLayout>
    <template #leftBlock1>任务筛选tabs</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>