feat: 任务组件添加选中状态;全局状态管理添加当前选中任务

songshankun

2023-10-30 b594c6680116745912ed943afd00a9b896496c76

 src/views/dashboard/components/ChannelCollapse.vue

@@ -7,7 +7,13 @@
        :title="CHANNEL_NAME_MAP[channelNumber] + ' 通道'"
        :name="String(channelNumber)"
      >
        <TaskInfo v-for="task in tasks" :key="task.Procedure.ID" :task="task"></TaskInfo>
        <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>
@@ -17,6 +23,7 @@
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[]
@@ -29,6 +36,8 @@
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]