admin-web/src/modules/suppliers/pages/SuppliersView.vue

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Eye, FileText, Pencil, Plus, Power } from '@lucide/vue'
import AdminPage from '@/shared/components/AdminPage.vue'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
import ListPageLayout from '@/shared/components/ListPageLayout.vue'
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import SupplierLicenseDialog from '@/modules/suppliers/components/SupplierLicenseDialog.vue'
import { changeSupplierStatus, getSupplierStats, listSuppliers } from '@/modules/suppliers/api/platformSuppliers'
import { categoryLabels, scopeLabels, settlementLabels, statusLabels, type Supplier, type SupplierCategory, type SupplierScope, type SupplierStats, type SupplierStatus } from '@/modules/suppliers/types'

const router = useRouter()
const access = useAccessPreviewStore()
const canView = computed(() => access.can('platform:supplier:list'))
const loading = ref(false)
const rows = ref<Supplier[]>([])
const stats = ref<SupplierStats>({ booking: 0, customs: 0, trucking: 0, certificate: 0 })
const activeCategory = ref<SupplierCategory>('BOOKING')
const page = ref(1)
const pageSize = ref(20)
const total = ref(0)
const loadError = ref<ApiErrorDetails | null>(null)
const actionId = ref('')
const licenseOpen = ref(false)
const licenseSupplier = ref<Supplier | null>(null)
type Filters = QueryModel & { status: SupplierStatus | ''; scope: SupplierScope | ''; region: string; keyword: string }
const filters = ref<Filters>({ status: '', scope: '', region: '', keyword: '' })
const applied = ref<Filters>({ ...filters.value })
let sequence = 0

const queryFields = computed<QueryField[]>(() => [
  { key: 'status', type: 'select', label: '状态', placeholder: '全部状态', width: 150, options: [{ label: '合作中', value: 'ACTIVE' }, { label: '停用', value: 'INACTIVE' }] },
  ...(activeCategory.value === 'BOOKING' ? [{ key: 'scope', type: 'select' as const, label: '订舱范围', placeholder: '全部国内/国外', width: 170, options: [{ label: '国内', value: 'DOMESTIC' }, { label: '国外', value: 'INTERNATIONAL' }] }] : []),
  { key: 'region', type: 'input', label: '地区', placeholder: '请输入地区', width: 170, props: { maxlength: 80 } },
  { key: 'keyword', type: 'input', label: '名称或联系人', placeholder: '供应商名称/联系人', width: 220, props: { maxlength: 160 } },
])

const columns = computed<DataTableColumn[]>(() => [
  { key: 'actions', label: '操作', width: 260, fixed: 'left', slotName: 'actions' },
  { key: 'name', label: '供应商名称', minWidth: 230, slotName: 'name' },
  { key: 'category', label: '类别', width: 90, slotName: 'category' },
  ...(activeCategory.value === 'BOOKING' ? [{ key: 'scope', label: '国内/国外', width: 110, slotName: 'scope' }] : []),
  { key: 'region', label: '地区', minWidth: 110 },
  { key: 'legalRepresentative', label: '法人', minWidth: 120 },
  { key: 'contactName', label: '联系人', minWidth: 110 },
  { key: 'phone', label: '联系电话', minWidth: 150 },
  { key: 'businessLicenseNo', label: '营业执照号', minWidth: 190 },
  { key: 'license', label: '营业执照', width: 125, slotName: 'license' },
  { key: 'status', label: '状态', width: 100, slotName: 'status' },
  { key: 'settlementPeriod', label: '结算周期', width: 120, slotName: 'settlement' },
])
const metricItems = computed(() => [
  { category: 'BOOKING' as const, label: '订舱供应商', value: stats.value.booking },
  { category: 'CUSTOMS' as const, label: '报关供应商', value: stats.value.customs },
  { category: 'TRUCKING' as const, label: '拖车供应商', value: stats.value.trucking },
  { category: 'CERTIFICATE' as const, label: '证书供应商', value: stats.value.certificate },
])

async function load() {
  if (!canView.value) return
  const current = ++sequence
  loading.value = true
  loadError.value = null
  try {
    const [result, counts] = await Promise.all([
      listSuppliers({ page: page.value, size: pageSize.value, category: activeCategory.value, status: applied.value.status, scope: activeCategory.value === 'BOOKING' ? applied.value.scope : '', region: applied.value.region, keyword: applied.value.keyword }),
      getSupplierStats(),
    ])
    if (current !== sequence) return
    rows.value = result.records
    total.value = result.total
    stats.value = counts
  } catch (error) {
    if (current !== sequence) return
    rows.value = []; total.value = 0
    loadError.value = getApiErrorDetails(error, '供应商列表加载失败')
  } finally { if (current === sequence) loading.value = false }
}

function search() { applied.value = { ...filters.value }; page.value = 1; void load() }
function switchCategory(category: SupplierCategory) {
  activeCategory.value = category
  filters.value.scope = ''; applied.value.scope = ''; page.value = 1
  void load()
}
function showLicense(row: Supplier) { licenseSupplier.value = row; licenseOpen.value = true }
function supplierRow(row: object) { return row as Supplier }
async function toggleStatus(row: Supplier) {
  const next: SupplierStatus = row.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE'
  const verb = next === 'ACTIVE' ? '启用' : '停用'
  try {
    await ElMessageBox.confirm(`确认${verb}供应商“${row.name}”吗？`, `${verb}供应商`, { type: 'warning', confirmButtonText: `确认${verb}`, cancelButtonText: '取消' })
    actionId.value = row.id
    await changeSupplierStatus(row.id, next)
    ElMessage.success(`供应商已${verb}`)
    await load()
  } catch (error) {
    if (error === 'cancel' || error === 'close') return
    const details = getApiErrorDetails(error, `${verb}供应商失败`)
    ElMessage.error(details.requestId ? `${details.message}（requestId: ${details.requestId}）` : details.message)
  } finally { actionId.value = '' }
}

