warehouse-web/src/views/Outbound.vue

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { Plus, Tickets } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import EvidenceUpload from '../components/EvidenceUpload.vue'
import EntryAudit from '../components/EntryAudit.vue'
import { api } from '../api'
import { blankEntry } from '../utils/entry'
import { useUploads } from '../utils/uploads'
import type { Attachment, Entry } from '../api/indexType'
import type { WmsOutboundRecordResponse, WmsOutboundSaveRequest, WmsSkuResponse, WmsReversalPreCheckResponse } from '../api/indexType'
import { dateTime, fieldErrors, report, reversalLimit, refreshAfterWrite } from '../utils/ui'

type OutboundEntry = Entry & { recordId?: number; alreadyReversedQty: number }
type OutboundDetail = WmsOutboundRecordResponse
const outboundRows = ref<OutboundEntry[]>([])
const total = ref(0)
const pageSize = 10
const skuOptions = ref<WmsSkuResponse[]>([])
const pendingUploads = useUploads()
let skuSearchVersion = 0
const preCheck = ref<WmsReversalPreCheckResponse>()
const logisticsTypes: Record<string, number> = { express: 1, instant: 2, other: 3 }
const orderTypes: Record<string, number> = { internal: 1, external: 2 }
function toEntry(item: OutboundDetail): OutboundEntry {
  const files = (item.attachments || []).map((file, index) => ({ id: String(file.id ?? index), url: file.fileUrl || '', name: file.fileName || '凭证', fileType: file.fileType }))
  return {
    ...blankEntry('outbound'), recordId: item.id, id: item.flowNo || String(item.id ?? ''),
    alreadyReversedQty: item.alreadyReversedQty ?? 0, status: item.status === 1 ? 'completed' : 'draft',
    skuId: item.skuId || '', quantity: item.qty ?? null, orderType: item.orderType === 1 ? 'internal' : item.orderType === 2 ? 'external' : '',
    so: item.soNo || '', logistics: Object.keys(logisticsTypes).find(key => logisticsTypes[key] === item.logisticsType) || '',
    company: item.expressCompany || '', tracking: item.expressNo || '', remark: item.remark || '',
    createdAt: item.createTime || '', operator: item.updateUser || item.createUser || '',
    orderEvidence: files.filter(file => file.fileType === 3),
    screenshots: files.filter(file => file.fileType === 2),
    snapshot: { id: item.skuId || '', name: item.skuNameSnapshot || '', spec: item.specSnapshot || '',
      config: item.configDetailSnapshot || '', categoryId: '', sportId: '', brandId: '', remark: '', enabled: true,
      createdAt: '', operator: '', category: '', sport: '', brand: '' },
  }
}
function recordId(entry: OutboundEntry) {
  if (entry.recordId == null) throw new Error('接口未返回出库记录 ID')
  return entry.recordId
}
async function loadSkus(keyword = '') {
  const version = ++skuSearchVersion
  const response = await api.wmsApi.sku.search({ keyword: keyword.trim() || undefined })
  if (version !== skuSearchVersion) return
  const records = Array.isArray(response) ? response : response.records ?? response.list
  if (!Array.isArray(records)) throw new Error('SKU 搜索结果格式不符合预期')
  const selected = skuOptions.value.find(item => item.skuId === form.value.skuId)
  skuOptions.value = records.filter(item => item.status === 1)
  if (selected && !skuOptions.value.some(item => item.skuId === selected.skuId)) skuOptions.value.unshift(selected)
}
function searchSkus(keyword: string) { loadSkus(keyword).catch(report) }
const loading = ref(false)
async function loadData() {
  loading.value = true
  try {
    const filter = applied.value
    let dates = filter.period === 'custom' ? filter.dates : []
    if (filter.period === 'today' || filter.period === 'week') {
      const now = new Date()
      const end = dateTime(now.toISOString()).slice(0, 10)
      if (filter.period === 'week') now.setDate(now.getDate() - 6)
      dates = [dateTime(now.toISOString()).slice(0, 10), end]
    }
    const result = await api.wmsApi.outbound.page({
      pageNo: page.value, 
      pageSize,
      keyword: filter.keyword.trim() || undefined,
      status: filter.status ? (filter.status === 'completed' ? 1 : 0) : undefined,
      orderType: orderTypes[filter.orderType],
      startTime: dates[0] ? `${dates[0]} 00:00:00` : undefined,
      endTime: dates[1] ? `${dates[1]} 23:59:59` : undefined,
    })
    outboundRows.value = (result.rows as WmsOutboundRecordResponse[]).map(toEntry)
    total.value = result.total
  }
  finally { loading.value = false }
}
const route = useRoute()
const filters = reactive({ period: '', keyword: '', status: '', orderType: '', dates: [] as string[] })
const applied = ref({ ...filters })
const page = ref(1)
const dialog = ref(false)
const form = ref<OutboundEntry>({ ...blankEntry('outbound'), alreadyReversedQty: 0 })
const errors = ref<Record<string, string>>({})
const busy = ref(false)
const formRef = ref<FormInstance>()
const rules = computed<FormRules<OutboundEntry>>(() => {
  const external = form.value.orderType === 'external'
  const express = external && form.value.logistics === 'express'
  return {
    skuId: [{ required: true, whitespace: true, message: '请选择 SKU', trigger: 'change' }],
    quantity: [{ required: true, type: 'integer', min: 1, message: '请填写大于 0 的整数出库数量', trigger: 'change' }],
    orderType: [{ required: true, message: '请选择订单类型', trigger: 'change' }],
    so: form.value.orderType === 'internal' ? [{ required: true, whitespace: true, message: '请填写 SO 编号', trigger: 'blur' }] : [],
    orderEvidence: external ? [{ required: true, type: 'array', min: 1, message: '请上传外部订单凭证', trigger: 'change' }] : [],
    logistics: external ? [{ required: true, message: '请选择物流方式', trigger: 'change' }] : [],
    company: express ? [{ required: true, whitespace: true, message: '请填写快递公司', trigger: 'blur' }] : [],
    tracking: express ? [{ required: true, whitespace: true, message: '请填写快递单号', trigger: 'blur' }] : [],
    screenshots: external && ['instant', 'other'].includes(form.value.logistics) ? [{ required: true, type: 'array', min: 1, message: '请上传物流截图', trigger: 'change' }] : [],
  }
})
function validateAttachment(field: 'orderEvidence' | 'screenshots') {
  void formRef.value?.validateField(field).catch(() => false)
}
const detail = ref<OutboundEntry>()
const selectedSku = computed(() => skuOptions.value.find(item => item.skuId === form.value.skuId))
const reverseDialog = ref(false)
const original = ref<OutboundEntry>()
const reverseQty = ref<number | null>(null)
const reverseEvidence = ref<Attachment[]>([])
const reverseRemark = ref('')
const reverseFormRef = ref<FormInstance>()
const reverseForm = computed(() => ({ quantity: reverseQty.value, evidence: reverseEvidence.value }))
const reverseMax = computed(() => reversalLimit(preCheck.value, 2))
const reverseRules = computed<FormRules>(() => ({
  quantity: [{ required: true, type: 'integer', min: 1, max: reverseMax.value, message: `冲销数量须为 1 至 ${reverseMax.value} 的整数`, trigger: 'change' }],
  evidence: [{ required: true, type: 'array', min: 1, message: '请上传照片 / 凭证', trigger: 'change' }],
}))
function validateReverseEvidence() {
  void reverseFormRef.value?.validateField('evidence').catch(() => false)
}
const orderName = (value: string) => ({ internal: '内部订单', external: '外部订单' }[value] || '待填写')
const logisticsName = (value: string) => ({ express: '快递', instant: '闪送', other: '其他' }[value] || '待填写')
const entrySku = (entry: Entry) => entry.snapshot
const attachments = (entry: Entry) => [...entry.orderEvidence, ...entry.evidence, ...entry.screenshots]
const canReverse = (entry: OutboundEntry) => entry.status === 'completed' && entry.alreadyReversedQty < Number(entry.quantity)
const reversalStatus = (entry: OutboundEntry) => entry.alreadyReversedQty === 0 ? '未冲销' : entry.alreadyReversedQty >= Number(entry.quantity) ? '已全部冲销' : '部分冲销'
const logisticsText = (entry: Entry) => entry.orderType === 'internal' ? '—' : entry.logistics === 'express' ? [entry.company, entry.tracking].filter(Boolean).join(' · ') || '待填写' : entry.screenshots.length ? `${logisticsName(entry.logistics)} · 物流截图` : '待填写'
onMounted(async () => { try { await loadData(); if (route.query.new) open() } catch (error) { report(error) } })
function filterRows() { applied.value = { ...filters, dates: [...(filters.dates || [])] }; page.value = 1; loadData().catch(report) }
async function fetchDetail(entry: OutboundEntry) {
  const result = toEntry(await api.wmsApi.outbound.detail({ id: recordId(entry) }) as OutboundDetail)
  recordId(result)
  return result
}
async function showDetail(entry: OutboundEntry) {
  try { detail.value = await fetchDetail(entry) } catch (error) { report(error) }
}
async function open(entry?: OutboundEntry) {
  try {
    form.value = entry ? await fetchDetail(entry) : { ...blankEntry('outbound'), alreadyReversedQty: 0 }
    skuOptions.value = form.value.skuId ? [{ skuId: form.value.skuId, productName: form.value.snapshot?.name, spec: form.value.snapshot?.spec, status: 1 }] : []
    await loadSkus()
    errors.value = {}; dialog.value = true
  } catch (error) { report(error) }
}
function clearBranches() { form.value.so = ''; form.value.orderEvidence = []; form.value.evidence = []; form.value.screenshots = []; form.value.company = ''; form.value.tracking = ''; form.value.logistics = 'express'; errors.value = {}; formRef.value?.clearValidate(['so', 'orderEvidence', 'logistics', 'company', 'tracking', 'screenshots']) }
function changeLogistics() { form.value.company = ''; form.value.tracking = ''; form.value.screenshots = []; form.value.evidence = []; errors.value = {}; formRef.value?.clearValidate(['company', 'tracking', 'screenshots']) }
async function save(submit: boolean) {
  if (busy.value || pendingUploads.value) return
  busy.value = true; errors.value = {}
  try {
    const external = form.value.orderType === 'external'
    formRef.value?.clearValidate()
    const valid = await (submit ? formRef.value?.validate() : formRef.value?.validateField('skuId'))?.catch(() => false)
    if (!valid) return
    const screenshots = external && form.value.logistics !== 'express' ? form.value.screenshots : []
    const orderEvidence = external ? form.value.orderEvidence : []
    const files = [...orderEvidence, ...screenshots]
    const payload: WmsOutboundSaveRequest = {
      skuId: form.value.skuId || undefined, qty: form.value.quantity ?? undefined,
      orderType: orderTypes[form.value.orderType], soNo: form.value.orderType === 'internal' ? form.value.so : undefined,
      logisticsType: external ? logisticsTypes[form.value.logistics] : undefined,
      expressCompany: external && form.value.logistics === 'express' ? form.value.company : undefined,
      expressNo: external && form.value.logistics === 'express' ? form.value.tracking : undefined,
      remark: form.value.remark, fileUrls: files.map(file => file.url), fileNames: files.map(file => file.name),
      fileTypes: [...orderEvidence.map(() => 3), ...screenshots.map(() => 2)],
    }
    if (submit) await api.wmsApi.outbound.submit({ ...payload, draftId: form.value.recordId })
    else if (form.value.recordId != null) await api.wmsApi.outbound.updateDraft({ ...payload, id: recordId(form.value) })
    else await api.wmsApi.outbound.saveDraft(payload)
    dialog.value = false
    ElMessage.success(submit ? '出库提交成功' : '草稿已保存')
    await refreshAfterWrite(loadData)
  } catch (error) { await fieldErrors(error, errors) }
  finally { busy.value = false }
}
async function remove(entry: OutboundEntry) {
  try {
    await ElMessageBox.confirm(`确认删除草稿 ${entry.id}？`, '删除草稿', { type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' })
    await api.wmsApi.outbound.deleteDraft({ id: recordId(entry) }); ElMessage.success('草稿已删除'); await refreshAfterWrite(loadData)
  } catch (error) { if (error !== 'cancel' && error !== 'close') report(error) }
}
async function openReverse(entry: OutboundEntry) {
  try {
    preCheck.value = await api.wmsApi.reversal.preCheck({ originFlowNo: entry.id, originFlowType: 2 }) as WmsReversalPreCheckResponse
    if (!reverseMax.value) throw new Error('当前无可冲销数量，或预检数据不完整，请刷新后重试')
    original.value = entry; reverseQty.value = reverseMax.value
    reverseEvidence.value = []; reverseRemark.value = ''; errors.value = {}; detail.value = undefined; reverseDialog.value = true
  } catch (error) { report(error) }
}
async function submitReverse() {
  if (busy.value || pendingUploads.value || !original.value) return
  busy.value = true; errors.value = {}
  try {
    const valid = await reverseFormRef.value?.validate().catch(() => false)
    if (!valid) return
    await api.wmsApi.reversal.submit({ originFlowNo: original.value.id, originFlowType: 2, qty: reverseQty.value ?? undefined,
      fileUrls: reverseEvidence.value.map(file => file.url), fileNames: reverseEvidence.value.map(file => file.name), reversalReason: reverseRemark.value })
    reverseDialog.value = false; ElMessage.success('冲销成功'); await refreshAfterWrite(loadData)
  } catch (error) { await fieldErrors(error, errors) } finally { busy.value = false }
}
</script>

<template>
  <div v-loading="loading" class="outbound-page">
    <div class="page-heading outbound-heading"><div><h1>出库管理</h1><p>内部订单填写 SO；外部订单上传订单凭证并填写物流。ERP 第一版只记录出库数量。</p></div><el-button type="primary" :icon="Plus" @click="open()">新建出库</el-button></div>
    <el-config-provider :empty-values="[null, undefined]">
    <form class="outbound-filters" @submit.prevent="filterRows">
      <el-select v-model="filters.period" aria-label="创建时间筛选"><el-option label="创建时间：全部" value="" /><el-option label="创建时间：今天" value="today" /><el-option label="创建时间：近 7 天" value="week" /><el-option label="自定义时间" value="custom" /></el-select>
      <el-input v-model="filters.keyword" placeholder="skuID / 商品 / SO 编号" aria-label="skuID / 商品名称 / SO 编号" clearable />
      <el-select v-model="filters.status" aria-label="单据状态筛选"><el-option label="单据状态：全部" value="" /><el-option label="已完成" value="completed" /><el-option label="草稿" value="draft" /></el-select>
      <el-select v-model="filters.orderType" aria-label="订单类型筛选"><el-option label="订单类型：全部" value="" /><el-option label="内部订单" value="internal" /><el-option label="外部订单" value="external" /></el-select>
      <el-button native-type="submit">筛选</el-button>
      <el-date-picker v-if="filters.period === 'custom'" v-model="filters.dates" class="outbound-date-range" type="daterange" value-format="YYYY-MM-DD" start-placeholder="创建开始日期" end-placeholder="结束日期" />
    </form>
    </el-config-provider>
    <el-table :data="outboundRows" class="outbound-table" row-key="id" empty-text="暂无出库单据">
      <el-table-column label="出库流水编号" width="124"><template #default="{ row }"><b class="outbound-code">{{ row.id }}</b></template></el-table-column>
      <el-table-column label="单据状态" width="104"><template #default="{ row }"><span class="outbound-status" :class="{ draft: row.status === 'draft' }">{{ row.status === 'completed' ? '已完成' : '草稿' }}</span></template></el-table-column>
      <el-table-column label="创建时间" width="182"><template #default="{ row }">{{ dateTime(row.createdAt) }}</template></el-table-column>
      <el-table-column label="skuID / 商品" min-width="300"><template #default="{ row }"><strong class="outbound-product">{{ row.skuId || '待选择 SKU' }}<template v-if="entrySku(row)"> · {{ entrySku(row)?.name }}</template></strong></template></el-table-column>
      <el-table-column label="规格" width="100"><template #default="{ row }">{{ entrySku(row)?.spec || '—' }}</template></el-table-column>
      <el-table-column label="出库数量" width="94"><template #default="{ row }"><b v-if="row.quantity !== null">{{ row.quantity }}</b><span v-else>待填写</span></template></el-table-column>
      <el-table-column label="订单类型" width="100"><template #default="{ row }">{{ orderName(row.orderType) }}</template></el-table-column>
      <el-table-column label="SO 编号" width="164"><template #default="{ row }">{{ row.so || (row.orderType === 'external' ? '—' : '待填写') }}</template></el-table-column>
      <el-table-column label="物流信息" min-width="210"><template #default="{ row }">{{ logisticsText(row) }}</template></el-table-column>
      <el-table-column prop="operator" label="操作人" width="100"><template #default="{ row }">{{ row.operator || '—' }}</template></el-table-column>
      <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip><template #default="{ row }">{{ row.remark || '—' }}</template></el-table-column>
      <el-table-column label="操作" width="190" fixed="right">
		  <template #default="{ row }">
			<template v-if="row.status === 'draft'">
				<el-button link type="primary" @click="open(row)">编辑</el-button>
				<el-button link type="danger" @click="remove(row)">删除</el-button>
			</template>
			<template v-else>
				<el-button link type="primary" @click="showDetail(row)">查看详情</el-button>
				<!-- <el-button v-if="canReverse(row)" link type="warning" @click="openReverse(row)">冲销 / 更正</el-button> -->
			</template>
		</template>
	  </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="page" :total="total" :page-size="pageSize" layout="total, prev, pager, next" @current-change="loadData().catch(report)" />

    <el-dialog v-model="dialog" class="outbound-dialog" modal-class="outbound-overlay" width="728px" align-center :close-on-click-modal="false" :close-on-press-escape="!busy" :show-close="!busy" @closed="formRef?.clearValidate()">
      <template #header="{ titleId, titleClass }"><h2 :id="titleId" :class="titleClass">{{ form.id ? '编辑出库草稿' : '新建出库' }}</h2><p class="outbound-subtitle">提交后立即扣减上海闵行仓库存</p></template>
      <el-alert v-if="errors.form" :title="errors.form" type="error" :closable="false" />
      <el-form ref="formRef" :model="form" :rules="rules" :validate-on-rule-change="false" label-position="top" :disabled="busy || pendingUploads > 0">
        <h3 class="outbound-section">基础信息</h3>
        <div class="outbound-grid">
          <el-form-item label="仓库"><el-input model-value="上海闵行仓" disabled /></el-form-item>
          <el-form-item label="创建时间"><el-input :model-value="form.createdAt ? dateTime(form.createdAt) : '提交时由系统自动生成（精确到秒）'" disabled /></el-form-item>
          <el-form-item label="选择 SKU" prop="skuId" required class="outbound-full" :error="errors.skuId">
            <el-select v-model="form.skuId" filterable remote :remote-method="searchSkus" clearable placeholder="从系统 SKU 中搜索选择" no-data-text="暂无启用 SKU" no-match-text="未找到匹配的 SKU"><el-option v-for="sku in skuOptions.filter(item => item.status === 1)" :key="sku.skuId" :value="sku.skuId || ''" :label="`${sku.skuId} · ${sku.productName} · ${sku.spec}`" /></el-select>
            <div class="outbound-field-hint">按系统生成的 skuID、商品名称或规格关键词搜索</div>
          </el-form-item>
          <el-form-item label="出库数量" prop="quantity" required :error="errors.quantity"><el-input-number v-model="form.quantity" :controls="false" :min="1" :precision="0" placeholder="填写大于 0 的整数" /></el-form-item>
          <el-form-item label="商品规格"><el-input :model-value="selectedSku?.spec || ''" placeholder="选择 SKU 后自动带出" disabled /></el-form-item>
        </div>
        <h3 class="outbound-section">订单信息</h3>
        <el-form-item label="订单类型" prop="orderType" required :error="errors.orderType"><el-select v-model="form.orderType" placeholder="请选择订单类型" @change="clearBranches"><el-option label="内部订单" value="internal" /><el-option label="外部订单" value="external" /></el-select></el-form-item>
        <el-form-item v-if="form.orderType === 'internal'" label="SO 编号" prop="so" required :error="errors.so"><el-input v-model="form.so" placeholder="填写内部订单 SO 编号" /></el-form-item>
        <template v-if="form.orderType === 'external'">
          <el-form-item label="外部订单凭证" prop="orderEvidence" required :error="errors.orderEvidence"><EvidenceUpload :key="form.logistics" :active="dialog" :disabled="busy" v-model="form.orderEvidence" @update:model-value="validateAttachment('orderEvidence')" /></el-form-item>
          <h3 class="outbound-section">物流信息</h3>
          <el-form-item label="物流方式" prop="logistics" required :error="errors.logistics"><el-select v-model="form.logistics" @change="changeLogistics"><el-option v-for="value in ['express', 'instant', 'other']" :key="value" :value="value" :label="logisticsName(value)" /></el-select></el-form-item>
          <div v-if="form.logistics === 'express'" class="outbound-grid"><el-form-item label="快递公司" prop="company" required :error="errors.company"><el-input v-model="form.company" placeholder="例如：顺丰速运" /></el-form-item><el-form-item label="快递单号" prop="tracking" required :error="errors.tracking"><el-input v-model="form.tracking" placeholder="填写快递单号" /></el-form-item></div>
          <el-form-item v-else label="物流截图" prop="screenshots" required :error="errors.screenshots"><EvidenceUpload :key="form.logistics" :active="dialog" :disabled="busy" v-model="form.screenshots" @update:model-value="validateAttachment('screenshots')" /></el-form-item>
        </template>
        <el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="2" /></el-form-item>
      </el-form>
      <template #footer><el-button :disabled="busy" @click="dialog = false">取消</el-button><el-button type="warning" plain :disabled="busy || pendingUploads > 0" @click="save(false)">保存草稿</el-button><el-button type="primary" :loading="busy" :disabled="pendingUploads > 0" @click="save(true)">提交出库</el-button></template>
    </el-dialog>

    <el-dialog :model-value="!!detail" class="outbound-dialog" modal-class="outbound-overlay" width="760px" align-center @close="detail = undefined">
      <template #header="{ titleId, titleClass }"><h2 :id="titleId" :class="titleClass">流水详情 · {{ detail?.id }}</h2><p v-if="detail" class="outbound-subtitle">已完成 · 原流水状态：{{ reversalStatus(detail) }} · 创建时间：{{ dateTime(detail.createdAt) }}</p></template>
      <template v-if="detail">
        <EntryAudit :entry="detail" :reversed-qty="detail.alreadyReversedQty" />
        <div class="outbound-grid outbound-detail-fields">
          <div><label>skuID / 商品</label><div class="outbound-readonly">{{ detail.skuId }} · {{ entrySku(detail)?.name }}</div></div>
          <div><label>库存变动</label><div class="outbound-readonly">{{ detail.direction === 'outbound' ? '出库 −' : '入库 +' }}{{ detail.quantity }}</div></div>
          <div><label>{{ detail.direction === 'outbound' ? '出库数量' : '入库数量' }}</label><div class="outbound-readonly">{{ detail.quantity }} {{ entrySku(detail)?.spec }}</div></div>
          <div v-if="detail.source === 'normal'"><label>订单类型</label><div class="outbound-readonly">{{ orderName(detail.orderType) }}</div></div>
        </div>
        <template v-if="detail.orderType === 'internal' && detail.source === 'normal'"><div class="outbound-evidence-label">内部订单追溯信息</div><div class="outbound-evidence"><el-icon><Tickets /></el-icon><span>内部订单：{{ detail.so }}；内部订单不展示物流、照片/凭证</span></div></template>
        <template v-else>
          <div class="outbound-evidence-label">{{ detail.source === 'normal' ? '订单凭证 / 物流截图' : '冲销凭证' }}</div>
          <div class="outbound-evidence">
            <span v-if="!attachments(detail).length">暂无凭证</span>
            <div v-for="(file, index) in attachments(detail)" :key="file.id" class="outbound-evidence-item"><el-image :src="file.url" :preview-src-list="attachments(detail).map(item => item.url)" :initial-index="index" preview-teleported fit="cover" /></div>
            <span v-if="detail.source === 'normal'">物流信息：{{ logisticsText(detail) }}</span>
          </div>
        </template>
        <div v-if="detail.remark" class="outbound-related">备注 / 冲销原因：{{ detail.remark }}</div>
      </template>
      <template #footer><el-button @click="detail = undefined">关闭</el-button><el-button v-if="detail && canReverse(detail)" type="warning" plain @click="openReverse(detail)">冲销 / 更正</el-button></template>
    </el-dialog>

    <el-dialog v-model="reverseDialog" class="outbound-dialog outbound-reverse-dialog" modal-class="outbound-overlay" width="620px" align-center :close-on-click-modal="false" :close-on-press-escape="!busy" :show-close="!busy" @closed="reverseFormRef?.clearValidate()">
      <template #header="{ titleId, titleClass }"><h2 :id="titleId" :class="titleClass">冲销 / 更正</h2><p class="outbound-subtitle">将生成与原流水方向相反的新流水，原记录不会被删除。</p></template>
      <template v-if="original">
        <!-- <EntryAudit :entry="original" reversal :reversed-qty="preCheck?.alreadyReversedQty ?? original.alreadyReversedQty" /> -->
        <el-alert class="outbound-reverse-notice" type="warning" :closable="false" show-icon :title="`原流水：${original.id} · 剩余可冲销数量 ${preCheck?.remainReversalQty ?? '—'}。冲销完成后，请另行录入正确的出入库单。`" />
        <el-alert v-if="errors.form" :title="errors.form" type="error" :closable="false" />
        <el-form ref="reverseFormRef" :model="reverseForm" :rules="reverseRules" label-position="top" :disabled="busy || pendingUploads > 0" class="outbound-reverse-form">
          <div class="outbound-reverse-grid">
            <el-form-item label="冲销方向"><el-input model-value="入库（反向生成）" disabled /></el-form-item>
            <el-form-item label="冲销数量" prop="quantity" required :error="errors.quantity"><el-input-number v-model="reverseQty" :controls="false" :min="1" :max="reverseMax" :precision="0" /></el-form-item>
          </div>
          <el-form-item label="照片 / 凭证" prop="evidence" required :error="errors.evidence"><EvidenceUpload :active="reverseDialog" :disabled="busy" v-model="reverseEvidence" @update:model-value="validateReverseEvidence" /></el-form-item>
          <el-form-item label="冲销原因"><el-input v-model="reverseRemark" type="textarea" :rows="3" placeholder="选填：说明冲销原因" /></el-form-item>
        </el-form>
      </template>
      <template #footer><el-button :disabled="busy" @click="reverseDialog = false">取消</el-button><el-button type="primary" :loading="busy" :disabled="pendingUploads > 0" @click="submitReverse">提交冲销</el-button></template>
    </el-dialog>
  </div>
</template>

<style scoped>
.outbound-heading { margin-bottom: 22px; }
.outbound-heading h1 { font-size: 24px; letter-spacing: 0; }
.outbound-heading p { margin-top: 8px; color: #7c8c92; font-size: 13px; }
.outbound-heading > .el-button { height: 37px; border-radius: 8px; }
.outbound-filters { display: grid; grid-template-columns: 1fr 1.7fr 1fr 1fr auto; align-items: center; gap: 10px; padding: 13px; margin-bottom: 14px; border: 1px solid #e5ebe7; background: #fff; border-radius: 8px; }
.outbound-filters > * { min-width: 0; }
.outbound-date-range { grid-column: 1 / -1; max-width: 100%; }
.outbound-status { display: inline-flex; align-items: center; gap: 4px; background: #e4f5ee; color: #218570; border-radius: 20px; padding: 3px 8px; font-size: 10px; font-weight: 600; line-height: 14px; white-space: nowrap; }
.outbound-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.outbound-status.draft { background: #fff1d4; color: #ac771c; }
.outbound-table { --el-table-header-bg-color: #f6f8f6; --el-table-border-color: #edf1ed; --el-table-header-text-color: #819095; --el-table-text-color: #5c6e74; border: 1px solid #e8ede8; border-radius: 8px; box-shadow: 0 15px 30px #233b2d08; }
.outbound-table :deep(th.el-table__cell) { height: 40px; font-size: 11px; }
.outbound-table :deep(td.el-table__cell) { height: 53px; font-size: 12px; }
.outbound-table :deep(.cell) { padding: 0 13px; }
.outbound-table :deep(.el-button) { font-size: 12px; }
.outbound-code { color: #486671; font-size: 11px; }
.outbound-product { color: #26383e; overflow-wrap: anywhere; }
.outbound-subtitle { margin: 5px 0 0; font-size: 12px; color: #84969c; line-height: 1.6; }
.outbound-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
.outbound-full { grid-column: 1 / -1; }
.outbound-section { margin: 4px 0 12px; font-size: 12px; color: #7c9296; font-weight: 600; }
.outbound-field-hint { margin-top: 6px; color: #84969c; font-size: 12px; line-height: 1.6; }
.outbound-stock { font-size: 12px; color: #6b8584; }
.outbound-detail-fields { gap: 16px 14px; }
.outbound-detail-fields label, .outbound-evidence-label { display: block; font-size: 12px; font-weight: 600; color: #556d74; margin-bottom: 6px; }
.outbound-readonly { min-height: 38px; padding: 8px 10px; border: 1px solid #dce5e1; border-radius: 7px; background: #f2f6f4; color: #80969d; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.outbound-evidence-label { margin-top: 16px; }
.outbound-evidence { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; padding: 15px; min-height: 76px; border: 1px dashed #bdddd3; border-radius: 7px; background: #f1faf6; color: #458e7c; font-size: 12px; overflow-wrap: anywhere; }
.outbound-evidence-item { display: flex; align-items: center; gap: 8px; max-width: 100%; }
.outbound-evidence-item .el-image { width: 46px; height: 42px; border-radius: 4px; flex-shrink: 0; cursor: zoom-in; }
.outbound-related, .outbound-reverse-form { margin-top: 16px; overflow-wrap: anywhere; }
.outbound-reverse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1000px) { .outbound-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .outbound-heading { flex-direction: column; align-items: flex-start; gap: 14px; } .outbound-grid { grid-template-columns: minmax(0, 1fr); } .outbound-heading h1 { font-size: 22px; } }
</style>

<style>
.outbound-overlay { backdrop-filter: blur(3px); background: #1c2f3566; }
.el-dialog.outbound-dialog { padding: 0; max-width: calc(100vw - 32px); border-radius: 16px; overflow: hidden; background: #fffefb; box-shadow: 0 28px 70px #12252233; }
.outbound-dialog .el-dialog__header { padding: 20px 22px 14px; margin: 0; border-bottom: 1px solid #dfe7e3; }
.outbound-dialog .el-dialog__title { margin: 0; padding-right: 32px; font-size: 18px; font-weight: 700; color: #1c3039; line-height: 26px; }
.outbound-dialog .el-dialog__headerbtn { top: 24px; right: 22px; width: 28px; height: 28px; border-radius: 7px; background: #eef3f1; }
.outbound-dialog .el-dialog__body { padding: 24px 22px 20px; max-height: calc(100dvh - 220px); overflow-y: auto; }
.outbound-dialog .el-form-item { margin-bottom: 14px; }
.outbound-dialog .el-form-item__label { font-size: 12px; font-weight: 600; color: #566d73; margin-bottom: 5px; line-height: 18px; }
.outbound-dialog .el-input__wrapper, .outbound-dialog .el-select__wrapper { min-height: 36px; border-radius: 7px; box-shadow: 0 0 0 1px #dce5e1 inset; }
.outbound-dialog .el-input.is-disabled .el-input__wrapper { background: #f2f6f4; }
.outbound-dialog .el-input.is-disabled .el-input__inner { -webkit-text-fill-color: #82959c; }
.outbound-dialog .el-input-number { width: 100%; }
.outbound-dialog .el-input-number .el-input__inner { text-align: left; }
.outbound-dialog .el-dialog__footer { border-top: 1px solid #dfe7e3; padding: 14px 22px; }
.outbound-dialog .el-dialog__footer .el-button { height: 36px; border-radius: 8px; }
.outbound-dialog .el-alert { margin-bottom: 14px; }
.outbound-reverse-dialog .el-dialog__body { padding-top: 20px; }
.outbound-reverse-dialog .outbound-reverse-notice { border: 1px solid #ffe0a5; background: #fffaec; }
.outbound-reverse-dialog .outbound-reverse-notice .el-alert__title { font-size: 12px; line-height: 1.6; }
.outbound-reverse-dialog .outbound-reverse-form { margin-top: 18px; }
.outbound-dialog .evidence { width: 100%; }
.outbound-dialog .upload-button { display: flex; justify-content: center; align-items: center; gap: 7px; width: 100%; min-height: 66px; box-sizing: border-box; border: 1px dashed #bdddd3; border-radius: 7px; background: #f1faf6; color: #458e7c; font-size: 12px; }
@media (max-width: 600px) { .outbound-reverse-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } }
</style>