t-tag product for OrderFulfillmentListCell.vue

src/pages/fulfillment/components/OrderFulfillmentListCell.vue

@@ -29,22 +29,13 @@
 		<t-divider />
 		<div class="product">
 			<div class="items">
-				<div
+				<t-tag
 					v-for="(item, index) in itemList"
 					:key="item.id || `${item.skuId}-${item.skuUnitId}-${index}`"
-					class="item"
+					:content="getProductText(item)"
-				>
+					theme="primary"
-					<div class="item-title">
+					variant="light"
-						<strong v-text="item.productNameSnapshot || '未命名产品'" />
-						<span v-text="`× ${getPackageQuantityText(item.quantity)}`" />
-					</div>
-					<product-sku-snapshot-tags
-						:product-name="item.productNameSnapshot"
-						:snapshot="item.skuSpecSnapshot"
-						:fallback="item.specSummarySnapshot || item.skuNameSnapshot || '默认 SKU'"
-						:unit="item.unitSnapshot"
 				/>
-				</div>
 				<t-tag v-if="!itemList.length" content="暂无产品" />
 			</div>
 		</div>
@@ -73,10 +64,10 @@
 
 <script setup lang="ts">
 import { PassTimeLabel } from "timi-web";
-import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
+import type { OrderFulfillment, OrderFulfillmentItem } from "@/types/Fulfillment";
-import type { OrderFulfillment } from "@/types/Fulfillment";
 import { getCustomerPhotoURL } from "@/utils/customer";
 import { getPackageQuantityText } from "@/utils/package";
+import { getProductSkuSnapshotText } from "@/utils/product";
 import { getFulfillmentStatusText, getStatusTheme } from "@/utils/salesOrder";
 
 defineOptions({ name: "OrderFulfillmentListCell" });
@@ -112,6 +103,12 @@ const productSummaryText = computed(() => `共 ${itemList.value.length} 项 ·
 function getUserName(user: OrderFulfillment["operator"], userId: string | undefined, fallback: string): string {
 	return user?.nick || user?.name || userId || fallback;
 }
+
+function getProductText(item: OrderFulfillmentItem): string {
+	const quantity = getPackageQuantityText(item.quantity);
+	const skuText = getProductSkuSnapshotText(item.productNameSnapshot, item.skuNameSnapshot, item.specSummarySnapshot);
+	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""} × ${quantity}${item.unitSnapshot ? ` ${item.unitSnapshot}` : ""}`;
+}
 </script>
 
 <style scoped lang="less">
@@ -166,6 +163,7 @@ function getUserName(user: OrderFulfillment["operator"], userId: string | undefi
 	.product {
 		gap: .5rem;
 		display: flex;
+		min-width: 0;
 		align-items: flex-start;
 
 		.items {
@@ -180,34 +178,6 @@ function getUserName(user: OrderFulfillment["operator"], userId: string | undefi
 			scrollbar-width: none;
 			-webkit-overflow-scrolling: touch;
 
-			.item {
-				gap: .375rem;
-				display: flex;
-				min-width: 9rem;
-				flex: 0 0 auto;
-				flex-direction: column;
-				white-space: normal;
-
-				.item-title {
-					gap: .375rem;
-					display: flex;
-					align-items: baseline;
-
-					strong {
-						max-width: 9rem;
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-					}
-
-					span {
-						color: var(--td-text-color-secondary);
-						font-size: .75rem;
-						white-space: nowrap;
-					}
-				}
-			}
-
 			:deep(.t-tag) {
 				flex: 0 0 auto;
 			}