admin-web/src/modules/warehouses/pages/WarehousesView.vue

<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { MapPin, Pencil, Plus, Power, Warehouse as WarehouseIcon } from '@lucide/vue'
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
import { useUnsavedWorkRegistration } from '@/core/unsaved-work/useUnsavedWorkRegistration'
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
import {
  changePlatformWarehouseStatus,
  createPlatformWarehouse,
  getPlatformWarehouse,
  listPlatformWarehouses,
  updatePlatformWarehouse,
  type PlatformWarehouseDetailResource,
  type PlatformWarehouseResource,
  type SavePlatformWarehouseRequest,
} from '@/modules/warehouses/api/platformWarehouses'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import { PlatformTenantSelector } from '@/modules/iam'
import type { Warehouse } from '@/modules/warehouses/types'

const access = useAccessPreviewStore()
const editorOpen = ref(false)
const saving = ref(false)
const loading = ref(false)
const editLoading = ref(false)
const page = ref(1)
const pageSize = ref(10)
const selectedTenantId = ref('')
const loadedTenantId = ref<string | null>(null)
const loadError = ref<ApiErrorDetails | null>(null)
const detailWarningCount = ref(0)
const statusLoadingIds = ref(new Set<string>())
type WarehouseFilters = QueryModel & { keyword: string; status: Warehouse['status'] | '' }
const filters = ref<WarehouseFilters>({ keyword: '', status: '' })
const appliedFilters = ref<WarehouseFilters>({ ...filters.value })
const queryFields: QueryField[] = [
  { key: 'keyword', type: 'input', placeholder: '仓库名称、编码、城市或地址' },
  {
    key: 'status', type: 'select', placeholder: '全部状态', options: [
      { label: '启用', value: 'ACTIVE' },
      { label: '停用', value: 'INACTIVE' },
    ],
  },
]
let loadSequence = 0

interface WarehouseRow extends Warehouse {
  detail: PlatformWarehouseDetailResource | null
}

const rows = ref<WarehouseRow[]>([])
const warehouseColumns: DataTableColumn[] = [
  { key: 'actions', label: '操作', width: 180, fixed: 'left', slotName: 'actions' },
  { key: 'warehouse', label: '仓库', minWidth: 200, slotName: 'warehouse' },
  { key: 'city', label: '所在城市', minWidth: 130, slotName: 'city' },
  { key: 'address', label: '收货地址', minWidth: 260, slotName: 'address' },
  { key: 'contact', label: '联系人', minWidth: 150, slotName: 'contact' },
  { prop: 'businessHours', label: '收货时间', minWidth: 190, formatter: (row: WarehouseRow) => row.businessHours || '-' },
  { key: 'status', label: '状态', width: 100, slotName: 'status' },
]

const emptyForm = (): Omit<Warehouse, 'updatedAt'> => ({
  id: '', code: '', name: '', province: '', city: '', address: '', contactName: '', contactPhone: '',
  businessHours: '周一至周六 08:30-18:00', status: 'ACTIVE', remark: '',
})
const form = reactive(emptyForm())
type WarehouseRequiredField = 'code' | 'name' | 'city' | 'address'
const requiredFieldMessages: Record<WarehouseRequiredField, string> = {
  code: '请输入仓库编码',
  name: '请输入仓库名称',
  city: '请输入城市',
  address: '请输入详细地址',
}
const formErrors = reactive<Record<WarehouseRequiredField, string>>({ code: '', name: '', city: '', address: '' })
const editorLabel = computed(() => form.id ? '编辑收货仓' : '新增收货仓')
const editorPermission = computed(() => form.id ? 'platform:warehouse:edit' : 'platform:warehouse:create')
const { captureBaseline } = useUnsavedWorkRegistration({
  key: 'warehouse-editor',
  label: editorLabel,
  isOpen: editorOpen,
  model: form,
  requiredPermission: editorPermission,
})

const warehouseReady = computed(() => Boolean(selectedTenantId.value)
  && loadedTenantId.value === selectedTenantId.value
  && !loading.value)
