170 lines
7.3 KiB
Vue
170 lines
7.3 KiB
Vue
<script setup lang="ts">
|
|
import '@/styles/adminDensity.css'
|
|
import './measurementDensity.css'
|
|
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
|
|
customerName?: string | null
|
|
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('当前测量数据尚未保存，关闭后将丢失修改。确定关闭吗？', '关闭测量', { customClass: 'admin-density-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,
|
|
hasConfirmedWeight: boolean,
|
|
) {
|
|
measurementPanelRef.value?.updateWeightEvidence(actualGrossWeightKg, actualNetWeightKg, hasConfirmedWeight)
|
|
}
|
|
|
|
function handleUpdated() {
|
|
emit('updated')
|
|
}
|
|
|
|
function handleSubmitted() {
|
|
emit('update:modelValue', false)
|
|
emit('submitted')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AppDialog
|
|
:model-value="modelValue"
|
|
class="inbound-measurement-workspace-dialog admin-density-dialog admin-density-workspace inbound-density"
|
|
:title="title"
|
|
width="min(1560px, calc(100vw - 48px))"
|
|
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
|
|
table-mode
|
|
:customer-id="customerId"
|
|
:inbound-id="inboundId"
|
|
@changed="handleUpdated"
|
|
@summary-changed="handleWeightSummaryChanged"
|
|
/>
|
|
</section>
|
|
<InboundMeasurementPanel
|
|
ref="measurementPanelRef"
|
|
:customer-id="customerId"
|
|
:customer-name="customerName"
|
|
:inbound-id="inboundId"
|
|
:open-warehouse-suggestion="openWarehouseSuggestion"
|
|
@updated="handleUpdated"
|
|
@saved="handleUpdated"
|
|
@submitted="handleSubmitted"
|
|
/>
|
|
</div>
|
|
<template #footer>
|
|
<div class="measurement-dialog-footer">
|
|
<span v-if="measurementPanelRef?.submissionBlockReason" class="measurement-dialog-footer__hint">
|
|
{{ measurementPanelRef.submissionBlockReason }}
|
|
</span>
|
|
<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 var(--admin-space-6, 16px); border-bottom: 1px solid var(--cc-border); }
|
|
.measurement-dialog-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--admin-space-4, 10px); }
|
|
.measurement-dialog-footer__hint { margin-right: auto; color: var(--el-color-warning-dark-2); font-size: var(--admin-font-caption, 12px); }
|
|
.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__body { flex: 1 1 auto; }
|
|
.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; }
|
|
.inbound-measurement-workspace-dialog .measurement-summary-section { margin: 0 -12px; padding: 10px 12px 13px; border: 1px solid #cce8df; border-left: 4px solid #20a477; border-radius: 8px; background: #f4fbf8; }
|
|
.inbound-measurement-workspace-dialog .measurement-summary-context { min-height: auto; }
|
|
.inbound-measurement-workspace-dialog .measurement-subheading { color: #18795d; font-size: 15px; }
|
|
.inbound-measurement-workspace-dialog .measurement-metrics { padding: 0; border: 1px solid #cce8df; border-radius: 8px; background: #fff; overflow: hidden; }
|
|
.inbound-measurement-workspace-dialog .measurement-metrics > div { min-height: 58px; padding: 9px 14px; border-left: 1px solid #e8ecf2; }
|
|
.inbound-measurement-workspace-dialog .measurement-metrics > div:first-child { border-left: 0; }
|
|
.inbound-measurement-workspace-dialog .measurement-declaration { margin-top: 12px; padding: 10px 12px 0; border: 1px solid #d9e2fa; border-left: 4px solid #647fec; border-radius: 8px; background: #f7f9ff; }
|
|
.inbound-measurement-workspace-dialog .measurement-items-section { margin-top: 12px; padding: 10px 12px 13px; border: 1px solid #eadfc9; border-left: 4px solid #c79643; border-radius: 8px; background: #fffbf4; }
|
|
.inbound-measurement-workspace-dialog .measurement-items-section .measurement-section__heading { margin-bottom: 8px; }
|
|
@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>
|