watch([page, pageSize], ([newPage, newSize], [oldPage, oldSize]) => { if (newPage !== oldPage || newSize !== oldSize) void load() })
onMounted(load)
</script>

<template>
  <AdminPage>
    <ListPageLayout aria-label="供应商列表">
      <template #metrics>
        <div class="supplier-metrics" aria-label="供应商分类统计">
          <button v-for="item in metricItems" :key="item.category" type="button" :class="{ active: activeCategory === item.category }" @click="switchCategory(item.category)">
            <span>{{ item.label }}</span><strong>{{ item.value }}<small>家</small></strong>
          </button>
        </div>
      </template>
      <template #toolbar>
        <QueryToolbar v-model="filters" ariaLabel="供应商筛选" :fields="queryFields" @search="search" />
      </template>
      <template #state>
        <LoadErrorState v-if="!canView" title="暂无供应商查看权限" message="请联系管理员开通供应商查看权限。" :show-retry="false" />
        <LoadErrorState v-else-if="loadError" title="供应商加载失败" :message="loadError.message" :loading="loading" @retry="load">
          <template #details><ApiErrorMeta :details="loadError" /></template>
        </LoadErrorState>
      </template>
      <section v-if="canView" class="surface-panel table-panel">
        <nav class="supplier-tabs" aria-label="供应商分类">
          <button v-for="item in metricItems" :key="item.category" type="button" :class="{ active: activeCategory === item.category }" @click="switchCategory(item.category)">{{ categoryLabels[item.category] }}</button>
        </nav>
        <DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" empty-text="暂无供应商数据" preference-key="supplier-list">
          <template #toolbar-actions>
            <el-button v-if="access.can('platform:supplier:create')" type="primary" @click="router.push({ name: 'supplier-create' })"><Plus :size="16" />新增供应商</el-button>
          </template>
          <template #actions="{ row }">
            <div class="row-actions">
              <el-button link type="primary" @click="router.push({ name: 'supplier-detail', params: { id: row.id } })"><Eye :size="15" />详情</el-button>
              <el-button v-if="access.can('platform:supplier:edit')" link type="primary" @click="router.push({ name: 'supplier-edit', params: { id: row.id } })"><Pencil :size="15" />编辑</el-button>
              <el-button v-if="access.can('platform:supplier:status')" link :type="row.status === 'ACTIVE' ? 'danger' : 'success'" :loading="actionId === row.id" @click="toggleStatus(supplierRow(row))"><Power :size="15" />{{ row.status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
            </div>
          </template>
          <template #name="{ row }"><strong class="supplier-name">{{ row.name }}</strong></template>
          <template #category="{ row }">{{ categoryLabels[row.category as SupplierCategory] }}</template>
          <template #scope="{ row }">{{ row.scope ? scopeLabels[row.scope as SupplierScope] : '—' }}</template>
          <template #license="{ row }"><el-button link type="primary" @click="showLicense(supplierRow(row))"><FileText :size="15" />查看</el-button></template>
          <template #status="{ row }"><StatusBadge :status="statusLabels[row.status as SupplierStatus]" /></template>
          <template #settlement="{ row }">{{ settlementLabels[supplierRow(row).settlementPeriod] }}</template>
        </DataTable>
      </section>
    </ListPageLayout>
    <SupplierLicenseDialog v-model="licenseOpen" :supplier="licenseSupplier" />
  </AdminPage>
</template>

<style scoped>
.supplier-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--cc-border); border-radius: 8px; background: #fff; }
.supplier-metrics button { min-width: 0; padding: 18px 20px; border: 0; border-right: 1px solid var(--cc-border); background: #fff; color: var(--cc-text); text-align: left; cursor: pointer; }
.supplier-metrics button:last-child { border-right: 0; }.supplier-metrics button.active { box-shadow: inset 0 3px 0 var(--el-color-primary); background: #f8fbff; }
.supplier-metrics span { display: block; margin-bottom: 7px; color: var(--cc-muted); font-size: 12px; }.supplier-metrics strong { font-size: 25px; }.supplier-metrics small { margin-left: 3px; color: var(--cc-muted); font-size: 12px; }
.supplier-tabs { display: flex; gap: 6px; padding: 14px 14px 0; overflow-x: auto; border-bottom: 1px solid var(--cc-border); }
.supplier-tabs button { min-width: 76px; padding: 7px 20px; border: 0; border-radius: 6px 6px 0 0; background: #f5f5f5; color: #555; cursor: pointer; }.supplier-tabs button.active { background: var(--el-color-primary); color: #fff; font-weight: 650; }
.row-actions { display: flex; align-items: center; white-space: nowrap; }.row-actions :deep(.el-button + .el-button) { margin-left: 8px; }.supplier-name { overflow-wrap: anywhere; }
@media (max-width: 720px) { .supplier-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .supplier-metrics button:nth-child(2) { border-right: 0; } .supplier-metrics button:nth-child(-n+2) { border-bottom: 1px solid var(--cc-border); } }
@media (max-width: 380px) { .supplier-metrics { grid-template-columns: 1fr; } .supplier-metrics button { border-right: 0; border-bottom: 1px solid var(--cc-border); } .supplier-metrics button:last-child { border-bottom: 0; } }
</style>