const tenantSwitchDisabled = computed(() => editorOpen.value
  || editLoading.value
  || saving.value
  || statusLoadingIds.value.size > 0)
const filteredRows = computed(() => rows.value.filter((warehouse) => {
  const keyword = appliedFilters.value.keyword.trim().toLowerCase()
  const matchesKeyword = !keyword || [warehouse.code, warehouse.name, warehouse.province, warehouse.city, warehouse.address]
    .some((value) => value.toLowerCase().includes(keyword))
  return matchesKeyword && (!appliedFilters.value.status || warehouse.status === appliedFilters.value.status)
}))
const pagedRows = computed(() => filteredRows.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value))
const loadErrorDescription = computed(() => {
  if (!loadError.value) return ''
  const references = [
    loadError.value.code ? `错误码 ${loadError.value.code}` : '',
    loadError.value.requestId ? `requestId ${loadError.value.requestId}` : '',
    loadError.value.traceId ? `traceId ${loadError.value.traceId}` : '',
  ].filter(Boolean)
  const retained = loadedTenantId.value ? `当前仍显示租户 ${loadedTenantId.value} 最近一次成功加载的数据。` : ''
  return [loadError.value.message, references.join(' · '), retained].filter(Boolean).join(' ')
})

watch(
  () => access.can(editorPermission.value),
  (canWrite) => {
    if (canWrite || !editorOpen.value) return
    editorOpen.value = false
    Object.assign(form, emptyForm())
  },
  { flush: 'sync' },
)

function toRow(warehouse: PlatformWarehouseResource, detail: PlatformWarehouseDetailResource | null): WarehouseRow {
  const address = detail?.addresses[0]
  const receiving = detail?.capabilities.find((item) => item.capabilityCode === 'RECEIVING')
  return {
    id: String(warehouse.id),
    code: warehouse.warehouseCode,
    name: warehouse.warehouseName,
    province: address?.stateProvince || '',
    city: address?.city || '',
    address: [address?.district, address?.addressLine1, address?.addressLine2].filter(Boolean).join(' '),
    contactName: warehouse.contactName || '',
    contactPhone: warehouse.contactPhone || '',
    businessHours: receiving?.description || (receiving?.cutoffTime ? `每日截单 ${receiving.cutoffTime}` : ''),
    status: warehouse.status,
    remark: warehouse.remark || '',
    updatedAt: warehouse.updatedAt?.replace('T', ' ').slice(0, 16) || '',
    detail,
  }
}

function queryWarehouses(model: QueryModel) {
  appliedFilters.value = {
    keyword: String(model.keyword || ''),
    status: (model.status || '') as Warehouse['status'] | '',
  }
  page.value = 1
  void loadWarehouses()
}

function clearWarehouseFormErrors() {
  for (const field of Object.keys(formErrors) as WarehouseRequiredField[]) formErrors[field] = ''
}

function clearFieldError(field: WarehouseRequiredField) {
  if (formErrors[field]) formErrors[field] = ''
}

function validateRequiredField(field: WarehouseRequiredField) {
  formErrors[field] = form[field].trim() ? '' : requiredFieldMessages[field]
  return !formErrors[field]
}

function validateWarehouseForm() {
  return (Object.keys(requiredFieldMessages) as WarehouseRequiredField[])
    .map(validateRequiredField)
    .every(Boolean)
}

function apiTenantId(value: string) {
  const numeric = Number(value)
  return Number.isSafeInteger(numeric) ? numeric : value
}

