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-10-20 23:34:11 +08:00
parent f155976f52
commit 13e4aa56ec
321 changed files with 6756 additions and 2110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/warehouses/pages/WarehousesView.vue
+16 -15
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import '@/styles/adminWorkbench.css'
import '@/styles/adminDensity.css'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, type UploadFile } from 'element-plus'
@@ -594,7 +595,7 @@ async function toggleStatus(warehouse: WarehouseRow) {
? `停用“${warehouse.name}”后，客户新建头程订单时将无法选择该公共仓库。`
: `确认重新启用“${warehouse.name}”供客户下单选择吗？`,
warehouseDialogTitle(`${targetText}公共仓库`, warehouse.code),
{ customClass: 'admin-density-confirm', confirmButtonText: `确认${targetText}`, cancelButtonText: '取消', type: target === 'INACTIVE' ? 'warning' : 'info' },
{ customClass: 'admin-density-confirm admin-workbench', confirmButtonText: `确认${targetText}`, cancelButtonText: '取消', type: target === 'INACTIVE' ? 'warning' : 'info' },
)
statusLoadingIds.value = new Set(statusLoadingIds.value).add(warehouse.id)
await changePlatformWarehouseStatus(warehouse.id, target)
@@ -704,12 +705,12 @@ onMounted(() => void loadWarehouses())
</script>
<template>
<AdminPage class="admin-density" as="div">
<AdminPage class="admin-density admin-workbench" as="div">
<ListPageLayout aria-label="仓库列表页面">
<section aria-live="polite"><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError"
<section class="workbench-table is-page-surface" aria-live="polite"><DataTable appearance="integrated" :stripe="false" column-settings-mode="show" :results-visible="!loadError"
v-model:page="page"
v-model:page-size="pageSize"
:data="rows"
@@ -772,9 +773,9 @@ onMounted(() => void loadWarehouses())
</DataTable></section>
</ListPageLayout>
<AppDialog v-model="editorOpen" :title="editorLabel" width="min(650px, calc(100vw - 28px))" class="warehouse-editor-dialog admin-density-dialog" fullscreenable :close-on-click-modal="false" :confirm-loading="saving" :show-confirm="false" destroy-on-close>
<AppDialog v-model="editorOpen" :title="editorLabel" width="min(650px, calc(100vw - 28px))" class="warehouse-editor-dialog admin-density-dialog admin-workbench is-dialog" fullscreenable :close-on-click-modal="false" :confirm-loading="saving" :show-confirm="false" destroy-on-close>
<el-form :model="form" label-position="left" label-width="104px" class="density-form density-dialog-sections" :disabled="saving">
<section class="density-dialog-section" data-tone="work"><h3 class="density-dialog-section__title">基础信息</h3>
<section class="density-dialog-section workbench-evidence" data-tone="work"><h3 class="density-dialog-section__title">基础信息</h3>
<table class="density-table density-table--editable warehouse-editor-table" aria-label="仓库基础信息"><tbody>
<template v-if="isFbaCreate"><tr><td><el-form-item label="FBA 编码" required :class="{ 'has-field-error': formErrors.code }"><el-input v-model="form.code" maxlength="50" placeholder="例如 LAX9" @input="form.code = String($event).toUpperCase(); clearFieldError('code')" /><p v-if="formErrors.code" class="field-error" role="alert">{{ formErrors.code }}</p></el-form-item></td><td><el-form-item label="国家或地区" required>
<span>{{ formatCountryDisplay(form.countryCode) }}</span>
@@ -791,7 +792,7 @@ onMounted(() => void loadWarehouses())
<tr v-if="activeWarehouseType === 'FBA'"><td colspan="2"><el-form-item label="内部编号"><el-input v-model="form.internalCode" maxlength="16" placeholder="例如 154 或 CADF" @input="form.internalCode = String($event ?? '').replace(/[^a-zA-Z0-9]/g, '').toUpperCase().slice(0, 16)" /></el-form-item></td></tr>
</tbody></table>
</section>
<section class="density-dialog-section" data-tone="work"><h3 class="density-dialog-section__title">地址信息</h3>
<section class="density-dialog-section workbench-evidence" data-tone="work"><h3 class="density-dialog-section__title">地址信息</h3>
<table class="density-table density-table--editable warehouse-editor-table" aria-label="仓库地址信息"><tbody>
<tr><td><el-form-item :label="addressRegionLabel" :required="isFbaCreate || usesUsStateSelect" :class="{ 'has-field-error': formErrors.province }">
<el-select v-if="usesUsStateSelect" v-model="form.province" filterable :placeholder="regionPlaceholder" @change="onRegionChange"><el-option v-for="state in usStateOptions" :key="state.value" :label="state.label" :value="state.value" /></el-select>
@@ -802,12 +803,12 @@ onMounted(() => void loadWarehouses())
<tr><td colspan="2"><el-form-item label="详细地址" required :class="{ 'has-field-error': formErrors.address }"><el-input v-model="form.address" maxlength="255" type="textarea" :rows="3" :placeholder="addressPlaceholder" @input="clearFieldError('address')" /><p v-if="formErrors.address" class="field-error" role="alert">{{ formErrors.address }}</p></el-form-item></td></tr>
</tbody></table>
</section>
<section class="density-dialog-section" data-tone="work" v-if="!isFbaCreate"><h3 class="density-dialog-section__title">编码与状态</h3>
<section class="density-dialog-section workbench-evidence" data-tone="work" v-if="!isFbaCreate"><h3 class="density-dialog-section__title">编码与状态</h3>
<table class="density-table density-table--editable warehouse-editor-table" aria-label="仓库编码与状态"><tbody>
<tr><td><el-form-item label="仓库编码" :class="{ 'has-field-error': formErrors.code }"><el-input v-model="form.code" maxlength="50" placeholder="系统自动生成" @input="form.code = String($event).toUpperCase(); clearFieldError('code')" /><p v-if="formErrors.code" class="field-error" role="alert">{{ formErrors.code }}</p></el-form-item></td><td><el-form-item label="状态"><el-radio-group v-model="form.status" class="warehouse-status-toggle"><el-radio-button value="ACTIVE">启用</el-radio-button><el-radio-button value="INACTIVE">停用</el-radio-button></el-radio-group></el-form-item></td></tr>
</tbody></table>
</section>
<section class="density-dialog-section" data-tone="work" v-if="!isFbaCreate"><h3 class="density-dialog-section__title">联系信息</h3>
<section class="density-dialog-section workbench-evidence" data-tone="work" v-if="!isFbaCreate"><h3 class="density-dialog-section__title">联系信息</h3>
<table class="density-table density-table--editable warehouse-editor-table" aria-label="仓库联系信息"><tbody>
<tr><td><el-form-item label="联系人"><el-input v-model="form.contactName" maxlength="64" placeholder="选填" /></el-form-item></td><td><el-form-item label="联系电话"><el-input v-model="form.contactPhone" maxlength="32" inputmode="numeric" placeholder="选填" @input="form.contactPhone = digitsOnly($event)" /></el-form-item></td></tr>
<tr><td colspan="2"><el-form-item label="收货时间"><el-time-picker v-model="form.receivingCutoffTime" value-format="HH:mm:ss" format="HH:mm" placeholder="请选择收货截止时间" /></el-form-item></td></tr>
@@ -818,7 +819,7 @@ onMounted(() => void loadWarehouses())
<template #footer><div class="density-actions density-actions--footer"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="saveWarehouse"><Save :size="16" />{{ editorMode === 'EDIT' ? '保存修改' : '确认新增' }}</el-button></div></template>
</AppDialog>
<AppDialog class="warehouse-import-dialog admin-density-dialog" v-model="importOpen" fullscreenable :confirm-loading="importing" :show-confirm="false" title="导入公共仓库" width="min(760px, calc(100vw - 32px))" :close-on-click-modal="!importing" :close-on-press-escape="!importing">
<AppDialog class="warehouse-import-dialog admin-density-dialog admin-workbench is-dialog" v-model="importOpen" fullscreenable :confirm-loading="importing" :show-confirm="false" title="导入公共仓库" width="min(760px, calc(100vw - 32px))" :close-on-click-modal="!importing" :close-on-press-escape="!importing">
<div class="density-dialog-sections">
<section class="density-dialog-section" data-tone="work"><h3 class="density-dialog-section__title">文件与导入模式</h3>
<div class="import-toolbar">
@@ -833,7 +834,7 @@ onMounted(() => void loadWarehouses())
<template #tip><div class="el-upload__tip">最多 5MB、1000 行；请使用标准模板，FBA 名称可不填并默认使用编码。</div></template>
</el-upload>
</section>
<section v-if="importResult" class="density-dialog-section" data-tone="summary" role="status">
<section v-if="importResult" class="density-dialog-section workbench-evidence" data-tone="summary" role="status">
<h3 class="density-dialog-section__title warehouse-import-heading">导入结果<el-tag :type="importResult.committed ? 'success' : importResult.errorCount ? 'danger' : 'warning'">{{ importResult.committed ? '导入已提交' : (importResult.errorCount ? '预检未通过，未写入数据' : '预检通过，尚未写入数据') }}</el-tag></h3>
<table class="density-table warehouse-import-summary" aria-label="仓库导入统计"><tbody>
<tr><th scope="row">总行数</th><td>{{ importResult.totalRows }}</td><th scope="row">有效</th><td>{{ importResult.validRows }}</td><th scope="row">新增</th><td>{{ importResult.createCount }}</td></tr>
@@ -842,9 +843,9 @@ onMounted(() => void loadWarehouses())
</section>
<section v-if="importResult?.errors.length" class="density-dialog-section" data-tone="source">
<h3 class="density-dialog-section__title warehouse-import-heading">逐行校验结果<el-button size="small" @click="downloadImportErrors"><Download :size="15" />下载错误清单</el-button></h3>
<el-table :data="importResult.errors" size="small">
<div class="workbench-table"><el-table :data="importResult.errors" size="small">
<el-table-column prop="row" label="行号" width="70" /><el-table-column prop="field" label="字段" width="110" /><el-table-column prop="code" label="错误码" width="130" :formatter="formatImportErrorCode" /><el-table-column prop="message" label="原因" min-width="220" />
</el-table>
</el-table></div>
</section>
</div>
<template #footer><div class="density-actions density-actions--footer"><el-button :disabled="importing" @click="importOpen = false">关闭</el-button><el-button :loading="importing" :disabled="!importFile" @click="runImport(true)">预检文件</el-button><el-button type="primary" :loading="importing" :disabled="!canCommitImport" @click="runImport(false)"><FileUp :size="16" />确认导入</el-button></div></template>
@@ -857,12 +858,12 @@ onMounted(() => void loadWarehouses())
.warehouse-heading { gap: var(--admin-space-6); }
.warehouse-primary-actions, .import-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--admin-space-4); }
.warehouse-cell { display: flex; align-items: center; gap: var(--admin-space-4); }
.warehouse-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: var(--admin-radius); background: #eef3fa; color: var(--cc-primary); }
.warehouse-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: var(--admin-radius); background: var(--workbench-surface-soft); color: var(--workbench-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, .warehouse-address small { display: block; color: var(--cc-muted); font-size: var(--admin-font-caption); }
.warehouse-cell small, .warehouse-subline, .warehouse-address small { display: block; color: var(--workbench-muted); font-size: var(--admin-font-caption); }
.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); }
.warehouse-address svg { flex: 0 0 15px; margin-top: 2px; color: var(--workbench-muted); }
.warehouse-address span { min-width: 0; }
.field-error { width: 100%; margin: var(--admin-space-2) 0 0; color: var(--el-color-danger); font-size: var(--admin-font-caption); line-height: 1.35; overflow-wrap: anywhere; }
.warehouse-status-toggle :deep(.el-radio-button__inner) { min-width: 74px; }