<template>
|
<view class="page-container">
|
<!-- 订单信息头部 -->
|
<view class="order-header" v-if="orderItem">
|
<view class="header-content">
|
<view class="header-row">
|
<text class="header-label">物料编码</text>
|
<text class="header-value">{{orderItem.matnrCode}}</text>
|
</view>
|
<view class="header-row">
|
<text class="header-label">物料名称</text>
|
<text class="header-value">{{orderItem.maktx || '-'}}</text>
|
</view>
|
<view class="header-row">
|
<text class="header-label">总出库数量</text>
|
<text class="header-value highlight-white">{{orderItem.anfme || 0}}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 库位视图列表 -->
|
<view class="padding-lr margin-top-sm">
|
<block v-for="(item, index) in locList" :key="index">
|
<view class="cu-list menu sm-border margin-bottom-sm">
|
<view class="cu-bar bg-white solid-bottom">
|
<view class="action">
|
<view class="index">{{index+1}}</view>
|
<view class="text-blue">
|
库位: {{item.locCode || '-'}}
|
</view>
|
</view>
|
<view class="action">
|
<text class="text-black">库存:</text>
|
<text class="text-blue margin-left-xs">{{item.anfme || 0}}</text>
|
</view>
|
</view>
|
<view class="cu-item">
|
<view class="content">
|
<text class="text-black">计划跟踪号:</text>
|
<text class="text-grey margin-left-xs">{{item.platWorkCode || '-'}}</text>
|
</view>
|
</view>
|
<view class="cu-item">
|
<view class="content">
|
<text class="text-black">批次:</text>
|
<text class="text-grey margin-left-xs">{{item.batch || '-'}}</text>
|
</view>
|
</view>
|
|
<view class="cu-item">
|
<view class="content">
|
<text class="text-black">托盘:</text>
|
<text class="text-grey margin-left-xs">{{item.barcode || '-'}}</text>
|
</view>
|
</view>
|
<view class="cu-item">
|
<view class="content">
|
<text class="text-black">区域:</text>
|
<text class="text-grey margin-left-xs">{{item.wareArea || '-'}}</text>
|
</view>
|
</view>
|
|
<view class="cu-item" v-if="item.anfme">
|
<view class="content">
|
<text class="text-blue">出库数量:</text>
|
</view>
|
<view class="action">
|
<uni-number-box
|
:min="0"
|
:max="item.anfme"
|
:decimal="2"
|
:step="0.01"
|
v-model="item.outQty"
|
></uni-number-box>
|
</view>
|
</view>
|
|
<view class="cu-item" v-if="item.anfme">
|
<view class="content">
|
<text class="text-blue">出库站:</text>
|
</view>
|
<view class="action">
|
<input placeholder="请输入出库站点" v-model="item.outStaInput" @input="checkAgvStation(item)"></input>
|
</view>
|
</view>
|
<view class="cu-item" v-if="item.anfme">
|
<view class="content">
|
<button
|
style="width: 100%;"
|
class="cu-btn bg-orange shadow-blur"
|
:disabled="repeatClick"
|
@click="confirmOut(item)"
|
>
|
确定出库
|
</button>
|
</view>
|
|
</view>
|
</view>
|
</block>
|
</view>
|
|
<!-- 空状态 -->
|
<view class="empty-state" v-if="locList.length === 0 && !loading">
|
<uni-icons type="info" size="60" color="#CCCCCC"></uni-icons>
|
<text class="empty-text">暂无库位数据</text>
|
</view>
|
|
<!-- 统计信息 -->
|
<view class="stats-bar" v-if="locList.length > 0">
|
<view class="stats-item">
|
<text class="stats-value">{{locList.length}}</text>
|
<text class="stats-label">库位数</text>
|
</view>
|
<view class="stats-divider"></view>
|
<view class="stats-item">
|
<text class="stats-value">{{totalQty}}</text>
|
<text class="stats-label">总库存</text>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { request } from '@/common/request.js'
|
export default {
|
data() {
|
return {
|
orderItem: null,
|
locList: [],
|
loading: false,
|
repeatClick:false
|
}
|
},
|
computed: {
|
// 计算总库存数量
|
totalQty() {
|
return this.locList.reduce((sum, item) => sum + (item.anfme || 0), 0);
|
}
|
},
|
onLoad() {
|
let that = this;
|
const eventChannel = this.getOpenerEventChannel();
|
if (eventChannel) {
|
eventChannel.on('orderItem', function(data) {
|
that.orderItem = data.item;
|
that.getOutLocView(that.orderItem);
|
});
|
}
|
},
|
methods: {
|
async checkAgvStation(item) {
|
const that = this
|
if (item.outStaInput === '' || item.outStaInput === null) {
|
uni.showToast({
|
title: '容器码为空',
|
icon: 'none',
|
position: 'top'
|
})
|
return
|
}
|
const { code, data, msg } = await request('/check/agvStation', {
|
transferStationNo: item.outStaInput
|
})
|
if (code === 200) {
|
item.agvStationName = data.stationName
|
} else {
|
uni.showToast({
|
title: msg,
|
icon: 'none',
|
position: 'top'
|
})
|
setTimeout(function () {
|
item.agvStationName = ''
|
item.outStaInput = ''
|
}, 200)
|
}
|
},
|
confirmOut(item){
|
if (item.agvStationName === '' || item.agvStationName === null || item.agvStationName === undefined) {
|
uni.showToast({
|
title: '出库站为空',
|
icon: 'none',
|
position: 'top'
|
})
|
return
|
}
|
if (item.outQty === 0 || item.outQty === null) {
|
uni.showToast({
|
title: '出库数量不能为0',
|
icon: 'none',
|
position: 'top'
|
})
|
return
|
}
|
this.submitConfirm(item)
|
},
|
async submitConfirm(item){
|
this.repeatClick = true
|
try {
|
const requestData = {
|
itemId: item.id,
|
outQty: item.outQty,
|
outSta: item.agvStationName
|
}
|
const { code, data, msg } = await request(
|
'/orderOut/getOutLocRun',
|
requestData
|
)
|
if (code === 200) {
|
uni.showToast({
|
title: '出库成功'
|
})
|
this.isconfirm = false
|
this.getOutLocView(this.orderItem);
|
} else {
|
uni.showToast({
|
title: msg,
|
icon: 'none',
|
position: 'top'
|
})
|
}
|
} finally {
|
// 无论请求成功还是失败，都释放按钮锁定
|
this.repeatClick = false
|
}
|
},
|
// 获取出库库位视图
|
async getOutLocView(item) {
|
if (!item) return;
|
this.loading = true;
|
try {
|
const res = await request('/orderOut/getOutLocView', {
|
orderItemId: item.id
|
}, 'POST', true);
|
|
if (res.code === 200) {
|
this.locList = res.data || [];
|
} else if (res.code === 403) {
|
uni.showToast({ title: res.msg, icon: "none", position: 'top' });
|
setTimeout(() => {
|
uni.reLaunch({ url: '../login/login' });
|
}, 1000);
|
} else {
|
uni.showToast({ title: res.msg || '获取数据失败', icon: "none", position: 'top' });
|
}
|
} catch (err) {
|
// request.js 已经处理了错误提示
|
} finally {
|
this.loading = false;
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
/* 引入公共样式 */
|
@import url('@/static/css/common.scss');
|
|
.page-container {
|
padding-bottom: 120rpx;
|
}
|
|
/* 订单头部 */
|
.order-header {
|
background: linear-gradient(135deg, #0081ff 0%, #1890ff 100%);
|
padding: 16rpx 20rpx;
|
}
|
|
.header-content {
|
background: rgba(255, 255, 255, 0.15);
|
border-radius: 10rpx;
|
padding: 12rpx 16rpx;
|
}
|
|
.header-row {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 4rpx 0;
|
}
|
|
.header-label {
|
font-size: 24rpx;
|
color: rgba(255, 255, 255, 0.7);
|
}
|
|
.header-value {
|
font-size: 26rpx;
|
color: #ffffff;
|
font-weight: 500;
|
}
|
|
.header-value.highlight-white {
|
color: #ffeb3b;
|
font-weight: 600;
|
}
|
|
.index {
|
border: 1px solid #e54d42;
|
color: #e54d42;
|
border-radius: 50%;
|
display: block;
|
width: 50rpx;
|
height: 50rpx;
|
line-height: 48rpx;
|
text-align: center;
|
margin-right: 20rpx;
|
font-size: 30rpx;
|
}
|
|
.act .index {
|
background: #0081ff;
|
}
|
|
.act {
|
box-shadow: 0 0 10upx rgba(0, 129, 255, 0.6);
|
}
|
|
/* 空状态 */
|
.empty-state {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 60rpx 0;
|
}
|
|
.empty-text {
|
margin-top: 20rpx;
|
font-size: 28rpx;
|
color: #909399;
|
}
|
|
/* 统计栏 */
|
.stats-bar {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
background: #ffffff;
|
padding: 16rpx 0;
|
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
|
}
|
|
.stats-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
flex: 1;
|
}
|
|
.stats-value {
|
font-size: 32rpx;
|
color: #303133;
|
font-weight: 600;
|
}
|
|
.stats-label {
|
font-size: 20rpx;
|
color: #909399;
|
margin-top: 4rpx;
|
}
|
|
.stats-divider {
|
width: 1rpx;
|
height: 50rpx;
|
background: #e8e8e8;
|
}
|
</style>
|
