From 13f102240d9c0c9d5a133fb093551f2e08d7c55c Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期五, 19 一月 2024 16:47:41 +0800
Subject: [PATCH] ie不支持es6的问题，安装插件，配置
---
src/views/dashboard/components/ChannelCollapse.vue | 83 ++++++++++++++++++++++++++++++++++-------
1 files changed, 68 insertions(+), 15 deletions(-)
diff --git a/src/views/dashboard/components/ChannelCollapse.vue b/src/views/dashboard/components/ChannelCollapse.vue
index dcedc3d..8dda63a 100644
--- a/src/views/dashboard/components/ChannelCollapse.vue
+++ b/src/views/dashboard/components/ChannelCollapse.vue
@@ -1,39 +1,78 @@
<template>
<div class="channel-collapse">
<el-collapse v-model="activeChannel">
- <el-collapse-item
- v-for="(tasks, channelNumber) in channels"
- :key="channelNumber"
- :title="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 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'
export interface ChannelCollapseProps {
- channels: Channel
+ 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)
+ // 閫氶亾鏁版嵁鍙樺寲鍚�
+ 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) {
+ tasksStore.setActiveTask(task)
+ let channel = tasksStore?.activeTask?.Channel
+ if (isNumber(channel)) {
+ tasksStore.setActiveChannel(channel)
+ }
+}
</script>
<style scoped lang="scss">
@@ -67,4 +106,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>
--
Gitblit v1.8.0