async function loadWarehouses(tenantId = selectedTenantId.value) {
  if (!tenantId) return
  const sequence = ++loadSequence
  loading.value = true
  loadError.value = null
  try {
    const requestTenantId = apiTenantId(tenantId)
    const result = await listPlatformWarehouses(requestTenantId, 1, 200)
    const details = await Promise.allSettled(
      result.records.map((warehouse) => getPlatformWarehouse(requestTenantId, warehouse.id)),
    )
    if (sequence !== loadSequence) return
    rows.value = result.records.map((warehouse, index) => {
      const detailResult = details[index]
      return toRow(warehouse, detailResult?.status === 'fulfilled' ? detailResult.value : null)
    })
    detailWarningCount.value = details.filter((item) => item.status === 'rejected').length
    loadedTenantId.value = tenantId
    page.value = 1
  } catch (error) {
    if (sequence !== loadSequence) return
    loadError.value = getApiErrorDetails(error, '仓库数据加载失败，请稍后重试')
  } finally {
    if (sequence === loadSequence) loading.value = false
  }
}

function requireCurrentTenant() {
  if (!warehouseReady.value) {
    ElMessage.warning('仓库数据尚未加载完成，请稍后重试')
    return null
  }
  return apiTenantId(selectedTenantId.value)
}

function openCreate() {
  if (!requireCurrentTenant()) return
  Object.assign(form, emptyForm())
  clearWarehouseFormErrors()
  captureBaseline()
  editorOpen.value = true
}

async function ensureDetail(warehouse: WarehouseRow) {
  if (warehouse.detail) return warehouse.detail
  const tenantId = requireCurrentTenant()
  if (!tenantId) return null
  try {
    const detail = await getPlatformWarehouse(tenantId, warehouse.id)
    Object.assign(warehouse, toRow(detail.warehouse, detail))
    detailWarningCount.value = rows.value.filter((item) => !item.detail).length
    return detail
  } catch (error) {
    const details = getApiErrorDetails(error, '仓库详情加载失败，请重试')
    ElMessage.error(details.requestId ? `${details.message}（requestId: ${details.requestId}）` : details.message)
    return null
  }
}

async function openEdit(warehouse: WarehouseRow) {
  const tenantAtStart = selectedTenantId.value
  editLoading.value = true
  try {
    const detail = await ensureDetail(warehouse)
    if (!detail || selectedTenantId.value !== tenantAtStart || loadedTenantId.value !== tenantAtStart) return
    const address = detail.addresses[0]
    Object.assign(form, warehouse, {
      province: address?.stateProvince || '',
      city: address?.city || '',
      address: address?.addressLine1 || '',
    })
    clearWarehouseFormErrors()
    captureBaseline()
    editorOpen.value = true
  } finally {
    editLoading.value = false
  }
}

function nullable(value: string) {
  return value.trim() || null
}

function buildSaveRequest(tenantId: number | string): SavePlatformWarehouseRequest {
  const existing = form.id ? rows.value.find((item) => item.id === form.id)?.detail : null
  const warehouse = existing?.warehouse
  const currentAddress = existing?.addresses[0]
  const capabilities = (existing?.capabilities || []).map((capability) => ({
    capabilityCode: capability.capabilityCode,
    capabilityName: capability.capabilityName,
    enabled: capability.enabled ?? true,
    cutoffTime: capability.cutoffTime,
    description: capability.capabilityCode === 'RECEIVING' ? nullable(form.businessHours) : capability.description,
  }))
  if (!capabilities.some((item) => item.capabilityCode === 'RECEIVING')) {
    capabilities.push({
      capabilityCode: 'RECEIVING',
      capabilityName: '收货服务',
      enabled: true,
      cutoffTime: null,
      description: nullable(form.businessHours),
    })
  }
  return {
    tenantId,
    warehouseCode: form.code.trim().toUpperCase(),
    warehouseName: form.name.trim(),
    warehouseType: warehouse?.warehouseType || 'DOMESTIC',
    countryCode: warehouse?.countryCode || 'CN',
    timezone: warehouse?.timezone || 'Asia/Shanghai',
    contactName: nullable(form.contactName),
    contactPhone: nullable(form.contactPhone),
    contactEmail: warehouse?.contactEmail || null,
    status: form.status,
    remark: nullable(form.remark),
    address: {
      addressType: currentAddress?.addressType || 'OPERATING',
      countryCode: currentAddress?.countryCode || warehouse?.countryCode || 'CN',
      stateProvince: nullable(form.province),
      city: form.city.trim(),
      district: currentAddress?.district || null,
      postalCode: currentAddress?.postalCode || null,
      addressLine1: form.address.trim(),
      addressLine2: currentAddress?.addressLine2 || null,
      latitude: currentAddress?.latitude || null,
      longitude: currentAddress?.longitude || null,
    },
    capabilities,
  }
}

