<template>
|
<view class="material-page">
|
<view class="material-header">
|
<CardTitle title="物料详情" :hideAction="false" />
|
|
<!-- 物料信息列表，点击进入对应物料的出库页面 -->
|
<view class="material-info">
|
<wd-card
|
v-for="(item, index) in materialList"
|
:key="item.materialcode || index"
|
custom-class="info-card"
|
@click="toMaterialOutbound(item)"
|
>
|
<wd-row class="info-row">
|
<wd-col :span="24">
|
<view class="flex">
|
<view class="icon_box">
|
<wd-icon name="folder" color="#0D867F"></wd-icon>
|
</view>
|
<text class="text-[#646874] mx-2">
|
物料名称:
|
<text class="text-[#252525]">{{ item.materialname || "-" }}</text>
|
</text>
|
</view>
|
</wd-col>
|
</wd-row>
|
<wd-row class="info-row">
|
<wd-col :span="24">
|
<view class="flex">
|
<view class="icon_box">
|
<wd-icon name="folder" color="#0D867F"></wd-icon>
|
</view>
|
<text class="text-[#646874] mx-2">
|
物料规格:
|
<text class="text-[#252525]">{{ item.materialspec || "-" }}</text>
|
</text>
|
</view>
|
</wd-col>
|
</wd-row>
|
<wd-row class="info-row">
|
<wd-col :span="24">
|
<view class="flex">
|
<view class="icon_box">
|
<wd-icon name="folder" color="#0D867F"></wd-icon>
|
</view>
|
<text class="text-[#646874] mx-2">
|
待发货数量:
|
<text class="text-[#252525]">{{ item.shippedQuantity || 0 }}</text>
|
</text>
|
</view>
|
</wd-col>
|
</wd-row>
|
</wd-card>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from "vue";
|
import { onLoad } from "@dcloudio/uni-app";
|
// @ts-ignore
|
import CardTitle from "@/components/card-title/index.vue";
|
import { useToast } from "wot-design-uni";
|
import OutboundApi from "@/api/product/outbound";
|
|
const toast = useToast();
|
const materialId = ref<string>("");
|
const vbillcode = ref<string>("");
|
|
// 物料信息列表
|
const materialList = ref<any[]>([]);
|
|
// 点击某个物料，跳转到单独的出库页面
|
const toMaterialOutbound = (item: any) => {
|
const query = [
|
`materialname=${encodeURIComponent(item.materialname || "")}`,
|
`materialspec=${encodeURIComponent(item.materialspec || "")}`,
|
`shippedQuantity=${item.shippedQuantity || 0}`,
|
`vsrccode=${item.vsrccode || ""}`,
|
`cdeliveryid=${encodeURIComponent(item.cdeliveryid || "")}`,
|
`cdeliverybid=${encodeURIComponent(item.cdeliverybid || "")}`,
|
`materialcode=${encodeURIComponent(item.materialcode || "")}`,
|
].join("&");
|
|
uni.navigateTo({
|
url: `/pages/outbound/materialOutbound?${query}`,
|
});
|
};
|
|
// 获取物料详情
|
const getMaterialDetail = async () => {
|
if (!vbillcode.value) {
|
toast.error("发货单号不能为空");
|
return;
|
}
|
|
try {
|
uni.showLoading({
|
title: "加载中...",
|
mask: true,
|
});
|
|
const { code, data, msg } = await OutboundApi.queryErpOutboundOrderDetail({
|
vbillcode: vbillcode.value,
|
});
|
|
uni.hideLoading();
|
|
if (code === 200 && data) {
|
// 将接口返回的数据映射到 materialList
|
materialList.value = data.map((item: any) => ({
|
materialcode: item.materialcode,
|
materialname: item.materialname || "-",
|
materialspec: item.materialspec || "-",
|
shippedQuantity: item.nnum || 0,
|
cdeliveryid: item.cdeliveryid,
|
cdeliverybid: item.cdeliverybid,
|
vsrccode: item.vsrccode,
|
}));
|
} else {
|
toast.error(msg || "获取物料详情失败");
|
materialList.value = [];
|
}
|
} catch (error: any) {
|
uni.hideLoading();
|
console.error("获取物料详情失败:", error);
|
toast.error(error.msg || "获取物料详情失败");
|
materialList.value = [];
|
}
|
};
|
|
onLoad((options: any) => {
|
materialId.value = options.id || "";
|
vbillcode.value = options.vbillcode || "";
|
getMaterialDetail();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.material-page {
|
min-height: 100vh;
|
background: #f3f9f8;
|
padding-bottom: 200rpx;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.material-header {
|
position: sticky;
|
top: 0;
|
z-index: 10;
|
background: #f3f9f8;
|
padding-bottom: 10rpx;
|
}
|
|
.material-info {
|
padding: 20rpx;
|
}
|
|
.info-card {
|
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.05);
|
margin-bottom: 20rpx;
|
margin-left: 6px;
|
margin-right: 6px;
|
padding: 10px 18px;
|
background: #f3f9f8;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
|
.info-row {
|
margin-bottom: 20rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
|
.icon_box {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 20px;
|
height: 20px;
|
background: #e7f4ec99;
|
border-radius: 50%;
|
}
|
|
.list_content {
|
flex: 1;
|
overflow-y: auto;
|
padding-bottom: 120rpx;
|
}
|
|
.empty_tip {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 100rpx 0;
|
color: #999;
|
|
.empty_text {
|
font-size: 32rpx;
|
margin-bottom: 20rpx;
|
}
|
}
|
|
.outbound_item {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 30rpx;
|
margin: 30rpx;
|
background: #fff;
|
border-radius: 16rpx;
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
.outbound_item_left {
|
display: flex;
|
align-items: center;
|
flex: 1;
|
}
|
|
.outbound_item_content {
|
flex: 1;
|
}
|
|
.outbound_item_row {
|
display: flex;
|
align-items: center;
|
margin-bottom: 12rpx;
|
font-size: 28rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
|
.outbound_item_label {
|
color: #666;
|
min-width: 140rpx;
|
flex-shrink: 0;
|
}
|
|
.outbound_item_value {
|
color: #333;
|
flex: 1;
|
word-break: break-all;
|
}
|
|
.outbound_item_action {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-left: 20rpx;
|
flex-shrink: 0;
|
}
|
}
|
|
:deep(.delete-btn) {
|
.wd-button__content {
|
color: #ff4444 !important;
|
}
|
|
&:active {
|
opacity: 0.7;
|
}
|
}
|
|
.outbound_footer {
|
position: fixed;
|
bottom: 20rpx;
|
left: 0;
|
right: 0;
|
padding: 0 30rpx;
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
z-index: 100;
|
background: transparent;
|
}
|
|
.shipping-btn-wrapper {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
padding: 20rpx 30rpx;
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
background: #fff;
|
z-index: 100;
|
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
|
}
|
|
.shipping-dialog {
|
background: #fff;
|
border-radius: 24rpx 24rpx 0 0;
|
padding-bottom: env(safe-area-inset-bottom);
|
}
|
|
.dialog-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 32rpx;
|
border-bottom: 1px solid #e6e6e6;
|
}
|
|
.dialog-title {
|
font-size: 32rpx;
|
font-weight: 500;
|
color: #333;
|
}
|
|
.close-icon {
|
font-size: 40rpx;
|
color: #999;
|
padding: 8rpx;
|
}
|
|
.dialog-content {
|
padding: 32rpx;
|
}
|
|
.scan-tip {
|
text-align: center;
|
color: #666;
|
font-size: 28rpx;
|
padding: 40rpx 0;
|
}
|
</style>
|
