修改 弹框表格
This commit is contained in:
浅念
@@ -44,79 +44,84 @@
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 订单详情表格 -->
|
<!-- 订单详情表格（ArtTable） -->
|
||||||
<div class="table-section">
|
<div class="table-section">
|
||||||
<div class="table-wrapper">
|
<ArtTable :data="vehItems" border :pagination="false">
|
||||||
<table class="order-table">
|
<template #default>
|
||||||
<thead>
|
<ElTableColumn label="编号" width="60" align="center">
|
||||||
<tr>
|
<template #default="scope">{{ scope.$index + 1 }}</template>
|
||||||
<th class="col-no">编号</th>
|
</ElTableColumn>
|
||||||
<th class="col-model">车型</th>
|
<ElTableColumn label="车型" min-width="160">
|
||||||
<th class="col-qty">数量/台</th>
|
<template #default="scope">
|
||||||
<th class="col-color">颜色/外</th>
|
{{ scope.row.model_snapshot || scope.row.model || '—' }}
|
||||||
<th class="col-interior">内饰</th>
|
<span v-if="scope.row.mileage > 0">({{ scope.row.mileage }}km)</span>
|
||||||
<th class="col-modify">改装</th>
|
</template>
|
||||||
<th class="col-official">官方指导价/二手挂牌价</th>
|
</ElTableColumn>
|
||||||
<th class="col-discount">优惠</th>
|
<ElTableColumn label="数量/台" width="90" align="center">
|
||||||
<th class="col-discount">手续费</th>
|
<template #default="scope">{{ scope.row.num ?? scope.row.quantity ?? 1 }}</template>
|
||||||
<th class="col-discount">改装费</th>
|
</ElTableColumn>
|
||||||
<th class="col-discount">FOB运费</th>
|
<ElTableColumn label="颜色/外" align="center" prop="color_exterior_snapshot" />
|
||||||
<th class="col-discount">港杂费</th>
|
<ElTableColumn label="内饰" min-width="120" align="center" prop="color_interior_snapshot" />
|
||||||
<th class="col-discount">海运费</th>
|
<ElTableColumn label="改装" min-width="120" align="center" prop="modify" />
|
||||||
<th class="col-discount">单价</th>
|
<ElTableColumn label="官方指导价/二手挂牌价" min-width="175" align="center">
|
||||||
<th class="col-discount">总价</th>
|
<template #default="scope">
|
||||||
<th class="col-discount">利润</th>
|
<span v-if="scope.row.mileage > 0">
|
||||||
</tr>
|
{{ scope.row.listing_price?.currency_info || scope.row.listing_price?.amount || scope.row.discount || '—' }}
|
||||||
</thead>
|
</span>
|
||||||
<tbody>
|
<span v-else>
|
||||||
<tr v-for="(item, index) in (orderData.veh_list || orderData.items || [])" :key="index">
|
{{ scope.row.official_price?.currency_info || scope.row.official_price?.amount || scope.row.discount || '—' }}
|
||||||
<td class="col-no">{{ index + 1 }}</td>
|
</span>
|
||||||
<td class="col-model">{{ item.model_snapshot || item.model || '—' }} <span v-if="item.mileage>0">({{ item.mileage }}km)</span> </td>
|
</template>
|
||||||
<td class="col-qty">{{ item.num ?? item.quantity ?? 1 }}</td>
|
</ElTableColumn>
|
||||||
<td class="col-color">{{ item.color_exterior_snapshot || item.exteriorColor || '—' }}</td>
|
<ElTableColumn label="优惠" min-width="120" align="center">
|
||||||
<td class="col-interior">{{ item.color_interior_snapshot || item.interiorColor || '—' }}</td>
|
<template #default="scope">
|
||||||
<td class="col-modify">{{ item.modify || item.modification || '—' }}</td>
|
<span v-if="scope.row.mileage > 0">
|
||||||
<!-- <td class="col-official">{{ formatPrice(Number(item.official_price?.amount ?? item.officialPrice ?? 0)) }}</td> -->
|
{{ scope.row.reduction_price?.currency_info || scope.row.reduction_price?.amount || scope.row.discount || '—' }}
|
||||||
<td class="col-official">
|
</span>
|
||||||
<span v-if="item.mileage > 0">
|
<span v-else>
|
||||||
{{ item.listing_price?.currency_info || item.listing_price?.amount || item.discount || '—' }}
|
{{ scope.row.discount_price?.currency_info || scope.row.discount_price?.amount || scope.row.discount || '—' }}
|
||||||
</span>
|
</span>
|
||||||
<span v-else>{{ item.official_price?.currency_info || item.official_price?.amount || item.discount || '—' }}</span>
|
</template>
|
||||||
</td>
|
</ElTableColumn>
|
||||||
<td class="col-discount">
|
<ElTableColumn label="手续费" min-width="120" align="center">
|
||||||
<span v-if="item.mileage > 0">
|
<template #default="scope">{{ scope.row.handling_fee?.currency_info || scope.row.handling_fee?.amount || scope.row.discount || '—' }}</template>
|
||||||
{{ item.reduction_price?.currency_info || item.reduction_price?.amount || item.discount || '—' }}
|
</ElTableColumn>
|
||||||
</span>
|
<ElTableColumn label="改装费" min-width="120" align="center">
|
||||||
<span v-else>{{ item.discount_price?.currency_info || item.discount_price?.amount || item.discount || '—' }}</span>
|
<template #default="scope">{{ scope.row.retrofit_fee?.currency_info || scope.row.retrofit_fee?.amount || scope.row.discount || '—' }}</template>
|
||||||
</td>
|
</ElTableColumn>
|
||||||
<td class="col-discount">{{ item.handling_fee?.currency_info || item.handling_fee?.amount || item.discount || '—' }}</td>
|
<ElTableColumn label="FOB运费" min-width="120" align="center">
|
||||||
<td class="col-discount">{{ item.retrofit_fee?.currency_info || item.retrofit_fee?.amount || item.discount || '—' }}</td>
|
<template #default="scope">{{ scope.row.fob_transport_fee?.currency_info || scope.row.fob_transport_fee?.amount || scope.row.discount || '—' }}</template>
|
||||||
<td class="col-discount">{{ item.fob_transport_fee?.currency_info || item.fob_transport_fee?.amount || item.discount || '—' }}</td>
|
</ElTableColumn>
|
||||||
<td class="col-discount">{{ item.port_misc_fee?.currency_info || item.port_misc_fee?.amount || item.discount || '—' }}</td>
|
<ElTableColumn label="港杂费" min-width="120" align="center">
|
||||||
<td class="col-discount">{{ item.ocean_freight?.currency_info || item.ocean_freight?.amount || item.discount || '—' }}</td>
|
<template #default="scope">{{ scope.row.port_misc_fee?.currency_info || scope.row.port_misc_fee?.amount || scope.row.discount || '—' }}</template>
|
||||||
<!-- <td class="col-discount">${{ formatPrice(Number(item.unit_price?.amount ?? item.unitPrice ?? 0)) }}</td> -->
|
</ElTableColumn>
|
||||||
<td class="col-discount">{{ item.unit_price?.currency_info || item.unit_price?.amount || item.discount || '—'}}</td>
|
<ElTableColumn label="海运费" min-width="120" align="center">
|
||||||
<!-- <td class="col-discount">${{ formatPrice(Number(item.total_price?.amount ?? item.totalPrice ?? 0)) }}</td> -->
|
<template #default="scope">{{ scope.row.ocean_freight?.currency_info || scope.row.ocean_freight?.amount || scope.row.discount || '—' }}</template>
|
||||||
<td class="col-discount">{{ item.total_price?.currency_info || item.total_price?.amount || item.discount || '—' }}</td>
|
</ElTableColumn>
|
||||||
<td class="col-discount">{{ item.profit?.currency_info || item.profit?.amount || item.discount || '—' }}</td>
|
<ElTableColumn label="单价" min-width="120" align="center">
|
||||||
</tr>
|
<template #default="scope">{{ scope.row.unit_price?.currency_info || scope.row.unit_price?.amount || scope.row.discount || '—' }}</template>
|
||||||
<tr>
|
</ElTableColumn>
|
||||||
<td colspan="10"></td>
|
<ElTableColumn label="总价" min-width="120" align="center">
|
||||||
<td colspan="2">
|
<template #default="scope">{{ scope.row.total_price?.currency_info || scope.row.total_price?.amount || scope.row.discount || '—' }}</template>
|
||||||
<span class="label">合同汇率:</span>
|
</ElTableColumn>
|
||||||
<span class="value">{{ orderData.contract_exchange_rate || orderData.contractRate || '—' }}</span>
|
<ElTableColumn fixed="right" label="利润" min-width="120" align="center">
|
||||||
</td>
|
<template #default="scope">{{ scope.row.profit?.currency_info || scope.row.profit?.amount || scope.row.discount || '—' }}</template>
|
||||||
<td colspan="2">
|
</ElTableColumn>
|
||||||
<span class="label">合计到岸价:</span>
|
</template>
|
||||||
<span class="value">${{ formatPrice(Number(orderData.cif_total_amount?.amount ?? orderData.totalCif ?? 0)) }}</span>
|
</ArtTable>
|
||||||
</td>
|
<div class="order-summary">
|
||||||
<td colspan="2">
|
<div class="summary-item">
|
||||||
<span class="label">利润:</span>
|
<span class="label">合同汇率:</span>
|
||||||
<span class="value">{{ orderData.profit_total?.currency_info || orderData.profit_total?.amount || '—' }}</span>
|
<span class="value">{{ orderData.contract_exchange_rate || orderData.contractRate || '—' }}</span>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
<div class="summary-item">
|
||||||
</tbody>
|
<span class="label">合计到岸价:</span>
|
||||||
</table>
|
<span class="value">${{ formatPrice(Number(orderData.cif_total_amount?.amount ?? orderData.totalCif ?? 0)) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="summary-item">
|
||||||
|
<span class="label">利润:</span>
|
||||||
|
<span class="value">{{ orderData.profit_total?.currency_info || orderData.profit_total?.amount || '—' }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -223,8 +228,13 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const vehItems = computed(() => {
|
||||||
|
return (props.orderData as any).veh_list || (props.orderData as any).items || []
|
||||||
|
})
|
||||||
|
|
||||||
return {
|
return {
|
||||||
paymentTableData,
|
paymentTableData,
|
||||||
|
vehItems,
|
||||||
formatPrice
|
formatPrice
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -333,6 +343,47 @@
|
|||||||
.payment-section {
|
.payment-section {
|
||||||
margin: 20px 0;
|
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 {
|
.payment-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
|||||||
Reference in New Issue
Block a user