async function saveWarehouse() {
  const tenantId = requireCurrentTenant()
  if (!tenantId) return
  if (!validateWarehouseForm()) return
  saving.value = true
  try {
    const payload = buildSaveRequest(tenantId)
    if (form.id) await updatePlatformWarehouse(tenantId, form.id, payload)
    else await createPlatformWarehouse(payload)
    const successMessage = form.id ? '仓库资料已更新' : '收货仓已创建'
    editorOpen.value = false
    ElMessage.success(successMessage)
    await loadWarehouses()
  } catch (error) {
    const details = getApiErrorDetails(error, '仓库保存失败，请检查后重试')
    ElMessage.error(details.requestId ? `${details.message}（requestId: ${details.requestId}）` : details.message)
  } finally {
    saving.value = false
  }
}

async function toggleStatus(warehouse: WarehouseRow) {
  const tenantId = requireCurrentTenant()
  if (!tenantId) return
  const target = warehouse.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE'
  const targetText = target === 'ACTIVE' ? '启用' : '停用'
  try {
    await ElMessageBox.confirm(
      target === 'INACTIVE'
        ? `停用“${warehouse.name}”后，客户新建头程订单时将无法选择该仓库。`
        : `确认重新启用“${warehouse.name}”供客户下单选择吗？`,
      `${targetText}收货仓`,
      { confirmButtonText: `确认${targetText}`, cancelButtonText: '取消', type: target === 'INACTIVE' ? 'warning' : 'info' },
    )
    statusLoadingIds.value = new Set(statusLoadingIds.value).add(warehouse.id)
    await changePlatformWarehouseStatus(tenantId, warehouse.id, target)
    warehouse.status = target
    if (warehouse.detail) warehouse.detail.warehouse.status = target
    ElMessage.success(`仓库已${targetText}`)
  } catch (error) {
    if (error === 'cancel' || error === 'close') return
    const details = getApiErrorDetails(error, `仓库${targetText}失败，请重试`)
    ElMessage.error(details.requestId ? `${details.message}（requestId: ${details.requestId}）` : details.message)
  } finally {
    const next = new Set(statusLoadingIds.value)
    next.delete(warehouse.id)
    statusLoadingIds.value = next
  }
}

watch(selectedTenantId, (tenantId) => {
  editorOpen.value = false
  rows.value = []
  loadedTenantId.value = null
  detailWarningCount.value = 0
  page.value = 1
  void loadWarehouses(tenantId)
})
</script>

