admin-web/src/modules/inbounds/measurement/InboundMeasurementDialog.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
  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
          :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">
        <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; }
@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>