From 9bde1998a8a0bc6c1ab314f8cf27c10aef016689 Mon Sep 17 00:00:00 2001 From: songshankun <songshankun@foxmail.com> Date: 星期一, 30 十月 2023 20:30:09 +0800 Subject: [PATCH] feat: 通道展示组件添加查看更多逻辑;任务选中展示;添加加工信息组件 --- src/views/dashboard/index.vue | 105 +++++++++++++++++++++++++++++++--------------------- 1 files changed, 62 insertions(+), 43 deletions(-) diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue index 30a0e7c..7e6127a 100644 --- a/src/views/dashboard/index.vue +++ b/src/views/dashboard/index.vue @@ -1,19 +1,20 @@ <template> <DashboardLayout> <template #leftBlock1> - <TaskTabs v-model="activeTaskTab" style="margin-top: 20px" :list="taskTabsTitle"></TaskTabs> + <TaskTabs v-model="activeTaskTab" style="margin-top: 20px" :list="taskTabsList" @change="changeTab"></TaskTabs> </template> <template #leftBlock2> <ChannelCollapse :channels="channels"></ChannelCollapse> </template> <template #middleBlock1>鏍囬</template> - <template #middleBlock2 - >涓荤湅鏉� - <ProcessInfo :process="process"></ProcessInfo> - <div v-if="activeTask"> - 浠诲姟璇︽儏 - {{ activeTask.Order.workOrderId }} - </div> + <template #middleBlock2> + <el-tabs v-model="activeMainTabName" class="main-info-tabs"> + <el-tab-pane label="鍔犲伐淇℃伅" name="鍔犲伐淇℃伅"> + <ProcessingInfo style="margin-top: 6px" :task="activeTask"></ProcessingInfo> + </el-tab-pane> + <el-tab-pane label="宸ヨ壓淇℃伅" name="宸ヨ壓淇℃伅">Config</el-tab-pane> + <el-tab-pane label="鐗╂枡娓呭崟" name="鐗╂枡娓呭崟">Role</el-tab-pane> + </el-tabs> </template> <template #middleBlock3> 浠诲姟璇︽儏 </template> <template #middleBlock4 @@ -30,63 +31,55 @@ </DashboardLayout> </template> <script setup lang="ts"> -import { getTaskList } from '@/api' -import { computed, ref, watchEffect } from 'vue' +import { computed, ref } from 'vue' import ChannelCollapse from '@/views/dashboard/components/ChannelCollapse.vue' -import type { Task, Worker } from '@/api/task' -import { chain } from 'lodash-es' -import ProcessInfo from '@/views/dashboard/components/ProcessInfo.vue' +import type { Worker } from '@/api/task' import PersonInfo from '@/views/dashboard/components/PersonInfo.vue' +import type { LabelValue } from '@/views/dashboard/components/TaskTabs.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' +import ProcessingInfo from '@/views/dashboard/components/ProcessingInfo.vue' defineOptions({ name: 'DashboardView' }) -const taskList = ref<Task[]>() - -function getChannels() { - getTaskList(2) - .then((res) => { - taskList.value = res.data.Tasks - }) - .catch((err) => { - console.error(err) - taskList.value = [] - }) -} - -const channels = computed(() => { - return chain<Task>(taskList.value) - .groupBy((ele) => ele.Channel) - .value() -}) -const process = computed(() => { - return { name: '宸ヨ壓鍚嶇О', number: '111' } -}) const person = computed(() => { return { workerName: '濮撳悕', phone: '111' } as unknown as Worker }) -getChannels() -const taskTabsTitle = ['鏈畬鎴�', '浠婃棩浠诲姟', '宸插畬鎴�'] -const activeTaskTab = ref('鏈畬鎴�') +const taskTabsList = [ + { + label: '鏈畬鎴�', + value: 1 + }, + { + label: '浠婃棩浠诲姟', + value: 2 + }, + { + label: '宸插畬鎴�', + value: 3 + } +] +const activeTaskTab = ref(1) +const activeMainTabName = ref<string>('鍔犲伐淇℃伅') const tasksStore = useTasksStore() +const { activeTask, channels } = storeToRefs(tasksStore) +tasksStore.getChannels(1) -const { activeTask } = storeToRefs(tasksStore) - -watchEffect(() => { - // console.log(activeTaskTab?.value, 111111) -}) +function changeTab(tab: LabelValue) { + tasksStore.getChannels(tab.value) +} </script> -<style scoped> +<style scoped lang="scss"> +$active-tab-color: #00dfdf; .date-time { width: 100%; display: flex; @@ -94,4 +87,30 @@ justify-content: center; padding-top: 12px; } + +:deep(.el-tabs__item) { + color: #fff; + font-size: 20px; +} +:deep(.el-tabs__nav-scroll) { + height: 46px; +} +:deep(.el-tabs__nav) { + height: 46px; +} +:deep(.el-step__title.is-process) { + color: #fff; +} + +:deep(.el-tabs__item.is-active) { + color: $active-tab-color; + font-weight: 600; +} +:deep(.el-tabs__active-bar) { + background-color: $active-tab-color; + height: 4px; +} +:deep(.el-tabs__nav-wrap::after) { + height: 1px; +} </style> -- Gitblit v1.8.0