timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add product sku info

Browse Source
This commit is contained in:
Timi
2026-09-23 00:14:01 +08:00
parent dbf0b2e299
commit 23fc2c3577
3 changed files with 221 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/product/ProductStockDetail.vue
+6 -4
View File
@@ -55,8 +55,8 @@
</div> </div>
</template> </template>
</t-cell> </t-cell>
<t-cell v-if="0 < Number(stock.reservedQuantity || 0)" title="查看预占流水" arrow @click="openReservedRecordList" /> <t-cell title="查看库存流水" arrow @click="openRecordList" />
<t-cell title="查看该产品 SKU 流水" arrow @click="openRecordList" /> <t-cell v-if="0 < Number(stock.reservedQuantity || 0)" title="查看库存预占流水" arrow @click="openReservedRecordList" />
</t-cell-group> </t-cell-group>
<card-container <card-container
v-if="canOperate && sku?.status === 'ACTIVE' && sku.stockEnabled" v-if="canOperate && sku?.status === 'ACTIVE' && sku.stockEnabled"
@@ -199,11 +199,12 @@ async function loadAll(): Promise<void> {
} }
async function openRecordList(): Promise<void> { async function openRecordList(): Promise<void> {
if (product.value?.id) { if (product.value?.id && sku.value?.id) {
await router.push({ await router.push({
name: "ProductStockRecordList", name: "ProductStockRecordList",
query: { query: {
productId: product.value.id, productId: product.value.id,
skuId: sku.value.id,
transitionDepth: String(getCurrentRouteDepth() + 1) transitionDepth: String(getCurrentRouteDepth() + 1)
} }
}); });
@@ -211,11 +212,12 @@ async function openRecordList(): Promise<void> {
} }
async function openReservedRecordList(): Promise<void> { async function openReservedRecordList(): Promise<void> {
if (product.value?.id) { if (product.value?.id && sku.value?.id) {
await router.push({ await router.push({
name: "ProductStockRecordList", name: "ProductStockRecordList",
query: { query: {
productId: product.value.id, productId: product.value.id,
skuId: sku.value.id,
operationType: "ORDER_RESERVE", operationType: "ORDER_RESERVE",
activeReservationOnly: "true", activeReservationOnly: "true",
transitionDepth: String(getCurrentRouteDepth() + 1) transitionDepth: String(getCurrentRouteDepth() + 1)
src/pages/product/ProductStockRecordList.vue
+214 -123
View File
@@ -20,70 +20,103 @@
@refresh="refresh" @refresh="refresh"
@scrolltolower="loadMore" @scrolltolower="loadMore"
> >
<t-cell-group v-if="recordList.length" class="list empty-cell-title-margin" theme="card"> <div class="list-wrap">
<t-cell <t-cell-group v-if="filteredProduct && filteredSku" theme="card">
v-for="(record, index) in recordList" <t-cell class="sku">
:key="record.id || `${record.occurredAt}-${record.requestNo}-${index}`" <template #leftIcon>
class="item" <t-image
:arrow="!!record.id" v-if="filteredSkuPhotoURL"
:hover="!!record.id" class="avatar"
v-entrance-transition="index * 30" :src="filteredSkuPhotoURL"
@click="toDetail(record)" :alt="filteredProduct.name || '产品图片'"
> fit="cover"
<template #leftIcon> />
<t-image <div
v-if="getCustomerPhotoURL(record.customer, 64)" v-else
:src="getCustomerPhotoURL(record.customer, 64)" class="fallback"
:alt="getCustomerText(record)" v-text="(filteredProduct.name || filteredProduct.code || '产').slice(0, 1)"
fit="cover" />
class="avatar" </template>
/> <template #title>
<div <div class="title">
v-else-if="record.customer" <strong class="text-bold clip-text" v-text="filteredProduct.name || '未命名产品'" />
class="avatar fallback" <span class="clip-text" v-text="filteredSku.specSummary || filteredSku.name || '默认 SKU'" />
v-text="getCustomerText(record).slice(0, 1)" </div>
/> </template>
<t-image <template #note>
v-else-if="record.operator" <t-tag
:src="getOperatorAvatar(record)" variant="light-outline"
:alt="getOperatorText(record)" theme="primary"
fit="cover" :content="getProductTypeText(filteredProduct.productType)"
class="avatar" />
/> </template>
<span v-else class="icon" :class="getDeltaClass(record.onHandDelta)"> </t-cell>
</t-cell-group>
<t-cell-group v-if="recordList.length" class="list empty-cell-title-margin" theme="card">
<t-cell
v-for="(record, index) in recordList"
:key="record.id || `${record.occurredAt}-${record.requestNo}-${index}`"
class="item"
:arrow="!!record.id"
:hover="!!record.id"
v-entrance-transition="index * 30"
@click="toDetail(record)"
>
<template #leftIcon>
<t-image
v-if="getCustomerPhotoURL(record.customer, 64)"
:src="getCustomerPhotoURL(record.customer, 64)"
:alt="getCustomerText(record)"
fit="cover"
class="avatar"
/>
<div
v-else-if="record.customer"
class="avatar fallback"
v-text="getCustomerText(record).slice(0, 1)"
/>
<t-image
v-else-if="record.operator"
:src="getOperatorAvatar(record)"
:alt="getOperatorText(record)"
fit="cover"
class="avatar"
/>
<span v-else class="icon" :class="getDeltaClass(record.onHandDelta)">
<t-icon :name="getOperationIcon(record.operationType)" size="1.25rem" /> <t-icon :name="getOperationIcon(record.operationType)" size="1.25rem" />
</span> </span>
</template> </template>
<template #title> <template #title>
<div class="title"> <div class="title">
<span v-if="record.customer" class="actor" v-text="getCustomerText(record)" /> <span v-if="record.customer" class="actor" v-text="getCustomerText(record)" />
<span v-else-if="record.operator" class="actor" v-text="getOperatorText(record)" /> <span v-else-if="record.operator" class="actor" v-text="getOperatorText(record)" />
<strong class="operation" v-text="getStockOperationText(record.operationType)" /> <strong class="operation" v-text="getStockOperationText(record.operationType)" />
<strong class="product-name" v-text="record.productNameSnapshot || '未命名产品'" /> <strong class="product-name" v-text="record.productNameSnapshot || '未命名产品'" />
<span
v-if="record.quantity !== undefined && record.quantity !== null && record.quantity !== ''"
class="quantity"
v-text="getStockQuantityText(record)"
/>
</div>
</template>
<template #description>
<div class="description">
<pass-time-label :timestamp="record.occurredAt" underline />
<div class="delta">
<span>库存：</span>
<span <span
class="value" v-if="record.quantity !== undefined && record.quantity !== null && record.quantity !== ''"
:class="getDeltaClass(record.onHandDelta)" class="quantity"
v-text="getDeltaText(record.onHandDelta)" v-text="getStockQuantityText(record)"
/> />
</div> </div>
</div> </template>
</template> <template #description>
</t-cell> <div class="description">
</t-cell-group> <pass-time-label :timestamp="record.occurredAt" underline />
<div v-else class="center-tips" v-text="emptyText" /> <div class="delta">
<div v-if="recordList.length" class="center-tips" v-text="loadStateText" /> <span>库存：</span>
<span
class="value"
:class="getDeltaClass(record.onHandDelta)"
v-text="getDeltaText(record.onHandDelta)"
/>
</div>
</div>
</template>
</t-cell>
</t-cell-group>
<div v-else class="center-tips" v-text="emptyText" />
<div v-if="recordList.length" class="center-tips" v-text="loadStateText" />
</div>
</t-pull-down-refresh> </t-pull-down-refresh>
</div> </div>
</template> </template>
@@ -94,9 +127,9 @@ import { PassTimeLabel } from "timi-web";
import { UserAPI } from "timi-web-api"; import { UserAPI } from "timi-web-api";
import ProductAPI from "@/api/ProductAPI"; import ProductAPI from "@/api/ProductAPI";
import { useNavBarStore } from "@/store/navBarStore"; import { useNavBarStore } from "@/store/navBarStore";
import type { StockOperationType, StockRecord, StockRecordDirection } from "@/types/Product"; import type { Product, ProductSku, StockOperationType, StockRecord, StockRecordDirection } from "@/types/Product";
import { getErrorMessage } from "@/utils/error"; import { getErrorMessage } from "@/utils/error";
import { getProductQuantityText, getStockOperationText } from "@/utils/product"; import { getProductPhotoURL, getProductQuantityText, getProductTypeText, getStockOperationText } from "@/utils/product";
import { Message } from "@/utils/message"; import { Message } from "@/utils/message";
import { permissionCodes } from "@/utils/permission"; import { permissionCodes } from "@/utils/permission";
import { getCustomerPhotoURL } from "@/utils/customer"; import { getCustomerPhotoURL } from "@/utils/customer";
@@ -118,6 +151,12 @@ const loading = ref(false);
const isRefreshing = ref(false); const isRefreshing = ref(false);
const noMore = ref(false); const noMore = ref(false);
const productId = computed(() => getQueryText("productId")); const productId = computed(() => getQueryText("productId"));
const skuId = computed(() => getQueryText("skuId"));
const filteredProduct = ref<Product>();
const filteredSku = ref<ProductSku>();
const filteredSkuUnitId = ref("");
const filteredSkuUnitList = computed(() => (filteredSku.value?.unitList || []).filter(unit => !!unit.id));
const filteredSkuPhotoURL = computed(() => filteredSku.value ? getProductPhotoURL(filteredSku.value) || (filteredProduct.value ? getProductPhotoURL(filteredProduct.value) : "") : "");
const activeReservationRequested = getQueryText("activeReservationOnly") === "true"; const activeReservationRequested = getQueryText("activeReservationOnly") === "true";
const operationType = ref<OperationFilter>(getQueryText("operationType") as OperationFilter || (activeReservationRequested ? "ORDER_RESERVE" : "ALL")); const operationType = ref<OperationFilter>(getQueryText("operationType") as OperationFilter || (activeReservationRequested ? "ORDER_RESERVE" : "ALL"));
const direction = ref<DirectionFilter>(getQueryText("direction") as DirectionFilter || "ALL"); const direction = ref<DirectionFilter>(getQueryText("direction") as DirectionFilter || "ALL");
@@ -132,7 +171,7 @@ const emptyText = computed(() => {
if (activeReservationOnly.value) { if (activeReservationOnly.value) {
return "暂无有效的预占流水"; return "暂无有效的预占流水";
} }
return keyword.value.trim() || productId.value || operationType.value !== "ALL" || direction.value !== "ALL" ? "未找到匹配的库存流水" : "暂无库存流水"; return keyword.value.trim() || productId.value || skuId.value || operationType.value !== "ALL" || direction.value !== "ALL" ? "未找到匹配的库存流水" : "暂无库存流水";
}); });
const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多"); const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
const operationOptions = [ const operationOptions = [
@@ -159,6 +198,10 @@ function getQueryText(key: string): string {
return Array.isArray(value) ? String(value[0] || "") : String(value || ""); return Array.isArray(value) ? String(value[0] || "") : String(value || "");
} }
function getDefaultFilteredSkuUnitId(): string {
return filteredSkuUnitList.value.find(unit => unit.isBase)?.id || filteredSkuUnitList.value[0]?.id || "";
}
function getOperationIcon(type?: StockOperationType): string { function getOperationIcon(type?: StockOperationType): string {
return ({ return ({
INITIAL_IN: "import", INITIAL_IN: "import",
@@ -235,6 +278,7 @@ async function loadMore(force = false): Promise<void> {
try { try {
const result = await ProductAPI.recordList({ const result = await ProductAPI.recordList({
productId: productId.value || undefined, productId: productId.value || undefined,
skuId: skuId.value || undefined,
keyword: keyword.value.trim() || undefined, keyword: keyword.value.trim() || undefined,
operationType: operationType.value === "ALL" ? undefined : operationType.value, operationType: operationType.value === "ALL" ? undefined : operationType.value,
activeReservationOnly: activeReservationOnly.value || undefined, activeReservationOnly: activeReservationOnly.value || undefined,
@@ -257,6 +301,23 @@ async function loadMore(force = false): Promise<void> {
} }
} }
async function loadSkuFilter(): Promise<void> {
if (!skuId.value) {
filteredProduct.value = undefined;
filteredSku.value = undefined;
filteredSkuUnitId.value = "";
return;
}
const sku = await ProductAPI.skuDetail(skuId.value);
const product = sku.productId ? await ProductAPI.detail(sku.productId) : undefined;
if (skuId.value !== getQueryText("skuId")) {
return;
}
filteredSku.value = sku;
filteredProduct.value = product;
filteredSkuUnitId.value = getDefaultFilteredSkuUnitId();
}
async function selectOperationType(value: DropdownValue): Promise<void> { async function selectOperationType(value: DropdownValue): Promise<void> {
if (!Array.isArray(value)) { if (!Array.isArray(value)) {
operationType.value = String(value) as OperationFilter; operationType.value = String(value) as OperationFilter;
@@ -292,7 +353,7 @@ async function refresh(): Promise<void> {
onMounted(async () => { onMounted(async () => {
navBarStore.clearRight(); navBarStore.clearRight();
try { try {
await reload(); await Promise.all([loadSkuFilter(), reload()]);
} catch (error) { } catch (error) {
Message.error(getErrorMessage(error, "库存流水加载失败")); Message.error(getErrorMessage(error, "库存流水加载失败"));
} }
@@ -372,83 +433,113 @@ onUnmounted(() => {
} }
} }
.list { .list-wrap {
margin: 0; gap: 1rem;
display: flex;
flex-direction: column;
.sku {
--td-tag-square-border-radius: .5rem;
.item {
padding: 10px; padding: 10px;
min-width: 0;
:deep(.t-cell__title) { :deep(.t-cell__title) {
min-width: 0; display: flex;
width: 0; align-items: center;
}
:deep(.t-cell__title-text) {
min-width: 0;
width: 100%;
} }
.avatar { .avatar {
width: 3.5rem; width: 2rem;
height: 3.5rem; height: 2rem;
} border-radius: .5rem !important;
.icon {
width: 2.25rem;
height: 2.25rem;
display: inline-flex;
background: var(--td-bg-color-secondarycontainer);
align-items: center;
border-radius: 50%;
justify-content: center;
} }
.title { .title {
gap: .5rem; gap: .5rem;
display: flex;
min-width: 0; min-width: 0;
max-width: 100%;
flex: 1;
display: flex;
font-size: .75rem;
align-items: center; align-items: center;
white-space: nowrap;
.actor {
color: var(--td-text-color-secondary);
flex: 0 0 auto;
}
.operation {
flex: 0 0 auto;
}
.product-name {
min-width: 0;
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.quantity {
color: var(--td-text-color-secondary);
flex: 0 0 auto;
font-weight: 400;
}
} }
}
.description { .list {
gap: .5rem; margin: 0;
display: flex;
font-size: .75rem;
align-items: center;
justify-content: space-between;
.delta { .item {
padding: 10px;
min-width: 0;
.value { :deep(.t-cell__title) {
font-size: 1.25rem; min-width: 0;
width: 0;
}
:deep(.t-cell__title-text) {
min-width: 0;
width: 100%;
}
.avatar {
width: 3.5rem;
height: 3.5rem;
}
.icon {
width: 2.25rem;
height: 2.25rem;
display: inline-flex;
background: var(--td-bg-color-secondarycontainer);
align-items: center;
border-radius: 50%;
justify-content: center;
}
.title {
gap: .5rem;
min-width: 0;
max-width: 100%;
flex: 1;
display: flex;
font-size: .75rem;
align-items: center;
white-space: nowrap;
.actor {
color: var(--td-text-color-secondary);
flex: 0 0 auto;
}
.operation {
flex: 0 0 auto;
}
.product-name {
min-width: 0;
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.quantity {
color: var(--td-text-color-secondary);
flex: 0 0 auto;
font-weight: 400;
}
}
.description {
gap: .5rem;
display: flex;
font-size: .75rem;
align-items: center;
justify-content: space-between;
.delta {
.value {
font-size: 1.25rem;
}
} }
} }
} }
src/types/Product.ts
+1
View File
@@ -192,6 +192,7 @@ export type StockRecord = {
export type StockRecordPage = { export type StockRecordPage = {
storeId?: string; storeId?: string;
productId?: string; productId?: string;
skuId?: string;
keyword?: string; keyword?: string;
bizType?: StockBizType; bizType?: StockBizType;
bizId?: string; bizId?: string;