<template>
|
<div class="channel-collapse">
|
<el-collapse v-model="activeChannel">
|
<el-collapse-item
|
v-for="(channel, channelNumber) in channels"
|
:key="channelNumber"
|
:title="CHANNEL_NAME_MAP[channelNumber] + ' 通道' + ' (' + (channel?.TaskCount ?? 0) + ')'"
|
:name="String(channelNumber)"
|
>
|
<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="tasksStore.setActiveTask(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 { TasksGroupByChannel } from '@/api/task'
|
import TaskInfo from './TaskInfo.vue'
|
import { CHANNEL_NAME_MAP } from '@/common/constants'
|
import { useTasksStore } from '@/stores/tasks'
|
import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
|
|
export interface ChannelCollapseProps {
|
channels: TasksGroupByChannel
|
}
|
|
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;
|
}
|
|
.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>
|
