From b594c6680116745912ed943afd00a9b896496c76 Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期一, 30 十月 2023 11:26:43 +0800
Subject: [PATCH] feat: 任务组件添加选中状态;全局状态管理添加当前选中任务
---
src/views/dashboard/components/TaskInfo.vue | 24 ++++++++++--
src/views/dashboard/index.vue | 16 ++++++-
src/api/task.ts | 6 +-
src/views/dashboard/components/ChannelCollapse.vue | 11 +++++
src/views/dashboard/components/PersonInfo.vue | 8 ++-
src/stores/tasks.ts | 12 ++++++
src/components/DashboardLayout.vue | 10 ++++-
7 files changed, 71 insertions(+), 16 deletions(-)
diff --git a/src/api/task.ts b/src/api/task.ts
index a939691..7fdcdf1 100644
--- a/src/api/task.ts
+++ b/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
}
diff --git a/src/components/DashboardLayout.vue b/src/components/DashboardLayout.vue
index 692c86f..ad79b82 100644
--- a/src/components/DashboardLayout.vue
+++ b/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>
diff --git a/src/stores/tasks.ts b/src/stores/tasks.ts
new file mode 100644
index 0000000..32c3a64
--- /dev/null
+++ b/src/stores/tasks.ts
@@ -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 }
+})
diff --git a/src/views/dashboard/components/ChannelCollapse.vue b/src/views/dashboard/components/ChannelCollapse.vue
index 693ab61..fb4f3a3 100644
--- a/src/views/dashboard/components/ChannelCollapse.vue
+++ b/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]
diff --git a/src/views/dashboard/components/PersonInfo.vue b/src/views/dashboard/components/PersonInfo.vue
index d054728..95693e4 100644
--- a/src/views/dashboard/components/PersonInfo.vue
+++ b/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>()
diff --git a/src/views/dashboard/components/TaskInfo.vue b/src/views/dashboard/components/TaskInfo.vue
index e085d73..d0ba6e1 100644
--- a/src/views/dashboard/components/TaskInfo.vue
+++ b/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>
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index b927f26..30a0e7c 100644
--- a/src/views/dashboard/index.vue
+++ b/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)
})
--
Gitblit v1.8.0