<template>
|
<div class="workstation-scanner-config">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="扫码间隔(秒)">
|
<el-input-number
|
v-model="scanIntervalSeconds"
|
:min="1"
|
:max="60"
|
:step="1"
|
style="width: 100%;"
|
/>
|
<span class="form-tip">定时扫描MES写区的时间间隔，默认10秒</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="产线编号">
|
<el-input-number
|
v-model="config.workLine"
|
:min="1"
|
:max="100"
|
:step="1"
|
style="width: 100%;"
|
/>
|
<span class="form-tip">产线编号，用于过滤玻璃信息</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, watch } from 'vue'
|
|
const props = defineProps({
|
modelValue: {
|
type: Object,
|
default: () => ({})
|
}
|
})
|
|
const emit = defineEmits(['update:modelValue'])
|
|
// 配置数据
|
const config = ref({
|
scanIntervalMs: 10000,
|
workLine: null
|
})
|
|
// 时间字段（秒）- 用于前端显示和输入
|
const scanIntervalSeconds = ref(10)
|
|
// 监听props变化
|
watch(() => props.modelValue, (newVal) => {
|
if (newVal && Object.keys(newVal).length > 0) {
|
config.value = {
|
scanIntervalMs: newVal.scanIntervalMs ?? 10000,
|
workLine: newVal.workLine ?? null
|
}
|
// 将毫秒转换为秒用于显示
|
scanIntervalSeconds.value = (config.value.scanIntervalMs ?? 10000) / 1000
|
}
|
}, { immediate: true, deep: true })
|
|
// 监听秒字段变化，转换为毫秒并更新config
|
watch(scanIntervalSeconds, (val) => {
|
config.value.scanIntervalMs = Math.round(val * 1000)
|
emit('update:modelValue', { ...config.value })
|
})
|
|
// 监听config其他字段变化，同步到父组件
|
watch(() => [
|
config.value.workLine
|
], () => {
|
emit('update:modelValue', { ...config.value })
|
}, { deep: true })
|
</script>
|
|
<style scoped>
|
.form-tip {
|
margin-left: 10px;
|
font-size: 12px;
|
color: #909399;
|
}
|
</style>
|
