feat(钢卷管理): 新增生产时间记录及耗时计算功能

添加TimeInput组件用于时间输入,并在钢卷合并、分条、打字、分步操作中增加生产开始/结束时间字段
实现生产耗时自动计算功能,支持显示xx天xx小时xx分钟格式
在基础面板中增加生产时间修正对话框,支持批量修改时间
This commit is contained in:
砂糖
2026-03-17 18:01:46 +08:00
parent 3c9f82add4
commit 3d6391bf32
7 changed files with 552 additions and 42 deletions

View File

@@ -0,0 +1,86 @@
<template>
<div class="time-input-group">
<el-date-picker v-model="dateValue" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 140px;" @change="updateDateTime" />
<span class="time-separator">@</span>
<el-input-number :controls="false" v-model="hourValue" placeholder="时" min="0" max="23" style="width: 60px;" @change="updateDateTime" />
<span class="time-separator">:</span>
<el-input-number :controls="false" v-model="minuteValue" placeholder="分" min="0" max="59" style="width: 60px;" @change="updateDateTime" />
<span class="time-separator">:00</span>
<el-button v-if="showNowButton" type="text" size="small" @click="setToNow" style="margin-left: 8px;">此刻</el-button>
</div>
</template>
<script>
export default {
name: 'TimeInput',
props: {
value: {
type: String,
default: ''
},
showNowButton: {
type: Boolean,
default: false
}
},
data() {
return {
dateValue: '',
hourValue: '',
minuteValue: ''
};
},
watch: {
value: {
handler(newValue) {
this.parseDateTime(newValue);
},
immediate: true
}
},
methods: {
parseDateTime(dateTimeStr) {
if (!dateTimeStr) {
this.dateValue = '';
this.hourValue = '';
this.minuteValue = '';
return;
}
const date = new Date(dateTimeStr);
if (!isNaN(date.getTime())) {
this.dateValue = date.toISOString().split('T')[0];
this.hourValue = date.getHours();
this.minuteValue = date.getMinutes();
}
},
updateDateTime() {
if (this.dateValue && this.hourValue !== '' && this.minuteValue !== '') {
const dateTimeStr = `${this.dateValue} ${this.hourValue}:${this.minuteValue}:00`;
this.$emit('input', dateTimeStr);
} else {
this.$emit('input', '');
}
},
setToNow() {
const now = new Date();
this.dateValue = now.toISOString().split('T')[0];
this.hourValue = now.getHours();
this.minuteValue = now.getMinutes();
this.updateDateTime();
}
}
};
</script>
<style scoped>
.time-input-group {
display: flex;
align-items: center;
gap: 8px;
}
.time-separator {
color: #909399;
font-size: 14px;
}
</style>