82 lines
1.8 KiB
Vue
82 lines
1.8 KiB
Vue
<template>
|
||
<t-table
|
||
class="product-stock-preview"
|
||
:columns="columns"
|
||
:data="items"
|
||
row-key="skuId"
|
||
table-layout="fixed"
|
||
vertical-align="middle"
|
||
>
|
||
<template #product="{ row }">
|
||
<span class="product clip-text" v-text="row.productName || '未命名产品'" />
|
||
</template>
|
||
<template #required="{ row }">
|
||
<span v-text="row.baseQuantity" />
|
||
</template>
|
||
<template #available="{ row }">
|
||
<span v-text="row.availableQuantity" />
|
||
</template>
|
||
<template #check="{ row }">
|
||
<strong :class="row.shortageQuantity ? 'shortage' : 'sufficient'" v-text="row.shortageQuantity ? '缺少' : '充足'" />
|
||
</template>
|
||
<template #footerSummary>
|
||
<div class="orange tips">仅供参考，以实际提交为准</div>
|
||
</template>
|
||
</t-table>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import type { ProductStockPreviewItem } from "@/utils/productStock";
|
||
|
||
defineOptions({
|
||
name: "ProductStockPreview"
|
||
});
|
||
|
||
defineProps<{
|
||
items: ProductStockPreviewItem[];
|
||
}>();
|
||
|
||
const columns = [
|
||
{ colKey: "product", title: "产品", width: "40%", ellipsis: true },
|
||
{ colKey: "required", title: "需求", width: "20%", align: "right", cell: "required" },
|
||
{ colKey: "available", title: "可用", width: "20%", align: "right", cell: "available" },
|
||
{ colKey: "check", title: "校验", width: "20%", align: "center", cell: "check" }
|
||
];
|
||
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.product-stock-preview {
|
||
--td-component-border: transparent;
|
||
|
||
.product {
|
||
min-width: 0;
|
||
display: block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sufficient {
|
||
color: var(--td-success-color);
|
||
}
|
||
|
||
.shortage {
|
||
color: var(--td-error-color);
|
||
}
|
||
|
||
:deep(.t-table__content) {
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
:deep(th),
|
||
:deep(td) {
|
||
padding: .25rem .375rem;
|
||
}
|
||
|
||
.tips {
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|