feat:创建新分支

charles

2024-04-29 b95cf940af8e01e4eca30b2599b029c2f645bd1e

 src/views/dashboard/components/ChannelCollapse.vue

@@ -1,38 +1,97 @@
<template>
  <div class="channel-collapse">
    <el-collapse v-model="activeChannel">
      <el-collapse-item
        v-for="(tasks, channelNumber) in channels"
        :key="channelNumber"
        :title="CHANNEL_NAME_MAP[channelNumber] + ' 通道'"
        :name="String(channelNumber)"
      >
        <TaskInfo v-for="task in tasks" :key="task.Procedure.ID" :task="task"></TaskInfo>
      <el-collapse-item v-for="(channel, channelNumber) in channels" :key="channelNumber" :name="String(channelNumber)">
        <template #title>
          <div style="width: 100%; text-align: left" @click="selectChannel(channelNumber)">
            {{ CHANNEL_NAME_MAP[channelNumber] + ' 通道' + ' (' + (channel?.TaskCount ?? 0) + ')' }}
          </div>
        </template>
        <TaskInfo
          v-for="task in channel.Tasks"
          :key="task.Procedure.ID"
          :active="task.Procedure.ID === tasksStore.activeTask?.Procedure.ID"
          :task="task"
          style="margin-bottom: 16px"
          @click="selectTask(task)"
        ></TaskInfo>

        <div
          v-show="channel.Tasks?.length && tasksStore.moreBtnStatus?.[channelNumber]"
          class="btn more"
          @click="tasksStore.moreChannelTasksBtn(channelNumber)"
        >
          查看更多
          <el-icon style="margin-left: 6px"><ArrowDownBold /></el-icon>
        </div>

        <div
          v-show="channel.TaskCount > 3 && channel.Tasks?.length && !tasksStore.moreBtnStatus?.[channelNumber]"
          class="btn fold"
          @click="tasksStore.foldChannelTasksBtn(channelNumber)"
        >
          收起
          <el-icon style="margin-left: 6px"><ArrowUpBold /></el-icon>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import type { Task } from '@/api/task'
import type { Task, TasksGroupByChannel } from '@/api/task'
import TaskInfo from './TaskInfo.vue'
import { CHANNEL_NAME_MAP } from '@/common/constants'

export interface Channel {
  [channelNumber: number]: Task[]
}
import { useTasksStore } from '@/stores/tasks'
import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
import { isNumber } from 'lodash-es'
import { getTaskInfo } from '@/api'
import type { TaskInfoParams } from '@/api'
import { storeToRefs } from 'pinia'

export interface ChannelCollapseProps {
  channels: Channel
  channels: TasksGroupByChannel
}

const props = defineProps<ChannelCollapseProps>()
const activeChannel = ref<string[]>([])

const tasksStore = useTasksStore()
const { activeTask } = storeToRefs(tasksStore)

watchEffect(() => {
  const channelNumbers = Object.keys(props.channels).sort((a, b) => +a - +b)
  // 通道数据变化后
  const channelNumbers = Object.keys(props?.channels ?? {}).sort((a, b) => +a - +b)
  activeChannel.value = [...channelNumbers]
})

function selectChannel(channelNumber: number) {
  tasksStore.setActiveTask(undefined)
  tasksStore.setActiveChannel(+channelNumber)
}

function selectTask(task: Task | undefined) {
  console.log(task, 'iiiiiii')

  const params: TaskInfoParams = {
    deviceID: localStorage.getItem('currentDeviceID') || '',
    procedureID: Number(task?.Procedure.ID)
  }
  return getTaskInfo(params)
    .then((res) => {
      tasksStore.setActiveTask(res.data)
      let channel = tasksStore?.activeTask?.Channel
      if (isNumber(channel)) {
        tasksStore.setActiveChannel(channel)
      }
      // taskStore.activeTask?.value = res.data
    })
    .catch((err) => {
      console.error(err)
    })
    .finally(() => {})
  // tasksStore.setActiveTask(task)
}
</script>

<style scoped lang="scss">
@@ -49,7 +108,7 @@
:deep(.el-collapse-item__header) {
  color: #fff;
  background-color: transparent;
  font-size: 19px;
  font-size: 18px;
  font-weight: 600;
  border: none;
}
@@ -66,4 +125,18 @@
  font-size: 16px;
  font-weight: 600;
}

.btn {
  width: 70%;
  height: 50px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(to right, rgb(29, 96, 212) 0%, rgb(47, 122, 251), rgb(29, 96, 212) 100%);
}
</style>