update style and add sku
This commit is contained in:
Timi
@@ -16,8 +16,8 @@
|
||||
:options="dateOptions"
|
||||
@change="selectDateFilter"
|
||||
/>
|
||||
<t-dropdown-item v-model="operationType" label="操作类型" :options="operationOptions" @change="selectOperationType" />
|
||||
<t-dropdown-item v-model="direction" label="出入库" :options="directionOptions" @change="selectDirection" />
|
||||
<t-dropdown-item v-model="operationType" :label="operationFilterLabel" :options="operationOptions" @change="selectOperationType" />
|
||||
<t-dropdown-item v-model="direction" :label="directionFilterLabel" :options="directionOptions" @change="selectDirection" />
|
||||
</t-dropdown-menu>
|
||||
</div>
|
||||
<t-pull-down-refresh
|
||||
@@ -110,8 +110,13 @@
|
||||
<div class="title">
|
||||
<span v-if="record.customer" class="actor" v-text="getCustomerText(record)" />
|
||||
<span v-else-if="record.operator" class="actor" v-text="getOperatorText(record)" />
|
||||
<strong class="operation" v-text="getStockOperationText(record.operationType)" />
|
||||
<strong class="product-name" v-text="record.productNameSnapshot || '未命名产品'" />
|
||||
<strong class="operation" :class="getOperationClass(record.operationType)" v-text="getStockOperationText(record.operationType)" />
|
||||
<strong class="product-name clip-text" v-text="record.productNameSnapshot || '未命名产品'" />
|
||||
<t-tag
|
||||
v-if="record.productNameSnapshot !== record.skuNameSnapshot"
|
||||
size="small"
|
||||
:content="record.skuNameSnapshot"
|
||||
/>
|
||||
<span
|
||||
v-if="record.quantity !== undefined && record.quantity !== null && record.quantity !== ''"
|
||||
class="quantity"
|
||||
@@ -216,7 +221,7 @@ const dateOptions: Array<{ label: string; value: DateFilterType }> = [
|
||||
{ label: "全部", value: "all" },
|
||||
{ label: "自定义范围", value: "custom" }
|
||||
];
|
||||
const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText("dateType"), dateOptions, "thisWeek"));
|
||||
const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText("dateType"), dateOptions, "all"));
|
||||
const dateRange = ref<[string, string]>(parseDateRange(dateFilterType.value));
|
||||
const startDraft = ref("");
|
||||
const endDraft = ref("");
|
||||
@@ -239,7 +244,6 @@ const emptyText = computed(() => {
|
||||
const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
|
||||
const operationOptions = [
|
||||
{ label: "全部操作", value: "ALL" },
|
||||
{ label: "期初入库", value: "INITIAL_IN" },
|
||||
{ label: "手工入库", value: "MANUAL_IN" },
|
||||
{ label: "手工出库", value: "MANUAL_OUT" },
|
||||
{ label: "手工流水冲正", value: "MANUAL_REVOKE" },
|
||||
@@ -255,6 +259,8 @@ const directionOptions = [
|
||||
{ label: "入库", value: "IN" },
|
||||
{ label: "出库", value: "OUT" }
|
||||
];
|
||||
const operationFilterLabel = computed(() => operationOptions.find(item => item.value === operationType.value)?.label || "操作类型");
|
||||
const directionFilterLabel = computed(() => directionOptions.find(item => item.value === direction.value)?.label || "出入库");
|
||||
|
||||
function getQueryText(key: string): string {
|
||||
const value = route.query[key];
|
||||
@@ -274,7 +280,6 @@ function getDefaultFilteredSkuUnitId(): string {
|
||||
|
||||
function getOperationIcon(type?: StockOperationType): string {
|
||||
return ({
|
||||
INITIAL_IN: "import",
|
||||
MANUAL_IN: "import",
|
||||
MANUAL_OUT: "export",
|
||||
MANUAL_REVOKE: "rollback",
|
||||
@@ -287,6 +292,21 @@ function getOperationIcon(type?: StockOperationType): string {
|
||||
} as Record<string, string>)[type || ""] || "history";
|
||||
}
|
||||
|
||||
function getOperationClass(type?: StockOperationType): string {
|
||||
return ({
|
||||
INITIAL_IN: "initial-in",
|
||||
MANUAL_IN: "manual-in",
|
||||
MANUAL_OUT: "manual-out",
|
||||
MANUAL_REVOKE: "manual-revoke",
|
||||
ORDER_RESERVE: "order-reserve",
|
||||
ORDER_RELEASE: "order-release",
|
||||
ORDER_OUT: "order-out",
|
||||
ORDER_REVOKE: "order-revoke",
|
||||
STOCKTAKE_GAIN: "stocktake-gain",
|
||||
STOCKTAKE_LOSS: "stocktake-loss"
|
||||
} as Record<string, string>)[type || ""] || "unknown";
|
||||
}
|
||||
|
||||
function getStockQuantityText(record: StockRecord): string {
|
||||
if (record.quantity === undefined || record.quantity === null || record.quantity === "") {
|
||||
return "";
|
||||
@@ -635,16 +655,6 @@ onUnmounted(() => {
|
||||
padding: 10px;
|
||||
min-width: 0;
|
||||
|
||||
:deep(.t-cell__title) {
|
||||
min-width: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
:deep(.t-cell__title-text) {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
@@ -661,7 +671,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.title {
|
||||
gap: .5rem;
|
||||
gap: .25rem;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
flex: 1;
|
||||
@@ -671,20 +681,59 @@ onUnmounted(() => {
|
||||
white-space: nowrap;
|
||||
|
||||
.actor {
|
||||
color: var(--td-text-color-secondary);
|
||||
flex: 0 0 auto;
|
||||
color: var(--td-text-color-brand);
|
||||
}
|
||||
|
||||
.operation {
|
||||
flex: 0 0 auto;
|
||||
color: var(--operation-color, var(--td-text-color-secondary));
|
||||
font-weight: 700;
|
||||
|
||||
&.initial-in {
|
||||
--operation-color: #2563eb;
|
||||
}
|
||||
|
||||
&.manual-in {
|
||||
--operation-color: #15803d;
|
||||
}
|
||||
|
||||
&.manual-out {
|
||||
--operation-color: #c2410c;
|
||||
}
|
||||
|
||||
&.manual-revoke {
|
||||
--operation-color: #be123c;
|
||||
}
|
||||
|
||||
&.order-reserve {
|
||||
--operation-color: #7c3aed;
|
||||
}
|
||||
|
||||
&.order-release {
|
||||
--operation-color: #0891b2;
|
||||
}
|
||||
|
||||
&.order-out {
|
||||
--operation-color: #dc2626;
|
||||
}
|
||||
|
||||
&.order-revoke {
|
||||
--operation-color: #4f46e5;
|
||||
}
|
||||
|
||||
&.stocktake-gain {
|
||||
--operation-color: #0f766e;
|
||||
}
|
||||
|
||||
&.stocktake-loss {
|
||||
--operation-color: #a16207;
|
||||
}
|
||||
}
|
||||
|
||||
.product-name {
|
||||
min-width: 0;
|
||||
flex: 0 1 auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--td-text-color-primary);
|
||||
}
|
||||
|
||||
.quantity {
|
||||
@@ -720,4 +769,46 @@ onUnmounted(() => {
|
||||
color: var(--td-error-color);
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) .product-stock-record-list .operation {
|
||||
&.initial-in {
|
||||
--operation-color: #93c5fd;
|
||||
}
|
||||
|
||||
&.manual-in {
|
||||
--operation-color: #86efac;
|
||||
}
|
||||
|
||||
&.manual-out {
|
||||
--operation-color: #fdba74;
|
||||
}
|
||||
|
||||
&.manual-revoke {
|
||||
--operation-color: #fda4af;
|
||||
}
|
||||
|
||||
&.order-reserve {
|
||||
--operation-color: #c4b5fd;
|
||||
}
|
||||
|
||||
&.order-release {
|
||||
--operation-color: #67e8f9;
|
||||
}
|
||||
|
||||
&.order-out {
|
||||
--operation-color: #fca5a5;
|
||||
}
|
||||
|
||||
&.order-revoke {
|
||||
--operation-color: #a5b4fc;
|
||||
}
|
||||
|
||||
&.stocktake-gain {
|
||||
--operation-color: #5eead4;
|
||||
}
|
||||
|
||||
&.stocktake-loss {
|
||||
--operation-color: #fcd34d;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user