fix ProductStockSkuList.vue style
This commit is contained in:
Timi
@@ -1,10 +1,5 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.productStock.read" class="product-stock-sku-list">
|
||||
<div class="product-context">
|
||||
<strong v-text="product?.name || '产品 SKU'" />
|
||||
<span v-text="product?.code || productId" />
|
||||
</div>
|
||||
|
||||
<div class="search bg-white">
|
||||
<t-input
|
||||
v-model="keyword"
|
||||
@@ -15,7 +10,6 @@
|
||||
placeholder="搜索 SKU 名称、编码或规格"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<t-pull-down-refresh
|
||||
class="list-wrap empty-cell-title-margin"
|
||||
v-model="isRefreshing"
|
||||
@@ -23,48 +17,50 @@
|
||||
@refresh="refresh"
|
||||
@scrolltolower="loadMore"
|
||||
>
|
||||
<t-cell-group v-if="skuStockList.length" theme="card" class="list fix-last-cell-line">
|
||||
<t-cell
|
||||
v-for="(item, index) in skuStockList"
|
||||
:key="item.skuId || item.id"
|
||||
arrow
|
||||
hover
|
||||
class="item"
|
||||
v-entrance-transition="index * 30"
|
||||
@click="toDetail(item)"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<div class="avatar fallback" v-text="(item.sku?.name || 'S').slice(0, 1)" />
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<strong v-text="item.sku?.name || '未命名 SKU 明细'" />
|
||||
<t-tag size="small" variant="outline" :content="item.sku?.code || '无 SKU 编码'" />
|
||||
</div>
|
||||
</template>
|
||||
<template #note>
|
||||
<span class="sku-spec" v-text="getSkuSpecText(item)" />
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="stock">
|
||||
<div class="content">
|
||||
<t-cell-group theme="card">
|
||||
<t-cell title="产品" :note="product?.name" />
|
||||
</t-cell-group>
|
||||
<t-cell-group v-if="skuStockList.length" theme="card" class="list fix-last-cell-line">
|
||||
<t-cell
|
||||
v-for="(item, index) in skuStockList"
|
||||
:key="item.skuId || item.id"
|
||||
arrow
|
||||
hover
|
||||
class="item"
|
||||
v-entrance-transition="index * 30"
|
||||
@click="toDetail(item)"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<div class="avatar fallback" v-text="(item.sku?.name || 'S').slice(0, 1)" />
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<strong v-text="item.sku?.name || '未命名 SKU 明细'" />
|
||||
<t-tag size="small" variant="outline" :content="item.sku?.code || '无 SKU 编码'" />
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="stock">
|
||||
<span class="on-hand">
|
||||
<span>库存</span>
|
||||
<strong v-text="getProductQuantityText(item.onHandQuantity)" />
|
||||
</span>
|
||||
<span class="available">
|
||||
<span class="available">
|
||||
<span>可用</span>
|
||||
<strong v-text="getProductQuantityText(item.availableQuantity)" />
|
||||
</span>
|
||||
<span class="reserved">
|
||||
<span class="reserved">
|
||||
<span>预占</span>
|
||||
<strong v-text="getProductQuantityText(item.reservedQuantity)" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="center-tips" v-text="emptyText" />
|
||||
<div v-if="skuStockList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</div>
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-else class="center-tips" v-text="emptyText" />
|
||||
<div v-if="skuStockList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
|
||||
</div>
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
</template>
|
||||
@@ -75,7 +71,7 @@ import ProductAPI from "@/api/ProductAPI";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { Product, ProductStock } from "@/types/Product";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { getProductQuantityText, getProductSkuSpecEntries } from "@/utils/product";
|
||||
import { getProductQuantityText } from "@/utils/product";
|
||||
import { Message } from "@/utils/message";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
@@ -110,15 +106,6 @@ let keywordTimer: number | undefined;
|
||||
let requestToken = 0;
|
||||
let suppressKeywordFetch = false;
|
||||
|
||||
function getSkuSpecText(item: ProductStock): string {
|
||||
const sku = item.sku;
|
||||
if (!sku) {
|
||||
return "未配置规格";
|
||||
}
|
||||
const entries = getProductSkuSpecEntries(sku, product.value?.specList || []);
|
||||
return entries.length ? entries.map(entry => `${entry.specName}：${entry.valueName}`).join(" · ") : sku.specSummary || "无多规格";
|
||||
}
|
||||
|
||||
function getCurrentRouteDepth(): number {
|
||||
const transitionDepth = Array.isArray(route.query.transitionDepth)
|
||||
? route.query.transitionDepth[0]
|
||||
@@ -250,26 +237,6 @@ onUnmounted(() => {
|
||||
.product-stock-sku-list {
|
||||
padding: var(--app-nav-height) 0 1rem;
|
||||
|
||||
.product-context {
|
||||
gap: .25rem;
|
||||
display: flex;
|
||||
padding: .75rem 1rem;
|
||||
background: var(--td-bg-color-container);
|
||||
flex-direction: column;
|
||||
|
||||
strong,
|
||||
span {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--td-text-color-secondary);
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
top: var(--app-nav-height);
|
||||
z-index: 10;
|
||||
@@ -288,67 +255,73 @@ onUnmounted(() => {
|
||||
|
||||
.list-wrap {
|
||||
min-height: 70vh;
|
||||
padding-top: .75rem;
|
||||
|
||||
.list {
|
||||
padding-top: .75rem;
|
||||
.content {
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.item {
|
||||
padding: 10px;
|
||||
.list {
|
||||
|
||||
.avatar {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
.item {
|
||||
padding: 10px;
|
||||
|
||||
.fallback {
|
||||
color: var(--td-brand-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--td-brand-color-1);
|
||||
border-radius: .75rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.avatar {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
gap: .5rem;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.fallback {
|
||||
color: var(--td-brand-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--td-brand-color-1);
|
||||
border-radius: .75rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
strong {
|
||||
.title {
|
||||
gap: .5rem;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
strong {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sku-spec {
|
||||
color: var(--td-text-color-secondary);
|
||||
}
|
||||
|
||||
.stock {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
margin-top: .5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
strong {
|
||||
display: inline-block;
|
||||
margin-left: .25rem;
|
||||
.sku-spec {
|
||||
color: var(--td-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.reserved {
|
||||
color: var(--td-warning-color);
|
||||
}
|
||||
.stock {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
margin-top: .5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.available {
|
||||
color: var(--td-success-color);
|
||||
strong {
|
||||
display: inline-block;
|
||||
margin-left: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.reserved {
|
||||
color: var(--td-warning-color);
|
||||
}
|
||||
|
||||
.available {
|
||||
color: var(--td-success-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user