update sku tags

src/components/ProductSelector.vue

@@ -7,7 +7,27 @@
 		arrow
 		@click="open"
 	>
-		<span class="picker-text" v-text="selectedText || props.placeholder" />
+		<span class="picker-text" v-text="selectedProductName || props.placeholder" />
+		<template #help>
+			<div v-if="selectedSku" class="selected-tags">
+				<t-tag
+					v-for="entry in selectedSkuSpecEntries"
+					:key="`${entry.specName}-${entry.valueName}`"
+					size="small"
+					theme="primary"
+					variant="light-outline"
+					:content="entry.valueName"
+				/>
+				<t-tag
+					v-if="!selectedSkuSpecEntries.length"
+					size="small"
+					theme="primary"
+					variant="light-outline"
+					:content="selectedSku.specSummary || selectedSku.name || '默认 SKU'"
+				/>
+				<t-tag v-if="selectedUnit?.name" size="small" :content="selectedUnit.name" />
+			</div>
+		</template>
 	</t-form-item>
 	<bottom-popup
 		v-model="visible"
@@ -106,7 +126,7 @@ import ProductAPI from "@/api/ProductAPI";
 import type { Product, ProductSku, ProductSkuUnit, ProductSpec, ProductSpecValue } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
 import { Message } from "@/utils/message";
