<template>
|
<div class="task-control">
|
<div class="task-info">
|
<div class="task-info-item">
|
<div class="task-info-title">计划开始时间</div>
|
<div class="task-info-content">{{ formatDate(task?.Procedure?.startTime) }}</div>
|
</div>
|
<div class="task-info-item">
|
<div class="task-info-title">实际开始时间</div>
|
<div class="task-info-content">{{ formatDate(task?.Procedure?.realStartTime) }}</div>
|
</div>
|
|
<div class="task-info-item">
|
<div class="task-info-title">实际结束时间</div>
|
<div class="task-info-content">{{ formatDate(task?.Procedure?.realEndTime) }}</div>
|
</div>
|
</div>
|
|
<div class="produce-btn">
|
<BigButton v-if="task?.Procedure.Status === 1" class="btn" :disabled="!task?.CanStarted" @click="startProduce">
|
开始生产
|
</BigButton>
|
<template v-if="task?.Procedure.Status === 2 || task?.Procedure.Status === 3">
|
<BigButton class="btn" bg-color="#ff9933">打印</BigButton>
|
<BigButton class="btn" bg-color="#00cc33">报工</BigButton>
|
<BigButton class="btn" bg-color="#ff0000">完成</BigButton>
|
</template>
|
</div>
|
</div>
|
<TaskControlModal v-model="showTaskControlModal" :task="task"></TaskControlModal>
|
</template>
|
<script setup lang="ts">
|
import type { Task } from '@/api/task'
|
import { ref, toRefs } from 'vue'
|
import BigButton from '@/views/dashboard/components/BigButton.vue'
|
import { useDateFormat } from '@vueuse/core'
|
import TaskControlModal from '@/views/dashboard/components/TaskControlModal.vue'
|
|
const props = defineProps<{
|
task?: Task
|
}>()
|
const { task } = toRefs(props)
|
|
const showTaskControlModal = ref(false)
|
|
/**
|
* 开始生产
|
*/
|
function startProduce() {
|
showTaskControlModal.value = true
|
}
|
|
/**
|
* 格式化时间戳
|
* @param timestamp 后端返的10位时间戳
|
*/
|
function formatDate(timestamp?: number) {
|
if (!timestamp) {
|
return '--'
|
}
|
const time = useDateFormat(timestamp * 1000, 'YYYY-MM-DD', { locales: 'zh-cn' })
|
return time.value
|
}
|
</script>
|
<style scoped lang="scss">
|
$title-text-color: #9599af;
|
$content-text-color: #d7d7d7;
|
|
.task-control {
|
display: flex;
|
align-items: start;
|
width: 100%;
|
}
|
.task-info,
|
.produce-btn {
|
width: 50%;
|
flex: 1;
|
height: 100%;
|
}
|
.produce-btn {
|
padding: 16px 0;
|
& > .btn {
|
margin-bottom: 14px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
}
|
|
.task-info-item {
|
padding: 10px 20px;
|
margin-bottom: 6px;
|
}
|
.task-info-title {
|
font-size: 18px;
|
color: $title-text-color;
|
}
|
.task-info-content {
|
font-size: 19px;
|
color: $content-text-color;
|
font-weight: 600;
|
margin-top: 12px;
|
}
|
.produce-btn {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.start-btn {
|
background-color: #4efefa;
|
}
|
.print-btn {
|
background-color: #ff9933;
|
}
|
.report-btn {
|
background-color: #00cc33;
|
}
|
.finish-btn {
|
background-color: #ff0000;
|
}
|
</style>
|
