feat(钢卷管理): 新增生产时间记录及耗时计算功能
添加TimeInput组件用于时间输入,并在钢卷合并、分条、打字、分步操作中增加生产开始/结束时间字段 实现生产耗时自动计算功能,支持显示xx天xx小时xx分钟格式 在基础面板中增加生产时间修正对话框,支持批量修改时间
This commit is contained in:
86
klp-ui/src/components/TimeInput.vue
Normal file
86
klp-ui/src/components/TimeInput.vue
Normal 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>
|
||||
Reference in New Issue
Block a user