update sku tags

src/pages/fulfillment/OrderFulfillmentCreate.vue

@@ -24,8 +24,27 @@
 					</div>
 					<div class="main">
 						<div class="title">
-							<strong v-text="getItemTitle(item)" />
-							<span v-text="getItemDescription(item)" />
+							<div class="heading">
+								<strong v-text="item.productNameSnapshot || '未命名产品'" />
+								<span v-text="getItemDescription(item)" />
+							</div>
+							<div
+								v-if="item.skuCodeSnapshot || item.skuSpecSnapshot?.length || item.skuNameSnapshot || item.specSummarySnapshot || item.unitSnapshot"
+								class="sku-tags"
+							>
+								<t-tag
+									v-if="item.skuCodeSnapshot"
+									size="small"
+									theme="primary"
+									variant="light"
+									:content="item.skuCodeSnapshot"
+								/>
+								<product-sku-snapshot-tags
+									:snapshot="item.skuSpecSnapshot"
+									:fallback="item.skuNameSnapshot || item.specSummarySnapshot"
+									:unit="item.unitSnapshot"
+								/>
+							</div>
 						</div>
 						<div class="input">
 							<t-input
@@ -87,6 +106,7 @@
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import FulfillmentAPI from "@/api/FulfillmentAPI";
 import PhotoScroller from "@/components/PhotoScroller.vue";
+import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import { useUserStore } from "timi-web-api";
 import type { GaoOrderFulfillmentItemRequest } from "@/types/Fulfillment";
@@ -140,12 +160,7 @@ function getAvailableQuantity(item: GaoSalesOrderItem): string {
 }
 
 function getItemDescription(item: GaoSalesOrderItem): string {
-	return ` · ${item.unitSnapshot || "业务单位"} · 剩余 ${getAvailableQuantity(item)}`;
-}
-
-function getItemTitle(item: GaoSalesOrderItem): string {
-	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
-	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""}`;
+	return `剩余 ${getAvailableQuantity(item)}`;
 }
 
 function fillAllQuantity(item: GaoSalesOrderItem): void {
@@ -281,7 +296,37 @@ onUnmounted(() => navBarStore.clearRight());
 					justify-content: space-between;
 
 					.title {
+						gap: .375rem;
+						display: flex;
+						flex-direction: column;
 
+						.heading {
+							gap: .5rem;
+							display: flex;
+							min-width: 0;
+							align-items: baseline;
+							justify-content: space-between;
+
+							strong {
+								min-width: 0;
+								overflow: hidden;
+								white-space: nowrap;
+								text-overflow: ellipsis;
+							}
+
+							span {
+								color: var(--td-text-color-secondary);
+								font-size: .75rem;
+								white-space: nowrap;
+							}
+						}
+
+						.sku-tags {
+							gap: .375rem;
+							display: flex;
+							flex-wrap: wrap;
+							align-items: center;
+						}
 					}
 
 					.input {