pda-cli/src/pages/storegoods/storeGoodsPurchaseInView.vue

<template>
	<view class="fabric-out-page">
		<OrderHeaderFold v-model="headerCollapsed" :summary="order.order_no">
		<OrderStatusBar class="fabric-out-mt32" :status="order.audit_status" :name="order.audit_status_name" />

		<view class="flex-white-plr26 ptb10 bdb_f5">
			<text class="mr26">进仓单号</text>
			<text>{{ order.order_no }}</text>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">供应商</text>
			<text>{{ order.biz_unit_name || '-' }}</text>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">仓库名称</text>
			<text>{{ order.warehouse_name || '-' }}</text>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5 process-in-weight-row">
			<view class="process-in-weight-col">
				<text class="mr16">纸筒重量</text>
				<text>{{ order.paper_tube_weight != null ? order.paper_tube_weight : '-' }}</text>
			</view>
			<view class="process-in-weight-col">
				<text class="mr16">包装重量</text>
				<text>{{ order.package_weight != null ? order.package_weight : '-' }}</text>
			</view>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">营销体系</text>
			<text>{{ order.sale_system_name || '-' }}</text>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">订单类型</text>
			<text>{{ order.sale_mode_name || '-' }}</text>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">单据备注</text>
			<text>{{ order.remark || '-' }}</text>
		</view>
		<view class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">创建人</text>
			<text>{{ order.creator_name }} {{ formatTime(order.create_time, 'YYYY-MM-DD') }}</text>
		</view>
		<view v-if="order.auditor_name" class="flex-white-plr26 ptb20 bdb_f5">
			<text class="mr26">审核人</text>
			<text>{{ order.auditor_name }} {{ formatTime(order.audit_time, 'YYYY-MM-DD') }}</text>
		</view>
		</OrderHeaderFold>

		<ProcessInDetailList
			:title="detailTitle"
			:list="order.item_data"
			show-tare-columns
		/>

		<FabricOutFooter :buttons="actionButtons" @action="handleAction" />
	</view>
</template>

<script>
import util from '@/common/util';
import OrderStatusBar from '@/components/storefabric/OrderStatusBar.vue';
import OrderHeaderFold from '@/components/storefabric/OrderHeaderFold.vue';
import FabricOutFooter from '@/components/storefabric/FabricOutFooter.vue';
import ProcessInDetailList from '@/components/storegoods/ProcessInDetailList.vue';
import {
	normalizeOrder,
	getViewStatusActionButtons,
	confirmOrderStatusAction,
	formatDisplayTime,
} from '@/common/storeGoodsPurchaseIn';

export default {
	components: { OrderStatusBar, OrderHeaderFold, FabricOutFooter, ProcessInDetailList },
	data() {
		return {
			orderId: 0,
			headerCollapsed: true,
			order: { item_data: [] },
		};
	},
	computed: {
		actionButtons() {
			return getViewStatusActionButtons(this.order.audit_status);
		},
		detailTitle() {
			return `进仓明细（共 ${this.order.total_roll || 0} 匹）`;
		},
	},
	onLoad(e) {
		uni.setNavigationBarTitle({ title: '采购进仓单详情' });
		if (e.id) {
			this.orderId = Number(e.id);
			this.refreshOrder();
		}
	},
	onShow() {
		if (this.orderId) this.refreshOrder();
	},
	methods: {
		formatTime: formatDisplayTime,
		refreshOrder() {
			this.$u.api.fpmPrcInOrder.detail({ id: this.orderId })
				.then((res) => {
					const order = normalizeOrder(res);
					if (!order) {
						this.showError('单据不存在');
						return;
					}
					this.order = order;
				})
				.catch((err) => {
					this.showError(err.message || '加载单据失败');
				});
		},
		handleAction(action) {
			if (action === 'edit') {
				uni.navigateTo({ url: `./storeGoodsPurchaseInEdit?id=${this.orderId}` });
				return;
			}
			confirmOrderStatusAction(this, {
				orderId: this.orderId,
				action,
				onSuccess: () => this.$u.api.fpmPrcInOrder.detail({ id: this.orderId })
					.then((res) => {
						uni.hideLoading();
						const order = normalizeOrder(res);
						if (order) this.order = order;
						const voice = util.statusSuccessVoice(action);
						util.playSuccessAudio(voice);
						uni.showToast({ title: voice, icon: 'success' });
					}),
			});
		},
		showError(message) {
			util.playErrorAudio(message);
			uni.showModal({ title: '提示', content: message, showCancel: false });
		},
	},
};
</script>

<style lang="scss">
@import '@/pages/storefabric/storeFabricBusinessOutPage.scss';
page {
	background-color: #F8F8F8;
	padding-bottom: 260rpx;
}
.process-in-weight-row {
	gap: 20rpx;
}
.process-in-weight-col {
	flex: 1;
	display: flex;
	align-items: center;
	min-width: 0;
}
</style>