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/app/components/WorkspaceTabs.vue
+2 -1
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, nextTick, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
@@ -32,7 +33,7 @@ async function confirmDiscard(tabIds: readonly string[]) {
await ElMessageBox.confirm(
`以下内容尚未保存：${labels.join('、')}。关闭页签后将放弃这些修改。`,
'放弃未保存的修改？',
{ confirmButtonText: '放弃并关闭', cancelButtonText: '继续编辑', type: 'warning' },
{ confirmButtonText: '放弃并关闭', cancelButtonText: '继续编辑', type: 'warning', customClass: 'admin-density-confirm' },
)
return true
} catch {
src/app/layouts/AppLayout.vue
+3 -1
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
@@ -57,7 +58,7 @@ async function pruneInaccessibleTabs() {
await ElMessageBox.alert(
`账号权限已变化，以下未保存内容无法继续编辑：${[...new Set(discardedDirtyWork.map((entry) => entry.label))].join('、')}。相关页签将关闭。`,
'权限已变化',
{ confirmButtonText: '知道了', type: 'warning' },
{ confirmButtonText: '知道了', type: 'warning', customClass: 'admin-density-confirm' },
).catch(() => undefined)
}
const previousActiveId = workspace.activeId
@@ -76,6 +77,7 @@ async function handleLogout() {
const dirtyNotice = dirtyLabels.length ? ` 当前还有未保存内容：${[...new Set(dirtyLabels)].join('、')}，退出后将丢失。` : ''
await ElMessageBox.confirm(`确定退出管理后台吗？${dirtyNotice}`, '退出登录', {
confirmButtonText: '退出',
customClass: 'admin-density-confirm',
cancelButtonText: '取消',
})
} catch {
src/app/router/index.ts
+2 -1
View File
@@ -1,3 +1,4 @@
import '@/styles/adminDensity.css'
import { createRouter, createWebHistory } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import AppLayout from '@/app/layouts/AppLayout.vue'
@@ -99,7 +100,7 @@ router.beforeEach(async (to, from) => {
await ElMessageBox.confirm(
`当前页面还有未保存内容：${[...new Set(blocking.map((entry) => entry.label))].join('、')}。继续后将放弃这些修改。`,
'放弃未保存的修改？',
{ confirmButtonText: '放弃并继续', cancelButtonText: '继续编辑', type: 'warning' },
{ confirmButtonText: '放弃并继续', cancelButtonText: '继续编辑', type: 'warning', customClass: 'admin-density-confirm' },
)
unsaved.removeWorkspaces([fromId])
useWorkspaceTabsStore().bumpCacheEpoch(fromId)
src/main.ts
+2 -1
View File
@@ -1,3 +1,4 @@
import '@/styles/adminDensity.css'
import { computed, createApp } from 'vue'
import 'dayjs/locale/zh-cn'
import { createPinia } from 'pinia'
@@ -48,7 +49,7 @@ router.onError((error, to) => {
await ElMessageBox.confirm(
'检测到后台已发布新版本，需要重新加载页面。继续后将放弃当前未保存内容。',
'重新加载页面？',
{ confirmButtonText: '重新加载', cancelButtonText: '继续编辑', type: 'warning' },
{ confirmButtonText: '重新加载', cancelButtonText: '继续编辑', type: 'warning', customClass: 'admin-density-confirm' },
)
return true
} catch {
src/modules/dashboard/pages/DashboardView.test.ts
+52 -2
View File
@@ -1,6 +1,7 @@
import { flushPromises, mount } from '@vue/test-utils'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import DashboardView from './DashboardView.vue'
import { getTodayNewOrderCount } from '../api/dashboard'
vi.mock('../api/dashboard', () => ({
getTodayNewOrderCount: vi.fn().mockResolvedValue(12),
@@ -14,6 +15,8 @@ vi.mock('../api/dashboard', () => ({
}),
}))
enableAutoUnmount(afterEach)
describe('DashboardView', () => {
beforeEach(() => vi.clearAllMocks())
@@ -24,6 +27,7 @@ describe('DashboardView', () => {
expect(wrapper.text()).toContain('核心指标来自实时业务数据')
expect(wrapper.text()).toContain('数据更新时间：2026-09-11 12:00')
expect(wrapper.findAll('.dashboard-metric')).toHaveLength(4)
expect(wrapper.findAll('.density-fields dt').map(label => label.text())).toEqual(['今日新运单', '在途柜量', '活跃客户', '待清关票数'])
expect(wrapper.text()).toContain('12 票')
expect(wrapper.text()).toContain('4.25 TEU')
expect(wrapper.text()).toContain('8 家')
@@ -36,4 +40,50 @@ describe('DashboardView', () => {
expect(wrapper.text()).not.toContain('待办事项')
expect(wrapper.text()).not.toContain('静态演示数据')
})
it('keeps successful metrics when one request fails and refreshes through the visible control', async () => {
vi.mocked(getTodayNewOrderCount).mockRejectedValueOnce(new Error('指标加载失败'))
const wrapper = mount(DashboardView)
await flushPromises()
expect(wrapper.text()).toContain('部分核心指标加载失败')
expect(wrapper.get('.dashboard-metric dd').text()).toContain('—')
expect(wrapper.text()).toContain('4.25 TEU')
await wrapper.findAll('button').find(button => button.text().trim() === '刷新数据')!.trigger('click')
await flushPromises()
expect(getTodayNewOrderCount).toHaveBeenCalledTimes(2)
expect(wrapper.text()).toContain('核心指标来自实时业务数据')
expect(wrapper.text()).toContain('12 票')
})
it('uses the same density-enabled root when entering and exiting fullscreen', async () => {
const wrapper = mount(DashboardView)
await flushPromises()
let fullscreen: Element | null = null
const previousElement = Object.getOwnPropertyDescriptor(document, 'fullscreenElement')
const previousExit = Object.getOwnPropertyDescriptor(document, 'exitFullscreen')
const enter = vi.fn(async () => { fullscreen = wrapper.element; document.dispatchEvent(new Event('fullscreenchange')) })
const exit = vi.fn(async () => { fullscreen = null; document.dispatchEvent(new Event('fullscreenchange')) })
Object.defineProperty(wrapper.element, 'requestFullscreen', { configurable: true, value: enter })
Object.defineProperty(document, 'fullscreenElement', { configurable: true, get: () => fullscreen })
Object.defineProperty(document, 'exitFullscreen', { configurable: true, value: exit })
try {
expect(wrapper.classes()).toContain('admin-density')
const button = wrapper.get('button[aria-pressed]')
await button.trigger('click')
await flushPromises()
expect(enter).toHaveBeenCalledOnce()
expect(button.text()).toBe('退出全屏')
expect(button.attributes('aria-pressed')).toBe('true')
await button.trigger('click')
await flushPromises()
expect(exit).toHaveBeenCalledOnce()
expect(button.text()).toBe('全屏展示')
expect(button.attributes('aria-pressed')).toBe('false')
} finally {
if (previousElement) Object.defineProperty(document, 'fullscreenElement', previousElement)
else Reflect.deleteProperty(document, 'fullscreenElement')
if (previousExit) Object.defineProperty(document, 'exitFullscreen', previousExit)
else Reflect.deleteProperty(document, 'exitFullscreen')
}
})
})
src/modules/dashboard/pages/DashboardView.vue
+32 -56
View File
@@ -1,4 +1,6 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { ElButton } from 'element-plus'
import dayjs from 'dayjs'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import {
@@ -30,16 +32,15 @@ function displayNumber(value: number | null | undefined, maximumFractionDigits =
}
const metrics = computed(() => [
{ label: '今日新运单', value: displayNumber(todayNewOrderCount.value), unit: '票', note: '按今日创建时间统计', tone: 'blue' },
{ label: '今日新运单', value: displayNumber(todayNewOrderCount.value), unit: '票', note: '按今日创建时间统计' },
{
label: '在途柜量', value: displayNumber(operationalMetrics.value?.inTransitTeu, 2), unit: 'TEU',
note: operationalMetrics.value
? `已开船未到仓 · ${operationalMetrics.value.inTransitContainerCount} 柜${operationalMetrics.value.unknownContainerTypeCount ? ` · ${operationalMetrics.value.unknownContainerTypeCount} 柜箱型未知` : ''}`
: '已开船且尚未到仓',
tone: 'green',
},
{ label: '活跃客户', value: displayNumber(activeCustomerCount.value), unit: '家', note: '客户状态为启用', tone: 'purple' },
{ label: '待清关票数', value: displayNumber(operationalMetrics.value?.pendingCustomsOrderCount), unit: '票', note: '已进入清关且尚未完成', tone: 'rose' },
{ label: '活跃客户', value: displayNumber(activeCustomerCount.value), unit: '家', note: '客户状态为启用' },
{ label: '待清关票数', value: displayNumber(operationalMetrics.value?.pendingCustomsOrderCount), unit: '票', note: '已进入清关且尚未完成' },
])
async function toggleFullscreen() {
@@ -77,82 +78,57 @@ onBeforeUnmount(() => document.removeEventListener('fullscreenchange', syncFulls
</script>
<template>
<!--
THESIS: 首页只承载已经接通真实业务数据的四项核心指标。
OWN-WORLD: 延续 Admin 冷灰工作面、白色数据面板和柏悦蓝主色；状态色只承担分类与告警。
STORY: 运营人员进入首页后直接识别当前核心体量。
FIRST VIEWPORT: 顶部状态栏与四项核心指标完整占据首屏。
FORM: 既有后台视觉体系的经营驾驶舱结构，基于用户提供的正式原型直接扩展。
FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
-->
<section ref="dashboardRef" class="dashboard-view">
<section ref="dashboardRef" class="dashboard-view admin-density">
<AdminPage as="div" spacing="normal">
<section class="dashboard-context" aria-label="数据看板说明">
<p>{{ metricsError ? '部分核心指标加载失败，可刷新重试。' : '核心指标来自实时业务数据。' }}</p>
<div class="dashboard-head-actions">
<span>数据更新时间：{{ metricsUpdatedAt ? dayjs(metricsUpdatedAt).format('YYYY-MM-DD HH:mm') : '加载中' }}</span>
<button type="button" class="dashboard-outline-button" :disabled="metricsLoading" @click="loadMetrics">
<el-button class="dashboard-control" :disabled="metricsLoading" @click="loadMetrics">
<RefreshCw :size="16" aria-hidden="true" />
刷新数据
</button>
<button type="button" class="dashboard-outline-button" :aria-pressed="isFullscreen" @click="toggleFullscreen">
</el-button>
<el-button class="dashboard-control" :aria-pressed="isFullscreen" @click="toggleFullscreen">
<Minimize v-if="isFullscreen" :size="16" aria-hidden="true" />
<Expand v-else :size="16" aria-hidden="true" />
{{ isFullscreen ? '退出全屏' : '全屏展示' }}
</button>
</el-button>
</div>
</section>
<div class="dashboard-metrics" aria-label="核心业务指标">
<article v-for="metric in metrics" :key="metric.label" class="dashboard-metric" :class="`is-${metric.tone}`">
<span class="dashboard-metric-mark" aria-hidden="true" />
<p>{{ metric.label }}</p>
<strong>{{ metric.value }} <small>{{ metric.unit }}</small></strong>
<span>{{ metric.note }}</span>
</article>
</div>
<dl class="dashboard-metrics density-fields" aria-label="核心业务指标">
<div v-for="metric in metrics" :key="metric.label" class="dashboard-metric">
<dt>{{ metric.label }}</dt>
<dd>
<strong>{{ metric.value }} <small>{{ metric.unit }}</small></strong>
<span class="dashboard-metric-note">{{ metric.note }}</span>
</dd>
</div>
</dl>
</AdminPage>
</section>
</template>
<style scoped>
.dashboard-view { --dashboard-panel: var(--cc-surface, #fff); display: block; min-width: 0; color: var(--cc-text, #172033); }
.dashboard-view:fullscreen { overflow: auto; padding: 24px; background: var(--cc-page, #f4f6f8); }
.dashboard-context { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; }
.dashboard-context p { min-width: 0; margin: 0; color: var(--cc-muted, #667085); font-size: 12px; line-height: 1.55; }
.dashboard-head-actions { display: flex; align-items: center; gap: 14px; color: var(--cc-muted, #667085); font-size: 12px; white-space: nowrap; }
.dashboard-outline-button { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--cc-border-strong, #d8deea); border-radius: var(--cc-radius-md, 6px); background: var(--cc-surface, #fff); color: var(--cc-text-secondary, #344054); cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.dashboard-outline-button { padding: 0 13px; }
.dashboard-outline-button:hover:not(:disabled) { border-color: var(--cc-primary); color: var(--cc-primary); }
.dashboard-outline-button:disabled { cursor: wait; opacity: .65; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dashboard-metric { position: relative; min-width: 0; overflow: hidden; padding: 20px; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--dashboard-panel); }
.dashboard-metric-mark { position: absolute; top: -38px; right: -30px; width: 110px; height: 110px; border-radius: 50%; background: #edf1ff; }
.dashboard-metric.is-green .dashboard-metric-mark { background: #e8f7ee; }
.dashboard-metric.is-purple .dashboard-metric-mark { background: #f1eaff; }
.dashboard-metric.is-rose .dashboard-metric-mark { background: #fdeaf1; }
.dashboard-metric p { position: relative; margin: 0 0 25px; color: #5f6573; font-size: 13px; font-weight: 700; }
.dashboard-metric strong { position: relative; display: block; overflow-wrap: anywhere; font-size: 31px; line-height: 1; letter-spacing: -.02em; }
.dashboard-metric strong small { color: #525866; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.dashboard-metric > span:last-child { position: relative; display: block; margin-top: 17px; color: #8a91a0; font-size: 11px; }
.dashboard-view { min-width: 0; color: var(--cc-text); }
.dashboard-view:fullscreen { overflow: auto; padding: var(--admin-space-7); background: var(--cc-page, #f4f6f8); }
.dashboard-context { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--admin-space-6); }
.dashboard-context p { min-width: 0; margin: 0; color: var(--cc-muted); font-size: var(--admin-font-caption); line-height: 1.55; }
.dashboard-head-actions { display: flex; align-items: center; gap: var(--admin-space-5); color: var(--cc-muted); font-size: var(--admin-font-caption); white-space: nowrap; }
.dashboard-head-actions .el-button + .el-button { margin-left: 0; }
.dashboard-metrics .dashboard-metric dd { display: flex; flex-direction: column; align-items: flex-start; gap: var(--admin-space-2); }
.dashboard-metric strong { font-size: var(--admin-font-title); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dashboard-metric strong small, .dashboard-metric-note { color: var(--cc-muted); font-size: var(--admin-font-caption); font-weight: normal; }
@media (max-width: 1180px) {
.dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-metrics.density-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.dashboard-context { align-items: flex-start; flex-direction: column; }
.dashboard-head-actions { align-items: flex-start; flex-direction: column; gap: 9px; white-space: normal; }
.dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-metrics.density-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
.dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dashboard-metric { min-height: 116px; padding: 13px; }
.dashboard-metric-mark { top: -30px; right: -24px; width: 80px; height: 80px; }
.dashboard-metric p { margin-bottom: 12px; font-size: 11px; }
.dashboard-metric strong { font-size: 23px; }
.dashboard-metric strong small { font-size: 10px; }
.dashboard-metric > span:last-child { margin-top: 10px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.dashboard-outline-button { transition: none; }
.dashboard-metrics.density-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-metrics .dashboard-metric { grid-template-columns: minmax(0, 1fr); }
}
</style>
src/modules/downloads/pages/DownloadCenterView.test.ts
+2 -1
View File
@@ -161,7 +161,8 @@ describe('DownloadCenterView', () => {
expect(document.body.textContent).toContain('任务详情 · EXP9')
expect(document.body.textContent).toContain('客户列表.xlsx')
expect(document.querySelector('.el-drawer')).toBeNull()
expect(document.querySelector('.el-dialog')).not.toBeNull()
expect(document.querySelector('.el-dialog.admin-density-dialog')).not.toBeNull()
expect(document.querySelectorAll('.task-detail-grid.density-fields > div')).toHaveLength(11)
const detailDownload = [...document.querySelectorAll<HTMLButtonElement>('button')]
.find((item) => item.textContent?.trim() === '下载文件')
detailDownload?.click()
src/modules/downloads/pages/DownloadCenterView.vue
+25 -31
View File
@@ -1,6 +1,6 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { Download, Eye, RotateCcw } from '@lucide/vue'
import { ElMessage } from 'element-plus'
import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
import {
@@ -263,7 +263,7 @@ onBeforeUnmount(() => {
</script>
<template>
<AdminPage>
<AdminPage class="admin-density">
<div class="business-page download-center-page">
<ListPageLayout ariaLabel="下载任务列表">
<template #toolbar>
@@ -284,10 +284,10 @@ onBeforeUnmount(() => {
</div>
<DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="columns" preference-key="downloads-table" :loading="loading" :total="result.total" row-key="id" empty-text="暂无符合筛选条件的下载任务" aria-label="下载任务列表">
<template #pagination-left="{ total: tableTotal }"><span>共 {{ tableTotal }} 个任务</span></template>
<template #actions="{ row }"><div class="table-actions">
<el-button v-if="(row as PlatformExportTask)?.id" link type="primary" @click="openDetail(row as PlatformExportTask)"><Eye :size="15" />详情</el-button>
<el-button v-if="(row as PlatformExportTask).status === 'SUCCEEDED'" link type="primary" :loading="downloadingId === (row as PlatformExportTask).id" @click="downloadTask(row as PlatformExportTask)"><Download :size="15" />下载</el-button>
<el-button v-if="canRetry(row as PlatformExportTask)" link type="primary" :loading="retryingId === (row as PlatformExportTask).id" @click="retryTask(row as PlatformExportTask)"><RotateCcw :size="15" />{{ retryLabel(row as PlatformExportTask) }}</el-button>
<template #actions="{ row }"><div class="table-actions density-actions">
<el-button data-tone="neutral" class="density-action" v-if="(row as PlatformExportTask)?.id" @click="openDetail(row as PlatformExportTask)">详情</el-button>
<el-button data-tone="neutral" class="density-action" v-if="(row as PlatformExportTask).status === 'SUCCEEDED'" :loading="downloadingId === (row as PlatformExportTask).id" @click="downloadTask(row as PlatformExportTask)">下载</el-button>
<el-button data-tone="neutral" class="density-action" v-if="canRetry(row as PlatformExportTask)" :loading="retryingId === (row as PlatformExportTask).id" @click="retryTask(row as PlatformExportTask)">{{ retryLabel(row as PlatformExportTask) }}</el-button>
</div></template>
<template #type="{ row }">{{ typeLabel((row as PlatformExportTask).exportType) }}</template>
<template #status="{ row }"><el-tag :type="taskStatusMeta(row as PlatformExportTask).type" effect="light">{{ taskStatusMeta(row as PlatformExportTask).label }}</el-tag></template>
@@ -300,7 +300,7 @@ onBeforeUnmount(() => {
</section>
</ListPageLayout>
<AppDialog
<AppDialog class="admin-density-dialog"
v-model="detailOpen"
:title="detailTask ? `任务详情 · ${detailTask.taskNo}` : '任务详情'"
width="min(720px, calc(100vw - 28px))"
@@ -323,7 +323,7 @@ onBeforeUnmount(() => {
</div>
<el-tag :type="taskStatusMeta(detailTask).type" effect="light">{{ taskStatusMeta(detailTask).label }}</el-tag>
</div>
<dl class="task-detail-grid">
<dl class="task-detail-grid density-fields">
<div><dt>任务编号</dt><dd>{{ detailTask.taskNo }}</dd></div>
<div><dt>申请人</dt><dd>{{ detailTask.requestedUsername || detailTask.requestedBy }}</dd></div>
<div><dt>申请时间</dt><dd>{{ formatDate(detailTask.requestedAt) }}</dd></div>
@@ -363,34 +363,28 @@ onBeforeUnmount(() => {
</template>
<style scoped>
.task-detail-grid.density-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.task-detail-grid .is-wide { grid-column: 1 / -1; }
.download-center-page { min-width: 0; }
.download-error { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.download-error { padding: 18px; }
.download-error strong { color: var(--cc-danger); font-size: 14px; }
.download-error p { margin: 5px 0; color: var(--cc-text); font-size: 13px; }
.download-sync-warning { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid #fedf89; background: #fffaeb; color: #93370d; font-size: 12px; }
.table-actions { display: flex; min-height: 32px; align-items: center; gap: 8px; }
.table-actions :deep(.el-button + .el-button) { margin-left: 0; }
.download-error { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-6); }
.download-error { padding: var(--admin-space-6); }
.download-error strong { color: var(--cc-danger); font-size: var(--admin-font-body); }
.download-error p { margin: 5px 0; color: var(--cc-text); font-size: var(--admin-font-body); }
.download-sync-warning { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-5); padding: var(--admin-space-4) var(--admin-space-6); border-bottom: 1px solid #fedf89; background: #fffaeb; color: #93370d; font-size: var(--admin-font-caption); }
.failure-cell { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.failure-message { color: var(--cc-danger); }
.detail-load-error { display: flex; min-height: 220px; align-items: flex-start; justify-content: center; flex-direction: column; }
.detail-load-error strong { color: var(--cc-danger); font-size: 15px; }
.detail-load-error p { margin: 6px 0; color: var(--cc-text); font-size: 13px; }
.detail-load-error :deep(.el-button) { margin-top: 16px; }
.detail-load-error strong { color: var(--cc-danger); font-size: var(--admin-font-section); }
.detail-load-error p { margin: var(--admin-space-2) 0; color: var(--cc-text); font-size: var(--admin-font-body); }
.detail-load-error :deep(.el-button) { margin-top: var(--admin-space-6); }
.task-detail { min-width: 0; }
.task-detail-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--cc-border); }
.task-detail-summary h3 { margin: 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 17px; }
.task-detail-summary p { margin: 6px 0 0; color: var(--cc-muted); font-size: 12px; }
.task-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.task-detail-grid > div { min-width: 0; padding: 16px 14px; border-bottom: 1px solid var(--cc-border); }
.task-detail-grid > div:nth-child(odd):not(.is-wide) { border-right: 1px solid var(--cc-border); }
.task-detail-grid .is-wide { grid-column: 1 / -1; }
.task-detail-grid dt { margin-bottom: 6px; color: var(--cc-muted); font-size: 12px; }
.task-detail-grid dd { margin: 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 13px; line-height: 1.5; }
.task-failure { margin-top: 18px; padding: 14px; border: 1px solid color-mix(in srgb, var(--cc-danger) 24%, var(--cc-border)); border-radius: 8px; background: color-mix(in srgb, var(--cc-danger) 5%, #fff); }
.task-failure strong { color: var(--cc-danger); font-size: 13px; }
.task-failure p { margin: 6px 0 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 13px; line-height: 1.6; }
small { display: block; margin-top: 3px; color: var(--cc-muted); font-size: 11px; }
.task-detail-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--admin-space-6); padding-bottom: var(--admin-space-6); border-bottom: 1px solid var(--cc-border); }
.task-detail-summary h3 { margin: 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: var(--admin-font-section); }
.task-detail-summary p { margin: var(--admin-space-2) 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption); }
.task-failure { margin-top: var(--admin-space-6); padding: var(--admin-space-5); border: 1px solid color-mix(in srgb, var(--cc-danger) 24%, var(--cc-border)); border-radius: var(--admin-radius); background: color-mix(in srgb, var(--cc-danger) 5%, #fff); }
.task-failure strong { color: var(--cc-danger); font-size: var(--admin-font-body); }
.task-failure p { margin: var(--admin-space-2) 0 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: var(--admin-font-body); line-height: 1.6; }
small { display: block; margin-top: 3px; color: var(--cc-muted); font-size: var(--admin-font-caption); }
@media (max-width: 720px) {
.download-error, .download-sync-warning { align-items: stretch; flex-direction: column; }
.table-actions :deep(.el-button) { min-height: 44px; }
src/modules/fba-pricing/carrier-rates/pages/CarrierRateDetailView.vue
+48 -52
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, onMounted, ref, watch } from 'vue'
import { AlertTriangle, ArrowLeft, CircleCheck, Download, FileSpreadsheet, RefreshCw, Ship, Warehouse } from '@lucide/vue'
import { ElMessage, ElMessageBox } from 'element-plus'
@@ -11,7 +12,7 @@ import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import AdminPage from '@/shared/components/AdminPage.vue'
import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
import PageToolbar from '@/shared/components/PageToolbar.vue'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import {
downloadPlatformPriceBookSource,
getPlatformPriceBook,
@@ -384,7 +385,7 @@ async function confirmPriceBook() {
await ElMessageBox.confirm(
`确认后，该价格表会立即成为“${priceBookScopeLabel(detail.value.version.customerId)}”的唯一生效版本，并仅替换同一报价范围的当前生效版本。历史版本和原始文件将继续保留。`,
'确认并生效船期价格表',
{ type: 'warning', confirmButtonText: '确认并立即生效', cancelButtonText: '取消' },
{ customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: '确认并立即生效', cancelButtonText: '取消' },
)
} catch (error) {
if (error === 'cancel' || error === 'close') return
@@ -430,37 +431,38 @@ onMounted(() => {
</script>
<template>
<AdminPage as="div" class="price-book-detail" spacing="normal">
<DetailPageLayout aria-label="船期价格表版本详情">
<AdminPage as="div" class="price-book-detail admin-density" spacing="normal">
<DetailPageLayout class="density-detail-layout surface-panel" aria-label="船期价格表版本详情">
<template #header>
<div class="detail-heading">
<el-button @click="backToList"><ArrowLeft :size="16" />返回列表</el-button>
<PageToolbar
class="detail-toolbar"
as="section"
:title="detail ? `船期价格表 · V${detail.version.versionNo}` : '船期价格表详情'"
:description="detail ? `${priceBookScopeLabel(detail.version.customerId)} · 上传于 ${formatDateTime(detail.version.createdAt)}` : '查看版本、仓库映射和渠道价格'"
>
<template v-if="detail" #actions>
<el-tag :type="priceBookStatusMeta(detail.version.status).type" effect="light">{{ priceBookStatusMeta(detail.version.status).label }}</el-tag>
<el-button :loading="downloading" @click="downloadSource"><Download :size="16" />下载原文件</el-button>
<el-button v-if="isPending && canEdit" type="primary" :loading="publishing" :disabled="!canConfirm" @click="confirmPriceBook"><CircleCheck :size="16" />确认并立即生效</el-button>
</template>
</PageToolbar>
<div class="density-detail-header">
<div class="density-detail-heading">
<el-button link class="density-back" @click="backToList"><ArrowLeft :size="16" />返回列表</el-button>
<h1 class="density-detail-title">{{ detail ? '船期价格表 · V' + detail.version.versionNo : '船期价格表详情' }}</h1>
<StatusBadge v-if="detail" :status="priceBookStatusMeta(detail.version.status).label" />
</div>
<div v-if="detail" class="price-book-header-actions">
<el-button :loading="downloading" @click="downloadSource"><Download :size="16" />下载原文件</el-button>
<el-button v-if="isPending && canEdit" type="primary" :loading="publishing" :disabled="!canConfirm" @click="confirmPriceBook"><CircleCheck :size="16" />确认并立即生效</el-button>
</div>
</div>
</template>
<template v-if="detail" #summary>
<dl class="density-detail-overview">
<div><dt>报价范围</dt><dd>{{ priceBookScopeLabel(detail.version.customerId) }}</dd></div>
<div><dt>上传时间</dt><dd>{{ formatDateTime(detail.version.createdAt) }}</dd></div>
</dl>
</template>
<LoadErrorState v-if="loadError" title="船期价格表详情加载失败" :message="loadError.message" :loading="loading" @retry="loadDetail">
<template #details><ApiErrorMeta :details="loadError" /></template>
</LoadErrorState>
<template v-else-if="detail">
<section class="surface-panel version-panel">
<section class="version-panel">
<header class="section-heading">
<div><h2><FileSpreadsheet :size="18" />版本信息</h2><p>{{ detail.version.originalFileName }}</p></div>
</header>
<dl class="detail-grid">
<div><dt>报价范围</dt><dd>{{ priceBookScopeLabel(detail.version.customerId) }}</dd></div>
<dl class="detail-grid density-fields">
<div><dt>解析渠道</dt><dd>{{ detail.version.channelCount }}</dd></div>
<div><dt>解析价格行</dt><dd>{{ detail.version.rateCount }}</dd></div>
<div><dt>阻断错误</dt><dd :class="{ 'is-danger': detail.version.blockingErrorCount }">{{ detail.version.blockingErrorCount }}</dd></div>
@@ -470,7 +472,7 @@ onMounted(() => {
</dl>
</section>
<section v-if="isPending && canEdit" class="surface-panel mapping-section">
<section v-if="isPending && canEdit" class="mapping-section">
<header class="section-heading"><div><h2><Warehouse :size="18" />仓库映射</h2><p>来源编码必须匹配启用的平台公共仓库编码。</p></div></header>
<el-alert
v-if="nonMappingBlockingIssues.length"
@@ -509,7 +511,7 @@ onMounted(() => {
</div>
</section>
<section class="surface-panel detail-section">
<section class="detail-section">
<header class="section-heading"><div><h2><AlertTriangle :size="18" />解析与校验</h2><p>阻断错误未解决时不能生效；价格行不可在页面内修改。</p></div></header>
<el-empty v-if="!detail.issues.length" description="未发现解析问题" :image-size="72" />
<el-table v-else :data="detail.issues" size="small" max-height="280" aria-label="价格表解析问题">
@@ -520,12 +522,12 @@ onMounted(() => {
</el-table>
</section>
<section class="surface-panel detail-section channel-preview">
<section class="detail-section channel-preview">
<header class="section-heading"><div><h2><Ship :size="18" />按渠道预览</h2><p>显示上传 Excel 的解析结果，确认页不提供在线改价。</p></div></header>
<el-empty v-if="!detail.channels.length" description="未解析出渠道" :image-size="72" />
<template v-else>
<el-tabs v-model="selectedChannelCode" class="channel-tabs">
<el-tab-pane v-for="channel in detail.channels" :key="channel.channelCode" :label="channel.channelName" :name="channel.channelCode" />
<el-tabs v-model="selectedChannelCode" class="channel-tabs density-element-tabs">
<el-tab-pane v-for="channel in detail.channels" :key="channel.channelCode" :name="channel.channelCode"><template #label><span class="density-tab-icon" aria-hidden="true">🚢</span>{{ channel.channelName }}</template></el-tab-pane>
</el-tabs>
<div class="channel-meta"><span>{{ priceModelLabel(selectedChannel?.priceModel || '') }}</span><span>表页：{{ selectedChannel?.sourceSheetName || '—' }}</span></div>
<el-table :data="selectedChannelRates" size="small" max-height="440" border stripe aria-label="渠道价格行预览">
@@ -552,38 +554,32 @@ onMounted(() => {
<style scoped>
.price-book-detail { min-width: 0; max-width: 1880px; }
.detail-heading { display: flex; min-width: 0; align-items: flex-start; gap: 16px; }
.detail-toolbar { min-width: 0; flex: 1; }
.detail-toolbar :deep(.page-toolbar__actions) { align-items: center; }
.surface-panel { padding: 16px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-heading h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--cc-text); font-size: 15px; }
.version-panel, .mapping-section, .detail-section { padding: var(--admin-space-5) 0; border-bottom: 1px solid var(--cc-border); }
.detail-section:last-child { border-bottom: 0; }
.price-book-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-3); }
.detail-grid .detail-grid__wide { grid-column: 1 / -1; }
.section-heading > div { min-width: 0; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--admin-space-5); margin-bottom: var(--admin-space-5); }
.section-heading h2 { display: flex; align-items: center; gap: var(--admin-space-3); margin: 0; color: var(--cc-text); font-size: var(--admin-font-section); }
.section-heading h2 svg { color: var(--cc-primary); }
.section-heading p { margin: 5px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.55; }
.detail-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; border: 1px solid var(--cc-border); border-radius: 8px; overflow: hidden; }
.detail-grid > div { min-width: 0; padding: 11px 13px; border-right: 1px solid var(--cc-border); background: var(--cc-surface-soft, #f8fafc); }
.detail-grid > div:nth-child(5n) { border-right: 0; }
.detail-grid__wide { grid-column: span 3; border-top: 1px solid var(--cc-border); }
.detail-grid__wide + .detail-grid__wide { grid-column: span 2; }
.detail-grid dt { color: var(--cc-muted); font-size: 11px; }
.detail-grid dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: 14px; font-weight: 700; }
.section-heading p { overflow-wrap: anywhere; margin: 5px 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption); line-height: 1.55; }
.is-danger { color: var(--el-color-danger) !important; }
.mapping-section, .detail-section { display: grid; min-width: 0; gap: 14px; }
.mapping-section, .detail-section { display: grid; min-width: 0; gap: var(--admin-space-5); }
.mapping-section .section-heading, .detail-section .section-heading { margin-bottom: 0; }
.mapping-groups { display: grid; gap: 14px; }
.mapping-group { display: grid; gap: 8px; }
.mapping-group h3 { margin: 0; color: var(--cc-text); font-size: 13px; }
.mapping-row { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(320px, 1fr); align-items: center; gap: 16px; padding: 11px 12px; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--cc-surface-soft, #f8fafc); }
.mapping-row > div { display: grid; min-width: 0; gap: 4px; }
.mapping-row strong { overflow-wrap: anywhere; color: var(--cc-text); font-size: 13px; }
.mapping-row span { color: var(--cc-muted); font-size: 12px; }
.mapping-groups { display: grid; gap: var(--admin-space-5); }
.mapping-group { display: grid; gap: var(--admin-space-3); }
.mapping-group h3 { margin: 0; color: var(--cc-text); font-size: var(--admin-font-body); }
.mapping-row { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(320px, 1fr); align-items: center; gap: var(--admin-space-6); padding: var(--admin-space-5) var(--admin-space-5); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: var(--cc-surface-soft, #f8fafc); }
.mapping-row > div { display: grid; min-width: 0; gap: var(--admin-space-1); }
.mapping-row strong { overflow-wrap: anywhere; color: var(--cc-text); font-size: var(--admin-font-body); }
.mapping-row span { color: var(--cc-muted); font-size: var(--admin-font-caption); }
.mapping-row :deep(.el-select) { width: 100%; }
.mapping-load-error { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--cc-danger) 24%, var(--cc-border)); border-radius: 8px; }
.mapping-load-error strong { color: var(--cc-danger); font-size: 13px; }
.mapping-load-error p { margin: 4px 0; color: var(--cc-text); font-size: 12px; }
.mapping-load-error { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-5); padding: var(--admin-space-5); border: 1px solid color-mix(in srgb, var(--cc-danger) 24%, var(--cc-border)); border-radius: var(--admin-radius); }
.mapping-load-error strong { color: var(--cc-danger); font-size: var(--admin-font-body); }
.mapping-load-error p { margin: var(--admin-space-1) 0; color: var(--cc-text); font-size: var(--admin-font-caption); }
.channel-tabs { width: 100%; min-width: 0; margin-bottom: 0; overflow: hidden; }
.channel-preview :deep(.el-table) { width: 100%; max-width: 100%; min-width: 0; }
.channel-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 0; color: var(--cc-muted); font-size: 12px; }
.channel-meta { display: flex; flex-wrap: wrap; gap: var(--admin-space-2) var(--admin-space-5); margin: calc(-1 * var(--admin-space-1)) 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption); }
@media (max-width: 720px) {
.detail-heading, .mapping-load-error { align-items: stretch; flex-direction: column; }
.detail-toolbar { width: 100%; }
src/modules/fba-pricing/carrier-rates/pages/CarrierRatesView.test.ts
+8 -8
View File
@@ -126,12 +126,12 @@ describe('CarrierRatesView price-book source contract', () => {
expect(source).toContain('<DataTable')
expect(source).toContain(':columns="columns"')
expect(detailSource).toContain('border stripe aria-label="渠道价格行预览"')
expect(source).toContain('<el-button size="small" plain type="primary" @click="openDetail')
expect(source).toMatch(/size="small"\r?\n\s+plain\r?\n\s+:loading="downloadingIds\.has/)
expect(source).toContain('<Eye :size="15" />{{ detailActionLabel')
expect(source).toContain('<Download :size="15" />原文件')
expect(source).toContain('<el-button data-tone="neutral" class="density-action"')
expect(source).toMatch(/:loading="downloadingIds\.has/)
expect(source).toContain('{{ detailActionLabel')
expect(source).toContain('原文件</el-button>')
expect(detailSource).toContain('<CircleCheck :size="16" />确认并立即生效')
expect(detailSource).toContain("import PageToolbar from '@/shared/components/PageToolbar.vue'")
expect(detailSource).toContain('class="density-detail-header"')
expect(source).not.toContain('<el-button link type="primary" @click="openDetail')
})
@@ -151,9 +151,9 @@ describe('CarrierRatesView price-book source contract', () => {
})
it('keeps all row actions directly visible without a premature more menu', () => {
expect(source).toContain('<Eye :size="15" />{{ detailActionLabel')
expect(source).toContain('<Download :size="15" />原文件')
expect(source).toContain('<CircleX :size="15" />作废')
expect(source).toContain('{{ detailActionLabel')
expect(source).toContain('原文件</el-button>')
expect(source).toContain('作废</el-button>')
expect(source).not.toContain('MoreHorizontal')
})
})
src/modules/fba-pricing/carrier-rates/pages/CarrierRatesView.vue
+24 -24
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, onMounted, ref, watch } from 'vue'
import { CircleX, Download, Eye, FileSpreadsheet, FileUp } from '@lucide/vue'
import { FileSpreadsheet, FileUp } from '@lucide/vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
@@ -268,6 +269,7 @@ async function voidPending(row: PlatformPriceBookVersion) {
`作废后，版本 V${row.versionNo} 将不能再确认生效；版本记录和原始文件会继续保留。`,
'作废待确认价格表',
{
customClass: 'admin-density-confirm',
type: 'warning',
confirmButtonText: '确认作废',
cancelButtonText: '取消',
@@ -315,7 +317,7 @@ onMounted(() => {
</script>
<template>
<AdminPage as="div" class="price-book-page" spacing="normal">
<AdminPage as="div" class="price-book-page admin-density" spacing="normal">
<ListPageLayout aria-label="承运商报价版本管理">
<template #toolbar>
<QueryToolbar
@@ -357,22 +359,22 @@ onMounted(() => {
>
<template #toolbar-actions><el-button v-if="canEdit" type="primary" @click="openUpload"><FileUp :size="16" />上传价格表</el-button></template>
<template #actions="{ row }">
<div class="table-actions">
<el-button size="small" plain type="primary" @click="openDetail(row as PlatformPriceBookVersion)"><Eye :size="15" />{{ detailActionLabel(row as PlatformPriceBookVersion) }}</el-button>
<el-button
<div class="table-actions density-actions">
<el-button data-tone="neutral" class="density-action" size="small" @click="openDetail(row as PlatformPriceBookVersion)">{{ detailActionLabel(row as PlatformPriceBookVersion) }}</el-button>
<el-button data-tone="neutral" class="density-action"
size="small"
plain
:loading="downloadingIds.has((row as PlatformPriceBookVersion).id)"
@click="downloadSource(row as PlatformPriceBookVersion)"
><Download :size="15" />原文件</el-button>
<el-button
>原文件</el-button>
<el-button data-tone="danger" class="density-action"
v-if="canEdit && (row as PlatformPriceBookVersion).status === 'PENDING_CONFIRMATION'"
size="small"
plain
type="danger"
:loading="voidingIds.has((row as PlatformPriceBookVersion).id)"
@click="voidPending(row as PlatformPriceBookVersion)"
><CircleX :size="15" />作废</el-button>
>作废</el-button>
</div>
</template>
<template #version="{ row }"><div class="version-cell"><strong>V{{ (row as PlatformPriceBookVersion).versionNo }}</strong></div></template>
@@ -386,7 +388,7 @@ onMounted(() => {
</section>
</ListPageLayout>
<AppDialog
<AppDialog class="admin-density-dialog"
v-model="uploadOpen"
title="上传船期价格表"
width="min(560px, calc(100vw - 28px))"
@@ -416,25 +418,23 @@ onMounted(() => {
<style scoped>
.price-book-page { min-width: 0; }
.table-actions { display: flex; min-height: 32px; align-items: center; gap: 8px; }
.table-actions :deep(.el-button + .el-button) { margin-left: 0; }
.version-cell { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.version-cell strong { color: var(--cc-text); }
.version-cell span, .metric-cell span { color: var(--cc-muted); font-size: 11px; }
.metric-cell, .issue-counts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.metric-cell strong { color: var(--cc-text); font-size: 14px; }
.issue-counts { color: var(--cc-muted); font-size: 12px; }
.version-cell span, .metric-cell span { color: var(--cc-muted); font-size: var(--admin-font-caption); }
.metric-cell, .issue-counts { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--admin-space-1) var(--admin-space-3); }
.metric-cell strong { color: var(--cc-text); font-size: var(--admin-font-body); }
.issue-counts { color: var(--cc-muted); font-size: var(--admin-font-caption); }
.issue-counts .is-blocking, .is-danger { color: var(--el-color-danger); font-weight: 700; }
.upload-content { display: grid; gap: 18px; }
.upload-scope-field { display: grid; gap: 6px; color: var(--cc-muted); font-size: 12px; }
.upload-content { display: grid; gap: var(--admin-space-6); }
.upload-scope-field { display: grid; gap: var(--admin-space-2); color: var(--cc-muted); font-size: var(--admin-font-caption); }
.upload-scope-field :deep(.el-select) { width: 100%; }
.visually-hidden-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
.upload-file-control { display: flex; align-items: center; gap: 14px; }
.upload-file-name { display: grid; min-width: 0; gap: 3px; color: var(--cc-text); font-size: 13px; }
.upload-file-control { display: flex; align-items: center; gap: var(--admin-space-5); }
.upload-file-name { display: grid; min-width: 0; gap: 3px; color: var(--cc-text); font-size: var(--admin-font-body); }
.upload-file-name strong { overflow-wrap: anywhere; }
.upload-file-name span { color: var(--cc-muted); font-size: 12px; }
.upload-file-name span { color: var(--cc-muted); font-size: var(--admin-font-caption); }
.upload-file-name.is-empty strong { color: var(--cc-muted); font-weight: 400; }
.upload-file-error { margin: -8px 0 0; color: var(--el-color-danger); font-size: 12px; }
.upload-file-error { margin: calc(-1 * var(--admin-space-3)) 0 0; color: var(--el-color-danger); font-size: var(--admin-font-caption); }
@media (max-width: 720px) {
.table-actions :deep(.el-button) { min-height: 40px; }
.upload-file-control { align-items: stretch; flex-direction: column; }
src/modules/fee-items/pages/FeeItemsView.test.ts
+7 -10
View File
@@ -100,17 +100,14 @@ describe('FeeItemsView public master data and access', () => {
})
it('keeps all three row actions visible without a premature more menu', () => {
expect(source).toContain('size="small" plain type="primary"')
expect(source).toContain('size="small"\n plain\n :type=')
expect(source).toContain('size="small" plain type="danger"')
expect(source).toContain('<Pencil :size="15" />编辑')
expect(source).toContain('<Power :size="15" />')
expect(source).toContain('<Trash2 :size="15" />删除')
expect(source).not.toContain('MoreHorizontal')
expect(source).not.toContain("access.can('firstleg:fee-item:edit')\" link")
expect(source).not.toContain("access.can('firstleg:fee-item:delete')\" link")
const actions = source.slice(source.indexOf('<template #actions='), source.indexOf('</template>', source.indexOf('<template #actions=')))
expect(actions.match(/class="density-action"/g)).toHaveLength(3)
expect(actions).toContain('>编辑</el-button>')
expect(actions).toContain('>删除</el-button>')
expect(actions).toContain('data-tone="danger"')
expect(actions).toContain(':data-tone=')
expect(actions).not.toMatch(/<(?:el-dropdown|Pencil|Power|Eye|Trash2|Download|CircleX)\b/)
})
it('keeps the prototype table treatment and mobile form fallback without inventing a pricing mode', () => {
expect(source).toContain(':page-sizes="[20, 50, 100]"\n border\n stripe')
expect(source).toContain('@media (max-width: 720px)')
src/modules/fee-items/pages/FeeItemsView.vue
+22 -21
View File
@@ -1,7 +1,8 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { Pencil, Plus, Power, Save, Trash2 } from '@lucide/vue'
import { Plus, Save } from '@lucide/vue'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import { useUnsavedWorkRegistration } from '@/core/unsaved-work/useUnsavedWorkRegistration'
import {
@@ -335,7 +336,7 @@ onMounted(() => {
</script>
<template>
<AdminPage as="div" class="fee-items-page" spacing="normal">
<AdminPage as="div" class="fee-items-page admin-density" spacing="normal">
<el-result v-if="!canView" icon="warning" title="无权查看费用项目" sub-title="请联系管理员开通费用项目查看权限" />
<ListPageLayout v-else aria-label="费用项目管理">
@@ -387,18 +388,18 @@ onMounted(() => {
><Plus :size="16" />新增费用项目</el-button>
</template>
<template #actions="{ row }">
<div v-if="access.can('firstleg:fee-item:edit') || access.can('firstleg:fee-item:delete')" class="table-actions">
<el-button v-if="access.can('firstleg:fee-item:edit')" size="small" plain type="primary" :disabled="loading || editorLoading" @click="openEdit(row as PlatformFeeItemResource)"><Pencil :size="15" />编辑</el-button>
<el-button
<div v-if="access.can('firstleg:fee-item:edit') || access.can('firstleg:fee-item:delete')" class="table-actions density-actions">
<el-button data-tone="neutral" class="density-action" v-if="access.can('firstleg:fee-item:edit')" size="small" :disabled="loading || editorLoading" @click="openEdit(row as PlatformFeeItemResource)">编辑</el-button>
<el-button class="density-action"
v-if="access.can('firstleg:fee-item:edit')"
size="small"
plain
:type="(row as PlatformFeeItemResource).status === 'ACTIVE' ? 'warning' : 'success'"
:data-tone="(row as PlatformFeeItemResource).status === 'ACTIVE' ? 'danger' : 'success'"
:loading="statusLoadingIds.has(String((row as PlatformFeeItemResource).id))"
:disabled="loading"
@click="requestStatusChange(row as PlatformFeeItemResource)"
><Power :size="15" />{{ (row as PlatformFeeItemResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
<el-button v-if="access.can('firstleg:fee-item:delete')" size="small" plain type="danger" :disabled="loading" @click="requestDelete(row as PlatformFeeItemResource)"><Trash2 :size="15" />删除</el-button>
>{{ (row as PlatformFeeItemResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
<el-button data-tone="danger" class="density-action" v-if="access.can('firstleg:fee-item:delete')" size="small" :disabled="loading" @click="requestDelete(row as PlatformFeeItemResource)">删除</el-button>
</div>
<span v-else class="muted-value">仅查看</span>
</template>
@@ -420,15 +421,15 @@ onMounted(() => {
</section>
</ListPageLayout>
<AppDrawer
<AppDrawer class="admin-density admin-density-drawer"
v-model="editorOpen"
:title="editorTitle"
size="min(620px, 94vw)"
:loading="editorLoading"
:confirm-loading="saving"
>
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" :disabled="saving || editorLoading">
<FormSection title="基本信息" description="费用项目为平台公共主数据，不按客户单独维护。">
<el-form class="density-form" ref="formRef" :model="form" :rules="rules" label-position="top" :disabled="saving || editorLoading">
<FormSection class="density-form-section" title="基本信息" description="费用项目为平台公共主数据，不按客户单独维护。">
<div class="form-grid two-cols">
<el-form-item label="费用名称" prop="feeTypeName" required><el-input v-model="form.feeTypeName" maxlength="128" placeholder="请输入费用名称" /></el-form-item>
<el-form-item label="费用分类" prop="category" required><el-input v-model="form.category" maxlength="64" placeholder="例如 仓储成本" /></el-form-item>
@@ -437,7 +438,7 @@ onMounted(() => {
<el-segmented v-model="form.tradeScope" :options="[{ label: '国内', value: 'DOMESTIC' }, { label: '国际', value: 'INTERNATIONAL' }]" />
</el-form-item>
</FormSection>
<FormSection title="费用方向" description="选择费用在提货和仓库环节的应收、应付属性。">
<FormSection class="density-form-section" title="费用方向" description="选择费用在提货和仓库环节的应收、应付属性。">
<div class="direction-grid">
<fieldset><legend>提货环节</legend><el-checkbox v-model="form.pickupPayable">应付</el-checkbox><el-checkbox v-model="form.pickupReceivable">应收</el-checkbox></fieldset>
<fieldset><legend>仓库环节</legend><el-checkbox v-model="form.warehousePayable">应付</el-checkbox><el-checkbox v-model="form.warehouseReceivable">应收</el-checkbox></fieldset>
@@ -449,7 +450,7 @@ onMounted(() => {
</el-select>
</el-form-item>
</FormSection>
<FormSection title="适用说明" :bordered="false">
<FormSection class="density-form-section" title="适用说明" :bordered="false">
<el-form-item label="说明"><el-input v-model="form.description" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入适用场景或核算说明" /></el-form-item>
</FormSection>
</el-form>
@@ -461,7 +462,7 @@ onMounted(() => {
</template>
</AppDrawer>
<AppDialog
<AppDialog class="admin-density-dialog"
v-model="statusOpen"
:title="statusTarget?.status === 'ACTIVE' ? '停用费用项目' : '启用费用项目'"
:confirm-text="statusTarget?.status === 'ACTIVE' ? '确认停用' : '确认启用'"
@@ -475,7 +476,7 @@ onMounted(() => {
</p>
</AppDialog>
<AppDialog
<AppDialog class="admin-density-dialog"
v-model="deleteOpen"
title="删除费用项目"
confirm-text="确认删除"
@@ -490,13 +491,13 @@ onMounted(() => {
<style scoped>
.fee-items-page { min-width: 0; }
.fee-item-name { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.fee-item-name { display: flex; min-width: 0; flex-direction: column; gap: var(--admin-space-1); }
.fee-item-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fee-item-name small { color: var(--cc-muted); font-size: 11px; }
.fee-item-name small { color: var(--cc-muted); font-size: var(--admin-font-caption); }
.description-cell { display: -webkit-box; overflow: hidden; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.direction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.direction-grid fieldset { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--el-border-color); border-radius: 6px; }
.direction-grid legend { padding: 0 5px; color: var(--el-text-color-secondary); font-size: 13px; }
.direction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--admin-space-5); margin-bottom: var(--admin-space-5); }
.direction-grid fieldset { min-width: 0; margin: 0; padding: var(--admin-space-5); border: 1px solid var(--el-border-color); border-radius: var(--admin-radius); }
.direction-grid legend { padding: 0 5px; color: var(--el-text-color-secondary); font-size: var(--admin-font-body); }
.delete-message { margin: 0; color: var(--el-text-color-regular); line-height: 1.7; overflow-wrap: anywhere; }
@media (max-width: 720px) {
.direction-grid, .form-grid.two-cols { grid-template-columns: 1fr; }
src/modules/finance/financeDensity.css
+17
View File
@@ -0,0 +1,17 @@
/* Finance owns document layout; controls and visual primitives stay shared. */
.admin-density .detail-page-layout.finance-density-detail { gap: 0; }
.admin-density .finance-density-detail > .detail-page-layout__header,
.admin-density .finance-density-detail > .detail-page-layout__summary { padding: 0; }
.admin-density .finance-density-detail > .detail-page-layout__content,
.admin-density .finance-density-detail > .detail-page-layout__footer { min-width: 0; padding: var(--admin-space-5); }
.admin-density .finance-detail-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--admin-space-3); }
.admin-density .finance-detail-context { min-width: 0; color: var(--cc-muted); font-size: var(--admin-font-caption); overflow-wrap: anywhere; }
.admin-density .statement-summary-grid .statement-summary-item--remark { grid-column: span 2; }
.admin-density .settlement-summary.density-detail-overview { padding: 0; border: 0; }
.admin-density .statement-summary-section { padding: var(--admin-space-5); }
.admin-density .account-metrics .is-negative,
.admin-density .density-detail-overview .is-danger,
.admin-density-dialog .partial-summary .is-danger { color: var(--el-color-danger); }
.admin-density .density-detail-overview .is-success,
.admin-density-dialog .partial-summary .is-success { color: var(--el-color-success); }
.admin-density-dialog .partial-summary { margin-bottom: var(--admin-space-5); }
src/modules/finance/pages/FinanceCustomerAccountsView.test.ts
+35 -18
View File
@@ -65,7 +65,7 @@ describe('FinanceCustomerAccountsView delivery', () => {
expect(page).toContain('v-else-if="!detailOpen"')
expect(page).toContain('返回客户账户')
expect(page).toContain('<DetailPageLayout')
expect(page).toContain('class="account-metrics"')
expect(page).toContain('class="density-detail-overview account-metrics"')
for (const metric of ['实际余额', '冻结金额', '总可用余额', '授信额度', '已用授信', '可用授信']) expect(page).toContain(metric)
expect(page).toContain('class="ledger-query"')
expect(page).toContain('@search="ledgerPage = 1; void loadLedger($event)"')
@@ -82,14 +82,14 @@ describe('FinanceCustomerAccountsView delivery', () => {
})
it('keeps term editing aligned with the account summary and nearby actions', () => {
for (const marker of ['class="term-section"', 'class="term-editor"', '账期天数', '#footer', '保存账期']) expect(page).toContain(marker)
expect(page).toContain('grid-template-columns: repeat(3, minmax(0, 1fr))')
for (const marker of ['class="term-section density-form-section"', 'class="term-editor"', '账期天数', '#footer', '保存账期']) expect(page).toContain(marker)
expect(page).toContain('density-detail-overview account-metrics')
for (const column of ['实际余额(CNY)', '冻结金额(CNY)', '总可用余额(CNY)', '授信额度(CNY)', '已用授信(CNY)', '待审核充值']) expect(page).toContain(column)
expect(page).toContain('grid-template-columns: 120px minmax(0, 220px)')
expect(page).toContain('justify-content: start')
expect(page).toContain('class="surface-panel finance-account-detail__surface"')
expect(page).toContain('min-height: 64px')
expect(page).toContain('padding: 0 0 12px')
expect(page).toContain('class="density-detail-header"')
expect(page).toContain('padding: var(--admin-space-4) 0')
expect(page).toContain('class="detail-table-scroll"')
expect(page).toContain('class="ledger-identifier"')
expect(page).toContain('class="ledger-document"')
@@ -100,21 +100,21 @@ describe('FinanceCustomerAccountsView delivery', () => {
it('keeps account detail and term editing readable across the 1920 workspace', () => {
expect(page).toContain('width: min(100%, 1920px)')
expect(page).toContain('@media (min-width: 1920px)')
expect(page).toContain('.finance-account-detail__layout :deep(.detail-page-layout__content)')
expect(page).toContain('padding: 0 14px 10px')
expect(page).toContain('finance-density-detail')
expect(page).toContain('../financeDensity.css')
expect(page).not.toContain('max-width: 520px')
})
it('keeps high-frequency account actions visible and groups the remaining actions', () => {
expect(page).toContain("{ key: 'actions', label: '操作', width: 290, fixed: 'left', slotName: 'actions' }")
expect(page).toContain('<el-button size="small" plain type="primary" @click="openAccount(row, false)"><Eye :size="15" />详情</el-button>')
expect(page).toContain('@click="openAccount(row, false)">详情</el-button>')
expect(page).toContain("openAdjustment(row as FinanceAccountSummary, 'RECHARGE')")
expect(page).toContain("openAdjustment(row as FinanceAccountSummary, 'DEDUCTION')")
expect(page).toContain('aria-label="更多客户账户操作"')
expect(page).toContain('<el-dropdown-item v-if="canAdjust" command="credit"><CreditCard :size="15" />授信</el-dropdown-item>')
expect(page).toContain('<el-dropdown-item v-if="canUpdateTerms" command="terms" :divided="canAdjust"><Pencil :size="15" />账期</el-dropdown-item>')
expect(page).toContain('<el-dropdown-item v-if="canAdjust" command="credit">授信</el-dropdown-item>')
expect(page).toContain('<el-dropdown-item v-if="canUpdateTerms" command="terms" :divided="canAdjust">账期</el-dropdown-item>')
expect(page).not.toContain('<el-button link type="primary" @click="openAccount(row, false)">')
expect(page).toContain('.row-actions {')
expect(page).toContain('class="row-actions density-actions"')
expect(page).toContain('white-space: nowrap')
})
@@ -124,6 +124,23 @@ describe('FinanceCustomerAccountsView delivery', () => {
expect(page).not.toContain('adjustmentAccount?.actualBalance -')
})
it.each([
[[], ['详情'], false],
[['platform:finance:customer-terms:view', 'platform:finance:customer-terms:update'], ['详情', '账期'], false],
[['platform:finance:customer-account:adjust'], ['详情', '充值', '扣款', ''], true],
])('folds account operations only when more than three are available: %j', async (extraPermissions, labels, overflow) => {
const wrapper = await mountAccountsView(['platform:finance:customer-account:list', ...extraPermissions])
const actions = wrapper.get('.el-table__body-wrapper .density-actions')
expect(actions.findAll('button').map(button => button.text().trim())).toEqual(labels)
expect(actions.find('.el-dropdown').exists()).toBe(overflow)
if (overflow) {
const trigger = actions.get('button[aria-label="更多客户账户操作"]')
expect(trigger.text()).toBe('')
expect(trigger.find('svg').exists()).toBe(true)
}
wrapper.unmount()
})
it('selects an active customer by name from master data', () => {
expect(page).toContain("key: 'customerId', type: 'select'")
expect(page).toContain("label: '客户名称'")
@@ -176,12 +193,12 @@ describe('FinanceCustomerAccountsView delivery', () => {
expect(wrapper.text()).toContain('13800000000')
const metrics = wrapper.find('.account-metrics')
expect(metrics.findAll('.account-metric')).toHaveLength(6)
expect(metrics.text()).toContain('实际余额¥126580.50CNY')
expect(metrics.text()).toContain('冻结金额¥8500.00CNY')
expect(metrics.text()).toContain('总可用余额¥138080.50CNY')
expect(metrics.text()).toContain('授信额度¥20000.002028-09-10 到期')
expect(metrics.text()).toContain('已用授信¥0.00CNY')
expect(metrics.text()).toContain('可用授信¥20000.00CNY')
expect(metrics.text()).toContain('实际余额¥126580.50 CNY')
expect(metrics.text()).toContain('冻结金额¥8500.00 CNY')
expect(metrics.text()).toContain('总可用余额¥138080.50 CNY')
expect(metrics.text()).toContain('授信额度¥20000.00 2028-09-10 到期')
expect(metrics.text()).toContain('已用授信¥0.00 CNY')
expect(metrics.text()).toContain('可用授信¥20000.00 CNY')
for (const auxiliary of ['待开账金额', '本期已收', '总成本', '已付成本', '已收客户款', '客户线下支付']) expect(metrics.text()).not.toContain(auxiliary)
expect(listFinanceAccounts).toHaveBeenCalledWith({ page: 1, size: 1, customerId: '10001' })
expect(listFinanceAccountLedger).toHaveBeenCalledWith('10001', expect.objectContaining({ page: 1, size: 20 }))
@@ -294,7 +311,7 @@ describe('FinanceCustomerAccountsView delivery', () => {
exportType: 'FINANCE_CUSTOMER_ACCOUNT_LEDGER', format: 'XLSX', taskName: '客户账户流水',
parameters: { customerId: '10001', businessType: 'RECEIPT', startDate: '2026-08-01', endDate: '2026-08-31' },
})
expect(showExportTaskCreatedDialog).toHaveBeenLastCalledWith({ taskName: '客户账户流水', taskNo: 'EXP-2' })
expect(showExportTaskCreatedDialog).toHaveBeenLastCalledWith({ taskName: '客户账户流水', taskNo: 'EXP-2', dense: true })
detailWrapper.unmount()
})
src/modules/finance/pages/FinanceCustomerAccountsView.vue
+33 -198
View File
@@ -1,7 +1,9 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import '../financeDensity.css'
import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, CreditCard, Download, Eye, MinusCircle, MoreHorizontal, Pencil, PlusCircle, Save } from '@lucide/vue'
import { ArrowLeft, CreditCard, Download, MinusCircle, MoreHorizontal, PlusCircle, Save } from '@lucide/vue'
import { ElMessage } from 'element-plus'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import { createPlatformExportTask } from '@/modules/downloads'
@@ -356,7 +358,7 @@ function customerField(value: unknown) { return String(value || '').trim() || '
function displayDocumentNo(value: unknown) { return String(value || '').trim() || '关联单据缺失' }
function displayLedgerId(value: unknown) { return String(value || '').trim() || '流水号缺失' }
async function finishExport(task: Awaited<ReturnType<typeof createPlatformExportTask>>) {
const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo })
const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo, dense: true })
if (openDownloadCenter) await router.push({ name: 'download-center' })
}
async function exportAccounts() {
@@ -415,7 +417,7 @@ onBeforeUnmount(clearVoucherPreview)
</script>
<template>
<AdminPage as="div" class="finance-account-page" spacing="normal">
<AdminPage as="div" class="finance-account-page admin-density" spacing="normal">
<el-result v-if="!canView" icon="warning" title="无权访问客户账户" sub-title="请联系管理员开通客户账户查看权限" />
<ListPageLayout v-else-if="!detailOpen" aria-label="客户账户">
<template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="客户账户筛选" :fields="queryFields" preference-key="finance-customer-accounts-query" @search="search" /></template>
@@ -423,7 +425,7 @@ onBeforeUnmount(clearVoucherPreview)
<section v-if="!stateError" class="surface-panel table-panel">
<DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="finance-customer-accounts-table" aria-label="客户账户列表" row-key="customerId" empty-text="暂无客户账户" @update:page="load()" @update:page-size="page = 1; load()">
<template #toolbar-actions><el-button v-if="canExport" :loading="accountExportBusy" :disabled="loading || accountExportBusy" @click="exportAccounts"><Download :size="16" />导出Excel</el-button></template>
<template #actions="{ row }"><div class="row-actions"><el-button size="small" plain type="primary" @click="openAccount(row, false)"><Eye :size="15" />详情</el-button><el-button v-if="canAdjust" size="small" plain type="primary" @click="openAdjustment(row as FinanceAccountSummary, 'RECHARGE')"><PlusCircle :size="15" />充值</el-button><el-button v-if="canAdjust" size="small" plain type="danger" @click="openAdjustment(row as FinanceAccountSummary, 'DEDUCTION')"><MinusCircle :size="15" />扣款</el-button><el-dropdown v-if="canAdjust || canUpdateTerms" trigger="click" @command="handleAccountMore(String($event), row as FinanceAccountSummary)"><el-button size="small" plain aria-label="更多客户账户操作" title="更多客户账户操作"><MoreHorizontal :size="15" />更多</el-button><template #dropdown><el-dropdown-menu><el-dropdown-item v-if="canAdjust" command="credit"><CreditCard :size="15" />授信</el-dropdown-item><el-dropdown-item v-if="canUpdateTerms" command="terms" :divided="canAdjust"><Pencil :size="15" />账期</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></template>
<template #actions="{ row }"><div class="row-actions density-actions"><el-button data-tone="neutral" class="density-action" size="small" @click="openAccount(row, false)">详情</el-button><el-button data-tone="neutral" class="density-action" v-if="canAdjust" size="small" @click="openAdjustment(row as FinanceAccountSummary, 'RECHARGE')">充值</el-button><el-button data-tone="danger" class="density-action" v-if="canAdjust" size="small" @click="openAdjustment(row as FinanceAccountSummary, 'DEDUCTION')">扣款</el-button><el-button class="density-action" data-tone="neutral" v-if="!canAdjust && canUpdateTerms" size="small" @click="handleAccountMore('terms', row as FinanceAccountSummary)">账期</el-button><el-dropdown v-if="canAdjust" trigger="click" @command="handleAccountMore(String($event), row as FinanceAccountSummary)"><el-button data-tone="neutral" class="density-action" size="small" aria-label="更多客户账户操作" title="更多客户账户操作"><MoreHorizontal aria-hidden="true" :size="15" /></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item v-if="canAdjust" command="credit">授信</el-dropdown-item><el-dropdown-item v-if="canUpdateTerms" command="terms" :divided="canAdjust">账期</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></template>
<template #customerName="{ row }">{{ customerName(row.customerId, row.customerName) }}</template>
<template #customerCode="{ row }">{{ customerField(row.customerCode) }}</template><template #contactName="{ row }">{{ customerField(row.contactName) }}</template><template #contactPhone="{ row }">{{ customerField(row.contactPhone) }}</template>
<template #lastChangedAt="{ row }">{{ formatLastChangedAt(row.lastChangedAt) }}</template>
@@ -434,47 +436,47 @@ onBeforeUnmount(clearVoucherPreview)
</DataTable>
</section>
</ListPageLayout>
<AdminPage v-else as="div" class="finance-account-detail" spacing="normal">
<AdminPage v-else as="div" class="finance-account-detail admin-density" spacing="normal">
<section class="surface-panel finance-account-detail__surface">
<DetailPageLayout class="finance-account-detail__layout" :aria-label="editing ? '维护客户账期' : '客户账户详情'">
<template #header><div class="detail-heading"><div class="detail-title"><h2>{{ editing ? '维护客户账期' : '客户账户详情' }}</h2><p v-if="selected">{{ customerName(selected.customerId, selected.customerName) }} · CNY 资金账户</p></div><div v-if="selected && !editing" class="detail-actions"><el-button v-if="canAdjust" type="primary" plain @click="openAdjustment(selected, 'RECHARGE')"><PlusCircle :size="16" />手工充值</el-button><el-button v-if="canAdjust" type="danger" plain @click="openAdjustment(selected, 'DEDUCTION')"><MinusCircle :size="16" />手工扣款</el-button><el-button v-if="canAdjust" plain @click="openCreditLimit(selected)"><CreditCard :size="16" />设置授信</el-button></div><el-button class="detail-back" @click="closeDetail"><ArrowLeft :size="16" />返回客户账户</el-button></div></template>
<template v-if="selected && !ledgerError" #summary><section class="account-metrics" aria-label="客户资金账户余额"><div class="account-metric is-actual"><span>实际余额</span><strong :class="{ 'is-negative': Number(selected.actualBalance) < 0 }">{{ money(selected.actualBalance) }}</strong><small>CNY</small></div><div class="account-metric is-frozen"><span>冻结金额</span><strong>{{ money(selected.frozenBalance) }}</strong><small>CNY</small></div><div class="account-metric is-available"><span>总可用余额</span><strong>{{ money(selected.availableBalance) }}</strong><small>CNY</small></div><div class="account-metric"><span>授信额度</span><strong>{{ money(selected.creditLimit) }}</strong><small>{{ creditExpiryLabel(selected) }}</small></div><div class="account-metric is-frozen"><span>已用授信</span><strong>{{ money(selected.creditUsed) }}</strong><small>CNY</small></div><div class="account-metric"><span>可用授信</span><strong>{{ money(selected.availableCredit) }}</strong><small>CNY</small></div></section></template>
<DetailPageLayout class="finance-account-detail__layout finance-density-detail" :aria-label="editing ? '维护客户账期' : '客户账户详情'">
<template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="closeDetail"><ArrowLeft :size="16" />返回客户账户</el-button><h1 class="density-detail-title">{{ selected ? customerName(selected.customerId, selected.customerName) : '客户账户' }}</h1><span class="finance-detail-context">{{ editing ? '维护客户账期' : 'CNY 资金账户' }}</span></div><div v-if="selected && !editing" class="finance-detail-actions"><el-button v-if="canAdjust" type="primary" plain @click="openAdjustment(selected, 'RECHARGE')"><PlusCircle :size="16" />手工充值</el-button><el-button v-if="canAdjust" type="danger" plain @click="openAdjustment(selected, 'DEDUCTION')"><MinusCircle :size="16" />手工扣款</el-button><el-button v-if="canAdjust" plain @click="openCreditLimit(selected)"><CreditCard :size="16" />设置授信</el-button></div></div></template>
<template v-if="selected && !ledgerError" #summary><dl class="density-detail-overview account-metrics" aria-label="客户资金账户余额"><div class="account-metric is-actual"><dt>实际余额</dt><dd :class="{ 'is-negative': Number(selected.actualBalance) < 0 }">{{ money(selected.actualBalance) }} <small>CNY</small></dd></div><div class="account-metric is-frozen"><dt>冻结金额</dt><dd>{{ money(selected.frozenBalance) }} <small>CNY</small></dd></div><div class="account-metric is-available"><dt>总可用余额</dt><dd>{{ money(selected.availableBalance) }} <small>CNY</small></dd></div><div class="account-metric"><dt>授信额度</dt><dd>{{ money(selected.creditLimit) }} <small>{{ creditExpiryLabel(selected) }}</small></dd></div><div class="account-metric is-frozen"><dt>已用授信</dt><dd>{{ money(selected.creditUsed) }} <small>CNY</small></dd></div><div class="account-metric"><dt>可用授信</dt><dd>{{ money(selected.availableCredit) }} <small>CNY</small></dd></div></dl></template>
<LoadErrorState v-if="ledgerError" :title="editing ? '客户账期加载失败' : '账户流水加载失败'" :message="ledgerError.message" :loading="ledgerLoading" @retry="retryDrawer"><template #details><ApiErrorMeta :details="ledgerError" /></template></LoadErrorState>
<template v-else-if="selected">
<FormSection class="customer-profile-section" title="客户信息" :bordered="false"><el-descriptions :column="3"><el-descriptions-item label="客户编号">{{ customerField(selected.customerCode) }}</el-descriptions-item><el-descriptions-item label="联系人">{{ customerField(selected.contactName) }}</el-descriptions-item><el-descriptions-item label="联系电话">{{ customerField(selected.contactPhone) }}</el-descriptions-item></el-descriptions></FormSection>
<FormSection v-if="!editing" class="recharge-section" title="充值申请" :bordered="false">
<FormSection class="customer-profile-section density-form-section" title="客户信息" :bordered="false"><el-descriptions border class="density-descriptions" :column="3"><el-descriptions-item label="客户编号">{{ customerField(selected.customerCode) }}</el-descriptions-item><el-descriptions-item label="联系人">{{ customerField(selected.contactName) }}</el-descriptions-item><el-descriptions-item label="联系电话">{{ customerField(selected.contactPhone) }}</el-descriptions-item></el-descriptions></FormSection>
<FormSection v-if="!editing" class="recharge-section density-form-section" title="充值申请" :bordered="false">
<LoadErrorState v-if="rechargeError" title="充值申请加载失败" :message="rechargeError.message" :loading="rechargeLoading" @retry="loadRechargeRequests" />
<div v-else class="detail-table-scroll"><DataTable class="recharge-table" :data="sortedRechargeRequests" :columns="rechargeColumns" :loading="rechargeLoading" row-key="requestId" empty-text="暂无充值申请" column-settings-mode="hide">
<template #actions="{ row }"><el-button v-if="canReviewRecharge && row.status === 'PENDING'" size="small" type="primary" plain @click="openReview(row as FinanceRechargeRequest)">审核</el-button></template>
<template #actions="{ row }"><div class="density-actions"><el-button data-tone="warning" class="density-action" v-if="canReviewRecharge && row.status === 'PENDING'" size="small" @click="openReview(row as FinanceRechargeRequest)">审核</el-button></div></template>
<template #createdAt="{ row }">{{ formatDateTime(row.createdAt) }}</template><template #reviewedAt="{ row }">{{ row.reviewedAt ? formatDateTime(row.reviewedAt) : '—' }}</template>
<template #amount="{ row }"><strong class="balance-value is-actual">{{ money(row.amount) }}</strong></template><template #paymentMethod="{ row }">{{ paymentMethodLabel(row.paymentMethod) }}</template>
<template #voucherFileName="{ row }"><el-button v-if="row.voucherFileId" link type="primary" @click="previewVoucher(row as FinanceRechargeRequest)">{{ row.voucherFileName || '预览付款凭证' }}</el-button><span v-else>—</span></template>
<template #status="{ row }"><el-tag :type="row.status === 'PENDING' ? 'warning' : row.status === 'APPROVED' ? 'success' : 'danger'">{{ row.status === 'PENDING' ? '待审核' : row.status === 'APPROVED' ? '已通过' : '已驳回' }}</el-tag></template>
</DataTable></div>
</FormSection>
<FormSection v-if="!editing" class="ledger-section" title="账户流水" :bordered="false">
<FormSection v-if="!editing" class="ledger-section density-form-section" title="账户流水" :bordered="false">
<QueryToolbar v-model="ledgerFilters" class="ledger-query" :fields="ledgerQueryFields" ariaLabel="账户流水筛选" preference-key="finance-account-ledger-query" @search="ledgerPage = 1; void loadLedger($event)" />
<div class="detail-table-scroll"><DataTable v-model:page="ledgerPage" v-model:page-size="ledgerPageSize" class="ledger-table" :data="ledger" :columns="ledgerColumns" :loading="ledgerLoading" :total="ledgerTotal" row-key="ledgerId" empty-text="暂无账户流水" @update:page="loadLedger()" @update:page-size="ledgerPage = 1; loadLedger()"><template #toolbar-actions><el-button v-if="canExport" :loading="ledgerExportBusy" :disabled="ledgerLoading || ledgerExportBusy" @click="exportLedger"><Download :size="16" />导出流水</el-button></template><template #pagination-left>共 {{ ledgerTotal }} 条</template><template #ledgerId="{ row }"><span class="ledger-identifier" :title="displayLedgerId(row.businessNo || row.ledgerId)">{{ displayLedgerId(row.businessNo || row.ledgerId) }}</span></template><template #occurredAt="{ row }">{{ row.occurredDate || formatDateTime(row.createdAt || row.occurredAt) }}</template><template #businessType="{ row }">{{ walletBusinessType(row.changeType || row.businessType) }}</template><template #documentNo="{ row }"><span class="ledger-document" :title="displayDocumentNo(row.referenceNo || row.sourceNo || row.documentNo)">{{ displayDocumentNo(row.referenceNo || row.sourceNo || row.documentNo) }}</span></template><template #amount="{ row }">{{ money(row.amount) }}</template><template #ledgerPaymentMethod="{ row }">{{ row.paymentMethod ? paymentMethodLabel(row.paymentMethod) : '—' }}</template><template #actualBalanceAfter="{ row }">{{ money(row.actualBalanceAfter) }}</template><template #frozenBalanceAfter="{ row }">{{ money(row.frozenBalanceAfter) }}</template><template #availableBalanceAfter="{ row }">{{ money(row.availableBalanceAfter) }}</template><template #creditUsedAfter="{ row }">{{ money(row.creditUsedAfter) }}</template><template #operatorName="{ row }">{{ displayOperator(row.operatorName) }}</template></DataTable></div>
</FormSection>
<FormSection v-else class="term-section" title="账期设置" :bordered="false"><div class="term-editor"><span class="term-label">账期天数</span><div class="term-control"><el-input-number v-model="creditDays" :min="0" :max="3650" :step="1" placeholder="请输入账期天数" /><span class="term-unit">天</span></div></div></FormSection>
<FormSection v-else class="term-section density-form-section" title="账期设置" :bordered="false"><div class="term-editor"><span class="term-label">账期天数</span><div class="term-control"><el-input-number v-model="creditDays" :min="0" :max="3650" :step="1" placeholder="请输入账期天数" /><span class="term-unit">天</span></div></div></FormSection>
</template>
<template v-if="editing && selected && !ledgerError" #footer><div class="detail-footer"><el-button @click="closeDetail">关闭</el-button><el-button v-if="canUpdateTerms" type="primary" :loading="saving" @click="saveTerms"><Save :size="16" />保存账期</el-button></div></template>
</DetailPageLayout>
</section>
</AdminPage>
<AppDialog v-model="adjustmentOpen" :title="adjustmentForm.type === 'RECHARGE' ? '手工充值' : '手工扣款'" width="min(720px, calc(100vw - 28px))" :confirm-text="adjustmentForm.type === 'RECHARGE' ? '确认充值' : '确认扣款'" :confirm-type="adjustmentForm.type === 'RECHARGE' ? 'primary' : 'danger'" :confirm-loading="adjustmentSaving" @confirm="submitAdjustment">
<AppDialog class="admin-density-dialog" v-model="adjustmentOpen" :title="adjustmentForm.type === 'RECHARGE' ? '手工充值' : '手工扣款'" width="min(720px, calc(100vw - 28px))" :confirm-text="adjustmentForm.type === 'RECHARGE' ? '确认充值' : '确认扣款'" :confirm-type="adjustmentForm.type === 'RECHARGE' ? 'primary' : 'danger'" :confirm-loading="adjustmentSaving" @confirm="submitAdjustment">
<el-alert :title="adjustmentForm.type === 'RECHARGE' ? '充值会先归还已用授信，剩余金额计入实际余额。' : '扣款先使用未冻结的实际余额，不足部分再使用可用授信。'" :type="adjustmentForm.type === 'RECHARGE' ? 'info' : 'warning'" :closable="false" />
<el-form label-position="top" class="wallet-form"><div class="wallet-form__grid"><el-form-item label="客户名称"><el-input :model-value="adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : ''" readonly /></el-form-item><el-form-item label="当前实际余额"><el-input :model-value="money(adjustmentAccount?.actualBalance)" readonly /></el-form-item><el-form-item v-if="adjustmentForm.type === 'DEDUCTION'" label="当前可用余额"><el-input :model-value="money(adjustmentAccount?.availableBalance)" readonly /></el-form-item><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值金额' : '扣款金额'" required><el-input v-model="adjustmentForm.amount" inputmode="decimal" placeholder="请输入大于 0 的金额" /></el-form-item><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '到账日期' : '扣款日期'" required><el-date-picker v-model="adjustmentForm.occurredDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值方式' : '扣款方式'" required><el-select v-model="adjustmentForm.paymentMethod"><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item><el-form-item label="关联单据"><el-input v-model="adjustmentForm.referenceNo" maxlength="128" placeholder="请输入关联业务单号（选填）" /></el-form-item></div><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值备注' : '扣款备注'"><el-input v-model="adjustmentForm.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入备注（选填）" /></el-form-item></el-form>
<el-form label-position="top" class="wallet-form density-form"><div class="wallet-form__grid"><el-form-item label="客户名称"><el-input :model-value="adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : ''" readonly /></el-form-item><el-form-item label="当前实际余额"><el-input :model-value="money(adjustmentAccount?.actualBalance)" readonly /></el-form-item><el-form-item v-if="adjustmentForm.type === 'DEDUCTION'" label="当前可用余额"><el-input :model-value="money(adjustmentAccount?.availableBalance)" readonly /></el-form-item><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值金额' : '扣款金额'" required><el-input v-model="adjustmentForm.amount" inputmode="decimal" placeholder="请输入大于 0 的金额" /></el-form-item><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '到账日期' : '扣款日期'" required><el-date-picker v-model="adjustmentForm.occurredDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值方式' : '扣款方式'" required><el-select v-model="adjustmentForm.paymentMethod"><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item><el-form-item label="关联单据"><el-input v-model="adjustmentForm.referenceNo" maxlength="128" placeholder="请输入关联业务单号（选填）" /></el-form-item></div><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值备注' : '扣款备注'"><el-input v-model="adjustmentForm.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入备注（选填）" /></el-form-item></el-form>
</AppDialog>
<AppDialog v-model="creditLimitOpen" title="设置授信额度" width="min(560px, calc(100vw - 28px))" confirm-text="保存授信额度" :confirm-loading="creditLimitSaving" @confirm="submitCreditLimit">
<AppDialog class="admin-density-dialog" v-model="creditLimitOpen" title="设置授信额度" width="min(560px, calc(100vw - 28px))" confirm-text="保存授信额度" :confirm-loading="creditLimitSaving" @confirm="submitCreditLimit">
<el-alert title="授信到期日当天仍有效，次日授信失效；届时负数实际余额将阻止客户提交新订单。" type="warning" :closable="false" />
<el-form label-position="top" class="wallet-form"><el-form-item label="客户名称"><el-input :model-value="adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : ''" readonly /></el-form-item><el-form-item label="当前已用授信"><el-input :model-value="money(adjustmentAccount?.creditUsed)" readonly /></el-form-item><el-form-item label="授信额度" required><el-input v-model="creditLimitForm.amount" inputmode="decimal" placeholder="请输入大于或等于 0 的金额" /></el-form-item><el-form-item label="授信到期日" required><el-date-picker v-model="creditLimitForm.expiresOn" type="date" value-format="YYYY-MM-DD" :disabled-date="disableCreditExpiry" placeholder="请选择今天以后的日期" /></el-form-item><el-form-item label="调整说明"><el-input v-model="creditLimitForm.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请输入授信调整说明（选填）" /></el-form-item></el-form>
<el-form label-position="top" class="wallet-form density-form"><el-form-item label="客户名称"><el-input :model-value="adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : ''" readonly /></el-form-item><el-form-item label="当前已用授信"><el-input :model-value="money(adjustmentAccount?.creditUsed)" readonly /></el-form-item><el-form-item label="授信额度" required><el-input v-model="creditLimitForm.amount" inputmode="decimal" placeholder="请输入大于或等于 0 的金额" /></el-form-item><el-form-item label="授信到期日" required><el-date-picker v-model="creditLimitForm.expiresOn" type="date" value-format="YYYY-MM-DD" :disabled-date="disableCreditExpiry" placeholder="请选择今天以后的日期" /></el-form-item><el-form-item label="调整说明"><el-input v-model="creditLimitForm.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请输入授信调整说明（选填）" /></el-form-item></el-form>
</AppDialog>
<AppDialog v-model="reviewOpen" title="审核充值申请" width="min(620px, calc(100vw - 28px))" confirm-text="确认审核" :confirm-loading="reviewSaving" @confirm="submitReview">
<el-descriptions v-if="reviewRequest" :column="2" border><el-descriptions-item label="申请单号">{{ reviewRequest.requestNo }}</el-descriptions-item><el-descriptions-item label="充值金额">{{ money(reviewRequest.amount) }}</el-descriptions-item><el-descriptions-item label="付款方式">{{ paymentMethodLabel(reviewRequest.paymentMethod) }}</el-descriptions-item><el-descriptions-item label="付款凭证">{{ reviewRequest.voucherFileName || '—' }}</el-descriptions-item></el-descriptions>
<el-form label-position="top" class="review-form"><el-form-item label="审核结果" required><el-radio-group v-model="reviewForm.decision"><el-radio value="APPROVE">通过</el-radio><el-radio value="REJECT">驳回</el-radio></el-radio-group></el-form-item><el-form-item label="审核备注"><el-input v-model="reviewForm.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入审核备注（选填）" /></el-form-item></el-form>
<AppDialog class="admin-density-dialog" v-model="reviewOpen" title="审核充值申请" width="min(620px, calc(100vw - 28px))" confirm-text="确认审核" :confirm-loading="reviewSaving" @confirm="submitReview">
<el-descriptions class="density-descriptions" v-if="reviewRequest" :column="2" border><el-descriptions-item label="申请单号">{{ reviewRequest.requestNo }}</el-descriptions-item><el-descriptions-item label="充值金额">{{ money(reviewRequest.amount) }}</el-descriptions-item><el-descriptions-item label="付款方式">{{ paymentMethodLabel(reviewRequest.paymentMethod) }}</el-descriptions-item><el-descriptions-item label="付款凭证">{{ reviewRequest.voucherFileName || '—' }}</el-descriptions-item></el-descriptions>
<el-form label-position="top" class="review-form density-form"><el-form-item label="审核结果" required><el-radio-group v-model="reviewForm.decision"><el-radio value="APPROVE">通过</el-radio><el-radio value="REJECT">驳回</el-radio></el-radio-group></el-form-item><el-form-item label="审核备注"><el-input v-model="reviewForm.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入审核备注（选填）" /></el-form-item></el-form>
</AppDialog>
<AppDialog v-model="voucherPreviewOpen" :title="voucherPreviewName" width="min(920px, calc(100vw - 28px))" :show-footer="false" @closed="clearVoucherPreview">
<AppDialog class="admin-density-dialog" v-model="voucherPreviewOpen" :title="voucherPreviewName" width="min(920px, calc(100vw - 28px))" :show-footer="false" @closed="clearVoucherPreview">
<div v-loading="voucherPreviewLoading" class="voucher-preview"><img v-if="voucherPreviewUrl" class="voucher-preview__image" :src="voucherPreviewUrl" :alt="voucherPreviewName" /></div>
</AppDialog>
</AdminPage>
@@ -501,79 +503,11 @@ onBeforeUnmount(clearVoucherPreview)
margin: 0 auto;
}
.finance-account-detail__layout :deep(.detail-page-layout) {
gap: 0;
}
.finance-account-detail__layout :deep(.detail-page-layout__header) {
min-height: 64px;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--cc-border, #e3e8ef);
}
.finance-account-detail__layout :deep(.detail-page-layout__summary) {
padding: 10px 16px 0;
}
.finance-account-detail__layout :deep(.detail-page-layout__content) {
padding: 0 16px 12px;
}
.finance-account-detail__layout :deep(.detail-page-layout__footer) {
padding: 0 16px 12px;
}
.row-actions,
.detail-footer,
.detail-heading,
.detail-actions,
.term-control {
display: flex;
align-items: center;
gap: 8px;
}
.row-actions .el-button {
margin-left: 0;
}
.row-actions {
white-space: nowrap;
}
.detail-heading {
width: 100%;
align-items: center;
}
.detail-title {
min-width: 0;
}
.detail-heading h2 {
margin: 0;
color: var(--cc-text);
font-size: 20px;
line-height: 1.4;
}
.detail-heading p {
margin: 3px 0 0;
color: var(--cc-muted);
font-size: 13px;
}
.detail-back {
margin-left: auto;
}
.detail-actions {
margin-left: auto;
}
.detail-actions + .detail-back {
margin-left: 0;
gap: var(--admin-space-3);
}
.balance-value {
@@ -590,7 +524,6 @@ onBeforeUnmount(clearVoucherPreview)
}
.balance-value.is-negative,
.account-metric strong.is-negative,
.credit-expired {
color: var(--el-color-danger);
}
@@ -608,63 +541,12 @@ onBeforeUnmount(clearVoucherPreview)
object-fit: contain;
}
.account-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
padding: 0 0 12px;
border-bottom: 1px solid var(--cc-border, #e3e8ef);
}
.account-metric {
min-width: 0;
padding: 0 12px;
}
.account-metric:first-child {
padding-left: 0;
}
.account-metric:nth-child(4) {
padding-left: 0;
border-left: 0;
}
.account-metric + .account-metric {
border-left: 1px solid var(--cc-border, #e3e8ef);
}
.account-metric::before {
display: none;
}
.account-metric span {
display: block;
color: var(--cc-muted);
font-size: 12px;
}
.account-metric strong {
display: inline-block;
margin-top: 6px;
color: var(--cc-text);
font-size: 20px;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.account-metric small {
margin-left: 6px;
color: var(--cc-muted);
font-size: 11px;
}
.ledger-section {
padding: 10px 0 0;
padding: var(--admin-space-4) 0 0;
}
.recharge-section {
padding: 10px 0 0;
padding: var(--admin-space-4) 0 0;
border-bottom: 1px solid var(--cc-border, #e3e8ef);
}
@@ -673,7 +555,7 @@ onBeforeUnmount(clearVoucherPreview)
}
.ledger-query {
margin-bottom: 8px;
margin-bottom: var(--admin-space-3);
}
:deep(.ledger-query.query-toolbar) {
@@ -699,20 +581,9 @@ onBeforeUnmount(clearVoucherPreview)
font-variant-numeric: tabular-nums;
}
:deep(.ledger-table .data-table__toolbar.is-compact) {
min-height: 36px;
padding: 0 0 6px;
border-bottom: 0;
}
:deep(.ledger-table .data-table__pagination) {
min-height: 40px;
padding: 6px 10px;
}
.term-section {
width: 100%;
padding: 10px 0;
padding: var(--admin-space-4) 0;
}
.term-editor {
@@ -720,13 +591,13 @@ onBeforeUnmount(clearVoucherPreview)
grid-template-columns: 120px minmax(0, 220px);
justify-content: start;
align-items: center;
gap: 14px;
gap: var(--admin-space-5);
padding: 2px 0;
}
.term-label {
color: var(--cc-text);
font-size: 14px;
font-size: var(--admin-font-section);
font-weight: 600;
}
@@ -740,13 +611,13 @@ onBeforeUnmount(clearVoucherPreview)
.wallet-form,
.review-form {
margin-top: 18px;
margin-top: var(--admin-space-5);
}
.wallet-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 18px;
gap: 0 var(--admin-space-5);
}
.wallet-form :deep(.el-date-editor),
@@ -758,47 +629,11 @@ onBeforeUnmount(clearVoucherPreview)
width: 100%;
justify-content: flex-end;
margin-top: 0;
padding-top: 8px;
padding-top: var(--admin-space-3);
border-top: 0;
}
@media (min-width: 1920px) {
.finance-account-detail__layout :deep(.detail-page-layout) {
gap: 8px;
}
.finance-account-detail__layout :deep(.detail-page-layout__header) {
min-height: 56px;
padding: 10px 14px;
}
.finance-account-detail__layout :deep(.detail-page-layout__summary) {
padding: 8px 14px 0;
}
.finance-account-detail__layout :deep(.detail-page-layout__content) {
padding: 0 14px 10px;
}
.finance-account-detail__layout :deep(.detail-page-layout__footer) {
padding: 0 14px 10px;
}
.finance-account-detail__layout :deep(.form-section) {
padding: 10px 0;
}
.finance-account-detail__layout :deep(.form-section__heading) {
margin-bottom: 8px;
}
.account-metrics {
gap: 8px;
}
.account-metric {
padding: 0 10px;
}
.detail-footer {
padding-top: 0;
src/modules/finance/pages/FinanceCustomerArapView.test.ts
+36 -7
View File
@@ -100,6 +100,33 @@ describe('FinanceCustomerArapView G2 operations', () => {
vi.mocked(showExportTaskCreatedDialog).mockReset().mockResolvedValue(false)
})
it.each([
['DRAFT', ['详情', '编辑', '提交审核', ''], true],
['APPROVED', ['详情', '调整', '作废'], false],
['PENDING', ['详情', '作废'], false],
])('keeps fee-source actions reachable at the three-action boundary: %s', async (reviewStatus, labels, overflow) => {
const row = { ...feeSummary, sourceSystem: 'FINANCE', sourceType: 'MANUAL', reviewStatus } as FinanceFeeSourceSummary
vi.mocked(listFinanceFeeSources).mockResolvedValue({ records: [row], total: 1, pages: 1 })
const wrapper = await mountView(['platform:finance:customer-arap:list', 'platform:finance:fee-source:edit'])
await loadRows(wrapper)
const actions = wrapper.get('.el-table__body-wrapper .density-actions')
expect(actions.findAll('button').map(button => button.text().trim())).toEqual(labels)
expect(actions.find('.el-dropdown').exists()).toBe(overflow)
if (overflow) {
const trigger = actions.get('button[title="更多费用来源操作"]')
expect(trigger.text()).toBe('')
await trigger.trigger('click')
await flushPromises()
const item = [...document.querySelectorAll<HTMLElement>('.el-dropdown-menu__item')].find(item => item.textContent?.trim() === '作废')
expect(item).toBeTruthy()
vi.mocked(getFinanceFeeSource).mockResolvedValueOnce({ ...detail, ...row })
item!.click()
await flushPromises()
expect(document.body.textContent).toContain('作废费用')
expect(voidFinanceFeeSource).not.toHaveBeenCalled()
}
})
it('shows detail from the list permission but keeps G2 operations independent', async () => {
const wrapper = await mountView(['platform:finance:customer-arap:list'])
await loadRows(wrapper)
@@ -212,7 +239,7 @@ describe('FinanceCustomerArapView G2 operations', () => {
it('restores the independent detail route from its fee source id', async () => {
const wrapper = await mountView(['platform:finance:customer-arap:list'], '/finance/customer-arap/42')
expect(getFinanceFeeSource).toHaveBeenCalledWith('42')
expect(wrapper.text()).toContain('费用来源详情')
expect(wrapper.get('.density-detail-title').text()).toContain('运费')
expect(wrapper.text()).toContain('IB-91')
expect(wrapper.router.currentRoute.value.name).toBe('finance-customer-arap-detail')
})
@@ -237,27 +264,29 @@ describe('FinanceCustomerArapView G2 operations', () => {
expect(page).toContain('width: min(100%, 1920px)')
expect(page).toContain('@media (min-width: 1920px)')
expect(page).toContain('grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr)')
expect(page).toContain('.finance-arap-detail__layout :deep(.detail-page-layout__content)')
expect(page).toContain('finance-density-detail')
expect(page).not.toContain('max-width: 520px')
})
it('renders all permitted fee-source row operations as small plain primary buttons with icons', () => {
it('renders permitted fee-source row operations as shared outlined text buttons', () => {
const page = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/FinanceCustomerArapView.vue'), 'utf8')
expect(page).toContain('<el-button v-if="canViewSource" size="small" plain type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button>')
expect(page).toContain('@click="openDetail(row)">详情</el-button>')
expect(page).toContain("@click=\"openMutation(row, 'SUBMIT')\"")
expect(page).toContain("@click=\"openMutation(row, 'ADJUST')\"")
expect(page).toContain('!isUpstreamSource(row)')
expect(page).toContain('!isUpstreamSource(detail)')
expect(page).toContain("['INBOUND_FEE', 'CONTAINER_FEE'].includes(type)")
expect(page).toContain("=== 'LASTLEG'")
expect(page).not.toMatch(/<template #actions[\s\S]*?<el-button[^>]*\blink\b/)
const actions = page.slice(page.indexOf('<template #actions'), page.indexOf('<template #customerName'))
expect(actions).not.toMatch(/<el-button[^>]*\blink\b/)
expect(page).toContain('white-space: nowrap')
})
it('resolves blank detail customer names and keeps source labels business-facing', async () => {
vi.mocked(getFinanceFeeSource).mockResolvedValueOnce({ ...detail, customerName: '', sourceType: 'NEW_SOURCE' })
const wrapper = await mountView(['platform:finance:customer-arap:list'], '/finance/customer-arap/42')
expect(wrapper.text()).toContain('运费 · 客户A')
expect(wrapper.get('.density-detail-title').text()).toContain('运费')
expect(wrapper.get('.finance-detail-context').text()).toBe('客户A')
expect(wrapper.text()).toContain('其他费用来源')
expect(wrapper.text()).not.toContain('其他来源')
expect(wrapper.text()).not.toContain('NEW_SOURCE')
@@ -322,7 +351,7 @@ describe('FinanceCustomerArapView G2 operations', () => {
statementGenerated: false, businessDateFrom: '2026-08-01', businessDateTo: '2026-08-31', keyword: '运费',
},
})
expect(showExportTaskCreatedDialog).toHaveBeenCalledWith({ taskName: '客户应收应付费用来源', taskNo: 'EXP-3' })
expect(showExportTaskCreatedDialog).toHaveBeenCalledWith({ taskName: '客户应收应付费用来源', taskNo: 'EXP-3', dense: true })
})
it('does not expose fee-source export without download-center access', async () => {
src/modules/finance/pages/FinanceCustomerArapView.vue
+46 -161
View File
@@ -1,12 +1,15 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import '../financeDensity.css'
import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, Ban, Download, Eye, FileCheck2, FilePlus2, Pencil, Send } from '@lucide/vue'
import { MoreHorizontal, ArrowLeft, Download, FileCheck2, FilePlus2, Pencil, Send } from '@lucide/vue'
import { ElMessage } from 'element-plus'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import { createPlatformExportTask } from '@/modules/downloads'
import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import AdminPage from '@/shared/components/AdminPage.vue'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import OperationErrorToast from '@/shared/components/OperationErrorToast.vue'
@@ -61,6 +64,13 @@ const loadError = ref<ApiErrorDetails | null>(null)
const detailOpen = ref(false)
const selected = ref<ArapRow | null>(null)
const detail = ref<FinanceFeeSourceDetail | null>(null)
const operationLogRows = computed(() => (detail.value?.operationLogs || []).map((log, index) => ({ ...log, rowKey: index })))
const operationLogColumns: DataTableColumn[] = [
{ key: 'occurredAt', label: '时间', width: 170, slotName: 'occurredAt' },
{ key: 'action', label: '操作类型', minWidth: 120, slotName: 'action' },
{ key: 'operatorName', label: '操作人', minWidth: 120, slotName: 'operatorName' },
{ key: 'result', label: '备注 / 结果', minWidth: 280, slotName: 'result' },
]
const detailLoading = ref(false)
const detailError = ref<ApiErrorDetails | null>(null)
const reviewOpen = ref(false)
@@ -126,6 +136,18 @@ function closeCustomerSelectOnScroll() {
const active = document.activeElement
if (active instanceof HTMLElement) active.blur()
}
function sourceActionCount(row: Record<string, unknown>) {
if (!row.feeSourceId) return 0
const available = row.status === 'AVAILABLE'
const draft = ['DRAFT', 'REJECTED'].includes(String(row.reviewStatus))
const editable = canEditSource.value && !isUpstreamSource(row)
return Number(canViewSource.value)
+ Number(editable && draft && available)
+ Number(canEditSource.value && draft && available)
+ Number(canReviewSource.value && row.reviewStatus === 'PENDING' && available)
+ Number(editable && row.reviewStatus === 'APPROVED' && available && !row.statementGenerated)
+ Number(editable && available && !row.statementGenerated)
}
function isUpstreamSource(source: { sourceSystem?: unknown; sourceType?: unknown }) {
return isFirstlegSource(source) || String(source.sourceSystem || '').trim().toUpperCase() === 'LASTLEG'
}
@@ -334,7 +356,7 @@ async function exportFeeSources() {
...(keyword ? { keyword } : {}),
},
})
const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo })
const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo, dense: true })
if (openDownloadCenter) await router.push({ name: 'download-center' })
} catch (error) { ElMessage.error(getApiErrorMessage(error, '客户应收应付导出任务创建失败')) }
finally { exportBusy.value = false }
@@ -365,7 +387,7 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
</script>
<template>
<AdminPage as="div" class="finance-arap-page" spacing="normal">
<AdminPage as="div" class="finance-arap-page admin-density" spacing="normal">
<OperationErrorToast :details="reviewError || mutationError" />
<el-result v-if="!canView" icon="warning" title="无权访问客户应收应付" sub-title="请联系管理员开通账单查看权限" />
<ListPageLayout v-else-if="!detailOpen" aria-label="客户应收应付">
@@ -374,7 +396,7 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
<section v-if="!customersError && !loadError" class="surface-panel table-panel">
<DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" max-height="calc(100vh - 300px)" preference-key="finance-customer-arap-table" aria-label="客户应收应付列表" row-key="id" empty-text="暂无客户应收应付数据" @selection-change="onSelectionChange" @update:page="load()" @update:page-size="page = 1; load()">
<template #toolbar-actions><div class="generation-actions"><el-button v-if="canExport" :loading="exportBusy" :disabled="loading || exportBusy" @click="exportFeeSources"><Download :size="16" />导出Excel</el-button><el-button v-if="canCreateStatement" type="primary" :disabled="!selectedRows.length" @click="continueSelectedGeneration"><FilePlus2 :size="16" />生成所选对账单</el-button></div></template>
<template #actions="{ row }"><div class="row-actions"><template v-if="row.feeSourceId"><el-button v-if="canViewSource" size="small" plain type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button><el-button v-if="canEditSource && !isUpstreamSource(row) && ['DRAFT','REJECTED'].includes(row.reviewStatus) && row.status === 'AVAILABLE'" size="small" plain @click="openMutation(row, 'EDIT')"><Pencil :size="15" />编辑</el-button><el-button v-if="canEditSource && ['DRAFT','REJECTED'].includes(row.reviewStatus) && row.status === 'AVAILABLE'" size="small" plain type="primary" @click="openMutation(row, 'SUBMIT')"><Send :size="15" />提交审核</el-button><el-button v-if="canReviewSource && row.reviewStatus === 'PENDING' && row.status === 'AVAILABLE'" size="small" plain type="success" @click="openReview(row)"><FileCheck2 :size="15" />审核</el-button><el-button v-if="canEditSource && !isUpstreamSource(row) && row.reviewStatus === 'APPROVED' && row.status === 'AVAILABLE' && !row.statementGenerated" size="small" plain @click="openMutation(row, 'ADJUST')"><Pencil :size="15" />调整</el-button><el-button v-if="canEditSource && !isUpstreamSource(row) && row.status === 'AVAILABLE' && !row.statementGenerated" size="small" plain type="danger" @click="openMutation(row, 'VOID')"><Ban :size="15" />作废</el-button></template><span v-else class="muted-action">手工成本</span></div></template>
<template #actions="{ row }"><div class="row-actions density-actions"><template v-if="row.feeSourceId"><el-button data-tone="neutral" class="density-action" v-if="canViewSource" size="small" @click="openDetail(row)">详情</el-button><el-button data-tone="neutral" class="density-action" v-if="canEditSource && !isUpstreamSource(row) && ['DRAFT','REJECTED'].includes(row.reviewStatus) && row.status === 'AVAILABLE'" size="small" @click="openMutation(row, 'EDIT')">编辑</el-button><el-button data-tone="warning" class="density-action" v-if="canEditSource && ['DRAFT','REJECTED'].includes(row.reviewStatus) && row.status === 'AVAILABLE'" size="small" @click="openMutation(row, 'SUBMIT')">提交审核</el-button><el-button data-tone="warning" class="density-action" v-if="canReviewSource && row.reviewStatus === 'PENDING' && row.status === 'AVAILABLE'" size="small" @click="openReview(row)">审核</el-button><el-button data-tone="neutral" class="density-action" v-if="canEditSource && !isUpstreamSource(row) && row.reviewStatus === 'APPROVED' && row.status === 'AVAILABLE' && !row.statementGenerated" size="small" @click="openMutation(row, 'ADJUST')">调整</el-button><el-button data-tone="danger" class="density-action" v-if="canEditSource && !isUpstreamSource(row) && row.status === 'AVAILABLE' && !row.statementGenerated && sourceActionCount(row) <= 3" size="small" @click="openMutation(row, 'VOID')">作废</el-button><el-dropdown v-if="canEditSource && !isUpstreamSource(row) && row.status === 'AVAILABLE' && !row.statementGenerated && sourceActionCount(row) > 3" trigger="click"><el-button class="density-action" data-tone="neutral" size="small" title="更多费用来源操作" :aria-label="`更多费用来源操作 · ${row.documentNo || '当前费用'}`"><MoreHorizontal :size="15" aria-hidden="true" /></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item class="danger-menu-item" @click="openMutation(row, 'VOID')">作废</el-dropdown-item></el-dropdown-menu></template></el-dropdown></template><span v-else class="muted-action">手工成本</span></div></template>
<template #customerName="{ row }">{{ customerName(row.customerId, row.customerName) }}</template><template #direction="{ row }"><el-tag :type="row.direction === 'RECEIVABLE' ? 'success' : row.direction === 'PAYABLE' ? 'warning' : 'info'">{{ financeDirectionLabel(row.direction) }}</el-tag></template>
<template #businessReference="{ row }">{{ businessReference(row as unknown as ArapRow) }}</template><template #sourceType="{ row }">{{ sourceTypeDisplay(row.sourceType) }}</template><template #supplierName="{ row }">{{ supplierDisplay(row as unknown as ArapRow) }}</template><template #sourceStatus="{ row }">{{ sourceStatusDisplay(row.status) }}</template>
<template #status="{ row }"><el-tag :type="row.reviewStatus === 'APPROVED' ? 'success' : row.reviewStatus === 'REJECTED' ? 'danger' : 'warning'">{{ statusLabel(row.reviewStatus) }}</el-tag></template>
@@ -382,26 +404,27 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
<template #businessDate="{ row }">{{ formatBusinessDate(row.businessDate) }}</template><template #pagination-left>已选 {{ selectedRows.length }} 笔 · 应收金额 {{ money(selectedAmount) }} CNY</template>
</DataTable></section>
</ListPageLayout>
<AdminPage v-else as="div" class="finance-arap-detail" spacing="normal">
<AdminPage v-else as="div" class="finance-arap-detail admin-density" spacing="normal">
<section class="surface-panel finance-arap-detail__surface">
<DetailPageLayout class="finance-arap-detail__layout" aria-label="费用来源详情">
<template #header><div class="detail-heading"><el-button @click="closeDetail"><ArrowLeft :size="16" />返回客户应收应付</el-button><div class="detail-title"><h2>费用来源详情</h2><p>{{ selected?.documentNo || '费用来源' }} · {{ selected ? customerName(selected.customerId, selected.customerName) : '客户名称暂不可用' }}</p></div><div class="detail-actions"><el-button v-if="canEditSource && detail && !isUpstreamSource(detail) && ['DRAFT','REJECTED'].includes(detail.reviewStatus)" @click="openMutation(selected as unknown as Record<string, unknown>, 'EDIT')"><Pencil :size="16" />编辑</el-button><el-button v-if="canEditSource && detail && ['DRAFT','REJECTED'].includes(detail.reviewStatus)" @click="openMutation(selected as unknown as Record<string, unknown>, 'SUBMIT')"><Send :size="16" />提交审核</el-button><el-button v-if="canReviewSource && detail?.reviewStatus === 'PENDING' && selected" @click="openReview(selected as unknown as Record<string, unknown>)"><FileCheck2 :size="16" />审核</el-button></div></div></template>
<template v-if="detail" #summary><section class="arap-metrics" aria-label="费用来源概览"><div class="arap-metric is-amount"><span>结算金额</span><strong>{{ money(detail.amount) }}</strong><small>CNY</small></div><div class="arap-metric"><span>收付方向</span><strong>{{ financeDirectionLabel(detail.direction) }}</strong></div><div class="arap-metric"><span>来源状态</span><strong>{{ sourceStatusDisplay(detail.sourceStatus) }}</strong></div><div class="arap-metric"><span>审核状态</span><strong>{{ statusLabel(detail.reviewStatus) }}</strong></div></section></template>
<DetailPageLayout class="finance-arap-detail__layout finance-density-detail" aria-label="费用来源详情">
<template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="closeDetail"><ArrowLeft :size="16" />返回客户应收应付</el-button><h1 class="density-detail-title">{{ selected?.documentNo || '费用来源详情' }}</h1><span class="finance-detail-context">{{ selected ? customerName(selected.customerId, selected.customerName) : '—' }}</span><StatusBadge v-if="detail" :status="statusLabel(detail.reviewStatus)" /></div><div class="finance-detail-actions"><el-button v-if="canEditSource && detail && !isUpstreamSource(detail) && ['DRAFT','REJECTED'].includes(detail.reviewStatus)" @click="openMutation(selected as unknown as Record<string, unknown>, 'EDIT')"><Pencil :size="16" />编辑</el-button><el-button v-if="canEditSource && detail && ['DRAFT','REJECTED'].includes(detail.reviewStatus)" @click="openMutation(selected as unknown as Record<string, unknown>, 'SUBMIT')"><Send :size="16" />提交审核</el-button><el-button v-if="canReviewSource && detail?.reviewStatus === 'PENDING' && selected" @click="openReview(selected as unknown as Record<string, unknown>)"><FileCheck2 :size="16" />审核</el-button></div></div></template>
<template v-if="detail" #summary><dl class="density-detail-overview arap-metrics" aria-label="费用来源概览"><div class="arap-metric is-amount"><dt>结算金额</dt><dd>{{ money(detail.amount) }} <small>CNY</small></dd></div><div class="arap-metric"><dt>收付方向</dt><dd>{{ financeDirectionLabel(detail.direction) }}</dd></div><div class="arap-metric"><dt>来源状态</dt><dd>{{ sourceStatusDisplay(detail.sourceStatus) }}</dd></div><div class="arap-metric"><dt>审核状态</dt><dd>{{ statusLabel(detail.reviewStatus) }}</dd></div></dl></template>
<LoadErrorState v-if="detailError" title="费用来源详情加载失败" :message="detailError.message" :loading="detailLoading" @retry="selected && loadDetail(selected)"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
<template v-else-if="detail"><div class="arap-detail-grid"><FormSection class="arap-information" title="单据信息" :bordered="false"><el-descriptions :column="2" class="arap-detail"><el-descriptions-item label="客户">{{ customerName(detail.customerId, detail.customerName || selected?.customerName) }}</el-descriptions-item><el-descriptions-item label="费用项目">{{ displayFeeName(detail.feeItemName) }}</el-descriptions-item><el-descriptions-item label="来源类型">{{ sourceTypeDisplay(detail.sourceType) }}</el-descriptions-item><el-descriptions-item label="关联业务">{{ detail.inboundCode || detail.containerNo || detail.sourceBusinessId || '业务关联待补充' }}</el-descriptions-item><el-descriptions-item v-if="detail.direction === 'PAYABLE'" label="供应商">{{ detail.supplierName || '供应商待补充' }}</el-descriptions-item><el-descriptions-item label="业务日期">{{ formatBusinessDate(detail.businessDate) }}</el-descriptions-item><el-descriptions-item label="原币金额">{{ detail.originalCurrency }} {{ money(detail.originalAmount) }}</el-descriptions-item><el-descriptions-item label="折算汇率">{{ detail.exchangeRate }}<template v-if="detail.exchangeRateMonth">（{{ detail.exchangeRateMonth }}）</template></el-descriptions-item><el-descriptions-item v-if="detail.quantity != null" label="计费依据">{{ detail.quantity }} {{ detail.quantityUnit || '' }}<template v-if="detail.unitPrice != null"> × {{ detail.originalCurrency }} {{ detail.unitPrice }}</template></el-descriptions-item><el-descriptions-item v-if="detail.periodStart" label="计费期间">{{ detail.periodStart }} 至 {{ detail.periodEnd }}</el-descriptions-item></el-descriptions></FormSection><FormSection class="arap-settlement" title="审核与结算" :bordered="false"><el-descriptions :column="1" class="arap-detail"><el-descriptions-item label="费用状态">{{ sourceStatusDisplay(detail.sourceStatus) }}</el-descriptions-item><el-descriptions-item label="已生成对账单">{{ detail.statementGenerated ? '是' : '否' }}</el-descriptions-item><el-descriptions-item label="审核原因">{{ detail.reviewReason || '未填写' }}</el-descriptions-item></el-descriptions></FormSection></div><FormSection class="operation-log" title="操作记录" :bordered="false"><el-timeline v-if="detail.operationLogs?.length"><el-timeline-item v-for="(log, index) in detail.operationLogs" :key="`${log.occurredAt}-${index}`" :timestamp="formatDateTime(log.occurredAt)">{{ financeOperationActionLabel(log.action) }} · {{ displayOperator(log.operatorName) }}<small>{{ log.remark || financeOperationResultLabel(log.result) }}</small></el-timeline-item></el-timeline><el-empty v-else description="暂无操作记录" /></FormSection></template>
<template v-else-if="detail"><div class="arap-detail-grid"><FormSection class="arap-information density-form-section" title="单据信息" :bordered="false"><el-descriptions border :column="2" class="arap-detail density-descriptions"><el-descriptions-item label="客户">{{ customerName(detail.customerId, detail.customerName || selected?.customerName) }}</el-descriptions-item><el-descriptions-item label="费用项目">{{ displayFeeName(detail.feeItemName) }}</el-descriptions-item><el-descriptions-item label="来源类型">{{ sourceTypeDisplay(detail.sourceType) }}</el-descriptions-item><el-descriptions-item label="关联业务">{{ detail.inboundCode || detail.containerNo || detail.sourceBusinessId || '业务关联待补充' }}</el-descriptions-item><el-descriptions-item v-if="detail.direction === 'PAYABLE'" label="供应商">{{ detail.supplierName || '供应商待补充' }}</el-descriptions-item><el-descriptions-item label="业务日期">{{ formatBusinessDate(detail.businessDate) }}</el-descriptions-item><el-descriptions-item label="原币金额">{{ detail.originalCurrency }} {{ money(detail.originalAmount) }}</el-descriptions-item><el-descriptions-item label="折算汇率">{{ detail.exchangeRate }}<template v-if="detail.exchangeRateMonth">（{{ detail.exchangeRateMonth }}）</template></el-descriptions-item><el-descriptions-item v-if="detail.quantity != null" label="计费依据">{{ detail.quantity }} {{ detail.quantityUnit || '' }}<template v-if="detail.unitPrice != null"> × {{ detail.originalCurrency }} {{ detail.unitPrice }}</template></el-descriptions-item><el-descriptions-item v-if="detail.periodStart" label="计费期间">{{ detail.periodStart }} 至 {{ detail.periodEnd }}</el-descriptions-item></el-descriptions></FormSection><FormSection class="arap-settlement density-form-section" title="审核与结算" :bordered="false"><el-descriptions border :column="1" class="arap-detail density-descriptions"><el-descriptions-item label="费用状态">{{ sourceStatusDisplay(detail.sourceStatus) }}</el-descriptions-item><el-descriptions-item label="已生成对账单">{{ detail.statementGenerated ? '是' : '否' }}</el-descriptions-item><el-descriptions-item label="审核原因">{{ detail.reviewReason || '未填写' }}</el-descriptions-item></el-descriptions></FormSection></div><FormSection class="operation-log density-form-section" title="操作记录" :bordered="false"><DataTable :data="operationLogRows" :columns="operationLogColumns" row-key="rowKey" column-settings-mode="hide" empty-text="暂无操作记录"><template #occurredAt="{ row }">{{ formatDateTime(row.occurredAt) }}</template><template #action="{ row }">{{ financeOperationActionLabel(row.action) }}</template><template #operatorName="{ row }">{{ displayOperator(row.operatorName) }}</template><template #result="{ row }">{{ row.remark || financeOperationResultLabel(row.result) }}</template></DataTable></FormSection></template>
</DetailPageLayout>
</section>
</AdminPage>
<AppDialog v-model="reviewOpen" title="费用来源审核" confirm-text="提交审核" :confirm-loading="reviewSaving" @confirm="submitReview">
<el-form label-position="top"><el-form-item label="审核结论"><el-segmented v-model="reviewForm.action" :options="[{ label: '通过', value: 'APPROVE' }, { label: '驳回', value: 'REJECT' }]" /></el-form-item><el-form-item :label="reviewForm.action === 'REJECT' ? '驳回原因' : '审核说明（可选）'"><el-input v-model="reviewForm.reason" type="textarea" :rows="3" maxlength="500" :placeholder="reviewForm.action === 'REJECT' ? '请填写驳回原因' : '请输入审核说明（可选）'" show-word-limit /></el-form-item></el-form>
<AppDialog class="admin-density-dialog" v-model="reviewOpen" title="费用来源审核" confirm-text="提交审核" :confirm-loading="reviewSaving" @confirm="submitReview">
<el-form class="density-form" label-position="top"><el-form-item label="审核结论"><el-segmented v-model="reviewForm.action" :options="[{ label: '通过', value: 'APPROVE' }, { label: '驳回', value: 'REJECT' }]" /></el-form-item><el-form-item :label="reviewForm.action === 'REJECT' ? '驳回原因' : '审核说明（可选）'"><el-input v-model="reviewForm.reason" type="textarea" :rows="3" maxlength="500" :placeholder="reviewForm.action === 'REJECT' ? '请填写驳回原因' : '请输入审核说明（可选）'" show-word-limit /></el-form-item></el-form>
</AppDialog>
<AppDialog v-model="mutationOpen" :title="mutationTitle" :confirm-text="mutationMode === 'VOID' ? '确认作废' : '确认'" :confirm-loading="mutationSaving" @confirm="submitMutation">
<el-form label-position="top"><el-form-item v-if="mutationMode === 'EDIT' || mutationMode === 'ADJUST'" label="金额(CNY)"><el-input-number v-model="mutationForm.amount" :min="0.01" :precision="2" :controls="false" style="width:100%" placeholder="请输入调整金额" /></el-form-item><el-form-item label="操作原因"><el-input v-model="mutationForm.reason" type="textarea" :rows="3" maxlength="500" placeholder="请填写操作原因" show-word-limit /></el-form-item></el-form>
<AppDialog class="admin-density-dialog" v-model="mutationOpen" :title="mutationTitle" :confirm-text="mutationMode === 'VOID' ? '确认作废' : '确认'" :confirm-loading="mutationSaving" @confirm="submitMutation">
<el-form class="density-form" label-position="top"><el-form-item v-if="mutationMode === 'EDIT' || mutationMode === 'ADJUST'" label="金额(CNY)"><el-input-number v-model="mutationForm.amount" :min="0.01" :precision="2" :controls="false" style="width:100%" placeholder="请输入调整金额" /></el-form-item><el-form-item label="操作原因"><el-input v-model="mutationForm.reason" type="textarea" :rows="3" maxlength="500" placeholder="请填写操作原因" show-word-limit /></el-form-item></el-form>
</AppDialog>
</AdminPage>
</template>
<style scoped>
:deep(.danger-menu-item:not(.is-disabled)) { color: var(--el-color-danger); }
.finance-arap-page {
min-width: 0;
}
@@ -441,141 +464,35 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
margin: 0 auto;
}
.finance-arap-detail__layout :deep(.detail-page-layout) {
gap: 0;
}
.finance-arap-detail__layout :deep(.detail-page-layout__header) {
min-height: 64px;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--cc-border, #e3e8ef);
}
.finance-arap-detail__layout :deep(.detail-page-layout__summary) {
padding: 10px 16px 0;
}
.finance-arap-detail__layout :deep(.detail-page-layout__content) {
padding: 0 16px 12px;
}
.row-actions {
.generation-actions {
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.row-actions .el-button {
margin-left: 0;
}
.generation-actions,
.detail-heading,
.detail-actions {
display: flex;
align-items: center;
gap: 8px;
}
.detail-heading {
min-width: 0;
align-items: flex-start;
}
.detail-title {
min-width: 0;
}
.detail-heading h2 {
margin: 0;
font-size: 18px;
}
.detail-heading p {
overflow: hidden;
margin: 3px 0 0;
color: var(--cc-muted);
text-overflow: ellipsis;
white-space: nowrap;
}
.detail-actions {
margin-left: auto;
gap: var(--admin-space-3);
}
.muted-action {
color: var(--cc-muted);
}
.arap-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
padding: 0 0 12px;
border-bottom: 1px solid var(--cc-border, #e3e8ef);
}
.arap-metric {
min-width: 0;
padding: 0 12px;
}
.arap-metric:first-child {
padding-left: 0;
}
.arap-metric + .arap-metric {
border-left: 1px solid var(--cc-border, #e3e8ef);
}
.arap-metric span {
display: block;
color: var(--cc-muted);
font-size: 12px;
}
.arap-metric strong {
display: inline-block;
margin-top: 6px;
color: var(--cc-text);
font-size: 20px;
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.arap-metric small {
margin-left: 6px;
color: var(--cc-muted);
font-size: 11px;
}
.arap-metric.is-amount strong {
color: #4f46e5;
}
.arap-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
gap: 16px;
gap: var(--admin-space-6);
border-bottom: 1px solid var(--cc-border, #e3e8ef);
}
.arap-information,
.arap-settlement,
.operation-log {
padding: 10px 0;
padding: var(--admin-space-4) 0;
}
.arap-settlement {
padding-left: 16px;
padding-left: var(--admin-space-6);
border-left: 1px solid var(--cc-border, #e3e8ef);
}
.operation-log {
min-height: 150px;
}
:deep(.arap-detail .el-descriptions__content) {
min-width: 0;
@@ -588,7 +505,7 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
}
.operation-log :deep(.el-empty) {
padding: 10px 0 2px;
padding: var(--admin-space-4) 0 2px;
}
.operation-log :deep(.el-empty__image) {
@@ -597,50 +514,18 @@ watch(() => [route.name, String(route.params.feeSourceId || '')], ([name, feeSou
.operation-log small {
display: block;
margin-top: 4px;
margin-top: var(--admin-space-1);
color: var(--cc-muted);
}
@media (min-width: 1920px) {
.finance-arap-detail__layout :deep(.detail-page-layout) {
gap: 8px;
}
.finance-arap-detail__layout :deep(.detail-page-layout__header) {
min-height: 56px;
padding: 10px 14px;
}
.finance-arap-detail__layout :deep(.detail-page-layout__summary) {
padding: 8px 14px 0;
}
.finance-arap-detail__layout :deep(.detail-page-layout__content) {
padding: 0 14px 10px;
}
.finance-arap-detail__layout :deep(.form-section) {
padding: 10px 0;
}
.finance-arap-detail__layout :deep(.form-section__heading) {
margin-bottom: 8px;
}
.arap-metrics {
gap: 8px;
}
.arap-metric {
padding: 0 10px;
}
.arap-detail-grid {
gap: 10px;
gap: var(--admin-space-4);
}
.arap-settlement {
padding-left: 10px;
padding-left: var(--admin-space-4);
}
}
src/modules/finance/pages/FinanceCustomerStatementsView.test.ts
+16 -13
View File
@@ -111,17 +111,19 @@ describe('FinanceCustomerStatementsView', () => {
expect(document.querySelectorAll('.statement-summary-grid .statement-summary-item')).toHaveLength(20)
expect(document.querySelector('[aria-label="对账单摘要"]')?.textContent).toContain('客户确认人')
expect(document.querySelector('[aria-label="对账单摘要"]')?.textContent).toContain('2026-08-05 10:00')
expect(document.querySelector('.statement-detail-head')?.textContent).toContain('REC-501')
expect(document.querySelector('.density-detail-heading')?.textContent).toContain('REC-501')
expect(document.querySelector('[aria-label="客户对账单账单明细"]')).toBeTruthy()
expect(document.querySelector('.detail-table-scroll [aria-label="客户对账单账单明细"]')).toBeTruthy()
expect(document.querySelector('.el-drawer')).toBeNull()
})
it('uses the prototype-style wide summary grid at 1920px', () => {
it('uses the shared four-group summary grid with long remarks spanning two groups', () => {
const source = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/FinanceCustomerStatementsView.vue'), 'utf8')
expect(source).toContain('grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))')
expect(source).toContain('grid-template-columns: repeat(5, minmax(0, 1fr))')
expect(source).not.toContain('<el-descriptions :column="3" border>')
const shared = readFileSync(resolve(process.cwd(), 'src/styles/adminDensity.css'), 'utf8')
const moduleCss = readFileSync(resolve(process.cwd(), 'src/modules/finance/financeDensity.css'), 'utf8')
expect(source).toContain('class="density-fields statement-summary-grid"')
expect(shared).toContain('repeat(4, minmax(0, 1fr))')
expect(moduleCss).toContain('.statement-summary-item--remark { grid-column: span 2; }')
})
it('uses entity buttons for row actions and only folds the fourth action into more', () => {
@@ -130,9 +132,10 @@ describe('FinanceCustomerStatementsView', () => {
expect(actions).not.toContain(' link')
for (const label of ['详情', '提交', '通过', '驳回', '出账', '调整', '重开']) {
const actionLine = actions.split('\n').find((line) => line.includes(`${label}</el-button>`))
expect(actionLine).toContain('size="small" plain type="primary"')
expect(actionLine).toContain('class="density-action"')
expect(actionLine).toContain('size="small"')
}
expect(actions).toContain('size="small" plain type="danger"')
expect(actions).toContain('data-tone="danger"')
expect(actions).toContain('aria-label="更多对账单操作" title="更多对账单操作"')
expect(actions).toContain("row.status === 'PENDING_REVIEW' && canReview && canVoid")
expect(actions.match(/<el-dropdown-item/g)).toHaveLength(1)
@@ -151,10 +154,10 @@ describe('FinanceCustomerStatementsView', () => {
const voidButton = actionButtons.find((button) => button.textContent?.trim() === '作废')
expect(new Set(actionButtons.map((button) => button.textContent?.trim()))).toEqual(new Set(['详情', '调整', '作废']))
expect(detailButton?.classList).toContain('el-button--small')
expect(detailButton?.classList).toContain('is-plain')
expect(detailButton?.classList).toContain('el-button--primary')
expect(adjustButton?.classList).toContain('el-button--primary')
expect(voidButton?.classList).toContain('el-button--danger')
expect(detailButton?.classList).toContain('density-action')
expect(detailButton?.getAttribute('data-tone')).toBe('neutral')
expect(adjustButton?.classList).toContain('density-action')
expect(voidButton?.getAttribute('data-tone')).toBe('danger')
const vm = wrapper.vm as unknown as { actionBusy: boolean; adjustBusy: boolean }
vm.actionBusy = true
@@ -302,7 +305,7 @@ describe('FinanceCustomerStatementsView', () => {
lastPaymentFrom: '2026-08-20', lastPaymentTo: '2026-08-21',
},
})
expect(showExportTaskCreatedDialog).toHaveBeenCalledWith({ taskName: '客户对账单', taskNo: 'EXP-STMT-1' })
expect(showExportTaskCreatedDialog).toHaveBeenCalledWith({ taskName: '客户对账单', taskNo: 'EXP-STMT-1', dense: true })
expect(getReconciliationStatement).not.toHaveBeenCalledWith('501')
expect(URL.createObjectURL).not.toHaveBeenCalled()
})
@@ -399,7 +402,7 @@ describe('FinanceCustomerStatementsView', () => {
const { router } = await mountPage(['platform:finance:customer-statement:list'], '/finance/customer-statements/501')
await flushPromises()
expect(router.currentRoute.value.name).toBe('finance-customer-statement-detail')
expect(document.body.textContent).toContain('客户对账单详情')
expect(document.querySelector('[aria-label="客户对账单详情"]')).toBeTruthy()
expect(document.body.textContent).toContain('返回客户对账单')
expect(document.body.textContent).toContain('明细加载失败')
expect(document.body.textContent).toContain('重试')
src/modules/finance/pages/FinanceCustomerStatementsView.vue
+62 -123
View File
@@ -1,12 +1,15 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import '../financeDensity.css'
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft, Download, Eye, MoreHorizontal, Plus, RotateCcw, Send, ShieldCheck, XCircle } from '@lucide/vue'
import { ArrowLeft, Download, MoreHorizontal, Plus } from '@lucide/vue'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import { createPlatformExportTask } from '@/modules/downloads'
import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import AdminPage from '@/shared/components/AdminPage.vue'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import AppDialog from '@/shared/components/AppDialog.vue'
@@ -369,7 +372,7 @@ async function exportStatements() {
taskName: '客户对账单',
parameters,
})
const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo })
const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo, dense: true })
if (openDownloadCenter) await router.push({ name: 'download-center' })
} catch (cause) {
ElMessage.error(getApiErrorMessage(cause, '客户对账单导出任务创建失败'))
@@ -505,7 +508,7 @@ async function createStatement() {
async function performAction(row: FinanceStatementReadModel, actionName: ReconciliationActionPayload['action']) {
const reason = ['REJECT', 'VOID', 'REOPEN'].includes(actionName)
? await ElMessageBox.prompt('请输入操作原因', '对账单操作', { inputType: 'textarea', inputPattern: /\S+/, inputErrorMessage: '操作原因不能为空', confirmButtonText: '确认', cancelButtonText: '取消' }).then((result) => result.value).catch(() => null)
? await ElMessageBox.prompt('请输入操作原因', '对账单操作', { customClass: 'admin-density-confirm', inputType: 'textarea', inputPattern: /\S+/, inputErrorMessage: '操作原因不能为空', confirmButtonText: '确认', cancelButtonText: '取消' }).then((result) => result.value).catch(() => null)
: undefined
if (reason === null) return
actionBusy.value = true
@@ -571,50 +574,42 @@ watch(detailRouteId, (statementId) => {
</script>
<template>
<AdminPage as="div" class="finance-statements-page" spacing="normal">
<AdminPage as="div" class="finance-statements-page admin-density" spacing="normal">
<el-result v-if="!canView" icon="warning" title="无权访问客户对账单" sub-title="请联系管理员开通财务查看权限" />
<DetailPageLayout v-else-if="isDetailRoute" class="surface-panel statement-detail-page" aria-label="客户对账单详情">
<template #header>
<header class="statement-detail-page__header">
<div><h2>客户对账单详情</h2><p>{{ detail?.billNo || '正在加载对账单信息' }}</p></div>
<el-button @click="returnToList"><ArrowLeft :size="16" />返回客户对账单</el-button>
</header>
</template>
<DetailPageLayout v-else-if="isDetailRoute" class="surface-panel statement-detail-page finance-density-detail" aria-label="客户对账单详情">
<template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="returnToList"><ArrowLeft :size="16" />返回客户对账单</el-button><h1 class="density-detail-title">{{ detail?.billNo || '—' }}</h1><StatusBadge v-if="detail" :status="financeStatusLabel(detail.status)" /></div></div></template>
<template v-if="detail" #summary>
<div class="statement-detail-head">
<div><span>客户对账单</span><h2>{{ detail.billNo }}</h2><p>{{ customerDisplayName(detail.customerId, detail.customerName) }} · {{ detail.periodStart || '—' }} 至 {{ detail.periodEnd || '—' }}</p></div>
<el-tag :type="financeStatusTone(detail.status)">{{ financeStatusLabel(detail.status) }}</el-tag>
</div>
<FormSection class="statement-summary-section" title="对账单概要" aria-label="对账单摘要">
<div class="statement-summary-grid">
<div class="statement-summary-item"><span>总应收金额</span><strong>{{ detail.totalAmount.toFixed(2) }} CNY</strong></div>
<div class="statement-summary-item"><span>已收金额</span><strong>{{ detail.paidAmount.toFixed(2) }} CNY</strong></div>
<div class="statement-summary-item"><span>未收金额</span><strong class="statement-outstanding">{{ detail.outstandingAmount.toFixed(2) }} CNY</strong></div>
<div class="statement-summary-item"><span>账期</span><strong>{{ detail.creditDays }} 天</strong></div>
<div class="statement-summary-item"><span>费用明细 / 来源</span><strong>{{ detail.lines.length }} / {{ new Set(detail.lines.map((line) => line.sourceFeeId)).size }}</strong></div>
<div class="statement-summary-item"><span>调整前金额</span><strong>{{ detailSourceAmount().toFixed(2) }} CNY</strong></div>
<div class="statement-summary-item"><span>调整金额</span><strong>{{ (detail.totalAmount - detailSourceAmount()).toFixed(2) }} CNY</strong></div>
<div class="statement-summary-item"><span>货币</span><strong>{{ detail.currency }}</strong></div>
<div class="statement-summary-item"><span>是否结清</span><strong>{{ detail.settled ? '是' : '否' }}</strong></div>
<div class="statement-summary-item"><span>创建人</span><strong>{{ operatorDisplayName(detail.createdByName) }}</strong></div>
<div class="statement-summary-item"><span>创建时间</span><strong>{{ formatDateTime(detail.createdAt) }}</strong></div>
<div class="statement-summary-item"><span>提交时间</span><strong>{{ formatDateTime(revisionTime(['SUBMIT'])) }}</strong></div>
<div class="statement-summary-item"><span>审核时间</span><strong>{{ formatDateTime(revisionTime(['APPROVE', 'REJECT'])) }}</strong></div>
<div class="statement-summary-item"><span>出账时间</span><strong>{{ formatDateTime(revisionTime(['ISSUE'])) }}</strong></div>
<div class="statement-summary-item"><span>客户确认状态</span><strong>{{ financeStatusLabel(detail.customerConfirmationStatus || 'NOT_REQUIRED') }}</strong></div>
<div class="statement-summary-item"><span>客户确认人</span><strong>{{ operatorDisplayName(detail.customerConfirmedByName) }}</strong></div>
<div class="statement-summary-item"><span>客户确认时间</span><strong>{{ formatDateTime(detail.customerConfirmedAt) }}</strong></div>
<div class="statement-summary-item"><span>更新人</span><strong>{{ operatorDisplayName(detail.updatedByName) }}</strong></div>
<div class="statement-summary-item"><span>更新时间</span><strong>{{ formatDateTime(detail.updatedAt) }}</strong></div>
<div class="statement-summary-item statement-summary-item--remark"><span>备注</span><strong>{{ detail.remark || '—' }}</strong></div>
</div>
<dl class="density-detail-overview"><div><dt>客户</dt><dd>{{ customerDisplayName(detail.customerId, detail.customerName) }}</dd></div><div><dt>期间</dt><dd>{{ detail.periodStart || '—' }} 至 {{ detail.periodEnd || '—' }}</dd></div></dl>
<FormSection class="statement-summary-section density-form-section" title="对账单概要" aria-label="对账单摘要">
<dl class="density-fields statement-summary-grid">
<div class="statement-summary-item"><dt>总应收金额</dt><dd>{{ detail.totalAmount.toFixed(2) }} CNY</dd></div>
<div class="statement-summary-item"><dt>已收金额</dt><dd>{{ detail.paidAmount.toFixed(2) }} CNY</dd></div>
<div class="statement-summary-item"><dt>未收金额</dt><dd class="statement-outstanding">{{ detail.outstandingAmount.toFixed(2) }} CNY</dd></div>
<div class="statement-summary-item"><dt>账期</dt><dd>{{ detail.creditDays }} 天</dd></div>
<div class="statement-summary-item"><dt>费用明细 / 来源</dt><dd>{{ detail.lines.length }} / {{ new Set(detail.lines.map((line) => line.sourceFeeId)).size }}</dd></div>
<div class="statement-summary-item"><dt>调整前金额</dt><dd>{{ detailSourceAmount().toFixed(2) }} CNY</dd></div>
<div class="statement-summary-item"><dt>调整金额</dt><dd>{{ (detail.totalAmount - detailSourceAmount()).toFixed(2) }} CNY</dd></div>
<div class="statement-summary-item"><dt>货币</dt><dd>{{ detail.currency }}</dd></div>
<div class="statement-summary-item"><dt>是否结清</dt><dd>{{ detail.settled ? '是' : '否' }}</dd></div>
<div class="statement-summary-item"><dt>创建人</dt><dd>{{ operatorDisplayName(detail.createdByName) }}</dd></div>
<div class="statement-summary-item"><dt>创建时间</dt><dd>{{ formatDateTime(detail.createdAt) }}</dd></div>
<div class="statement-summary-item"><dt>提交时间</dt><dd>{{ formatDateTime(revisionTime(['SUBMIT'])) }}</dd></div>
<div class="statement-summary-item"><dt>审核时间</dt><dd>{{ formatDateTime(revisionTime(['APPROVE', 'REJECT'])) }}</dd></div>
<div class="statement-summary-item"><dt>出账时间</dt><dd>{{ formatDateTime(revisionTime(['ISSUE'])) }}</dd></div>
<div class="statement-summary-item"><dt>客户确认状态</dt><dd>{{ financeStatusLabel(detail.customerConfirmationStatus || 'NOT_REQUIRED') }}</dd></div>
<div class="statement-summary-item"><dt>客户确认人</dt><dd>{{ operatorDisplayName(detail.customerConfirmedByName) }}</dd></div>
<div class="statement-summary-item"><dt>客户确认时间</dt><dd>{{ formatDateTime(detail.customerConfirmedAt) }}</dd></div>
<div class="statement-summary-item"><dt>更新人</dt><dd>{{ operatorDisplayName(detail.updatedByName) }}</dd></div>
<div class="statement-summary-item"><dt>更新时间</dt><dd>{{ formatDateTime(detail.updatedAt) }}</dd></div>
<div class="statement-summary-item statement-summary-item--remark"><dt>备注</dt><dd>{{ detail.remark || '—' }}</dd></div>
</dl>
</FormSection>
</template>
<el-tabs v-model="activeDetailTab" class="statement-detail-tabs">
<el-tab-pane label="账单明细表" name="lines">
<el-tabs v-model="activeDetailTab" class="statement-detail-tabs density-element-tabs density-contained-tabs">
<el-tab-pane name="lines"><template #label><span class="density-tab-icon" aria-hidden="true">📋</span><span>账单明细表</span></template>
<LoadErrorState v-if="detailError" title="明细加载失败" :message="detailError.message" :loading="detailLoading" @retry="retrySelectedDetail"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
<el-skeleton v-else-if="detailLoading" :rows="4" animated />
<FormSection v-else-if="detail" title="账单明细" :bordered="false">
<FormSection class="density-form-section" v-else-if="detail" title="账单明细" :bordered="false">
<div class="detail-table-scroll">
<DataTable class="statement-detail-table statement-line-table" :data="detail.lines" size="small" border stripe :columns="detailLineColumns" column-settings-mode="hide" row-key="statementLineId" empty-text="该对账单暂无账单明细" aria-label="客户对账单账单明细">
<template #direction="{ row }">{{ row.direction === 'PAYABLE' ? '应付' : '应收' }}</template>
@@ -633,8 +628,8 @@ watch(detailRouteId, (statementId) => {
<el-collapse v-if="detail.revisions.length" class="revision-collapse"><el-collapse-item title="调整记录" name="revisions"><el-table :data="detail.revisions" size="small" border stripe><el-table-column prop="revisionNo" label="修订" width="72" /><el-table-column label="动作" width="130"><template #default="{ row }">{{ revisionActionLabel(row.action) }}</template></el-table-column><el-table-column prop="beforeAmount" label="调整前" /><el-table-column prop="afterAmount" label="调整后" /><el-table-column prop="reason" label="原因" /><el-table-column label="操作人" min-width="140"><template #default="{ row }">{{ operatorDisplayName(row.operatorName) }}</template></el-table-column><el-table-column label="发生时间" min-width="170"><template #default="{ row }">{{ formatDateTime(row.occurredAt) }}</template></el-table-column></el-table></el-collapse-item></el-collapse>
</FormSection>
</el-tab-pane>
<el-tab-pane label="账单支付历史表" name="payments">
<FormSection v-if="detail" title="支付历史" :bordered="false">
<el-tab-pane name="payments"><template #label><span class="density-tab-icon" aria-hidden="true">💰</span><span>账单支付历史表</span></template>
<FormSection class="density-form-section" v-if="detail" title="支付历史" :bordered="false">
<div class="detail-table-scroll">
<DataTable class="statement-detail-table statement-payment-table" :data="detail.paymentHistory" size="small" border stripe :columns="paymentColumns" column-settings-mode="hide" row-key="transactionId" empty-text="该对账单暂无有效收款记录" aria-label="客户对账单支付历史">
<template #customerName>{{ customerDisplayName(detail.customerId, detail.customerName) }}</template>
@@ -659,21 +654,21 @@ watch(detailRouteId, (statementId) => {
<el-button v-if="canExport" :loading="exportBusy" :disabled="loading || exportBusy" @click="exportStatements"><Download :size="15" />导出</el-button>
<el-button v-if="canCreate" type="primary" :disabled="!canGenerate" :title="canGenerate ? '生成对账单' : '缺少客户列表权限，无法选择客户'" @click="openCreate"><Plus :size="15" />生成对账单</el-button>
</template>
<template #actions="{ row }">
<el-button size="small" plain type="primary" :disabled="loading" @click.stop="openDetail(row as FinanceStatementReadModel)"><Eye :size="15" />详情</el-button>
<el-button v-if="row.status === 'DRAFT' && canCreate" size="small" plain type="primary" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'SUBMIT')"><Send :size="15" />提交</el-button>
<el-button v-if="row.status === 'PENDING_REVIEW' && canReview" size="small" plain type="primary" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'APPROVE')"><ShieldCheck :size="15" />通过</el-button>
<el-button v-if="row.status === 'PENDING_REVIEW' && canReview" size="small" plain type="primary" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'REJECT')"><XCircle :size="15" />驳回</el-button>
<template #actions="{ row }"><div class="density-actions">
<el-button data-tone="neutral" class="density-action" size="small" :disabled="loading" @click.stop="openDetail(row as FinanceStatementReadModel)">详情</el-button>
<el-button data-tone="neutral" class="density-action" v-if="row.status === 'DRAFT' && canCreate" size="small" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'SUBMIT')">提交</el-button>
<el-button data-tone="warning" class="density-action" v-if="row.status === 'PENDING_REVIEW' && canReview" size="small" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'APPROVE')">通过</el-button>
<el-button data-tone="danger" class="density-action" v-if="row.status === 'PENDING_REVIEW' && canReview" size="small" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'REJECT')">驳回</el-button>
<el-dropdown v-if="row.status === 'PENDING_REVIEW' && canReview && canVoid" trigger="click" @command="(command: ReconciliationActionPayload['action']) => performAction(row as FinanceStatementReadModel, command)">
<el-button size="small" plain :loading="actionBusy" aria-label="更多对账单操作" title="更多对账单操作" @click.stop><MoreHorizontal :size="16" /></el-button>
<template #dropdown><el-dropdown-menu><el-dropdown-item command="VOID" class="danger-menu-item"><XCircle :size="15" />作废</el-dropdown-item></el-dropdown-menu></template>
<el-button data-tone="neutral" class="density-action" size="small" :loading="actionBusy" aria-label="更多对账单操作" title="更多对账单操作" @click.stop><MoreHorizontal aria-hidden="true" :size="16" /></el-button>
<template #dropdown><el-dropdown-menu><el-dropdown-item command="VOID" class="danger-menu-item">作废</el-dropdown-item></el-dropdown-menu></template>
</el-dropdown>
<el-button v-if="row.status === 'PENDING_REVIEW' && !canReview && canVoid" size="small" plain type="danger" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'VOID')"><XCircle :size="15" />作废</el-button>
<el-button v-if="row.status === 'APPROVED' && canIssue" size="small" plain type="primary" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'ISSUE')"><Send :size="15" />出账</el-button>
<el-button v-if="row.status === 'ISSUED' && canAdjust" size="small" plain type="primary" :loading="adjustBusy" @click.stop="openAdjustment(row as FinanceStatementReadModel)"><RotateCcw :size="15" />调整</el-button>
<el-button v-if="['REJECTED','VOIDED'].includes(String(row.status)) && canVoid" size="small" plain type="primary" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'REOPEN')"><RotateCcw :size="15" />重开</el-button>
<el-button v-if="['DRAFT','APPROVED','ISSUED'].includes(String(row.status)) && canVoid" size="small" plain type="danger" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'VOID')"><XCircle :size="15" />作废</el-button>
</template>
<el-button data-tone="danger" class="density-action" v-if="row.status === 'PENDING_REVIEW' && !canReview && canVoid" size="small" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'VOID')">作废</el-button>
<el-button data-tone="neutral" class="density-action" v-if="row.status === 'APPROVED' && canIssue" size="small" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'ISSUE')">出账</el-button>
<el-button data-tone="neutral" class="density-action" v-if="row.status === 'ISSUED' && canAdjust" size="small" :loading="adjustBusy" @click.stop="openAdjustment(row as FinanceStatementReadModel)">调整</el-button>
<el-button data-tone="neutral" class="density-action" v-if="['REJECTED','VOIDED'].includes(String(row.status)) && canVoid" size="small" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'REOPEN')">重开</el-button>
<el-button data-tone="danger" class="density-action" v-if="['DRAFT','APPROVED','ISSUED'].includes(String(row.status)) && canVoid" size="small" :loading="actionBusy" @click.stop="performAction(row as FinanceStatementReadModel, 'VOID')">作废</el-button>
</div></template>
<template #status="{ row }"><el-tag :type="financeStatusTone(row.status)">{{ financeStatusLabel(row.status) }}</el-tag></template>
<template #customerConfirmationStatus="{ row }"><el-tag :type="financeStatusTone(row.customerConfirmationStatus || 'NOT_REQUIRED')">{{ financeStatusLabel(row.customerConfirmationStatus || 'NOT_REQUIRED') }}</el-tag></template>
<template #customerName="{ row }">{{ customerDisplayName(row.customerId, row.customerName) }}</template>
@@ -695,9 +690,9 @@ watch(detailRouteId, (statementId) => {
</template>
</ListPageLayout>
<AppDialog v-model="createOpen" title="生成客户对账单" width="min(680px, 94vw)" :confirm-loading="createBusy" @confirm="createStatement">
<AppDialog class="admin-density-dialog" v-model="createOpen" title="生成客户对账单" width="min(680px, 94vw)" :confirm-loading="createBusy" @confirm="createStatement">
<el-alert v-if="createError" type="warning" :closable="true" show-icon title="暂时无法生成对账单" @close="createError = null"><p>{{ createError.message }}</p></el-alert>
<el-form label-position="top">
<el-form class="density-form" label-position="top">
<el-form-item label="生成方式">
<el-radio-group v-model="createForm.generationMode">
<el-radio-button value="BY_CUTOFF">按账期自动汇总</el-radio-button>
@@ -720,8 +715,8 @@ watch(detailRouteId, (statementId) => {
</el-form>
</AppDialog>
<AppDialog v-model="adjustOpen" title="调整客户对账单" width="min(900px, 96vw)" :confirm-loading="adjustBusy" @confirm="submitAdjustment">
<el-form label-position="top"><el-form-item label="整体调整原因"><el-input v-model="adjustReason" type="textarea" maxlength="500" show-word-limit placeholder="请输入整体调整原因" /></el-form-item></el-form>
<AppDialog class="admin-density-dialog" v-model="adjustOpen" title="调整客户对账单" width="min(900px, 96vw)" :confirm-loading="adjustBusy" @confirm="submitAdjustment">
<el-form class="density-form" label-position="top"><el-form-item label="整体调整原因"><el-input v-model="adjustReason" type="textarea" maxlength="500" show-word-limit placeholder="请输入整体调整原因" /></el-form-item></el-form>
<el-table :data="adjustLines" size="small" max-height="420" border stripe><el-table-column label="选择" width="64"><template #default="{ row }"><el-checkbox v-model="row.selected" /></template></el-table-column><el-table-column prop="feeItemName" label="费用项目" min-width="150" /><el-table-column prop="originalAmount" label="原金额(CNY)" width="130" /><el-table-column label="新金额(CNY)" width="180"><template #default="{ row }"><el-input-number v-model="row.adjustedAmount" :min="0.01" :precision="2" placeholder="请输入新金额" /></template></el-table-column><el-table-column label="明细说明" min-width="220"><template #default="{ row }"><el-input v-model="row.reason" maxlength="500" placeholder="请输入明细说明" /></template></el-table-column></el-table>
</AppDialog>
</AdminPage>
@@ -730,87 +725,31 @@ watch(detailRouteId, (statementId) => {
<style scoped>
.finance-statements-page { min-width: 0; }
:deep(.el-select), :deep(.el-date-editor) { width: 100%; }
.create-period-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.selected-source-summary { width: 100%; margin-top: 6px; color: var(--cc-text-secondary); font-size: 12px; text-align: right; }
.create-period-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--admin-space-6); }
.selected-source-summary { width: 100%; margin-top: var(--admin-space-2); color: var(--cc-text-secondary); font-size: var(--admin-font-caption); text-align: right; }
.statement-detail-page { min-width: 0; width: min(100%, 1920px); margin: 0 auto; overflow: hidden; }
.statement-detail-page :deep(.detail-page-layout) { gap: 0; }
.statement-detail-page__header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--cc-border-subtle); }
.statement-detail-page__header h2 { margin: 0; color: var(--cc-text-primary); font-size: 20px; }
.statement-detail-page__header p { margin: 4px 0 0; color: var(--cc-text-secondary); font-size: 13px; }
.statement-detail-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--cc-border-subtle); }
.statement-detail-head > div > span { color: var(--cc-primary); font-size: 11px; font-weight: 700; }
.statement-detail-head h2 { margin: 2px 0 0; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.statement-detail-head p { margin: 5px 0 0; color: var(--cc-text-secondary); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.statement-summary-section { padding: 10px 16px; border-bottom: 1px solid var(--cc-border-subtle); }
.statement-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; }
.statement-summary-item { min-width: 0; }
.statement-summary-item span, .statement-summary-item strong { display: block; overflow-wrap: anywhere; }
.statement-summary-item span { margin-bottom: 3px; color: var(--cc-text-secondary); font-size: 12px; }
.statement-summary-item strong { color: var(--cc-text-primary); font-size: 14px; line-height: 1.45; }
.statement-summary-item--remark { grid-column: span 2; }
.statement-summary-section { padding: var(--admin-space-4) var(--admin-space-6); border-bottom: 1px solid var(--cc-border-subtle); }
.statement-outstanding { color: var(--el-color-warning-dark-2); }
.statement-detail-tabs { min-width: 0; }
.statement-detail-table { min-width: 0; }
.detail-table-scroll { min-width: 0; overflow-x: auto; }
.statement-detail-tabs :deep(.el-tabs__header) { margin: 0; padding: 0 16px; }
.statement-detail-tabs :deep(.el-tabs__content) { min-width: 0; }
.statement-detail-tabs :deep(.form-section) { padding: 12px 16px 12px; }
.statement-line-table { min-width: 1840px; }
.statement-payment-table { min-width: 1300px; }
.revision-collapse { margin-top: 12px; }
.revision-collapse { margin-top: var(--admin-space-5); }
:deep(.danger-menu-item:not(.is-disabled)) { color: var(--el-color-danger); }
@media (min-width: 1920px) {
.statement-detail-page :deep(.detail-page-layout) {
gap: 8px;
}
.statement-detail-page :deep(.detail-page-layout__header) {
min-height: 56px;
padding: 10px 14px;
}
.statement-detail-page__header h2 {
font-size: 18px;
}
.statement-detail-head {
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px;
padding: 8px 14px;
}
.statement-summary-section {
padding: 8px 14px;
}
.statement-summary-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px 24px;
}
.statement-summary-item--remark {
grid-column: span 2;
}
.statement-detail-tabs :deep(.el-tabs__header) {
padding: 0 14px;
}
.statement-detail-tabs :deep(.form-section) {
padding: 8px 14px;
}
.statement-detail-tabs :deep(.form-section__heading) {
margin-bottom: 8px;
padding: var(--admin-space-3) var(--admin-space-5);
}
.detail-table-scroll {
margin-bottom: 8px;
margin-bottom: var(--admin-space-3);
}
.revision-collapse {
margin-top: 8px;
margin-top: var(--admin-space-3);
}
}
src/modules/finance/pages/FinanceFormalSettlementExport.test.ts
+1 -1
View File
@@ -128,7 +128,7 @@ describe('formal settlement download-center exports', () => {
expect(createPlatformExportTask).toHaveBeenCalledWith({
exportType: 'FINANCE_RECEIVABLE_SETTLEMENT_DETAIL', format: 'XLSX', taskName: '应收结算单详情', parameters: { settlementId: '701' },
})
expect(showExportTaskCreatedDialog).toHaveBeenCalledWith({ taskName: '应收结算单详情', taskNo: 'EXP-DETAIL-1' })
expect(showExportTaskCreatedDialog).toHaveBeenCalledWith({ taskName: '应收结算单详情', taskNo: 'EXP-DETAIL-1', dense: true })
expect(router.currentRoute.value.name).toBe('download-center')
})
src/modules/finance/pages/FinanceFormalSettlementLayout.test.ts
+12 -15
View File
@@ -8,7 +8,7 @@ const statementsSource = readFileSync(resolve(process.cwd(), 'src/modules/financ
describe('Finance formal settlement desktop presentation', () => {
it('keeps settlement totals on the left and list actions on the right of the table toolbar', () => {
expect(source).toContain('<template #toolbar-start>')
expect(source).toContain('<div class="settlement-summary" aria-label="结算汇总">')
expect(source).toContain('<dl class="density-detail-overview settlement-summary" aria-label="结算汇总">')
expect(source).toContain('<template #toolbar-actions>')
expect(source).toContain('<div class="settlement-list-actions">')
expect(source).not.toContain('class="settlement-list-toolbar"')
@@ -26,24 +26,21 @@ describe('Finance formal settlement desktop presentation', () => {
}
})
it('renders up to three row actions as compact icon buttons without wrapping', () => {
it('renders at most three permitted row actions as shared outlined text buttons', () => {
expect(source.match(/key: 'actions', label: '操作', width: 250/g)).toHaveLength(2)
expect(source).toContain('class="settlement-row-actions"')
expect(source).toContain('<el-button size="small" plain type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button>')
expect(source).toContain('size="small" type="primary" :loading="receiptBusy" @click="openReceipt(row)"')
expect(source).toContain('size="small" type="primary" @click="openPayment(row)"')
expect(source).toContain('size="small" plain type="danger" :loading="actionBusy"')
expect(source).toContain('size="small" plain type="primary" :loading="actionBusy"')
expect(source).toContain('.settlement-row-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; white-space: nowrap; }')
expect(source).not.toContain('<el-button link')
expect(source).toContain('class="settlement-row-actions density-actions"')
for (const action of ['openDetail(row)', 'openReceipt(row)', 'openPayment(row)']) expect(source).toContain('@click="' + action + '"')
expect(source).toContain('data-tone="danger"')
expect(source).toContain('class="density-action"')
expect(source).not.toContain('MoreHorizontal')
expect(source).toContain('v-if="canReceive && [\'ISSUED\',\'PARTIALLY_PAID\'].includes(String(row.status))"')
expect(source).toContain('v-if="canPay && [\'ISSUED\',\'PARTIALLY_PAID\'].includes(String(row.status))"')
expect(source).toContain('v-if="canVoid && row.status === \'ISSUED\'"')
expect(source).toContain("props.kind === 'payable' && access.can('platform:finance:payment:create')")
expect(source).toContain("props.kind === 'receivable' && access.can('platform:finance:receipt:create')")
expect(source).toContain("canVoid && row.status === 'ISSUED'")
expect(source).toContain("canVoid && row.status === 'VOIDED'")
})
it('uses a continuous detail layout with locally scrollable wide tables', () => {
expect(source).toContain('<DetailPageLayout v-else-if="detailMode" class="settlement-detail-page surface-panel"')
expect(source).toContain('<DetailPageLayout v-else-if="detailMode" class="settlement-detail-page surface-panel finance-density-detail"')
expect(source).toContain('class="settlement-detail-content"')
expect(source).toContain('class="detail-table-scroll"')
expect(source).toContain(':deep(.detail-table-scroll .el-table) { min-width: 920px; }')
@@ -65,7 +62,7 @@ describe('Finance formal settlement desktop presentation', () => {
it('keeps receipt and payment dialogs readable at desktop width', () => {
expect(source.match(/width="min\(760px, 94vw\)"/g)).toHaveLength(2)
expect(source).toContain('.partial-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));')
expect(source.match(/class="density-detail-overview partial-summary"/g)).toHaveLength(2)
expect(source).toContain('.settlement-operation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));')
expect(source).toContain('<OperationErrorToast :message="receiptValidationError" />')
expect(source).toContain('<OperationErrorToast :details="receiptError" />')
src/modules/finance/pages/FinanceFormalSettlementPage.vue
+55 -123
View File
@@ -1,13 +1,16 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import '../financeDensity.css'
import { computed, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, type UploadFile } from 'element-plus'
import { ArrowLeft, CreditCard, Download, Eye, HandCoins, Plus, RotateCcw, XCircle } from '@lucide/vue'
import { ArrowLeft, CreditCard, Download, HandCoins, Plus, RotateCcw, XCircle } from '@lucide/vue'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import { createPlatformExportTask } from '@/modules/downloads'
import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
import { categoryLabels, listSuppliers, type Supplier } from '@/modules/suppliers'
import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import AdminPage from '@/shared/components/AdminPage.vue'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import OperationErrorToast from '@/shared/components/OperationErrorToast.vue'
@@ -437,6 +440,7 @@ async function submitPayment() {
async function performAction(row: SettlementRow, action: 'VOID' | 'REOPEN') {
const reason = await ElMessageBox.prompt('请输入操作原因', action === 'VOID' ? `作废${title.value}` : `重开${title.value}`, {
customClass: 'admin-density-confirm',
inputType: 'textarea', inputPattern: /\S+/, inputErrorMessage: '操作原因不能为空', confirmButtonText: '确认', cancelButtonText: '取消',
}).then((result) => result.value.trim()).catch(() => null)
if (reason === null) return
@@ -481,7 +485,7 @@ async function createSettlementExport(detailId?: string) {
taskName,
parameters,
})
const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo })
const openDownloadCenter = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo, dense: true })
if (openDownloadCenter) await router.push({ name: 'download-center' })
} catch (cause) {
ElMessage.error(getApiErrorMessage(cause, `${taskName}导出任务创建失败`))
@@ -502,38 +506,31 @@ onMounted(() => {
</script>
<template>
<AdminPage as="div" class="finance-settlement-page" spacing="normal">
<AdminPage as="div" class="finance-settlement-page admin-density" spacing="normal">
<OperationErrorToast :message="receiptValidationError" />
<OperationErrorToast :details="receiptError" />
<el-result v-if="!canView" icon="warning" :title="`无权访问${title}`" sub-title="请联系管理员开通结算单查看权限" />
<DetailPageLayout v-else-if="detailMode" class="settlement-detail-page surface-panel" :aria-label="`${title}详情`">
<template #header><header class="settlement-detail-header">
<div class="settlement-detail-heading">
<el-button aria-label="返回列表" title="返回列表" @click="backToList"><ArrowLeft :size="17" /></el-button>
<div><div class="settlement-detail-breadcrumb">财务管理 / {{ title }} / {{ detail?.settlementNo || settlementId }}</div><h1>{{ title }}详情</h1></div>
<el-tag v-if="detail" :type="financeStatusTone(detail.status)">{{ financeStatusLabel(detail.status) }}</el-tag>
</div>
<div class="settlement-detail-actions">
<DetailPageLayout v-else-if="detailMode" class="settlement-detail-page surface-panel finance-density-detail" :aria-label="`${title}详情`">
<template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" aria-label="返回列表" @click="backToList"><ArrowLeft :size="16" />返回列表</el-button><h1 class="density-detail-title">{{ detail?.settlementNo || '—' }}</h1><StatusBadge v-if="detail" :status="financeStatusLabel(detail.status)" /></div><div class="finance-detail-actions">
<el-button v-if="detail && canExport" :loading="exportSubmitting" :disabled="exportSubmitting" @click="exportDetail"><Download :size="15" />导出</el-button>
<el-button v-if="detail && canReceive && ['ISSUED','PARTIALLY_PAID'].includes(detail.status)" type="primary" :loading="receiptBusy" @click="openReceiptFromDetail"><HandCoins :size="15" />部分收款</el-button>
<el-button v-if="detail && canPay && ['ISSUED','PARTIALLY_PAID'].includes(detail.status)" type="primary" @click="openPaymentFromDetail"><CreditCard :size="15" />部分付款</el-button>
<el-button v-if="detail && canVoid && detail.status === 'ISSUED'" type="danger" :loading="actionBusy" @click="performAction(detailActionRow(), 'VOID')"><XCircle :size="15" />作废</el-button>
<el-button v-if="detail && canVoid && detail.status === 'VOIDED'" :loading="actionBusy" @click="performAction(detailActionRow(), 'REOPEN')"><RotateCcw :size="15" />重开</el-button>
</div>
</header></template>
</div></div></template>
<template v-if="detail" #summary>
<section class="settlement-detail-summary" aria-label="结算金额汇总">
<div class="summary-item"><span>{{ kind === 'receivable' ? '应收金额' : '应付金额' }}</span><strong>{{ money(detail.amount) }}</strong></div>
<div class="summary-item"><span>{{ kind === 'receivable' ? '已收金额' : '已付金额' }}</span><strong class="is-success">{{ money(detail.paidAmount) }}</strong></div>
<div class="summary-item"><span>未结余额</span><strong class="is-danger">{{ money(detail.outstandingAmount) }}</strong></div>
<div class="summary-item"><span>到期日</span><strong class="is-date">{{ displayDate(detail.dueDate) }}</strong></div>
</section>
<dl class="density-detail-overview settlement-detail-summary" aria-label="结算金额汇总">
<div class="summary-item"><dt>{{ kind === 'receivable' ? '应收金额' : '应付金额' }}</dt><dd>{{ money(detail.amount) }}</dd></div>
<div class="summary-item"><dt>{{ kind === 'receivable' ? '已收金额' : '已付金额' }}</dt><dd class="is-success">{{ money(detail.paidAmount) }}</dd></div>
<div class="summary-item"><dt>未结余额</dt><dd class="is-danger">{{ money(detail.outstandingAmount) }}</dd></div>
<div class="summary-item"><dt>到期日</dt><dd class="is-date">{{ displayDate(detail.dueDate) }}</dd></div>
</dl>
</template>
<LoadErrorState v-if="detailError" class="settlement-detail-state" :title="`${title}详情加载失败`" :message="detailError.message" :loading="detailLoading" @retry="loadDetail(String(settlementId || ''))"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
<el-skeleton v-else-if="detailLoading" class="settlement-detail-state" :rows="10" animated />
<section v-else-if="detail" class="settlement-detail-content">
<FormSection title="基本信息">
<el-descriptions :column="4" class="settlement-detail-info">
<FormSection class="density-form-section" title="基本信息">
<el-descriptions border :column="4" class="settlement-detail-info density-descriptions">
<el-descriptions-item label="结算单号">{{ detail.settlementNo }}</el-descriptions-item>
<el-descriptions-item :label="kind === 'receivable' ? '客户' : '供应商'">{{ detailPartyName() }}</el-descriptions-item>
<el-descriptions-item v-if="kind === 'payable'" label="客户">{{ customerName(detail.customerId, detail.customerName) }}</el-descriptions-item>
@@ -550,7 +547,7 @@ onMounted(() => {
<el-descriptions-item :label="kind === 'receivable' ? '最后收款时间' : '最后付款时间'">{{ displayDateTime(detail.lastPaymentAt) }}</el-descriptions-item>
</el-descriptions>
</FormSection>
<FormSection title="费用明细">
<FormSection class="density-form-section" title="费用明细">
<div class="detail-table-scroll">
<el-table :data="detail.lines" size="small" border stripe empty-text="暂无费用明细">
<el-table-column prop="feeItemName" label="费用类型" min-width="150" />
@@ -563,7 +560,7 @@ onMounted(() => {
</el-table>
</div>
</FormSection>
<FormSection :title="kind === 'receivable' ? '收款记录' : '付款记录'">
<FormSection class="density-form-section" :title="kind === 'receivable' ? '收款记录' : '付款记录'">
<div class="detail-table-scroll">
<el-table :data="detail.transactions" size="small" border stripe :empty-text="kind === 'receivable' ? '暂无收款记录' : '暂无付款记录'">
<el-table-column prop="transactionDate" :label="kind === 'receivable' ? '收款日期' : '付款日期'" width="130" />
@@ -577,7 +574,7 @@ onMounted(() => {
</el-table>
</div>
</FormSection>
<FormSection title="修订记录" :bordered="false">
<FormSection class="density-form-section" title="修订记录" :bordered="false">
<div class="detail-table-scroll">
<el-table :data="detail.revisions" size="small" border stripe empty-text="暂无调整记录">
<el-table-column prop="action" label="动作" min-width="120"><template #default="scope">{{ settlementRevisionActionLabel(scope.row.action) || financeOperationActionLabel(scope.row.action) }}</template></el-table-column>
@@ -602,11 +599,11 @@ onMounted(() => {
<section class="surface-panel table-panel">
<DataTable v-model:page="page" v-model:page-size="pageSize" :data="paginatedRows" :columns="columns" :loading="loading" :total="filteredRows.length" :aria-label="`${title}列表`" row-key="id" empty-text="暂无符合条件的结算单">
<template #toolbar-start>
<div class="settlement-summary" aria-label="结算汇总">
<div class="summary-item"><span>{{ kind === 'receivable' ? '应收总额' : '应付总额' }}</span><strong>{{ money(totals.amount) }}</strong></div>
<div class="summary-item"><span>{{ kind === 'receivable' ? '已收' : '已付' }}</span><strong class="is-success">{{ money(totals.paid) }}</strong></div>
<div class="summary-item"><span>{{ kind === 'receivable' ? '待收' : '待付' }}</span><strong class="is-danger">{{ money(totals.outstanding) }}</strong></div>
</div>
<dl class="density-detail-overview settlement-summary" aria-label="结算汇总">
<div class="summary-item"><dt>{{ kind === 'receivable' ? '应收总额' : '应付总额' }}</dt><dd>{{ money(totals.amount) }}</dd></div>
<div class="summary-item"><dt>{{ kind === 'receivable' ? '已收' : '已付' }}</dt><dd class="is-success">{{ money(totals.paid) }}</dd></div>
<div class="summary-item"><dt>{{ kind === 'receivable' ? '待收' : '待付' }}</dt><dd class="is-danger">{{ money(totals.outstanding) }}</dd></div>
</dl>
</template>
<template #toolbar-actions>
<div class="settlement-list-actions">
@@ -615,12 +612,12 @@ onMounted(() => {
</div>
</template>
<template #actions="{ row }">
<div class="settlement-row-actions">
<el-button size="small" plain type="primary" @click="openDetail(row)"><Eye :size="15" />详情</el-button>
<el-button v-if="canReceive && ['ISSUED','PARTIALLY_PAID'].includes(String(row.status))" size="small" type="primary" :loading="receiptBusy" @click="openReceipt(row)"><HandCoins :size="15" />收款</el-button>
<el-button v-if="canPay && ['ISSUED','PARTIALLY_PAID'].includes(String(row.status))" size="small" type="primary" @click="openPayment(row)"><CreditCard :size="15" />付款</el-button>
<el-button v-if="canVoid && row.status === 'ISSUED'" size="small" plain type="danger" :loading="actionBusy" @click="performAction(row as SettlementRow, 'VOID')"><XCircle :size="15" />作废</el-button>
<el-button v-if="canVoid && row.status === 'VOIDED'" size="small" plain type="primary" :loading="actionBusy" @click="performAction(row as SettlementRow, 'REOPEN')"><RotateCcw :size="15" />重开</el-button>
<div class="settlement-row-actions density-actions">
<el-button data-tone="neutral" class="density-action" size="small" @click="openDetail(row)">详情</el-button>
<el-button data-tone="neutral" class="density-action" v-if="canReceive && ['ISSUED','PARTIALLY_PAID'].includes(String(row.status))" size="small" :loading="receiptBusy" @click="openReceipt(row)">收款</el-button>
<el-button data-tone="neutral" class="density-action" v-if="canPay && ['ISSUED','PARTIALLY_PAID'].includes(String(row.status))" size="small" @click="openPayment(row)">付款</el-button>
<el-button data-tone="danger" class="density-action" v-if="canVoid && row.status === 'ISSUED'" size="small" :loading="actionBusy" @click="performAction(row as SettlementRow, 'VOID')">作废</el-button>
<el-button data-tone="neutral" class="density-action" v-if="canVoid && row.status === 'VOIDED'" size="small" :loading="actionBusy" @click="performAction(row as SettlementRow, 'REOPEN')">重开</el-button>
</div>
</template>
<template #customer="{ row }">{{ customerName(String(row.customerId), row.customerName) }}</template>
@@ -644,23 +641,23 @@ onMounted(() => {
</template>
</ListPageLayout>
<AppDialog v-model="createOpen" :title="`生成${title}`" width="min(600px, 94vw)" :confirm-loading="createBusy" @confirm="submitCreate">
<el-form label-position="top">
<AppDialog class="admin-density-dialog" v-model="createOpen" :title="`生成${title}`" width="min(600px, 94vw)" :confirm-loading="createBusy" @confirm="submitCreate">
<el-form class="density-form" label-position="top">
<el-form-item label="客户"><el-select v-model="createForm.customerId" filterable placeholder="请选择客户"><el-option v-for="item in activeCustomers" :key="String(item.id)" :label="item.tenantName" :value="String(item.id)" /></el-select></el-form-item>
<el-form-item v-if="kind === 'receivable'" label="已出账对账单"><el-select v-model="createForm.reconciliationStatementId" filterable><el-option v-for="item in statementOptions" :key="item.id" :label="`${item.billNo} · ${item.outstandingAmount} CNY`" :value="item.id" /></el-select></el-form-item>
<template v-else><el-form-item label="供应商"><el-select v-model="createForm.supplierId" filterable placeholder="请选择供应商"><el-option v-for="item in supplierOptions" :key="String(item.id)" :label="`${item.name} · ${categoryLabels[item.category]}`" :value="String(item.id)" /></el-select></el-form-item><el-form-item label="到期日"><el-date-picker v-model="createForm.dueDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="应付费用来源"><el-select v-model="createForm.feeSourceIds" multiple filterable><el-option v-for="item in feeOptions" :key="item.feeSourceId!" :label="`${item.feeItemName} · ${item.amount} CNY`" :value="item.feeSourceId!" /></el-select></el-form-item></template>
</el-form>
</AppDialog>
<AppDialog v-model="paymentOpen" title="登记付款" width="min(760px, 94vw)" :confirm-loading="paymentBusy" @confirm="submitPayment">
<div v-if="detail" class="partial-summary"><div><span>结算单号</span><strong>{{ detail.settlementNo }}</strong></div><div><span>供应商</span><strong>{{ detailPartyName() }}</strong></div><div><span>应付金额</span><strong>{{ money(detail.amount) }}</strong></div><div><span>已付金额</span><strong class="is-success">{{ money(detail.paidAmount) }}</strong></div><div><span>当前余额</span><strong class="is-danger">{{ money(detail.outstandingAmount) }}</strong></div></div>
<el-form class="settlement-operation-form" label-position="top"><el-form-item label="付款日期"><el-date-picker v-model="paymentForm.transactionDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="本次付款金额(CNY)"><el-input-number v-model="paymentForm.amount" :min="0.01" :max="detail?.outstandingAmount || 0.01" :precision="2" placeholder="请输入付款金额" /></el-form-item><el-form-item label="付款方式"><el-select v-model="paymentForm.method"><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item><el-form-item label="银行流水号/凭证号"><el-input v-model="paymentForm.referenceNo" placeholder="请输入付款流水号" /></el-form-item><el-form-item label="付款凭证"><el-upload :auto-upload="false" :limit="1" accept="image/*" :on-change="selectPaymentFile"><el-button>选择图片</el-button></el-upload></el-form-item><el-form-item label="备注"><el-input v-model="paymentForm.remark" type="textarea" placeholder="请输入付款备注（选填）" /></el-form-item></el-form>
<AppDialog class="admin-density-dialog" v-model="paymentOpen" title="登记付款" width="min(760px, 94vw)" :confirm-loading="paymentBusy" @confirm="submitPayment">
<dl v-if="detail" class="density-detail-overview partial-summary"><div><dt>结算单号</dt><dd>{{ detail.settlementNo }}</dd></div><div><dt>供应商</dt><dd>{{ detailPartyName() }}</dd></div><div><dt>应付金额</dt><dd>{{ money(detail.amount) }}</dd></div><div><dt>已付金额</dt><dd class="is-success">{{ money(detail.paidAmount) }}</dd></div><div><dt>当前余额</dt><dd class="is-danger">{{ money(detail.outstandingAmount) }}</dd></div></dl>
<el-form class="settlement-operation-form density-form" label-position="top"><el-form-item label="付款日期"><el-date-picker v-model="paymentForm.transactionDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="本次付款金额(CNY)"><el-input-number v-model="paymentForm.amount" :min="0.01" :max="detail?.outstandingAmount || 0.01" :precision="2" placeholder="请输入付款金额" /></el-form-item><el-form-item label="付款方式"><el-select v-model="paymentForm.method"><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item><el-form-item label="银行流水号/凭证号"><el-input v-model="paymentForm.referenceNo" placeholder="请输入付款流水号" /></el-form-item><el-form-item label="付款凭证"><el-upload :auto-upload="false" :limit="1" accept="image/*" :on-change="selectPaymentFile"><el-button>选择图片</el-button></el-upload></el-form-item><el-form-item label="备注"><el-input v-model="paymentForm.remark" type="textarea" placeholder="请输入付款备注（选填）" /></el-form-item></el-form>
<div v-if="detail" class="remaining-preview"><span>登记后剩余余额</span><strong>{{ remainingAfter(paymentForm.amount) }}</strong></div>
</AppDialog>
<AppDialog v-model="receiptOpen" title="登记收款" width="min(760px, 94vw)" :confirm-loading="receiptBusy" @confirm="submitReceipt">
<div v-if="detail" class="partial-summary"><div><span>结算单号</span><strong>{{ detail.settlementNo }}</strong></div><div><span>客户公司</span><strong>{{ detailPartyName() }}</strong></div><div><span>应收金额</span><strong>{{ money(detail.amount) }}</strong></div><div><span>已收金额</span><strong class="is-success">{{ money(detail.paidAmount) }}</strong></div><div><span>当前余额</span><strong class="is-danger">{{ money(detail.outstandingAmount) }}</strong></div></div>
<el-form class="settlement-operation-form" label-position="top"><el-form-item label="收款日期"><el-date-picker v-model="receiptForm.receivedDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="本次收款金额(CNY)"><el-input-number v-model="receiptForm.amount" :min="0.01" :max="detail?.outstandingAmount || 0.01" :precision="2" placeholder="请输入收款金额" /></el-form-item><el-form-item label="收款方式"><el-select v-model="receiptForm.paymentMethod"><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item><el-form-item label="收款凭证"><el-upload :key="receiptUploadKey" :auto-upload="false" :limit="1" accept="image/*" :on-change="selectReceiptFile"><el-button>选择图片</el-button></el-upload></el-form-item><el-form-item label="备注"><el-input v-model="receiptForm.remark" type="textarea" placeholder="请输入收款备注（选填）" /></el-form-item></el-form>
<AppDialog class="admin-density-dialog" v-model="receiptOpen" title="登记收款" width="min(760px, 94vw)" :confirm-loading="receiptBusy" @confirm="submitReceipt">
<dl v-if="detail" class="density-detail-overview partial-summary"><div><dt>结算单号</dt><dd>{{ detail.settlementNo }}</dd></div><div><dt>客户公司</dt><dd>{{ detailPartyName() }}</dd></div><div><dt>应收金额</dt><dd>{{ money(detail.amount) }}</dd></div><div><dt>已收金额</dt><dd class="is-success">{{ money(detail.paidAmount) }}</dd></div><div><dt>当前余额</dt><dd class="is-danger">{{ money(detail.outstandingAmount) }}</dd></div></dl>
<el-form class="settlement-operation-form density-form" label-position="top"><el-form-item label="收款日期"><el-date-picker v-model="receiptForm.receivedDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item label="本次收款金额(CNY)"><el-input-number v-model="receiptForm.amount" :min="0.01" :max="detail?.outstandingAmount || 0.01" :precision="2" placeholder="请输入收款金额" /></el-form-item><el-form-item label="收款方式"><el-select v-model="receiptForm.paymentMethod"><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item><el-form-item label="收款凭证"><el-upload :key="receiptUploadKey" :auto-upload="false" :limit="1" accept="image/*" :on-change="selectReceiptFile"><el-button>选择图片</el-button></el-upload></el-form-item><el-form-item label="备注"><el-input v-model="receiptForm.remark" type="textarea" placeholder="请输入收款备注（选填）" /></el-form-item></el-form>
<div v-if="detail" class="remaining-preview"><span>登记后剩余余额</span><strong>{{ remainingAfter(receiptForm.amount) }}</strong></div>
</AppDialog>
</AdminPage>
@@ -669,115 +666,50 @@ onMounted(() => {
<style scoped>
.finance-settlement-page { min-width: 0; }
.settlement-summary, .settlement-list-actions { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; }
.settlement-summary { gap: 6px 0; }
.settlement-list-actions { flex: 0 0 auto; justify-content: flex-end; gap: 8px; }
.settlement-summary { gap: var(--admin-space-2) 0; }
.settlement-list-actions { flex: 0 0 auto; justify-content: flex-end; gap: var(--admin-space-3); }
.settlement-list-actions :deep(.el-button + .el-button) { margin-left: 0; }
.settlement-row-actions { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; white-space: nowrap; }
.settlement-row-actions :deep(.el-button + .el-button) { margin-left: 0; }
.summary-item { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.settlement-summary .summary-item + .summary-item { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--cc-border, #e3e8ef); }
.summary-item span { color: var(--cc-text-secondary, #64748b); font-size: 13px; }
.summary-item strong { color: var(--cc-text-primary, #1f2937); font-size: 18px; line-height: 1.2; }
.summary-item strong.is-success { color: #16803c; }
.summary-item strong.is-danger { color: #c2413a; }
.settlement-detail-page { display: flex; width: min(100%, 1920px); margin: 0 auto; min-width: 0; gap: 0; overflow: hidden; padding: 0; }
.settlement-detail-header { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--cc-border, #e3e8ef); }
.settlement-detail-heading, .settlement-detail-actions { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.settlement-detail-heading h1 { margin: 0; font-size: 20px; line-height: 1.35; letter-spacing: 0; }
.settlement-detail-breadcrumb { color: var(--cc-text-secondary, #64748b); font-size: 12px; }
.settlement-detail-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 10px 16px; border-bottom: 1px solid var(--cc-border, #e3e8ef); }
.settlement-detail-summary .summary-item { align-items: flex-start; flex-direction: column; gap: 4px; padding: 0 12px; border-left: 1px solid var(--cc-border, #e3e8ef); }
.settlement-detail-summary .summary-item:first-child { padding-left: 0; border-left: 0; }
.summary-item strong.is-date { font-size: 20px; }
.settlement-detail-state { margin: 14px 16px; }
.settlement-detail-content { min-width: 0; padding: 0 16px 12px; overflow: hidden; }
.settlement-detail-actions { display: flex; align-items: center; gap: var(--admin-space-4); min-width: 0; flex-wrap: wrap; }
.settlement-detail-state { margin: var(--admin-space-5) var(--admin-space-6); }
.settlement-detail-content { min-width: 0; padding: 0 var(--admin-space-6) var(--admin-space-5); overflow: hidden; }
.settlement-detail-info { min-width: 0; }
.detail-table-scroll { min-width: 0; overflow-x: auto; }
:deep(.settlement-detail-info .el-descriptions__table) { table-layout: fixed; }
:deep(.settlement-detail-info .el-descriptions__content) { min-width: 0; overflow-wrap: anywhere; }
:deep(.detail-table-scroll .el-table) { min-width: 920px; }
.partial-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 12px; padding: 10px 0; border: 1px solid var(--el-color-primary-light-7); border-radius: 6px; background: var(--el-color-primary-light-9); }
.partial-summary div { min-width: 0; padding: 0 10px; border-left: 1px solid var(--el-color-primary-light-7); }
.partial-summary div:first-child { border-left: 0; }
.partial-summary span, .partial-summary strong { display: block; overflow-wrap: anywhere; }
.partial-summary span { color: var(--cc-text-secondary, #64748b); font-size: 12px; }
.partial-summary strong { margin-top: 4px; color: var(--cc-text-primary, #1f2937); font-size: 15px; }
.partial-summary strong.is-success { color: #16803c; }
.partial-summary strong.is-danger { color: #c2413a; }
.settlement-operation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 0; }
.settlement-operation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--admin-space-5); row-gap: 0; }
.settlement-operation-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }
.settlement-operation-form :deep(.el-input-number) { width: 100%; }
.remaining-preview { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 8px; color: var(--cc-text-secondary, #64748b); background: var(--el-fill-color-light); }
.remaining-preview strong { color: #b45309; font-size: 16px; }
.operation-error { margin-bottom: 12px; }
.operation-error-meta { margin: -6px 0 12px; }
.remaining-preview { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-4); padding: var(--admin-space-3) var(--admin-space-5); border-radius: var(--admin-radius); color: var(--cc-text-secondary, #64748b); background: var(--el-fill-color-light); }
.remaining-preview strong { color: #b45309; font-size: var(--admin-font-section); }
.operation-error { margin-bottom: var(--admin-space-5); }
.operation-error-meta { margin: -var(--admin-space-2) 0 var(--admin-space-5); }
:deep(.el-select), :deep(.el-date-editor) { width: 100%; }
@media (min-width: 1920px) {
.finance-settlement-page {
row-gap: 8px;
}
.settlement-summary .summary-item {
gap: 6px;
}
.settlement-summary .summary-item + .summary-item {
margin-left: 12px;
padding-left: 12px;
}
.summary-item strong {
font-size: 17px;
row-gap: var(--admin-space-3);
}
.settlement-detail-page {
gap: 0;
}
.settlement-detail-header {
min-height: 56px;
padding: 10px 14px;
}
.settlement-detail-summary {
padding: 8px 14px;
}
.settlement-detail-summary .summary-item {
padding: 0 10px;
}
.settlement-detail-summary .summary-item strong {
margin-top: 2px;
font-size: 18px;
}
.settlement-detail-state {
margin: 10px 14px;
margin: var(--admin-space-4) var(--admin-space-5);
}
.settlement-detail-content {
padding: 0 14px 10px;
padding: 0 var(--admin-space-5) var(--admin-space-4);
}
.detail-table-scroll {
margin-bottom: 8px;
}
.partial-summary {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
margin-bottom: 8px;
padding: 8px 0;
}
.partial-summary div {
padding: 0 8px;
margin-bottom: var(--admin-space-3);
}
.settlement-operation-form {
column-gap: 12px;
column-gap: var(--admin-space-5);
}
}
@media (max-width: 720px) {
src/modules/finance/pages/FinancePresentation.test.ts
+24 -33
View File
@@ -3,6 +3,8 @@ import { resolve } from 'node:path'
import { describe, expect, it } from 'vitest'
const settlement = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/FinanceFormalSettlementPage.vue'), 'utf8')
const density = readFileSync(resolve(process.cwd(), 'src/styles/adminDensity.css'), 'utf8')
const financeDensity = readFileSync(resolve(process.cwd(), 'src/modules/finance/financeDensity.css'), 'utf8')
const financeRoutes = readFileSync(resolve(process.cwd(), 'src/modules/finance/routes.ts'), 'utf8')
const accounts = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/FinanceCustomerAccountsView.vue'), 'utf8')
const statements = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/FinanceCustomerStatementsView.vue'), 'utf8')
@@ -22,7 +24,7 @@ describe('finance presentation governance', () => {
expect(financeRoutes).toContain("finance/receivable-statistics")
expect(financeRoutes).toContain("platform:finance:receivable-statistics:list")
expect(financeRoutes).toContain('showPageHeading: false')
expect(settlement).toContain('class="settlement-detail-page surface-panel"')
expect(settlement).toContain('class="settlement-detail-page surface-panel finance-density-detail"')
expect(settlement).toContain('返回列表')
expect(settlement).not.toContain('AppDrawer')
expect(settlement).toContain('登记后剩余余额')
@@ -30,32 +32,27 @@ describe('finance presentation governance', () => {
expect(settlement).toContain('remainingAfter(paymentForm.amount)')
})
it('uses one continuous desktop detail surface with balanced summary and scroll-safe tables', () => {
expect(settlement).toContain('<DetailPageLayout v-else-if="detailMode" class="settlement-detail-page surface-panel"')
it('uses one continuous desktop detail surface with shared summaries and scroll-safe tables', () => {
expect(settlement).toContain('class="settlement-detail-page surface-panel finance-density-detail"')
expect(settlement).toContain('class="settlement-detail-content"')
expect(settlement).toContain('.settlement-detail-header { display: flex; min-height: 68px;')
expect(settlement).toContain('align-items: center;')
expect(settlement).toContain('justify-content: space-between')
expect(settlement).toContain('<el-descriptions :column="4" class="settlement-detail-info">')
for (const title of ['基本信息', '费用明细', '修订记录']) expect(settlement).toContain(`title="${title}"`)
expect(settlement).toContain('class="settlement-detail-info density-descriptions"')
for (const title of ['基本信息', '费用明细', '修订记录']) expect(settlement).toContain('title="' + title + '"')
expect(settlement).toContain(':title="kind === \'receivable\' ? \'收款记录\' : \'付款记录\'"')
expect(settlement.match(/class="detail-table-scroll"/g)).toHaveLength(3)
expect(settlement).toContain('grid-template-columns: repeat(4, minmax(0, 1fr))')
expect(settlement).toContain(':deep(.detail-table-scroll .el-table) { min-width: 920px; }')
expect(settlement).not.toContain('class="detail-section surface-panel"')
expect(settlement.match(/width="min\(760px, 94vw\)"/g)).toHaveLength(2)
expect(settlement.match(/class="settlement-operation-form"/g)).toHaveLength(2)
expect(settlement).toContain('grid-template-columns: repeat(5, minmax(0, 1fr))')
expect(settlement.match(/class="settlement-operation-form density-form"/g)).toHaveLength(2)
expect(settlement).toContain('grid-template-columns: repeat(2, minmax(0, 1fr));')
expect(settlement).toContain('column-gap: 14px;')
expect(settlement).toContain('column-gap: var(--admin-space-5);')
})
it('keeps settlement totals and list actions in the table toolbar', () => {
expect(settlement).toContain('<template #toolbar-start>')
expect(settlement).toContain('class="settlement-summary" aria-label="结算汇总"')
expect(settlement).toContain('class="density-detail-overview settlement-summary" aria-label="结算汇总"')
expect(settlement).toContain('<template #toolbar-actions>')
expect(settlement).toContain('class="settlement-list-actions"')
expect(settlement).toContain('.settlement-summary .summary-item + .summary-item')
expect(financeDensity).toContain('.settlement-summary.density-detail-overview { padding: 0; border: 0; }')
expect(settlement).not.toContain('class="settlement-list-toolbar"')
})
@@ -110,8 +107,8 @@ describe('finance presentation governance', () => {
it('translates source codes and provides reason placeholders', () => {
expect(arap).toContain('sourceTypeDisplay(detail.sourceType)')
expect(arap).toContain('financeOperationActionLabel(log.action)')
expect(arap).toContain('financeOperationResultLabel(log.result)')
expect(arap).toContain('financeOperationActionLabel(row.action)')
expect(arap).toContain('financeOperationResultLabel(row.result)')
expect(arap).toContain('financeDirectionLabel(row.direction)')
expect(arap).toContain('financeDirectionLabel(detail.direction)')
expect(arap).not.toContain("detail.direction === 'RECEIVABLE' ? '应收' : '应付'")
@@ -138,10 +135,10 @@ describe('finance presentation governance', () => {
})
it('opens statement details on a compact dedicated route instead of below the list', () => {
expect(statements).toContain('v-else-if="isDetailRoute" class="surface-panel statement-detail-page"')
expect(statements).toContain('v-else-if="isDetailRoute" class="surface-panel statement-detail-page finance-density-detail"')
expect(statements).toContain('@row-click="openDetail"')
expect(statements).toContain("name: 'finance-customer-statement-detail'")
expect(statements).toContain('.statement-detail-page :deep(.detail-page-layout) { gap: 0; }')
expect(financeDensity).toContain('.detail-page-layout.finance-density-detail { gap: 0; }')
expect(statements).toContain('返回客户对账单')
expect(statements).not.toContain('aria-label="所选对账单联动明细"')
expect(statements).not.toContain('核对账期、金额和结清状态后查看下方业务明细。')
@@ -149,13 +146,10 @@ describe('finance presentation governance', () => {
expect(statements).not.toContain('只读展示当前对账单关联的有效收款记录。')
})
it('uses a compact financial summary row for customer accounts', () => {
expect(accounts).toContain('.finance-account-detail__layout :deep(.detail-page-layout)')
expect(accounts).toContain('gap: 0;')
expect(accounts).toContain('.account-metric + .account-metric')
expect(accounts).toContain('border-left: 1px solid')
expect(accounts).toContain('.account-metric::before')
expect(accounts).toContain('display: none;')
it('uses a shared compact financial summary row for customer accounts', () => {
expect(accounts).toContain('class="density-detail-overview account-metrics"')
expect(financeDensity).toContain('.detail-page-layout.finance-density-detail { gap: 0; }')
expect(density).toContain('.density-detail-overview')
expect(accounts).toContain(':deep(.ledger-query.query-toolbar)')
expect(accounts).toContain('padding: 0;')
expect(accounts).toContain('border: 0;')
@@ -165,15 +159,12 @@ describe('finance presentation governance', () => {
})
it('keeps fee-source details continuous without nested metric and section cards', () => {
expect(arap).toContain('.finance-arap-detail__layout :deep(.detail-page-layout)')
expect(arap).toContain('.arap-metric + .arap-metric')
expect(arap).toContain('border-left: 1px solid')
expect(arap).toContain('.arap-settlement {')
expect(arap).toContain('padding-left: 16px;')
expect(arap).toContain('class="density-detail-overview arap-metrics"')
expect(arap).toContain('class="arap-information density-form-section"')
expect(arap).toContain('class="arap-settlement density-form-section"')
expect(arap).toContain('padding-left: var(--admin-space-6);')
expect(arap).toContain('border-left: 1px solid')
expect(arap).not.toContain('.arap-metric.is-amount { border-color:')
expect(arap).not.toContain('description="费用来源与关联业务摘要"')
expect(arap).not.toContain('description="当前审核和出账状态"')
expect(arap).not.toContain('description="按时间查看审核与结算调整记录"')
for (const description of ['费用来源与关联业务摘要', '当前审核和出账状态', '按时间查看审核与结算调整记录']) expect(arap).not.toContain('description="' + description + '"')
})
})
src/modules/finance/pages/FinanceReceivableStatisticsView.vue
+18 -21
View File
@@ -1,4 +1,6 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import '../financeDensity.css'
import { computed, onMounted, ref } from 'vue'
import { Download, Printer, RotateCcw, Search } from '@lucide/vue'
import { ElMessage } from 'element-plus'
@@ -76,7 +78,7 @@ async function exportCurrent() {
try {
const task = await createPlatformExportTask({ exportType: 'FINANCE_RECEIVABLE_STATISTICS', format: 'XLSX', taskName: `应收款统计表-${month.value}`,
parameters: { month: month.value, ...(customerId.value ? { customerId: customerId.value } : {}) } })
const open = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo })
const open = await showExportTaskCreatedDialog({ taskName: task.taskName, taskNo: task.taskNo, dense: true })
if (open) await router.push({ name: 'download-center' })
} catch (reason) { ElMessage.error(getApiErrorMessage(reason, '应收款统计导出任务创建失败')) }
finally { exporting.value = false }
@@ -87,25 +89,25 @@ onMounted(() => { void loadCustomers(); void load() })
</script>
<template>
<AdminPage class="receivable-statistics-page" spacing="normal">
<AdminPage class="receivable-statistics-page admin-density" spacing="normal">
<el-result v-if="!canView" icon="warning" title="无权访问应收款统计表" sub-title="请联系管理员开通应收款统计查看权限" />
<template v-else>
<section class="surface-panel statistics-query" aria-label="应收款统计筛选">
<div class="query-field"><span>统计月份</span><el-date-picker v-model="month" type="month" value-format="YYYY-MM" format="YYYY年MM月" :clearable="false" aria-label="统计月份" /></div>
<div class="query-field"><span>应收单位</span><el-select v-model="customerId" clearable filterable placeholder="全部应收单位" aria-label="应收单位"><el-option v-for="customer in customers" :key="String(customer.id)" :label="customer.tenantName" :value="String(customer.id)" /></el-select></div>
<div class="query-actions"><el-button type="primary" :loading="loading" @click="search"><Search :size="16" />查询</el-button><el-button @click="reset"><RotateCcw :size="16" />重置</el-button></div>
<div class="report-actions"><el-button :disabled="loading || !result" @click="printCurrent"><Printer :size="16" />打印</el-button><el-button v-if="canExport" type="primary" :loading="exporting" :disabled="loading || exporting" @click="exportCurrent"><Download :size="16" />导出Excel</el-button></div>
</section>
<LoadErrorState v-if="error" title="应收款统计加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState>
<template v-else>
<section class="statistics-summary" aria-label="CNY应收汇总">
<div><span>应收总额</span><strong>CNY {{ money(result?.totalReceivable) }}</strong></div>
<div><span>已收合计</span><strong class="is-received">CNY {{ money(result?.totalReceived) }}</strong></div>
<div><span>余额未收</span><strong class="is-outstanding">CNY {{ money(result?.totalOutstanding) }}</strong></div>
</section>
<dl class="density-detail-overview statistics-summary" aria-label="CNY应收汇总">
<div><dt>应收总额</dt><dd>CNY {{ money(result?.totalReceivable) }}</dd></div>
<div><dt>已收合计</dt><dd class="is-received">CNY {{ money(result?.totalReceived) }}</dd></div>
<div><dt>余额未收</dt><dd class="is-outstanding">CNY {{ money(result?.totalOutstanding) }}</dd></div>
</dl>
<section class="surface-panel statistics-table">
<header><h2>应收款明细</h2><span>共 {{ result?.totalCustomers ?? 0 }} 个应收单位 · 仅统计CNY正式应收结算单</span></header>
<DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="result?.totalCustomers ?? 0" :row-key="statisticsRowKey" preference-key="finance-receivable-statistics-table" aria-label="应收款统计列表" empty-text="当前月份暂无应收数据" @update:page="load()" @update:page-size="page = 1; load()">
<template #toolbar-actions><div class="report-actions"><el-button :disabled="loading || !result" @click="printCurrent"><Printer :size="16" />打印</el-button><el-button v-if="canExport" type="primary" :loading="exporting" :disabled="loading || exporting" @click="exportCurrent"><Download :size="16" />导出Excel</el-button></div></template>
<template #customerName="{ row }">{{ displayCustomerName(row) }}</template><template #totalReceivable="{ row }">{{ money(row.totalReceivable) }}</template><template #totalReceived="{ row }">{{ money(row.totalReceived) }}</template><template #totalOutstanding="{ row }"><span class="outstanding-cell">{{ money(row.totalOutstanding) }}</span></template>
<template #pagination-left>统计月份：{{ result?.statisticsMonth }} · 币种：CNY</template>
</DataTable>
@@ -116,24 +118,19 @@ onMounted(() => { void loadCustomers(); void load() })
</template>
<style scoped>
.statistics-query { display: flex; align-items: end; gap: 12px; padding: 16px; }
.query-field { display: grid; min-width: 220px; gap: 6px; color: var(--cc-muted); font-size: 13px; }
.statistics-query { display: flex; align-items: end; gap: var(--admin-space-5); padding: var(--admin-space-6); }
.query-field { display: grid; min-width: 220px; gap: var(--admin-space-2); color: var(--cc-muted); font-size: var(--admin-font-body); }
.query-field :deep(.el-select), .query-field :deep(.el-date-editor) { width: 100%; }
.query-actions, .report-actions { display: flex; gap: 8px; }
.query-actions, .report-actions { display: flex; gap: var(--admin-space-3); }
.report-actions { margin-left: auto; }
.query-actions :deep(.el-button), .report-actions :deep(.el-button) { margin-left: 0; }
.statistics-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.statistics-summary > div { padding: 16px; border: 1px solid var(--cc-border, #e3e8ef); border-radius: 8px; background: var(--cc-surface, #fff); }
.statistics-summary span { display: block; margin-bottom: 8px; color: var(--cc-muted); font-size: 13px; }
.statistics-summary strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.statistics-summary .is-received { color: var(--el-color-success); }
.statistics-summary .is-outstanding, .outstanding-cell { color: var(--el-color-danger); font-variant-numeric: tabular-nums; }
.outstanding-cell { color: var(--el-color-danger); font-variant-numeric: tabular-nums; }
.statistics-table { overflow: hidden; }
.statistics-table > header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--cc-border, #e3e8ef); }
.statistics-table h2 { margin: 0; font-size: 16px; }
.statistics-table header span { color: var(--cc-muted); font-size: 13px; }
.statistics-table > header { display: flex; align-items: center; justify-content: space-between; padding: var(--admin-space-5) var(--admin-space-6); border-bottom: 1px solid var(--cc-border, #e3e8ef); }
.statistics-table h2 { margin: 0; font-size: var(--admin-font-section); }
.statistics-table header span { color: var(--cc-muted); font-size: var(--admin-font-body); }
@media print {
.statistics-query, :deep(.data-table__pagination) { display: none !important; }
.statistics-query, :deep(.data-table__toolbar), :deep(.data-table__pagination) { display: none !important; }
.receivable-statistics-page { gap: 10px; color: #000; }
.statistics-summary > div, .statistics-table { border-color: #999; box-shadow: none; }
}
src/modules/finance/pages/FinanceSettlementPayablesView.vue
-15
View File
@@ -10,18 +10,3 @@ function openDetail(id: string) { void router.push({ name: 'finance-settlement-p
function back() { void router.push({ name: 'finance-settlement-payables' }) }
</script>
<template><FinanceFormalSettlementPage class="finance-settlement-route finance-settlement-route--payable" kind="payable" :settlement-id="settlementId" @open-detail="openDetail" @back="back" /></template>
<style scoped>
@media (min-width: 1920px) {
.finance-settlement-route :deep(.settlement-detail-page) { width: 100%; max-width: none; }
.finance-settlement-route :deep(.settlement-detail-info .el-descriptions__table > tbody) {
display: grid;
grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr) minmax(110px, .35fr) minmax(0, 1fr);
column-gap: 20px;
row-gap: 10px;
}
.finance-settlement-route :deep(.settlement-detail-info .el-descriptions__table > tbody > tr) { display: contents; }
.finance-settlement-route :deep(.settlement-detail-info .el-descriptions__label) { min-width: 0; white-space: nowrap; }
.finance-settlement-route :deep(.settlement-detail-info .el-descriptions__content) { min-width: 0; }
}
</style>
src/modules/finance/pages/FinanceSettlementReceivablesView.vue
-15
View File
@@ -10,18 +10,3 @@ function openDetail(id: string) { void router.push({ name: 'finance-settlement-r
function back() { void router.push({ name: 'finance-settlement-receivables' }) }
</script>
<template><FinanceFormalSettlementPage class="finance-settlement-route finance-settlement-route--receivable" kind="receivable" :settlement-id="settlementId" @open-detail="openDetail" @back="back" /></template>
<style scoped>
@media (min-width: 1920px) {
.finance-settlement-route :deep(.settlement-detail-page) { width: 100%; max-width: none; }
.finance-settlement-route :deep(.settlement-detail-info .el-descriptions__table > tbody) {
display: grid;
grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr) minmax(110px, .35fr) minmax(0, 1fr);
column-gap: 20px;
row-gap: 10px;
}
.finance-settlement-route :deep(.settlement-detail-info .el-descriptions__table > tbody > tr) { display: contents; }
.finance-settlement-route :deep(.settlement-detail-info .el-descriptions__label) { min-width: 0; white-space: nowrap; }
.finance-settlement-route :deep(.settlement-detail-info .el-descriptions__content) { min-width: 0; }
}
</style>
src/modules/finance/pages/FinanceSettlementRouteLayout.test.ts
+9 -5
View File
@@ -9,11 +9,15 @@ describe('Finance settlement route 1920px layout', () => {
it.each([
['应收', receivableSource, 'finance-settlement-route--receivable'],
['应付', payableSource, 'finance-settlement-route--payable'],
])('uses the full detail workspace and a readable two-field information grid for %s', (_label, source, routeClass) => {
])('delegates the detail grid to the shared settlement page for %s', (_label, source, routeClass) => {
expect(source).toContain(routeClass)
expect(source).toContain('@media (min-width: 1920px)')
expect(source).toContain('.finance-settlement-route :deep(.settlement-detail-page) { width: 100%; max-width: none; }')
expect(source).toContain('grid-template-columns: minmax(110px, .35fr) minmax(0, 1fr) minmax(110px, .35fr) minmax(0, 1fr)')
expect(source).toContain('> tbody > tr) { display: contents; }')
expect(source).toContain('<FinanceFormalSettlementPage')
expect(source).toContain(':settlement-id="settlementId"')
expect(source).toContain('@open-detail="openDetail" @back="back"')
expect(source).toContain('kind="' + (routeClass.endsWith('receivable') ? 'receivable' : 'payable') + '"')
expect(source).not.toContain('<style')
const shared = readFileSync(resolve(process.cwd(), 'src/modules/finance/pages/FinanceFormalSettlementPage.vue'), 'utf8')
expect(shared).toContain(':column="4" class="settlement-detail-info density-descriptions"')
expect(shared).toContain('finance-density-detail')
})
})
src/modules/iam/iamDensity.css
+8
View File
@@ -0,0 +1,8 @@
/* IAM-only layout; the shared stylesheet owns forms, dialogs and row buttons. */
.iam-density .permission-tree { margin-top: 0; padding: 0; border-top: 0; }
.iam-density .permission-tree .el-tree-node__content { height: auto; min-height: var(--admin-row-height); }
.iam-density .permission-node { align-items: flex-start; gap: var(--admin-space-3); padding-right: var(--admin-space-5); }
.iam-density .permission-node span { white-space: normal; overflow-wrap: anywhere; }
.iam-density :is(.permission-node code, .code-value, .endpoint-cell code) { font-size: var(--admin-font-caption); }
.iam-density .form-callout { gap: var(--admin-space-4); margin-top: var(--admin-space-5); padding: var(--admin-space-5); border-radius: var(--admin-radius); }
.iam-density .form-callout strong, .iam-density .form-callout p { font-size: var(--admin-font-caption); }
src/modules/iam/pages/InternalUsersView.test.ts
+5 -5
View File
@@ -79,11 +79,11 @@ enableAutoUnmount(afterEach)
afterAll(() => vi.unstubAllGlobals())
describe('InternalUsersView platform internal user management', () => {
it('renders row business actions as colored outlined buttons with prototype icons', () => {
expect(internalUsersSource).toContain('size="small" plain type="primary" @click="openEdit')
expect(internalUsersSource).toContain('size="small" plain :type="(row as PlatformManagedUser).status')
expect(internalUsersSource).toContain('<Pencil :size="15" />编辑')
expect(internalUsersSource).toContain('<Power :size="15" />')
it('renders row business actions as shared outlined text buttons', () => {
expect(internalUsersSource).toContain('size="small" data-tone="neutral" @click="openEdit')
expect(internalUsersSource).toContain('size="small" :data-tone="(row as PlatformManagedUser).status')
expect(internalUsersSource).toMatch(/>\s*编辑\s*<\/el-button>/)
expect(internalUsersSource).toContain(':data-tone=')
expect(internalUsersSource).not.toContain('v-if="canChangeStatus" link')
})
src/modules/iam/pages/InternalUsersView.vue
+16 -14
View File
@@ -1,7 +1,9 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import '../iamDensity.css'
import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { Pencil, Plus, Power } from '@lucide/vue'
import { Plus } from '@lucide/vue'
import {
changePlatformManagedUserStatus,
createPlatformManagedUser,
@@ -301,7 +303,7 @@ async function toggleStatus(row: PlatformManagedUser) {
const targetStatus = row.status === 'ACTIVE' ? 'DISABLED' : 'ACTIVE'
const targetLabel = targetStatus === 'ACTIVE' ? '启用' : '禁用'
try {
await ElMessageBox.confirm(`确认${targetLabel}用户“${row.displayName}”吗？`, `${targetLabel}用户`, {
await ElMessageBox.confirm(`确认${targetLabel}用户“${row.displayName}”吗？`, `${targetLabel}用户`, { customClass: 'admin-density-confirm',
confirmButtonText: `确认${targetLabel}`,
cancelButtonText: '取消',
type: targetStatus === 'DISABLED' ? 'warning' : 'info',
@@ -342,7 +344,7 @@ onMounted(loadInitialData)
</script>
<template>
<AdminPage as="div">
<AdminPage class="admin-density iam-density" as="div">
<ListPageLayout aria-label="内部用户管理">
<template #toolbar>
<QueryToolbar
@@ -365,16 +367,16 @@ onMounted(loadInitialData)
:loading="loading" :total="total" aria-label="内部用户列表" row-key="membershipId" empty-text="没有符合筛选条件的内部用户">
<template #toolbar-actions><el-button v-if="canCreate" type="primary" @click="openCreate"><Plus :size="16" />新增用户</el-button></template>
<template #actions="{ row }">
<div class="table-actions">
<el-button v-if="canEdit || canChangeStatus || canResetPassword" size="small" plain type="primary" @click="openEdit(row as PlatformManagedUser)">
<Pencil :size="15" />编辑
<div class="table-actions density-actions">
<el-button class="density-action" v-if="canEdit || canChangeStatus || canResetPassword" size="small" data-tone="neutral" @click="openEdit(row as PlatformManagedUser)">
编辑
</el-button>
<el-button v-if="canChangeStatus" size="small" plain :type="(row as PlatformManagedUser).status === 'ACTIVE' ? 'danger' : 'success'"
<el-button class="density-action" v-if="canChangeStatus" size="small" :data-tone="(row as PlatformManagedUser).status === 'ACTIVE' ? 'danger' : 'success'"
:loading="rowActionId === String((row as PlatformManagedUser).membershipId)"
:disabled="cannotDisable(row as PlatformManagedUser)"
:title="(row as PlatformManagedUser).protectedAccount ? '系统管理员不能被禁用' : isCurrentUser(row as PlatformManagedUser) ? '不能禁用当前登录用户' : undefined"
@click="toggleStatus(row as PlatformManagedUser)">
<Power :size="15" />{{ (row as PlatformManagedUser).status === 'ACTIVE' ? '禁用' : '启用' }}
{{ (row as PlatformManagedUser).status === 'ACTIVE' ? '禁用' : '启用' }}
</el-button>
</div>
</template>
@@ -391,9 +393,9 @@ onMounted(loadInitialData)
</section>
</ListPageLayout>
<AppDialog v-model="editorOpen" :title="editorLabel" width="min(650px, calc(100vw - 28px))" class="internal-user-editor-dialog" destroy-on-close :confirm-loading="saving" :confirm-text="editingUser ? '保存修改' : '确认添加'" @confirm="saveUser">
<el-form ref="formRef" :model="form" :rules="formRules" label-position="top">
<FormSection title="用户资料" description="维护登录身份、联系方式与平台角色。">
<AppDialog v-model="editorOpen" :title="editorLabel" width="min(650px, calc(100vw - 28px))" class="internal-user-editor-dialog admin-density-dialog iam-density" destroy-on-close :confirm-loading="saving" :confirm-text="editingUser ? '保存修改' : '确认添加'" @confirm="saveUser">
<el-form class="density-form" ref="formRef" :model="form" :rules="formRules" label-position="top">
<FormSection class="density-form-section" title="用户资料" description="维护登录身份、联系方式与平台角色。">
<div class="form-grid two-cols">
<el-form-item label="用户名" prop="username" required>
<el-input v-model="form.username" :disabled="Boolean(editingUser)" placeholder="登录用户名" maxlength="64" />
@@ -439,7 +441,7 @@ onMounted(loadInitialData)
</div>
</FormSection>
<FormSection v-if="!editingUser || canResetPassword" title="登录密码" description="密码为 8-64 位，并同时包含字母和数字。">
<FormSection class="density-form-section" v-if="!editingUser || canResetPassword" title="登录密码" description="密码为 8-64 位，并同时包含字母和数字。">
<el-checkbox v-if="editingUser" v-model="form.resetPassword">同时重置密码</el-checkbox>
<div v-if="!editingUser || form.resetPassword" class="form-grid two-cols password-fields">
<el-form-item :label="editingUser ? '新密码' : '初始密码'" prop="password" required>
@@ -456,8 +458,8 @@ onMounted(loadInitialData)
</template>
<style scoped>
.password-fields { margin-top: 16px; }
.field-help, .field-error { margin: 6px 0 0; font-size: 12px; line-height: 1.5; }
.password-fields { margin-top: var(--admin-space-6); }
.field-help, .field-error { margin: 6px 0 0; font-size: var(--admin-font-caption); line-height: 1.5; }
.field-help { color: var(--cc-text-secondary); }
.field-error { color: var(--el-color-danger); }
:global(.internal-user-editor-dialog) { max-height: min(760px, calc(100vh - 32px)); display: flex; flex-direction: column; }
src/modules/iam/pages/PermissionsDialog.behavior.test.ts
+69
View File
@@ -0,0 +1,69 @@
import ElementPlus, { type FormInstance } from 'element-plus'
import { createPinia, setActivePinia } from 'pinia'
import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
import { afterEach, describe, expect, it, vi } from 'vitest'
import { useAuthStore } from '@/core/auth/auth'
import AppDialog from '@/shared/components/AppDialog.vue'
import { createPlatformPermission, listPlatformPermissions, updatePlatformPermission } from '../api/platformIam'
import PermissionsView from './PermissionsView.vue'
vi.mock('../api/platformIam', () => ({
listPlatformPermissions: vi.fn(), createPlatformPermission: vi.fn(), updatePlatformPermission: vi.fn(),
changePlatformPermissionStatus: vi.fn(), deletePlatformPermission: vi.fn(),
}))
enableAutoUnmount(afterEach)
afterEach(() => { document.body.innerHTML = ''; vi.unstubAllGlobals(); vi.clearAllMocks() })
describe('permission editor modal', () => {
it.each(['create', 'edit'])('keeps the %s form in the centered dialog and preserves failed writes', async mode => {
vi.stubGlobal('ResizeObserver', class { observe() {} unobserve() {} disconnect() {} })
const pinia = createPinia()
setActivePinia(pinia)
const auth = useAuthStore()
auth.isServerSession = true
auth.permissions = ['platform:permission:list', 'platform:permission:create', 'platform:permission:edit']
vi.mocked(listPlatformPermissions).mockResolvedValue([{
id: '90071992547409931', tenantId: 0, appCode: 'PLATFORM', permissionType: 'MENU', parentId: 0,
permissionCode: 'platform:sample:list', permissionName: '测试菜单', routePath: '/sample',
httpMethod: null, sortNo: 10, status: 'ACTIVE',
}])
vi.mocked(createPlatformPermission).mockRejectedValue(new Error('保存失败'))
vi.mocked(updatePlatformPermission).mockRejectedValue(new Error('保存失败'))
const wrapper = mount(PermissionsView, { attachTo: document.body, global: { plugins: [pinia, ElementPlus] } })
await flushPromises()
await wrapper.findAll(mode === 'create' ? 'button' : '.el-table__body-wrapper button').find(button => button.text().trim() === (mode === 'create' ? '新增权限' : '编辑'))!.trigger('click')
await flushPromises()
const dialog = document.querySelector<HTMLElement>('.el-dialog.permission-editor-dialog.admin-density-dialog')!
expect(dialog).not.toBeNull()
expect(dialog.style.getPropertyValue('--el-dialog-width')).toBe('min(720px, calc(100vw - 28px))')
expect(document.querySelector('.el-drawer')).toBeNull()
expect(dialog.querySelectorAll('.el-form-item')).toHaveLength(6)
const codeInput = dialog.querySelector<HTMLInputElement>('input[placeholder="如：platform:customer:list"]')!
expect(codeInput.disabled).toBe(mode === 'edit')
// Vitest externalizes Element Plus: its CJS validator interop differs from the Vite browser bundle.
// Exercise the dialog's validation gate explicitly, without changing production rules.
const form = wrapper.findComponent({ name: 'ElForm' })
expect(form.props('rules').name).toEqual(expect.arrayContaining([expect.objectContaining({ required: true })]))
const validate = vi.spyOn(form.vm.$.exposed as FormInstance, 'validate').mockResolvedValue(true)
if (mode === 'create') {
validate.mockRejectedValueOnce({ name: [{ message: '请输入权限名称' }] })
wrapper.getComponent(AppDialog).vm.$emit('confirm')
await flushPromises()
expect(createPlatformPermission).not.toHaveBeenCalled()
for (const [placeholder, value] of [['用户可理解的中文名称', '新增菜单'], ['如：platform:customer:list', 'platform:new:list'], ['如：/customers', '/new']]) {
const input = dialog.querySelector<HTMLInputElement>(`input[placeholder="${placeholder}"]`)!
input.value = value!
input.dispatchEvent(new Event('input', { bubbles: true }))
}
}
await flushPromises()
wrapper.getComponent(AppDialog).vm.$emit('confirm')
await flushPromises()
if (mode === 'create') expect(createPlatformPermission).toHaveBeenCalledWith({ type: 'MENU', code: 'platform:new:list', name: '新增菜单', parentId: '0', routePath: '/new', httpMethod: null, sortNo: 10 })
else expect(updatePlatformPermission).toHaveBeenCalledWith('90071992547409931', { name: '测试菜单', parentId: null, routePath: '/sample', httpMethod: null, sortNo: 10 })
expect(wrapper.getComponent(AppDialog).props('modelValue')).toBe(true)
expect(codeInput.value).toBe(mode === 'create' ? 'platform:new:list' : 'platform:sample:list')
})
})
src/modules/iam/pages/PermissionsView.test.ts
+11 -11
View File
@@ -53,7 +53,7 @@ function mountServerView(permissionCodes = ['platform:permission:list', 'platfor
AdminPage: { template: '<main><slot /></main>' },
ListPageLayout: { template: '<section><slot name="toolbar" /><slot name="state" /><slot /></section>' },
FormSection: { template: '<section><slot /></section>' },
AppDrawer: { template: '<section><slot /><slot name="footer" /></section>' },
AppDialog: { template: '<section><slot /><slot name="footer" /></section>' },
LoadErrorState: { props: ['message'], template: '<div role="alert">{{ message }}<slot name="details" /></div>' },
DataTable: {
props: ['data'],
@@ -85,16 +85,16 @@ describe('PermissionsView IAM mode', () => {
expect(permissionsSource).toContain("(row as Permission).status || '—'")
})
it('uses outlined business action buttons while keeping tree view helpers as links', () => {
expect(permissionsSource).toContain('size="small" plain type="primary" @click="openCreate((row as Permission).id)"')
expect(permissionsSource).toContain('size="small" plain type="primary" :disabled="rowActionId')
expect(permissionsSource).toContain('size="small" plain :type="(row as Permission).status')
expect(permissionsSource).toContain('size="small" plain type="danger"')
expect(permissionsSource).toContain('size="small" plain :aria-label="moreActionsLabel(row as Permission)"')
expect(permissionsSource).toContain('<Plus :size="15" />添加下级')
expect(permissionsSource).toContain('<Pencil :size="15" />编辑')
expect(permissionsSource).toContain('<Power :size="15" />')
expect(permissionsSource).toContain('<Trash2 :size="15" />删除')
expect(permissionsSource).toContain('<MoreHorizontal :size="16" />')
expect(permissionsSource).toContain('size="small" data-tone="neutral" @click="openCreate((row as Permission).id)"')
expect(permissionsSource).toContain('size="small" data-tone="neutral" :disabled="rowActionId')
expect(permissionsSource).toContain('size="small" :data-tone="(row as Permission).status')
expect(permissionsSource).toContain('size="small" data-tone="danger"')
expect(permissionsSource).toContain('size="small" :aria-label="moreActionsLabel(row as Permission)"')
expect(permissionsSource).toContain('>添加下级</el-button>')
expect(permissionsSource).toContain('>编辑</el-button>')
expect(permissionsSource).toContain(':data-tone=')
expect(permissionsSource).toContain('>删除</el-button>')
expect(permissionsSource).toContain('<MoreHorizontal aria-hidden="true" :size="16" />')
expect(permissionsSource).toContain('<el-button link type="primary" @click="expandAllRows">展开全部</el-button>')
expect(permissionsSource).not.toContain('canAddChild(row as Permission)" link')
expect(permissionsSource).not.toContain('canEditRow(row as Permission)" link')
src/modules/iam/pages/PermissionsView.vue
+21 -19
View File
@@ -1,12 +1,14 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import '../iamDensity.css'
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { Braces, FolderTree, MoreHorizontal, Pencil, Plus, Power, ShieldCheck, Trash2 } from '@lucide/vue'
import { Braces, FolderTree, MoreHorizontal, Plus, ShieldCheck } from '@lucide/vue'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
import AdminPage from '@/shared/components/AdminPage.vue'
import AppDrawer from '@/shared/components/AppDrawer.vue'
import AppDialog from '@/shared/components/AppDialog.vue'
import FormSection from '@/shared/components/FormSection.vue'
import ListPageLayout from '@/shared/components/ListPageLayout.vue'
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
@@ -203,7 +205,7 @@ async function toggleStatus(row: Permission) {
if (row.builtIn) return
const target = row.status === '启用' ? '停用' : '启用'
try {
await ElMessageBox.confirm(`确认${target}权限“${row.name}”吗？`, '权限状态', { confirmButtonText: '确认', cancelButtonText: '取消' })
await ElMessageBox.confirm(`确认${target}权限“${row.name}”吗？`, '权限状态', { customClass: 'admin-density-confirm', confirmButtonText: '确认', cancelButtonText: '取消' })
rowActionId.value = row.id
const updated = await changePlatformPermissionStatus(row.id, target === '启用' ? 'ACTIVE' : 'DISABLED')
Object.assign(row, mapPlatformPermission(updated))
@@ -219,7 +221,7 @@ async function toggleStatus(row: Permission) {
async function removePermission(row: Permission) {
if (row.builtIn) return
try {
await ElMessageBox.confirm(`确认删除权限“${row.name}”吗？删除前需确保没有下级资源且未分配给角色。`, '删除权限', { confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' })
await ElMessageBox.confirm(`确认删除权限“${row.name}”吗？删除前需确保没有下级资源且未分配给角色。`, '删除权限', { customClass: 'admin-density-confirm', confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' })
rowActionId.value = row.id
await deletePlatformPermission(row.id)
await loadPermissions()
@@ -268,7 +270,7 @@ onMounted(loadPermissions)
</script>
<template>
<AdminPage as="div">
<AdminPage class="admin-density iam-density" as="div">
<ListPageLayout aria-label="平台权限资源管理">
<template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="权限筛选" :fields="queryFields" preference-key="permissions-query" @search="applyFilters" /></template>
<template v-if="loadError" #state>
@@ -282,14 +284,14 @@ onMounted(loadPermissions)
<template #toolbar-start><div class="permission-tree-tools"><div class="legend-list"><span><i class="is-menu" />目录 / 菜单</span><span><i class="is-action" />操作</span><span><i class="is-api" />接口预留</span><span class="permission-protection-hint">受保护资源不可编辑、停用或删除</span></div><div class="tree-view-actions"><el-button link type="primary" @click="expandAllRows">展开全部</el-button><el-button link @click="collapseActionRows">收起操作权限</el-button></div></div></template>
<template #toolbar-actions><el-button v-if="canCreate" type="primary" @click="openCreate(null)"><Plus :size="16" />新增权限</el-button></template>
<template #actions="{ row }">
<div v-if="permissionActionCount(row as Permission) > 0 || (row as Permission).builtIn" class="table-actions">
<el-button v-if="canAddChild(row as Permission)" size="small" plain type="primary" @click="openCreate((row as Permission).id)"><Plus :size="15" />添加下级</el-button>
<el-button v-if="canEditRow(row as Permission)" size="small" plain type="primary" :disabled="rowActionId === (row as Permission).id" @click="openEdit(row as Permission)"><Pencil :size="15" />编辑</el-button>
<el-button v-if="canChangeStatusRow(row as Permission)" size="small" plain :type="(row as Permission).status === '启用' ? 'danger' : 'success'" :loading="rowActionId === (row as Permission).id" @click="toggleStatus(row as Permission)"><Power :size="15" />{{ (row as Permission).status === '启用' ? '停用' : '启用' }}</el-button>
<el-button v-if="showDeleteDirect(row as Permission)" size="small" plain type="danger" :disabled="rowActionId === (row as Permission).id" @click="removePermission(row as Permission)"><Trash2 :size="15" />删除</el-button>
<div v-if="permissionActionCount(row as Permission) > 0 || (row as Permission).builtIn" class="table-actions density-actions">
<el-button class="density-action" v-if="canAddChild(row as Permission)" size="small" data-tone="neutral" @click="openCreate((row as Permission).id)">添加下级</el-button>
<el-button class="density-action" v-if="canEditRow(row as Permission)" size="small" data-tone="neutral" :disabled="rowActionId === (row as Permission).id" @click="openEdit(row as Permission)">编辑</el-button>
<el-button class="density-action" v-if="canChangeStatusRow(row as Permission)" size="small" :data-tone="(row as Permission).status === '启用' ? 'danger' : 'success'" :loading="rowActionId === (row as Permission).id" @click="toggleStatus(row as Permission)">{{ (row as Permission).status === '启用' ? '停用' : '启用' }}</el-button>
<el-button class="density-action" v-if="showDeleteDirect(row as Permission)" size="small" data-tone="danger" :disabled="rowActionId === (row as Permission).id" @click="removePermission(row as Permission)">删除</el-button>
<el-dropdown v-if="showDeleteMore(row as Permission)" trigger="click" @command="(command: string) => command === 'delete' && removePermission(row as Permission)">
<el-button size="small" plain :aria-label="moreActionsLabel(row as Permission)" :title="moreActionsLabel(row as Permission)"><MoreHorizontal :size="16" /></el-button>
<template #dropdown><el-dropdown-menu><el-dropdown-item command="delete" :disabled="rowActionId === (row as Permission).id" class="danger-menu-item"><Trash2 :size="15" />删除</el-dropdown-item></el-dropdown-menu></template>
<el-button data-tone="neutral" class="density-action" size="small" :aria-label="moreActionsLabel(row as Permission)" :title="moreActionsLabel(row as Permission)"><MoreHorizontal aria-hidden="true" :size="16" /></el-button>
<template #dropdown><el-dropdown-menu><el-dropdown-item command="delete" :disabled="rowActionId === (row as Permission).id" class="danger-menu-item">删除</el-dropdown-item></el-dropdown-menu></template>
</el-dropdown>
</div>
<span v-else class="secondary-text">仅查看</span>
@@ -303,9 +305,9 @@ onMounted(loadPermissions)
</section>
</ListPageLayout>
<AppDrawer v-model="editorOpen" :title="form.id ? '编辑权限资源' : '新增权限资源'" size="600px" class="business-drawer editor-drawer" :modal="false" :confirm-loading="saving" :confirm-text="form.id ? '保存修改' : '保存权限'" :show-confirm="form.id ? canEdit : canCreate" @confirm="savePermission">
<el-form ref="formRef" :model="form" :rules="formRules" label-position="top" class="drawer-form">
<FormSection title="资源定义" description="定义权限名称、编码、类型和层级关系。">
<AppDialog v-model="editorOpen" :title="form.id ? '编辑权限资源' : '新增权限资源'" width="min(720px, calc(100vw - 28px))" class="permission-editor-dialog admin-density-dialog iam-density" :confirm-loading="saving" :confirm-text="form.id ? '保存修改' : '保存权限'" :show-confirm="form.id ? canEdit : canCreate" @confirm="savePermission">
<el-form ref="formRef" :model="form" :rules="formRules" label-position="top" class="density-form">
<FormSection class="density-form-section" title="资源定义" description="定义权限名称、编码、类型和层级关系。">
<div class="form-grid two-cols">
<el-form-item label="权限名称" prop="name" required><el-input v-model="form.name" placeholder="用户可理解的中文名称" maxlength="64" /></el-form-item>
<el-form-item label="权限编码" prop="code" required><el-input v-model="form.code" :disabled="Boolean(form.id)" placeholder="如：platform:customer:list" maxlength="128" /></el-form-item>
@@ -318,17 +320,17 @@ onMounted(loadPermissions)
</FormSection>
<div class="form-callout"><Braces :size="18" /><div><strong>权限编码约定</strong><p>使用稳定的“业务域:资源:动作”编码；资源类型与后端 MENU、PAGE、BUTTON、API 契约一致。</p></div></div>
</el-form>
</AppDrawer>
</AppDialog>
</AdminPage>
</template>
<style scoped>
.permission-tree-tools { display: flex; align-items: center; gap: 16px; }
.permission-tree-tools { display: flex; align-items: center; gap: var(--admin-space-6); }
.permission-protection-hint { color: var(--cc-muted); }
.tree-view-actions { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.tree-view-actions { display: flex; align-items: center; gap: var(--admin-space-1); white-space: nowrap; }
.tree-view-actions .el-button + .el-button { margin-left: 0; }
.permission-name > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.permission-name small { color: var(--cc-muted); font-size: 11px; line-height: 1.35; }
.permission-name small { color: var(--cc-muted); font-size: var(--admin-font-caption); line-height: 1.35; }
:deep(.danger-menu-item:not(.is-disabled)) { color: var(--el-color-danger); }
@media (max-width: 720px) {
src/modules/iam/pages/RolesView.test.ts
+6 -6
View File
@@ -77,12 +77,12 @@ describe('RolesView', () => {
})
it('uses bordered striped tables and semantic role operation buttons', () => {
expect(rolesSource).toContain('border stripe')
expect(rolesSource).toContain('size="small" plain type="primary"')
expect(rolesSource).toContain('size="small" plain :type=')
expect(rolesSource).toContain('size="small" plain type="danger"')
expect(rolesSource).toContain('<Pencil :size="15" />')
expect(rolesSource).toContain('<Power :size="15" />')
expect(rolesSource).toContain('<Trash2 :size="15" />')
expect(rolesSource).toContain('size="small" data-tone="neutral"')
expect(rolesSource).toContain('size="small" :data-tone=')
expect(rolesSource).toContain('size="small" data-tone="danger"')
expect(rolesSource).toContain('>配置</el-button>')
expect(rolesSource).toContain(':data-tone=')
expect(rolesSource).toContain('>删除</el-button>')
expect(rolesSource).toContain('@media (max-width: 720px)')
})
beforeEach(() => {
src/modules/iam/pages/RolesView.vue
+15 -12
View File
@@ -1,7 +1,9 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import '../iamDensity.css'
import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { Pencil, Plus, Power, ShieldCheck, Trash2 } from '@lucide/vue'
import { Plus, ShieldCheck } from '@lucide/vue'
import {
changePlatformRoleStatus,
createPlatformRole,
@@ -195,7 +197,7 @@ async function removeRole(row: Role) {
if (row.builtIn) { ElMessage.warning('系统内置角色不能删除'); return }
if (row.userCount > 0) { ElMessage.warning('请先移除该角色下的用户'); return }
try {
await ElMessageBox.confirm(`确认删除角色“${row.name}”吗？`, '删除角色', { confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' })
await ElMessageBox.confirm(`确认删除角色“${row.name}”吗？`, '删除角色', { customClass: 'admin-density-confirm', confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' })
rowActionId.value = row.id
await deletePlatformRole(row.id)
serverRoles.value = serverRoles.value.filter((item) => item.id !== row.id)
@@ -212,7 +214,7 @@ async function toggleStatus(row: Role) {
if (row.builtIn) { ElMessage.warning('系统内置角色不能停用'); return }
const target = row.status === '启用' ? '停用' : '启用'
try {
await ElMessageBox.confirm(`确认${target}角色“${row.name}”吗？`, '角色状态', { confirmButtonText: '确认', cancelButtonText: '取消' })
await ElMessageBox.confirm(`确认${target}角色“${row.name}”吗？`, '角色状态', { customClass: 'admin-density-confirm', confirmButtonText: '确认', cancelButtonText: '取消' })
rowActionId.value = row.id
const updated = await changePlatformRoleStatus(row.id, target === '启用' ? 'ACTIVE' : 'DISABLED')
Object.assign(row, mapPlatformRole(updated))
@@ -234,7 +236,7 @@ onMounted(loadRoles)
</script>
<template>
<AdminPage as="div">
<AdminPage class="admin-density iam-density" as="div">
<ListPageLayout aria-label="平台角色管理">
<template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="角色筛选" :fields="queryFields" preference-key="roles-query" @search="applyFilters" /></template>
<template v-if="loadError" #state>
@@ -246,7 +248,7 @@ onMounted(loadRoles)
<section v-if="!loadError" class="surface-panel table-panel">
<DataTable v-model:page="page" v-model:page-size="pageSize" :data="pagedRows" :columns="roleColumns" preference-key="roles-table" :loading="loading" :total="filteredRows.length" row-key="id" border stripe aria-label="平台角色列表" empty-text="没有符合条件的角色">
<template #toolbar-actions><el-button v-if="canCreate" type="primary" @click="openCreate"><Plus :size="16" />新增角色</el-button></template>
<template #actions="{ row }"><div v-if="canEdit || canGrant || access.can('platform:role:status') || access.can('platform:role:delete')" class="table-actions"><el-button v-if="canEdit || canGrant" size="small" plain type="primary" :disabled="rowActionId === (row as Role).id || (row as Role).builtIn" @click="openEdit(row as Role)"><Pencil :size="15" />配置</el-button><el-button v-if="access.can('platform:role:status')" size="small" plain :type="(row as Role).status === '启用' ? 'danger' : 'success'" :loading="rowActionId === (row as Role).id" :disabled="(row as Role).builtIn" @click="toggleStatus(row as Role)"><Power :size="15" />{{ (row as Role).status === '启用' ? '停用' : '启用' }}</el-button><el-button v-if="access.can('platform:role:delete')" size="small" plain type="danger" :disabled="(row as Role).builtIn || (row as Role).userCount > 0 || rowActionId === (row as Role).id" @click="removeRole(row as Role)"><Trash2 :size="15" />删除</el-button></div><span v-else class="secondary-text">仅查看</span></template>
<template #actions="{ row }"><div v-if="canEdit || canGrant || access.can('platform:role:status') || access.can('platform:role:delete')" class="table-actions density-actions"><el-button class="density-action" v-if="canEdit || canGrant" size="small" data-tone="neutral" :disabled="rowActionId === (row as Role).id || (row as Role).builtIn" @click="openEdit(row as Role)">配置</el-button><el-button class="density-action" v-if="access.can('platform:role:status')" size="small" :data-tone="(row as Role).status === '启用' ? 'danger' : 'success'" :loading="rowActionId === (row as Role).id" :disabled="(row as Role).builtIn" @click="toggleStatus(row as Role)">{{ (row as Role).status === '启用' ? '停用' : '启用' }}</el-button><el-button class="density-action" v-if="access.can('platform:role:delete')" size="small" data-tone="danger" :disabled="(row as Role).builtIn || (row as Role).userCount > 0 || rowActionId === (row as Role).id" @click="removeRole(row as Role)">删除</el-button></div><span v-else class="secondary-text">仅查看</span></template>
<template #role="{ row }"><div class="role-cell"><span><ShieldCheck :size="18" /></span><div><strong>{{ (row as Role).name }}</strong></div></div></template>
<template #permissionSummary="{ row }"><div class="primary-cell"><strong>{{ permissionSummary(row as Role) }}</strong><span>平台 IAM 权限</span></div></template>
<template #roleType="{ row }"><el-tag :type="(row as Role).builtIn ? 'warning' : 'info'" effect="plain" size="small">{{ (row as Role).builtIn ? '系统内置' : '自定义' }}</el-tag></template>
@@ -256,15 +258,15 @@ onMounted(loadRoles)
</section>
</ListPageLayout>
<AppDialog v-model="editorOpen" :title="form.id ? '配置角色' : '新增角色'" width="min(860px, calc(100vw - 28px))" class="role-editor-dialog" :confirm-loading="saving" confirm-text="保存角色" :show-confirm="form.id ? canEdit || canGrant : canCreate" destroy-on-close @opened="initializePermissionSelection" @confirm="saveRole">
<el-form ref="formRef" :model="form" :rules="formRules" label-position="top" class="role-editor-form">
<AppDialog v-model="editorOpen" :title="form.id ? '配置角色' : '新增角色'" width="min(860px, calc(100vw - 28px))" class="role-editor-dialog admin-density-dialog iam-density" :confirm-loading="saving" confirm-text="保存角色" :show-confirm="form.id ? canEdit || canGrant : canCreate" destroy-on-close @opened="initializePermissionSelection" @confirm="saveRole">
<el-form ref="formRef" :model="form" :rules="formRules" label-position="top" class="role-editor-form density-form">
<div class="role-editor-layout">
<FormSection title="基本信息" description="维护角色名称、编码和职责说明。" class="role-editor-basic">
<FormSection title="基本信息" description="维护角色名称、编码和职责说明。" class="role-editor-basic density-form-section">
<el-form-item label="角色名称" prop="name" required><el-input v-model="form.name" :disabled="Boolean(form.id) && !canEdit" placeholder="如：订单运营专员" maxlength="64" /></el-form-item>
<el-form-item label="角色编码" prop="code" required><el-input v-model="form.code" :disabled="Boolean(form.id)" placeholder="如：ORDER_OPERATOR" maxlength="64" /></el-form-item>
<el-form-item label="角色说明"><el-input v-model="form.description" :disabled="Boolean(form.id) && !canEdit" type="textarea" :rows="3" placeholder="说明该角色的工作范围" maxlength="200" show-word-limit /></el-form-item>
</FormSection>
<FormSection v-if="canGrant" title="菜单与操作权限" :description="`按当前后台菜单分组；勾选上级可全选下级，部分选中时显示半选，当前 ${form.permissionIds.length} 项授权。`" class="role-editor-permissions"><el-tree ref="treeRef" class="permission-tree" :data="permissionTree" node-key="id" show-checkbox :default-expanded-keys="permissionGroupIds" :props="{ label: 'name', children: 'children' }" @check="syncPermissionIds"><template #default="{ data }"><div class="permission-node" :class="{ 'is-navigation-group': !data.permissionId }"><span>{{ data.name }}</span><code v-if="data.code">{{ data.code }}</code></div></template></el-tree></FormSection>
<FormSection v-if="canGrant" title="菜单与操作权限" :description="`按当前后台菜单分组；勾选上级可全选下级，部分选中时显示半选，当前 ${form.permissionIds.length} 项授权。`" class="role-editor-permissions density-form-section"><el-tree ref="treeRef" class="permission-tree" :data="permissionTree" node-key="id" show-checkbox :default-expanded-keys="permissionGroupIds" :props="{ label: 'name', children: 'children' }" @check="syncPermissionIds"><template #default="{ data }"><div class="permission-node" :class="{ 'is-navigation-group': !data.permissionId }"><span>{{ data.name }}</span><code v-if="data.code">{{ data.code }}</code></div></template></el-tree></FormSection>
</div>
</el-form>
</AppDialog>
@@ -272,8 +274,9 @@ onMounted(loadRoles)
</template>
<style scoped>
.role-editor-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 20px; }
.role-editor-permissions { min-width: 0; padding-left: 20px; border-left: 1px solid var(--cc-border); }
.role-editor-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: var(--admin-space-5); }
.role-editor-layout:not(:has(.role-editor-permissions)) { grid-template-columns: minmax(0, 1fr); }
.role-editor-layout > .role-editor-permissions.density-form-section { min-width: 0; padding: 0 0 0 var(--admin-space-5); border-left: 1px solid var(--cc-border); }
.permission-tree { max-height: 380px; overflow-x: hidden; overflow-y: auto; }
.permission-node span { min-width: 0; }
.permission-node code { max-width: 58%; white-space: normal; text-align: right; }
@@ -283,6 +286,6 @@ onMounted(loadRoles)
:global(.role-editor-dialog .el-dialog__footer) { flex: 0 0 auto; }
@media (max-width: 720px) {
.role-editor-layout { grid-template-columns: minmax(0, 1fr); }
.role-editor-permissions { padding-top: 18px; padding-left: 0; border-top: 1px solid var(--cc-border); border-left: 0; }
.role-editor-layout > .role-editor-permissions.density-form-section { padding-top: 18px; padding-left: 0; border-top: 1px solid var(--cc-border); border-left: 0; }
}
</style>
src/modules/inbounds/measurement/InboundMeasurementDialog.vue
+1 -1
View File
@@ -28,7 +28,7 @@ const title = computed(() => `测量 · ${props.inboundCode?.trim() || '入仓
async function mayClose() {
if (!measurementPanelRef.value?.isDirty) return true
try {
await ElMessageBox.confirm('当前测量数据尚未保存，关闭后将丢失修改。确定关闭吗？', '关闭测量', {
await ElMessageBox.confirm('当前测量数据尚未保存，关闭后将丢失修改。确定关闭吗？', '关闭测量', { customClass: 'admin-density-confirm',
type: 'warning',
confirmButtonText: '放弃修改并关闭',
cancelButtonText: '继续编辑',
src/modules/inbounds/measurement/InboundMeasurementPanel.vue
+2 -2
View File
@@ -371,7 +371,7 @@ async function loadMeasurement() {
async function reloadLatest() {
if (isDirty.value) {
try {
await ElMessageBox.confirm('加载最新版本会丢弃当前尚未保存的修改。确定继续吗？', '重新加载测量数据', {
await ElMessageBox.confirm('加载最新版本会丢弃当前尚未保存的修改。确定继续吗？', '重新加载测量数据', { customClass: 'admin-density-confirm',
type: 'warning',
confirmButtonText: '加载最新版本',
cancelButtonText: '继续编辑',
@@ -520,7 +520,7 @@ async function submitForReview() {
await ElMessageBox.confirm(
'提交后将校验测量图片和全部称重结果，并由后端准备托盘与库位占用。提交成功后本批次不能继续编辑，设备也不能再覆盖已提交数据。',
'提交测量审核',
{ type: 'warning', confirmButtonText: '确认提交', cancelButtonText: '取消' },
{ customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: '确认提交', cancelButtonText: '取消' },
)
} catch {
return
src/modules/inbounds/weight/components/WeightOcrPanel.vue
+1 -1
View File
@@ -425,7 +425,7 @@ async function removeResult(row: WeightResultResource) {
? '删除后将重新计算货物总重量；对应库位仍为本票保留，不会释放给其他订单。确认删除这张称重图片吗？'
: '对应库位仍为本票保留，不会释放给其他订单。确认删除这张称重图片吗？',
'删除称重图片',
{ type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' },
{ customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' },
)
} catch {
return
src/modules/master-data/counterparties/pages/PartnersView.test.ts
+9 -10
View File
@@ -195,6 +195,8 @@ describe('PartnersView real API integration', () => {
const sections = detailContent?.querySelectorAll('section')
const otherInfo = sections?.item(sections.length - 1)
expect(detailContent).not.toBeNull()
expect(detailContent?.closest('.el-drawer')?.classList.contains('admin-density-drawer')).toBe(true)
expect(detailContent?.querySelectorAll('.density-fields')).toHaveLength(3)
expect(otherInfo?.querySelectorAll('.detail-grid > .detail-span')).toHaveLength(2)
expect(otherInfo?.textContent).toContain('更新时间')
expect(otherInfo?.textContent).toContain('长期合作单位')
@@ -278,13 +280,10 @@ describe('PartnersView real API integration', () => {
})
it('keeps all three row actions visible without a premature more menu', () => {
expect(source).toContain('<el-button size="small" plain type="primary" @click="openDetail')
expect(source).toContain("access.can('platform:counterparty:edit')\" size=\"small\" plain type=\"primary\"")
expect(source).toContain("access.can('platform:counterparty:status')\" size=\"small\" plain")
expect(source).toContain('<Eye :size="15" />详情')
expect(source).toContain('<Pencil :size="15" />编辑')
expect(source).toContain('<Power :size="15" />')
expect(source).not.toContain('MoreHorizontal')
expect(source).not.toContain('<el-button link type="primary" @click="openDetail')
})
})
const actions = source.slice(source.indexOf('<template #actions='), source.indexOf('</template>', source.indexOf('<template #actions=')))
expect(actions.match(/class="density-action"/g)).toHaveLength(3)
expect(actions).toContain('>详情</el-button>')
expect(actions).toContain('>编辑</el-button>')
expect(actions).toContain(':data-tone=')
expect(actions).not.toMatch(/<(?:el-dropdown|Pencil|Power|Eye|Trash2|Download|CircleX)\b/)
})})
src/modules/master-data/counterparties/pages/PartnersView.vue
+26 -27
View File
@@ -1,7 +1,8 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { Building2, Eye, FileUp, MapPin, Pencil, Plus, Power, Save } from '@lucide/vue'
import { Building2, FileUp, MapPin, Plus, Save } from '@lucide/vue'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import AdminPage from '@/shared/components/AdminPage.vue'
import AppDrawer from '@/shared/components/AppDrawer.vue'
@@ -327,7 +328,7 @@ async function toggleStatus(row: PlatformPartnerResource) {
await ElMessageBox.confirm(
`${action}后${nextStatus === 'ACTIVE' ? '可继续用于新业务' : '不再用于新业务，历史数据不受影响'}。`,
`${action}“${row.partnerName}”`,
{ type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: action, cancelButtonText: '取消' },
{ customClass: 'admin-density-confirm', type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: action, cancelButtonText: '取消' },
)
} catch {
return
@@ -370,7 +371,7 @@ onMounted(() => {
</script>
<template>
<AdminPage as="div" class="partners-page" spacing="normal">
<AdminPage as="div" class="partners-page admin-density" spacing="normal">
<ListPageLayout aria-label="往来单位管理">
<template #toolbar>
<QueryToolbar v-model="filters" class="surface-panel" ariaLabel="往来单位筛选" :fields="queryFields" preference-key="partners-query" @search="searchPartners" />
@@ -403,10 +404,10 @@ onMounted(() => {
>
<template #toolbar-actions><div class="partners-primary-actions"><el-button v-if="access.can('platform:counterparty:import')" :disabled="loading" @click="openImport"><FileUp :size="16" />批量导入</el-button><el-button v-if="access.can('platform:counterparty:create')" type="primary" :disabled="loading" @click="openCreate"><Plus :size="16" />新增往来单位</el-button></div></template>
<template #actions="{ row }">
<div class="table-actions">
<el-button size="small" plain type="primary" @click="openDetail(row as PlatformPartnerResource)"><Eye :size="15" />详情</el-button>
<el-button v-if="access.can('platform:counterparty:edit')" size="small" plain type="primary" :disabled="loading" @click="openEdit(row as PlatformPartnerResource)"><Pencil :size="15" />编辑</el-button>
<el-button v-if="access.can('platform:counterparty:status')" size="small" plain :disabled="loading" :type="(row as PlatformPartnerResource).status === 'ACTIVE' ? 'danger' : 'success'" :loading="statusLoadingIds.has(String((row as PlatformPartnerResource).id))" @click="toggleStatus(row as PlatformPartnerResource)"><Power :size="15" />{{ (row as PlatformPartnerResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
<div class="table-actions density-actions">
<el-button data-tone="neutral" class="density-action" size="small" @click="openDetail(row as PlatformPartnerResource)">详情</el-button>
<el-button data-tone="neutral" class="density-action" v-if="access.can('platform:counterparty:edit')" size="small" :disabled="loading" @click="openEdit(row as PlatformPartnerResource)">编辑</el-button>
<el-button class="density-action" v-if="access.can('platform:counterparty:status')" size="small" :disabled="loading" :data-tone="(row as PlatformPartnerResource).status === 'ACTIVE' ? 'danger' : 'success'" :loading="statusLoadingIds.has(String((row as PlatformPartnerResource).id))" @click="toggleStatus(row as PlatformPartnerResource)">{{ (row as PlatformPartnerResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
</div>
</template>
<template #partner="{ row }"><div class="partner-cell"><span><Building2 :size="18" /></span><div><LineClampText :content="(row as PlatformPartnerResource).partnerName" /></div></div></template>
@@ -422,30 +423,30 @@ onMounted(() => {
v-model="editorOpen"
:title="editorLabel"
size="min(680px, 94vw)"
class="business-drawer editor-drawer"
class="editor-drawer admin-density admin-density-drawer"
:confirm-loading="saving"
>
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="drawer-form" :disabled="saving">
<FormSection title="单位信息"><div class="form-grid two-cols">
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="density-form" :disabled="saving">
<FormSection class="density-form-section" title="单位信息"><div class="form-grid two-cols">
<el-form-item label="单位编码" prop="partnerCode" required><el-input v-model="form.partnerCode" placeholder="如：CUS-001" maxlength="50" /></el-form-item>
<el-form-item label="单位名称" prop="partnerName" required><el-input v-model="form.partnerName" placeholder="请输入工商登记或常用单位名称" maxlength="128" /></el-form-item>
<el-form-item label="单位类型" prop="types" required><el-select v-model="form.types" multiple collapse-tags collapse-tags-tooltip placeholder="请选择一个或多个单位类型"><el-option v-for="option in typeOptions" :key="option.value" :label="option.label" :value="option.value" /></el-select></el-form-item>
<el-form-item label="状态" prop="status" required><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>
<el-form-item v-if="form.types.includes('CARRIER')" label="船司标准编码" prop="carrierCode" required><el-select v-model="form.carrierCode" placeholder="请选择船司标准编码" style="width:100%"><el-option v-for="option in carrierCodeOptions" :key="option.value" :label="option.label" :value="option.value" /></el-select></el-form-item>
</div></FormSection>
<FormSection title="联系信息"><div class="form-grid two-cols">
<FormSection class="density-form-section" title="联系信息"><div class="form-grid two-cols">
<el-form-item label="联系人" prop="contactName" required><el-input v-model="form.contactName" placeholder="请输入主要联系人姓名" maxlength="64" /></el-form-item>
<el-form-item label="联系电话" prop="contactPhone" required><el-input v-model="form.contactPhone" placeholder="请输入手机号或固定电话" maxlength="32" /></el-form-item>
<el-form-item label="联系邮箱" prop="contactEmail"><el-input v-model="form.contactEmail" placeholder="如：contact@example.com" maxlength="128" /></el-form-item>
</div></FormSection>
<FormSection title="地址信息"><div class="form-grid two-cols">
<FormSection class="density-form-section" title="地址信息"><div class="form-grid two-cols">
<el-form-item label="国家二字码" prop="countryCode" required><el-input v-model="form.countryCode" placeholder="如：CN" maxlength="2" @input="form.countryCode = String($event).toUpperCase()" /></el-form-item>
<el-form-item label="省 / 州" prop="province"><el-input v-model="form.province" placeholder="如：广东省" maxlength="64" /></el-form-item>
<el-form-item label="城市" prop="city" required><el-input v-model="form.city" placeholder="如：深圳市" maxlength="64" /></el-form-item>
<el-form-item label="区 / 县" prop="district"><el-input v-model="form.district" placeholder="如：宝安区" maxlength="64" /></el-form-item>
<el-form-item label="邮政编码" prop="postalCode"><el-input v-model="form.postalCode" placeholder="如：518000" maxlength="20" /></el-form-item>
</div><el-form-item label="详细地址" prop="addressLine" required><el-input v-model="form.addressLine" type="textarea" :rows="3" placeholder="请输入街道、园区、楼栋及门牌信息" maxlength="255" show-word-limit /></el-form-item></FormSection>
<FormSection title="其他信息" :bordered="false"><el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入内部说明（选填）" maxlength="500" show-word-limit /></el-form-item></FormSection>
<FormSection class="density-form-section" title="其他信息" :bordered="false"><el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入内部说明（选填）" maxlength="500" show-word-limit /></el-form-item></FormSection>
</el-form>
<template #footer>
<div class="drawer-footer">
@@ -455,22 +456,22 @@ onMounted(() => {
</template>
</AppDrawer>
<AppDrawer v-model="detailOpen" title="往来单位详情" size="min(680px, 94vw)" class="business-drawer detail-drawer" :loading="detailLoading" :show-footer="false">
<AppDrawer v-model="detailOpen" title="往来单位详情" size="min(680px, 94vw)" class="detail-drawer admin-density admin-density-drawer" :loading="detailLoading" :show-footer="false">
<div class="partner-detail">
<DetailPageLayout v-if="detail" aria-label="往来单位详情">
<FormSection title="单位信息"><dl class="detail-grid">
<DetailPageLayout class="partner-detail-layout" v-if="detail" aria-label="往来单位详情">
<FormSection class="density-form-section" title="单位信息"><dl class="detail-grid density-fields">
<div><dt>单位编码</dt><dd>{{ detail.partnerCode }}</dd></div>
<div><dt>单位名称</dt><dd>{{ detail.partnerName }}</dd></div>
<div><dt>状态</dt><dd><el-tag :type="detail.status === 'ACTIVE' ? 'success' : 'info'">{{ detail.status === 'ACTIVE' ? '启用' : '停用' }}</el-tag></dd></div>
<div><dt>单位类型</dt><dd class="partner-types"><el-tag v-for="type in detail.types" :key="type" effect="plain">{{ partnerTypeLabel(type) }}</el-tag></dd></div>
<div v-if="detail.types.includes('CARRIER')"><dt>船司标准编码</dt><dd>{{ formatCarrierCode(detail.carrierCode) }}</dd></div>
</dl></FormSection>
<FormSection title="联系与地址"><dl class="detail-grid">
<FormSection class="density-form-section" title="联系与地址"><dl class="detail-grid density-fields">
<div><dt>联系人</dt><dd>{{ detail.contactName }}</dd></div><div><dt>联系电话</dt><dd>{{ detail.contactPhone }}</dd></div>
<div><dt>联系邮箱</dt><dd>{{ detail.contactEmail || '-' }}</dd></div><div><dt>邮政编码</dt><dd>{{ detail.postalCode || '-' }}</dd></div>
<div class="detail-span"><dt>详细地址</dt><dd>{{ [detail.countryCode, detail.province, detail.city, detail.district, detail.addressLine].filter(Boolean).join(' ') }}</dd></div>
</dl></FormSection>
<FormSection title="其他信息" :bordered="false"><dl class="detail-grid">
<FormSection class="density-form-section" title="其他信息" :bordered="false"><dl class="detail-grid density-fields">
<div class="detail-span"><dt>更新时间</dt><dd>{{ formatUpdatedAt(detail.updatedAt) }}</dd></div>
<div class="detail-span"><dt>备注</dt><dd>{{ detail.remark || '-' }}</dd></div>
</dl></FormSection>
@@ -478,7 +479,7 @@ onMounted(() => {
</div>
</AppDrawer>
<BatchImportDialog
<BatchImportDialog class="admin-density-dialog"
v-model="importOpen"
title="批量导入往来单位"
entity-label="往来单位"
@@ -491,20 +492,18 @@ onMounted(() => {
</template>
<style scoped>
.partner-detail-layout { gap: 0; }
.partners-page { min-width: 0; }
.partners-primary-actions, .partner-types { display: flex; flex-wrap: wrap; gap: 8px; }
.partner-cell { display: flex; align-items: center; gap: 10px; }
.partner-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 7px; background: #eef3fa; color: var(--cc-primary); }
.partners-primary-actions, .partner-types { display: flex; flex-wrap: wrap; gap: var(--admin-space-3); }
.partner-cell { display: flex; align-items: center; gap: var(--admin-space-4); }
.partner-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); }
.partner-cell > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.partner-cell :deep(.line-clamp-text) { width: 100%; }
.partner-address { display: flex; align-items: flex-start; gap: 7px; line-height: 1.55; overflow-wrap: anywhere; }
.partner-address svg { flex: 0 0 15px; margin-top: 3px; color: var(--cc-muted); }
.partner-detail { min-height: 180px; padding: 20px 24px 28px; box-sizing: border-box; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--cc-border); }
.detail-grid > div { min-width: 0; padding: 12px 14px; background: #fff; }
.partner-detail { min-width: 0; }
.partner-detail .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-grid .detail-span { grid-column: 1 / -1; }
.detail-grid dt { margin-bottom: 5px; color: var(--cc-muted); font-size: 12px; }
.detail-grid dd { margin: 0; color: var(--cc-text); line-height: 1.55; overflow-wrap: anywhere; }
@media (max-width: 720px) {
.partners-primary-actions :deep(.el-button) { width: 100%; min-height: 40px; }
.partners-primary-actions { flex-direction: column; }
src/modules/master-data/express-companies/pages/ExpressCompaniesView.test.ts
+6 -8
View File
@@ -73,15 +73,13 @@ enableAutoUnmount(afterEach)
afterAll(() => vi.unstubAllGlobals())
describe('ExpressCompaniesView query and table migration', () => {
it('renders edit and status as colored outlined buttons with prototype icons', () => {
expect(expressCompaniesSource).toContain('size="small"\n plain\n type="primary"')
expect(expressCompaniesSource).toContain('size="small"\n plain\n :disabled="loading"\n :type=')
expect(expressCompaniesSource).toContain('<Pencil :size="15" />编辑')
expect(expressCompaniesSource).toContain('<Power :size="15" />')
expect(expressCompaniesSource).not.toContain("access.can('platform:express:edit')\"\n link")
expect(expressCompaniesSource).not.toContain("access.can('platform:express:status')\"\n link")
it('renders edit and status as shared outlined text buttons', () => {
const actions = expressCompaniesSource.slice(expressCompaniesSource.indexOf('<template #actions='), expressCompaniesSource.indexOf('</template>', expressCompaniesSource.indexOf('<template #actions=')))
expect(actions.match(/class="density-action"/g)).toHaveLength(2)
expect(actions).toContain('>编辑</el-button>')
expect(actions).toContain(' :data-tone=')
expect(actions).not.toMatch(/<(?:el-dropdown|Pencil|Power|Eye|Trash2|Download|CircleX)\b/)
})
it('keeps operation first and exposes the prototype business columns separately', () => {
const actionsIndex = expressCompaniesSource.indexOf("{ key: 'actions', label: '操作'")
const nameIndex = expressCompaniesSource.indexOf("{ key: 'company', label: '公司名称'")
src/modules/master-data/express-companies/pages/ExpressCompaniesView.vue
+27 -28
View File
@@ -1,7 +1,8 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { ExternalLink, FileUp, Pencil, Plus, Power, Save, Truck } from '@lucide/vue'
import { ExternalLink, FileUp, Plus, Save, Truck } from '@lucide/vue'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import AdminPage from '@/shared/components/AdminPage.vue'
import BatchImportDialog from '@/shared/components/BatchImportDialog.vue'
@@ -250,7 +251,7 @@ async function toggleStatus(row: PlatformExpressCompanyResource) {
await ElMessageBox.confirm(
`确定${action}“${row.companyName}”吗？${nextStatus === 'INACTIVE' ? '停用后不会再作为可用快递公司。' : ''}`,
`${action}快递公司`,
{ type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: `确认${action}`, cancelButtonText: '取消' },
{ customClass: 'admin-density-confirm', type: nextStatus === 'ACTIVE' ? 'success' : 'warning', confirmButtonText: `确认${action}`, cancelButtonText: '取消' },
)
} catch {
return
@@ -280,7 +281,7 @@ onMounted(() => {
</script>
<template>
<AdminPage>
<AdminPage class="admin-density">
<div class="business-page express-company-page">
<ListPageLayout ariaLabel="快递公司列表">
<template #toolbar>
@@ -311,25 +312,25 @@ onMounted(() => {
>
<template #toolbar-actions><div class="table-actions"><el-button v-if="access.can('platform:express:import')" :disabled="loading" @click="openImport"><FileUp :size="16" />批量导入</el-button><el-button v-if="access.can('platform:express:create')" type="primary" :disabled="loading" @click="openCreate"><Plus :size="16" />新增快递公司</el-button></div></template>
<template #actions="{ row }">
<div v-if="access.can('platform:express:edit') || access.can('platform:express:status')" class="table-actions">
<el-button
<div v-if="access.can('platform:express:edit') || access.can('platform:express:status')" class="table-actions density-actions">
<el-button data-tone="neutral" class="density-action"
v-if="access.can('platform:express:edit')"
size="small"
plain
type="primary"
:disabled="loading"
:loading="editLoadingIds.has(String((row as PlatformExpressCompanyResource).id))"
@click="openEdit(row as PlatformExpressCompanyResource)"
><Pencil :size="15" />编辑</el-button>
<el-button
>编辑</el-button>
<el-button class="density-action"
v-if="access.can('platform:express:status')"
size="small"
plain
:disabled="loading"
:type="(row as PlatformExpressCompanyResource).status === 'ACTIVE' ? 'danger' : 'success'"
:data-tone="(row as PlatformExpressCompanyResource).status === 'ACTIVE' ? 'danger' : 'success'"
:loading="statusLoadingIds.has(String((row as PlatformExpressCompanyResource).id))"
@click="toggleStatus(row as PlatformExpressCompanyResource)"
><Power :size="15" />{{ (row as PlatformExpressCompanyResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
>{{ (row as PlatformExpressCompanyResource).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
</div>
<span v-else class="muted-value">仅查看</span>
</template>
@@ -349,7 +350,7 @@ onMounted(() => {
</section>
</ListPageLayout>
<BatchImportDialog
<BatchImportDialog class="admin-density-dialog"
v-model="importOpen"
title="批量导入快递公司"
entity-label="快递公司"
@@ -361,18 +362,16 @@ onMounted(() => {
@success="loadExpressCompanies"
/>
<el-drawer v-model="editorOpen" :title="editorTitle" size="580px" class="business-drawer editor-drawer" :close-on-click-modal="false">
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="drawer-form" :disabled="saving">
<FormSection title="基础信息">
<h3>公司标识</h3>
<el-drawer v-model="editorOpen" :title="editorTitle" size="580px" class="editor-drawer admin-density admin-density-drawer" :close-on-click-modal="false">
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="density-form" :disabled="saving">
<FormSection class="density-form-section" title="基础信息">
<div class="form-grid two-cols">
<el-form-item label="快递公司编码" prop="companyCode" required><el-input v-model.trim="form.companyCode" maxlength="50" placeholder="例如 SF" /></el-form-item>
<el-form-item label="快递公司名称" prop="companyName" required><el-input v-model.trim="form.companyName" maxlength="128" placeholder="例如 顺丰速运" /></el-form-item>
</div>
<el-form-item label="状态" prop="status" required><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>
</FormSection>
<FormSection title="服务配置">
<h3>服务与查询</h3>
<FormSection class="density-form-section" title="服务配置">
<div class="form-grid two-cols">
<el-form-item label="客服电话"><el-input v-model.trim="form.servicePhone" maxlength="32" placeholder="例如 95338" /></el-form-item>
<el-form-item label="官方网站" prop="website"><el-input v-model.trim="form.website" maxlength="255" placeholder="https://www.example.com" /></el-form-item>
@@ -380,7 +379,7 @@ onMounted(() => {
<el-form-item label="轨迹查询地址模板"><el-input v-model.trim="form.trackingUrlTemplate" maxlength="500" placeholder="https://example.com/track/{trackingNo}" /></el-form-item>
<p class="form-help">可使用 <code>{trackingNo}</code> 作为快递单号占位符；一期不包含轨迹订阅和自动回传。</p>
</FormSection>
<FormSection title="备注"><el-form-item label="内部说明"><el-input v-model.trim="form.remark" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入适用范围、服务限制或其他说明" /></el-form-item></FormSection>
<FormSection class="density-form-section" title="备注"><el-form-item label="内部说明"><el-input v-model.trim="form.remark" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入适用范围、服务限制或其他说明" /></el-form-item></FormSection>
</el-form>
<template #footer><div class="drawer-footer"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="saveExpressCompany"><Save :size="16" />保存快递公司</el-button></div></template>
</el-drawer>
@@ -389,19 +388,19 @@ onMounted(() => {
</template>
<style scoped>
.express-company-page { gap: 16px; }
.state-alert p { margin: 6px 0 0; line-height: 1.55; }
.state-alert .el-button { margin-top: 10px; }
.express-company-cell { display: flex; min-width: 0; align-items: center; gap: 10px; }
.express-company-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--cc-border); border-radius: 7px; background: #f8fafc; color: var(--cc-primary); }
.express-company-page { gap: var(--admin-space-6); }
.state-alert p { margin: var(--admin-space-2) 0 0; line-height: 1.55; }
.state-alert .el-button { margin-top: var(--admin-space-4); }
.express-company-cell { display: flex; min-width: 0; align-items: center; gap: var(--admin-space-4); }
.express-company-cell > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: #f8fafc; color: var(--cc-primary); }
.express-company-cell > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.express-company-cell strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.external-link { display: inline-flex; align-items: center; gap: 5px; color: var(--cc-primary); font-size: 12px; text-decoration: none; }
.external-link { display: inline-flex; align-items: center; gap: 5px; color: var(--cc-primary); font-size: var(--admin-font-caption); text-decoration: none; }
.external-link:hover { text-decoration: underline; }
.tracking-template { display: block; max-width: 100%; color: #475467; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; }
.tracking-template { display: block; max-width: 100%; color: #475467; font-family: "Cascadia Code", Consolas, monospace; font-size: var(--admin-font-caption); overflow-wrap: anywhere; }
.remark-cell { display: -webkit-box; overflow: hidden; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.form-help code { color: #475467; font-family: "Cascadia Code", Consolas, monospace; }
.panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--admin-space-3); }
.panel-actions .el-button { margin-left: 0; }
@media (max-width: 720px) {
.panel-actions, .panel-actions .el-button { width: 100%; }
src/modules/notifications/PROTOTYPE_MATRIX.md
+5 -5
View File
@@ -1,20 +1,20 @@
# Admin 消息中心原型核对矩阵
原型事实来源：`docs/悦/货代SAAS平台后台/货代SaaS平台原型.html`。接口事实来源：`iam/src/main/resources/openapi/notification-v1.yaml`。当前实现仅支持站内信，不扩展微信、邮件或短信渠道。
原型事实来源：`docs/悦/货代SAAS平台后台/prototype-src/modules/11-system-messages.html`（260–290 行）与 `prototype-src/overlays.html`（354–395 行）。接口事实来源：`iam/src/main/resources/openapi/notification-v1.yaml`。当前实现仅支持站内信，不扩展微信、邮件或短信渠道。
| 页面 | 操作 | 原型承载方式 | 当前实现 | 契约差异与结论 |
|---|---|---|---|---|
| 消息管理 | 列表/查询 | `page-msg-manage` 页面内表格 | `/notifications/messages` 展示通知任务，支持任务号/标题、分类、状态查询；操作列固定第一列 | 冻结契约只提供任务列表，未提供按消息正文管理的列表；按任务 DTO 展示任务号、接收人数、定时/发送时间与状态 |
| 消息管理 | 新建消息 | `modal-msg-create`，约 680px 居中弹框 | 680px `AppDialog`；选择激活模板、平台员工/指定企业范围、接收对象、模板变量 | `tenantId` 仅在适配边界作为兼容字段；页面统一使用“企业/客户”文案 |
| 消息管理 | 新建消息 | `modal-msg-create`，约 680px 居中弹框 | 680px `AppDialog`；选择激活模板、平台员工/指定企业范围、接收对象、模板变量 | 企业选择按现有 API 的 `tenantId` 字段提交；页面统一使用“企业/客户”文案 |
| 消息管理 | 立即/定时发送 | 新建消息弹框内 | 调用 `POST /platform/v1/notifications`；立即发送传 `scheduledAt=null`，定时发送传 ISO 时间；生成幂等键 | 契约已覆盖两种发送方式；仅创建任务，不静默模拟发送成功 |
| 消息管理 | 草稿 | 新建消息弹框内“存为草稿” | 不展示 | 冻结契约没有消息草稿创建、更新或查询 API，不能提供伪草稿 |
| 消息管理 | 取消/重试 | 原型未明确 | CREATED/SCHEDULED 可取消，RETRYING/DEAD 可重试 | 按冻结任务 API 与状态约束补充，分别受 `task:cancel`、`task:retry` 权限控制 |
| 消息管理 | 详情/发送统计 | 原型仅有详情按钮和“已读/总数”聚合列，未定义容器 | 不展示操作或伪统计 | 冻结契约无任务详情、收件人明细、已读统计 API；待后端补充契约后再承载 |
| 消息管理 | 详情/投递明细 | 原型仅有详情按钮，未定义容器 | 当前 `getTask` 打开 820px `AppDrawer`，展示任务摘要、失败原因与收件人投递明细 | 保留当前正式能力；不把投递明细改称已读统计 |
| 模板管理 | 列表/查询 | `page-msg-template` 页面内表格 | `/notifications/templates` 查询 CODE、分类、名称/标题、状态；操作列固定第一列 | 对接模板分页 API；原型导入/导出因无 API 不展示 |
| 模板管理 | 新增模板 | `modal-msg-template-create`，约 760px 居中弹框 | 760px `AppDialog`；CODE、名称、分类、标题/正文、变量白名单、预览；保存为 DRAFT | 仅支持 `IN_APP`，不展示真实渠道选择 |
| 模板管理 | 编辑模板 | 原型仅有编辑按钮，未定义容器 | 复用同尺寸模板弹框，仅 DRAFT 可编辑，CODE 不可变并携带 version | 冻结契约明确只允许编辑草稿，复用表单避免重复交互 |
| 模板管理 | 状态流转 | 原型未定义 | DRAFT 可激活，ACTIVE 可禁用，DISABLED 无操作 | 严格执行 `DRAFT -> ACTIVE -> DISABLED`；禁用后不可恢复 |
| 我的消息 | 页面归属 | 原型保留 `page-msg-my` 历史页面 | Admin 不实现、不注册路由 | 产品确认“我的消息”仅属于企业客户端 |
| 顶部入口 | 管理入口 | `topMessageMenu` 顶部下拉，左侧无消息菜单 | 按任务/模板权限展示“消息管理”“模板管理” | Admin 仅保留后台管理能力，不展示个人收件箱与未读数 |
| 我的消息 | 列表、已读与详情 | `page-msg-my`；详情容器原型未定义 | 当前 `/notifications` 正式路由及顶部入口，详情为 680px `AppDrawer` | 按实际平台收件箱入口保留权限和标记已读逻辑 |
| 顶部入口 | 消息中心 | `topMessageMenu` 顶部下拉，左侧无消息菜单 | 当前按权限展示“我的消息”“消息管理”“模板管理” | 三个正式路由均纳入样式核对，见 `docs/Admin消息中心样式核对记录.md` |
接口依赖：所有响应经 `{code,data}` 解包；分页统一读取 `records/page/size/total/pages`；响应中的 `int64` ID 在前端保持字符串。写请求中的企业、用户和成员 ID 也在类型适配边界保持数字字符串，避免 JavaScript 大整数精度损失，由服务端 Long DTO 解析。
src/modules/notifications/components/MessageComposerDialog.vue
+4 -3
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import AppDialog from '@/shared/components/AppDialog.vue'
@@ -60,9 +61,9 @@ async function submit() {
</script>
<template>
<AppDialog v-model="open" title="新建消息" width="min(680px, calc(100vw - 28px))" :show-confirm="false" destroy-on-close @cancel="reset">
<AppDialog class="admin-density-dialog" v-model="open" title="新建消息" width="min(680px, calc(100vw - 28px))" :show-confirm="false" destroy-on-close @cancel="reset">
<OperationErrorToast :details="error" />
<el-form class="message-form" label-position="top">
<el-form class="message-form density-form" label-position="top">
<div class="form-grid"><el-form-item label="发送范围" required><el-segmented v-model="scope" :options="[{ label: '平台员工', value: 'platform' }, { label: '指定企业', value: 'customer' }]" /></el-form-item><el-form-item label="发送方式"><el-input model-value="站内信" disabled /></el-form-item></div>
<PlatformTenantSelector v-if="scope === 'customer'" v-model="form.tenantId" label="目标企业" />
<el-form-item label="消息模板" required><el-select v-model="form.templateCode" filterable placeholder="请选择已激活模板"><el-option v-for="item in templates" :key="item.id" :label="`${item.templateName}（${item.templateCode}）`" :value="item.templateCode" /></el-select></el-form-item>
@@ -76,5 +77,5 @@ async function submit() {
</template>
<style scoped>
.message-form { margin-top: 18px; }.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.form-grid :deep(.el-select),.message-form > :deep(.el-form-item .el-select),.schedule-row :deep(.el-date-editor) { width: 100%; }.variables { margin-bottom: 16px; padding: 14px; border: 1px solid var(--cc-border); border-radius: 8px; }.variables > strong { display: block; margin-bottom: 12px; font-size: 13px; }.schedule-row { display:grid;width:100%;grid-template-columns:auto auto minmax(180px,1fr);align-items:center;gap:8px }.dialog-actions {display:flex;justify-content:flex-end;gap:10px}.dialog-actions :deep(.el-button){margin-left:0}@media(max-width:560px){.form-grid{grid-template-columns:1fr;gap:0}.schedule-row{grid-template-columns:auto 1fr}.schedule-row :deep(.el-date-editor){grid-column:1/-1}}
.message-form { margin-top: var(--admin-space-5); }.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--admin-space-5); }.form-grid :deep(.el-select),.message-form > :deep(.el-form-item .el-select),.schedule-row :deep(.el-date-editor) { width: 100%; }.variables { margin-bottom: var(--admin-space-5); padding: var(--admin-space-5); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); }.variables > strong { display: block; margin-bottom: var(--admin-space-5); font-size: var(--admin-font-body); }.schedule-row { display:grid;width:100%;grid-template-columns:auto auto minmax(180px,1fr);align-items:center;gap:var(--admin-space-3) }.dialog-actions {display:flex;justify-content:flex-end;gap:var(--admin-space-4)}.dialog-actions :deep(.el-button){margin-left:0}@media(max-width:560px){.form-grid{grid-template-columns:1fr;gap:0}.schedule-row{grid-template-columns:auto 1fr}.schedule-row :deep(.el-date-editor){grid-column:1/-1}}
</style>
src/modules/notifications/components/TemplateEditorDialog.vue
+4 -3
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import AppDialog from '@/shared/components/AppDialog.vue'
@@ -34,14 +35,14 @@ async function submit() {
</script>
<template>
<AppDialog v-model="open" :title="editing ? '编辑消息模板' : '新增消息模板'" width="min(760px, calc(100vw - 28px))" :show-confirm="false" destroy-on-close>
<AppDialog class="admin-density-dialog" v-model="open" :title="editing ? '编辑消息模板' : '新增消息模板'" width="min(760px, calc(100vw - 28px))" :show-confirm="false" destroy-on-close>
<OperationErrorToast :details="error" />
<el-alert title="首期仅支持站内信；新模板保存为草稿，草稿激活后不可再编辑。" type="info" :closable="false" show-icon />
<el-form class="template-form" label-position="top"><div class="form-grid"><el-form-item label="模板CODE" required><el-input :model-value="form.code" maxlength="64" :disabled="editing" placeholder="如：ORDER_SHIPPED_NOTICE" @update:model-value="normalizeCode(String($event))" /></el-form-item><el-form-item label="模板名称" required><el-input v-model="form.name" maxlength="128" placeholder="请输入模板名称" /></el-form-item></div><div class="form-grid"><el-form-item label="业务分类" required><el-input v-model="form.category" maxlength="64" placeholder="请输入业务分类" /></el-form-item><el-form-item label="模板类型"><el-input model-value="站内信" disabled /></el-form-item></div><el-form-item label="消息标题模板" required><el-input v-model="form.title" maxlength="256" show-word-limit placeholder="请输入消息标题模板" /></el-form-item><el-form-item label="消息正文模板" required><el-input ref="contentInput" v-model="form.content" type="textarea" :rows="6" maxlength="10000" show-word-limit placeholder="请输入消息正文模板" /></el-form-item><el-form-item label="变量白名单"><el-input v-model="whitelistText" placeholder="多个变量使用逗号分隔，如 customer_name, order_no" /></el-form-item><div class="variable-row"><span>常用变量</span><el-button v-for="name in ['customer_name','order_no','container_no','amount','date']" :key="name" size="small" @click="insertVariable(name)">{{ name }}</el-button></div><section class="template-preview"><strong>内容预览</strong><p>{{ preview }}</p></section></el-form>
<el-form class="template-form density-form" label-position="top"><div class="form-grid"><el-form-item label="模板CODE" required><el-input :model-value="form.code" maxlength="64" :disabled="editing" placeholder="如：ORDER_SHIPPED_NOTICE" @update:model-value="normalizeCode(String($event))" /></el-form-item><el-form-item label="模板名称" required><el-input v-model="form.name" maxlength="128" placeholder="请输入模板名称" /></el-form-item></div><div class="form-grid"><el-form-item label="业务分类" required><el-input v-model="form.category" maxlength="64" placeholder="请输入业务分类" /></el-form-item><el-form-item label="模板类型"><el-input model-value="站内信" disabled /></el-form-item></div><el-form-item label="消息标题模板" required><el-input v-model="form.title" maxlength="256" show-word-limit placeholder="请输入消息标题模板" /></el-form-item><el-form-item label="消息正文模板" required><el-input ref="contentInput" v-model="form.content" type="textarea" :rows="6" maxlength="10000" show-word-limit placeholder="请输入消息正文模板" /></el-form-item><el-form-item label="变量白名单"><el-input v-model="whitelistText" placeholder="多个变量使用逗号分隔，如 customer_name, order_no" /></el-form-item><div class="variable-row"><span>常用变量</span><el-button v-for="name in ['customer_name','order_no','container_no','amount','date']" :key="name" size="small" @click="insertVariable(name)">{{ name }}</el-button></div><section class="template-preview"><strong>内容预览</strong><p>{{ preview }}</p></section></el-form>
<template #footer="{ close }"><div class="dialog-actions"><el-button :disabled="submitting" @click="close">取消</el-button><el-button type="primary" :loading="submitting" @click="submit">保存模板</el-button></div></template>
</AppDialog>
</template>
<style scoped>
.template-form{margin-top:18px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.variable-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;color:var(--cc-muted);font-size:12px}.variable-row :deep(.el-button){margin-left:0}.template-preview{overflow:hidden;border:1px solid var(--cc-border);border-radius:8px}.template-preview strong{display:block;padding:9px 14px;border-bottom:1px solid var(--cc-border);background:#f8fafc;font-size:13px}.template-preview p{min-height:76px;margin:0;padding:16px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--cc-muted);font-size:13px;line-height:1.7}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}.dialog-actions :deep(.el-button){margin-left:0}@media(max-width:560px){.form-grid{grid-template-columns:1fr;gap:0}}
.template-form{margin-top:var(--admin-space-5)}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--admin-space-5)}.variable-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--admin-space-3);margin-bottom:var(--admin-space-5);color:var(--cc-muted);font-size:var(--admin-font-caption)}.variable-row :deep(.el-button){margin-left:0}.template-preview{overflow:hidden;border:1px solid var(--cc-border);border-radius:var(--admin-radius)}.template-preview strong{display:block;padding:var(--admin-space-3) var(--admin-space-5);border-bottom:1px solid var(--cc-border);background:var(--admin-label-bg);font-size:var(--admin-font-body)}.template-preview p{min-height:76px;margin:0;padding:var(--admin-space-5);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--cc-muted);font-size:var(--admin-font-body);line-height:1.7}.dialog-actions{display:flex;justify-content:flex-end;gap:var(--admin-space-4)}.dialog-actions :deep(.el-button){margin-left:0}@media(max-width:560px){.form-grid{grid-template-columns:1fr;gap:0}}
</style>
src/modules/notifications/notificationsDensity.behavior.test.ts
+135
View File
@@ -0,0 +1,135 @@
import ElementPlus, { ElDrawer, ElSelect } from 'element-plus'
import { enableAutoUnmount, flushPromises, mount, type VueWrapper } from '@vue/test-utils'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import PlatformNotificationsView from './pages/PlatformNotificationsView.vue'
import MessageManagementView from './pages/MessageManagementView.vue'
import MessageTemplatesView from './pages/MessageTemplatesView.vue'
import MessageComposerDialog from './components/MessageComposerDialog.vue'
import TemplateEditorDialog from './components/TemplateEditorDialog.vue'
import * as api from './api/notificationCenter'
import type { NotificationTemplate, NotificationTask, NotificationInboxDetail, PageResult } from './types'
const can = vi.hoisted(() => vi.fn(() => true))
vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({ can }) }))
vi.mock('./api/notificationCenter', () => ({
listMyNotifications: vi.fn(), getMyUnreadNotificationCount: vi.fn(), getMyNotification: vi.fn(),
markMyNotificationRead: vi.fn(), markAllMyNotificationsRead: vi.fn(), listTasks: vi.fn(), getTask: vi.fn(),
listTemplates: vi.fn(), createNotification: vi.fn(), createTemplate: vi.fn(), updateTemplate: vi.fn(),
cancelTask: vi.fn(), retryTask: vi.fn(), changeTemplateStatus: vi.fn(),
}))
const template: NotificationTemplate = { id: 'template-1', templateCode: 'ORDER_NOTICE', templateName: '订单通知', category: 'ORDER', channel: 'IN_APP', titleTemplate: '订单更新', bodyTemplate: '订单已更新', variableWhitelist: [], status: 'DRAFT', version: 3 }
const task: NotificationTask = { id: 'task-1', taskNo: 'NT202609140001', category: 'ORDER', title: '订单更新', status: 'CREATED', recipientCount: 1, scheduledAt: null, sentAt: null, duplicated: false }
const inbox: NotificationInboxDetail = { id: 'inbox-1', category: 'ORDER', title: '订单更新', summary: '订单状态有更新', body: '第一行\n第二行', status: 'UNREAD', sentAt: '2026-09-14T01:00:00Z', readAt: null, sourceType: null, sourceId: null }
const page = <T,>(records: T[]): PageResult<T> => ({ records, page: 1, size: 20, total: records.length, pages: 1 })
const options = () => ({ attachTo: document.body, global: { plugins: [ElementPlus] } })
async function click(wrapper: VueWrapper, label: string, selector = 'button') {
const button = wrapper.findAll(selector).find(item => item.text().trim() === label)
expect(button, label).toBeDefined()
await button!.trigger('click')
await flushPromises()
}
enableAutoUnmount(afterEach)
afterEach(() => { vi.unstubAllGlobals(); document.body.innerHTML = '' })
beforeEach(() => {
vi.clearAllMocks()
can.mockReturnValue(true)
vi.stubGlobal('ResizeObserver', class { observe() {} unobserve() {} disconnect() {} })
vi.mocked(api.listMyNotifications).mockResolvedValue(page([inbox]))
vi.mocked(api.getMyUnreadNotificationCount).mockResolvedValue(1)
vi.mocked(api.getMyNotification).mockResolvedValue(inbox)
vi.mocked(api.markMyNotificationRead).mockResolvedValue({ ...inbox, status: 'READ' })
vi.mocked(api.listTasks).mockResolvedValue(page([task]))
vi.mocked(api.getTask).mockResolvedValue({ ...task, attemptCount: 1, lastError: '测试投递失败原因', recipients: [{ id: 'recipient-1', displayName: '测试员工', appCode: 'ADMIN', status: 'FAILED', failureReason: '测试收件失败', deliveredAt: null }] })
vi.mocked(api.listTemplates).mockResolvedValue(page([template]))
})
describe('notification density in native lists and overlays', () => {
it('keeps inbox actions visible and opens the styled drawer with read marking', async () => {
const wrapper = mount(PlatformNotificationsView, options())
await flushPromises()
const actions = wrapper.get('.el-table__body-wrapper .density-actions')
expect(actions.findAll('button').map(item => item.text())).toEqual(['查看', '标为已读'])
expect(actions.find('svg').exists()).toBe(false)
await click(wrapper, '查看', '.el-table__body-wrapper button')
const drawer = document.querySelector('.el-drawer.admin-density-drawer')!
expect(drawer.textContent).toContain('第一行\n第二行')
expect(wrapper.getComponent(ElDrawer).props('size')).toBe('min(680px, 94vw)')
expect(api.markMyNotificationRead).toHaveBeenCalledWith(inbox.id)
})
it('retains read-only inbox viewing without read permission', async () => {
can.mockReturnValue(false)
const wrapper = mount(PlatformNotificationsView, options())
await flushPromises()
expect(wrapper.get('.el-table__body-wrapper .density-actions').findAll('button').map(item => item.text())).toEqual(['查看'])
await click(wrapper, '查看', '.el-table__body-wrapper button')
expect(document.querySelector('.el-drawer')?.textContent).toContain('第一行')
expect(api.markMyNotificationRead).not.toHaveBeenCalled()
})
it.each([
['CREATED', ['查看', '取消']], ['SENT', ['查看']], ['DEAD', ['查看', '重试']],
] as const)('keeps task actions for %s and shows delivery evidence in the drawer', async (status, labels) => {
vi.mocked(api.listTasks).mockResolvedValue(page([{ ...task, status }]))
const wrapper = mount(MessageManagementView, options())
await flushPromises()
const actions = wrapper.get('.el-table__body-wrapper .density-actions')
expect(actions.findAll('button').map(item => item.text())).toEqual(labels)
expect(actions.find('svg').exists()).toBe(false)
await click(wrapper, '查看', '.el-table__body-wrapper button')
const drawer = document.querySelector('.el-drawer.admin-density-drawer')!
expect(wrapper.getComponent(ElDrawer).props('size')).toBe('min(820px, 94vw)')
expect(drawer.querySelectorAll('.density-fields > div')).toHaveLength(6)
expect(drawer.textContent).toContain(task.taskNo)
expect(drawer.textContent).toContain('测试员工')
expect(drawer.textContent).toContain('测试投递失败原因')
})
it.each([
['DRAFT', ['编辑', '激活']], ['ACTIVE', ['禁用']], ['DISABLED', []],
] as const)('keeps template state actions for %s', async (status, labels) => {
vi.mocked(api.listTemplates).mockResolvedValue(page([{ ...template, status }]))
const wrapper = mount(MessageTemplatesView, options())
await flushPromises()
const actions = wrapper.get('.el-table__body-wrapper .density-actions')
expect(actions.findAll('button').map(item => item.text())).toEqual(labels)
expect(actions.find('svg').exists()).toBe(false)
if (status === 'DRAFT') {
await click(wrapper, '编辑', '.el-table__body-wrapper button')
expect(document.querySelector('.el-dialog.admin-density-dialog .density-form')).not.toBeNull()
}
})
it('preserves template code, variable preview, version and draft editing in the native modal', async () => {
vi.mocked(api.updateTemplate).mockResolvedValue(template)
const wrapper = mount(TemplateEditorDialog, { ...options(), props: { modelValue: true, template } })
await flushPromises()
const modal = wrapper.get('.el-dialog.admin-density-dialog')
expect((modal.element as HTMLElement).style.getPropertyValue('--el-dialog-width')).toContain('760px')
expect(wrapper.get('input[placeholder="如：ORDER_SHIPPED_NOTICE"]').attributes('disabled')).toBeDefined()
await click(wrapper, 'order_no')
expect(wrapper.get('.template-preview').text()).toContain('${order_no}')
await click(wrapper, '保存模板')
expect(api.updateTemplate).toHaveBeenCalledWith(template.id, expect.objectContaining({ version: 3, variableWhitelist: ['order_no'], bodyTemplate: expect.stringContaining('${order_no}') }))
expect(wrapper.emitted('success')).toHaveLength(1)
})
it('keeps required composer input and scheduled payload in the native modal', async () => {
vi.mocked(api.createNotification).mockResolvedValue(task)
const wrapper = mount(MessageComposerDialog, { ...options(), props: { modelValue: true, templates: [{ ...template, status: 'ACTIVE' }] } })
await flushPromises()
const modal = wrapper.get('.el-dialog.admin-density-dialog')
expect((modal.element as HTMLElement).style.getPropertyValue('--el-dialog-width')).toContain('680px')
expect(modal.find('.density-form').exists()).toBe(true)
await click(wrapper, '立即发送')
expect(api.createNotification).not.toHaveBeenCalled()
wrapper.findAllComponents(ElSelect)[0]!.vm.$emit('update:modelValue', template.templateCode)
await wrapper.get('input[placeholder="请输入服务端角色编码"]').setValue('TEST_OPERATOR')
await wrapper.get('[role="switch"]').trigger('click')
await flushPromises()
await click(wrapper, '确认定时发送')
expect(api.createNotification).toHaveBeenCalledWith(expect.objectContaining({ tenantId: '0', templateCode: template.templateCode, recipientType: 'PLATFORM_ROLE', roleCode: 'TEST_OPERATOR', variables: {}, scheduledAt: expect.any(String), idempotencyKey: expect.any(String) }))
expect(wrapper.emitted('success')).toHaveLength(1)
})
})
src/modules/notifications/pages/MessageManagementView.vue
+11 -4
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { onMounted, ref, watch } from 'vue'
import { Eye, Plus, RotateCcw, XCircle } from '@lucide/vue'
import { Plus } from '@lucide/vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import AdminPage from '@/shared/components/AdminPage.vue'; import AppDrawer from '@/shared/components/AppDrawer.vue'; import DataTable,{type DataTableColumn} from '@/shared/components/DataTable.vue'; import ListPageLayout from '@/shared/components/ListPageLayout.vue'; import QueryToolbar,{type QueryField,type QueryModel} from '@/shared/components/QueryToolbar.vue'; import LoadErrorState from '@/shared/components/LoadErrorState.vue'; import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import MessageComposerDialog from '../components/MessageComposerDialog.vue'; import { cancelTask, getTask, listTasks, listTemplates, retryTask } from '../api/notificationCenter'; import type { NotificationTask, NotificationTaskDetail, NotificationTaskStatus, NotificationTemplate } from '../types'; import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'; import { useAccessPreviewStore } from '@/core/access/accessPreview'
@@ -14,8 +15,14 @@ async function load(){loading.value=true;error.value=null;try{const keyword=Stri
async function loadTemplates(){if(!access.can('platform:notification:create'))return;try{const data=await listTemplates({page:1,size:200,status:'ACTIVE'});templates.value=data.records}catch(e){ElMessage.error(getApiErrorMessage(e,'可用模板加载失败'))}}
async function openDetail(row:NotificationTask){detailOpen.value=true;detailLoading.value=true;detailError.value=null;detail.value=null;try{detail.value=await getTask(row.id)}catch(e){detailError.value=getApiErrorDetails(e,'消息任务详情加载失败')}finally{detailLoading.value=false}}
function search(){page.value===1?void load():page.value=1}
async function action(row:NotificationTask,type:'cancel'|'retry'){try{await ElMessageBox.confirm(type==='cancel'?'确定取消该消息任务吗？':'确定重试该消息任务吗？',type==='cancel'?'取消任务':'重试任务',{type:'warning'});actionId.value=row.id;if(type==='cancel')await cancelTask(row.id);else await retryTask(row.id);ElMessage.success(type==='cancel'?'任务已取消':'任务已提交重试');await load()}catch(e){if(e!=='cancel'&&e!=='close')ElMessage.error(getApiErrorMessage(e,type==='cancel'?'取消失败':'重试失败'))}finally{actionId.value=''}}
async function action(row:NotificationTask,type:'cancel'|'retry'){try{await ElMessageBox.confirm(type==='cancel'?'确定取消该消息任务吗？':'确定重试该消息任务吗？',type==='cancel'?'取消任务':'重试任务',{type:'warning',customClass:'admin-density-confirm'});actionId.value=row.id;if(type==='cancel')await cancelTask(row.id);else await retryTask(row.id);ElMessage.success(type==='cancel'?'任务已取消':'任务已提交重试');await load()}catch(e){if(e!=='cancel'&&e!=='close')ElMessage.error(getApiErrorMessage(e,type==='cancel'?'取消失败':'重试失败'))}finally{actionId.value=''}}
watch([page,pageSize],load);onMounted(()=>{void load();void loadTemplates()})
</script>
<template><AdminPage><ListPageLayout aria-label="消息管理列表"><template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="消息任务筛选" :fields="queryFields" preference-key="notifications-messages-query" @search="search" /></template><template v-if="error" #state><LoadErrorState title="消息任务加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState></template><section v-if="!error" class="surface-panel table-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="columns" preference-key="notifications-messages-table" :loading="loading" :total="result.total" row-key="id" empty-text="暂无消息任务"><template #toolbar-actions><el-button v-if="access.can('platform:notification:create')" type="primary" :disabled="!templates.length" @click="composerOpen=true"><Plus :size="16"/>新建消息</el-button></template><template #pagination-left><span>共 {{ result.total }} 个任务</span></template><template #actions="{row}"><div class="table-actions"><el-button link type="primary" @click="openDetail(row as NotificationTask)"><Eye :size="15"/>查看</el-button><el-button v-if="access.can('platform:notification:task:cancel')&&['CREATED','SCHEDULED'].includes((row as NotificationTask).status)" link type="danger" :loading="actionId===(row as NotificationTask).id" @click="action(row as NotificationTask,'cancel')"><XCircle :size="15"/>取消</el-button><el-button v-if="access.can('platform:notification:task:retry')&&['RETRYING','DEAD'].includes((row as NotificationTask).status)" link type="primary" :loading="actionId===(row as NotificationTask).id" @click="action(row as NotificationTask,'retry')"><RotateCcw :size="15"/>重试</el-button></div></template><template #category="{row}">{{notificationCategoryLabel((row as NotificationTask).category)}}</template><template #scheduledAt="{row}">{{formatDate((row as NotificationTask).scheduledAt)}}</template><template #sentAt="{row}">{{formatDate((row as NotificationTask).sentAt)}}</template><template #status="{row}"><el-tag>{{statusLabel((row as NotificationTask).status)}}</el-tag></template></DataTable></section></ListPageLayout><MessageComposerDialog v-model="composerOpen" :templates="templates" @success="load"/><AppDrawer v-model="detailOpen" title="消息任务详情" size="min(820px, 94vw)" :loading="detailLoading" :show-footer="false" destroy-on-close><LoadErrorState v-if="detailError" title="消息任务详情加载失败" :message="detailError.message" :loading="detailLoading"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState><template v-else-if="detail"><dl class="detail-grid"><div><dt>任务号</dt><dd>{{detail.taskNo}}</dd></div><div><dt>状态</dt><dd>{{statusLabel(detail.status)}}</dd></div><div><dt>业务分类</dt><dd>{{notificationCategoryLabel(detail.category)}}</dd></div><div><dt>接收人数</dt><dd>{{detail.recipientCount}}</dd></div><div><dt>尝试次数</dt><dd>{{detail.attemptCount}}</dd></div><div><dt>发送时间</dt><dd>{{formatDate(detail.sentAt)}}</dd></div></dl><section v-if="detail.lastError" class="failure-panel" role="alert"><strong>任务失败原因</strong><p>{{detail.lastError}}</p></section><h3 class="recipient-heading">收件人投递明细</h3><el-table :data="detail.recipients" row-key="id" empty-text="暂无收件人明细" size="small"><el-table-column prop="displayName" label="收件人" min-width="150"/><el-table-column label="应用端" width="110"><template #default="{row}">{{notificationAppLabel(row.appCode)}}</template></el-table-column><el-table-column label="投递状态" width="120"><template #default="{row}">{{notificationRecipientStatusLabel(row.status)}}</template></el-table-column><el-table-column label="送达时间" width="180"><template #default="{row}">{{formatDate(row.deliveredAt)}}</template></el-table-column><el-table-column prop="failureReason" label="失败原因" min-width="220"><template #default="{row}">{{row.failureReason||'—'}}</template></el-table-column></el-table></template></AppDrawer></AdminPage></template>
<style scoped>.table-actions{display:flex;min-height:32px;align-items:center;gap:8px}.table-actions :deep(.el-button+.el-button){margin-left:0}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 20px}.detail-grid div{min-width:0;padding:12px;border:1px solid var(--border-color,#e5e7eb);border-radius:6px}.detail-grid dt{color:var(--text-secondary,#64748b);font-size:12px}.detail-grid dd{margin:6px 0 0;overflow-wrap:anywhere;color:var(--text-primary,#1f2937);font-weight:600}.failure-panel{margin-bottom:20px;padding:12px;border:1px solid #f2b8b5;border-radius:6px;background:#fff7f6;color:#9f2d27}.failure-panel p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.recipient-heading{margin:0 0 12px;font-size:15px}@media(max-width:720px){.detail-grid{grid-template-columns:1fr}}</style>
<template><AdminPage class="admin-density"><ListPageLayout aria-label="消息管理列表"><template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="消息任务筛选" :fields="queryFields" preference-key="notifications-messages-query" @search="search" /></template><template v-if="error" #state><LoadErrorState title="消息任务加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState></template><section v-if="!error" class="surface-panel table-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="columns" preference-key="notifications-messages-table" :loading="loading" :total="result.total" row-key="id" empty-text="暂无消息任务"><template #toolbar-actions><el-button v-if="access.can('platform:notification:create')" type="primary" :disabled="!templates.length" @click="composerOpen=true"><Plus :size="16"/>新建消息</el-button></template><template #pagination-left><span>共 {{ result.total }} 个任务</span></template><template #actions="{row}"><div class="density-actions"><el-button class="density-action" data-tone="neutral" @click="openDetail(row as NotificationTask)">查看</el-button><el-button v-if="access.can('platform:notification:task:cancel')&&['CREATED','SCHEDULED'].includes((row as NotificationTask).status)" class="density-action" data-tone="danger" :loading="actionId===(row as NotificationTask).id" @click="action(row as NotificationTask,'cancel')">取消</el-button><el-button v-if="access.can('platform:notification:task:retry')&&['RETRYING','DEAD'].includes((row as NotificationTask).status)" class="density-action" data-tone="neutral" :loading="actionId===(row as NotificationTask).id" @click="action(row as NotificationTask,'retry')">重试</el-button></div></template><template #category="{row}">{{notificationCategoryLabel((row as NotificationTask).category)}}</template><template #scheduledAt="{row}">{{formatDate((row as NotificationTask).scheduledAt)}}</template><template #sentAt="{row}">{{formatDate((row as NotificationTask).sentAt)}}</template><template #status="{row}"><el-tag>{{statusLabel((row as NotificationTask).status)}}</el-tag></template></DataTable></section></ListPageLayout><MessageComposerDialog v-model="composerOpen" :templates="templates" @success="load"/><AppDrawer class="admin-density admin-density-drawer" v-model="detailOpen" title="消息任务详情" size="min(820px, 94vw)" :loading="detailLoading" :show-footer="false" destroy-on-close><LoadErrorState v-if="detailError" title="消息任务详情加载失败" :message="detailError.message" :loading="detailLoading"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState><template v-else-if="detail"><dl class="detail-grid density-fields"><div><dt>任务号</dt><dd>{{detail.taskNo}}</dd></div><div><dt>状态</dt><dd>{{statusLabel(detail.status)}}</dd></div><div><dt>业务分类</dt><dd>{{notificationCategoryLabel(detail.category)}}</dd></div><div><dt>接收人数</dt><dd>{{detail.recipientCount}}</dd></div><div><dt>尝试次数</dt><dd>{{detail.attemptCount}}</dd></div><div><dt>发送时间</dt><dd>{{formatDate(detail.sentAt)}}</dd></div></dl><section v-if="detail.lastError" class="failure-panel" role="alert"><strong>任务失败原因</strong><p>{{detail.lastError}}</p></section><h3 class="recipient-heading">收件人投递明细</h3><el-table :data="detail.recipients" row-key="id" empty-text="暂无收件人明细" size="small"><el-table-column prop="displayName" label="收件人" min-width="150"/><el-table-column label="应用端" width="110"><template #default="{row}">{{notificationAppLabel(row.appCode)}}</template></el-table-column><el-table-column label="投递状态" width="120"><template #default="{row}">{{notificationRecipientStatusLabel(row.status)}}</template></el-table-column><el-table-column label="送达时间" width="180"><template #default="{row}">{{formatDate(row.deliveredAt)}}</template></el-table-column><el-table-column prop="failureReason" label="失败原因" min-width="220"><template #default="{row}">{{row.failureReason||'—'}}</template></el-table-column></el-table></template></AppDrawer></AdminPage></template>
<style scoped>
.detail-grid.density-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--admin-space-6); }
.failure-panel { margin-bottom: var(--admin-space-6); padding: var(--admin-space-5); border: 1px solid #f2b8b5; border-radius: var(--admin-radius); background: #fff7f6; color: #9f2d27; }
.failure-panel p { margin: var(--admin-space-2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.recipient-heading { margin: 0 0 var(--admin-space-5); font-size: var(--admin-font-section); }
@media(max-width:720px) { .detail-grid.density-fields { grid-template-columns: 1fr; } }
</style>
src/modules/notifications/pages/MessageTemplatesView.vue
+4 -4
View File
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'; import { Pencil, Plus, Power } from '@lucide/vue'; import { ElMessage, ElMessageBox } from 'element-plus'
import '@/styles/adminDensity.css'
import { onMounted, ref, watch } from 'vue'; import { Plus } from '@lucide/vue'; import { ElMessage, ElMessageBox } from 'element-plus'
import AdminPage from '@/shared/components/AdminPage.vue'; import DataTable,{type DataTableColumn} from '@/shared/components/DataTable.vue'; import ListPageLayout from '@/shared/components/ListPageLayout.vue'; import QueryToolbar,{type QueryField,type QueryModel} from '@/shared/components/QueryToolbar.vue'; import LoadErrorState from '@/shared/components/LoadErrorState.vue'; import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'; import TemplateEditorDialog from '../components/TemplateEditorDialog.vue'; import { changeTemplateStatus, listTemplates } from '../api/notificationCenter'; import type { NotificationTemplate, TemplateStatus } from '../types'; import { getApiErrorDetails,getApiErrorMessage,type ApiErrorDetails } from '@/shared/api/http'; import { useAccessPreviewStore } from '@/core/access/accessPreview'
const access=useAccessPreviewStore(),page=ref(1),pageSize=ref(20),loading=ref(false),actionId=ref(''),error=ref<ApiErrorDetails|null>(null),editorOpen=ref(false),editing=ref<NotificationTemplate|null>(null),result=ref({records:[] as NotificationTemplate[],total:0,pages:0}),filters=ref<QueryModel>({code:'',category:'',title:'',status:''})
const queryFields:QueryField[]=[{key:'code',type:'input',label:'模板CODE',placeholder:'模板CODE'},{key:'category',type:'input',label:'业务分类',placeholder:'业务分类'},{key:'title',type:'input',label:'名称或标题',placeholder:'模板名称/标题'},{key:'status',type:'select',label:'状态',placeholder:'全部状态',options:[{label:'草稿',value:'DRAFT'},{label:'已激活',value:'ACTIVE'},{label:'已禁用',value:'DISABLED'}]}]
@@ -7,8 +8,7 @@ const columns:DataTableColumn[]=[{key:'actions',label:'操作',width:190,fixed:'
function statusLabel(v:TemplateStatus){return {DRAFT:'草稿',ACTIVE:'已激活',DISABLED:'已禁用'}[v]}
async function load(){loading.value=true;error.value=null;try{const d=await listTemplates({page:page.value,size:pageSize.value,templateCode:String(filters.value.code||'').trim()||undefined,category:String(filters.value.category||'').trim()||undefined,title:String(filters.value.title||'').trim()||undefined,status:(filters.value.status||undefined) as TemplateStatus|undefined});result.value={records:d.records,total:d.total,pages:d.pages}}catch(e){error.value=getApiErrorDetails(e,'模板加载失败')}finally{loading.value=false}}
function search(){page.value===1?void load():page.value=1}function create(){editing.value=null;editorOpen.value=true}function edit(row:NotificationTemplate){editing.value=row;editorOpen.value=true}
async function changeStatus(row:NotificationTemplate){const target=row.status==='DRAFT'?'ACTIVE':'DISABLED';try{await ElMessageBox.confirm(target==='ACTIVE'?'激活后模板不可再编辑，确定继续吗？':'禁用后首期不可重新启用，确定继续吗？',target==='ACTIVE'?'激活模板':'禁用模板',{type:'warning'});actionId.value=row.id;await changeTemplateStatus(row.id,target,row.version);ElMessage.success(target==='ACTIVE'?'模板已激活':'模板已禁用');await load()}catch(e){if(e!=='cancel'&&e!=='close')ElMessage.error(getApiErrorMessage(e,'模板状态变更失败'))}finally{actionId.value=''}}
async function changeStatus(row:NotificationTemplate){const target=row.status==='DRAFT'?'ACTIVE':'DISABLED';try{await ElMessageBox.confirm(target==='ACTIVE'?'激活后模板不可再编辑，确定继续吗？':'禁用后首期不可重新启用，确定继续吗？',target==='ACTIVE'?'激活模板':'禁用模板',{type:'warning',customClass:'admin-density-confirm'});actionId.value=row.id;await changeTemplateStatus(row.id,target,row.version);ElMessage.success(target==='ACTIVE'?'模板已激活':'模板已禁用');await load()}catch(e){if(e!=='cancel'&&e!=='close')ElMessage.error(getApiErrorMessage(e,'模板状态变更失败'))}finally{actionId.value=''}}
watch([page,pageSize],load);onMounted(load)
</script>
<template><AdminPage><ListPageLayout aria-label="消息模板列表"><template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="消息模板筛选" :fields="queryFields" preference-key="notifications-templates-query" @search="search"/></template><template v-if="error" #state><LoadErrorState title="模板加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error"/></template></LoadErrorState></template><section v-if="!error" class="surface-panel table-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="columns" preference-key="notifications-templates-table" :loading="loading" :total="result.total" row-key="id" empty-text="暂无消息模板"><template #toolbar-actions><el-button v-if="access.can('platform:notification:template:create')" type="primary" @click="create"><Plus :size="16"/>新增模板</el-button></template><template #pagination-left><span>共 {{result.total}} 个模板</span></template><template #actions="{row}"><div class="table-actions"><el-button v-if="access.can('platform:notification:template:edit')&&(row as NotificationTemplate).status==='DRAFT'" link type="primary" @click="edit(row as NotificationTemplate)"><Pencil :size="15"/>编辑</el-button><el-button v-if="access.can('platform:notification:template:status')&&(row as NotificationTemplate).status!=='DISABLED'" link :type="(row as NotificationTemplate).status==='ACTIVE'?'danger':'primary'" :loading="actionId===(row as NotificationTemplate).id" @click="changeStatus(row as NotificationTemplate)"><Power :size="15"/>{{(row as NotificationTemplate).status==='DRAFT'?'激活':'禁用'}}</el-button></div></template><template #status="{row}"><el-tag>{{statusLabel((row as NotificationTemplate).status)}}</el-tag></template></DataTable></section></ListPageLayout><TemplateEditorDialog v-model="editorOpen" :template="editing" @success="load"/></AdminPage></template>
<style scoped>.table-actions{display:flex;min-height:32px;align-items:center;gap:8px}.table-actions :deep(.el-button+.el-button){margin-left:0}</style>
<template><AdminPage class="admin-density"><ListPageLayout aria-label="消息模板列表"><template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="消息模板筛选" :fields="queryFields" preference-key="notifications-templates-query" @search="search"/></template><template v-if="error" #state><LoadErrorState title="模板加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error"/></template></LoadErrorState></template><section v-if="!error" class="surface-panel table-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="columns" preference-key="notifications-templates-table" :loading="loading" :total="result.total" row-key="id" empty-text="暂无消息模板"><template #toolbar-actions><el-button v-if="access.can('platform:notification:template:create')" type="primary" @click="create"><Plus :size="16"/>新增模板</el-button></template><template #pagination-left><span>共 {{result.total}} 个模板</span></template><template #actions="{row}"><div class="density-actions"><el-button v-if="access.can('platform:notification:template:edit')&&(row as NotificationTemplate).status==='DRAFT'" class="density-action" data-tone="neutral" @click="edit(row as NotificationTemplate)">编辑</el-button><el-button v-if="access.can('platform:notification:template:status')&&(row as NotificationTemplate).status!=='DISABLED'" class="density-action" :data-tone="(row as NotificationTemplate).status==='ACTIVE'?'danger':'success'" :loading="actionId===(row as NotificationTemplate).id" @click="changeStatus(row as NotificationTemplate)">{{(row as NotificationTemplate).status==='DRAFT'?'激活':'禁用'}}</el-button></div></template><template #status="{row}"><el-tag>{{statusLabel((row as NotificationTemplate).status)}}</el-tag></template></DataTable></section></ListPageLayout><TemplateEditorDialog v-model="editorOpen" :template="editing" @success="load"/></AdminPage></template>
src/modules/notifications/pages/PlatformNotificationsView.vue
+9 -10
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, onMounted, ref, watch } from 'vue'
import { Bell, CheckCheck, Eye, RefreshCcw } from '@lucide/vue'
import { CheckCheck } from '@lucide/vue'
import { ElMessage } from 'element-plus'
import AdminPage from '@/shared/components/AdminPage.vue'
import AppDrawer from '@/shared/components/AppDrawer.vue'
@@ -78,7 +79,7 @@ onMounted(() => void load())
</script>
<template>
<AdminPage>
<AdminPage class="admin-density">
<ListPageLayout aria-label="我的消息列表">
<template #toolbar><QueryToolbar v-model="filters" class="surface-panel" ariaLabel="我的消息筛选" :fields="queryFields" preference-key="notifications-inbox-query" @search="search" /></template>
<template v-if="error" #state><LoadErrorState title="我的消息加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState></template>
@@ -86,14 +87,14 @@ onMounted(() => void load())
<DataTable v-model:page="page" v-model:page-size="pageSize" :data="result.records" :columns="columns" :loading="loading" :total="result.total" row-key="id" empty-text="暂无消息">
<template #toolbar-actions><el-button v-if="canReadAll && unreadCount" type="primary" plain :disabled="loading" @click="markAllRead"><CheckCheck :size="16" />全部标为已读</el-button></template>
<template #pagination-left><span>共 {{ result.total }} 条<span v-if="unreadCount">，未读 {{ unreadCount }} 条</span></span></template>
<template #actions="{ row }"><div class="table-actions"><el-button link type="primary" @click="openDetail(row as NotificationInboxItem)"><Eye :size="15" />查看</el-button><el-button v-if="canRead && (row as NotificationInboxItem).status === 'UNREAD'" link type="primary" @click="markRead(row as NotificationInboxItem)"><CheckCheck :size="15" />标为已读</el-button></div></template>
<template #actions="{ row }"><div class="density-actions"><el-button class="density-action" data-tone="neutral" @click="openDetail(row as NotificationInboxItem)">查看</el-button><el-button v-if="canRead && (row as NotificationInboxItem).status === 'UNREAD'" class="density-action" data-tone="neutral" @click="markRead(row as NotificationInboxItem)">标为已读</el-button></div></template>
<template #category="{ row }">{{ notificationCategoryLabel((row as NotificationInboxItem).category) }}</template>
<template #sentAt="{ row }">{{ formatDate((row as NotificationInboxItem).sentAt) }}</template>
<template #status="{ row }"><el-tag :type="(row as NotificationInboxItem).status === 'UNREAD' ? 'danger' : 'info'">{{ statusLabel((row as NotificationInboxItem).status) }}</el-tag></template>
</DataTable>
</section>
</ListPageLayout>
<AppDrawer v-model="detailOpen" title="消息详情" size="min(680px, 94vw)" :loading="detailLoading" :show-footer="false" destroy-on-close>
<AppDrawer class="admin-density admin-density-drawer" v-model="detailOpen" title="消息详情" size="min(680px, 94vw)" :loading="detailLoading" :show-footer="false" destroy-on-close>
<LoadErrorState v-if="detailError" title="消息详情加载失败" :message="detailError.message" :loading="detailLoading"><template #details><ApiErrorMeta :details="detailError" /></template></LoadErrorState>
<article v-else-if="detail" class="notification-detail"><header><h2>{{ detail.title }}</h2><el-tag :type="detail.status === 'UNREAD' ? 'danger' : 'info'">{{ statusLabel(detail.status) }}</el-tag></header><p class="meta">{{ notificationCategoryLabel(detail.category) }} · {{ formatDate(detail.sentAt) }}</p><div class="body">{{ detail.body || '暂无消息内容' }}</div></article>
</AppDrawer>
@@ -101,10 +102,8 @@ onMounted(() => void load())
</template>
<style scoped>
.table-actions { display: flex; min-height: 32px; align-items: center; gap: 8px; }
.table-actions :deep(.el-button + .el-button) { margin-left: 0; }
.notification-detail header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notification-detail h2 { margin: 0; color: var(--text-primary, #1f2937); font-size: 20px; line-height: 1.4; }
.notification-detail .meta { color: var(--text-secondary, #64748b); font-size: 12px; }
.notification-detail .body { padding-top: 16px; border-top: 1px solid var(--border-color, #e5e7eb); color: var(--text-primary, #1f2937); white-space: pre-wrap; line-height: 1.8; }
.notification-detail header { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-5); }
.notification-detail h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--cc-text); font-size: var(--admin-font-title); line-height: 1.4; }
.notification-detail .meta { margin: var(--admin-space-5) 0; color: var(--cc-muted); font-size: var(--admin-font-caption); }
.notification-detail .body { padding-top: var(--admin-space-6); border-top: 1px solid var(--cc-border); color: var(--cc-text); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
</style>
src/modules/overseas-business/overseasBusinessDensity.css
+11
View File
@@ -0,0 +1,11 @@
/* Shared business form layout for purchase and local transport editors. */
.admin-density.overseas-business-editor { width: 100%; max-width: 1120px; }
.overseas-business-editor .overseas-business-form-layout { gap: 0; border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: var(--admin-surface); }
.overseas-business-editor .form-reference { min-width: 0; color: var(--cc-muted); font-size: var(--admin-font-body); overflow-wrap: anywhere; }
.overseas-business-editor .form-panel { min-width: 0; padding: var(--admin-space-5); }
.overseas-business-editor .form-grid { display: grid; min-width: 0; gap: 0 var(--admin-space-5); }
.overseas-business-editor .form-grid :is(.el-select, .el-date-editor, .el-input-number) { width: 100%; }
.overseas-business-editor .form-grid small { display: block; margin-top: var(--admin-space-1); color: var(--cc-muted); font-size: var(--admin-font-caption); }
.overseas-business-editor .field-error { display: block; margin-top: var(--admin-space-1); color: var(--el-color-danger); font-size: var(--admin-font-caption); }
.overseas-business-editor .form-grid .field-error { color: var(--el-color-danger); }
.overseas-business-editor .form-actions { display: flex; justify-content: flex-end; gap: var(--admin-space-3); padding-top: var(--admin-space-5); border-top: 1px solid var(--cc-border); }
src/modules/overseas-business/pages/OverseasBusinessViews.test.ts
+39 -2
View File
@@ -11,7 +11,7 @@ import { listPlatformTenants } from '@/modules/iam'
import AppDialog from '@/shared/components/AppDialog.vue'
import type { LocalLooseboardDetail, LocalLooseboardOrder, LocalTransportDetail, LocalTransportOrder, OverseasPurchaseDetail } from '../types'
import {
createLocalLooseboardOrder, createUsTruckOrder, getLocalLooseboardOrder, getOverseasPurchase, getUsTruckOrder,
createOverseasPurchaseFee, uploadOverseasPurchaseFile, createLocalLooseboardOrder, createUsTruckOrder, getLocalLooseboardOrder, getOverseasPurchase, getUsTruckOrder,
listLocalLooseboardOrders, listOverseasPurchaseCustomerOptions, listOverseasPurchaseWarehouseOptions,
listOverseasPurchases, listUsTruckOrders, reviewOverseasPurchase, updateLocalLooseboardOrder, updateOverseasPurchase, updateUsTruckOrder,
} from '../api/platformOverseasBusiness'
@@ -64,13 +64,50 @@ describe('overseas business mounted pages', () => {
vi.mocked(listPlatformTenants).mockReset().mockResolvedValue({ records: [{ id: '10001', tenantName: '可选客户', status: 'ACTIVE' } as never], page: 1, size: 200, total: 1, pages: 1 })
})
it('keeps all procurement facts in dense groups and business references in the heading', async () => {
routing.route.params = { purchaseId: 'internal-purchase-route' }; routing.route.query = { customerId: '10001' }
const wrapper = mountPage(PurchaseOrderDetailView)
await flushPromises()
expect(wrapper.get('.density-detail-title').text()).toBe('OP-100')
expect(wrapper.get('[aria-label="采购订单概览"]').text()).toContain('洛杉矶采购仓')
expect(wrapper.findAll('.density-fields')).toHaveLength(4)
expect(wrapper.findAll('.density-fields dt')).toHaveLength(23)
expect(wrapper.findAll('.density-fields .wide')).toHaveLength(4)
expect(wrapper.text()).not.toContain('internal-purchase-route')
await wrapper.get('.density-back').trigger('click')
expect(routing.push).toHaveBeenCalledWith({ name: 'overseas-business-purchases' })
})
it('retains the voucher upload and fee dialog workflow with teleported density', async () => {
routing.route.params = { purchaseId: 'OP-100' }; routing.route.query = { customerId: '10001' }
const voucher = { id: 'voucher-1', fileId: 'file-1', fileName: 'voucher.pdf', category: 'VOUCHER' as const, contentType: 'application/pdf', sizeBytes: 3, createdAt: '2026-09-14T10:00:00' }
vi.mocked(uploadOverseasPurchaseFile).mockReset().mockResolvedValue(voucher)
vi.mocked(createOverseasPurchaseFee).mockReset().mockResolvedValue({ id: 'fee-1', feeNo: 'FEE-1', feeItemCode: 'COURIER', feeItemName: '快递费', amount: '25', currency: 'CNY', voucherFileId: 'file-1', voucherFileName: 'voucher.pdf', remark: null, walletStatus: 'FREEZE_PENDING', walletErrorMessage: null, createdAt: '2026-09-14T10:00:00' })
const wrapper = mountPage(PurchaseOrderDetailView)
await flushPromises()
const input = wrapper.findAll('input[type="file"]')[1]!
const file = new File(['pdf'], 'voucher.pdf', { type: 'application/pdf' })
Object.defineProperty(input.element, 'files', { value: [file], configurable: true })
await input.trigger('change'); await flushPromises()
expect(uploadOverseasPurchaseFile).toHaveBeenCalledWith('OP-100', '10001', 'VOUCHER', file)
const dialog = wrapper.findAllComponents(AppDialog)[1]!
expect(dialog.props('modelValue')).toBe(true)
expect(document.querySelector('.admin-density-dialog .density-form')).not.toBeNull()
dialog.findComponent({ name: 'ElInputNumber' }).vm.$emit('update:modelValue', 25)
await wrapper.vm.$nextTick()
dialog.vm.$emit('confirm'); await flushPromises()
expect(createOverseasPurchaseFee).toHaveBeenCalledWith('OP-100', '10001', expect.objectContaining({ amount: 25, voucherFileId: 'file-1' }))
expect(dialog.props('modelValue')).toBe(false)
})
it('mounts procurement list with customer candidates and real data', async () => { const wrapper = mountPage(PurchaseOrdersView); await flushPromises(); expect(listOverseasPurchaseCustomerOptions).toHaveBeenCalled(); expect(listOverseasPurchases).toHaveBeenCalledWith({ page: 1, size: 20, customerId: '', orderNo: '', purchaseCategory: '', productName: '' }); expect(wrapper.text()).toContain('OP-100'); expect(wrapper.text()).toContain('待出库'); expect(wrapper.text()).toContain('2026-08-01 10:00') })
it('refreshes the cached procurement list after returning from detail or edit', () => { expect(purchaseListSource).toContain('onActivated'); expect(purchaseListSource).toMatch(/onActivated\(\(\) => \{ if \(activatedOnce\) void load\(\)/) })
it('refreshes the cached procurement detail after an edit completes', () => { expect(purchaseDetailSource).toContain('onActivated'); expect(purchaseDetailSource).toMatch(/onActivated\(\(\) => \{ if \(activatedOnce\) void load\(\)/) })
it('paginates procurement results', async () => { vi.mocked(listOverseasPurchases).mockResolvedValue({ records: [purchase], page: 1, size: 20, total: 40, pages: 2 }); const wrapper = mountPage(PurchaseOrdersView); await flushPromises(); await wrapper.find('button[aria-label="第 2 页"]').trigger('click'); await flushPromises(); expect(listOverseasPurchases).toHaveBeenLastCalledWith(expect.objectContaining({ page: 2 })) })
it('renders procurement empty and traceable 403 states', async () => { vi.mocked(listOverseasPurchases).mockResolvedValueOnce({ records: [], page: 1, size: 20, total: 0, pages: 0 }); let wrapper = mountPage(PurchaseOrdersView); await flushPromises(); expect(wrapper.text()).toContain('暂无符合筛选条件的海外采购订单'); wrapper.unmount(); vi.mocked(listOverseasPurchases).mockRejectedValue(new ApiResponseError('forbidden', 'A0403', 403, null, 'REQ-403')); wrapper = mountPage(PurchaseOrdersView); await flushPromises(); expect(wrapper.text()).toContain('当前账号无权访问该数据'); expect(wrapper.text()).toContain('REQ-403') })
it('mounts procurement detail operation history without exposing internal operator ids', async () => { routing.route.params = { purchaseId: 'OP-100' }; routing.route.query = { customerId: '10001' }; const wrapper = mountPage(PurchaseOrderDetailView); await flushPromises(); expect(getOverseasPurchase).toHaveBeenCalledWith('OP-100', '10001'); expect(wrapper.text()).toContain('操作流水'); expect(wrapper.text()).toContain('编辑'); expect(wrapper.text()).not.toContain('INTERNAL-OPERATOR-7') })
it('reviews a pending procurement from its detail page', async () => { const pending = { ...purchase, status: 'PENDING_REVIEW' as const, inboundQuantity: 0, inventoryQuantity: 0, version: 2 }; routing.route.params = { purchaseId: 'OP-100' }; routing.route.query = { customerId: '10001' }; vi.mocked(getOverseasPurchase).mockResolvedValue(pending); vi.mocked(reviewOverseasPurchase).mockResolvedValue({ ...pending, status: 'APPROVED', version: 3 }); const wrapper = mountPage(PurchaseOrderDetailView); await flushPromises(); await wrapper.findAll('button').find((button) => button.text().includes('通过'))?.trigger('click'); await wrapper.vm.$nextTick(); const reviewDialog = wrapper.findAllComponents(AppDialog)[0]; expect(reviewDialog.props('modelValue')).toBe(true); reviewDialog.vm.$emit('confirm'); await flushPromises(); expect(reviewOverseasPurchase).toHaveBeenCalledWith('OP-100', '10001', expect.objectContaining({ version: 2, decision: 'APPROVE', idempotencyKey: expect.any(String) })); expect(wrapper.text()).toContain('已通过'); expect(wrapper.find('.header-actions').text()).toBe('返回') })
it('reviews a pending procurement from its detail page', async () => { const pending = { ...purchase, status: 'PENDING_REVIEW' as const, inboundQuantity: 0, inventoryQuantity: 0, version: 2 }; routing.route.params = { purchaseId: 'OP-100' }; routing.route.query = { customerId: '10001' }; vi.mocked(getOverseasPurchase).mockResolvedValue(pending); vi.mocked(reviewOverseasPurchase).mockResolvedValue({ ...pending, status: 'APPROVED', version: 3 }); const wrapper = mountPage(PurchaseOrderDetailView); await flushPromises(); await wrapper.findAll('button').find((button) => button.text().includes('通过'))?.trigger('click'); await wrapper.vm.$nextTick(); const reviewDialog = wrapper.findAllComponents(AppDialog)[0]; expect(reviewDialog.props('modelValue')).toBe(true); reviewDialog.vm.$emit('confirm'); await flushPromises(); expect(reviewOverseasPurchase).toHaveBeenCalledWith('OP-100', '10001', expect.objectContaining({ version: 2, decision: 'APPROVE', idempotencyKey: expect.any(String) })); expect(wrapper.text()).toContain('已通过'); expect(wrapper.find('.header-actions').exists()).toBe(false); expect(wrapper.get('.density-back').text()).toBe('返回列表') })
it('submits procurement explicit null clears and keeps a 409 visible without local overwrite', async () => { routing.route.params = { purchaseId: 'OP-100' }; routing.route.query = { customerId: '10001' }; vi.mocked(updateOverseasPurchase).mockRejectedValue(new ApiResponseError('订单版本冲突，请刷新后重试', 'B0409', 409)); const wrapper = mountPage(PurchaseOrderEditView); await flushPromises(); const productUrl = wrapper.findAll('.el-form-item').find((item) => item.text().startsWith('商品链接'))!.find('input'); const domesticCarrier = wrapper.findAll('.el-form-item').find((item) => item.text().startsWith('国内承运商'))!.find('input'); await productUrl.setValue(''); await domesticCarrier.setValue(''); wrapper.findComponent({ name: 'ElSelect' }).vm.$emit('update:modelValue', null); wrapper.findComponent({ name: 'ElDatePicker' }).vm.$emit('update:modelValue', null); await wrapper.vm.$nextTick(); await wrapper.findAll('button').find((button) => button.text().trim() === '保存')?.trigger('click'); await flushPromises(); expect(updateOverseasPurchase).toHaveBeenCalledWith('OP-100', '10001', expect.objectContaining({ version: 3, productUrl: null, domesticCarrier: null, estimatedArrivalAt: null, purchaseWarehouseId: null })); expect(document.body.textContent).toContain('订单版本冲突，请刷新后重试'); expect((productUrl.element as HTMLInputElement).value).toBe(''); expect((domesticCarrier.element as HTMLInputElement).value).toBe(''); expect(routing.push).not.toHaveBeenCalled() })
it('keeps procurement list usable when customer candidates fail', async () => { vi.mocked(listOverseasPurchaseCustomerOptions).mockRejectedValue(new Error('candidate unavailable')); const wrapper = mountPage(PurchaseOrdersView); await flushPromises(); expect(listOverseasPurchases).toHaveBeenCalled(); expect(wrapper.text()).toContain('OP-100'); expect(wrapper.text()).not.toContain('candidate unavailable') })
it('loads procurement edit data but blocks unsafe warehouse selection when candidates fail', async () => { routing.route.params = { purchaseId: 'OP-100' }; routing.route.query = { customerId: '10001' }; vi.mocked(listOverseasPurchaseWarehouseOptions).mockRejectedValue(new Error('candidate unavailable')); const wrapper = mountPage(PurchaseOrderEditView); await flushPromises(); expect(getOverseasPurchase).toHaveBeenCalledWith('OP-100', '10001'); expect(wrapper.text()).toContain('采购仓候选加载失败'); expect(wrapper.text()).toContain('OP-100') })
src/modules/overseas-business/pages/PurchaseOrderDetailView.vue
+28 -9
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, onActivated, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, Check, Upload, X } from '@lucide/vue'
@@ -8,6 +9,7 @@ import AppDialog from '@/shared/components/AppDialog.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 StatusBadge from '@/shared/components/StatusBadge.vue'
import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
import LoadErrorState from '@/shared/components/LoadErrorState.vue'
import { getApiErrorDetails, type ApiErrorDetails } from '@/shared/api/http'
@@ -94,24 +96,41 @@ onActivated(() => { if (activatedOnce) void load(); else activatedOnce = true })
</script>
<template>
<AdminPage><DetailPageLayout aria-label="海外采购订单详情">
<template #header><div class="detail-header"><div><h2>海外采购订单详情</h2><span>订单编号：{{ detail?.orderNo || purchaseId || '—' }}</span></div><div class="header-actions"><template v-if="detail?.status === 'PENDING_REVIEW' && access.can(overseasBusinessPermissions.purchaseReview)"><el-button type="danger" plain @click="openReview('REJECT')"><X :size="16" />拒绝</el-button><el-button type="primary" @click="openReview('APPROVE')"><Check :size="16" />通过</el-button></template><el-button @click="router.push({ name: 'overseas-business-purchases' })"><ArrowLeft :size="16" />返回</el-button></div></div></template>
<AdminPage class="admin-density"><DetailPageLayout class="purchase-detail" aria-label="海外采购订单详情">
<template #header>
<div class="density-detail-header">
<div class="density-detail-heading"><el-button link class="density-back" @click="router.push({ name: 'overseas-business-purchases' })"><ArrowLeft :size="16" />返回列表</el-button><h1 class="density-detail-title">{{ detail?.orderNo || '—' }}</h1><StatusBadge v-if="detail" :status="statusLabels[detail.status]" /></div>
<div v-if="detail?.status === 'PENDING_REVIEW' && access.can(overseasBusinessPermissions.purchaseReview)" class="header-actions"><el-button type="danger" plain @click="openReview('REJECT')"><X :size="16" />拒绝</el-button><el-button type="primary" @click="openReview('APPROVE')"><Check :size="16" />通过</el-button></div>
</div>
</template>
<template v-if="detail" #summary><dl class="density-detail-overview" aria-label="采购订单概览"><div><dt>客户</dt><dd>{{ display(detail.customerName) }}</dd></div><div><dt>采购仓库</dt><dd>{{ display(detail.purchaseWarehouseName) }}</dd></div><div><dt>采购数量</dt><dd>{{ display(detail.purchaseQuantity) }}</dd></div><div><dt>入库量</dt><dd>{{ display(detail.inboundQuantity) }}</dd></div><div><dt>出库量</dt><dd>{{ display(detail.outboundQuantity) }}</dd></div><div><dt>库存量</dt><dd>{{ display(detail.inventoryQuantity) }}</dd></div></dl></template>
<LoadErrorState v-if="loadError" title="采购订单详情暂时无法加载" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
<div v-else v-loading="loading" class="detail-surface surface-panel">
<div v-else v-loading="loading" class="detail-surface">
<div class="detail-grid">
<section><h3>商品信息</h3><dl><div v-for="field in productFields" :key="field[0]"><dt>{{ field[0] }}</dt><dd>{{ display(field[1]) }}</dd></div></dl></section>
<section><h3>库存信息</h3><dl><div v-for="field in stockFields" :key="field[0]"><dt>{{ field[0] }}</dt><dd>{{ display(field[1]) }}</dd></div></dl></section>
<section><h3>订单信息</h3><dl><div v-for="field in orderFields" :key="field[0]"><dt>{{ field[0] }}</dt><dd>{{ display(field[1]) }}</dd></div></dl></section>
<section><h3>快递信息</h3><dl><div v-for="field in courierFields" :key="field[0]"><dt>{{ field[0] }}</dt><dd>{{ display(field[1]) }}</dd></div></dl></section>
<section><h3>商品信息</h3><dl class="density-fields"><div v-for="field in productFields" :key="field[0]" :class="{ wide: ['商品规格', '商品链接', '收货地址', '订单备注'].includes(field[0]) }"><dt>{{ field[0] }}</dt><dd>{{ display(field[1]) }}</dd></div></dl></section>
<section><h3>库存信息</h3><dl class="density-fields"><div v-for="field in stockFields" :key="field[0]" :class="{ wide: ['商品规格', '商品链接', '收货地址', '订单备注'].includes(field[0]) }"><dt>{{ field[0] }}</dt><dd>{{ display(field[1]) }}</dd></div></dl></section>
<section><h3>订单信息</h3><dl class="density-fields"><div v-for="field in orderFields" :key="field[0]" :class="{ wide: ['商品规格', '商品链接', '收货地址', '订单备注'].includes(field[0]) }"><dt>{{ field[0] }}</dt><dd>{{ display(field[1]) }}</dd></div></dl></section>
<section><h3>快递信息</h3><dl class="density-fields"><div v-for="field in courierFields" :key="field[0]" :class="{ wide: ['商品规格', '商品链接', '收货地址', '订单备注'].includes(field[0]) }"><dt>{{ field[0] }}</dt><dd>{{ display(field[1]) }}</dd></div></dl></section>
<section class="full"><div class="section-heading"><h3>出库明细</h3><span>共 {{ outboundDetails.length }} 条，出库量 {{ outboundDetails.reduce((sum, item) => sum + item.quantity, 0) }}</span></div><DataTable :data="outboundDetails" :columns="[{ key: 'quantity', label: '出库数量', width: 110 }, { key: 'carrier', label: '承运商', minWidth: 140 }, { key: 'trackingNo', label: '运单号', minWidth: 160 }, { key: 'shippedAt', label: '出库时间', minWidth: 155, formatter: (row: any) => formatDateTime(row.shippedAt) }, { key: 'remark', label: '备注', minWidth: 180 }]" row-key="id" empty-text="暂无出库明细" /></section>
<section class="full"><div class="section-heading"><h3>签收文件与费用凭证</h3><div v-if="access.can(overseasBusinessPermissions.purchaseEdit)" class="section-actions"><input ref="receiptInput" hidden type="file" @change="upload('RECEIPT', $event)"><input ref="voucherInput" hidden type="file" @change="upload('VOUCHER', $event)"><el-button :loading="uploading" @click="receiptInput?.click()"><Upload :size="15" />上传签收文件</el-button><el-button type="primary" :loading="uploading" :disabled="!detail || ['PENDING_REVIEW', 'REJECTED'].includes(detail.status)" @click="voucherInput?.click()"><Upload :size="15" />登记费用</el-button></div></div><DataTable :data="detail?.files || []" :columns="fileColumns" row-key="id" empty-text="暂无签收文件或费用凭证" /></section>
<section class="full"><div class="section-heading"><h3>费用明细</h3><span>每条费用独立冻结，订单全部入库后结算。</span></div><DataTable :data="detail?.fees || []" :columns="feeColumns" row-key="id" empty-text="暂无费用明细" /></section>
<section class="full"><div class="section-heading"><h3>操作流水</h3><span>展示创建、审核、入库与出库明细变更。</span></div><DataTable :data="detail?.histories || []" :columns="historyColumns" row-key="createdAt" empty-text="暂无操作流水" /></section>
</div>
</div>
</DetailPageLayout><AppDialog v-model="reviewDialogOpen" :title="reviewDecision === 'APPROVE' ? '通过采购订单' : '拒绝采购订单'" width="min(520px, calc(100vw - 28px))" :confirm-text="reviewDecision === 'APPROVE' ? '确认通过' : '确认拒绝'" :confirm-loading="reviewing" @confirm="submitReview" @cancel="closeReview"><el-alert :title="reviewDecision === 'APPROVE' ? '通过后平台可维护采购入库、出库和费用信息。' : '拒绝后该采购订单将结束审核流程。'" :type="reviewDecision === 'APPROVE' ? 'success' : 'warning'" show-icon :closable="false" /><el-form class="review-form" label-position="top"><el-form-item label="审核备注"><el-input v-model="reviewRemark" type="textarea" :rows="4" maxlength="1000" show-word-limit :placeholder="reviewDecision === 'APPROVE' ? '请输入通过说明（选填）' : '请输入拒绝原因（选填）'" /></el-form-item></el-form></AppDialog><AppDialog v-model="feeDialogOpen" title="登记采购费用" width="min(560px, calc(100vw - 28px))" confirm-text="确认登记" :confirm-loading="savingFee" @confirm="saveFee"><el-form label-position="top"><el-form-item label="费用项" required><el-input v-model="feeForm.feeItemName" maxlength="64" placeholder="请输入费用名称" /></el-form-item><el-form-item label="费用代码" required><el-input v-model="feeForm.feeItemCode" maxlength="64" placeholder="请输入费用代码" /></el-form-item><el-form-item label="费用金额（CNY）" required><el-input-number v-model="feeForm.amount" :min="0.01" :precision="2" controls-position="right" placeholder="请输入费用金额" /></el-form-item><el-form-item label="费用凭证"><el-input :model-value="voucher?.fileName" disabled /></el-form-item><el-form-item label="备注"><el-input v-model="feeForm.remark" type="textarea" :rows="3" maxlength="500" placeholder="请输入费用说明（选填）" /></el-form-item></el-form></AppDialog></AdminPage>
</DetailPageLayout><AppDialog class="admin-density-dialog" v-model="reviewDialogOpen" :title="reviewDecision === 'APPROVE' ? '通过采购订单' : '拒绝采购订单'" width="min(520px, calc(100vw - 28px))" :confirm-text="reviewDecision === 'APPROVE' ? '确认通过' : '确认拒绝'" :confirm-loading="reviewing" @confirm="submitReview" @cancel="closeReview"><el-alert :title="reviewDecision === 'APPROVE' ? '通过后平台可维护采购入库、出库和费用信息。' : '拒绝后该采购订单将结束审核流程。'" :type="reviewDecision === 'APPROVE' ? 'success' : 'warning'" show-icon :closable="false" /><p class="review-reference">订单编号：{{ detail?.orderNo || '—' }}</p><el-form class="density-form review-form" label-position="top"><el-form-item label="审核备注"><el-input v-model="reviewRemark" type="textarea" :rows="4" maxlength="1000" show-word-limit :placeholder="reviewDecision === 'APPROVE' ? '请输入通过说明（选填）' : '请输入拒绝原因（选填）'" /></el-form-item></el-form></AppDialog><AppDialog class="admin-density-dialog" v-model="feeDialogOpen" title="登记采购费用" width="min(560px, calc(100vw - 28px))" confirm-text="确认登记" :confirm-loading="savingFee" @confirm="saveFee"><el-form class="density-form" label-position="top"><el-form-item label="费用项" required><el-input v-model="feeForm.feeItemName" maxlength="64" placeholder="请输入费用名称" /></el-form-item><el-form-item label="费用代码" required><el-input v-model="feeForm.feeItemCode" maxlength="64" placeholder="请输入费用代码" /></el-form-item><el-form-item label="费用金额（CNY）" required><el-input-number v-model="feeForm.amount" :min="0.01" :precision="2" controls-position="right" placeholder="请输入费用金额" /></el-form-item><el-form-item label="费用凭证"><el-input :model-value="voucher?.fileName" disabled /></el-form-item><el-form-item label="备注"><el-input v-model="feeForm.remark" type="textarea" :rows="3" maxlength="500" placeholder="请输入费用说明（选填）" /></el-form-item></el-form></AppDialog></AdminPage>
</template>
<style scoped>
.detail-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border:1px solid var(--cc-border); border-radius:8px; background:#fff; }.detail-header h2 { margin:0; font-size:16px; }.detail-header span { display:block; margin-top:4px; color:var(--cc-muted); font-size:12px; }.header-actions { display:flex; align-items:center; gap:10px; }.detail-surface { min-height:240px; padding:20px; }.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }.detail-grid section { padding:0 0 18px; border-bottom:1px solid var(--cc-border); }.detail-grid section:nth-child(3), .detail-grid section:nth-child(4) { padding-top:18px; border-bottom:0; }.detail-grid h3 { margin:0 0 12px; font-size:14px; }.detail-grid .full { grid-column:1 / -1; padding-top:18px; border-top:1px solid var(--cc-border); border-bottom:0; }.detail-grid dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 18px; margin:0; }.detail-grid dl div { min-width:0; }.detail-grid dt { color:var(--cc-muted); font-size:12px; }.detail-grid dd { margin:4px 0 0; overflow-wrap:anywhere; color:var(--cc-text); font-size:13px; }.section-heading,.section-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; }.section-heading span { color:var(--cc-muted); font-size:12px; }.review-form { margin-top:16px; }:deep(.el-input-number){width:100%}
.purchase-detail { gap: 0; border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: var(--admin-surface); }
.header-actions, .section-actions { display: flex; align-items: center; gap: var(--admin-space-3); }
.detail-surface { min-width: 0; padding: var(--admin-space-5); }
.detail-grid { display: grid; min-width: 0; gap: var(--admin-space-5); }
.detail-grid section { min-width: 0; }
.detail-grid h3 { margin: 0 0 var(--admin-space-3); font-size: var(--admin-font-section); }
.detail-grid .density-fields > .wide { grid-column: span 2; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-3); margin-bottom: var(--admin-space-3); }
.section-heading h3 { margin: 0; }
.section-heading span, .review-reference { color: var(--cc-muted); font-size: var(--admin-font-caption); }
.review-reference { margin: var(--admin-space-3) 0; }
:deep(.el-input-number) { width: 100%; }
</style>
src/modules/overseas-business/pages/PurchaseOrderEditView.vue
+19 -9
View File
@@ -1,7 +1,9 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import '../overseasBusinessDensity.css'
import { computed, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, Save, Plus, Trash2 } from '@lucide/vue'
import { ArrowLeft, Save } from '@lucide/vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import AdminPage from '@/shared/components/AdminPage.vue'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
@@ -72,18 +74,26 @@ watch([purchaseId, customerId], () => { void loadWarehouses().then(load) }, { im
</script>
<template>
<AdminPage width="comfortable"><OperationErrorToast :details="submitError" /><DetailPageLayout aria-label="编辑海外采购订单">
<template #header><div class="form-header"><div><h2>编辑海外采购订单</h2><span>订单编号：{{ form.orderNo || purchaseId || '—' }}</span></div><el-button @click="router.push({ name: 'overseas-business-purchase-detail', params: { purchaseId }, query: { customerId } })"><ArrowLeft :size="16" />返回</el-button></div></template>
<AdminPage class="admin-density overseas-business-editor"><OperationErrorToast :details="submitError" /><DetailPageLayout class="overseas-business-form-layout" aria-label="编辑海外采购订单">
<template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="router.push({ name: 'overseas-business-purchase-detail', params: { purchaseId }, query: { customerId } })"><ArrowLeft :size="16" />返回详情</el-button><h1 class="density-detail-title">编辑海外采购订单</h1><span class="form-reference">{{ form.orderNo || '—' }}</span></div></div></template>
<LoadErrorState v-if="loadError" title="采购订单暂时无法编辑" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
<section v-else v-loading="loading" class="surface-panel form-panel"><el-form ref="formRef" :model="form" :rules="rules" label-position="top" :disabled="saving">
<FormSection title="商品信息"><div class="form-grid three"><el-form-item label="订单编号"><el-input v-model="form.orderNo" disabled /></el-form-item><el-form-item label="采购品类" prop="purchaseCategory"><el-input v-model="form.purchaseCategory" maxlength="128" placeholder="请输入采购品类" /></el-form-item><el-form-item label="商品名称" prop="productName"><el-input v-model="form.productName" maxlength="255" placeholder="请输入商品名称" /></el-form-item><el-form-item class="span-2" label="商品规格"><el-input v-model="form.productSpecification" maxlength="500" placeholder="请输入商品规格" /></el-form-item><el-form-item class="span-3" label="商品链接"><el-input v-model="form.productUrl" maxlength="2000" placeholder="请输入商品链接" /></el-form-item></div></FormSection>
<FormSection title="库存与快递信息"><div class="form-grid three"><el-form-item label="入库量"><el-input-number v-model="form.inboundQuantity" :min="0" :disabled="!inboundEditable" controls-position="right" placeholder="请输入入库数量" /><small v-if="!inboundEditable">服务端仅允许已通过订单修改入库量</small></el-form-item><el-form-item label="出库量"><el-input :model-value="outboundQuantity" disabled /></el-form-item><el-form-item label="状态"><el-input :model-value="statusLabels[form.status]" disabled /></el-form-item><el-form-item label="采购仓库"><el-select v-model="form.purchaseWarehouseId" clearable filterable :loading="warehousesLoading" :disabled="Boolean(warehousesError)" placeholder="请选择采购仓"><el-option v-for="item in warehouses" :key="item.warehouseId" :label="`${item.warehouseName}${item.warehouseCode ? ` · ${item.warehouseCode}` : ''}`" :value="item.warehouseId" /></el-select><small v-if="warehousesError" class="field-error">{{ warehousesError }}</small></el-form-item><el-form-item label="预计到达时间"><el-date-picker v-model="form.estimatedArrivalAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" clearable /></el-form-item><el-form-item label="国内承运商"><el-input v-model="form.domesticCarrier" maxlength="128" placeholder="请输入国内承运商" /></el-form-item><el-form-item label="国内运单号"><el-input v-model="form.domesticTrackingNo" maxlength="128" placeholder="请输入国内物流单号" /></el-form-item><el-form-item label="海外承运商"><el-input v-model="form.overseasCarrier" maxlength="128" placeholder="请输入海外承运商" /></el-form-item><el-form-item label="海外运单号"><el-input v-model="form.overseasTrackingNo" maxlength="128" placeholder="请输入海外物流单号" /></el-form-item><el-form-item class="span-3" label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入备注（选填）" /></el-form-item></div></FormSection>
<FormSection title="出库明细"><div class="outbound-head"><span>出库总量：<b>{{ outboundQuantity }}</b> / {{ form.inboundQuantity }}</span><el-button type="primary" plain size="small" @click="addOutbound"><Plus :size="14" />添加出库明细</el-button></div><div v-if="!form.outboundDetails.length" class="empty-outbound">暂无出库明细，可添加多条出库记录</div><div v-for="(item, index) in form.outboundDetails" :key="item.id" class="outbound-row"><el-form-item label="出库数量"><el-input-number v-model="item.quantity" :min="0" :max="form.inboundQuantity" controls-position="right" placeholder="请输入出库数量" /></el-form-item><el-form-item label="承运商"><el-input v-model="item.carrier" maxlength="128" placeholder="请输入快递或物流名称" /></el-form-item><el-form-item label="运单号"><el-input v-model="item.trackingNo" maxlength="128" placeholder="请输入物流单号" /></el-form-item><el-form-item label="出库时间"><el-date-picker v-model="item.shippedAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" clearable /></el-form-item><el-form-item class="outbound-remark" label="备注"><el-input v-model="item.remark" maxlength="500" placeholder="请输入本次出库备注（选填）" /></el-form-item><el-button class="remove-outbound" type="danger" link @click="removeOutbound(index)" :aria-label="`删除第 ${index + 1} 条出库明细`"><Trash2 :size="16" /></el-button></div></FormSection>
<section v-else v-loading="loading" class="form-panel"><el-form class="density-form" ref="formRef" :model="form" :rules="rules" label-position="top" :disabled="saving">
<FormSection class="density-form-section" title="商品信息"><div class="form-grid three"><el-form-item label="订单编号"><el-input v-model="form.orderNo" disabled /></el-form-item><el-form-item label="采购品类" prop="purchaseCategory"><el-input v-model="form.purchaseCategory" maxlength="128" placeholder="请输入采购品类" /></el-form-item><el-form-item label="商品名称" prop="productName"><el-input v-model="form.productName" maxlength="255" placeholder="请输入商品名称" /></el-form-item><el-form-item class="span-2" label="商品规格"><el-input v-model="form.productSpecification" maxlength="500" placeholder="请输入商品规格" /></el-form-item><el-form-item class="span-3" label="商品链接"><el-input v-model="form.productUrl" maxlength="2000" placeholder="请输入商品链接" /></el-form-item></div></FormSection>
<FormSection class="density-form-section" title="库存与快递信息"><div class="form-grid three"><el-form-item label="入库量"><el-input-number v-model="form.inboundQuantity" :min="0" :disabled="!inboundEditable" controls-position="right" placeholder="请输入入库数量" /><small v-if="!inboundEditable">服务端仅允许已通过订单修改入库量</small></el-form-item><el-form-item label="出库量"><el-input :model-value="outboundQuantity" disabled /></el-form-item><el-form-item label="状态"><el-input :model-value="statusLabels[form.status]" disabled /></el-form-item><el-form-item label="采购仓库"><el-select v-model="form.purchaseWarehouseId" clearable filterable :loading="warehousesLoading" :disabled="Boolean(warehousesError)" placeholder="请选择采购仓"><el-option v-for="item in warehouses" :key="item.warehouseId" :label="`${item.warehouseName}${item.warehouseCode ? ` · ${item.warehouseCode}` : ''}`" :value="item.warehouseId" /></el-select><small v-if="warehousesError" class="field-error">{{ warehousesError }}</small></el-form-item><el-form-item label="预计到达时间"><el-date-picker v-model="form.estimatedArrivalAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" clearable /></el-form-item><el-form-item label="国内承运商"><el-input v-model="form.domesticCarrier" maxlength="128" placeholder="请输入国内承运商" /></el-form-item><el-form-item label="国内运单号"><el-input v-model="form.domesticTrackingNo" maxlength="128" placeholder="请输入国内物流单号" /></el-form-item><el-form-item label="海外承运商"><el-input v-model="form.overseasCarrier" maxlength="128" placeholder="请输入海外承运商" /></el-form-item><el-form-item label="海外运单号"><el-input v-model="form.overseasTrackingNo" maxlength="128" placeholder="请输入海外物流单号" /></el-form-item><el-form-item class="span-3" label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入备注（选填）" /></el-form-item></div></FormSection>
<FormSection class="density-form-section" title="出库明细"><div class="outbound-head"><span>出库总量：<b>{{ outboundQuantity }}</b> / {{ form.inboundQuantity }}</span><el-button class="density-action" data-tone="primary" size="small" @click="addOutbound">添加出库明细</el-button></div><div v-if="!form.outboundDetails.length" class="empty-outbound">暂无出库明细，可添加多条出库记录</div><div v-for="(item, index) in form.outboundDetails" :key="item.id" class="outbound-row"><el-form-item label="出库数量"><el-input-number v-model="item.quantity" :min="0" :max="form.inboundQuantity" controls-position="right" placeholder="请输入出库数量" /></el-form-item><el-form-item label="承运商"><el-input v-model="item.carrier" maxlength="128" placeholder="请输入快递或物流名称" /></el-form-item><el-form-item label="运单号"><el-input v-model="item.trackingNo" maxlength="128" placeholder="请输入物流单号" /></el-form-item><el-form-item label="出库时间"><el-date-picker v-model="item.shippedAt" type="datetime" value-format="YYYY-MM-DDTHH:mm:ss" clearable /></el-form-item><el-form-item class="outbound-remark" label="备注"><el-input v-model="item.remark" maxlength="500" placeholder="请输入本次出库备注（选填）" /></el-form-item><el-button class="remove-outbound density-action" data-tone="danger" @click="removeOutbound(index)" :aria-label="`删除第 ${index + 1} 条出库明细`">删除</el-button></div></FormSection>
</el-form><footer class="form-actions"><el-button type="primary" :loading="saving" @click="save"><Save :size="16" />保存</el-button><el-button :disabled="saving" @click="router.push({ name: 'overseas-business-purchase-detail', params: { purchaseId }, query: { customerId } })">取消</el-button></footer></section>
</DetailPageLayout></AdminPage>
</template>
<style scoped>
.form-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border:1px solid var(--cc-border); border-radius:8px; background:#fff; }.form-header h2 { margin:0; font-size:16px; }.form-header span { display:block; margin-top:4px; color:var(--cc-muted); font-size:12px; }.form-panel { padding:20px 24px; }.form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 20px; }.span-2 { grid-column:span 2; }.span-3 { grid-column:1 / -1; }.form-grid :deep(.el-select), .form-grid :deep(.el-date-editor), .form-grid :deep(.el-input-number) { width:100%; }.form-grid small { display:block; margin-top:5px; color:var(--cc-muted); font-size:12px; }.form-grid .field-error { color:var(--el-color-danger); }.form-actions { display:flex; justify-content:flex-end; gap:12px; padding-top:16px; border-top:1px solid var(--cc-border); }
.outbound-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; color:var(--cc-muted); font-size:13px; }.outbound-head b { color:var(--cc-text); }.empty-outbound { padding:18px; color:var(--cc-muted); text-align:center; background:var(--cc-surface-muted); }.outbound-row { display:grid; grid-template-columns:110px 1fr 1fr 190px 1fr 32px; gap:12px; align-items:start; padding:12px; margin-bottom:10px; border:1px solid var(--cc-border); border-radius:6px; }.outbound-row :deep(.el-form-item) { margin-bottom:0; }.outbound-row :deep(.el-input-number), .outbound-row :deep(.el-date-editor) { width:100%; }.remove-outbound { margin-top:30px; }
.form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: 1 / -1; }
.outbound-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--admin-space-3); color: var(--cc-muted); font-size: var(--admin-font-body); }
.outbound-head b { color: var(--cc-text); }
.empty-outbound { padding: var(--admin-space-5); color: var(--cc-muted); text-align: center; }
.outbound-row { display: grid; grid-template-columns: 110px minmax(0,1fr) minmax(0,1fr) 190px minmax(0,1fr) 60px; gap: var(--admin-space-3); align-items: start; padding: var(--admin-space-3) 0; border-bottom: 1px solid var(--cc-border); }
.outbound-row :deep(.el-form-item) { margin-bottom: 0; }
.outbound-row :deep(.el-input-number), .outbound-row :deep(.el-date-editor) { width: 100%; }
.remove-outbound { align-self: end; }
</style>
src/modules/overseas-business/pages/PurchaseOrdersView.vue
+4 -4
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, onActivated, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Eye, Pencil } 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'
@@ -60,16 +60,16 @@ onActivated(() => { if (activatedOnce) void load(); else activatedOnce = true })
</script>
<template>
<AdminPage><ListPageLayout aria-label="海外采购订单列表">
<AdminPage class="admin-density"><ListPageLayout aria-label="海外采购订单列表">
<template #toolbar><QueryToolbar v-model="filters" class="surface-panel" :fields="fields" ariaLabel="海外采购订单筛选" preference-key="overseas-business-purchases-query" @search="search" /></template>
<template v-if="loadError" #state><LoadErrorState title="海外采购订单暂时无法加载" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState></template>
<section v-if="!loadError" class="surface-panel table-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="overseas-business-purchases" row-key="id" empty-text="暂无符合筛选条件的海外采购订单">
<template #actions="{ row }"><div class="table-actions"><el-button size="small" type="primary" plain @click="open(row as OverseasPurchaseSummary)"><Eye :size="15" />详情</el-button><el-button v-if="access.can(overseasBusinessPermissions.purchaseEdit)" size="small" @click="open(row as OverseasPurchaseSummary, true)"><Pencil :size="15" />编辑</el-button></div></template>
<template #actions="{ row }"><div class="density-actions"><el-button class="density-action" data-tone="neutral" size="small" @click="open(row as OverseasPurchaseSummary)">详情</el-button><el-button class="density-action" data-tone="neutral" v-if="access.can(overseasBusinessPermissions.purchaseEdit)" size="small" @click="open(row as OverseasPurchaseSummary, true)">编辑</el-button></div></template>
<template #pagination-left>共 {{ total }} 条海外采购订单</template>
</DataTable></section>
</ListPageLayout></AdminPage>
</template>
<style scoped>
.table-panel { overflow:hidden; }.table-actions { display:flex; gap:6px; }.table-actions :deep(.el-button) { margin-left:0; }
.table-panel { overflow: hidden; }
</style>
src/modules/overseas-business/pages/TransportOrderFormView.vue
+15 -9
View File
@@ -1,4 +1,6 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import '../overseasBusinessDensity.css'
import { computed, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, Save } from '@lucide/vue'
@@ -104,20 +106,24 @@ watch([orderId, routeCustomerId, isLooseboard], () => { void load(); void loadCu
</script>
<template>
<AdminPage width="comfortable"><OperationErrorToast :details="submitError" /><DetailPageLayout :aria-label="`${editing ? '编辑' : '新增'}${domainLabel}订单`">
<template #header><div class="form-header"><div><h2>{{ editing ? '编辑' : '新增' }}{{ domainLabel }}订单</h2><span v-if="editing">订单编号：{{ form.orderNo || orderId }}</span></div><el-button @click="back"><ArrowLeft :size="16" />返回列表</el-button></div></template>
<AdminPage class="admin-density overseas-business-editor"><OperationErrorToast :details="submitError" /><DetailPageLayout class="overseas-business-form-layout" :aria-label="`${editing ? '编辑' : '新增'}${domainLabel}订单`">
<template #header><div class="density-detail-header"><div class="density-detail-heading"><el-button link class="density-back" @click="back"><ArrowLeft :size="16" />返回列表</el-button><h1 class="density-detail-title">{{ editing ? '编辑' : '新增' }}{{ domainLabel }}订单</h1><span v-if="editing" class="form-reference">{{ form.orderNo || '—' }}</span></div></div></template>
<LoadErrorState v-if="loadError" :title="`${domainLabel}订单暂时无法加载`" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
<section v-else v-loading="loading" class="surface-panel form-panel"><el-form ref="formRef" :model="form" :rules="rules" label-position="top" :disabled="saving || !editableStatus">
<FormSection v-if="!editing" title="客户信息"><el-form-item label="客户"><el-select v-model="form.customerId" filterable :loading="customersLoading" :disabled="Boolean(customersError)" placeholder="请选择客户" style="width:100%"><el-option v-for="item in customers" :key="String(item.id)" :label="item.tenantName" :value="String(item.id)" /></el-select><small v-if="customersError" class="field-error">{{ customersError }}</small></el-form-item></FormSection>
<section v-else v-loading="loading" class="form-panel"><el-form class="density-form" ref="formRef" :model="form" :rules="rules" label-position="top" :disabled="saving || !editableStatus">
<FormSection class="density-form-section" v-if="!editing" title="客户信息"><el-form-item label="客户"><el-select v-model="form.customerId" filterable :loading="customersLoading" :disabled="Boolean(customersError)" placeholder="请选择客户" style="width:100%"><el-option v-for="item in customers" :key="String(item.id)" :label="item.tenantName" :value="String(item.id)" /></el-select><small v-if="customersError" class="field-error">{{ customersError }}</small></el-form-item></FormSection>
<el-alert v-if="editing && !editableStatus" type="warning" :closable="false" show-icon title="当前状态不可普通编辑，请返回列表查看" />
<FormSection v-if="isLooseboard" title="散板方式"><div class="choice-block"><el-form-item label="运输方式" prop="transportMode"><el-radio-group v-model="form.transportMode"><el-radio-button v-for="item in transportModes" :key="item.value" :value="item.value">{{ item.label }}</el-radio-button></el-radio-group></el-form-item><el-form-item label="是否打盘" prop="palletRequired"><el-radio-group v-model="form.palletRequired"><el-radio-button value="YES">是</el-radio-button><el-radio-button value="NO">否</el-radio-button></el-radio-group></el-form-item></div></FormSection>
<FormSection title="运输信息"><el-form-item label="运输类型" prop="transportType"><el-radio-group v-model="form.transportType"><el-radio-button v-for="item in transportTypes" :key="item.value" :value="item.value">{{ item.label }}</el-radio-button></el-radio-group></el-form-item><div class="form-grid two"><el-form-item label="起运地" prop="origin"><el-input v-model="form.origin" maxlength="255" placeholder="城市 / 港口 / 州" /></el-form-item><el-form-item label="目的地" prop="destination"><el-input v-model="form.destination" maxlength="255" placeholder="城市 / 州" /></el-form-item><el-form-item label="详细地址"><el-input v-model="form.originAddress" maxlength="500" placeholder="街道 / 门牌" /></el-form-item><el-form-item label="详细地址 / 码头 / 仓号"><el-input v-model="form.destinationAddress" maxlength="500" placeholder="地址 / 码头 / 仓号" /></el-form-item><el-form-item label="联系人" prop="contactName"><el-input v-model="form.contactName" maxlength="128" placeholder="请输入联系人姓名" /></el-form-item><el-form-item label="联系方式" prop="contactInfo"><el-input v-model="form.contactInfo" maxlength="128" placeholder="请输入联系方式" /></el-form-item></div></FormSection>
<FormSection title="📦 货物信息"><div class="form-grid" :class="isLooseboard ? 'four' : 'five'"><el-form-item label="柜型"><el-select v-model="form.containerType" clearable><el-option v-for="value in ['20GP','40GP','40HQ','45HQ']" :key="value" :label="value" :value="value" /></el-select></el-form-item><el-form-item v-if="!isLooseboard" label="托数" prop="palletCount"><el-input-number v-model="form.palletCount" :min="1" controls-position="right" placeholder="请输入托盘数" /></el-form-item><el-form-item label="件数" prop="packageCount"><el-input-number v-model="form.packageCount" :min="0" controls-position="right" placeholder="请输入件数" /></el-form-item><el-form-item label="总重量 (kg)" prop="totalWeightKg"><el-input v-model="form.totalWeightKg" inputmode="decimal" placeholder="请输入总重量" /></el-form-item><el-form-item label="总体积 (m³)" prop="totalVolumeCbm"><el-input v-model="form.totalVolumeCbm" inputmode="decimal" placeholder="请输入总体积" /></el-form-item></div></FormSection>
<FormSection title="费用与时效"><div class="form-grid two"><el-form-item label="预算总价" prop="budgetAmount"><el-input v-model="form.budgetAmount" inputmode="decimal" placeholder="请输入预算金额" ><template #append>{{ form.currency }}</template></el-input></el-form-item><el-form-item label="要求时间" prop="requestedDate"><el-date-picker v-model="form.requestedDate" type="date" value-format="YYYY-MM-DD" clearable /></el-form-item><el-form-item v-if="editing" label="状态"><el-input :model-value="statusLabel" disabled /></el-form-item><el-form-item class="span-2" label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入备注（选填）" /></el-form-item></div></FormSection>
<FormSection class="density-form-section" v-if="isLooseboard" title="散板方式"><div class="choice-block"><el-form-item label="运输方式" prop="transportMode"><el-radio-group v-model="form.transportMode"><el-radio-button v-for="item in transportModes" :key="item.value" :value="item.value">{{ item.label }}</el-radio-button></el-radio-group></el-form-item><el-form-item label="是否打盘" prop="palletRequired"><el-radio-group v-model="form.palletRequired"><el-radio-button value="YES">是</el-radio-button><el-radio-button value="NO">否</el-radio-button></el-radio-group></el-form-item></div></FormSection>
<FormSection class="density-form-section" title="运输信息"><el-form-item label="运输类型" prop="transportType"><el-radio-group v-model="form.transportType"><el-radio-button v-for="item in transportTypes" :key="item.value" :value="item.value">{{ item.label }}</el-radio-button></el-radio-group></el-form-item><div class="form-grid two"><el-form-item label="起运地" prop="origin"><el-input v-model="form.origin" maxlength="255" placeholder="城市 / 港口 / 州" /></el-form-item><el-form-item label="目的地" prop="destination"><el-input v-model="form.destination" maxlength="255" placeholder="城市 / 州" /></el-form-item><el-form-item label="详细地址"><el-input v-model="form.originAddress" maxlength="500" placeholder="街道 / 门牌" /></el-form-item><el-form-item label="详细地址 / 码头 / 仓号"><el-input v-model="form.destinationAddress" maxlength="500" placeholder="地址 / 码头 / 仓号" /></el-form-item><el-form-item label="联系人" prop="contactName"><el-input v-model="form.contactName" maxlength="128" placeholder="请输入联系人姓名" /></el-form-item><el-form-item label="联系方式" prop="contactInfo"><el-input v-model="form.contactInfo" maxlength="128" placeholder="请输入联系方式" /></el-form-item></div></FormSection>
<FormSection class="density-form-section" title="📦 货物信息"><div class="form-grid" :class="isLooseboard ? 'four' : 'five'"><el-form-item label="柜型"><el-select v-model="form.containerType" clearable><el-option v-for="value in ['20GP','40GP','40HQ','45HQ']" :key="value" :label="value" :value="value" /></el-select></el-form-item><el-form-item v-if="!isLooseboard" label="托数" prop="palletCount"><el-input-number v-model="form.palletCount" :min="1" controls-position="right" placeholder="请输入托盘数" /></el-form-item><el-form-item label="件数" prop="packageCount"><el-input-number v-model="form.packageCount" :min="0" controls-position="right" placeholder="请输入件数" /></el-form-item><el-form-item label="总重量 (kg)" prop="totalWeightKg"><el-input v-model="form.totalWeightKg" inputmode="decimal" placeholder="请输入总重量" /></el-form-item><el-form-item label="总体积 (m³)" prop="totalVolumeCbm"><el-input v-model="form.totalVolumeCbm" inputmode="decimal" placeholder="请输入总体积" /></el-form-item></div></FormSection>
<FormSection class="density-form-section" title="费用与时效"><div class="form-grid two"><el-form-item label="预算总价" prop="budgetAmount"><el-input v-model="form.budgetAmount" inputmode="decimal" placeholder="请输入预算金额" ><template #append>{{ form.currency }}</template></el-input></el-form-item><el-form-item label="要求时间" prop="requestedDate"><el-date-picker v-model="form.requestedDate" type="date" value-format="YYYY-MM-DD" clearable /></el-form-item><el-form-item v-if="editing" label="状态"><el-input :model-value="statusLabel" disabled /></el-form-item><el-form-item class="span-2" label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入备注（选填）" /></el-form-item></div></FormSection>
</el-form><footer class="form-actions"><el-button @click="back">取消</el-button><el-button type="primary" :loading="saving" :disabled="!editableStatus" @click="save"><Save :size="16" />{{ editing ? '保存修改' : '提交订单' }}</el-button></footer></section>
</DetailPageLayout></AdminPage>
</template>
<style scoped>
.form-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border:1px solid var(--cc-border); border-radius:8px; background:#fff; }.form-header h2 { margin:0; font-size:16px; }.form-header span { display:block; margin-top:4px; color:var(--cc-muted); font-size:12px; }.form-panel { max-width:900px; padding:20px 24px; }.form-grid { display:grid; gap:0 24px; }.form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }.form-grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 16px; }.form-grid.five { grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 16px; }.form-grid :deep(.el-select), .form-grid :deep(.el-date-editor), .form-grid :deep(.el-input-number) { width:100%; }.choice-block { display:grid; grid-template-columns:1fr 1fr; gap:24px; }.span-2 { grid-column:1 / -1; }.field-error { display:block; margin-top:5px; color:var(--el-color-danger); font-size:12px; }.form-actions { display:flex; justify-content:flex-end; gap:12px; padding-top:16px; border-top:1px solid var(--cc-border); }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.choice-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--admin-space-5); }
.span-2 { grid-column: 1 / -1; }
</style>
src/modules/overseas-business/pages/TransportOrdersView.vue
+4 -3
View File
@@ -1,7 +1,8 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Pencil, Plus } from '@lucide/vue'
import { Plus } 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'
@@ -74,12 +75,12 @@ watch([page, pageSize], () => { void load() }); watch(isLooseboard, () => { page
</script>
<template>
<AdminPage><ListPageLayout :aria-label="`${domainLabel}订单列表`">
<AdminPage class="admin-density"><ListPageLayout :aria-label="`${domainLabel}订单列表`">
<template #toolbar><QueryToolbar v-model="filters" class="surface-panel" :fields="fields" :ariaLabel="`${domainLabel}订单筛选`" :preference-key="queryPreferenceKey" @search="search" /></template>
<template v-if="loadError" #state><LoadErrorState :title="`${domainLabel}订单暂时无法加载`" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState></template>
<section v-if="!loadError" class="surface-panel table-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" :preference-key="`overseas-business-${domain}`" row-key="id" :empty-text="`暂无符合筛选条件的${domainLabel}订单`">
<template #toolbar-actions><el-button v-if="access.can(createPermission)" type="primary" @click="openCreate"><Plus :size="16" />新增订单</el-button></template>
<template #actions="{ row }"><el-tooltip v-if="access.can(editPermission)" :disabled="canEdit(row as LocalTransportOrder | LocalLooseboardOrder)" content="当前状态不可编辑"><span><el-button size="small" :disabled="!canEdit(row as LocalTransportOrder | LocalLooseboardOrder)" @click="openEdit(row as LocalTransportOrder | LocalLooseboardOrder)"><Pencil :size="15" />编辑</el-button></span></el-tooltip></template>
<template #actions="{ row }"><el-tooltip v-if="access.can(editPermission)" :disabled="canEdit(row as LocalTransportOrder | LocalLooseboardOrder)" content="当前状态不可编辑"><span><el-button class="density-action" data-tone="neutral" size="small" :disabled="!canEdit(row as LocalTransportOrder | LocalLooseboardOrder)" @click="openEdit(row as LocalTransportOrder | LocalLooseboardOrder)">编辑</el-button></span></el-tooltip></template>
<template #pagination-left>共 {{ total }} 条{{ domainLabel }}订单</template>
</DataTable></section>
</ListPageLayout></AdminPage>
src/modules/overseas-master-data/pages/ExchangeRatesView.vue
+9 -8
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { onMounted, reactive, ref, watch } from 'vue'
import { Download, Pencil, Plus, Power } from '@lucide/vue'
import { Download, Plus } from '@lucide/vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import AdminPage from '@/shared/components/AdminPage.vue'
import AppDialog from '@/shared/components/AppDialog.vue'
@@ -38,21 +39,21 @@ function search() { if (page.value === 1) void load(); else page.value = 1 }
function openCreate() { editingMonth.value = ''; Object.assign(form, { month: '', usdToCnyAverage: 0, remark: '', recordVersion: 0 }); editorOpen.value = true }
async function openEdit(row: MonthlyExchangeRate) { try { const value = await getExchangeRate(row.month); editingMonth.value = value.month; Object.assign(form, { month: value.month, usdToCnyAverage: Number(value.usdToCnyAverage), remark: value.remark || '', recordVersion: value.recordVersion }); editorOpen.value = true } catch (cause) { ElMessage.error(masterDataErrorMessage(cause, '汇率详情加载失败')) } }
async function save() { if (!form.month || form.usdToCnyAverage <= 0) { ElMessage.warning('请选择月份并填写大于 0 的平均汇率'); return } saving.value = true; try { if (editingMonth.value) await updateExchangeRate(editingMonth.value, { recordVersion: form.recordVersion, usdToCnyAverage: form.usdToCnyAverage, remark: form.remark || null }); else await createExchangeRate({ month: form.month, usdToCnyAverage: form.usdToCnyAverage, remark: form.remark || null }); ElMessage.success(editingMonth.value ? '月度汇率已更新' : '月度汇率已创建'); editorOpen.value = false; await load() } catch (cause) { ElMessage.error(masterDataErrorMessage(cause, '月度汇率保存失败')) } finally { saving.value = false } }
async function toggle(row: MonthlyExchangeRate) { const next: MasterDataStatus = row.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE'; try { await ElMessageBox.confirm(`确认${next === 'ACTIVE' ? '启用' : '停用'} ${row.month} 汇率吗？`, '汇率状态', { type: 'warning' }); await changeExchangeRateStatus(row.month, next, row.recordVersion, null); ElMessage.success('汇率状态已更新'); await load() } catch (cause) { if (cause !== 'cancel' && cause !== 'close') ElMessage.error(masterDataErrorMessage(cause, '汇率状态更新失败')) } }
async function toggle(row: MonthlyExchangeRate) { const next: MasterDataStatus = row.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE'; try { await ElMessageBox.confirm(`确认${next === 'ACTIVE' ? '启用' : '停用'} ${row.month} 汇率吗？`, '汇率状态', { customClass: 'admin-density-confirm', type: 'warning' }); await changeExchangeRateStatus(row.month, next, row.recordVersion, null); ElMessage.success('汇率状态已更新'); await load() } catch (cause) { if (cause !== 'cancel' && cause !== 'close') ElMessage.error(masterDataErrorMessage(cause, '汇率状态更新失败')) } }
async function exportCsv() { exporting.value = true; try { const { page: _page, size: _size, ...query } = params(); saveCsv(await exportExchangeRates(query), 'monthly-exchange-rates.csv') } catch (cause) { ElMessage.error(masterDataErrorMessage(cause, '汇率导出失败')) } finally { exporting.value = false } }
watch([page, pageSize], load); onMounted(load)
</script>
<template><AdminPage><ListPageLayout aria-label="汇率管理">
<template><AdminPage class="admin-density"><ListPageLayout aria-label="汇率管理">
<template #toolbar><QueryToolbar v-model="filters" class="surface-panel" :fields="fields" ariaLabel="汇率月份筛选" preference-key="overseas-exchange-rates-query" :loading="loading" @search="search" /></template>
<template #metrics><section class="rate-summary"><article v-for="item in [{label:'最新维护汇率',value:summary.latestUsdToCnyAverage??'—'},{label:'汇率月份',value:summary.latestMonth||'—'},{label:'最后更新人',value:summary.updatedBy||'—'},{label:'最后更新时间',value:summary.updatedAt||'—'}]" :key="item.label" class="surface-panel"><span>{{ item.label }}</span><strong>{{ item.value }}</strong></article></section></template>
<template #metrics><dl class="rate-summary density-detail-overview"><div v-for="item in [{label:'最新维护汇率',value:summary.latestUsdToCnyAverage??'—'},{label:'汇率月份',value:summary.latestMonth||'—'},{label:'最后更新人',value:summary.updatedBy||'—'},{label:'最后更新时间',value:summary.updatedAt||'—'}]" :key="item.label"><dt>{{ item.label }}</dt><dd>{{ item.value }}</dd></div></dl></template>
<template #state><LoadErrorState v-if="error" title="月度汇率加载失败" :message="error.message" @retry="load" /></template>
<section class="surface-panel table-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :total="total" :loading="loading" row-key="month" preference-key="overseas-exchange-rates-table" empty-text="暂无月度汇率">
<template #toolbar-start><div><h2>美元兑人民币月平均汇率</h2><p>统一口径：1 USD = X CNY</p></div></template>
<template #toolbar-actions><el-button v-if="access.can(permission.exchangeRateCreate)" type="primary" @click="openCreate"><Plus :size="16" />更新月度汇率</el-button><el-button v-if="access.can(permission.exchangeRateExport)" :loading="exporting" @click="exportCsv"><Download :size="16" />导出</el-button></template>
<template #actions="{ row }"><el-button v-if="access.can(permission.exchangeRateEdit)" link type="primary" @click="openEdit(row as MonthlyExchangeRate)"><Pencil :size="15" />编辑</el-button><el-button v-if="access.can(permission.exchangeRateStatus)" link :type="(row as MonthlyExchangeRate).status === 'ACTIVE' ? 'danger' : 'success'" @click="toggle(row as MonthlyExchangeRate)"><Power :size="15" />{{ (row as MonthlyExchangeRate).status === 'ACTIVE' ? '停用' : '启用' }}</el-button></template>
<template #actions="{ row }"><div class="density-actions"><el-button data-tone="neutral" class="density-action" v-if="access.can(permission.exchangeRateEdit)" @click="openEdit(row as MonthlyExchangeRate)">编辑</el-button><el-button class="density-action" v-if="access.can(permission.exchangeRateStatus)" :data-tone="(row as MonthlyExchangeRate).status === 'ACTIVE' ? 'danger' : 'success'" @click="toggle(row as MonthlyExchangeRate)">{{ (row as MonthlyExchangeRate).status === 'ACTIVE' ? '停用' : '启用' }}</el-button></div></template>
<template #conversion="{ row }">1 USD = {{ (row as MonthlyExchangeRate).usdToCnyAverage }} CNY</template><template #status="{ row }"><el-tag :type="(row as MonthlyExchangeRate).status === 'ACTIVE' ? 'success' : 'info'">{{ (row as MonthlyExchangeRate).status === 'ACTIVE' ? '启用' : '停用' }}</el-tag></template>
</DataTable></section>
<AppDialog v-model="editorOpen" :title="editingMonth ? '编辑月度汇率' : '更新月度汇率'" width="min(560px, calc(100vw - 28px))" :confirm-loading="saving" @confirm="save"><el-form label-position="top"><el-form-item label="汇率月份"><el-date-picker v-model="form.month" type="month" value-format="YYYY-MM" :disabled="!!editingMonth" /></el-form-item><el-form-item label="美元兑人民币平均汇率"><el-input-number v-model="form.usdToCnyAverage" :min="0.00000001" :precision="8" placeholder="请输入美元兑人民币月均汇率" /><p>汇率方向：1 USD = X CNY</p></el-form-item><el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="1000" placeholder="请输入备注（选填）" /></el-form-item></el-form></AppDialog>
<AppDialog class="admin-density-dialog" v-model="editorOpen" :title="editingMonth ? '编辑月度汇率' : '更新月度汇率'" width="min(560px, calc(100vw - 28px))" :confirm-loading="saving" @confirm="save"><el-form class="density-form" label-position="top"><el-form-item label="汇率月份"><el-date-picker v-model="form.month" type="month" value-format="YYYY-MM" :disabled="!!editingMonth" /></el-form-item><el-form-item label="美元兑人民币平均汇率"><el-input-number v-model="form.usdToCnyAverage" :min="0.00000001" :precision="8" placeholder="请输入美元兑人民币月均汇率" /><p>汇率方向：1 USD = X CNY</p></el-form-item><el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="1000" placeholder="请输入备注（选填）" /></el-form-item></el-form></AppDialog>
</ListPageLayout></AdminPage></template>
<style scoped>.rate-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.rate-summary article{padding:16px 18px}.rate-summary span{display:block;color:var(--cc-muted);font-size:12px}.rate-summary strong{display:block;margin-top:8px;font-size:22px}.table-panel{min-width:0;overflow:hidden}</style>
<style scoped>.table-panel{min-width:0;overflow:hidden}</style>
src/modules/overseas-master-data/pages/OverseasMasterDataMount.test.ts
+12 -1
View File
@@ -1,5 +1,6 @@
import { flushPromises, shallowMount, type VueWrapper } from '@vue/test-utils'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { getVehicle } from '../api/overseasMasterData'
import ExchangeRatesView from './ExchangeRatesView.vue'
import OverseasQuotesView from './OverseasQuotesView.vue'
import VehicleDetailView from './VehicleDetailView.vue'
@@ -26,5 +27,15 @@ function mountView(component: object): VueWrapper { return shallowMount(componen
describe('overseas master data real page mounts', () => {
beforeEach(() => push.mockReset())
it.each([OverseasQuotesView, ExchangeRatesView, VehiclesView])('mounts a real API-backed list page', async (component) => { const wrapper = mountView(component); await flushPromises(); expect(wrapper.find('[data-test="data-table"]').exists()).toBe(true) })
it('mounts API-backed vehicle detail without fabricating fulfillment history', async () => { const wrapper = mountView(VehicleDetailView); await flushPromises(); expect(wrapper.text()).toContain('CA-TEST'); expect(wrapper.text()).toContain('当前车辆主数据接口明确不包含派送履约记录') })
it('keeps the business title empty on detail failure instead of exposing the route ID', async () => {
vi.mocked(getVehicle).mockRejectedValueOnce(new Error('加载失败'))
const wrapper = mountView(VehicleDetailView)
await flushPromises()
expect(wrapper.get('.density-detail-title').text()).toBe('—')
expect(wrapper.text()).not.toContain('VH-TEST-001')
expect(wrapper.find('.density-fields').exists()).toBe(false)
expect(wrapper.findComponent({ name: 'LoadErrorState' }).exists()).toBe(true)
})
it('mounts API-backed vehicle detail without fabricating fulfillment history', async () => { const wrapper = mountView(VehicleDetailView); await flushPromises(); expect(wrapper.get('.density-detail-title').text()).toBe('CA-TEST'); expect(wrapper.get('.density-fields').findAll('dt')).toHaveLength(11); expect(wrapper.get('.density-fields').text()).toContain('在役'); expect(wrapper.text()).not.toContain('IN_SERVICE'); expect(wrapper.text()).toContain('当前车辆主数据接口明确不包含派送履约记录') })
})
src/modules/overseas-master-data/pages/OverseasMasterDataViews.test.ts
+2 -2
View File
@@ -42,8 +42,8 @@ describe('overseas master data real contract pages', () => {
for (const label of ['自有车辆', '外派车辆', '司机 / 外派单位']) expect(vehicles).toContain(label)
expect(vehicles).toContain("key:'region'")
expect(vehicles).toContain("placeholder:'全部区域'")
expect(vehicles).toContain('class="status-tabs"')
expect(vehicles).toContain("'status-tab',{'is-active':ownership===tab[1]}")
expect(vehicles).toContain('class="status-tabs density-tabs"')
expect(vehicles).toContain("'status-tab',{active:ownership===tab[1]}")
expect(vehicles).not.toContain('<el-segmented')
expect(vehicles).not.toContain('aria-label="车辆区域"')
})
src/modules/overseas-master-data/pages/OverseasMasterDataWriteBehavior.test.ts
+14
View File
@@ -64,6 +64,20 @@ describe('overseas master data failed writes preserve editor context', () => {
vi.mocked(api.getVehicle).mockResolvedValue(vehicle)
})
it.each([
[OverseasQuotesView, ['详情', '编辑', '停用']],
[VehiclesView, ['查看', '编辑', '状态']],
[ExchangeRatesView, ['编辑', '停用']],
])('keeps all available actions visible without an unnecessary overflow menu', async (component, labels) => {
const wrapper = mountView(component)
await flushPromises()
const actions = wrapper.get('.density-actions')
const expected = component === OverseasQuotesView ? ['详情', '编辑', '启用'] : labels
expect(actions.findAll('button').map(button => button.text().trim())).toEqual(expected)
expect(actions.findAll('button').every(button => button.classes().includes('density-action'))).toBe(true)
expect(actions.find('el-dropdown-stub').exists()).toBe(false)
})
it('keeps quote edit open, sends only update fields, and shows A0409 request ID', async () => {
vi.mocked(api.updateQuote).mockRejectedValue(new ApiResponseError('记录版本已变化', 'A0409', 200, null, 'req-quote-409'))
const wrapper = mountView(OverseasQuotesView)
src/modules/overseas-master-data/pages/OverseasQuotesView.vue
+8 -7
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { onMounted, reactive, ref, watch } from 'vue'
import { Download, Eye, Pencil, Plus, Power } from '@lucide/vue'
import { Download, Plus } from '@lucide/vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import AdminPage from '@/shared/components/AdminPage.vue'
import AppDialog from '@/shared/components/AppDialog.vue'
@@ -48,19 +49,19 @@ function fill(d:OverseasWarehouseQuoteDetail){const s=d.summary;Object.assign(fo
async function openCreate(){editingId.value='';resetForm();if(!options.value.length)await loadOptions();editorOpen.value=true}
async function openEdit(row:OverseasWarehouseQuote){try{const d=await getQuote(row.id);editingId.value=row.id;fill(d);editorOpen.value=true}catch(e){ElMessage.error(masterDataErrorMessage(e,'报价详情加载失败'))}}
async function save(){if(!form.name||!form.warehouseId||!form.providerName||!form.effectiveStart||!form.effectiveEnd||!form.warehouseFees.length){ElMessage.warning('请完整填写报价必填信息');return} if(form.effectiveEnd<form.effectiveStart){ElMessage.warning('失效日期不能早于生效日期');return} saving.value=true;try{const common={name:form.name,providerName:form.providerName,currency:form.currency as 'USD'|'CNY',effectiveStart:form.effectiveStart,effectiveEnd:form.effectiveEnd,warehouseFees:form.warehouseFees,transitPrices:form.transitPrices,remark:form.remark||null};if(editingId.value)await updateQuote(editingId.value,{...common,recordVersion:form.recordVersion});else await createQuote({...common,warehouseId:form.warehouseId,versionCode:form.versionCode});ElMessage.success(editingId.value?'报价已更新':'报价已创建');editorOpen.value=false;await load()}catch(e){ElMessage.error(masterDataErrorMessage(e,'报价保存失败'))}finally{saving.value=false}}
async function toggle(row:OverseasWarehouseQuote){const next:MasterDataStatus=row.status==='ACTIVE'?'INACTIVE':'ACTIVE';try{await ElMessageBox.confirm(`确认${next==='ACTIVE'?'启用':'停用'}“${row.name}”吗？`,'报价状态',{type:'warning'});await changeQuoteStatus(row.id,next,row.recordVersion);ElMessage.success('报价状态已更新');await load()}catch(e){if(e!=='cancel'&&e!=='close')ElMessage.error(masterDataErrorMessage(e,'报价状态更新失败'))}}
async function toggle(row:OverseasWarehouseQuote){const next:MasterDataStatus=row.status==='ACTIVE'?'INACTIVE':'ACTIVE';try{await ElMessageBox.confirm(`确认${next==='ACTIVE'?'启用':'停用'}“${row.name}”吗？`,'报价状态',{customClass:'admin-density-confirm',type:'warning'});await changeQuoteStatus(row.id,next,row.recordVersion);ElMessage.success('报价状态已更新');await load()}catch(e){if(e!=='cancel'&&e!=='close')ElMessage.error(masterDataErrorMessage(e,'报价状态更新失败'))}}
async function exportCsv(){exporting.value=true;try{const {page:_,size:__,...q}=params();saveCsv(await exportQuotes(q),'overseas-quotes.csv')}catch(e){ElMessage.error(masterDataErrorMessage(e,'报价导出失败'))}finally{exporting.value=false}}
watch([page,pageSize],load);onMounted(()=>{void Promise.all([load(),loadOptions()])})
</script>
<template><AdminPage><ListPageLayout aria-label="海外仓报价列表">
<template><AdminPage class="admin-density"><ListPageLayout aria-label="海外仓报价列表">
<template #toolbar><QueryToolbar v-model="filters" class="surface-panel" :fields="fields" ariaLabel="海外仓报价筛选" preference-key="overseas-quotes-query" :loading="loading" @search="search" /></template>
<template #state><LoadErrorState v-if="error" title="海外仓报价加载失败" :message="error.message" @retry="load" /></template>
<section class="surface-panel table-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :total="total" :loading="loading" preference-key="overseas-quotes-table" row-key="id" empty-text="暂无海外仓报价">
<template #toolbar-actions><el-button v-if="access.can(permission.quoteCreate)" type="primary" @click="openCreate"><Plus :size="16"/>新增报价</el-button><el-button v-if="access.can(permission.quoteExport)" :loading="exporting" @click="exportCsv"><Download :size="16"/>导出CSV</el-button></template>
<template #actions="{row}"><el-button link type="primary" @click="openDetail(row as OverseasWarehouseQuote)"><Eye :size="15"/>详情</el-button><el-button v-if="access.can(permission.quoteEdit)" link type="primary" @click="openEdit(row as OverseasWarehouseQuote)"><Pencil :size="15"/>编辑</el-button><el-button v-if="access.can(permission.quoteStatus)" link :type="(row as OverseasWarehouseQuote).status==='ACTIVE'?'danger':'success'" @click="toggle(row as OverseasWarehouseQuote)"><Power :size="15"/>{{(row as OverseasWarehouseQuote).status==='ACTIVE'?'停用':'启用'}}</el-button></template>
<template #actions="{row}"><div class="density-actions"><el-button data-tone="neutral" class="density-action" @click="openDetail(row as OverseasWarehouseQuote)">详情</el-button><el-button data-tone="neutral" class="density-action" v-if="access.can(permission.quoteEdit)" @click="openEdit(row as OverseasWarehouseQuote)">编辑</el-button><el-button class="density-action" v-if="access.can(permission.quoteStatus)" :data-tone="(row as OverseasWarehouseQuote).status==='ACTIVE'?'danger':'success'" @click="toggle(row as OverseasWarehouseQuote)">{{(row as OverseasWarehouseQuote).status==='ACTIVE'?'停用':'启用'}}</el-button></div></template>
<template #status="{row}"><el-tag :type="(row as OverseasWarehouseQuote).status==='ACTIVE'?'success':'info'">{{(row as OverseasWarehouseQuote).status==='ACTIVE'?'启用':'停用'}}</el-tag></template>
</DataTable></section>
<AppDialog v-model="detailOpen" title="海外仓报价详情" width="min(980px, calc(100vw - 28px))" :show-confirm="false"><div v-if="detail" class="detail-grid"><div v-for="item in [['报价名称',detail.summary.name],['海外仓',detail.summary.warehouseName],['服务商',detail.summary.providerName],['币种',detail.summary.currency],['生效日期',detail.summary.effectiveStart],['失效日期',detail.summary.effectiveEnd],['版本',detail.summary.versionCode],['状态',detail.summary.status]]" :key="item[0]"><span>{{item[0]}}</span><strong>{{item[1]}}</strong></div></div><h3>仓储作业费用</h3><el-table :data="detail?.warehouseFees||[]" border><el-table-column prop="item" label="费用项目"/><el-table-column prop="billingUnit" label="计费单位"/><el-table-column prop="unitPrice" label="单价"/><el-table-column prop="minimumCharge" label="最低收费"/><el-table-column prop="remark" label="备注"/></el-table><h3>中转派送价格</h3><el-table :data="detail?.transitPrices||[]" border><el-table-column prop="fbaWarehouseCode" label="目的FBA仓"/><el-table-column prop="deliveryMethod" label="车型/提货方式"/><el-table-column prop="estimatedMiles" label="预估迈数"/><el-table-column prop="price" label="报价"/><el-table-column prop="minimumCharge" label="最低收费"/></el-table></AppDialog>
<AppDialog v-model="editorOpen" :title="editingId?'编辑海外仓报价':'新增海外仓报价'" width="min(1180px, calc(100vw - 28px))" :confirm-loading="saving" confirm-text="保存报价" @confirm="save"><el-form label-position="top"><div class="form-grid"><el-form-item label="报价名称"><el-input v-model="form.name" placeholder="请输入报价名称" /></el-form-item><el-form-item label="海外仓"><el-select v-model="form.warehouseId" :disabled="!!editingId"><el-option v-for="o in options" :key="o.warehouseId" :label="`${o.warehouseName} · ${o.warehouseCode}`" :value="o.warehouseId"/></el-select></el-form-item><el-form-item label="服务商"><el-input v-model="form.providerName" placeholder="请输入服务商名称" /></el-form-item><el-form-item label="币种"><el-select v-model="form.currency"><el-option label="USD" value="USD"/><el-option label="CNY" value="CNY"/></el-select></el-form-item><el-form-item label="生效日期"><el-date-picker v-model="form.effectiveStart" type="date" value-format="YYYY-MM-DD"/></el-form-item><el-form-item label="失效日期"><el-date-picker v-model="form.effectiveEnd" type="date" value-format="YYYY-MM-DD"/></el-form-item><el-form-item label="报价版本"><el-input v-model="form.versionCode" :disabled="!!editingId" placeholder="请输入版本号" /></el-form-item><el-form-item label="备注"><el-input v-model="form.remark" placeholder="请输入备注（选填）" /></el-form-item></div><h3>仓储作业费用 <el-button @click="form.warehouseFees.push({item:'',billingUnit:'',unitPrice:0,minimumCharge:null,remark:null})">+ 添加费用</el-button></h3><div v-for="(f,i) in form.warehouseFees" :key="i" class="line-grid"><el-input v-model="f.item" placeholder="请输入费用项目"/><el-input v-model="f.billingUnit" placeholder="请输入计费单位"/><el-input-number v-model="f.unitPrice" :min="0" placeholder="请输入单价" /><el-input-number v-model="f.minimumCharge" :min="0" placeholder="请输入最低收费" /><el-button type="danger" plain @click="form.warehouseFees.splice(i,1)">删除</el-button></div><h3>中转派送价格 <el-button @click="form.transitPrices.push({fbaWarehouseCode:'',deliveryMethod:'',estimatedMiles:null,price:0,minimumCharge:null,remark:null})">+ 添加派送价格</el-button></h3><div v-for="(t,i) in form.transitPrices" :key="i" class="line-grid"><el-input v-model="t.fbaWarehouseCode" placeholder="请输入目的 FBA 仓"/><el-input v-model="t.deliveryMethod" placeholder="请输入车型或提货方式"/><el-input-number v-model="t.price" :min="0" placeholder="请输入报价" /><el-input-number v-model="t.minimumCharge" :min="0" placeholder="请输入最低收费" /><el-button type="danger" plain @click="form.transitPrices.splice(i,1)">删除</el-button></div></el-form></AppDialog>
<AppDialog class="admin-density-dialog" v-model="detailOpen" title="海外仓报价详情" width="min(980px, calc(100vw - 28px))" :show-confirm="false"><dl v-if="detail" class="detail-grid density-fields"><div v-for="item in [['报价名称',detail.summary.name],['海外仓',detail.summary.warehouseName],['服务商',detail.summary.providerName],['币种',detail.summary.currency],['生效日期',detail.summary.effectiveStart],['失效日期',detail.summary.effectiveEnd],['版本',detail.summary.versionCode],['状态',detail.summary.status]]" :key="item[0]"><dt>{{item[0]}}</dt><dd>{{item[1]}}</dd></div></dl><h3>仓储作业费用</h3><el-table :data="detail?.warehouseFees||[]" border><el-table-column prop="item" label="费用项目"/><el-table-column prop="billingUnit" label="计费单位"/><el-table-column prop="unitPrice" label="单价"/><el-table-column prop="minimumCharge" label="最低收费"/><el-table-column prop="remark" label="备注"/></el-table><h3>中转派送价格</h3><el-table :data="detail?.transitPrices||[]" border><el-table-column prop="fbaWarehouseCode" label="目的FBA仓"/><el-table-column prop="deliveryMethod" label="车型/提货方式"/><el-table-column prop="estimatedMiles" label="预估迈数"/><el-table-column prop="price" label="报价"/><el-table-column prop="minimumCharge" label="最低收费"/></el-table></AppDialog>
<AppDialog class="admin-density-dialog" v-model="editorOpen" :title="editingId?'编辑海外仓报价':'新增海外仓报价'" width="min(1180px, calc(100vw - 28px))" :confirm-loading="saving" confirm-text="保存报价" @confirm="save"><el-form class="density-form" label-position="top"><div class="form-grid"><el-form-item label="报价名称"><el-input v-model="form.name" placeholder="请输入报价名称" /></el-form-item><el-form-item label="海外仓"><el-select v-model="form.warehouseId" :disabled="!!editingId"><el-option v-for="o in options" :key="o.warehouseId" :label="`${o.warehouseName} · ${o.warehouseCode}`" :value="o.warehouseId"/></el-select></el-form-item><el-form-item label="服务商"><el-input v-model="form.providerName" placeholder="请输入服务商名称" /></el-form-item><el-form-item label="币种"><el-select v-model="form.currency"><el-option label="USD" value="USD"/><el-option label="CNY" value="CNY"/></el-select></el-form-item><el-form-item label="生效日期"><el-date-picker v-model="form.effectiveStart" type="date" value-format="YYYY-MM-DD"/></el-form-item><el-form-item label="失效日期"><el-date-picker v-model="form.effectiveEnd" type="date" value-format="YYYY-MM-DD"/></el-form-item><el-form-item label="报价版本"><el-input v-model="form.versionCode" :disabled="!!editingId" placeholder="请输入版本号" /></el-form-item><el-form-item label="备注"><el-input v-model="form.remark" placeholder="请输入备注（选填）" /></el-form-item></div><h3>仓储作业费用 <el-button @click="form.warehouseFees.push({item:'',billingUnit:'',unitPrice:0,minimumCharge:null,remark:null})">+ 添加费用</el-button></h3><div v-for="(f,i) in form.warehouseFees" :key="i" class="line-grid"><el-input v-model="f.item" placeholder="请输入费用项目"/><el-input v-model="f.billingUnit" placeholder="请输入计费单位"/><el-input-number v-model="f.unitPrice" :min="0" placeholder="请输入单价" /><el-input-number v-model="f.minimumCharge" :min="0" placeholder="请输入最低收费" /><el-button data-tone="danger" class="density-action" @click="form.warehouseFees.splice(i,1)">删除</el-button></div><h3>中转派送价格 <el-button @click="form.transitPrices.push({fbaWarehouseCode:'',deliveryMethod:'',estimatedMiles:null,price:0,minimumCharge:null,remark:null})">+ 添加派送价格</el-button></h3><div v-for="(t,i) in form.transitPrices" :key="i" class="line-grid"><el-input v-model="t.fbaWarehouseCode" placeholder="请输入目的 FBA 仓"/><el-input v-model="t.deliveryMethod" placeholder="请输入车型或提货方式"/><el-input-number v-model="t.price" :min="0" placeholder="请输入报价" /><el-input-number v-model="t.minimumCharge" :min="0" placeholder="请输入最低收费" /><el-button data-tone="danger" class="density-action" @click="form.transitPrices.splice(i,1)">删除</el-button></div></el-form></AppDialog>
</ListPageLayout></AdminPage></template>
<style scoped>.table-panel{min-width:0;overflow:hidden}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px}.line-grid{display:grid;grid-template-columns:2fr 1.2fr 1fr 1fr auto;gap:8px;margin:8px 0}.detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--cc-border);border:1px solid var(--cc-border)}.detail-grid>div{padding:12px;background:#fff}.detail-grid span{display:block;color:var(--cc-muted);font-size:12px}.detail-grid strong{display:block;margin-top:4px}h3{margin:18px 0 10px;font-size:14px}</style>
<style scoped>.detail-grid.density-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }.table-panel{min-width:0;overflow:hidden}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--admin-space-5) var(--admin-space-6)}.line-grid{display:grid;grid-template-columns:2fr 1.2fr 1fr 1fr auto;gap:var(--admin-space-3);margin:var(--admin-space-3) 0}h3{margin:var(--admin-space-6) 0 var(--admin-space-4);font-size:var(--admin-font-body)}</style>
src/modules/overseas-master-data/pages/VehicleDetailView.vue
+5 -2
View File
@@ -1,5 +1,8 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { onMounted, ref } from 'vue'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import { vehicleStatusLabels } from '../presentation'
import { ArrowLeft } from '@lucide/vue'
import { useRoute, useRouter } from 'vue-router'
import AdminPage from '@/shared/components/AdminPage.vue'; import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'; import FormSection from '@/shared/components/FormSection.vue'; import LoadErrorState from '@/shared/components/LoadErrorState.vue'
@@ -8,5 +11,5 @@ const route=useRoute(),router=useRouter(),detail=ref<VehicleDetail|null>(null),l
async function load(){loading.value=true;error.value=null;try{detail.value=await getVehicle(String(route.params.vehicleId||''))}catch(e){detail.value=null;error.value=getApiErrorDetails(e,'车辆详情加载失败')}finally{loading.value=false}}
function back(){void router.push({name:'overseas-master-data-vehicles'})} onMounted(load)
</script>
<template><AdminPage width="comfortable"><DetailPageLayout aria-label="车辆详情"><template #header><div class="heading"><div><h1>车辆详情</h1><p>{{detail?.plateNumber||String(route.params.vehicleId||'—')}} <el-tag v-if="detail">{{detail.status}}</el-tag></p></div><el-button @click="back"><ArrowLeft :size="16"/>返回列表</el-button></div></template><LoadErrorState v-if="error" title="车辆详情加载失败" :message="error.message" @retry="load"/><section v-loading="loading" class="surface-panel detail-surface"><FormSection title="车辆信息"><dl v-if="detail" class="detail-grid"><div v-for="item in [['车牌号',detail.plateNumber],['车型',detail.model],['油耗(L/100km)',detail.fuelConsumptionPer100Km],['当前公里码(km)',detail.mileageKm],['司机 / 外派单位',detail.driverOrDispatchCompany||'—'],['联系电话',detail.phone||'—'],['区域',detail.region==='OVERSEAS'?'海外':'国内'],['车辆归属',detail.ownership==='OWNED'?'自有车辆':'外派车辆'],['状态',detail.status],['更新时间',detail.updatedAt],['备注',detail.remark||'—']]" :key="item[0]"><dt>{{item[0]}}</dt><dd>{{item[1]}}</dd></div></dl></FormSection><FormSection title="派送订单明细"><p class="contract-note">当前车辆主数据接口明确不包含派送履约记录。</p></FormSection><FormSection title="派送更换记录" :bordered="false"><p class="contract-note">当前车辆主数据接口明确不包含车辆更换历史。</p></FormSection></section></DetailPageLayout></AdminPage></template>
<style scoped>.heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.heading h1{margin:0;font-size:20px}.heading p{margin:4px 0 0;color:var(--cc-muted)}.detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0;background:var(--cc-border);border:1px solid var(--cc-border)}.detail-grid>div{padding:12px;background:#fff}.detail-grid dt{color:var(--cc-muted);font-size:12px}.detail-grid dd{margin:5px 0 0;overflow-wrap:anywhere}.contract-note{margin:0;padding:16px;color:var(--cc-muted);text-align:center}</style>
<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="back"><ArrowLeft :size="16" />返回列表</el-button><h1 class="density-detail-title">{{ detail?.plateNumber || '—' }}</h1><StatusBadge v-if="detail" :status="vehicleStatusLabels[detail.status]" /></div></div></template><LoadErrorState v-if="error" title="车辆详情加载失败" :message="error.message" @retry="load"/><section v-loading="loading" class="detail-surface"><FormSection class="density-form-section" title="车辆信息"><dl v-if="detail" class="detail-grid density-fields"><div v-for="item in [['车牌号',detail.plateNumber],['车型',detail.model],['油耗(L/100km)',detail.fuelConsumptionPer100Km],['当前公里码(km)',detail.mileageKm],['司机 / 外派单位',detail.driverOrDispatchCompany||'—'],['联系电话',detail.phone||'—'],['区域',detail.region==='OVERSEAS'?'海外':'国内'],['车辆归属',detail.ownership==='OWNED'?'自有车辆':'外派车辆'],['状态',vehicleStatusLabels[detail.status]],['更新时间',detail.updatedAt],['备注',detail.remark||'—']]" :key="item[0]" :class="{ 'wide-field': ['司机 / 外派单位', '备注'].includes(String(item[0])) }"><dt>{{item[0]}}</dt><dd>{{item[1]}}</dd></div></dl></FormSection><FormSection class="density-form-section" title="派送订单明细"><p class="contract-note">当前车辆主数据接口明确不包含派送履约记录。</p></FormSection><FormSection class="density-form-section" title="派送更换记录" :bordered="false"><p class="contract-note">当前车辆主数据接口明确不包含车辆更换历史。</p></FormSection></section></DetailPageLayout></AdminPage></template>
<style scoped>.detail-grid .wide-field { grid-column: span 2; }.contract-note{margin:0;padding:var(--admin-space-6);color:var(--cc-muted);text-align:center}</style>
src/modules/overseas-master-data/pages/VehiclesView.vue
+7 -5
View File
@@ -1,6 +1,8 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { vehicleStatusLabels } from '../presentation'
import { onMounted, reactive, ref, watch } from 'vue'
import { Download, Eye, Pencil, Plus, Power } from '@lucide/vue'
import { Download, Plus } from '@lucide/vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import AdminPage from '@/shared/components/AdminPage.vue'; import AppDialog from '@/shared/components/AppDialog.vue'; import DataTable,{type DataTableColumn} from '@/shared/components/DataTable.vue'; import ListPageLayout from '@/shared/components/ListPageLayout.vue'; import QueryToolbar,{type QueryField,type QueryModel} from '@/shared/components/QueryToolbar.vue'; import LoadErrorState from '@/shared/components/LoadErrorState.vue'
@@ -9,7 +11,7 @@ import { changeVehicleStatus,createVehicle,exportVehicles,getVehicle,listVehicle
import { masterDataErrorMessage } from '../apiError'
const router=useRouter(),access=useAccessPreviewStore(),rows=ref<VehicleDetail[]>([]),total=ref(0),page=ref(1),pageSize=ref(20),loading=ref(false),saving=ref(false),exporting=ref(false),error=ref<ApiErrorDetails|null>(null),editorOpen=ref(false),editingId=ref(''),statusOpen=ref(false),statusRow=ref<VehicleDetail|null>(null),statusTarget=ref<VehicleStatus>('IN_SERVICE')
const ownership=ref<VehicleOwnership>('OWNED'),tabs:[string,VehicleOwnership][]=[['自有车辆','OWNED'],['外派车辆','DISPATCHED']]
const filters=ref<QueryModel>({keyword:'',region:'',status:''});const fields:QueryField[]=[{key:'keyword',type:'input',label:'车辆关键词',placeholder:'车牌 / 司机 / 车型',width:220},{key:'region',type:'select',label:'区域',placeholder:'全部区域',width:140,options:[{label:'国内',value:'DOMESTIC'},{label:'海外',value:'OVERSEAS'}]},{key:'status',type:'select',label:'状态',placeholder:'全部状态',width:140,options:[['在役','IN_SERVICE'],['外派中','DISPATCHED'],['维修中','MAINTENANCE'],['停用','INACTIVE'],['已归还','RETURNED']].map(([label,value])=>({label,value}))}]
const filters=ref<QueryModel>({keyword:'',region:'',status:''});const fields:QueryField[]=[{key:'keyword',type:'input',label:'车辆关键词',placeholder:'车牌 / 司机 / 车型',width:220},{key:'region',type:'select',label:'区域',placeholder:'全部区域',width:140,options:[{label:'国内',value:'DOMESTIC'},{label:'海外',value:'OVERSEAS'}]},{key:'status',type:'select',label:'状态',placeholder:'全部状态',width:140,options:Object.entries(vehicleStatusLabels).map(([value,label])=>({label,value}))}]
const columns:DataTableColumn[]=[{key:'actions',label:'操作',width:250,fixed:'left',slotName:'actions'},{key:'plateNumber',prop:'plateNumber',label:'车牌',minWidth:130},{key:'model',prop:'model',label:'车型',minWidth:180},{key:'fuelConsumptionPer100Km',prop:'fuelConsumptionPer100Km',label:'油耗(L/100km)',minWidth:130,align:'right'},{key:'mileageKm',prop:'mileageKm',label:'当前公里码(km)',minWidth:140,align:'right'},{key:'driverOrDispatchCompany',prop:'driverOrDispatchCompany',label:'司机 / 外派单位',minWidth:160},{key:'phone',prop:'phone',label:'联系电话',minWidth:145},{key:'status',label:'状态',width:100,slotName:'status'},{key:'region',label:'区域',width:100,slotName:'region'}]
const form=reactive({plateNumber:'',model:'',fuelConsumptionPer100Km:0,mileageKm:0,driverOrDispatchCompany:'',phone:'',region:'OVERSEAS' as VehicleRegion,ownership:'OWNED' as VehicleOwnership,status:'IN_SERVICE' as VehicleStatus,remark:'',recordVersion:0})
function params(){return{page:page.value,size:pageSize.value,keyword:String(filters.value.keyword||'')||undefined,ownership:ownership.value,region:(filters.value.region||undefined) as VehicleRegion|undefined,status:(filters.value.status||undefined) as VehicleStatus|undefined}}
@@ -22,6 +24,6 @@ function openStatus(row:VehicleDetail){statusRow.value=row;statusTarget.value=ro
async function exportCsv(){exporting.value=true;try{const{page:_,size:__,...q}=params();saveCsv(await exportVehicles(q),'vehicles.csv')}catch(e){ElMessage.error(masterDataErrorMessage(e,'车辆导出失败'))}finally{exporting.value=false}}
watch([page,pageSize],load);onMounted(load)
</script>
<template><AdminPage><ListPageLayout aria-label="车辆列表"><template #toolbar><div class="query-panel"><div class="status-tabs" role="tablist" aria-label="车辆归属"><button v-for="tab in tabs" :key="tab[1]" role="tab" :aria-selected="ownership===tab[1]" :class="['status-tab',{'is-active':ownership===tab[1]}]" @click="selectOwnership(tab[1])">{{tab[0]}}</button></div><QueryToolbar v-model="filters" :fields="fields" ariaLabel="车辆筛选" preference-key="overseas-vehicles-query" :loading="loading" @search="search"/></div></template><template #state><LoadErrorState v-if="error" title="车辆加载失败" :message="error.message" @retry="load"/></template><section class="surface-panel vehicle-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :total="total" :loading="loading" preference-key="overseas-vehicles-table" row-key="id" empty-text="暂无车辆"><template #toolbar-actions><el-button v-if="access.can(permission.vehicleCreate)" type="primary" @click="openCreate"><Plus :size="16"/>添加车辆</el-button><el-button v-if="access.can(permission.vehicleExport)" :loading="exporting" @click="exportCsv"><Download :size="16"/>导出CSV</el-button></template><template #actions="{row}"><el-button link type="primary" @click="router.push({name:'overseas-master-data-vehicle-detail',params:{vehicleId:(row as VehicleDetail).id}})"><Eye :size="15"/>查看</el-button><el-button v-if="access.can(permission.vehicleEdit)" link type="primary" @click="openEdit(row as VehicleDetail)"><Pencil :size="15"/>编辑</el-button><el-button v-if="access.can(permission.vehicleStatus)" link type="primary" @click="openStatus(row as VehicleDetail)"><Power :size="15"/>状态</el-button></template><template #status="{row}"><el-tag>{{(row as VehicleDetail).status}}</el-tag></template><template #region="{row}">{{(row as VehicleDetail).region==='OVERSEAS'?'海外':'国内'}}</template></DataTable></section>
<AppDialog v-model="editorOpen" :title="editingId?'编辑车辆':'添加车辆'" width="min(760px, calc(100vw - 28px))" :confirm-loading="saving" @confirm="save"><el-form label-position="top"><div class="form-grid"><el-form-item label="车辆归属"><el-select v-model="form.ownership"><el-option label="自有车辆" value="OWNED"/><el-option label="外派车辆" value="DISPATCHED"/></el-select></el-form-item><el-form-item label="车牌号"><el-input v-model="form.plateNumber" placeholder="请输入车牌号" /></el-form-item><el-form-item label="车型"><el-input v-model="form.model" placeholder="请输入车辆型号" /></el-form-item><el-form-item label="油耗(L/100km)"><el-input-number v-model="form.fuelConsumptionPer100Km" :min="0.01" :precision="2" placeholder="请输入百公里油耗" /></el-form-item><el-form-item label="当前公里码(km)"><el-input-number v-model="form.mileageKm" :min="0" placeholder="请输入当前里程" /></el-form-item><el-form-item label="联系电话"><el-input v-model="form.phone" placeholder="请输入联系电话" /></el-form-item><el-form-item label="司机 / 外派单位"><el-input v-model="form.driverOrDispatchCompany" placeholder="请输入司机或外派单位" /></el-form-item><el-form-item label="区域"><el-select v-model="form.region"><el-option label="国内" value="DOMESTIC"/><el-option label="海外" value="OVERSEAS"/></el-select></el-form-item><el-form-item v-if="!editingId" label="状态"><el-select v-model="form.status"><el-option v-for="s in ['IN_SERVICE','DISPATCHED','MAINTENANCE','INACTIVE','RETURNED']" :key="s" :label="s" :value="s"/></el-select></el-form-item><el-form-item label="备注"><el-input v-model="form.remark" placeholder="请输入备注（选填）" /></el-form-item></div></el-form></AppDialog><AppDialog v-model="statusOpen" title="变更车辆状态" width="min(480px, calc(100vw - 28px))" :confirm-loading="saving" @confirm="submitStatus"><el-select v-model="statusTarget" style="width:100%"><el-option v-for="s in ['IN_SERVICE','DISPATCHED','MAINTENANCE','INACTIVE','RETURNED']" :key="s" :label="s" :value="s"/></el-select></AppDialog></ListPageLayout></AdminPage></template>
<style scoped>.vehicle-panel{min-width:0;overflow:hidden}.query-panel{overflow:hidden;border:1px solid var(--cc-border);border-radius:8px;background:#fff}.status-tabs{display:flex;border-bottom:1px solid var(--cc-border);background:#f9fafb}.status-tab{min-height:44px;padding:0 18px;border:0;background:transparent;color:var(--cc-muted)}.status-tab.is-active{border-bottom:3px solid var(--cc-primary);color:var(--cc-primary);font-weight:600}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}</style>
<template><AdminPage class="admin-density"><ListPageLayout aria-label="车辆列表"><template #toolbar><div class="query-panel"><div class="status-tabs density-tabs" role="tablist" aria-label="车辆归属"><button v-for="tab in tabs" :key="tab[1]" role="tab" :aria-selected="ownership===tab[1]" :class="['status-tab',{active:ownership===tab[1]}]" @click="selectOwnership(tab[1])"><span class="density-tab-icon" aria-hidden="true">{{ tab[1] === 'OWNED' ? '🚚' : '🚛' }}</span>{{tab[0]}}</button></div><QueryToolbar v-model="filters" :fields="fields" ariaLabel="车辆筛选" preference-key="overseas-vehicles-query" :loading="loading" @search="search"/></div></template><template #state><LoadErrorState v-if="error" title="车辆加载失败" :message="error.message" @retry="load"/></template><section class="surface-panel vehicle-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :total="total" :loading="loading" preference-key="overseas-vehicles-table" row-key="id" empty-text="暂无车辆"><template #toolbar-actions><el-button v-if="access.can(permission.vehicleCreate)" type="primary" @click="openCreate"><Plus :size="16"/>添加车辆</el-button><el-button v-if="access.can(permission.vehicleExport)" :loading="exporting" @click="exportCsv"><Download :size="16"/>导出CSV</el-button></template><template #actions="{row}"><div class="density-actions"><el-button data-tone="neutral" class="density-action" @click="router.push({name:'overseas-master-data-vehicle-detail',params:{vehicleId:(row as VehicleDetail).id}})">查看</el-button><el-button data-tone="neutral" class="density-action" v-if="access.can(permission.vehicleEdit)" @click="openEdit(row as VehicleDetail)">编辑</el-button><el-button data-tone="neutral" class="density-action" v-if="access.can(permission.vehicleStatus)" @click="openStatus(row as VehicleDetail)">状态</el-button></div></template><template #status="{row}"><el-tag>{{vehicleStatusLabels[(row as VehicleDetail).status]}}</el-tag></template><template #region="{row}">{{(row as VehicleDetail).region==='OVERSEAS'?'海外':'国内'}}</template></DataTable></section>
<AppDialog class="admin-density-dialog" v-model="editorOpen" :title="editingId?'编辑车辆':'添加车辆'" width="min(760px, calc(100vw - 28px))" :confirm-loading="saving" @confirm="save"><el-form class="density-form" label-position="top"><div class="form-grid"><el-form-item label="车辆归属"><el-select v-model="form.ownership"><el-option label="自有车辆" value="OWNED"/><el-option label="外派车辆" value="DISPATCHED"/></el-select></el-form-item><el-form-item label="车牌号"><el-input v-model="form.plateNumber" placeholder="请输入车牌号" /></el-form-item><el-form-item label="车型"><el-input v-model="form.model" placeholder="请输入车辆型号" /></el-form-item><el-form-item label="油耗(L/100km)"><el-input-number v-model="form.fuelConsumptionPer100Km" :min="0.01" :precision="2" placeholder="请输入百公里油耗" /></el-form-item><el-form-item label="当前公里码(km)"><el-input-number v-model="form.mileageKm" :min="0" placeholder="请输入当前里程" /></el-form-item><el-form-item label="联系电话"><el-input v-model="form.phone" placeholder="请输入联系电话" /></el-form-item><el-form-item label="司机 / 外派单位"><el-input v-model="form.driverOrDispatchCompany" placeholder="请输入司机或外派单位" /></el-form-item><el-form-item label="区域"><el-select v-model="form.region"><el-option label="国内" value="DOMESTIC"/><el-option label="海外" value="OVERSEAS"/></el-select></el-form-item><el-form-item v-if="!editingId" label="状态"><el-select v-model="form.status"><el-option v-for="s in ['IN_SERVICE','DISPATCHED','MAINTENANCE','INACTIVE','RETURNED']" :key="s" :label="vehicleStatusLabels[s as keyof typeof vehicleStatusLabels]" :value="s"/></el-select></el-form-item><el-form-item label="备注"><el-input v-model="form.remark" placeholder="请输入备注（选填）" /></el-form-item></div></el-form></AppDialog><AppDialog class="admin-density-dialog" v-model="statusOpen" title="变更车辆状态" width="min(480px, calc(100vw - 28px))" :confirm-loading="saving" @confirm="submitStatus"><el-select v-model="statusTarget" style="width:100%"><el-option v-for="s in ['IN_SERVICE','DISPATCHED','MAINTENANCE','INACTIVE','RETURNED']" :key="s" :label="vehicleStatusLabels[s as keyof typeof vehicleStatusLabels]" :value="s"/></el-select></AppDialog></ListPageLayout></AdminPage></template>
<style scoped>.vehicle-panel{min-width:0;overflow:hidden}.query-panel{overflow:hidden;border:1px solid var(--cc-border);border-radius:var(--admin-radius);background:#fff}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--admin-space-5) var(--admin-space-6)}</style>
src/modules/overseas-master-data/presentation.ts
+9
View File
@@ -0,0 +1,9 @@
import type { VehicleStatus } from './types'
export const vehicleStatusLabels: Record<VehicleStatus, string> = {
IN_SERVICE: '在役',
DISPATCHED: '外派中',
MAINTENANCE: '维修中',
INACTIVE: '停用',
RETURNED: '已归还',
}
src/modules/overseas-warehouse/pages/CustomerVisitsView.test.ts
+4
View File
@@ -65,6 +65,10 @@ describe('CustomerVisitsView permissions and visit material', () => {
await wrapper.findAll('button').find(button => button.text() === '回访')!.trigger('click')
await flushPromises()
const input = wrapper.find('[data-dialog="客户回访"] input[type="file"]')
const inputClick = vi.spyOn(input.element as HTMLInputElement, 'click').mockImplementation(() => {})
await wrapper.findAll('button').find(button => button.text() === '选择文件')!.trigger('click')
expect(inputClick).toHaveBeenCalledOnce()
inputClick.mockRestore()
const file = new File(['data'], 'visit.pdf', { type: 'application/pdf' })
Object.defineProperty(input.element, 'files', { configurable: true, value: [file] })
await input.trigger('change')
src/modules/overseas-warehouse/pages/CustomerVisitsView.vue
+26 -32
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { onMounted, reactive, ref } from 'vue'
import { FileUp, MessageSquareText, Pencil, Trash2 } from '@lucide/vue'
import { FileUp } from '@lucide/vue'
import { ElMessage } from 'element-plus'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import AdminPage from '@/shared/components/AdminPage.vue'
@@ -84,6 +85,7 @@ const dialogOpen = ref(false)
const detailLoading = ref(false)
const saving = ref(false)
const uploading = ref(false)
const fileInput = ref<HTMLInputElement | null>(null)
const detail = ref<CustomerVisitDetail | null>(null)
const form = reactive({ selectedInboundOrderId: '', visitResult: '', customerFeedback: '', remark: '', attachments: [] as CustomerVisitAttachment[] })
@@ -155,20 +157,16 @@ onMounted(load)
</script>
<template>
<AdminPage>
<AdminPage class="admin-density">
<ListPageLayout aria-label="客户回访列表">
<template #toolbar>
<section class="visit-summary surface-panel" aria-label="回访统计">
<div><strong>{{ summary.visitable }}</strong><span>可回访订单</span></div>
<div><strong>{{ summary.pending }}</strong><span>待回访</span></div>
<div><strong>{{ summary.completed }}</strong><span>已完成回访</span></div>
</section>
<dl class="visit-summary density-detail-overview" aria-label="回访统计"><div><dt>可回访订单</dt><dd>{{ summary.visitable }}</dd></div><div><dt>待回访</dt><dd>{{ summary.pending }}</dd></div><div><dt>已完成回访</dt><dd>{{ summary.completed }}</dd></div></dl>
<QueryToolbar v-model="filters" class="surface-panel" :fields="fields" :loading="loading" ariaLabel="客户回访筛选" preference-key="overseas-customer-visits-query" :search-on-reset="false" @search="search" @reset="reset" />
</template>
<template v-if="error" #state><LoadErrorState title="客户回访列表加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState></template>
<section v-if="!error" class="surface-panel table-panel">
<DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="overseas-customer-visits" row-key="id" empty-text="暂无可回访派送单" @update:page="load()" @update:page-size="page = 1; load()">
<template #actions="{ row }"><el-button v-if="access.can(permission.customerVisitEdit)" size="small" type="primary" plain @click="openVisit(row as CustomerVisitRow)"><component :is="row.status === 'COMPLETED' ? Pencil : MessageSquareText" :size="15" />{{ row.status === 'COMPLETED' ? '再次回访' : '回访' }}</el-button></template>
<template #actions="{ row }"><el-button v-if="access.can(permission.customerVisitEdit)" class="density-action" data-tone="neutral" size="small" @click="openVisit(row as CustomerVisitRow)">{{ row.status === 'COMPLETED' ? '再次回访' : '回访' }}</el-button></template>
<template #status="{ row }"><StatusBadge :status="row.status === 'COMPLETED' ? '已回访' : '待回访'" /></template>
<template #pagination-left>共 {{ total }} 条回访记录</template>
</DataTable>
@@ -176,15 +174,15 @@ onMounted(load)
</ListPageLayout>
</AdminPage>
<AppDialog v-model="dialogOpen" title="客户回访" width="min(920px, calc(100vw - 28px))" confirm-text="保存回访" :loading="detailLoading" :confirm-loading="saving" :confirm-disabled="uploading" @confirm="submit">
<AppDialog class="admin-density-dialog" v-model="dialogOpen" title="客户回访" width="min(920px, calc(100vw - 28px))" confirm-text="保存回访" :loading="detailLoading" :confirm-loading="saving" :confirm-disabled="uploading" @confirm="submit">
<template v-if="detail">
<section class="visit-order-summary">
<div><span>派送单号</span><strong>{{ detail.visit.deliveryNo }}</strong></div>
<div><span>客户</span><strong>{{ detail.visit.customerName || '—' }}</strong></div>
<div><span>完成时间</span><strong>{{ formatOverseasDateTime(detail.visit.deliveryCompletedAt) }}</strong></div>
<div><span>目的地</span><strong>{{ detail.visit.destination || '—' }}</strong></div>
</section>
<el-form label-position="top" class="visit-form">
<dl class="visit-order-summary density-fields">
<div><dt>派送单号</dt><dd>{{ detail.visit.deliveryNo }}</dd></div>
<div><dt>客户</dt><dd>{{ detail.visit.customerName || '—' }}</dd></div>
<div><dt>完成时间</dt><dd>{{ formatOverseasDateTime(detail.visit.deliveryCompletedAt) }}</dd></div>
<div><dt>目的地</dt><dd>{{ detail.visit.destination || '—' }}</dd></div>
</dl>
<el-form label-position="top" class="visit-form density-form">
<el-form-item label="选择本次回访的入仓单" required>
<div class="inbound-options">
<label v-for="option in detail.inboundOrders" :key="option.inboundOrderId" class="inbound-option" :class="{ selected: form.selectedInboundOrderId === option.inboundOrderId }">
@@ -197,10 +195,10 @@ onMounted(load)
<el-form-item label="客户反馈"><el-input v-model="form.customerFeedback" type="textarea" :rows="4" maxlength="2000" show-word-limit placeholder="记录客户对派送服务的反馈" /></el-form-item>
<el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="补充后续跟进事项" /></el-form-item>
<el-form-item label="回访资料">
<label class="file-picker" :class="{ disabled: uploading }"><FileUp :size="16" />{{ uploading ? '上传中...' : '选择文件' }}<input type="file" multiple :disabled="uploading" accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.jpg,.jpeg,.png,.webp" @change="selectFiles" /></label>
<el-button :disabled="uploading" :loading="uploading" @click="fileInput?.click()"><FileUp :size="16" />{{ uploading ? '上传中...' : '选择文件' }}</el-button><input ref="fileInput" hidden type="file" multiple :disabled="uploading" accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.jpg,.jpeg,.png,.webp" @change="selectFiles" />
<span class="file-tip">支持 PDF、Office、JPG、PNG、WEBP，单个不超过20MB</span>
<div v-if="form.attachments.length" class="attachment-list">
<div v-for="file in form.attachments" :key="file.fileId"><span>{{ file.fileName }}</span><small>{{ fileSize(file.sizeBytes) }}</small><el-button text type="danger" aria-label="移除资料" @click="removeAttachment(file.fileId)"><Trash2 :size="15" /></el-button></div>
<div v-for="file in form.attachments" :key="file.fileId"><span>{{ file.fileName }}</span><small>{{ fileSize(file.sizeBytes) }}</small><el-button class="density-action" data-tone="danger" size="small" aria-label="移除资料" @click="removeAttachment(file.fileId)">移除</el-button></div>
</div>
<div v-else class="attachment-empty">暂未上传回访资料</div>
</el-form-item>
@@ -210,19 +208,15 @@ onMounted(load)
</template>
<style scoped>
.visit-summary { display: flex; gap: 12px; padding: 12px; }
.visit-summary > div { display: flex; align-items: baseline; gap: 8px; min-width: 140px; padding: 8px 14px; border: 1px solid var(--cc-border-color); border-radius: 8px; }
.visit-summary strong { font-size: 22px; color: var(--cc-text-primary); } .visit-summary span { color: var(--cc-text-secondary); }
.visit-order-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; padding: 18px; margin-bottom: 18px; border: 1px solid var(--cc-border-color); border-radius: 8px; background: var(--cc-bg-muted); }
.visit-order-summary div { display: grid; gap: 5px; } .visit-order-summary span { color: var(--cc-text-secondary); } .visit-order-summary strong { color: var(--cc-text-primary); }
.inbound-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.inbound-option { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--cc-border-color); border-radius: 8px; cursor: pointer; color: var(--cc-text-secondary); }
.visit-order-reference { display: flex; min-width: 0; align-items: baseline; gap: 3px; }
.visit-summary { flex-wrap: wrap; }
.visit-order-summary.density-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--admin-space-5); }
.inbound-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--admin-space-3); width: 100%; }
.inbound-option { display: grid; min-width: 0; gap: var(--admin-space-2); padding: var(--admin-space-3); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); cursor: pointer; color: var(--cc-muted); overflow-wrap: anywhere; }
.visit-order-reference { display: flex; min-width: 0; align-items: baseline; gap: var(--admin-space-1); }
.inbound-option.selected { border-color: var(--el-color-primary); background: var(--el-color-primary-light-9); }
.file-picker { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; color: var(--el-color-primary); border: 1px solid var(--el-color-primary); border-radius: 6px; cursor: pointer; }
.file-picker input { display: none; } .file-picker.disabled { opacity: .6; cursor: not-allowed; } .file-tip { margin-left: 12px; color: var(--cc-text-secondary); }
.attachment-list, .attachment-empty { width: 100%; margin-top: 12px; }
.attachment-list > div { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--cc-border-color); }
.attachment-list small, .attachment-empty { color: var(--cc-text-secondary); }
@media (max-width: 720px) { .visit-summary { flex-wrap: wrap; } .visit-order-summary, .inbound-options { grid-template-columns: 1fr; } .file-tip { display: block; margin: 8px 0 0; } }
.file-tip { margin-left: var(--admin-space-3); color: var(--cc-muted); font-size: var(--admin-font-caption); }
.attachment-list, .attachment-empty { width: 100%; margin-top: var(--admin-space-3); }
.attachment-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--admin-space-3); padding: var(--admin-space-2) 0; border-bottom: 1px solid var(--cc-border); overflow-wrap: anywhere; }
.attachment-list small, .attachment-empty { color: var(--cc-muted); font-size: var(--admin-font-caption); }
@media (max-width: 720px) { .visit-summary { flex-wrap: wrap; } .visit-order-summary.density-fields, .inbound-options { grid-template-columns: 1fr; } .file-tip { display: block; margin: 8px 0 0; } }
</style>
src/modules/overseas-warehouse/pages/ExceptionOrdersView.vue
+10 -8
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { onMounted, reactive, ref } from 'vue'
import { Eye, Plus } from '@lucide/vue'
import { Plus } from '@lucide/vue'
import { ElMessage } from 'element-plus'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import AdminPage from '@/shared/components/AdminPage.vue'
@@ -76,20 +77,20 @@ onMounted(load)
</script>
<template>
<AdminPage><ListPageLayout aria-label="异常订单列表">
<AdminPage class="admin-density"><ListPageLayout aria-label="异常订单列表">
<template #toolbar><QueryToolbar v-model="filters" class="surface-panel" :fields="fields" :loading="loading" ariaLabel="异常订单筛选" preference-key="overseas-exception-orders-query" :search-on-reset="false" @search="search" @reset="reset" /></template>
<template v-if="error" #state><LoadErrorState title="异常订单列表加载失败" :message="error.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="error" /></template></LoadErrorState></template>
<section v-if="!error" class="surface-panel table-panel"><DataTable v-model:page="page" v-model:page-size="pageSize" :data="rows" :columns="columns" :loading="loading" :total="total" preference-key="overseas-exception-orders" row-key="id" empty-text="暂无异常订单" @update:page="load()" @update:page-size="page = 1; load()">
<template #toolbar-actions><el-button v-if="access.can(permission.exceptionOrderCreate)" type="primary" @click="openCreate"><Plus :size="16" />新增异常订单</el-button></template>
<template #actions="{ row }"><el-button size="small" type="primary" plain @click="openDetail(row as ExceptionOrderRow)"><Eye :size="15" />查看</el-button></template>
<template #actions="{ row }"><el-button class="density-action" data-tone="neutral" size="small" @click="openDetail(row as ExceptionOrderRow)">查看</el-button></template>
<template #related="{ row }"><div class="related-orders"><span v-if="row.lastMileOrderNo" class="related-order-reference">尾程 <OrderReferenceText :value="String(row.lastMileOrderNo)" /></span><span v-if="row.deliveryNo">派送 {{ row.deliveryNo }}</span><span v-if="row.inboundCode">入仓 {{ row.inboundCode }}</span><span v-if="row.outboundNo">出库 {{ row.outboundNo }}</span></div></template>
<template #handlerName="{ row }">{{ displayHandler(row.handlerName) }}</template>
<template #status="{ row }"><StatusBadge :status="statusLabels[String(row.status)] || String(row.status)" /></template><template #pagination-left>共 {{ total }} 条异常订单</template>
</DataTable></section>
</ListPageLayout></AdminPage>
<AppDialog v-model="createOpen" title="新增异常订单" width="min(760px, calc(100vw - 28px))" confirm-text="保存" :confirm-loading="saving" :loading="resolving" @confirm="submit">
<AppDialog class="admin-density-dialog" v-model="createOpen" title="新增异常订单" width="min(760px, calc(100vw - 28px))" confirm-text="保存" :confirm-loading="saving" :loading="resolving" @confirm="submit">
<el-alert title="入仓码和尾程订单号至少填写一个；两项都填写时必须属于同一订单。" type="warning" :closable="false" />
<el-form label-position="top" class="create-form"><div class="form-grid">
<el-form label-position="top" class="create-form density-form"><div class="form-grid">
<el-form-item label="入仓码"><el-input v-model="form.inboundCode" placeholder="请输入入仓码" @blur="resolveRelation" /></el-form-item>
<el-form-item label="尾程订单号"><el-input v-model="form.lastMileOrderNo" placeholder="请输入尾程订单号" @blur="resolveRelation" /></el-form-item>
<el-form-item label="异常类型" required><el-select v-model="form.exceptionType" placeholder="请选择异常类型"><el-option v-for="(label, value) in typeLabels" :key="value" :label="label" :value="value" /></el-select></el-form-item>
@@ -101,8 +102,8 @@ onMounted(load)
<el-alert v-else-if="relationError" :title="relationError" type="error" :closable="false" />
</el-form>
</AppDialog>
<AppDialog v-model="detailOpen" title="异常订单详情" width="min(760px, calc(100vw - 28px))" :show-confirm="false" cancel-text="关闭">
<el-descriptions v-if="detailRow" :column="2" border>
<AppDialog class="admin-density-dialog" v-model="detailOpen" title="异常订单详情" width="min(760px, calc(100vw - 28px))" :show-confirm="false" cancel-text="关闭">
<el-descriptions class="density-descriptions" v-if="detailRow" :column="2" border>
<el-descriptions-item label="异常订单号">{{ detailRow.exceptionNo }}</el-descriptions-item>
<el-descriptions-item label="处理状态">{{ statusLabels[String(detailRow.status)] || detailRow.status }}</el-descriptions-item>
<el-descriptions-item label="异常类型">{{ typeLabels[detailRow.exceptionType] || detailRow.exceptionType }}</el-descriptions-item>
@@ -118,6 +119,7 @@ onMounted(load)
</template>
<style scoped>
.related-orders { display: grid; gap: 2px; font-size: 12px; }.related-order-reference,.relation-alert-title { display: flex; min-width: 0; align-items: baseline; gap: 3px; }.create-form { margin-top: 18px; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.related-orders { display: grid; gap: var(--admin-space-1); font-size: var(--admin-font-caption); }.related-order-reference,.relation-alert-title { display: flex; min-width: 0; align-items: baseline; gap: 3px; }.create-form { margin-top: var(--admin-space-5); }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-5); }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid :deep(.el-input-number), .form-grid :deep(.el-select) { width: 100%; }
</style>
src/modules/suppliers/components/SupplierLicenseDialog.vue
+7 -6
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import AppDialog from '@/shared/components/AppDialog.vue'
import type { Supplier } from '@/modules/suppliers/types'
@@ -7,7 +8,7 @@ const open = defineModel<boolean>({ default: false })
</script>
<template>
<AppDialog v-model="open" :title="`营业执照查看${supplier ? ` - ${supplier.name}` : ''}`" width="min(560px, calc(100vw - 24px))" :show-confirm="false" cancel-text="关闭">
<AppDialog class="admin-density-dialog" v-model="open" :title="`营业执照查看${supplier ? ` - ${supplier.name}` : ''}`" width="min(560px, calc(100vw - 24px))" :show-confirm="false" cancel-text="关闭">
<div v-if="supplier" class="license-dialog">
<p class="license-dialog__supplier">供应商：<strong>{{ supplier.name }}</strong></p>
<section class="license-card" aria-label="营业执照信息">
@@ -25,13 +26,13 @@ const open = defineModel<boolean>({ default: false })
</template>
<style scoped>
.license-dialog__supplier { margin: 0 0 14px; color: var(--cc-muted); font-size: 13px; }
.license-card { max-width: 460px; margin: 0 auto; padding: 24px 28px; border: 2px solid #c0392b; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px rgba(192,57,43,.12); }
.license-dialog__supplier { margin: 0 0 var(--admin-space-5); color: var(--cc-muted); font-size: var(--admin-font-body); }
.license-card { max-width: 460px; margin: 0 auto; padding: var(--admin-space-7) var(--admin-space-7); border: 2px solid #c0392b; border-radius: var(--admin-radius); background: #fff; box-shadow: 0 4px 16px rgba(192,57,43,.12); }
.license-card h2 { margin: 0; color: #c0392b; font-size: 22px; letter-spacing: 6px; text-align: center; }
.license-card__copy { margin: 2px 0 18px; color: #c0392b; font-size: 12px; text-align: center; }
.license-card__copy { margin: 2px 0 var(--admin-space-6); color: #c0392b; font-size: var(--admin-font-caption); text-align: center; }
.license-card dl { margin: 0; }
.license-card dl div { display: grid; grid-template-columns: 126px minmax(0, 1fr); margin-bottom: 10px; font-size: 14px; }
.license-card dl div { display: grid; grid-template-columns: 126px minmax(0, 1fr); margin-bottom: var(--admin-space-4); font-size: var(--admin-font-body); }
.license-card dt { color: #444; font-weight: 700; }.license-card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.license-dialog__notice { margin-top: 16px; }
.license-dialog__notice { margin-top: var(--admin-space-6); }
@media (max-width: 480px) { .license-card { padding: 20px 16px; } .license-card dl div { grid-template-columns: 1fr; gap: 3px; } .license-card h2 { font-size: 19px; } }
</style>
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>
src/modules/suppliers/pages/SupplierFormView.vue
+12 -12
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, onActivated, onDeactivated, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
@@ -89,15 +90,15 @@ watch(() => form.category, (category) => { if (category !== 'BOOKING') form.carr
</script>
<template>
<AdminPage width="comfortable">
<AdminPage class="admin-density" >
<OperationErrorToast :details="submitError" />
<DetailPageLayout :aria-label="editing ? '编辑供应商' : '新增供应商'">
<template #header><div class="form-page-header"><h2>{{ editing ? '编辑供应商' : '新增供应商' }}</h2><el-button @click="router.push({ name: 'supplier-list' })"><ArrowLeft :size="16" />返回</el-button></div></template>
<DetailPageLayout class="density-detail-layout surface-panel" :aria-label="editing ? '编辑供应商' : '新增供应商'">
<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">{{ editing ? '编辑供应商' : '新增供应商' }}</h1></div></div></template>
<LoadErrorState v-if="!access.can(requiredPermission)" title="暂无操作权限" :message="`请联系管理员开通${editing ? '供应商编辑' : '供应商新增'}权限。`" :show-retry="false" />
<LoadErrorState v-else-if="loadError" title="供应商加载失败" :message="loadError.message" :loading="loading" @retry="load"><template #details><ApiErrorMeta :details="loadError" /></template></LoadErrorState>
<section v-else v-loading="loading" class="surface-panel supplier-form-panel">
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" :disabled="saving">
<FormSection title="基础信息">
<section v-else v-loading="loading" class="supplier-form-panel">
<el-form class="density-form" ref="formRef" :model="form" :rules="rules" label-position="top" :disabled="saving">
<FormSection class="density-form-section" title="基础信息">
<div class="form-grid">
<el-form-item label="供应商名称" prop="name"><el-input v-model="form.name" maxlength="160" placeholder="请输入供应商名称" /></el-form-item>
<el-form-item label="供应商类别" prop="category"><el-select v-model="form.category"><el-option v-for="(label, value) in categoryLabels" :key="value" :label="label" :value="value" /></el-select></el-form-item>
@@ -112,13 +113,13 @@ watch(() => form.category, (category) => { if (category !== 'BOOKING') form.carr
<el-form-item class="span-2" label="公司地址" prop="address"><el-input v-model="form.address" maxlength="255" placeholder="请输入公司地址" /></el-form-item>
</div>
</FormSection>
<FormSection title="营业执照">
<FormSection class="density-form-section" title="营业执照">
<div class="form-grid">
<el-form-item label="营业执照号" prop="businessLicenseNo"><el-input v-model="form.businessLicenseNo" maxlength="64" placeholder="统一社会信用代码" /></el-form-item>
<el-form-item label="资质文件"><div class="file-placeholder"><FileText :size="24" /><span>{{ form.licenseFileId ? '已保留现有营业执照文件' : '暂无营业执照文件' }}</span><small>平台公共供应商资质上传接口尚未提供，当前不能新增或替换文件。</small></div></el-form-item>
</div>
</FormSection>
<FormSection title="其他信息"><el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请输入备注" /></el-form-item></FormSection>
<FormSection class="density-form-section" title="其他信息"><el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请输入备注" /></el-form-item></FormSection>
</el-form>
<footer class="form-actions"><el-button type="primary" :loading="saving" @click="save"><Save :size="16" />保存</el-button><el-button :disabled="saving" @click="router.push({ name: 'supplier-list' })">取消</el-button></footer>
</section>
@@ -127,10 +128,9 @@ watch(() => form.category, (category) => { if (category !== 'BOOKING') form.carr
</template>
<style scoped>
.form-page-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; }.form-page-header h2 { margin: 0; font-size: 16px; }
.supplier-form-panel { padding: 22px; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }.span-2 { grid-column: 1 / -1; }
.form-grid :deep(.el-select) { width: 100%; }.file-placeholder { display: flex; width: 100%; min-height: 96px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; padding: 16px; border: 1px dashed #d9d9d9; border-radius: 6px; background: #fafafa; color: var(--cc-muted); text-align: center; }.file-placeholder small { max-width: 420px; line-height: 1.5; }
.form-actions { display: flex; justify-content: center; gap: 14px; padding: 18px 0 0; border-top: 1px solid var(--cc-border); }.form-actions :deep(.el-button) { min-width: 112px; margin-left: 0; }
.supplier-form-panel { min-width: 0; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-7); }.span-2 { grid-column: 1 / -1; }
.form-grid :deep(.el-select) { width: 100%; }.file-placeholder { display: flex; width: 100%; min-height: 96px; align-items: center; justify-content: center; flex-direction: column; gap: var(--admin-space-2); padding: var(--admin-space-6); border: 1px dashed #d9d9d9; border-radius: var(--admin-radius); background: #fafafa; color: var(--cc-muted); text-align: center; }.file-placeholder small { max-width: 420px; line-height: 1.5; }
.form-actions { display: flex; justify-content: center; gap: var(--admin-space-5); padding: var(--admin-space-6) 0 0; border-top: 1px solid var(--cc-border); }.form-actions :deep(.el-button) { min-width: 112px; margin-left: 0; }
@media (min-width: 1600px) { .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1280px) and (max-width: 1599px) { .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .supplier-form-panel { padding: 16px; } .form-grid { grid-template-columns: 1fr; }.span-2 { grid-column: auto; }.form-page-header { align-items: stretch; flex-direction: column; }.form-actions { flex-direction: column; }.form-actions :deep(.el-button) { width: 100%; min-height: 44px; } }
src/modules/suppliers/pages/SupplierRouteReuse.behavior.test.ts
+14
View File
@@ -64,6 +64,20 @@ describe('supplier route reuse', () => {
mocks.can.mockClear()
})
it('retains all supplier facts with long values and the original back target', async () => {
const name = '供应商完整长名称'.repeat(6)
const address = '浙江省宁波市完整详细地址'.repeat(8)
mocks.getSupplier.mockResolvedValue({ ...supplier('A', name), address, remark: '备注'.repeat(50) })
const wrapper = mount(SupplierDetailView, { global: { plugins: [ElementPlus], stubs } })
await flushPromises()
expect(wrapper.get('.density-detail-title').text()).toBe(name)
expect(wrapper.get('.density-fields').findAll('dt')).toHaveLength(12)
expect(wrapper.get('.density-fields').text()).toContain(address)
expect(wrapper.findAll('.wide-field')).toHaveLength(3)
await wrapper.get('.density-back').trigger('click')
expect(mocks.push).toHaveBeenCalledWith({ name: 'supplier-list' })
})
it('reloads form A to B, ignores late A, and submits B', async () => {
const requestA = deferred<Supplier>(); const requestB = deferred<Supplier>()
mocks.getSupplier.mockImplementation((id: string) => id === 'A' ? requestA.promise : requestB.promise)
src/modules/suppliers/pages/SuppliersView.test.ts
+6 -2
View File
@@ -21,7 +21,8 @@ describe('supplier formal pages', () => {
expect(source).toContain("access.can('platform:supplier:edit')")
expect(source).toContain("access.can('platform:supplier:status')")
expect(source).toContain("access.can('platform:supplier:list')")
expect(source).toContain('<el-button size="small" plain type="primary" @click="router.push')
expect(source).toContain('class="density-action"')
expect(source).toContain('class="row-actions density-actions"')
expect(source).toContain("statusLabels[supplierRow(row).status] ?? '—'")
})
@@ -29,7 +30,10 @@ describe('supplier formal pages', () => {
expect(source).toContain('class="supplier-list-top"')
expect(source).toContain('class="supplier-query-panel"')
expect(source).toContain('class="supplier-query-toolbar"')
expect(source).toContain('grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px')
expect(source).toContain('class="supplier-tabs density-tabs"')
expect(source).toContain('（{{ item.value }}）')
expect(source).not.toContain('class="supplier-metrics"')
expect(source).toContain('@click="switchCategory(item.category)"')
expect(source).not.toContain('订舱范围')
expect(source).not.toContain('国内/国外')
expect(formSource).not.toContain('form.scope')
src/modules/suppliers/pages/SuppliersView.vue
+12 -17
View File
@@ -1,8 +1,9 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, onActivated, 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 { Plus } 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'
@@ -97,7 +98,7 @@ 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: '取消' })
await ElMessageBox.confirm(`确认${verb}供应商“${row.name}”吗？`, `${verb}供应商`, { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: `确认${verb}`, cancelButtonText: '取消' })
actionId.value = row.id
await changeSupplierStatus(row.id, next)
ElMessage.success(`供应商已${verb}`)
@@ -119,18 +120,13 @@ onActivated(() => {
</script>
<template>
<AdminPage>
<AdminPage class="admin-density">
<ListPageLayout aria-label="供应商列表">
<template #toolbar>
<div class="supplier-list-top">
<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>
<div class="supplier-query-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 class="supplier-tabs density-tabs" role="tablist" aria-label="供应商分类统计">
<button role="tab" :aria-selected="activeCategory === item.category" v-for="item in metricItems" :key="item.category" type="button" :class="{ active: activeCategory === item.category }" @click="switchCategory(item.category)"><span class="density-tab-icon" aria-hidden="true">{{ ({ BOOKING: '🚢', CUSTOMS: '📋', TRUCKING: '🚚', CERTIFICATE: '📄' })[item.category] }}</span>{{ categoryLabels[item.category] }}（{{ item.value }}）</button>
</nav>
<QueryToolbar v-model="filters" class="supplier-query-toolbar" ariaLabel="供应商筛选" :fields="queryFields" @search="search" />
</div>
@@ -148,16 +144,16 @@ onActivated(() => {
<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 size="small" plain 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')" size="small" plain 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')" size="small" plain :type="row.status === 'ACTIVE' ? 'danger' : 'success'" :loading="actionId === row.id" @click="toggleStatus(supplierRow(row))"><Power :size="15" />{{ row.status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
<div class="row-actions density-actions">
<el-button data-tone="neutral" class="density-action" size="small" @click="router.push({ name: 'supplier-detail', params: { id: row.id } })">详情</el-button>
<el-button data-tone="neutral" class="density-action" v-if="access.can('platform:supplier:edit')" size="small" @click="router.push({ name: 'supplier-edit', params: { id: row.id } })">编辑</el-button>
<el-button class="density-action" v-if="access.can('platform:supplier:status')" size="small" :data-tone="row.status === 'ACTIVE' ? 'danger' : 'success'" :loading="actionId === row.id" @click="toggleStatus(supplierRow(row))">{{ row.status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
</div>
</template>
<template #name="{ row }"><LineClampText :content="row.name" /></template>
<template #category="{ row }">{{ categoryLabels[row.category as SupplierCategory] }}</template>
<template #carrierCodes="{ row }"><LineClampText :content="supplierRow(row).category === 'BOOKING' ? formatCarrierCodes(supplierRow(row).carrierCodes) : null" /></template>
<template #license="{ row }"><el-button size="small" plain type="primary" @click="showLicense(supplierRow(row))"><FileText :size="15" />查看</el-button></template>
<template #license="{ row }"><el-button data-tone="neutral" class="density-action" size="small" @click="showLicense(supplierRow(row))">查看</el-button></template>
<template #status="{ row }"><StatusBadge :status="statusLabels[supplierRow(row).status] ?? '—'" /></template>
<template #settlement="{ row }">{{ settlementLabels[supplierRow(row).settlementPeriod] }}</template>
</DataTable>
@@ -168,8 +164,7 @@ onActivated(() => {
</template>
<style scoped>
.supplier-list-top { display: grid; gap: 16px; }.supplier-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.supplier-metrics button { min-width: 0; padding: 12px 14px; border: 1px solid #e7edf5; border-radius: 8px; background: #f8fafc; color: var(--cc-text); text-align: left; cursor: pointer; }.supplier-metrics button.active { border-color: var(--cc-primary); background: #f7f8ff; box-shadow: inset 0 3px 0 var(--cc-primary); }.supplier-metrics span { display: block; margin-bottom: 6px; color: #64748b; font-size: 12px; }.supplier-metrics strong { color: #1e293b; font-size: 20px; }.supplier-metrics small { margin-left: 3px; color: #64748b; font-size: 12px; }.supplier-query-panel { overflow: hidden; border: 1px solid var(--cc-border); border-radius: 8px; background: #fff; }.supplier-query-toolbar { border: 0; }.supplier-tabs { display: flex; gap: 6px; padding: 10px 14px; overflow-x: auto; border-bottom: 1px solid var(--cc-border); background: #fafbfc; }.supplier-tabs button { min-width: 76px; padding: 7px 20px; border: 0; border-radius: 6px; background: #f1f3f5; color: #555; cursor: pointer; }.supplier-tabs button.active { background: var(--cc-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-list-top { display: grid; gap: var(--admin-space-6); }.supplier-query-panel { overflow: hidden; border: 1px solid var(--cc-border); border-radius: var(--admin-radius); background: #fff; }.supplier-query-toolbar { border: 0; }
@media (max-width: 720px) { .supplier-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .supplier-metrics { grid-template-columns: 1fr; } }
</style>
src/modules/suppliers/routes.ts
+3 -3
View File
@@ -2,7 +2,7 @@ import type { RouteRecordRaw } from 'vue-router'
export const supplierRoutes = [
{ path: 'suppliers', name: 'supplier-list', component: () => import('@/modules/suppliers/pages/SuppliersView.vue'), meta: { title: '供应商列表', description: '维护平台公共订舱、报关、拖车和证书供应商', permission: 'platform:supplier:list' } },
{ path: 'suppliers/new', name: 'supplier-create', component: () => import('@/modules/suppliers/pages/SupplierFormView.vue'), meta: { title: '新增供应商', description: '新增平台公共供应商档案', permission: 'platform:supplier:create' } },
{ path: 'suppliers/:id', name: 'supplier-detail', component: () => import('@/modules/suppliers/pages/SupplierDetailView.vue'), meta: { title: '供应商详情', description: '查看平台公共供应商完整档案', permission: 'platform:supplier:list' } },
{ path: 'suppliers/:id/edit', name: 'supplier-edit', component: () => import('@/modules/suppliers/pages/SupplierFormView.vue'), meta: { title: '编辑供应商', description: '编辑平台公共供应商档案', permission: 'platform:supplier:edit' } },
{ path: 'suppliers/new', name: 'supplier-create', component: () => import('@/modules/suppliers/pages/SupplierFormView.vue'), meta: { title: '新增供应商', showPageHeading: false, description: '新增平台公共供应商档案', permission: 'platform:supplier:create' } },
{ path: 'suppliers/:id', name: 'supplier-detail', component: () => import('@/modules/suppliers/pages/SupplierDetailView.vue'), meta: { title: '供应商详情', showPageHeading: false, description: '查看平台公共供应商完整档案', permission: 'platform:supplier:list' } },
{ path: 'suppliers/:id/edit', name: 'supplier-edit', component: () => import('@/modules/suppliers/pages/SupplierFormView.vue'), meta: { title: '编辑供应商', showPageHeading: false, description: '编辑平台公共供应商档案', permission: 'platform:supplier:edit' } },
] satisfies RouteRecordRaw[]
src/modules/unified-orders/components/InboundFeeDetailManager.test.ts
+37 -4
View File
@@ -69,10 +69,43 @@ describe('InboundFeeDetailManager', () => {
expect(second).toContain('调整'); expect(second).toContain('作废'); expect(secondButtons).not.toContain('审核')
expect(wrapper.find('th').text()).toContain('操作')
expect(source).not.toMatch(/<el-button[^>]+link[^>]+(?:编辑|审核|驳回|调整|作废)/)
expect(source).toMatch(/size="small" plain type="primary"[^>]+[^>]*>\s*<Pencil/)
expect(source).toMatch(/size="small" plain type="success"[^>]+[^>]*>\s*<Check/)
expect(source).toMatch(/size="small" plain type="warning"[^>]+[^>]*>\s*<Undo2/)
expect(source).toMatch(/size="small" plain type="danger"[^>]+[^>]*>\s*<X/)
expect(wrapper.findAll('.el-table__row')[0]!.findAll('.density-actions button').map(button => button.attributes('data-tone'))).toEqual(['neutral', 'warning', 'warning', 'neutral'])
expect(wrapper.findAll('.el-table__row')[1]!.findAll('.density-actions button').map(button => button.attributes('data-tone'))).toEqual(['neutral', 'danger'])
})
it.each([
[[], [], false],
[['delete'], ['删除'], false],
[['edit', 'delete'], ['编辑', '删除'], false],
[['review', 'delete'], ['审核', '驳回', '删除'], false],
[['edit', 'review'], ['编辑', '审核', '驳回'], false],
[['edit', 'review', 'delete'], ['编辑', '审核', '驳回', ''], true],
])('folds pending fee actions only when more than three are available: %j', async (actions, labels, overflow) => {
vi.mocked(listInboundFeeDetails).mockResolvedValue([pending])
const wrapper = mountManager(['firstleg:inbound:fee-detail:view', ...actions.map(action => 'firstleg:inbound:fee-detail:' + action)])
await flushPromises()
const row = wrapper.get('.el-table__row .density-actions')
expect(row.findAll('button').map(button => button.text().trim())).toEqual(labels)
expect(row.find('.el-dropdown').exists()).toBe(overflow)
if (overflow) expect(row.get('.el-dropdown button').attributes('aria-label')).toContain('操作费')
})
it.each(['编辑', '驳回'])('styles the native %s fee dialog at its own root', async action => {
const wrapper = mountManager(['firstleg:inbound:fee-detail:view', 'firstleg:inbound:fee-detail:edit', 'firstleg:inbound:fee-detail:review', 'firstleg:fee-item:view'])
await flushPromises()
await wrapper.get('.el-table__row .density-actions').findAll('button').find(button => button.text().trim() === action)!.trigger('click')
await flushPromises()
const dialog = document.querySelector<HTMLElement>('.el-dialog.admin-density-dialog')!
expect(dialog).not.toBeNull()
expect(dialog.querySelector('.density-form')).not.toBeNull()
expect(dialog.style.getPropertyValue('--el-dialog-width')).toBe(action === '编辑' ? 'min(680px, calc(100vw - 28px))' : 'min(560px, calc(100vw - 28px))')
if (action === '驳回') {
const confirm = [...dialog.querySelectorAll<HTMLButtonElement>('button')].find(button => button.textContent?.trim() === '确认驳回')!
confirm.click()
await flushPromises()
expect(reviewInboundFeeDetail).not.toHaveBeenCalled()
expect(dialog.querySelector('textarea')?.value).toBe('')
} else expect(dialog.textContent).toContain('业务发生日')
})
it('keeps FBA_PRICING rows derived and read-only regardless of write permissions', async () => {
src/modules/unified-orders/components/InboundFeeDetailManager.vue
+32 -25
View File
@@ -1,7 +1,8 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { Check, FileUp, MoreHorizontal, Pencil, Plus, RefreshCw, Trash2, Undo2, X } from '@lucide/vue'
import { FileUp, MoreHorizontal, Plus, RefreshCw, X } from '@lucide/vue'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
import AppDialog from '@/shared/components/AppDialog.vue'
@@ -87,6 +88,9 @@ function canDelete(row: InboundFeeDetail) { return isManual(row) && access.can('
function canReview(row: InboundFeeDetail) { return isManual(row) && access.can('firstleg:inbound:fee-detail:review') && row.reviewStatus === 'PENDING' }
function canAdjust(row: InboundFeeDetail) { return isManual(row) && access.can('firstleg:inbound:fee-detail:edit') && row.reviewStatus === 'APPROVED' && row.publicationStatus !== 'VOIDED' }
function canVoid(row: InboundFeeDetail) { return isManual(row) && access.can('firstleg:inbound:fee-detail:review') && row.reviewStatus === 'APPROVED' && row.publicationStatus !== 'VOIDED' }
function rowActionCount(row: InboundFeeDetail) {
return Number(canEdit(row)) + 2 * Number(canReview(row)) + Number(canAdjust(row)) + Number(canVoid(row)) + Number(canDelete(row))
}
function reviewLabel(value: string) { return ({ PENDING: '待审核', APPROVED: '已审核', REJECTED: '已驳回' } as Record<string, string>)[value] || value }
function publicationLabel(value: string) {
return ({ DRAFT: '草稿', PUBLISHED: '已发布', SUPERSEDED: '已被替代', VOIDED: '已作废' } as Record<string, string>)[value] || value || '未知状态'
@@ -231,7 +235,7 @@ async function save() {
async function remove(row: InboundFeeDetail) {
try {
await ElMessageBox.confirm('删除后无法恢复，是否继续？', '删除费用明细', { type: 'warning', confirmButtonText: '删除' })
await ElMessageBox.confirm('删除后无法恢复，是否继续？', '删除费用明细', { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: '删除' })
await deleteInboundFeeDetail(props.accountId, normalizedInboundId.value, String(row.id)); await finishAction('费用明细已删除')
} catch (error) { if (error !== 'cancel' && error !== 'close') actionError.value = getApiErrorDetails(error, '费用明细删除失败') }
}
@@ -252,7 +256,7 @@ async function reject() {
async function voidRow(row: InboundFeeDetail) {
try {
await ElMessageBox.confirm('作废会同步撤销尚未结算的财务费用来源，是否继续？', '作废费用明细', { type: 'warning', confirmButtonText: '作废' })
await ElMessageBox.confirm('作废会同步撤销尚未结算的财务费用来源，是否继续？', '作废费用明细', { customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: '作废' })
await voidInboundFeeDetail(props.accountId, normalizedInboundId.value, String(row.id), row.sourceFeeVersion); await finishAction('费用明细已作废')
} catch (error) { if (error !== 'cancel' && error !== 'close') actionError.value = getApiErrorDetails(error, '费用作废失败') }
}
@@ -268,7 +272,7 @@ onMounted(() => void load())
</script>
<template>
<section class="fee-detail-manager" aria-label="运单费用维护">
<section class="fee-detail-manager admin-density" aria-label="运单费用维护">
<div class="fee-toolbar">
<span>共 {{ rows.length }} 条应收应付费用明细</span>
<div>
@@ -284,17 +288,20 @@ onMounted(() => void load())
<el-table :data="rows" border stripe empty-text="暂无费用数据" row-key="id">
<el-table-column label="操作" fixed="left" width="250">
<template #default="{ row }">
<el-button v-if="canEdit(row as InboundFeeDetail)" size="small" plain type="primary" @click="openEditor('edit', row as InboundFeeDetail)"><Pencil :size="15" />编辑</el-button>
<el-button v-if="canReview(row as InboundFeeDetail)" size="small" plain type="success" @click="approve(row as InboundFeeDetail)"><Check :size="15" />审核</el-button>
<el-button v-if="canReview(row as InboundFeeDetail)" size="small" plain type="warning" @click="openReject(row as InboundFeeDetail)"><Undo2 :size="15" />驳回</el-button>
<el-button v-if="canAdjust(row as InboundFeeDetail)" size="small" plain type="primary" @click="openEditor('adjust', row as InboundFeeDetail)"><Pencil :size="15" />调整</el-button>
<el-button v-if="canVoid(row as InboundFeeDetail)" size="small" plain type="danger" @click="voidRow(row as InboundFeeDetail)"><X :size="15" />作废</el-button>
<el-dropdown v-if="canDelete(row as InboundFeeDetail)">
<el-button link aria-label="更多费用操作"><MoreHorizontal :size="17" /></el-button>
<template #dropdown><el-dropdown-menu>
<el-dropdown-item @click="remove(row as InboundFeeDetail)"><Trash2 :size="15" />删除</el-dropdown-item>
</el-dropdown-menu></template>
</el-dropdown>
<div class="density-actions">
<el-button v-if="canEdit(row as InboundFeeDetail)" class="density-action" data-tone="neutral" @click="openEditor('edit', row as InboundFeeDetail)">编辑</el-button>
<el-button v-if="canReview(row as InboundFeeDetail)" class="density-action" data-tone="warning" @click="approve(row as InboundFeeDetail)">审核</el-button>
<el-button v-if="canReview(row as InboundFeeDetail)" class="density-action" data-tone="warning" @click="openReject(row as InboundFeeDetail)">驳回</el-button>
<el-button v-if="canAdjust(row as InboundFeeDetail)" class="density-action" data-tone="neutral" @click="openEditor('adjust', row as InboundFeeDetail)">调整</el-button>
<el-button v-if="canVoid(row as InboundFeeDetail)" class="density-action" data-tone="danger" @click="voidRow(row as InboundFeeDetail)">作废</el-button>
<el-button v-if="canDelete(row as InboundFeeDetail) && rowActionCount(row as InboundFeeDetail) <= 3" class="density-action" data-tone="danger" @click="remove(row as InboundFeeDetail)">删除</el-button>
<el-dropdown v-if="canDelete(row as InboundFeeDetail) && rowActionCount(row as InboundFeeDetail) > 3" trigger="click">
<el-button class="density-action" data-tone="neutral" :aria-label="(row.feeTypeNameSnapshot || '当前费用') + '的更多操作'" title="更多操作"><MoreHorizontal aria-hidden="true" :size="15" /></el-button>
<template #dropdown><el-dropdown-menu>
<el-dropdown-item @click="remove(row as InboundFeeDetail)">删除</el-dropdown-item>
</el-dropdown-menu></template>
</el-dropdown>
</div>
</template>
</el-table-column>
<el-table-column label="审核状态" width="120"><template #default="{ row }"><StatusBadge :status="reviewLabel(row.reviewStatus)" /></template></el-table-column>
@@ -316,7 +323,7 @@ onMounted(() => void load())
</div>
</template>
<AppDialog v-model="editorOpen" :title="editorMode === 'create' ? '新增费用' : editorMode === 'adjust' ? '调整已审核费用' : '编辑费用'" width="min(680px, calc(100vw - 28px))" :confirm-loading="saving" confirm-text="保存" @confirm="save">
<AppDialog class="admin-density-dialog" v-model="editorOpen" :title="editorMode === 'create' ? '新增费用' : editorMode === 'adjust' ? '调整已审核费用' : '编辑费用'" width="min(680px, calc(100vw - 28px))" :confirm-loading="saving" confirm-text="保存" @confirm="save">
<el-alert v-if="editorMode === 'adjust'" title="调整将生成新版本并重新进入待审核状态" type="warning" :closable="false" show-icon />
<el-alert v-if="selectedFeeItem?.feeCode === privateDeliveryFeeCode" title="私人仓尾程派送费仅适用于目的仓类型为“私人仓”的订单，最终资格由服务端校验。" type="info" :closable="false" show-icon />
<el-alert v-if="!canViewFeeItems" title="当前账号缺少费用项目查看权限，无法新增或修改费用" type="warning" :closable="false" show-icon />
@@ -324,7 +331,7 @@ onMounted(() => void load())
<el-alert v-if="feeItemsError" type="error" :closable="true" @close="feeItemsError = null"><template #title>{{ feeItemsError.message }}</template><ApiErrorMeta :details="feeItemsError" /></el-alert>
<el-alert v-if="suppliersError" type="error" :closable="true" @close="suppliersError = null"><template #title>{{ suppliersError.message }}</template><ApiErrorMeta :details="suppliersError" /></el-alert>
<el-alert v-if="actionError" type="error" :closable="true" @close="actionError = null"><template #title>{{ actionError.message }}</template><ApiErrorMeta :details="actionError" /></el-alert>
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="fee-form">
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="fee-form density-form">
<el-form-item label="应收/应付" prop="direction"><el-segmented v-model="form.direction" :options="directionOptions" /></el-form-item>
<el-form-item label="费用项目" prop="feeItemId"><el-select v-model="form.feeItemId" filterable :loading="feeItemsLoading" :disabled="!canViewFeeItems"><el-option v-for="item in applicableItems" :key="item.id" :label="item.feeTypeName" :value="item.id" /></el-select></el-form-item>
<el-form-item v-if="form.direction === 'PAYABLE'" label="供应商" required><el-select v-model="form.supplierId" filterable :loading="suppliersLoading" :disabled="!canViewSuppliers || !selectedFeeItem || !!suppliersError" placeholder="请先选择费用项目"><el-option v-for="supplier in suppliers" :key="supplier.id" :label="supplier.supplierName" :value="supplier.id" /></el-select></el-form-item>
@@ -346,26 +353,26 @@ onMounted(() => void load())
<el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请输入备注（选填）" /></el-form-item>
</el-form>
</AppDialog>
<AppDialog v-model="rejectOpen" title="驳回费用" :confirm-loading="saving" confirm-text="确认驳回" confirm-type="warning" @confirm="reject">
<AppDialog class="admin-density-dialog" v-model="rejectOpen" title="驳回费用" :confirm-loading="saving" confirm-text="确认驳回" confirm-type="warning" @confirm="reject">
<el-alert v-if="actionError" type="error" :closable="true" @close="actionError = null"><template #title>{{ actionError.message }}</template><ApiErrorMeta :details="actionError" /></el-alert>
<el-form label-position="top"><el-form-item label="驳回原因" required><el-input v-model="rejectReason" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入驳回原因" /></el-form-item></el-form>
<el-form class="density-form" label-position="top"><el-form-item label="驳回原因" required><el-input v-model="rejectReason" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请输入驳回原因" /></el-form-item></el-form>
</AppDialog>
</section>
</template>
<style scoped>
.fee-detail-manager { display: grid; min-width: 0; max-width: 100%; gap: 12px; }
.fee-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--el-text-color-secondary); font-size: 13px; }
.fee-toolbar > div { display: flex; flex-wrap: wrap; gap: 8px; }
.fee-detail-manager { display: grid; min-width: 0; max-width: 100%; gap: var(--admin-space-5); }
.fee-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-5); color: var(--el-text-color-secondary); font-size: var(--admin-font-body); }
.fee-toolbar > div { display: flex; flex-wrap: wrap; gap: var(--admin-space-3); }
.fee-toolbar :deep(.el-button + .el-button) { margin-left: 0; }
.fee-toolbar .is-spinning { animation: fee-refresh-spin 0.8s linear infinite; }
.fee-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 14px; }
.fee-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--admin-space-6); margin-top: var(--admin-space-5); }
.fee-form :deep(.el-select), .fee-form :deep(.el-date-editor), .fee-form :deep(.el-input-number) { width: 100%; }
.fee-form :deep(.el-form-item:last-child) { grid-column: 1 / -1; }
.voucher-field { grid-column: 1 / -1; }.voucher-control { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: 100%; }.voucher-picker { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--cc-border); border-radius: 6px; color: var(--el-color-primary); cursor: pointer; }.voucher-picker.is-disabled { cursor: not-allowed; opacity: .6; }.voucher-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }.voucher-hint { color: var(--cc-muted); font-size: 12px; }.voucher-list { display: grid; width: 100%; gap: 6px; margin-top: 8px; }.voucher-list > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; border-radius: 5px; background: var(--el-fill-color-light); }.voucher-list > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.voucher-list button { display: inline-flex; padding: 2px; border: 0; background: transparent; color: var(--el-color-danger); cursor: pointer; }
.voucher-field { grid-column: 1 / -1; }.voucher-control { display: flex; align-items: center; flex-wrap: wrap; gap: var(--admin-space-4); width: 100%; }.voucher-picker { display: inline-flex; align-items: center; gap: var(--admin-space-2); padding: var(--admin-space-2) var(--admin-space-5); border: 1px solid var(--cc-border); border-radius: var(--admin-radius); color: var(--el-color-primary); cursor: pointer; }.voucher-picker.is-disabled { cursor: not-allowed; opacity: .6; }.voucher-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }.voucher-hint { color: var(--cc-muted); font-size: var(--admin-font-caption); }.voucher-list { display: grid; width: 100%; gap: var(--admin-space-2); margin-top: var(--admin-space-3); }.voucher-list > span { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-3); padding: var(--admin-space-2) var(--admin-space-3); border-radius: var(--admin-radius); background: var(--el-fill-color-light); }.voucher-list > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.voucher-list button { display: inline-flex; padding: 2px; border: 0; background: transparent; color: var(--el-color-danger); cursor: pointer; }
.fee-table-shell { min-width: 0; max-width: 100%; overflow: hidden; }
.fee-table-shell :deep(.el-table) { width: 100%; max-width: 100%; }
.private-delivery-tag { margin-left: 6px; vertical-align: middle; }
.private-delivery-tag { margin-left: var(--admin-space-2); vertical-align: middle; }
@keyframes fee-refresh-spin { to { transform: rotate(360deg); } }
@media (max-width: 720px) { .fee-toolbar { align-items: flex-start; flex-direction: column; } .fee-form { grid-template-columns: 1fr; } .fee-form :deep(.el-form-item:last-child) { grid-column: auto; } }
</style>
src/modules/unified-orders/components/OrderDeclarationEditorDialog.test.ts
+33 -4
View File
@@ -1,6 +1,6 @@
import ElementPlus, { ElMessage, ElMessageBox } from 'element-plus'
import { flushPromises, mount } from '@vue/test-utils'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { updatePlatformUnifiedOrderDeclaration } from '@/modules/unified-orders/api/unifiedOrders'
import { listWarehouseLogisticsChannels } from '@/modules/ocean-bookings'
import OrderDeclarationEditorDialog from './OrderDeclarationEditorDialog.vue'
@@ -23,13 +23,14 @@ const detail = {
timeline: [],
} as never
function createWrapper() {
function createWrapper(realDialogs = false) {
return mount(OrderDeclarationEditorDialog, {
attachTo: realDialogs ? document.body : undefined,
props: { modelValue: true, detail },
global: {
plugins: [ElementPlus],
stubs: {
AppDialog: {
AppDialog: realDialogs ? false : {
props: ['modelValue', 'confirmLoading', 'confirmDisabled'], emits: ['confirm', 'update:modelValue'],
template: '<section v-if="modelValue"><slot /><button data-testid="save" :disabled="confirmDisabled" @click="$emit(\'confirm\')">保存</button></section>',
},
@@ -40,6 +41,9 @@ function createWrapper() {
})
}
enableAutoUnmount(afterEach)
afterEach(() => { document.body.innerHTML = '' })
describe('OrderDeclarationEditorDialog', () => {
beforeEach(() => {
vi.mocked(updatePlatformUnifiedOrderDeclaration).mockReset()
@@ -52,6 +56,31 @@ describe('OrderDeclarationEditorDialog', () => {
vi.spyOn(ElMessage, 'success').mockImplementation(() => ({ close: vi.fn() }) as never)
})
it('styles both native dialog roots and retains all cargo fields before applying a local edit', async () => {
createWrapper(true)
await flushPromises()
const parent = document.querySelector<HTMLElement>('.el-dialog.admin-density-dialog')!
expect(parent.style.getPropertyValue('--el-dialog-width')).toBe('min(1180px, calc(100vw - 36px))')
expect(parent.querySelector('.density-descriptions')).not.toBeNull()
parent.querySelector<HTMLButtonElement>('.cargo-table .density-action')!.click()
await flushPromises()
const dialogs = document.querySelectorAll<HTMLElement>('.el-dialog.admin-density-dialog')
expect(dialogs).toHaveLength(2)
const cargo = dialogs[1]!
expect(cargo.style.getPropertyValue('--el-dialog-width')).toBe('min(980px, calc(100vw - 36px))')
expect(cargo.querySelectorAll('.cargo-editor-grid > label')).toHaveLength(22)
const name = cargo.querySelector<HTMLInputElement>('input[placeholder="请输入中文品名"]')!
expect(name.value).toBe('台灯')
name.value = '编辑后的台灯'
name.dispatchEvent(new Event('input', { bubbles: true }))
await flushPromises()
const apply = [...cargo.querySelectorAll<HTMLButtonElement>('button')].find(button => button.textContent?.trim() === '应用本项')!
apply.click()
await flushPromises()
expect(parent.textContent).toContain('编辑后的台灯')
expect(updatePlatformUnifiedOrderDeclaration).not.toHaveBeenCalled()
})
it('loads formal warehouse channels and submits the code/name pair from one selected option', async () => {
vi.mocked(updatePlatformUnifiedOrderDeclaration).mockResolvedValue({ version: 8 } as never)
const wrapper = createWrapper()
src/modules/unified-orders/components/OrderDeclarationEditorDialog.vue
+11 -10
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import AppDialog from '@/shared/components/AppDialog.vue'
@@ -180,7 +181,7 @@ async function save() {
await ElMessageBox.confirm(
'渠道变更后，系统会重新校验分柜、同柜及计费约束。原箱码继续有效，无需更换已打印箱唛；纸面上的旧渠道文字不会自动变化，请以系统当前渠道为准。订单将标记为“曾变更渠道”。确认继续吗？',
'确认变更渠道',
{ type: 'warning', confirmButtonText: '确认变更', cancelButtonText: '返回检查' },
{ customClass: 'admin-density-confirm', type: 'warning', confirmButtonText: '确认变更', cancelButtonText: '返回检查' },
)
} catch { return }
}
@@ -219,7 +220,7 @@ async function save() {
</script>
<template>
<AppDialog
<AppDialog class="admin-density-dialog"
:model-value="modelValue"
title="编辑客户申报资料"
width="min(1180px, calc(100vw - 36px))"
@@ -239,14 +240,14 @@ async function save() {
<template #details><ApiErrorMeta :details="channelsError" /></template>
</LoadErrorState>
<el-descriptions :column="4" border class="readonly-facts">
<el-descriptions :column="4" border class="readonly-facts density-descriptions">
<el-descriptions-item label="入仓码">{{ detail.summary.inboundCode || '—' }}</el-descriptions-item>
<el-descriptions-item label="国内收货仓">{{ detail.summary.receivingWarehouseName || '—' }}</el-descriptions-item>
<el-descriptions-item label="目的仓/中转仓">{{ detail.summary.destinationWarehouseName || '—' }}</el-descriptions-item>
<el-descriptions-item label="版本">{{ form.expectedVersion }}</el-descriptions-item>
</el-descriptions>
<el-form label-position="top" class="order-fields">
<el-form label-position="top" class="order-fields density-form">
<el-row :gutter="14">
<el-col :span="7"><el-form-item label="渠道名称" required><el-select v-model="form.channelCode" aria-label="渠道名称" filterable clearable :loading="channelsLoading" placeholder="请选择正式渠道" @change="selectChannel"><el-option v-for="channel in channels" :key="channel.channelCode" :label="`${channel.channelName} · ${channel.channelCode}`" :value="channel.channelCode" /></el-select></el-form-item></el-col>
<el-col :span="4"><el-form-item label="渠道编码"><el-input :model-value="form.channelCode" readonly aria-label="渠道编码" /></el-form-item></el-col>
@@ -258,7 +259,7 @@ async function save() {
<h3>货品申报明细 <small>不允许新增、删除或调整明细序号</small></h3>
<el-table :data="form.cargoes" border stripe size="small" class="cargo-table">
<el-table-column label="操作" width="82" fixed="left"><template #default="{ $index }"><el-button link type="primary" @click="editCargo($index)">编辑</el-button></template></el-table-column>
<el-table-column label="操作" width="82" fixed="left"><template #default="{ $index }"><el-button class="density-action" data-tone="neutral" @click="editCargo($index)">编辑</el-button></template></el-table-column>
<el-table-column prop="itemNo" label="项" width="58" align="center" />
<el-table-column label="货品" min-width="190"><template #default="{ row }"><strong class="cell-primary" :title="row.cargoName">{{ row.cargoName }}</strong><small :title="row.cargoNameEn || row.skuNo">{{ row.cargoNameEn || row.skuNo || '—' }}</small></template></el-table-column>
<el-table-column label="箱数 / 数量" width="118" align="right"><template #default="{ row }">{{ row.packageCount }} 箱 / {{ row.totalQuantity }}</template></el-table-column>
@@ -271,7 +272,7 @@ async function save() {
</div>
</AppDialog>
<AppDialog v-model="cargoEditorOpen" title="编辑货品申报" width="min(980px, calc(100vw - 36px))" confirm-text="应用本项" :close-on-click-modal="false" @confirm="applyCargo">
<AppDialog class="admin-density-dialog" v-model="cargoEditorOpen" title="编辑货品申报" width="min(980px, calc(100vw - 36px))" confirm-text="应用本项" :close-on-click-modal="false" @confirm="applyCargo">
<div v-if="cargoDraft" class="cargo-editor-grid">
<label><span>中文品名 *</span><el-input v-model="cargoDraft.cargoName" maxlength="128" placeholder="请输入中文品名" /></label>
<label><span>英文品名</span><el-input v-model="cargoDraft.cargoNameEn" maxlength="128" placeholder="请输入英文品名（选填）" /></label>
@@ -300,15 +301,15 @@ async function save() {
</template>
<style scoped>
.declaration-editor { display: grid; gap: 14px; max-height: calc(100vh - 190px); overflow: auto; padding-right: 4px; }
.declaration-editor { display: grid; gap: var(--admin-space-5); }
.readonly-facts { margin-top: 2px; }
.order-fields :deep(.el-date-editor), .order-fields :deep(.el-input) { width: 100%; }
h3 { margin: 0; color: #344054; font-size: 15px; } h3 small { margin-left: 8px; color: #98a2b3; font-weight: 400; }
h3 { margin: 0; color: #344054; font-size: var(--admin-font-section); } h3 small { margin-left: var(--admin-space-3); color: #98a2b3; font-weight: 400; }
.cargo-table { width: 100%; }
.cargo-table small, .cargo-table .cell-primary { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cargo-table small { margin-top: 3px; color: #98a2b3; }
.cargo-editor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.cargo-editor-grid label { display: grid; min-width: 0; gap: 5px; color: #667085; font-size: 12px; }
.cargo-editor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--admin-space-5) var(--admin-space-5); }
.cargo-editor-grid label { display: grid; min-width: 0; gap: var(--admin-space-1); color: #667085; font-size: var(--admin-font-caption); }
.cargo-editor-grid label.wide { grid-column: span 3; }
.cargo-editor-grid :deep(.el-input-number), .cargo-editor-grid :deep(.el-input), .order-fields :deep(.el-select) { width: 100%; }
@media (max-width: 900px) { .cargo-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cargo-editor-grid label.wide { grid-column: span 2; } }
src/modules/unified-orders/pages/UnifiedOrdersView.vue
+1 -1
View File
@@ -1841,7 +1841,7 @@ async function cancelCoLoadGroup() {
await ElMessageBox.confirm(
'确认解除整个同柜组吗？解除后这些订单可重新选择成员建组；不会拆分订单或子单。',
'解除同柜组',
{ confirmButtonText: '确认解除', cancelButtonText: '取消', type: 'warning' },
{ customClass: 'admin-density-confirm', confirmButtonText: '确认解除', cancelButtonText: '取消', type: 'warning' },
)
} catch (error) {
if (error === 'cancel' || error === 'close') return
src/modules/warehouse-resources/locations/pages/LocationsView.vue
+1 -1
View File
@@ -410,7 +410,7 @@ async function toggleStatus(row: PlatformLocationResource) {
? `确定停用“${row.locationCode}”吗？停用前后端会再次检查是否存在活动预占或占用。`
: `确定重新启用“${row.locationCode}”吗？仅启用仓库中的库位可以恢复可用。`,
`${action}库位`,
{ type: nextStatus === 'AVAILABLE' ? 'success' : 'warning', confirmButtonText: `确认${action}`, cancelButtonText: '取消' },
{ customClass: 'admin-density-confirm', type: nextStatus === 'AVAILABLE' ? 'success' : 'warning', confirmButtonText: `确认${action}`, cancelButtonText: '取消' },
)
} catch {
return
src/modules/warehouse-resources/pallets/pages/PalletsView.vue
+1 -1
View File
@@ -309,7 +309,7 @@ async function removePallet(row: PlatformPalletResource) {
await ElMessageBox.confirm(
`确定删除托盘“${row.palletCode}”吗？已预占或已占用的托盘无法删除。`,
'删除托盘',
{ confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning', confirmButtonClass: 'el-button--danger' },
{ customClass: 'admin-density-confirm', confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning', confirmButtonClass: 'el-button--danger' },
)
} catch {
return
src/modules/warehouses/pages/WarehousesView.test.ts
+5 -5
View File
@@ -195,10 +195,10 @@ describe('WarehousesView', () => {
it('uses bordered striped tables and semantic operation buttons', () => {
expect(warehousesSource).toContain('border')
expect(warehousesSource).toContain('stripe')
expect(warehousesSource).toContain('size="small" plain type="primary"')
expect(warehousesSource).toMatch(/size="small"\s+plain\s+:type=/)
expect(warehousesSource).toContain('<Pencil :size="15" />')
expect(warehousesSource).toContain('<Power :size="15" />')
expect(warehousesSource).toContain('data-tone="neutral" class="density-action"')
expect(warehousesSource).toMatch(/:data-tone=/)
expect(warehousesSource).toContain('>编辑</el-button>')
expect(warehousesSource).toContain(':data-tone=')
for (const label of ['仓库名称', '仓库编码', '内部编号', '州/省', '城市', '邮编']) expect(warehousesSource).toContain(`label: '${label}'`)
expect(warehousesSource).toContain('@media (max-width: 720px)')
})
@@ -206,7 +206,7 @@ describe('WarehousesView', () => {
expect(warehousesSource).toContain('<AppDialog v-model="editorOpen" :title="editorLabel" width="min(650px, calc(100vw - 28px))"')
expect(warehousesSource).not.toContain('<AppDrawer v-model="editorOpen"')
expect(warehousesSource).toContain(':global(.warehouse-editor-dialog .el-dialog__body) { min-height: 0; overflow-y: auto; }')
expect(warehousesSource).toContain('.drawer-form :deep(.form-grid.two-cols) { grid-template-columns: minmax(0, 1fr); }')
expect(warehousesSource).toContain('.density-form :deep(.form-grid.two-cols) { grid-template-columns: minmax(0, 1fr); }')
})
beforeEach(() => {
vi.stubGlobal('ResizeObserver', ResizeObserverStub)
src/modules/warehouses/pages/WarehousesView.vue
+31 -36
View File
@@ -1,7 +1,8 @@
<script setup lang="ts">
import '@/styles/adminDensity.css'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox, type UploadFile } from 'element-plus'
import { ChevronDown, Download, FileSpreadsheet, FileUp, MapPin, Pencil, Plus, Power, Save, Warehouse as WarehouseIcon } from '@lucide/vue'
import { ChevronDown, Download, FileSpreadsheet, FileUp, MapPin, Plus, Save, Warehouse as WarehouseIcon } from '@lucide/vue'
import AdminPage from '@/shared/components/AdminPage.vue'
import AppDialog from '@/shared/components/AppDialog.vue'
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
@@ -582,7 +583,7 @@ async function toggleStatus(warehouse: WarehouseRow) {
? `停用“${warehouse.name}”后，客户新建头程订单时将无法选择该公共仓库。`
: `确认重新启用“${warehouse.name}”供客户下单选择吗？`,
`${targetText}公共仓库`,
{ confirmButtonText: `确认${targetText}`, cancelButtonText: '取消', type: target === 'INACTIVE' ? 'warning' : 'info' },
{ customClass: 'admin-density-confirm', confirmButtonText: `确认${targetText}`, cancelButtonText: '取消', type: target === 'INACTIVE' ? 'warning' : 'info' },
)
statusLoadingIds.value = new Set(statusLoadingIds.value).add(warehouse.id)
await changePlatformWarehouseStatus(warehouse.id, target)
@@ -689,7 +690,7 @@ onMounted(() => void loadWarehouses())
</script>
<template>
<AdminPage as="div">
<AdminPage class="admin-density" as="div">
<ListPageLayout aria-label="仓库列表页面">
<template #toolbar>
<QueryToolbar v-model="filters" class="surface-panel" ariaLabel="仓库筛选" :fields="queryFields" :loading="loading" preference-key="warehouses-query" @search="queryWarehouses" />
@@ -723,24 +724,24 @@ onMounted(() => void loadWarehouses())
<template #toolbar-actions>
<div v-if="access.can('platform:warehouse:create')" class="warehouse-primary-actions">
<el-button :disabled="!warehouseReady" @click="openImport"><FileUp :size="16" />导入仓库</el-button>
<el-dropdown trigger="click" :disabled="!warehouseReady" @command="openCreate($event as WarehouseType)">
<el-dropdown popper-class="admin-density warehouse-create-menu" trigger="click" :disabled="!warehouseReady" @command="openCreate($event as WarehouseType)">
<el-button type="primary" :disabled="!warehouseReady"><Plus :size="16" />新增仓库<ChevronDown :size="15" /></el-button>
<template #dropdown><el-dropdown-menu><el-dropdown-item command="FBA"><FileSpreadsheet :size="15" />新增 FBA 地址</el-dropdown-item><el-dropdown-item command="DOMESTIC"><WarehouseIcon :size="15" />新增国内仓</el-dropdown-item><el-dropdown-item command="OVERSEAS"><MapPin :size="15" />新增海外仓</el-dropdown-item><el-dropdown-item command="OVERSEAS_PARTNER"><MapPin :size="15" />新增海外仓合作仓</el-dropdown-item></el-dropdown-menu></template>
</el-dropdown>
</div>
</template>
<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')" size="small" plain type="primary" :disabled="!warehouseReady || editLoading" @click="openEdit(row as WarehouseRow)"><Pencil :size="15" />编辑</el-button>
<el-button
<div v-if="access.can('platform:warehouse:edit') || access.can('platform:warehouse:status')" class="table-actions density-actions">
<el-button data-tone="neutral" class="density-action" v-if="access.can('platform:warehouse:edit')" size="small" :disabled="!warehouseReady || editLoading" @click="openEdit(row as WarehouseRow)">编辑</el-button>
<el-button class="density-action"
v-if="access.can('platform:warehouse:status')"
size="small"
plain
:type="(row as WarehouseRow).status === 'ACTIVE' ? 'danger' : 'success'"
:data-tone="(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>
>{{ (row as WarehouseRow).status === 'ACTIVE' ? '停用' : '启用' }}</el-button>
</div>
<span v-else class="warehouse-subline">仅查看</span>
</template>
@@ -755,9 +756,9 @@ onMounted(() => void loadWarehouses())
</section>
</ListPageLayout>
<AppDialog v-model="editorOpen" :title="editorLabel" width="min(650px, calc(100vw - 28px))" class="warehouse-editor-dialog" :close-on-click-modal="false" :confirm-loading="saving" :show-confirm="false" destroy-on-close>
<el-form :model="form" label-position="top" class="drawer-form" :disabled="saving">
<FormSection title="基础信息">
<AppDialog v-model="editorOpen" :title="editorLabel" width="min(650px, calc(100vw - 28px))" class="warehouse-editor-dialog admin-density-dialog" :close-on-click-modal="false" :confirm-loading="saving" :show-confirm="false" destroy-on-close>
<el-form :model="form" label-position="top" class="density-form" :disabled="saving">
<FormSection class="density-form-section" title="基础信息">
<div class="form-grid two-cols">
<el-form-item v-if="isFbaCreate" 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>
<el-form-item v-if="isFbaCreate" label="国家或地区" required>
@@ -783,7 +784,7 @@ onMounted(() => void loadWarehouses())
</div>
</FormSection>
<FormSection title="地址信息">
<FormSection class="density-form-section" title="地址信息">
<div class="form-grid two-cols">
<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>
@@ -796,14 +797,14 @@ onMounted(() => void loadWarehouses())
<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>
</FormSection>
<FormSection v-if="!isFbaCreate" title="编码与状态">
<FormSection class="density-form-section" v-if="!isFbaCreate" title="编码与状态">
<div class="form-grid two-cols compact-grid">
<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>
<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>
</div>
</FormSection>
<FormSection v-if="!isFbaCreate" title="联系信息">
<FormSection class="density-form-section" v-if="!isFbaCreate" title="联系信息">
<div class="form-grid two-cols compact-grid">
<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" inputmode="numeric" placeholder="选填" @input="form.contactPhone = digitsOnly($event)" /></el-form-item>
@@ -815,7 +816,7 @@ onMounted(() => void loadWarehouses())
<template #footer><div class="drawer-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>
<el-dialog v-model="importOpen" title="导入公共仓库" width="min(760px, calc(100vw - 32px))" :close-on-click-modal="!importing" :close-on-press-escape="!importing">
<el-dialog class="admin-density-dialog" v-model="importOpen" title="导入公共仓库" width="min(760px, calc(100vw - 32px))" :close-on-click-modal="!importing" :close-on-press-escape="!importing">
<div class="import-content">
<div class="import-toolbar">
<el-button :loading="downloadingTemplate" @click="downloadTemplate"><Download :size="16" />下载 XLSX 模板</el-button>
@@ -829,7 +830,7 @@ onMounted(() => void loadWarehouses())
<template #tip><div class="el-upload__tip">最多 5MB、1000 行；请使用标准模板，FBA 名称可不填并默认使用编码。</div></template>
</el-upload>
<div v-if="importResult" class="import-result" role="status">
<dl class="import-summary">
<dl class="import-summary density-detail-overview">
<div><dt>总行数</dt><dd>{{ importResult.totalRows }}</dd></div>
<div><dt>有效</dt><dd>{{ importResult.validRows }}</dd></div>
<div><dt>新增</dt><dd>{{ importResult.createCount }}</dd></div>
@@ -849,40 +850,34 @@ onMounted(() => void loadWarehouses())
</template>
<style scoped>
.state-alert p { margin: 6px 0 10px; line-height: 1.55; }
.warehouse-heading { gap: 16px; }
.warehouse-primary-actions, .import-toolbar, .import-result-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.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: 8px; background: #eef3fa; color: var(--cc-primary); }
.state-alert p { margin: var(--admin-space-2) 0 var(--admin-space-4); line-height: 1.55; }
.warehouse-heading { gap: var(--admin-space-6); }
.warehouse-primary-actions, .import-toolbar, .import-result-heading { 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 > 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: 11px; }
.warehouse-cell small, .warehouse-subline, .warehouse-address small { display: block; color: var(--cc-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 span { min-width: 0; }
.field-error { width: 100%; margin: 6px 0 0; color: var(--el-color-danger); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.compact-grid { row-gap: 10px; }
.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; }
.compact-grid { row-gap: var(--admin-space-4); }
:global(.warehouse-editor-dialog) { max-height: min(800px, calc(100vh - 32px)); display: flex; flex-direction: column; }
:global(.warehouse-editor-dialog .el-dialog__body) { min-height: 0; overflow-y: auto; }
:global(.warehouse-editor-dialog .el-dialog__footer) { flex: 0 0 auto; }
.warehouse-status-toggle :deep(.el-radio-button__inner) { min-width: 74px; }
@media (max-width: 720px) {
.drawer-form :deep(.form-grid.two-cols) { grid-template-columns: minmax(0, 1fr); }
.density-form :deep(.form-grid.two-cols) { grid-template-columns: minmax(0, 1fr); }
}
.import-content { display: grid; gap: 20px; }
.import-content { display: grid; gap: var(--admin-space-7); }
.import-toolbar { justify-content: space-between; }
.import-result { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--cc-border); }
.import-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; border: 1px solid var(--cc-border); border-radius: 8px; overflow: hidden; }
.import-summary div { min-width: 0; padding: 10px 12px; border-right: 1px solid var(--cc-border); background: var(--cc-surface-soft, #f8fafc); }
.import-summary div:last-child { border-right: 0; }
.import-summary dt { color: var(--cc-muted); font-size: 11px; }
.import-summary dd { margin: 3px 0 0; color: var(--cc-text); font-size: 16px; font-weight: 700; }
.import-summary dd.is-error { color: var(--el-color-danger); }
.import-result { display: grid; gap: var(--admin-space-5); padding-top: var(--admin-space-6); border-top: 1px solid var(--cc-border); }
.import-result-heading { justify-content: space-between; }
: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; }
:global(.el-dropdown-menu__item) { gap: 8px; }
:global(.warehouse-create-menu .el-dropdown-menu__item) { gap: var(--admin-space-3); }
@media (max-width: 720px) {
.warehouse-heading { align-items: stretch; }
src/shared/components/BatchImportDialog.test.ts
+3 -1
View File
@@ -28,13 +28,14 @@ describe('BatchImportDialog', () => {
vi.unstubAllGlobals()
})
it('uses the shared two-step flow and submits a validated XLSX file', async () => {
it.each([false, true])('uses the shared two-step flow and submits a validated XLSX file (dense: %s)', async (dense) => {
vi.stubGlobal('ResizeObserver', ResizeObserverStub)
const result: BatchImportResult = {
fileName: 'partners.xlsx', totalRows: 2, importedRows: 2, success: true, errors: [],
}
const importFile = vi.fn().mockResolvedValue(result)
const wrapper = mount(BatchImportDialog, {
attrs: { class: dense ? 'admin-density-dialog' : undefined },
attachTo: document.body,
props: {
modelValue: true,
@@ -48,6 +49,7 @@ describe('BatchImportDialog', () => {
})
await flushPromises()
expect(document.querySelector('.batch-import-dialog')?.classList.contains('admin-density-dialog')).toBe(dense)
expect(document.body.textContent).toContain('下载标准模板')
expect(document.body.textContent).toContain('选择填写后的文件')
expect(button('开始导入')?.hasAttribute('disabled')).toBe(true)
src/shared/components/BatchImportDialog.vue
+13 -13
View File
@@ -211,27 +211,27 @@ function downloadErrors() {
</template>
<style scoped>
.batch-import-flow { display: grid; gap: 16px; }
.batch-import-step { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px; border: 1px solid var(--cc-border); border-radius: 8px; background: #fafbfc; }
.batch-import-step__heading { display: flex; min-width: 0; align-items: flex-start; gap: 12px; }
.batch-import-step__heading > span { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; background: var(--cc-primary); color: #fff; font-size: 12px; font-weight: 700; }
.batch-import-step__heading strong, .batch-import-errors__heading strong { color: var(--cc-text); font-size: 14px; }
.batch-import-step__heading p, .batch-import-errors__heading p { margin: 4px 0 0; color: var(--cc-muted); font-size: 12px; line-height: 1.55; }
.batch-import-file { display: inline-flex; min-width: 190px; max-width: 280px; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--cc-border); border-radius: 6px; background: #fff; color: var(--cc-primary); cursor: pointer; }
.batch-import-flow { display: grid; gap: var(--admin-space-5, 16px); }
.batch-import-step { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-6, 20px); padding: var(--admin-space-5, 16px); border: 1px solid var(--cc-border); border-radius: var(--admin-radius, 8px); background: #fafbfc; }
.batch-import-step__heading { display: flex; min-width: 0; align-items: flex-start; gap: var(--admin-space-5, 12px); }
.batch-import-step__heading > span { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; background: var(--cc-primary); color: #fff; font-size: var(--admin-font-caption, 12px); font-weight: 700; }
.batch-import-step__heading strong, .batch-import-errors__heading strong { color: var(--cc-text); font-size: var(--admin-font-section, 14px); }
.batch-import-step__heading p, .batch-import-errors__heading p { margin: var(--admin-space-1, 4px) 0 0; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); line-height: 1.55; }
.batch-import-file { display: inline-flex; min-width: 190px; max-width: 280px; align-items: center; justify-content: center; gap: var(--admin-space-3, 8px); padding: var(--admin-space-2, 9px) var(--admin-space-5, 14px); border: 1px solid var(--cc-border); border-radius: var(--admin-radius, 6px); background: #fff; color: var(--cc-primary); cursor: pointer; }
.batch-import-file:hover { border-color: var(--cc-primary); }
.batch-import-file:focus-within { outline: 2px solid color-mix(in srgb, var(--cc-primary) 28%, transparent); outline-offset: 2px; }
.batch-import-file.disabled { cursor: not-allowed; opacity: .6; }
.batch-import-file input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.batch-import-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-import-flow :deep(.el-alert p) { margin: 5px 0 0; }
.batch-import-errors { overflow: hidden; border: 1px solid #f4c7c7; border-radius: 8px; }
.batch-import-errors__heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: #fff5f5; }
.batch-import-flow :deep(.el-alert p) { margin: var(--admin-space-1, 5px) 0 0; }
.batch-import-errors { overflow: hidden; border: 1px solid #f4c7c7; border-radius: var(--admin-radius, 8px); }
.batch-import-errors__heading { display: flex; align-items: center; justify-content: space-between; gap: var(--admin-space-5, 16px); padding: var(--admin-space-5, 14px) var(--admin-space-5, 16px); background: #fff5f5; }
.batch-import-errors__list { max-height: 220px; overflow: auto; }
.batch-import-error { display: grid; grid-template-columns: 72px 130px minmax(0, 1fr); gap: 10px; padding: 10px 16px; border-top: 1px solid #f4dddd; font-size: 12px; }
.batch-import-error { display: grid; grid-template-columns: 72px 130px minmax(0, 1fr); gap: var(--admin-space-4, 10px); padding: var(--admin-space-4, 10px) var(--admin-space-5, 16px); border-top: 1px solid #f4dddd; font-size: var(--admin-font-caption, 12px); }
.batch-import-error span { color: #b42318; font-weight: 600; }
.batch-import-error p { margin: 0; overflow-wrap: anywhere; }
.batch-import-errors__overflow { margin: 0; padding: 10px 16px; border-top: 1px solid #f4dddd; color: var(--cc-muted); font-size: 12px; }
.batch-import-footer { display: flex; justify-content: flex-end; gap: 10px; }
.batch-import-errors__overflow { margin: 0; padding: var(--admin-space-4, 10px) var(--admin-space-5, 16px); border-top: 1px solid #f4dddd; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
.batch-import-footer { display: flex; justify-content: flex-end; gap: var(--admin-space-4, 10px); }
.batch-import-footer :deep(.el-button + .el-button) { margin-left: 0; }
@media (max-width: 720px) {
src/shared/components/exportTaskCreatedDialog.test.ts
+6
View File
@@ -16,6 +16,12 @@ describe('showExportTaskCreatedDialog', () => {
)
})
it.each([false, true])('opts into the shared dialog style explicitly: %s', async (dense) => {
const confirm = vi.spyOn(ElMessageBox, 'confirm').mockResolvedValue({} as never)
await showExportTaskCreatedDialog({ taskName: '财务导出', dense })
expect(confirm).toHaveBeenCalledWith(expect.any(String), '导出任务已创建', expect.objectContaining({ customClass: dense ? 'admin-density-confirm' : undefined }))
})
it('keeps the user on the current page when the dialog is dismissed', async () => {
vi.spyOn(ElMessageBox, 'confirm').mockRejectedValue('cancel')
src/shared/components/exportTaskCreatedDialog.ts
+2
View File
@@ -3,6 +3,7 @@ import { ElMessageBox } from 'element-plus'
export interface ExportTaskCreatedDialogOptions {
taskName: string
taskNo?: string | null
dense?: boolean
}
export async function showExportTaskCreatedDialog(options: ExportTaskCreatedDialogOptions) {
@@ -14,6 +15,7 @@ export async function showExportTaskCreatedDialog(options: ExportTaskCreatedDial
'导出任务已创建',
{
type: 'success',
customClass: options.dense ? 'admin-density-confirm' : undefined,
confirmButtonText: '前往下载中心',
cancelButtonText: '留在当前页',
distinguishCancelAndClose: true,
src/styles/adminDensity.css
+21 -8
View File
@@ -100,14 +100,17 @@
:is(.admin-density, .admin-density-dialog) .el-button.density-action:focus-visible { outline: 2px solid var(--action-color); outline-offset: 2px; }
/* Detail headings and summaries shared by domestic and overseas pages. */
.admin-density .detail-page-layout.density-detail-layout { gap: 0; background: var(--admin-surface); }
.admin-density .density-detail-layout > .detail-page-layout__header { border-bottom: 1px solid var(--cc-border); }
.admin-density .density-detail-layout > .detail-page-layout__content { padding: var(--admin-space-5); }
.admin-density .density-detail-header { display: flex; min-width: 0; min-height: 40px; align-items: center; justify-content: space-between; gap: var(--admin-space-5, 12px); margin-bottom: 0; padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); background: var(--admin-surface, #fff); }
.admin-density .density-detail-heading { display: flex; min-width: 0; align-items: center; gap: var(--admin-space-4, 10px); }
.admin-density .density-detail-title { min-width: 0; margin: 0; color: #172033; font-size: var(--admin-font-title, 16px); line-height: 1.5; overflow-wrap: anywhere; }
.admin-density .density-detail-overview { border-bottom: 1px solid var(--cc-border); display: flex; flex-wrap: wrap; gap: var(--admin-space-2, 6px) var(--admin-space-7, 24px); margin: 0; padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); background: var(--admin-surface, #fff); }
.admin-density .density-detail-overview > div { display: flex; min-width: 0; align-items: baseline; gap: var(--admin-space-2, 6px); }
.admin-density .density-detail-overview dt { flex: 0 0 auto; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
.admin-density .density-detail-overview dd { min-width: 0; margin: 0; color: var(--cc-text); font-size: var(--admin-font-body, 13px); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.admin-density .density-detail-overview small { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
:is(.admin-density, .admin-density-dialog) .density-detail-overview { border-bottom: 1px solid var(--cc-border); display: flex; flex-wrap: wrap; gap: var(--admin-space-2, 6px) var(--admin-space-7, 24px); margin: 0; padding: var(--admin-space-3, 8px) var(--admin-space-5, 12px); background: var(--admin-surface, #fff); }
:is(.admin-density, .admin-density-dialog) .density-detail-overview > div { display: flex; min-width: 0; align-items: baseline; gap: var(--admin-space-2, 6px); }
:is(.admin-density, .admin-density-dialog) .density-detail-overview dt { flex: 0 0 auto; color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
:is(.admin-density, .admin-density-dialog) .density-detail-overview dd { min-width: 0; margin: 0; color: var(--cc-text); font-size: var(--admin-font-body, 13px); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
:is(.admin-density, .admin-density-dialog) .density-detail-overview small { color: var(--cc-muted); font-size: var(--admin-font-caption, 12px); }
/* Back navigation stays in the detail heading, beside its business identifier. */
.admin-density .el-button.density-back { height: var(--admin-control-height); padding: 0; border: 0; background: transparent; color: var(--cc-muted); font-size: var(--admin-font-body); font-weight: 400; box-shadow: none; }
@@ -133,6 +136,7 @@
.admin-density-drawer .el-drawer__header { margin-bottom: 0; padding: var(--admin-space-5) var(--admin-space-6); border-bottom: 1px solid var(--cc-border); }
.admin-density-drawer .el-drawer__title { font-size: var(--admin-font-title); }
.admin-density-drawer .el-drawer__body { padding: var(--admin-space-5) var(--admin-space-6); }
.admin-density-drawer .el-drawer__footer { padding: var(--admin-space-5) var(--admin-space-6); border-top: 1px solid var(--cc-border); }
/* Reusable row action group; no business action names in the shared layer. */
.admin-density .data-table .density-actions { --cc-list-action-sibling-margin: 0px; display: flex; align-items: center; gap: var(--admin-space-2); }
@@ -153,9 +157,9 @@
.admin-density .density-contained-tabs > .el-tabs__content { padding: var(--admin-space-5); }
/* Explicit page descriptions share the teleported detail table scale. */
.admin-density .density-descriptions .el-descriptions__label.el-descriptions__cell { width: var(--admin-label-width); font-size: var(--admin-font-caption); background: var(--admin-label-bg); }
.admin-density .density-descriptions .el-descriptions__content.el-descriptions__cell { font-size: var(--admin-font-body); overflow-wrap: anywhere; }
.admin-density .density-descriptions .el-descriptions__cell { height: var(--admin-row-height); padding: var(--admin-space-2) var(--admin-space-3); }
:is(.admin-density, .admin-density-dialog) .density-descriptions .el-descriptions__label.el-descriptions__cell { width: var(--admin-label-width); font-size: var(--admin-font-caption); background: var(--admin-label-bg); }
:is(.admin-density, .admin-density-dialog) .density-descriptions .el-descriptions__content.el-descriptions__cell { font-size: var(--admin-font-body); overflow-wrap: anywhere; }
:is(.admin-density, .admin-density-dialog) .density-descriptions .el-descriptions__cell { height: var(--admin-row-height); padding: var(--admin-space-2) var(--admin-space-3); }
/* Opted-in grouped forms use the same labels and spacing on pages and in dialogs. */
:is(.admin-density, .admin-density-dialog) .density-form,
@@ -163,6 +167,15 @@
:is(.admin-density, .admin-density-dialog) .density-form .el-form-item,
.admin-density.density-form .el-form-item { margin-bottom: var(--admin-space-5); }
/* Opted-in FormSection consumers share form headings without page-level paint. */
:is(.admin-density, .admin-density-dialog) .form-section.density-form-section { padding: var(--admin-space-5) 0; }
:is(.admin-density, .admin-density-dialog) .form-section.density-form-section:first-child { padding-top: 0; }
:is(.admin-density, .admin-density-dialog) .form-section.density-form-section:last-child { padding-bottom: 0; }
:is(.admin-density, .admin-density-dialog) .density-form-section .form-section__heading { margin-bottom: var(--admin-space-3); }
:is(.admin-density, .admin-density-dialog) .density-form-section .form-section__heading h2 { font-size: var(--admin-font-section); }
:is(.admin-density, .admin-density-dialog) .density-form-section .form-section__heading p { margin-top: var(--admin-space-1); font-size: var(--admin-font-caption); }
:is(.admin-density, .admin-density-dialog) .density-form :is(.el-select, .el-input-number, .el-date-editor) { width: 100%; }
/* Existing native data tables keep their business column widths and sticky cells. */
:is(.admin-density, .admin-density-dialog) .density-table { width: 100%; border-collapse: collapse; font-size: var(--admin-font-body); }
:is(.admin-density, .admin-density-dialog) .density-table :is(th, td) { height: var(--admin-row-height); padding: var(--admin-space-1) var(--admin-space-3); border: 1px solid var(--admin-table-border); text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
src/styles/adminDensity.test.ts
+126 -2
View File
@@ -1,5 +1,6 @@
import { readFileSync } from 'node:fs'
import { resolve } from 'node:path'
import { dirname, resolve } from 'node:path'
import ts from 'typescript'
import { describe, expect, it } from 'vitest'
import { compileStyle, parse } from 'vue/compiler-sfc'
@@ -38,11 +39,54 @@ const overseasConsumers = [
'overseas-warehouse/components/SmartDispatchDialog.vue',
'overseas-warehouse/components/DeliveryDocumentsDialog.vue',
]
const overseasBusinessConsumers = [
'overseas-business/pages/PurchaseOrdersView.vue', 'overseas-business/pages/PurchaseOrderDetailView.vue',
'overseas-business/pages/PurchaseOrderEditView.vue', 'overseas-business/pages/TransportOrdersView.vue',
'overseas-business/pages/TransportOrderFormView.vue',
]
const customerServiceConsumers = [
'overseas-warehouse/pages/ExceptionOrdersView.vue', 'overseas-warehouse/pages/CustomerVisitsView.vue',
]
const financeConsumers = [
'finance/pages/FinanceCustomerAccountsView.vue', 'finance/pages/FinanceCustomerArapView.vue',
'finance/pages/FinanceCustomerStatementsView.vue', 'finance/pages/FinanceFormalSettlementPage.vue',
'finance/pages/FinanceReceivableStatisticsView.vue',
]
const generalCatalogConsumers = [
'suppliers/pages/SuppliersView.vue',
'suppliers/pages/SupplierDetailView.vue',
'suppliers/pages/SupplierFormView.vue',
'suppliers/components/SupplierLicenseDialog.vue',
'overseas-master-data/pages/ExchangeRatesView.vue',
'overseas-master-data/pages/OverseasQuotesView.vue',
'overseas-master-data/pages/VehiclesView.vue',
'overseas-master-data/pages/VehicleDetailView.vue',
'master-data/express-companies/pages/ExpressCompaniesView.vue',
'master-data/counterparties/pages/PartnersView.vue',
'fee-items/pages/FeeItemsView.vue',
'warehouses/pages/WarehousesView.vue',
'fba-pricing/carrier-rates/pages/CarrierRatesView.vue',
'fba-pricing/carrier-rates/pages/CarrierRateDetailView.vue',
'downloads/pages/DownloadCenterView.vue',
]
const notificationConsumers = [
'notifications/pages/PlatformNotificationsView.vue', 'notifications/pages/MessageManagementView.vue',
'notifications/pages/MessageTemplatesView.vue', 'notifications/components/MessageComposerDialog.vue',
'notifications/components/TemplateEditorDialog.vue',
]
const systemConsumers = ['iam/pages/InternalUsersView.vue', 'iam/pages/RolesView.vue', 'iam/pages/PermissionsView.vue', 'dashboard/pages/DashboardView.vue']
const consumers = [
...notificationConsumers,
...systemConsumers,
...generalCatalogConsumers,
...financeConsumers,
...customerServiceConsumers,
...overseasBusinessConsumers,
...overseasConsumers,
...cargoConsumers,
'customers/pages/CustomersView.vue', 'customers/pages/CustomerDetailView.vue',
'customers/pages/OverseasStorageFeesView.vue', 'customers/components/CustomerBillingRulesPanel.vue',
'unified-orders/components/InboundFeeDetailManager.vue', 'unified-orders/components/OrderDeclarationEditorDialog.vue',
'customers/CustomerOverseasStorageFeePanel.vue', 'unified-orders/pages/UnifiedOrdersView.vue',
'inbounds/components/InboundTaskList.vue', 'inbounds/measurement/InboundMeasurementDialog.vue',
'inbounds/measurement/InboundMeasurementPanel.vue', 'inbounds/review/MeasurementReviewPanel.vue',
@@ -53,7 +97,7 @@ const consumers = [
'domestic-containers/pages/DomesticContainerInventoryDetailView.vue',
'container-loading/components/ContainerSimulationCreate.vue', 'audit/components/CustomerAuditLogsPanel.vue',
]
const moduleCss = ['customers/customerDensity.css', 'unified-orders/styles/orderDensity.css', 'inbounds/measurement/measurementDensity.css', 'domestic-containers/pages/domesticContainersSummary.css']
const moduleCss = ['iam/iamDensity.css', 'finance/financeDensity.css', 'overseas-business/overseasBusinessDensity.css', 'customers/customerDensity.css', 'unified-orders/styles/orderDensity.css', 'inbounds/measurement/measurementDensity.css', 'domestic-containers/pages/domesticContainersSummary.css']
const read = (file: string) => readFileSync(resolve(process.cwd(), 'src', file), 'utf8')
const domesticPages = [
{ title: '订单列表', path: '/orders', file: 'unified-orders/pages/UnifiedOrdersView.vue' },
@@ -69,6 +113,12 @@ const customerPages = [
{ title: '海外仓阶梯费用', path: '/customers/overseas-storage-fees', file: 'customers/pages/OverseasStorageFeesView.vue' },
]
const densityPages = [...new Set([
...notificationConsumers.filter(file => file.includes('/pages/')),
...systemConsumers,
...generalCatalogConsumers.filter(file => file.includes('/pages/')),
...financeConsumers,
...customerServiceConsumers,
...overseasBusinessConsumers,
...overseasConsumers.filter(file => !file.endsWith('PalletDetailView.vue')),
...cargoConsumers.filter(file => file.includes('/pages/') || ['ContainerOverviewPanel.vue', 'ContainerCustomsPanel.vue', 'ContainerLastLegFeesPanel.vue', 'ContainerFeesPanel.vue', 'OceanBookingDocumentsPanel.vue'].some(name => file.endsWith(name))),
...domesticPages.map(page => page.file), 'loading-lists/pages/PreloadPlanDetailView.vue',
@@ -86,6 +136,7 @@ const classesOf = (node: ElementNode, preload = true, dense = preload, workbench
return flatten(value)
})
const styles = [
...parse(read('shared/components/BatchImportDialog.vue')).descriptor.styles.map(style => ({ file: 'BatchImportDialog.vue', css: style.content })),
...consumers.flatMap(file => parse(read(`modules/${file}`)).descriptor.styles.map(style => ({ file, css: style.content }))),
...moduleCss.map(file => ({ file, css: read(`modules/${file}`) })),
]
@@ -98,6 +149,78 @@ const cssRoot = (css: string) => {
}
describe('approved Admin density ownership', () => {
it('opts application-shell confirmations in even before a business page loads', () => {
const entries = ['app/layouts/AppLayout.vue', 'app/components/WorkspaceTabs.vue', 'app/router/index.ts', 'main.ts']
let count = 0
for (const file of entries) {
const source = read(file)
expect(source, file).toContain("@/styles/adminDensity.css")
const script = file.endsWith('.vue') ? parse(source).descriptor.scriptSetup!.content : source
const tree = ts.createSourceFile(file, script, ts.ScriptTarget.Latest, true)
const visit = (node: ts.Node) => {
if (ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && node.expression.expression.getText(tree) === 'ElMessageBox') {
count += 1
const options = node.arguments[2]
expect(options && ts.isObjectLiteralExpression(options), file).toBe(true)
const customClass = options && ts.isObjectLiteralExpression(options) ? options.properties.find(prop => ts.isPropertyAssignment(prop) && prop.name.getText(tree) === 'customClass') : undefined
expect(customClass && ts.isPropertyAssignment(customClass) && ts.isStringLiteral(customClass.initializer) && customClass.initializer.text, file).toBe('admin-density-confirm')
}
ts.forEachChild(node, visit)
}
visit(tree)
}
expect(count).toBe(5)
})
it('checks dialog roots along actual static and dynamic Vue imports from approved consumers', () => {
const pending = consumers.map(file => resolve(process.cwd(), 'src/modules', file))
const seen = new Set<string>()
while (pending.length) {
const file = pending.shift()!
if (seen.has(file)) continue
seen.add(file)
const descriptor = parse(readFileSync(file, 'utf8')).descriptor
const enqueue = (reference: string) => {
if (!reference.endsWith('.vue')) return
if (reference.startsWith('@/')) pending.push(resolve(process.cwd(), 'src', reference.slice(2)))
else if (reference.startsWith('.')) pending.push(resolve(dirname(file), reference))
}
for (const script of [descriptor.script, descriptor.scriptSetup]) {
if (!script) continue
const ast = ts.createSourceFile(file, script.content, ts.ScriptTarget.Latest, true)
const visitImports = (node: ts.Node) => {
if (ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && node.expression.expression.getText(ast) === 'ElMessageBox') {
expect(node.arguments[2]?.getText(ast), file + ': reachable confirmation').toContain('admin-density-confirm')
}
if (ts.isImportDeclaration(node) && ts.isStringLiteral(node.moduleSpecifier)) enqueue(node.moduleSpecifier.text)
if (ts.isCallExpression(node) && node.expression.kind === ts.SyntaxKind.ImportKeyword) {
const reference = node.arguments[0]
if (reference && ts.isStringLiteral(reference)) enqueue(reference.text)
}
ts.forEachChild(node, visitImports)
}
visitImports(ast)
}
if (['AppDialog.vue', 'AppDrawer.vue', 'BatchImportDialog.vue'].some(name => file.endsWith(name))) continue
const visitTemplate = (nodes: TemplateNode[]) => {
for (const node of nodes) {
if (node.type !== 1) continue
if (['AppDialog', 'el-dialog', 'BatchImportDialog'].includes(node.tag)) expect(classesOf(node), `${file}: reachable modal`).toContain('admin-density-dialog')
if (['AppDrawer', 'el-drawer'].includes(node.tag)) expect(classesOf(node), `${file}: reachable drawer`).toContain('admin-density-drawer')
visitTemplate(node.children)
}
}
if (descriptor.template?.ast) visitTemplate(descriptor.template.ast.children)
}
})
it('keeps the supplier license dialog styled at its own teleported root', () => {
const source = read('modules/suppliers/components/SupplierLicenseDialog.vue')
expect(source).toContain('<AppDialog class="admin-density-dialog"')
expect(source).toContain('width="min(560px, calc(100vw - 24px))"')
expect(source).toContain('aria-label="营业执照信息"')
})
it('uses identical authored tab paint for native domestic and Element overseas tabs', () => {
const element = '.admin-density .density-element-tabs > .el-tabs__header .el-tabs__nav .el-tabs__item'
@@ -321,6 +444,7 @@ describe('approved Admin density ownership', () => {
it('prevents page copies of action paint, tab primitives and desktop density dimensions', () => {
for (const { file, css } of styles) cssRoot(css).walkRules(rule => {
expect(rule.selector.trim(), file + ': empty selector').not.toBe('')
expect(rule.selector, file).not.toMatch(/customer-action-button|order-action-button|\.density-action|\.density-tab-icon/)
let desktop = true
for (let parent: typeof rule.parent | ReturnType<typeof cssRoot>['parent'] = rule.parent; parent; parent = parent.parent) {