add product stock preview

2026-09-16 14:53:36 +08:00
parent 443d0a6190
commit f8a9c0e649
12 changed files with 456 additions and 86 deletions
@@ -0,0 +1,81 @@
+<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>