<template>
  <div class="business-page">
    <PlatformTenantSelector v-model="selectedTenantId" :disabled="tenantSwitchDisabled" />
    <el-alert v-if="loadError" type="error" :closable="false" show-icon class="state-alert">
      <template #title>仓库数据加载失败</template>
      <p>{{ loadErrorDescription }}</p>
      <el-button size="small" @click="loadWarehouses()">重新查询</el-button>
    </el-alert>
    <el-alert v-else-if="detailWarningCount" type="warning" :closable="false" show-icon class="state-alert">
      <template #title>部分仓库详情暂未加载</template>
      <p>{{ detailWarningCount }} 个仓库缺少地址或服务能力详情；编辑时会再次尝试加载，不会用模拟数据补齐。</p>
    </el-alert>

    <QueryToolbar v-model="filters" class="surface-panel" ariaLabel="仓库筛选" :fields="queryFields" @search="queryWarehouses" />

    <section class="surface-panel table-panel" aria-live="polite">
      <div class="panel-heading">
        <div>
          <h2>平台收货仓</h2>
          <p>租户 {{ selectedTenantId || '—' }} · 共 {{ filteredRows.length }} 个收货仓</p>
        </div>
        <el-button
          v-if="access.can('platform:warehouse:create')"
          type="primary"
          :disabled="!warehouseReady"
          @click="openCreate"
        ><Plus :size="16" />新增仓库</el-button>
      </div>
      <DataTable
        v-model:page="page"
        v-model:page-size="pageSize"
        :data="pagedRows"
        :columns="warehouseColumns"
        :loading="loading"
        :total="filteredRows.length"
        :page-sizes="[10, 20, 50]"
        row-key="id"
        aria-label="平台收货仓列表"
        :empty-text="loadedTenantId ? '暂无符合筛选条件的仓库' : '仓库数据暂不可用，请重新加载'"
      >
        <template #actions="{ row }">
              <div v-if="access.can('platform:warehouse:edit') || access.can('platform:warehouse:status')" class="table-actions">
                <el-button v-if="access.can('platform:warehouse:edit')" link type="primary" :disabled="!warehouseReady" @click="openEdit(row as WarehouseRow)"><Pencil :size="15" />编辑</el-button>
                <el-button
                  v-if="access.can('platform:warehouse:status')"
                  link
                  :type="(row as WarehouseRow).status === 'ACTIVE' ? 'danger' : 'success'"
                  :disabled="!warehouseReady"
                  :loading="statusLoadingIds.has((row as WarehouseRow).id)"
                  @click="toggleStatus(row as WarehouseRow)"
                ><Power :size="15" />{{ (row as WarehouseRow).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
              </div>
              <span v-else class="warehouse-subline">仅查看</span>
        </template>
        <template #warehouse="{ row }"><div class="warehouse-cell"><span><WarehouseIcon :size="18" /></span><div><strong>{{ (row as WarehouseRow).name }}</strong><small>{{ (row as WarehouseRow).code }}</small></div></div></template>
        <template #city="{ row }">{{ [(row as WarehouseRow).province, (row as WarehouseRow).city].filter(Boolean).join(' · ') || '-' }}</template>
        <template #address="{ row }"><div class="warehouse-address"><MapPin :size="15" />{{ (row as WarehouseRow).address || '详情暂未加载' }}</div></template>
        <template #contact="{ row }"><strong>{{ (row as WarehouseRow).contactName || '-' }}</strong><span class="warehouse-subline">{{ (row as WarehouseRow).contactPhone || '-' }}</span></template>
        <template #status="{ row }"><el-tag :type="(row as WarehouseRow).status === 'ACTIVE' ? 'success' : 'info'" effect="light">{{ (row as WarehouseRow).status === 'ACTIVE' ? '启用' : '停用' }}</el-tag></template>
        <template #pagination-left>共 {{ filteredRows.length }} 个收货仓</template>
      </DataTable>
    </section>

    <el-drawer v-model="editorOpen" :title="editorLabel" size="620px" class="business-drawer editor-drawer" :close-on-click-modal="false">
      <el-form :model="form" label-position="top" class="drawer-form" :disabled="saving">
        <div class="form-section"><h3>仓库标识</h3><div class="form-grid two-cols"><el-form-item label="仓库编码" required :class="{ 'has-field-error': formErrors.code }"><el-input v-model="form.code" maxlength="50" placeholder="例如 CN-NB-01" :aria-invalid="Boolean(formErrors.code)" :aria-describedby="formErrors.code ? 'warehouse-code-error' : undefined" @input="clearFieldError('code')" @blur="validateRequiredField('code')" /><p v-if="formErrors.code" id="warehouse-code-error" class="field-error" role="alert">{{ formErrors.code }}</p></el-form-item><el-form-item label="仓库名称" required :class="{ 'has-field-error': formErrors.name }"><el-input v-model="form.name" maxlength="120" placeholder="请输入客户下单时显示的名称" :aria-invalid="Boolean(formErrors.name)" :aria-describedby="formErrors.name ? 'warehouse-name-error' : undefined" @input="clearFieldError('name')" @blur="validateRequiredField('name')" /><p v-if="formErrors.name" id="warehouse-name-error" class="field-error" role="alert">{{ formErrors.name }}</p></el-form-item><el-form-item label="状态"><el-radio-group v-model="form.status"><el-radio-button value="ACTIVE">启用</el-radio-button><el-radio-button value="INACTIVE">停用</el-radio-button></el-radio-group></el-form-item></div></div>
        <div class="form-section"><h3>地址与收货</h3><div class="form-grid two-cols"><el-form-item label="省份"><el-input v-model="form.province" maxlength="100" placeholder="例如 广东省" /></el-form-item><el-form-item label="城市" required :class="{ 'has-field-error': formErrors.city }"><el-input v-model="form.city" maxlength="100" placeholder="例如 深圳市" :aria-invalid="Boolean(formErrors.city)" :aria-describedby="formErrors.city ? 'warehouse-city-error' : undefined" @input="clearFieldError('city')" @blur="validateRequiredField('city')" /><p v-if="formErrors.city" id="warehouse-city-error" class="field-error" role="alert">{{ formErrors.city }}</p></el-form-item><el-form-item label="联系人"><el-input v-model="form.contactName" maxlength="64" placeholder="请输入仓库联系人姓名" /></el-form-item><el-form-item label="联系电话"><el-input v-model="form.contactPhone" maxlength="32" placeholder="请输入手机号或固定电话" /></el-form-item><el-form-item label="收货时间"><el-input v-model="form.businessHours" maxlength="500" placeholder="例如 周一至周六 08:30-18:00" /></el-form-item></div><el-form-item label="详细地址" required :class="{ 'has-field-error': formErrors.address }"><el-input v-model="form.address" maxlength="255" type="textarea" :rows="3" placeholder="请输入街道、园区、楼栋及库位信息" :aria-invalid="Boolean(formErrors.address)" :aria-describedby="formErrors.address ? 'warehouse-address-error' : undefined" @input="clearFieldError('address')" @blur="validateRequiredField('address')" /><p v-if="formErrors.address" id="warehouse-address-error" class="field-error" role="alert">{{ formErrors.address }}</p></el-form-item></div>
        <div class="form-section"><h3>备注</h3><el-form-item label="客户可理解的收货说明"><el-input v-model="form.remark" maxlength="500" type="textarea" :rows="3" show-word-limit placeholder="例如 预约要求、进仓指引或其他注意事项" /></el-form-item></div>
      </el-form>
      <template #footer><div class="drawer-footer"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="saveWarehouse">保存仓库</el-button></div></template>
    </el-drawer>
  </div>
</template>

<style scoped>
.state-alert p { margin: 6px 0 10px; line-height: 1.55; }
.warehouse-table-state { min-height: 180px; }
.warehouse-cell { display: flex; align-items: center; gap: 10px; }
.warehouse-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 7px; background: #eef3fa; color: var(--cc-primary); }
.warehouse-cell > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.warehouse-cell strong { overflow-wrap: anywhere; }
.warehouse-cell small, .warehouse-subline { display: block; color: var(--cc-muted); font-size: 11px; }
.warehouse-address { display: flex; align-items: flex-start; gap: 7px; line-height: 1.55; overflow-wrap: anywhere; }
.warehouse-address svg { flex: 0 0 15px; margin-top: 2px; color: var(--cc-muted); }
.field-error { width: 100%; margin: 6px 0 0; color: var(--el-color-danger); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
:deep(.has-field-error .el-input__wrapper) { box-shadow: 0 0 0 1px var(--el-color-danger) inset; }
:deep(.has-field-error .el-textarea__inner) { box-shadow: 0 0 0 1px var(--el-color-danger) inset; }

@media (max-width: 720px) {
  .panel-heading .el-button { width: 100%; }
}

</style>