<template>
|
<n-modal
|
:show="visible"
|
@update:show="(value) => emit('update:visible', value)"
|
title="🔧 完成校准"
|
preset="card"
|
size="medium"
|
:style="bodyStyle"
|
>
|
<div class="calib-info">
|
<div class="info-row">
|
<span class="info-label">盒子名称</span>
|
<span class="info-value">{{ form.name }}</span>
|
</div>
|
<div class="info-row">
|
<span class="info-label">盒子编号</span>
|
<span class="info-value">{{ form.code }}</span>
|
</div>
|
<div class="info-row">
|
<span class="info-label">所在位置</span>
|
<span class="info-value">{{ form.location }}</span>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="form-label">本次校准日期 <span class="required">*</span></label>
|
<n-date-picker v-model:value="form.calibDate" type="date" />
|
</div>
|
<div class="form-group">
|
<label class="form-label">本次实测重量（可选）</label>
|
<div class="form-row">
|
<n-input-number v-model:value="form.actualWeight" placeholder="实测重量" />
|
<span style="color: #666;">{{ props.rowData.unit || 'g' }}</span>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="form-label">校准备注</label>
|
<n-input v-model:value="form.note" type="textarea" placeholder="校准结果、偏差说明等…" />
|
</div>
|
<template #footer>
|
<div class="modal-footer">
|
<div class="modal-footer-right">
|
<n-button @click="handleCancel">取消</n-button>
|
<n-button type="success" @click="handleSubmit">✅ 确认校准完成</n-button>
|
</div>
|
</div>
|
</template>
|
</n-modal>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive, watch } from 'vue';
|
import { weighingBoxApi } from '@/service/api/md/weighing-box';
|
import { useMessage } from 'naive-ui';
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
rowData: {
|
type: Object,
|
default: () => ({})
|
}
|
});
|
|
const emit = defineEmits(['update:visible', 'submitted']);
|
|
const message = useMessage();
|
|
const form = reactive({
|
id: undefined,
|
name: '',
|
code: '',
|
weight: '',
|
calibDate: null,
|
actualWeight: null,
|
note: ''
|
});
|
|
const bodyStyle = {
|
width: '500px'
|
};
|
|
watch(() => props.visible, (newValue) => {
|
if (newValue && props.rowData) {
|
form.id = props.rowData.id;
|
form.name = props.rowData.name;
|
form.code = props.rowData.code;
|
form.weight = props.rowData.weight;
|
form.calibDate = new Date();
|
form.actualWeight = null;
|
form.note = '';
|
}
|
});
|
|
const handleCancel = () => {
|
emit('update:visible', false);
|
};
|
|
const handleSubmit = async () => {
|
try {
|
const response = await weighingBoxApi.calibrate({
|
boxId: form.id,
|
calibDate: form.calibDate,
|
actualWeight: form.actualWeight,
|
note: form.note
|
});
|
const res = response.response.data;
|
|
if (res.code === 200) {
|
message.success('校准成功');
|
emit('update:visible', false);
|
emit('submitted');
|
} else {
|
message.error(res.msg || '校准失败');
|
}
|
} catch (error) {
|
message.error('校准失败');
|
}
|
};
|
</script>
|
|
<style scoped>
|
/* 校准信息 */
|
.calib-info {
|
background: #f8f9fa;
|
border-radius: 8px;
|
padding: 16px;
|
margin-bottom: 20px;
|
border: 1px solid #e5e7eb;
|
}
|
|
.calib-info .info-row {
|
display: flex;
|
justify-content: space-between;
|
padding: 8px 0;
|
font-size: 14px;
|
border-bottom: 1px solid #e5e7eb;
|
}
|
|
.calib-info .info-row:last-child {
|
border-bottom: none;
|
}
|
|
.calib-info .info-label {
|
color: #666;
|
font-weight: 500;
|
}
|
|
.calib-info .info-value {
|
color: #333;
|
}
|
|
/* 表单样式 */
|
.form-group {
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 16px;
|
}
|
|
.form-label {
|
font-size: 14px;
|
font-weight: 500;
|
color: #333;
|
margin-bottom: 8px;
|
}
|
|
.form-label .required {
|
color: #ff4d4f;
|
margin-left: 4px;
|
}
|
|
.form-row {
|
display: flex;
|
gap: 10px;
|
align-items: center;
|
}
|
|
/* 模态框底部 */
|
.modal-footer {
|
width: 100%;
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
}
|
|
.modal-footer-right {
|
display: flex;
|
gap: 10px;
|
}
|
</style>
|
