150 lines
5.6 KiB
Vue
150 lines
5.6 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { ElMessageBox } from 'element-plus'
|
|
import AppDialog from '@/shared/components/AppDialog.vue'
|
|
import InboundMeasurementPanel from './InboundMeasurementPanel.vue'
|
|
import WeightOcrPanel from '../weight/components/WeightOcrPanel.vue'
|
|
|
|
const props = defineProps<{
|
|
modelValue: boolean
|
|
customerId: string
|
|
inboundId: string
|
|
inboundCode?: string | null
|
|
openWarehouseSuggestion?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: boolean]
|
|
updated: []
|
|
submitted: []
|
|
closed: []
|
|
}>()
|
|
|
|
const measurementPanelRef = ref<InstanceType<typeof InboundMeasurementPanel> | null>(null)
|
|
const title = computed(() => `测量 · ${props.inboundCode?.trim() || '入仓码待补充'}`)
|
|
|
|
async function mayClose() {
|
|
if (!measurementPanelRef.value?.isDirty) return true
|
|
try {
|
|
await ElMessageBox.confirm('当前测量数据尚未保存，关闭后将丢失修改。确定关闭吗？', '关闭测量', {
|
|
type: 'warning',
|
|
confirmButtonText: '放弃修改并关闭',
|
|
cancelButtonText: '继续编辑',
|
|
})
|
|
return true
|
|
} catch {
|
|
return false
|
|
}
|
|
}
|
|
|
|
async function requestClose() {
|
|
if (await mayClose()) emit('update:modelValue', false)
|
|
}
|
|
|
|
async function beforeClose(done: () => void) {
|
|
if (await mayClose()) done()
|
|
}
|
|
|
|
function handleWeightSummaryChanged(actualGrossWeightKg: number | null, actualNetWeightKg: number | null) {
|
|
measurementPanelRef.value?.updateActualWeights(actualGrossWeightKg, actualNetWeightKg)
|
|
}
|
|
|
|
function handleUpdated() {
|
|
emit('updated')
|
|
}
|
|
|
|
function handleSubmitted() {
|
|
emit('update:modelValue', false)
|
|
emit('submitted')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AppDialog
|
|
:model-value="modelValue"
|
|
class="inbound-measurement-workspace-dialog"
|
|
:title="title"
|
|
width="min(1240px, calc(100vw - 32px))"
|
|
top="4vh"
|
|
fullscreenable
|
|
destroy-on-close
|
|
append-to-body
|
|
:close-on-click-modal="false"
|
|
:before-close="beforeClose"
|
|
@update:model-value="emit('update:modelValue', $event)"
|
|
@closed="emit('closed')"
|
|
>
|
|
<div class="measurement-dialog-workspace">
|
|
<section class="measurement-dialog-weight" aria-label="称重图片、OCR 与托盘核对">
|
|
<WeightOcrPanel
|
|
:customer-id="customerId"
|
|
:inbound-id="inboundId"
|
|
@changed="handleUpdated"
|
|
@summary-changed="handleWeightSummaryChanged"
|
|
/>
|
|
</section>
|
|
<InboundMeasurementPanel
|
|
ref="measurementPanelRef"
|
|
:customer-id="customerId"
|
|
:inbound-id="inboundId"
|
|
:open-warehouse-suggestion="openWarehouseSuggestion"
|
|
@updated="handleUpdated"
|
|
@saved="handleUpdated"
|
|
@submitted="handleSubmitted"
|
|
/>
|
|
</div>
|
|
<template #footer>
|
|
<div class="measurement-dialog-footer">
|
|
<el-button :disabled="Boolean(measurementPanelRef?.saving || measurementPanelRef?.submitting)" @click="requestClose">取消</el-button>
|
|
<el-button
|
|
v-if="measurementPanelRef?.canEdit"
|
|
type="primary"
|
|
plain
|
|
:loading="measurementPanelRef?.saving"
|
|
:disabled="!measurementPanelRef?.mayMaintain"
|
|
@click="measurementPanelRef?.saveDraft()"
|
|
>保存测量数据</el-button>
|
|
<el-button
|
|
v-if="measurementPanelRef?.canSubmit"
|
|
type="primary"
|
|
:loading="measurementPanelRef?.submitting"
|
|
:disabled="!measurementPanelRef?.maySubmit"
|
|
@click="measurementPanelRef?.submitForReview()"
|
|
>提交审核</el-button>
|
|
</div>
|
|
</template>
|
|
</AppDialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.measurement-dialog-workspace { display: grid; min-width: 0; }
|
|
.measurement-dialog-weight { min-width: 0; padding: 0 0 16px; border-bottom: 1px solid var(--cc-border); }
|
|
.measurement-dialog-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
|
|
.measurement-dialog-footer :deep(.el-button) { margin-left: 0; }
|
|
@media (max-width: 720px) {
|
|
.measurement-dialog-weight { padding-bottom: 14px; }
|
|
.measurement-dialog-footer { display: grid; grid-template-columns: 1fr; }
|
|
.measurement-dialog-footer :deep(.el-button) { width: 100%; min-height: 44px; }
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.inbound-measurement-workspace-dialog.el-dialog { display: flex; max-width: calc(100vw - 32px); height: 92vh; max-height: 92vh; margin-bottom: 0; flex-direction: column; overflow: hidden; }
|
|
.inbound-measurement-workspace-dialog .el-dialog__header { flex: 0 0 auto; margin: 0; padding: 10px 20px; border-bottom: 1px solid var(--cc-border); }
|
|
.inbound-measurement-workspace-dialog .el-dialog__body { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 20px 24px; }
|
|
.inbound-measurement-workspace-dialog .el-dialog__footer { flex: 0 0 auto; padding: 14px 24px; border-top: 1px solid var(--cc-border); }
|
|
.inbound-measurement-workspace-dialog .measurement-panel { border: 0; border-radius: 0; box-shadow: none; }
|
|
.inbound-measurement-workspace-dialog .measurement-panel__heading .measurement-panel__actions,
|
|
.inbound-measurement-workspace-dialog .measurement-panel__footer { display: none; }
|
|
@media (max-width: 720px) {
|
|
.inbound-measurement-workspace-dialog.el-dialog { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px); }
|
|
.inbound-measurement-workspace-dialog .el-dialog__header { padding: 16px; }
|
|
.inbound-measurement-workspace-dialog .el-dialog__body { padding: 14px; }
|
|
}
|
|
@media (max-width: 360px) {
|
|
.inbound-measurement-workspace-dialog.el-dialog { width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px); }
|
|
.inbound-measurement-workspace-dialog .el-dialog__header { padding: 14px 12px; }
|
|
.inbound-measurement-workspace-dialog .el-dialog__body { padding: 10px; }
|
|
}
|
|
</style>
|