<template>
|
<div class="shipment-table-container">
|
<el-table
|
:data="list"
|
v-loading="loading"
|
size="small"
|
border
|
class="custom-table"
|
:height="tableHeight"
|
>
|
<el-table-column label="合同号" prop="salesContractNo" width="160" show-overflow-tooltip>
|
<template #default="{ row }">
|
<span class="contract-no">{{ row.salesContractNo || '--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="发货单号" prop="shippingNo" width="160" show-overflow-tooltip>
|
<template #default="{ row }">
|
<span class="shipping-no">{{ row.shippingNo || '--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="产品名称" prop="productName" min-width="160" show-overflow-tooltip />
|
<el-table-column label="规格型号" prop="model" width="140" show-overflow-tooltip>
|
<template #default="{ row }">
|
<span class="model-text">{{ row.model || '--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="发货数量" prop="shippingQuantity" align="right" width="100">
|
<template #default="{ row }">
|
<span class="quantity">{{ formatNumber(row.shippingQuantity) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="发货金额" prop="shippingAmount" align="right" width="130">
|
<template #default="{ row }">
|
<span class="amount">¥{{ formatMoney(row.shippingAmount) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="出库批号" prop="batchNo" width="160" show-overflow-tooltip>
|
<template #default="{ row }">
|
<span class="batch-no">{{ row.batchNo || '--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="发货日期" prop="shippingDate" width="120" align="center">
|
<template #default="{ row }">
|
<span class="date-text">{{ row.shippingDate || '--' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="审批状态" prop="approvalStatus" width="100" align="center">
|
<template #default="{ row }">
|
<el-tag
|
:type="row.approvalStatus === 1 ? 'success' : 'warning'"
|
size="small"
|
effect="light"
|
round
|
>
|
{{ row.approvalStatus === 1 ? '已审' : '待审' }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="pagination-wrapper">
|
<pagination
|
v-show="total > 0"
|
:total="total"
|
:page="queryParams.pageNum"
|
:limit="queryParams.pageSize"
|
@pagination="handlePagination"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, watch, computed } from 'vue'
|
import { customerTransactionsShipments } from '@/api/salesManagement/indicatorStats.js'
|
import Pagination from '@/components/PIMTable/Pagination.vue'
|
|
const props = defineProps({
|
customerId: {
|
type: [Number, String],
|
required: true
|
}
|
})
|
|
const loading = ref(false)
|
const list = ref([])
|
const total = ref(0)
|
const queryParams = ref({
|
pageNum: 1,
|
pageSize: 10,
|
customerId: null
|
})
|
|
const tableHeight = computed(() => `calc(100vh - 32em)`)
|
|
const getList = () => {
|
loading.value = true
|
queryParams.value.customerId = props.customerId
|
customerTransactionsShipments(queryParams.value)
|
.then(res => {
|
if (res.code === 200) {
|
list.value = res.data?.records || []
|
total.value = res.data?.total || 0
|
}
|
})
|
.finally(() => {
|
loading.value = false
|
})
|
}
|
|
const handlePagination = ({ page, limit }) => {
|
queryParams.value.pageNum = page
|
queryParams.value.pageSize = limit
|
getList()
|
}
|
|
const formatMoney = (value) => {
|
if (!value) return '0.00'
|
return Number(value).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
}
|
|
const formatNumber = (value) => {
|
if (!value) return '0'
|
return Number(value).toLocaleString('zh-CN')
|
}
|
|
watch(() => props.customerId, (val) => {
|
if (val) {
|
queryParams.value.pageNum = 1
|
getList()
|
}
|
}, { immediate: true })
|
</script>
|
|
<style scoped lang="scss">
|
.shipment-table-container {
|
.custom-table {
|
border-radius: 8px;
|
overflow: hidden;
|
|
:deep(.el-table__header-wrapper) {
|
th {
|
background: #f8f9fb !important;
|
font-weight: 600;
|
color: #303133;
|
}
|
}
|
|
:deep(.el-table__row) {
|
transition: all 0.2s;
|
|
&:hover > td {
|
background: #f5f7fa !important;
|
}
|
}
|
|
.contract-no {
|
color: #409eff;
|
font-weight: 500;
|
}
|
|
.shipping-no {
|
color: #909399;
|
font-size: 12px;
|
}
|
|
.model-text {
|
color: #606266;
|
}
|
|
.quantity {
|
font-weight: 500;
|
color: #303133;
|
}
|
|
.amount {
|
font-weight: 600;
|
color: #67c23a;
|
}
|
|
.batch-no {
|
color: #606266;
|
font-size: 12px;
|
}
|
|
.date-text {
|
color: #606266;
|
}
|
}
|
}
|
|
.pagination-wrapper {
|
padding: 16px 0 0;
|
display: flex;
|
justify-content: flex-end;
|
}
|
</style>
|
