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

songshankun

2023-10-30 b594c6680116745912ed943afd00a9b896496c76

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

 src/api/task.ts

@@ -48,7 +48,7 @@
  workHours: string
  inputMaterials: string
  outputMaterials: string
  workers: Workers[]
  workers: Worker[]
  allProcedureNames: string[]
  channel: number
}
@@ -62,7 +62,7 @@
  CanStarted: boolean
}

export interface Workers {
export interface Worker {
  workerId: string
  workerName: string
  phoneNum: string
@@ -78,7 +78,7 @@
export interface TasksResponse {
  Tasks: Task[]
  TaskCount: number
  workers: Workers[]
  workers: Worker[]
  Prompt: Prompt
  ChannelAmount: number
}

 src/components/DashboardLayout.vue

@@ -5,8 +5,8 @@
        <slot name="leftBlock1"></slot>
      </div>
      <div class="double-height-block padding-4">
        <div class="card">
          <el-scrollbar always>
        <div class="card scroll-card">
          <el-scrollbar always class="scroller">
            <slot name="leftBlock2"></slot>
          </el-scrollbar>
        </div>
@@ -123,4 +123,10 @@
  border-radius: 6px;
  padding: 10px 16px;
}
.scroll-card {
  padding: 0;
}
.scroller {
  padding: 10px 16px;
}
</style>

 src/stores/tasks.ts

New file
@@ -0,0 +1,12 @@
import { ref } from 'vue'
import { defineStore } from 'pinia'
import type { Task } from '@/api/task'

export const useTasksStore = defineStore('tasks', () => {
  /** 当前高亮的任务 */
  const activeTask = ref<Task>()
  function setActiveTask(task: Task) {
    activeTask.value = task
  }
  return { activeTask, setActiveTask }
})

 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]

 src/views/dashboard/components/PersonInfo.vue

@@ -29,10 +29,12 @@
  </div>
</template>
<script setup lang="ts">
import type { UserFilled } from '@element-plus/icons-vue'
import { computed, toRefs } from 'vue'
import { StarFilled, UserFilled } from '@element-plus/icons-vue'
import { toRefs } from 'vue'
import type { Worker } from '@/api/task'

export interface PersonInfoProps {
  person: person
  person: Worker
}

const props = defineProps<PersonInfoProps>()

 src/views/dashboard/components/TaskInfo.vue

@@ -1,5 +1,5 @@
<template>
  <div class="task-info" :class="{ selected }">
  <div class="task-info" :class="{ active }">
    <div
      class="task-info-title"
      :class="{
@@ -31,13 +31,13 @@

export interface TaskInfoProps {
  task: Task
  selected?: boolean
  active?: boolean
}

const props = withDefaults(defineProps<TaskInfoProps>(), {
  selected: false
  active: false
})
const { task, selected } = toRefs(props)
const { task, active } = toRefs(props)

const planTimeText = computed(() => {
  const format = (date: number) => {
@@ -56,9 +56,12 @@
$status-ready: #13235a;
$status-done: #13235a;
$text-color: #d7d7d7;
$active-color: #00dfdf;
.task-info {
  background-color: #6b83ff;
  border-radius: 4px;
  overflow: initial;
  cursor: pointer;
}
.task-info-title {
  height: 34px;
@@ -94,4 +97,17 @@
    flex: 1;
  }
}
.active {
  position: relative;
  &:before {
    content: '';
    width: 8px;
    background-color: $active-color;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 6px 0 0 6px;
  }
}
</style>

 src/views/dashboard/index.vue

@@ -10,8 +10,12 @@
    <template #middleBlock2
      >主看板
      <ProcessInfo :process="process"></ProcessInfo>
      <div v-if="activeTask">
        任务详情
        {{ activeTask.Order.workOrderId }}
      </div>
    </template>
    <template #middleBlock3>任务详情</template>
    <template #middleBlock3> 任务详情 </template>
    <template #middleBlock4
      >人员信息
      <PersonInfo :person="person"></PersonInfo>
@@ -29,12 +33,14 @@
import { getTaskList } from '@/api'
import { computed, ref, watchEffect } from 'vue'
import ChannelCollapse from '@/views/dashboard/components/ChannelCollapse.vue'
import type { Task } from '@/api/task'
import type { Task, Worker } from '@/api/task'
import { chain } from 'lodash-es'
import ProcessInfo from '@/views/dashboard/components/ProcessInfo.vue'
import PersonInfo from '@/views/dashboard/components/PersonInfo.vue'
import TaskTabs from '@/views/dashboard/components/TaskTabs.vue'
import CurrentDateTime from '@/views/dashboard/components/CurrentDateTime.vue'
import { useTasksStore } from '@/stores/tasks'
import { storeToRefs } from 'pinia'

defineOptions({
  name: 'DashboardView'
@@ -65,12 +71,16 @@
  return {
    workerName: '姓名',
    phone: '111'
  }
  } as unknown as Worker
})
getChannels()
const taskTabsTitle = ['未完成', '今日任务', '已完成']
const activeTaskTab = ref('未完成')

const tasksStore = useTasksStore()

const { activeTask } = storeToRefs(tasksStore)

watchEffect(() => {
  // console.log(activeTaskTab?.value, 111111)
})