<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"
|
:active="task.Procedure.ID === tasksStore.activeTask?.Procedure.ID"
|
:task="task"
|
@click="tasksStore.setActiveTask(task)"
|
></TaskInfo>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { ref, watchEffect } from 'vue'
|
import type { Task } from '@/api/task'
|
import TaskInfo from './TaskInfo.vue'
|
import { CHANNEL_NAME_MAP } from '@/common/constants'
|
import { useTasksStore } from '@/stores/tasks'
|
|
export interface Channel {
|
[channelNumber: number]: Task[]
|
}
|
|
export interface ChannelCollapseProps {
|
channels: Channel
|
}
|
|
const props = defineProps<ChannelCollapseProps>()
|
const activeChannel = ref<string[]>([])
|
|
const tasksStore = useTasksStore()
|
|
watchEffect(() => {
|
const channelNumbers = Object.keys(props.channels).sort((a, b) => +a - +b)
|
activeChannel.value = [...channelNumbers]
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.channel-collapse {
|
color: #fff;
|
background-color: transparent;
|
}
|
:deep(.el-collapse) {
|
border: none;
|
}
|
:deep(.el-collapse-item) {
|
border: none;
|
}
|
:deep(.el-collapse-item__header) {
|
color: #fff;
|
background-color: transparent;
|
font-size: 19px;
|
font-weight: 600;
|
border: none;
|
}
|
:deep(.el-collapse-item__wrap) {
|
color: #fff;
|
background-color: transparent;
|
font-size: 16px;
|
border: none;
|
font-weight: 600;
|
}
|
:deep(.el-collapse-item__content) {
|
color: #fff;
|
background-color: transparent;
|
font-size: 16px;
|
font-weight: 600;
|
}
|
</style>
|
