fix ProductStockOperationPopup.vue style

2026-09-03 20:45:31 +08:00
parent 2b060a2536
commit 7a47e3a9f8
7 changed files with 189 additions and 57 deletions
@@ -147,10 +147,25 @@ async function edit(): Promise<void> {

 async function viewStock(): Promise<void> {
 	if (product.value?.id) {
-		await router.push(`/management/product-stocks/${product.value.id}`);
+		await router.push({
+			name: "ProductStockDetail",
+			params: { productId: product.value.id },
+			query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
+		});
 	}
 }

+function getCurrentRouteDepth(): number {
+	const transitionDepth = Array.isArray(route.query.transitionDepth)
+		? route.query.transitionDepth[0]
+		: route.query.transitionDepth;
+	const depth = Number(transitionDepth);
+	if (transitionDepth && Number.isInteger(depth) && 0 <= depth && depth <= 20) {
+		return depth;
+	}
+	return Number(route.meta.depth ?? 0);
+}
+
 function disable(): void {
 	const id = product.value?.id;
 	if (!id) {
@@ -2,12 +2,12 @@
 	<div v-can="permissionCodes.productStock.read" class="product-stock-detail">
 		<t-loading v-if="isLoading" class="loading" size="32px" />
 		<template v-else-if="product && stock">
-			<product-profile :product="product">
+			<product-profile :product="product" v-entrance-transition>
 				<template #tags>
 					<t-tag :content="getStockStatusText(stock)" variant="light-outline" :theme="getStockTheme(stock)" />
 				</template>
 			</product-profile>
-			<t-cell-group theme="card" title="库存">
+			<t-cell-group theme="card" title="库存" v-entrance-transition="70">
 				<t-cell class="empty-cell-title-margin">
 					<template #title>
 						<span></span>
@@ -42,7 +42,8 @@
 				v-if="canOperate && product.stockEnabled"
 				class="actions-wrap"
 				title="库存操作"
-				description="所有操作必须选择业务单位、上传照片并填写原因或备注"
+				description="所有操作必须选择业务单位、上传照片并填写备注"
+				v-entrance-transition="140"
 			>
 				<div class="actions">
 					<t-button
@@ -144,10 +145,27 @@ async function loadAll(): Promise<void> {

 async function openRecordList(): Promise<void> {
 	if (product.value?.id) {
-		await router.push({ path: "/management/product-stock-records", query: { productId: product.value.id } });
+		await router.push({
+			name: "ProductStockRecordList",
+			query: {
+				productId: product.value.id,
+				transitionDepth: String(getCurrentRouteDepth() + 1)
+			}
+		});
 	}
 }

+function getCurrentRouteDepth(): number {
+	const transitionDepth = Array.isArray(route.query.transitionDepth)
+		? route.query.transitionDepth[0]
+		: route.query.transitionDepth;
+	const depth = Number(transitionDepth);
+	if (transitionDepth && Number.isInteger(depth) && 0 <= depth && depth <= 20) {
+		return depth;
+	}
+	return Number(route.meta.depth ?? 0);
+}
+
 function openOperation(type: ManualStockOperation): void {
 	operationType.value = type;
 	operationVisible.value = true;
@@ -2,35 +2,56 @@
 	<bottom-popup
 		v-model="visible"
 		:title="getStockOperationText(operation)"
-		height="min(88vh, 52rem)"
 		left-button-text="取消"
 		:right-button-text="isSaving ? '提交中' : '提交'"
 		@left-button-click="visible = false"
 		@right-button-click="submit"
 	>
 		<div class="operation-popup">
-			<div class="summary">
-				<strong v-text="props.product.name || '未命名产品'" />
-				<span class="gray" v-text="`当前可用库存：${getProductQuantityText(props.stock?.availableQuantity)} ${getProductBaseUnitName(props.product)}`" />
-			</div>
-			<t-form label-align="left" label-width="5rem">
-				<t-form-item label="业务单位" required-mark @click="openUnitPicker">
+			<t-form class="form" label-width="5rem">
+				<t-form-item
+					label="单位"
+					content-align="right"
+					@click="openUnitPicker"
+					arrow
+					required-mark
+				>
 					<span class="picker-text" v-text="selectedUnitName" />
 				</t-form-item>
 				<t-form-item label="数量" required-mark>
-					<t-input v-model.trim="quantity" type="number" align="right" borderless placeholder="必须大于 0" />
+					<t-input v-model="quantity" type="number" align="right" borderless />
 				</t-form-item>
-				<t-form-item label="原因">
-					<t-input v-model.trim="reason" borderless maxlength="255" placeholder="原因或备注至少填写一项" />
+				<t-form-item label="备注" required-mark>
+					<div class="remark-wrap">
+						<t-textarea
+							v-model="remark"
+							borderless
+							maxlength="500"
+							autosize
+							placeholder="请输入库存操作备注"
+						/>
+						<t-button
+							v-if="quickRemarkText"
+							type="button"
+							size="extra-small"
+							variant="outline"
+							:content="quickRemarkText"
+							@click="applyQuickRemark"
+						/>
+					</div>
 				</t-form-item>
-				<t-form-item label="备注">
-					<t-textarea v-model.trim="remark" borderless maxlength="500" autosize placeholder="可补充说明" />
+				<t-form-item label-width="0">
+					<package-photo-field v-model="photoItems" title="操作照片" :required="true" />
 				</t-form-item>
-				<package-photo-field v-model="photoItems" title="操作照片" :required="true" />
 			</t-form>
 		</div>
 	</bottom-popup>
-	<t-popup v-model="unitPickerVisible" placement="bottom">
+	<t-popup
+		v-model="unitPickerVisible"
+		placement="bottom"
+		:z-index="unitPickerZIndex"
+		:overlay-props="{ zIndex: unitPickerOverlayZIndex }"
+	>
 		<t-picker v-model="unitDraft" :columns="unitOptions" title="选择业务单位" @cancel="unitPickerVisible = false" @confirm="confirmUnit" />
 	</t-popup>
 </template>
@@ -39,9 +60,15 @@
 import { watch } from "vue";
 import { BottomPopup } from "timi-tdesign-mobile";
 import ProductAPI from "@/api/ProductAPI";
-import type { Product, ProductStock, ProductUnit, ProductStockChangeRequest, StockOperationType } from "@/types/Product";
+import type {
+	Product,
+	ProductStock,
+	ProductStockChangeRequest,
+	ProductUnit,
+	StockOperationType
+} from "@/types/Product";
 import { getErrorMessage } from "@/utils/error";
-import { createProductRequestNo, getProductBaseUnitName, getProductQuantityText, getStockOperationText } from "@/utils/product";
+import { createProductRequestNo, getStockOperationText } from "@/utils/product";
 import { Message } from "@/utils/message";
 import type { PhotoItem } from "@/types/Photo";

@@ -61,22 +88,23 @@ const emit = defineEmits<{
 const visible = defineModel<boolean>("visible", { default: false });
 const isSaving = ref(false);
 const quantity = ref("");
-const reason = ref("");
 const remark = ref("");
 const requestNo = ref("");
 const photoItems = ref<PhotoItem[]>([]);
 const selectedUnitId = ref("");
 const unitPickerVisible = ref(false);
 const unitDraft = ref<PickerValue[]>([]);
+const unitPickerZIndex = 12001;
+const unitPickerOverlayZIndex = unitPickerZIndex - 1;

 const isInbound = computed(() => props.operation === "MANUAL_IN" || props.operation === "STOCKTAKE_GAIN");
 const selectableUnits = computed<ProductUnit[]>(() => (props.product.unitList || []).filter(unit => isInbound.value ? unit.allowPurchase : unit.allowSale));
 const unitOptions = computed(() => [selectableUnits.value.map(unit => ({ label: unit.name || "未命名单位", value: unit.id || "" }))]);
-const selectedUnitName = computed(() => selectableUnits.value.find(unit => unit.id === selectedUnitId.value)?.name || "请选择业务单位");
+const selectedUnitName = computed(() => selectableUnits.value.find(unit => unit.id === selectedUnitId.value)?.name || "选择业务单位");
+const quickRemarkText = computed(() => props.operation === "MANUAL_IN" ? "正常入库" : props.operation === "MANUAL_OUT" ? "正常出库" : "");

 function resetForm(): void {
 	quantity.value = "";
-	reason.value = "";
 	remark.value = "";
 	requestNo.value = "";
 	photoItems.value = [];
@@ -95,6 +123,12 @@ function confirmUnit(value: Array<string | number>): void {
 	unitPickerVisible.value = false;
 }

+function applyQuickRemark(): void {
+	if (quickRemarkText.value) {
+		remark.value = quickRemarkText.value;
+	}
+}
+
 function validate(): boolean {
 	if (!selectedUnitId.value) {
 		Message.warning("请选择业务单位");
@@ -108,8 +142,8 @@ function validate(): boolean {
 		Message.warning("该产品不允许输入小数数量");
 		return false;
 	}
-	if (!reason.value.trim() && !remark.value.trim()) {
-		Message.warning("原因或备注至少填写一项");
+	if (!remark.value.trim()) {
+		Message.warning("备注不能为空");
 		return false;
 	}
 	if (!photoItems.value.some(item => !!item.tempFileId)) {
@@ -125,8 +159,7 @@ function buildRequest(): ProductStockChangeRequest {
 		productId: props.product.id || "",
 		productUnitId: selectedUnitId.value,
 		quantity: quantity.value,
-		reason: reason.value.trim() || undefined,
-		remark: remark.value.trim() || null,
+		remark: remark.value.trim(),
 		attachmentList: photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: item.attachType || "PHOTO" }] : [])
 	};
 }
@@ -171,14 +204,17 @@ watch(() => [visible.value, props.operation] as const, ([isVisible]) => {

 <style scoped lang="less">
 .operation-popup {
-	.summary {
-		gap: .25rem;
-		display: grid;
-		padding: .5rem 0 1rem;
+	padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
+
+	.form {
+		margin: 0;
 	}

-	:deep(.t-form__item) {
-		padding: .25rem 0;
+	.remark-wrap {
+		width: 100%;
+		display: flex;
+		align-items: start;
+		justify-content: space-between;
 	}
 }
 </style>
@@ -1,5 +1,15 @@
 <template>
 	<div v-can="permissionCodes.productStock.read" class="product-stock-record-list">
+		<div class="search bg-white">
+			<t-input
+				v-model.trim="keyword"
+				class="keyword"
+				type="search"
+				borderless
+				clearable
+				placeholder="搜索产品名称或编码"
+			/>
+		</div>
 		<t-cell-group class="summary" theme="card">
 			<t-cell title="查询范围" :note="scopeText" />
 			<t-cell title="记录数量" :note="`共 ${total} 条`" />
@@ -7,7 +17,7 @@
 		<t-pull-down-refresh
 			v-model="isRefreshing"
 			:refresh-timeout="30000"
-			@refresh="reload"
+			@refresh="refresh"
 			@scrolltolower="loadMore"
 		>
 			<t-cell-group v-if="recordList.length" class="list" theme="card">
@@ -35,12 +45,12 @@
 						<div class="description">
 							<span v-text="getQuantityText(record)" />
 							<span v-text="getBalanceText(record)" />
-							<span v-if="record.reason || record.remark" class="gray" v-text="record.reason || record.remark || ''" />
+							<span v-if="record.remark" class="gray" v-text="record.remark" />
 						</div>
 					</template>
 				</t-cell>
 			</t-cell-group>
-			<div v-else class="empty" v-text="loading ? '正在加载库存流水' : '暂无库存流水'" />
+			<div v-else class="empty" v-text="emptyText" />
 			<div v-if="recordList.length" class="center-tips" v-text="loadStateText" />
 		</t-pull-down-refresh>
 	</div>
@@ -68,14 +78,28 @@ const loading = ref(false);
 const isRefreshing = ref(false);
 const noMore = ref(false);
 const productId = computed(() => String(route.query.productId || ""));
+const keyword = ref(getQueryText("keyword"));
+let keywordTimer: number | undefined;
+let requestToken = 0;
 const scopeText = computed(() => {
-	if (!productId.value) {
-		return "全部产品";
+	const scope = productId.value
+		? `指定产品 · ${recordList.value[0]?.productNameSnapshot || "当前产品"}`
+		: "全部产品";
+	return keyword.value.trim() ? `${scope} · 搜索：${keyword.value.trim()}` : scope;
+});
+const emptyText = computed(() => {
+	if (loading.value) {
+		return "正在加载库存流水";
 	}
-	return `指定产品 · ${recordList.value[0]?.productNameSnapshot || "当前产品"}`;
+	return keyword.value.trim() ? "未找到匹配的库存流水" : "暂无库存流水";
 });
 const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");

+function getQueryText(key: string): string {
+	const value = route.query[key];
+	return Array.isArray(value) ? String(value[0] || "") : String(value || "");
+}
+
 function getOperationIcon(type?: StockOperationType): string {
 	return ({
 		INITIAL_IN: "download",
@@ -110,36 +134,50 @@ function getBalanceText(record: StockRecord): string {
 	return `库存 ${getProductQuantityText(record.onHandAfter)} · 预占 ${getProductQuantityText(record.reservedAfter)} · ${operator}`;
 }

-async function loadMore(): Promise<void> {
-	if (loading.value || noMore.value) {
+async function loadMore(force = false): Promise<void> {
+	if (!force && (loading.value || noMore.value)) {
 		return;
 	}
+	const token = ++requestToken;
 	loading.value = true;
 	try {
 		const result = await ProductAPI.recordList({
 			productId: productId.value || undefined,
+			keyword: keyword.value.trim() || undefined,
 			index: pageIndex.value,
 			size: pageSize
 		});
+		if (token !== requestToken) {
+			return;
+		}
 		const list = result.list || [];
 		recordList.value = recordList.value.concat(list);
 		total.value = result.total || 0;
 		pageIndex.value += 1;
 		noMore.value = list.length < pageSize || total.value < recordList.value.length || total.value === recordList.value.length;
 	} finally {
-		loading.value = false;
+		if (token === requestToken) {
+			loading.value = false;
+		}
 	}
 }

 async function reload(): Promise<void> {
-	if (loading.value) {
-		return;
-	}
 	pageIndex.value = 0;
 	recordList.value = [];
 	total.value = 0;
 	noMore.value = false;
-	await loadMore();
+	await loadMore(true);
+}
+
+async function refresh(): Promise<void> {
+	try {
+		await reload();
+	} catch (error) {
+		Message.error(getErrorMessage(error, "库存流水加载失败"));
+	} finally {
+		isRefreshing.value = false;
+	}
 }

 onMounted(async () => {
@@ -151,7 +189,22 @@ onMounted(async () => {
 	}
 });

-onUnmounted(() => navBarStore.clearRight());
+watch(keyword, () => {
+	window.clearTimeout(keywordTimer);
+	keywordTimer = window.setTimeout(async () => {
+		try {
+			await reload();
+		} catch (error) {
+			Message.error(getErrorMessage(error, "库存流水加载失败"));
+		}
+	}, 300);
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+	window.clearTimeout(keywordTimer);
+	requestToken += 1;
+});
 </script>

 <style scoped lang="less">
@@ -161,6 +214,22 @@ onUnmounted(() => navBarStore.clearRight());
 	padding: var(--app-nav-height) 0 1rem;
 	flex-direction: column;

+	.search {
+		top: var(--app-nav-height);
+		z-index: 10;
+		padding: .75rem 1rem;
+		position: sticky;
+		background: var(--td-bg-color-page);
+		box-shadow: var(--td-shadow-1);
+
+		.keyword {
+			border: 1px solid var(--td-component-border);
+			padding: .5rem 1rem;
+			background: var(--td-bg-color-container);
+			border-radius: 1rem;
+		}
+	}
+
 	.summary {
 		margin: 0;
 	}
@@ -1,10 +1,5 @@
 <template>
 	<div class="product-tab">
-		<t-notice-bar
-			theme="error"
-			visible
-			content="产品库设计方案及实现未完成，套餐功能仍在测试中，可以试用反馈可改进问题，但不要实际落到业务使用。产品库实现后套餐模块会联动更新，会清除测试的套餐数据"
-		/>
 		<t-cell-group
 			v-for="(group, index) in visibleMenuGroupList"
 			:key="group.title"