<template>
|
<div class="base-modal">
|
<el-dialog v-model="modelData" :close-on-click-modal="false" :show-close="false" width="80%">
|
<template #header>
|
<div class="modal-title">
|
<div class="modal-title-text">报工记录</div>
|
<div class="modal-title-close" @click="closeModal">
|
<el-icon :size="22" color="#fff"><CloseBold /></el-icon>
|
</div>
|
</div>
|
</template>
|
<div class="table-content">
|
<el-table class="table" :data="reportingRecordList" border style="width: 100%" :scrollbar-always-on="true">
|
<template #empty> 无数据 </template>
|
<el-table-column type="index" label="序号" width="56" align="center" :resizable="false"></el-table-column>
|
<el-table-column prop="deviceId" label="报工来源" align="center" :resizable="false">
|
<template #default="scope">
|
{{ scope?.row?.workerName ?? '--' }}/{{ scope?.row?.deviceName ?? '--' }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="barCode" label="条码" align="center" :resizable="false">条码</el-table-column>
|
<el-table-column prop="reportAmount" label="报工数量" align="center" :resizable="false" />
|
<el-table-column prop="finishAmount" label="完成数量" align="center" :resizable="false" />
|
<el-table-column prop="startTime" label="开始时间" align="center" :resizable="false">
|
<template #default="scope">
|
{{ formatDate(scope.row.startTime) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="endTime" label="结束时间" align="center" :resizable="false">
|
<template #default="scope">
|
{{ formatDate(scope.row.endTime) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="workerTime" label="工时" align="center" :resizable="false">
|
<template #default="scope">
|
{{ formatDuration(scope.row.workerTime) }}
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { useDateFormat, useVModel } from '@vueuse/core'
|
import { CloseBold } from '@element-plus/icons-vue'
|
import { ref, watch } from 'vue'
|
import { apiGetReportingRecordList } from '@/api'
|
import type { ReportingRecord } from '@/api/reporting'
|
import { useTasksStore } from '@/stores/tasks'
|
import { isNumber } from 'lodash-es'
|
|
export interface BaseModalProps {
|
/** 是否展示模态框 */
|
modelValue: boolean
|
}
|
const props = withDefaults(defineProps<BaseModalProps>(), {
|
modelValue: false
|
})
|
const emit = defineEmits<{
|
'update:modelValue': [show: boolean]
|
close: []
|
}>()
|
const modelData = useVModel(props, 'modelValue', emit)
|
function closeModal() {
|
emit('update:modelValue', false)
|
emit('close')
|
}
|
|
const taskStore = useTasksStore()
|
|
// 报工记录列表
|
const reportingRecordList = ref<ReportingRecord[]>([])
|
function getReportingList() {
|
const procedureId = taskStore.activeTask?.Procedure.ID
|
if (!procedureId) {
|
return
|
}
|
apiGetReportingRecordList({
|
procedureId: procedureId
|
})
|
.then((res) => {
|
if (res.code === 200) {
|
reportingRecordList.value = res?.data ?? []
|
} else {
|
reportingRecordList.value = []
|
}
|
})
|
.catch((err) => {
|
console.error(err)
|
reportingRecordList.value = []
|
})
|
}
|
// 打开弹窗时获取报工记录
|
watch(modelData, (show) => {
|
if (show) {
|
getReportingList()
|
}
|
})
|
|
/**
|
* 格式化时间戳
|
* @param timestamp 后端返的10位时间戳
|
*/
|
function formatDate(timestamp?: number) {
|
if (!timestamp) {
|
return '--'
|
}
|
const time = useDateFormat(timestamp * 1000, 'YYYY-MM-DD HH:mm:ss', { locales: 'zh-cn' })
|
return time.value
|
}
|
|
/**
|
* 接受秒数,返回格式化后的 时分秒字符串
|
* @param duration 秒数
|
* @returns {string} 格式化后的 时分秒字符串
|
*/
|
function formatDuration(duration: number): string {
|
if (duration < 0 || !isNumber(duration)) {
|
return '--'
|
}
|
const h = Math.floor(duration / 3600)
|
const m = Math.floor((duration % 3600) / 60)
|
const s = Math.floor(duration % 60)
|
return `${h > 0 ? h + '时' : ''}${m > 0 ? m + '分钟' : ''}${s}秒`
|
}
|
</script>
|
|
<style scoped lang="scss">
|
:deep(.el-dialog) {
|
background-color: #1d3081;
|
}
|
|
.modal-title {
|
position: relative;
|
display: flex;
|
align-items: center;
|
&-text {
|
padding-left: 12px;
|
font-size: 26px;
|
font-weight: 600;
|
}
|
&-close {
|
cursor: pointer;
|
height: 36px;
|
width: 36px;
|
border-radius: 50%;
|
position: absolute;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
top: -16px;
|
right: -30px;
|
}
|
}
|
$bgc: #1d3081;
|
.table-content {
|
:deep(.el-table .el-table__cell) {
|
background-color: $bgc;
|
color: #dcdfec;
|
}
|
:deep(.el-table__body tr) {
|
background-color: $bgc;
|
color: #dcdfec;
|
}
|
:deep(.el-table__body tr:hover > td) {
|
background-color: $bgc;
|
}
|
:deep(.el-scrollbar__wrap) {
|
background-color: $bgc;
|
}
|
height: calc(70vh - 80px);
|
}
|
.table {
|
height: 100%;
|
}
|
</style>
|
