yml/order_site
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

优化订单列表ui, 增加任务关闭

Browse Source
This commit is contained in:
yml2213
2026-05-26 13:34:12 +08:00
parent 4cd9e6d5b6
commit fb89110ff1
4 changed files with 162 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/views/admin/orders/AdminOrdersView.vue
+69 -86
View File
@@ -84,11 +84,6 @@ function resolveItemSummary(item: AdminOrderListItem) {
return item.itemSummary || "未识别商品";
}
function resolveBindingTone(completedCount: number, totalCount: number) {
if (completedCount <= 0) return "warning";
return completedCount === totalCount ? "success" : "primary";
}
function resolveBindingSummary(item: AdminOrderListItem) {
return `共 ${item.totalBindingCount} 条 · 预占 ${item.reservedBindingCount} · 已消耗 ${item.consumedBindingCount} · 已释放 ${item.releasedBindingCount}`;
}
@@ -297,53 +292,31 @@ onMounted(() => {
</div>
</template>
</el-table-column>
<el-table-column label="交付状态" min-width="230">
<el-table-column label="交付状态" min-width="260">
<template #default="{ row }">
<div class="delivery-status-panel">
<div class="delivery-status-grid">
<div class="status-line">
<span class="status-label">系统</span>
<AdminStatusTag
:status="row.systemBindingStatus"
:show-raw="false"
/>
</div>
<div class="status-line">
<span class="status-label">完整</span>
<AdminStatusTag
:status="row.userBindingStatus"
:show-raw="false"
/>
</div>
</div>
<span
class="follow-up-chip"
:data-tone="resolveFollowUpTone(row)"
>{{ resolveFollowUpText(row) }}</span
>
<div class="progress-row-stack">
<span
class="progress-chip"
:data-tone="
resolveBindingTone(
row.completedBindingTaskCount,
row.taskCount
)
"
>
完整 <strong>{{ row.completedBindingTaskCount }}/{{ row.taskCount }}</strong>
</span>
<span
class="progress-chip"
:data-tone="
resolveBindingTone(
row.systemBoundTaskCount,
row.taskCount
)
"
>
系统 <strong>{{ row.systemBoundTaskCount }}/{{ row.taskCount }}</strong>
</span>
<div class="delivery-track-list">
<div class="delivery-track">
<span class="delivery-track-label">完整绑定</span>
<strong>{{ row.completedBindingTaskCount }}/{{ row.taskCount }}</strong>
<AdminStatusTag
:status="row.userBindingStatus"
:show-raw="false"
/>
</div>
<div class="delivery-track">
<span class="delivery-track-label">系统绑定</span>
<strong>{{ row.systemBoundTaskCount }}/{{ row.taskCount }}</strong>
<AdminStatusTag
:status="row.systemBindingStatus"
:show-raw="false"
/>
</div>
</div>
</div>
</template>
@@ -438,12 +411,6 @@ onMounted(() => {
align-content: start;
}
.delivery-status-grid {
display: grid;
grid-template-columns: repeat(2, minmax(112px, 1fr));
gap: var(--space-2);
}
.status-line {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
@@ -483,54 +450,70 @@ onMounted(() => {
white-space: nowrap;
}
.progress-row-stack {
.delivery-track-list {
display: grid;
grid-template-columns: repeat(2, minmax(112px, 1fr));
gap: 6px;
}
.delivery-track {
display: grid;
grid-template-columns: 64px 42px minmax(0, 1fr);
gap: var(--space-2);
margin-top: 2px;
align-items: center;
min-height: 28px;
min-width: 0;
padding: 3px 6px;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-subtle);
}
.delivery-track-label {
color: var(--text-secondary);
font-size: var(--text-xs);
font-weight: 700;
white-space: nowrap;
}
.delivery-track strong {
color: var(--text-primary);
font-size: var(--text-xs);
font-weight: 800;
text-align: center;
}
.delivery-track :deep(.el-tag),
.delivery-track :deep(.el-tag__content) {
width: 100%;
min-width: 0;
}
.delivery-track :deep(.el-tag) {
justify-content: center;
background: var(--bg-card);
}
.delivery-track :deep(.el-tag__content) {
display: block;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.progress-chip,
.follow-up-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 26px;
width: 100%;
min-height: 30px;
padding: 0 9px;
border-radius: var(--radius-full);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: 700;
font-weight: 800;
border: 1px solid transparent;
white-space: nowrap;
}
.progress-chip {
gap: 4px;
}
.follow-up-chip {
width: 100%;
}
.progress-chip strong {
color: inherit;
font-weight: 800;
}
.progress-chip[data-tone="success"] {
color: #0f766e;
background: var(--color-success-light);
border-color: #a6f4c5;
}
.progress-chip[data-tone="primary"] {
color: var(--color-primary-dark);
background: var(--color-primary-light);
border-color: #b2ddff;
}
.progress-chip[data-tone="warning"] {
color: #b54708;
background: var(--color-warning-light);
border-color: #fedf89;
}
.follow-up-chip[data-tone="success"] {
color: #0f766e;
background: var(--color-success-light);