-import { formatProductAmount, getProductPhotoURL, getProductSkuText } from "@/utils/product";
+import { formatProductAmount, getProductPhotoURL, getProductSkuSpecEntries } from "@/utils/product";
 
 interface Props {
 	modelValue: { skuId: string; skuUnitId: string } | undefined;
@@ -126,15 +146,16 @@ const activeProduct = ref<Product>();
 const expandedProductKeyList = ref<Array<string | number>>([]);
 const selectedSpecValueMap = reactive<Record<string, string>>({});
 
-const selectedText = computed(() => {
+const selectedProduct = computed(() => {
 	if (!props.modelValue?.skuId) {
-		return "";
+		return undefined;
 	}
-	const product = props.selectedProduct || productList.value.find(item => item.skuList?.some(sku => sku.id === props.modelValue?.skuId));
+	return props.selectedProduct || productList.value.find(item => item.skuList?.some(sku => sku.id === props.modelValue?.skuId));
-	const sku = product?.skuList?.find(item => item.id === props.modelValue?.skuId);
-	const unit = sku?.unitList?.find(item => item.id === props.modelValue?.skuUnitId);
-	return `${getProductSkuText(product?.name, sku)}${unit?.name ? ` · ${unit.name}` : ""}`;
 });
+const selectedSku = computed(() => selectedProduct.value?.skuList?.find(item => item.id === props.modelValue?.skuId));
+const selectedUnit = computed(() => selectedSku.value?.unitList?.find(item => item.id === props.modelValue?.skuUnitId));
+const selectedProductName = computed(() => selectedProduct.value?.name || "");
+const selectedSkuSpecEntries = computed(() => getProductSkuSpecEntries(selectedSku.value || { specValueIdList: [] }, selectedProduct.value?.specList || []));
 const filteredProductList = computed(() => {
 	const text = keyword.value.toLocaleLowerCase();
 	return productList.value.filter(item => !text || `${item.name}${item.code}`.toLocaleLowerCase().includes(text));
@@ -231,6 +252,13 @@ function selectUnit(sku: ProductSku, skuUnitId: string): void {
 	.picker-text {
 		color: var(--td-text-color-primary);
 	}
+
+	.selected-tags {
+		gap: .375rem;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+	}
 }
 
 .popup {

src/components/ProductSkuSnapshotTags.vue

@@ -0,0 +1,47 @@
+<template>
+	<div v-if="tagList.length || unitText" class="tags">
+		<t-tag
+			v-for="tag in tagList"
+			:key="tag.key"
+			size="small"
+			theme="primary"
+			variant="light-outline"
+			:content="tag.content"
+		/>
+		<t-tag v-if="unitText" size="small" :content="unitText" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { ProductSkuSpecSnapshot } from "@/types/Product";
+
+defineOptions({ name: "ProductSkuSnapshotTags" });
+
+interface Props {
+	snapshot?: ProductSkuSpecSnapshot[];
+	fallback?: string;
+	unit?: string | null;
+}
+
+const props = defineProps<Props>();
+
+const tagList = computed(() => {
+	const result = (props.snapshot || []).flatMap((item, index) => {
+		const content = item.specValueName?.trim() || item.specName?.trim();
+		return content ? [{ key: `${item.specId || "spec"}-${item.specValueId || index}`, content }] : [];
+	});
+	if (result.length || !props.fallback?.trim()) {
+		return result;
+	}
+	return [{ key: "fallback", content: props.fallback.trim() }];
+});
+const unitText = computed(() => props.unit?.trim() || "");
+</script>
+
+<style scoped lang="less">
+.tags {
+	gap: .375rem;
+	display: flex;
+	flex-wrap: wrap;
+}
+</style>

src/layout/MainLayout.vue

@@ -35,7 +35,7 @@
 import AppNavBar from "@/components/navbar/index.vue";
 import PageTransition from "@/components/PageTransition.vue";
 import { useTabBarStore } from "@/store/tabBarStore";
-import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
+import { permissionCodes } from "@/utils/permission";
 import { useUserStore } from "timi-web-api";
 
 const route = useRoute();
@@ -71,7 +71,22 @@ const tabList: TabItem[] = [
 		text: "客户",
 		permission: [permissionCodes.customer.create, permissionCodes.eventRecord.create]
 	},
-	{ value: "/product", icon: "layers", text: "产品", role: gaoRoleCodes.storeManager },
+	{
+		value: "/product",
+		icon: "layers",
+		text: "产品",
+		permission: [
+			permissionCodes.productCategory.read,
+			permissionCodes.product.read,
+			permissionCodes.productStock.read,
+			permissionCodes.salesOrder.read,
+			permissionCodes.fundRecord.read,
+			permissionCodes.orderFulfillment.read,
+			permissionCodes.packageConfig.read,
+			permissionCodes.stat.read
+		],
+		permissionMode: "or"
+	},
 	{ value: "/store", icon: "shop-3", text: "门店", permission: permissionCodes.stat.read },
 	{ value: "/management", icon: "setting-1", text: "管理" }
 ];

src/pages/fulfillment/OrderFulfillmentCreate.vue

@@ -24,8 +24,27 @@
 					</div>
 					<div class="main">
 						<div class="title">
-							<strong v-text="getItemTitle(item)" />
+							<div class="heading">
-							<span v-text="getItemDescription(item)" />
+								<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)}`;
+	return `剩余 ${getAvailableQuantity(item)}`;
-}
-
-function getItemTitle(item: GaoSalesOrderItem): string {
-	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
-	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""}`;
 }
 
 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 {

src/pages/fulfillment/OrderFulfillmentDetail.vue

@@ -30,10 +30,19 @@
 					class="item"
 					v-for="item in fulfillment.itemList || []"
 					:key="item.id"
-					:title="getItemTitle(item)"
+					:title="item.productNameSnapshot || '未命名产品'"
-					:description="`${item.quantity} ${item.unitSnapshot}`"
 					:note="`待履约 ${item.reservedBefore || 0} → ${item.reservedAfter || 0}`"
 				>
+					<template #description>
+						<div class="item-description">
+							<product-sku-snapshot-tags
+								:snapshot="item.skuSpecSnapshot"
+								:fallback="item.skuNameSnapshot || item.specSummarySnapshot || '默认 SKU'"
+								:unit="item.unitSnapshot"
+							/>
+							<span v-text="`履约数量 ${item.quantity || 0}`" />
+						</div>
+					</template>
 					<template #leftIcon>
 						<t-image
 							v-if="getProductPhotoURL(item)"
@@ -121,6 +130,7 @@ import { useUserStore } from "timi-web-api";
 import FulfillmentAPI from "@/api/FulfillmentAPI";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import PhotoScroller from "@/components/PhotoScroller.vue";
+import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { OrderFulfillment } from "@/types/Fulfillment";
 import type { GaoSalesOrderItemType, SalesOrder } from "@/types/SalesOrder";
@@ -175,10 +185,6 @@ const sourceItemType = computed<GaoSalesOrderItemType | undefined>(() => {
 	return order.value?.itemList?.find(item => item.id === sourceOrderItemId)?.itemType;
 });
 
-function getItemTitle(item: NonNullable<OrderFulfillment["itemList"]>[number]): string {
-	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
-	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""}`;
-}
 async function loadData(): Promise<void> {
 	const id = String(route.params.id || "");
 	if (!id) return;
@@ -318,6 +324,13 @@ onUnmounted(() => navBarStore.clearRight());
 		.item {
 			padding: 10px;
 
+			.item-description {
+				gap: .375rem;
+				display: flex;
+				flex-wrap: wrap;
+				align-items: center;
+			}
+
 			.avatar {
 				width: 3.5rem;
 				height: 3.5rem;

src/pages/fulfillment/components/OrderFulfillmentListCell.vue

@@ -29,13 +29,21 @@
 		<t-divider />
 		<div class="product">
 			<div class="items">
-				<t-tag
+				<div
 					v-for="(item, index) in itemList"
 					:key="item.id || `${item.skuId}-${item.skuUnitId}-${index}`"
-					:content="getProductText(item)"
+					class="item"
-					theme="primary"
+				>
-					variant="light"
+					<div class="item-title">
-				/>
+						<strong v-text="item.productNameSnapshot || '未命名产品'" />
+						<span v-text="`× ${getPackageQuantityText(item.quantity)}`" />
+					</div>
+					<product-sku-snapshot-tags
+						:snapshot="item.skuSpecSnapshot"
+						:fallback="item.skuNameSnapshot || item.specSummarySnapshot || '默认 SKU'"
+						:unit="item.unitSnapshot"
+					/>
+				</div>
 				<t-tag v-if="!itemList.length" content="暂无产品" />
 			</div>
 		</div>
@@ -64,7 +72,8 @@
 
 <script setup lang="ts">
 import { PassTimeLabel } from "timi-web";
-import type { OrderFulfillment, OrderFulfillmentItem } from "@/types/Fulfillment";
+import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
+import type { OrderFulfillment } from "@/types/Fulfillment";
 import { getCustomerPhotoURL } from "@/utils/customer";
 import { getPackageQuantityText } from "@/utils/package";
 import { getFulfillmentStatusText, getStatusTheme } from "@/utils/salesOrder";
@@ -99,14 +108,6 @@ const totalProductQuantity = computed(() => {
 });
 const productSummaryText = computed(() => `共 ${itemList.value.length} 项 · 总数量 ${totalProductQuantity.value}`);
 
-function getProductText(item: OrderFulfillmentItem): string {
-	const productName = item.productNameSnapshot || "未命名产品";
-	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
-	const quantity = getPackageQuantityText(item.quantity);
-	const unit = item.unitSnapshot ? ` ${item.unitSnapshot}` : "";
-	return `${productName}${skuText ? ` · ${skuText}` : ""} × ${quantity}${unit}`;
-}
-
 function getUserName(user: OrderFulfillment["operator"], userId: string | undefined, fallback: string): string {
 	return user?.nick || user?.name || userId || fallback;
 }
@@ -178,6 +179,34 @@ 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;
 			}

src/pages/product/ProductStockRecordDetail.vue

@@ -5,7 +5,12 @@
 			<section class="snapshot-head" v-entrance-transition>
 				<div class="eyebrow">库存 SKU 快照</div>
 				<h2 v-text="record.productNameSnapshot || '未命名产品'" />
-				<div class="sku" v-text="record.skuNameSnapshot || record.specSummarySnapshot || '默认 SKU'" />
+				<product-sku-snapshot-tags
+					class="sku"
+					:snapshot="record.skuSpecSnapshot"
+					:fallback="record.skuNameSnapshot || record.specSummarySnapshot || '默认 SKU'"
+					:unit="record.unitSnapshot"
+				/>
 				<div class="meta">
 					<span v-text="record.skuCodeSnapshot || '无 SKU 编码'" />
 					<t-tag size="small" variant="light-outline" :theme="getOperationTheme(record.onHandDelta)" :content="getStockOperationText(record.operationType)" />
@@ -132,6 +137,7 @@ import { PassTimeLabel } from "timi-web";
 import { useUserStore, type Attachment } from "timi-web-api";
 import ProductAPI from "@/api/ProductAPI";
 import PhotoScroller from "@/components/PhotoScroller.vue";
+import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { PhotoItem } from "@/types/Photo";
 import type { StockBizType, StockRecord } from "@/types/Product";

src/pages/product/ProductStockRecordList.vue

@@ -54,7 +54,12 @@
 				    </template>
 					<template #description>
 						<div class="description">
-							<span v-text="getRecordTitle(record)" />
+							<strong v-text="record.productNameSnapshot || '未命名产品'" />
+							<product-sku-snapshot-tags
+								:snapshot="record.skuSpecSnapshot"
+								:fallback="record.skuNameSnapshot || record.specSummarySnapshot || '默认 SKU'"
+								:unit="record.unitSnapshot"
+							/>
 							<pass-time-label :timestamp="record.occurredAt" underline />
 						</div>
 					</template>
@@ -70,6 +75,7 @@
 import { type DropdownValue } from "tdesign-mobile-vue";
 import { PassTimeLabel } from "timi-web";
 import ProductAPI from "@/api/ProductAPI";
+import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { StockOperationType, StockRecord, StockRecordDirection } from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
@@ -157,11 +163,6 @@ function getStockQuantityText(record: StockRecord): string {
 	return `${getProductQuantityText(record.quantity)}${unitText}`;
 }
 
-function getRecordTitle(record: StockRecord): string {
-	const skuText = record.skuNameSnapshot || record.specSummarySnapshot;
-	return `${record.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""}${record.unitSnapshot ? ` / ${record.unitSnapshot}` : ""}`;
-}
-
 function getDeltaText(value?: number | string): string {
   const amount = Number(value || 0);
   const text = String(value || "0").replace(/^-/, "");

src/pages/salesOrder/SalesOrderDetail.vue

@@ -96,7 +96,7 @@
 							</div>
 							<div class="main">
 								<div class="title">
-									<span class="name text-bold" v-text="getItemTitle(item)" />
+									<span class="name text-bold" v-text="item.productNameSnapshot || '未命名产品'" />
 									<t-tag
 										:content="getItemFulfillmentStatus(item).text"
 										:theme="getItemFulfillmentStatus(item).theme"
@@ -111,13 +111,17 @@
 									/>
 									<t-tag v-else size="small" content="套餐权益" />
 									<t-tag
-										v-if="item.skuCodeSnapshot || item.skuNameSnapshot || item.specSummarySnapshot"
+										v-if="item.skuCodeSnapshot"
 										size="small"
 										theme="primary"
 										variant="light"
-										:content="item.skuCodeSnapshot || item.skuNameSnapshot || item.specSummarySnapshot"
+										:content="item.skuCodeSnapshot"
+									/>
+									<product-sku-snapshot-tags
+										:snapshot="item.skuSpecSnapshot"
+										:fallback="item.skuNameSnapshot || item.specSummarySnapshot"
+										:unit="item.unitSnapshot"
 									/>
-									<t-tag size="small" theme="primary" variant="light" :content="item.unitSnapshot" />
 								</div>
 							</div>
 						</div>
@@ -216,6 +220,7 @@ import FulfillmentAPI from "@/api/FulfillmentAPI";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
 import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
 import PhotoScroller from "@/components/PhotoScroller.vue";
+import ProductSkuSnapshotTags from "@/components/ProductSkuSnapshotTags.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { GaoSalesOrderItem, GaoSalesPaymentStatus, SalesOrder } from "@/types/SalesOrder";
 import type { PhotoItem } from "@/types/Photo";
@@ -257,11 +262,6 @@ const canCancel = computed(() => !!order.value && order.value.status === "ACTIVE
 const canFulfillByPayment = computed(() => order.value?.paymentStatus === "PAID" || (order.value?.paymentStatus === "PARTIALLY_PAID" && canOperateStock.value));
 const photoURLList = computed(() => photoItems.value.map(item => item.url));
 
-function getItemTitle(item: GaoSalesOrderItem): string {
-	const skuText = item.skuNameSnapshot || item.specSummarySnapshot;
-	return `${item.productNameSnapshot || "未命名产品"}${skuText ? ` · ${skuText}` : ""}`;
-}
-
 function toPhotoItems(attachmentList?: readonly Partial<Attachment>[]): PhotoItem[] {
 	return (attachmentList || [])
 		.filter(item => !!item.id)
@@ -594,6 +594,8 @@ onUnmounted(() => navBarStore.clearRight());
 						.description {
 							gap: .5rem;
 							display: flex;
+							flex-wrap: wrap;
+							align-items: center;
 						}
 					}
 				}

src/types/Fulfillment.ts

@@ -1,5 +1,6 @@
 import type { Attachment, Model, PageResult, User } from "timi-web-api";
 import type { Customer } from "@/types/Customer";
+import type { ProductSkuSpecSnapshot, StockRecord } from "@/types/Product";
 
 export type GaoFulfillmentStatus = "WAITING_STOCK" | "PENDING" | "VERIFIED" | "REJECTED" | "CANCELLED" | "REVOKED";
 
@@ -20,6 +21,7 @@ export type OrderFulfillmentItem = {
 	skuCodeSnapshot?: string;
 	skuNameSnapshot?: string;
 	specSummarySnapshot?: string;
+	skuSpecSnapshot?: ProductSkuSpecSnapshot[];
 	unitSnapshot?: string;
 	baseQuantityPerUnitSnapshot?: number | string;
 } & Model;
@@ -42,7 +44,7 @@ export type OrderFulfillment = {
 	verifier?: Partial<User>;
 	sourceFulfillment?: OrderFulfillment;
 	itemList?: OrderFulfillmentItem[];
-	stockRecordList?: Record<string, unknown>[];
+	stockRecordList?: StockRecord[];
 	attachmentList?: Partial<Attachment>[];
 } & Model;
 

src/types/Product.ts

@@ -69,6 +69,13 @@ export type ProductSku = {
 	attachmentList?: Attachment[];
 } & Model;
 
+export type ProductSkuSpecSnapshot = {
+	specId?: string;
+	specName?: string;
+	specValueId?: string;
+	specValueName?: string;
+};
+
 export type Product = {
 	storeId?: string;
 	categoryId?: string;
@@ -143,6 +150,7 @@ export type StockRecord = {
 	skuCodeSnapshot?: string;
 	skuNameSnapshot?: string;
 	specSummarySnapshot?: string;
+	skuSpecSnapshot?: ProductSkuSpecSnapshot[];
 	unitSnapshot?: string;
 	baseQuantityPerUnitSnapshot?: number | string;
 	quantity?: number | string;

src/types/SalesOrder.ts

@@ -1,6 +1,7 @@
 import type { Attachment, Model, PageResult, User } from "timi-web-api";
 import type { Customer } from "@/types/Customer";
 import type { EventRecord } from "@/types/EventRecord";
+import type { ProductSkuSpecSnapshot } from "@/types/Product";
 
 export type GaoSalesOrderType = "PACKAGE" | "DIRECT_PRODUCT";
 export type GaoSalesOrderStatus = "ACTIVE" | "FULFILLED" | "CANCELLED";
@@ -22,6 +23,7 @@ export type GaoSalesOrderItem = {
 	skuCodeSnapshot?: string;
 	skuNameSnapshot?: string;
 	specSummarySnapshot?: string;
+	skuSpecSnapshot?: ProductSkuSpecSnapshot[];
 	unitSnapshot?: string;
 	baseQuantityPerUnitSnapshot?: number | string;
 	quantity?: number | string;