feat: 通道展示组件添加查看更多逻辑;任务选中展示;添加加工信息组件

songshankun

2023-10-30 9bde1998a8a0bc6c1ab314f8cf27c10aef016689

 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>