feat: 任务详情组件;按钮组件;子标题组件

songshankun

2023-10-31 e9f13c55203da7e9cc2c1b7cb863a7ecee04b21c

 src/views/dashboard/index.vue

@@ -1,64 +1,125 @@
<template>
  <DashboardLayout>
    <template #leftBlock1>任务筛选tabs</template>
    <template #leftBlock1>
      <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>
    <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
      >人员信息
    <template #middleBlock3>
      <SubTitle>任务详情</SubTitle>
      <div class="task-detail">
        <TaskControl :task="activeTask"></TaskControl>
      </div>
    </template>
    <template #middleBlock4>
      <SubTitle>人员信息</SubTitle>
      <PersonInfo :person="person"></PersonInfo>
    </template>
    <template #rightBlock1>时间</template>
    <template #rightBlock1>
      <div class="date-time">
        <CurrentDateTime></CurrentDateTime>
      </div>
    </template>
    <template #rightBlock2>状态面板</template>
    <template #rightBlock3>知识库</template>
    <template #rightBlock3>
      <SubTitle>知识库</SubTitle>
    </template>
  </DashboardLayout>
</template>
<script setup lang="ts">
import { getTaskList } from '@/api'
import { computed, ref } from 'vue'
import ChannelCollapse from '@/views/dashboard/components/ChannelCollapse.vue'
import type { Task } 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'
import TaskControl from '@/views/dashboard/components/TaskControl.vue'
import SubTitle from '@/views/dashboard/components/SubTitle.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 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)

function changeTab(tab: LabelValue) {
  tasksStore.getChannels(tab.value)
}
</script>

<style scoped></style>
<style scoped lang="scss">
$active-tab-color: #00dfdf;
.date-time {
  width: 100%;
  display: flex;
  align-items: center;
  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>