优化
This commit is contained in:
@@ -0,0 +1,145 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import InboundMeasurementPanel from './InboundMeasurementPanel.vue'
|
||||
import WeightOcrPanel from '../weight/components/WeightOcrPanel.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
customerId: string
|
||||
inboundId: string
|
||||
inboundCode?: string | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
updated: []
|
||||
submitted: []
|
||||
closed: []
|
||||
}>()
|
||||
|
||||
const measurementPanelRef = ref<InstanceType<typeof InboundMeasurementPanel> | null>(null)
|
||||
const title = computed(() => `测量 · ${props.inboundCode?.trim() || props.inboundId}`)
|
||||
|
||||
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) {
|
||||
measurementPanelRef.value?.updateActualGrossWeight(actualGrossWeightKg)
|
||||
}
|
||||
|
||||
function handleUpdated() {
|
||||
emit('updated')
|
||||
}
|
||||
|
||||
function handleSubmitted() {
|
||||
emit('update:modelValue', false)
|
||||
emit('submitted')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="modelValue"
|
||||
class="inbound-measurement-workspace-dialog"
|
||||
:title="title"
|
||||
width="min(1240px, calc(100vw - 32px))"
|
||||
top="4vh"
|
||||
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="surface-panel 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"
|
||||
@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>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.measurement-dialog-workspace { display: grid; min-width: 0; gap: 20px; }
|
||||
.measurement-dialog-weight { min-width: 0; padding: 20px; }
|
||||
.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: 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: 18px 24px; 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>
|
||||
Reference in New Issue
Block a user