xinyouhe/art-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改 弹框表格

Browse Source
This commit is contained in:
浅念
2025-09-17 17:04:35 +08:00
parent fa764852ab
commit ec257a246d
1 changed files with 123 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/custom/OrderDetailContent.vue
+115 -64
View File
@@ -44,79 +44,84 @@
</table>
</div>
<!-- 订单详情表格 -->
<!-- 订单详情表格（ArtTable） -->
<div class="table-section">
<div class="table-wrapper">
<table class="order-table">
<thead>
<tr>
<th class="col-no">编号</th>
<th class="col-model">车型</th>
<th class="col-qty">数量/台</th>
<th class="col-color">颜色/外</th>
<th class="col-interior">内饰</th>
<th class="col-modify">改装</th>
<th class="col-official">官方指导价/二手挂牌价</th>
<th class="col-discount">优惠</th>
<th class="col-discount">手续费</th>
<th class="col-discount">改装费</th>
<th class="col-discount">FOB运费</th>
<th class="col-discount">港杂费</th>
<th class="col-discount">海运费</th>
<th class="col-discount">单价</th>
<th class="col-discount">总价</th>
<th class="col-discount">利润</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in (orderData.veh_list || orderData.items || [])" :key="index">
<td class="col-no">{{ index + 1 }}</td>
<td class="col-model">{{ item.model_snapshot || item.model || '—' }} <span v-if="item.mileage>0">({{ item.mileage }}km)</span> </td>
<td class="col-qty">{{ item.num ?? item.quantity ?? 1 }}</td>
<td class="col-color">{{ item.color_exterior_snapshot || item.exteriorColor || '—' }}</td>
<td class="col-interior">{{ item.color_interior_snapshot || item.interiorColor || '—' }}</td>
<td class="col-modify">{{ item.modify || item.modification || '—' }}</td>
<!-- <td class="col-official">{{ formatPrice(Number(item.official_price?.amount ?? item.officialPrice ?? 0)) }}</td> -->
<td class="col-official">
<span v-if="item.mileage > 0">
{{ item.listing_price?.currency_info || item.listing_price?.amount || item.discount || '—' }}
<ArtTable :data="vehItems" border :pagination="false">
<template #default>
<ElTableColumn label="编号" width="60" align="center">
<template #default="scope">{{ scope.$index + 1 }}</template>
</ElTableColumn>
<ElTableColumn label="车型" min-width="160">
<template #default="scope">
{{ scope.row.model_snapshot || scope.row.model || '—' }}
<span v-if="scope.row.mileage > 0">({{ scope.row.mileage }}km)</span>
</template>
</ElTableColumn>
<ElTableColumn label="数量/台" width="90" align="center">
<template #default="scope">{{ scope.row.num ?? scope.row.quantity ?? 1 }}</template>
</ElTableColumn>
<ElTableColumn label="颜色/外" align="center" prop="color_exterior_snapshot" />
<ElTableColumn label="内饰" min-width="120" align="center" prop="color_interior_snapshot" />
<ElTableColumn label="改装" min-width="120" align="center" prop="modify" />
<ElTableColumn label="官方指导价/二手挂牌价" min-width="175" align="center">
<template #default="scope">
<span v-if="scope.row.mileage > 0">
{{ scope.row.listing_price?.currency_info || scope.row.listing_price?.amount || scope.row.discount || '—' }}
</span>
<span v-else>{{ item.official_price?.currency_info || item.official_price?.amount || item.discount || '—' }}</span>
</td>
<td class="col-discount">
<span v-if="item.mileage > 0">
{{ item.reduction_price?.currency_info || item.reduction_price?.amount || item.discount || '—' }}
<span v-else>
{{ scope.row.official_price?.currency_info || scope.row.official_price?.amount || scope.row.discount || '—' }}
</span>
<span v-else>{{ item.discount_price?.currency_info || item.discount_price?.amount || item.discount || '—' }}</span>
</td>
<td class="col-discount">{{ item.handling_fee?.currency_info || item.handling_fee?.amount || item.discount || '—' }}</td>
<td class="col-discount">{{ item.retrofit_fee?.currency_info || item.retrofit_fee?.amount || item.discount || '—' }}</td>
<td class="col-discount">{{ item.fob_transport_fee?.currency_info || item.fob_transport_fee?.amount || item.discount || '—' }}</td>
<td class="col-discount">{{ item.port_misc_fee?.currency_info || item.port_misc_fee?.amount || item.discount || '—' }}</td>
<td class="col-discount">{{ item.ocean_freight?.currency_info || item.ocean_freight?.amount || item.discount || '—' }}</td>
<!-- <td class="col-discount">${{ formatPrice(Number(item.unit_price?.amount ?? item.unitPrice ?? 0)) }}</td> -->
<td class="col-discount">{{ item.unit_price?.currency_info || item.unit_price?.amount || item.discount || '—'}}</td>
<!-- <td class="col-discount">${{ formatPrice(Number(item.total_price?.amount ?? item.totalPrice ?? 0)) }}</td> -->
<td class="col-discount">{{ item.total_price?.currency_info || item.total_price?.amount || item.discount || '—' }}</td>
<td class="col-discount">{{ item.profit?.currency_info || item.profit?.amount || item.discount || '—' }}</td>
</tr>
<tr>
<td colspan="10"></td>
<td colspan="2">
</template>
</ElTableColumn>
<ElTableColumn label="优惠" min-width="120" align="center">
<template #default="scope">
<span v-if="scope.row.mileage > 0">
{{ scope.row.reduction_price?.currency_info || scope.row.reduction_price?.amount || scope.row.discount || '—' }}
</span>
<span v-else>
{{ scope.row.discount_price?.currency_info || scope.row.discount_price?.amount || scope.row.discount || '—' }}
</span>
</template>
</ElTableColumn>
<ElTableColumn label="手续费" min-width="120" align="center">
<template #default="scope">{{ scope.row.handling_fee?.currency_info || scope.row.handling_fee?.amount || scope.row.discount || '—' }}</template>
</ElTableColumn>
<ElTableColumn label="改装费" min-width="120" align="center">
<template #default="scope">{{ scope.row.retrofit_fee?.currency_info || scope.row.retrofit_fee?.amount || scope.row.discount || '—' }}</template>
</ElTableColumn>
<ElTableColumn label="FOB运费" min-width="120" align="center">
<template #default="scope">{{ scope.row.fob_transport_fee?.currency_info || scope.row.fob_transport_fee?.amount || scope.row.discount || '—' }}</template>
</ElTableColumn>
<ElTableColumn label="港杂费" min-width="120" align="center">
<template #default="scope">{{ scope.row.port_misc_fee?.currency_info || scope.row.port_misc_fee?.amount || scope.row.discount || '—' }}</template>
</ElTableColumn>
<ElTableColumn label="海运费" min-width="120" align="center">
<template #default="scope">{{ scope.row.ocean_freight?.currency_info || scope.row.ocean_freight?.amount || scope.row.discount || '—' }}</template>
</ElTableColumn>
<ElTableColumn label="单价" min-width="120" align="center">
<template #default="scope">{{ scope.row.unit_price?.currency_info || scope.row.unit_price?.amount || scope.row.discount || '—' }}</template>
</ElTableColumn>
<ElTableColumn label="总价" min-width="120" align="center">
<template #default="scope">{{ scope.row.total_price?.currency_info || scope.row.total_price?.amount || scope.row.discount || '—' }}</template>
</ElTableColumn>
<ElTableColumn fixed="right" label="利润" min-width="120" align="center">
<template #default="scope">{{ scope.row.profit?.currency_info || scope.row.profit?.amount || scope.row.discount || '—' }}</template>
</ElTableColumn>
</template>
</ArtTable>
<div class="order-summary">
<div class="summary-item">
<span class="label">合同汇率:</span>
<span class="value">{{ orderData.contract_exchange_rate || orderData.contractRate || '—' }}</span>
</td>
<td colspan="2">
</div>
<div class="summary-item">
<span class="label">合计到岸价:</span>
<span class="value">${{ formatPrice(Number(orderData.cif_total_amount?.amount ?? orderData.totalCif ?? 0)) }}</span>
</td>
<td colspan="2">
</div>
<div class="summary-item">
<span class="label">利润:</span>
<span class="value">{{ orderData.profit_total?.currency_info || orderData.profit_total?.amount || '—' }}</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
@@ -223,8 +228,13 @@
})
}
const vehItems = computed(() => {
return (props.orderData as any).veh_list || (props.orderData as any).items || []
})
return {
paymentTableData,
vehItems,
formatPrice
}
}
@@ -333,6 +343,47 @@
.payment-section {
margin: 20px 0;
}
/* 订单底部汇总样式 */
.order-summary {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-top: none;
border-radius: 0 0 4px 4px;
flex-wrap: wrap;
}
.order-summary .summary-item {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
// background: #fff;
// border: 1px solid #e5e7eb;
border-radius: 4px;
white-space: nowrap;
}
.order-summary .label {
color: #666;
}
.order-summary .value {
font-weight: 600;
color: #111;
}
/* ArtTable 表头背景色 */
.table-section :deep(.el-table__header th) {
background-color: #f5f7fa;
color: #333;
font-weight: 600;
}
.table-section :deep(.el-table__header .cell) {
padding: 12px 8px;
}
.payment-table {
width: 100%;
border-collapse: collapse;