add product stock preview

src/components/ProductSelector.vue

@@ -123,7 +123,7 @@
 <script setup lang="ts">
 import { BottomPopup } from "timi-tdesign-mobile";
 import ProductAPI from "@/api/ProductAPI";
-import type { Product, ProductSku, ProductSkuUnit, ProductSpec, ProductSpecValue } from "@/types/Product";
+import type { Product, ProductSelection, ProductSku, ProductSkuUnit, ProductSpec, ProductSpecValue } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
 import { formatProductAmount, getProductPhotoURL, getProductSkuSpecEntries } from "@/utils/product";
@@ -137,7 +137,10 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), { label: "产品", requiredMark: false, placeholder: "请选择产品 SKU" });
-const emit = defineEmits<{ "update:modelValue": [value: Props["modelValue"]] }>();
+const emit = defineEmits<{
+	"update:modelValue": [value: Props["modelValue"]];
+	select: [selection: ProductSelection];
+}>();
 const visible = ref(false);
 const loading = ref(false);
 const keyword = ref("");
@@ -242,6 +245,11 @@ function selectUnit(sku: ProductSku, skuUnitId: string): void {
 	if (!sku.id || !skuUnitId) {
 		return;
 	}
+	const product = activeProduct.value;
+	const unit = sku.unitList?.find(item => item.id === skuUnitId);
+	if (product && unit) {
+		emit("select", { product, sku, unit });
+	}
 	emit("update:modelValue", { skuId: sku.id, skuUnitId });
 	close();
 }

src/components/ProductStockPreview.vue

@@ -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>