html/admin-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
ouyangxq
2026-09-15 09:58:15 +08:00
parent 3f998bdb88
commit 4bf66d9571
90 changed files with 1599 additions and 1388 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/suppliers/pages/SupplierDetailView.vue
+8 -6
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, FileText, Pencil } from '@lucide/vue'
@@ -45,12 +46,12 @@ watch(supplierId, () => { void load() }, { immediate: true })
</script>
<template>
<AdminPage width="comfortable"><DetailPageLayout aria-label="供应商详情">
<template #header><div class="detail-header"><div><h2>{{ supplier?.name || '供应商详情' }}</h2><StatusBadge v-if="supplier" :status="statusLabels[supplier.status]" /></div><div class="detail-actions"><el-button @click="router.push({ name: 'supplier-list' })"><ArrowLeft :size="16" />返回</el-button><el-button v-if="supplier && access.can('platform:supplier:edit')" type="primary" @click="router.push({ name: 'supplier-edit', params: { id: supplier.id } })"><Pencil :size="16" />编辑</el-button></div></div></template>
<AdminPage class="admin-density" ><DetailPageLayout class="density-detail-layout surface-panel" aria-label="供应商详情">
<template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="router.push({ name: 'supplier-list' })"><ArrowLeft :size="16" />返回列表</el-button><h1 class="density-detail-title">{{ supplier?.name || '供应商详情' }}</h1><StatusBadge v-if="supplier" :status="statusLabels[supplier.status]" /></div><el-button v-if="supplier && access.can('platform:supplier:edit')" type="primary" @click="router.push({ name: 'supplier-edit', params: { id: supplier.id } })"><Pencil :size="16" />编辑</el-button></div></template>
<LoadErrorState v-if="!canView" title="暂无供应商查看权限" message="请联系管理员开通供应商查看权限。" :show-retry="false" />
<LoadErrorState v-else-if="error" title="供应商详情加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
<section v-else v-loading="loading" class="surface-panel detail-panel">
<dl v-if="supplier" class="detail-grid"><div v-for="item in items" :key="item[0]"><dt>{{ item[0] }}</dt><dd>{{ item[1] }}</dd></div></dl>
<section v-else v-loading="loading" class="detail-panel">
<dl v-if="supplier" class="detail-grid density-fields"><div v-for="item in items" :key="item[0]" :class="{ 'wide-field': ['可代理船公司', '公司地址', '备注'].includes(item[0]) }"><dt>{{ item[0] }}</dt><dd>{{ item[1] }}</dd></div></dl>
<div v-if="supplier" class="license-row"><div><strong>营业执照</strong><span>{{ supplier.licenseFileId ? '已关联资质文件' : '未上传资质文件' }}</span></div><el-button type="primary" plain @click="licenseOpen = true"><FileText :size="16" />查看营业执照</el-button></div>
</section>
<SupplierLicenseDialog v-model="licenseOpen" :supplier="supplier" />
@@ -58,7 +59,8 @@ watch(supplierId, () => { void load() }, { immediate: true })
</template>
<style scoped>
.detail-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px solid var(--cc-border); border-radius: 8px; background: #fff; }.detail-header > div { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }.detail-header h2 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }.detail-actions :deep(.el-button + .el-button) { margin-left: 0; }
.detail-panel { padding: 22px; }.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }.detail-grid div { min-width: 0; padding: 14px 16px; border-right: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); }.detail-grid div:nth-child(3n) { border-right: 0; }.detail-grid dt { margin-bottom: 6px; color: var(--cc-muted); font-size: 12px; }.detail-grid dd { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }.license-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding: 16px; border: 1px dashed var(--cc-border); border-radius: 6px; background: #fafafa; }.license-row strong,.license-row span { display: block; }.license-row span { margin-top: 4px; color: var(--cc-muted); font-size: 12px; }
.detail-actions :deep(.el-button + .el-button) { margin-left: 0; }
.detail-panel { min-width: 0; }
.detail-grid .wide-field { grid-column: span 2; }.license-row { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-6); margin-top: var(--admin-space-7); padding: var(--admin-space-6); border: 1px dashed var(--cc-border); border-radius: var(--admin-radius); background: #fafafa; }.license-row strong,.license-row span { display: block; }.license-row span { margin-top: var(--admin-space-1); color: var(--cc-muted); font-size: var(--admin-font-caption); }
@media (max-width: 720px) { .detail-header,.license-row { align-items: stretch; flex-direction: column; }.detail-actions { display: grid !important; grid-template-columns: 1fr 1fr; }.detail-actions :deep(.el-button) { min-height: 44px; }.detail-grid { grid-template-columns: 1fr; }.detail-grid div,.detail-grid div:nth-child(3n) { border-right: 0; }.detail-panel { padding: 16px; } }
</style>