|
|
<template> |
|
|
<ifrm> |
|
|
<uni-forms ref="wrForm" class="formBox" label-position="top"> |
|
|
<uni-forms-item label="站点码：" label-width="100px"> |
|
|
<view class="bottom-input-row"> |
|
|
<view class="weight-input-wrapper"> |
|
|
<view class="input-box"> |
|
|
<input |
|
|
type="text" |
|
|
v-model="stationCode" |
|
|
@confirm="handleStationConfirm" |
|
|
placeholder="站点码" |
|
|
class="uni-input-border" |
|
|
confirm-type="done" |
|
|
:focus="stationInputFocus" |
|
|
/> |
|
|
</view> |
|
|
</view> |
|
|
<button |
|
|
@tab="handlePickup" |
|
|
class="submit-btn" |
|
|
:disabled="(stationCode != ''&¤tBox!=null) ? false : true" |
|
|
> |
|
|
取货 |
|
|
</button> |
|
|
</view> |
|
|
<view v-if="activeStation" class="station-info"> |
|
|
<view class="station-left"> |
|
|
<text class="station-check">✓</text> |
|
|
<view class="station-details"> |
|
|
<text class="station-name">{{ activeStation.stationName }}</text> |
|
|
<text class="station-code">{{ activeStation.stationCode }}</text> |
|
|
</view> |
|
|
</view> |
|
|
<view class="station-right"> |
|
|
<text class="station-label">站点状态</text> |
|
|
<text |
|
|
class="station-status" |
|
|
:class="currentBox ? 'status-busy' : 'status-idle'" |
|
|
> |
|
|
{{ activeStation.statusDesc}} |
|
|
</text> |
|
|
</view> |
|
|
</view> |
|
|
</uni-forms-item> |
|
|
</uni-forms> |
|
|
|
|
|
<scroll-view class="details-scroll" scroll-y> |
|
|
<view v-if="!activeStation" class="empty-state"> |
|
|
<text>请扫描站点码查询待取货物料</text> |
|
|
</view> |
|
|
<view v-else-if="!currentBox" class="no-box-state"> |
|
|
<text>该站点当前无物料箱</text> |
|
|
</view> |
|
|
|
|
|
<view v-else class="box-container"> |
|
|
<view class="box-card"> |
|
|
<view class="box-header"> |
|
|
<view class="box-title-section"> |
|
|
<text class="box-icon">📦</text> |
|
|
<view class="box-title-info"> |
|
|
<text class="box-label">当前物料箱</text> |
|
|
<text class="box-code">{{ currentBox.boxCode }}</text> |
|
|
</view> |
|
|
</view> |
|
|
<view class="box-summary"> |
|
|
<text class="box-summary-label">合计</text> |
|
|
<text class="box-summary-value"> |
|
|
{{ currentBox.orders.length }}单 | {{ totalWeight }}g |
|
|
</text> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
<view class="box-orders"> |
|
|
<view class="orders-header"> |
|
|
<text class="orders-icon">📋</text> |
|
|
<text class="orders-title">箱内明细</text> |
|
|
</view> |
|
|
<view class="orders-list"> |
|
|
<view |
|
|
v-for="(order, idx) in currentBox.orders" |
|
|
:key="idx" |
|
|
class="order-item" |
|
|
> |
|
|
<view class="order-info"> |
|
|
<text class="order-no">{{ order.orderNo }}</text> |
|
|
<text class="order-part">零件号: {{ order.partNo }}</text> |
|
|
</view> |
|
|
<text class="order-weight">{{ order.weight }} g</text> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
<!-- <view class="action-section"> |
|
|
<button @click="handlePickup" class="pickup-btn"> |
|
|
<text class="pickup-icon">📦</text> |
|
|
<text class="pickup-text">确认取货 (解绑)</text> |
|
|
</button> |
|
|
</view> --> |
|
|
</view> |
|
|
</scroll-view> |
|
|
|
|
|
<!-- <view v-if="!activeStation" class="help-tip"> |
|
|
<view class="tip-content"> |
|
|
<text class="tip-icon">ℹ️</text> |
|
|
<text class="tip-text">测: ST001 (有货), ST002 (无货)</text> |
|
|
</view> |
|
|
</view> --> |
|
|
</ifrm> |
|
|
</template> |
|
|
|
|
|
<script> |
|
|
import ifrm from "@/pages/index/ifrm"; |
|
|
export default { |
|
|
components: { |
|
|
ifrm, |
|
|
}, |
|
|
onNavigationBarButtonTap(btn) { |
|
|
this.$refs.ifrm.topMenuClick(btn); |
|
|
}, |
|
|
data() { |
|
|
return { |
|
|
stationCode: "", |
|
|
activeStation: null, |
|
|
boxData:null, |
|
|
currentBox: null, |
|
|
stationInputFocus: true, |
|
|
}; |
|
|
}, |
|
|
computed: { |
|
|
totalWeight() { |
|
|
if (!this.currentBox || !this.currentBox.orders) return 0; |
|
|
return this.currentBox.orders.reduce((sum, o) => sum + o.weight, 0); |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
// 站点查询数据 |
|
|
handleStationConfirm() { |
|
|
const code = this.stationCode.trim(); |
|
|
if (!code) return; |
|
|
|
|
|
this.$u.api |
|
|
.getStationNameBoxbarcode({ stationCode: this.stationCode }) |
|
|
.then((res) => { |
|
|
this.activeStation = res.data.station; |
|
|
this.boxData = res.data.boxbarcodeDetailsVO; |
|
|
this.stationCode = ""; |
|
|
}); |
|
|
|
|
|
}, |
|
|
// 取货 |
|
|
handlePickup() { |
|
|
if (!this.currentBox) return; |
|
|
const pickedBoxCode = this.currentBox.boxCode; |
|
|
this.$u.api |
|
|
.receiveOrder({ stationCode: this.stationCode }) |
|
|
.then((res) => { |
|
|
console.log("物料解绑", res.data); |
|
|
this.currentBox = null; |
|
|
uni.showToast({ |
|
|
title: `物料箱 ${pickedBoxCode} 取货(解绑)成功!`, |
|
|
icon: "success", |
|
|
}); |
|
|
|
|
|
this.stationCode = ""; |
|
|
this.activeStation = null; |
|
|
this.stationInputFocus = true; |
|
|
}); |
|
|
}, |
|
|
|
|
|
handleReset() { |
|
|
this.activeStation = null; |
|
|
this.currentBox = null; |
|
|
this.stationCode = ""; |
|
|
this.stationInputFocus = true; |
|
|
}, |
|
|
}, |
|
|
}; |
|
|
</script> |
|
|
|
|
|
<style scoped> |
|
|
.page-container { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
height: 100vh; |
|
|
background-color: #ffffff; |
|
|
user-select: none; |
|
|
font-size: 26rpx; |
|
|
} |
|
|
|
|
|
.header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
padding: 6rpx 16rpx; |
|
|
background-color: #1d4ed8; |
|
|
color: #ffffff; |
|
|
flex-shrink: 0; |
|
|
z-index: 20; |
|
|
} |
|
|
|
|
|
.header-title { |
|
|
font-weight: bold; |
|
|
font-size: 28rpx; |
|
|
letter-spacing: 1rpx; |
|
|
} |
|
|
|
|
|
.header-btn { |
|
|
background-color: #1e40af; |
|
|
color: #ffffff; |
|
|
padding: 4rpx 16rpx; |
|
|
border-radius: 4rpx; |
|
|
font-size: 22rpx; |
|
|
font-weight: bold; |
|
|
border: 2rpx solid #2563eb; |
|
|
} |
|
|
|
|
|
.header-btn:active { |
|
|
background-color: #1e3a8a; |
|
|
} |
|
|
|
|
|
.content-container { |
|
|
flex: 1; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
min-height: 0; |
|
|
background-color: #f8fafc; |
|
|
} |
|
|
|
|
|
.scan-section { |
|
|
background-color: #ffffff; |
|
|
border-bottom: 4rpx solid #cbd5e1; |
|
|
flex-shrink: 0; |
|
|
padding: 16rpx; |
|
|
} |
|
|
|
|
|
.module-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
color: #1e293b; |
|
|
font-weight: bold; |
|
|
margin-bottom: 8rpx; |
|
|
} |
|
|
|
|
|
.module-icon { |
|
|
font-size: 32rpx; |
|
|
margin-right: 8rpx; |
|
|
} |
|
|
|
|
|
.module-title { |
|
|
font-size: 26rpx; |
|
|
} |
|
|
|
|
|
.scan-input { |
|
|
width: 100%; |
|
|
padding: 16rpx; |
|
|
background-color: #ffffff; |
|
|
border: 4rpx solid #94a3b8; |
|
|
border-radius: 4rpx; |
|
|
font-size: 28rpx; |
|
|
font-weight: bold; |
|
|
color: #0f172a; |
|
|
} |
|
|
|
|
|
.scan-input::placeholder { |
|
|
color: #94a3b8; |
|
|
font-weight: normal; |
|
|
} |
|
|
|
|
|
.station-info { |
|
|
margin-top: 16rpx; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
background-color: #d1fae5; |
|
|
border: 2rpx solid #6ee7b7; |
|
|
padding: 16rpx; |
|
|
border-radius: 4rpx; |
|
|
} |
|
|
|
|
|
.station-left { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.station-check { |
|
|
font-size: 40rpx; |
|
|
color: #059669; |
|
|
margin-right: 12rpx; |
|
|
} |
|
|
|
|
|
.station-details { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.station-name { |
|
|
color: #065f46; |
|
|
font-weight: bold; |
|
|
font-size: 28rpx; |
|
|
} |
|
|
|
|
|
.station-code { |
|
|
color: #059669; |
|
|
font-size: 22rpx; |
|
|
} |
|
|
|
|
|
.station-right { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
text-align: right; |
|
|
} |
|
|
|
|
|
.station-label { |
|
|
color: #475569; |
|
|
font-size: 22rpx; |
|
|
} |
|
|
|
|
|
.station-status { |
|
|
font-weight: bold; |
|
|
font-size: 28rpx; |
|
|
} |
|
|
|
|
|
.status-busy { |
|
|
color: #1d4ed8; |
|
|
} |
|
|
|
|
|
.status-idle { |
|
|
color: #64748b; |
|
|
} |
|
|
|
|
|
.details-scroll { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.empty-state { |
|
|
text-align: center; |
|
|
padding: 64rpx 0; |
|
|
color: #94a3b8; |
|
|
font-weight: 500; |
|
|
font-size: 24rpx; |
|
|
margin: auto; |
|
|
} |
|
|
|
|
|
.no-box-state { |
|
|
text-align: center; |
|
|
padding: 64rpx 0; |
|
|
color: #64748b; |
|
|
font-weight: bold; |
|
|
font-size: 28rpx; |
|
|
background-color: #f1f5f9; |
|
|
border: 2rpx solid #e2e8f0; |
|
|
border-radius: 4rpx; |
|
|
margin-top: 16rpx; |
|
|
} |
|
|
|
|
|
.box-container { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
.box-card { |
|
|
background-color: #ffffff; |
|
|
border: 4rpx solid #cbd5e1; |
|
|
border-radius: 4rpx; |
|
|
overflow: hidden; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
margin-bottom: 16rpx; |
|
|
} |
|
|
|
|
|
.box-header { |
|
|
padding: 16rpx; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
background-color: #eff6ff; |
|
|
border-bottom: 4rpx solid #e2e8f0; |
|
|
} |
|
|
|
|
|
.box-title-section { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.box-icon { |
|
|
font-size: 48rpx; |
|
|
margin-right: 16rpx; |
|
|
} |
|
|
|
|
|
.box-title-info { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.box-label { |
|
|
color: #64748b; |
|
|
font-size: 22rpx; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.box-code { |
|
|
font-weight: bold; |
|
|
color: #0f172a; |
|
|
font-size: 32rpx; |
|
|
} |
|
|
|
|
|
.box-summary { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: flex-end; |
|
|
} |
|
|
|
|
|
.box-summary-label { |
|
|
color: #64748b; |
|
|
font-size: 22rpx; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.box-summary-value { |
|
|
font-weight: bold; |
|
|
color: #059669; |
|
|
font-size: 28rpx; |
|
|
} |
|
|
|
|
|
.box-orders { |
|
|
padding: 16rpx; |
|
|
background-color: #ffffff; |
|
|
} |
|
|
|
|
|
.orders-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
color: #334155; |
|
|
font-weight: bold; |
|
|
margin-bottom: 12rpx; |
|
|
padding: 0 4rpx; |
|
|
} |
|
|
|
|
|
.orders-icon { |
|
|
font-size: 32rpx; |
|
|
margin-right: 8rpx; |
|
|
} |
|
|
|
|
|
.orders-title { |
|
|
font-size: 26rpx; |
|
|
} |
|
|
|
|
|
.orders-list { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 12rpx; |
|
|
} |
|
|
|
|
|
.order-item { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
padding: 16rpx; |
|
|
background-color: #f8fafc; |
|
|
border: 2rpx solid #e2e8f0; |
|
|
border-radius: 4rpx; |
|
|
} |
|
|
|
|
|
.order-info { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.order-no { |
|
|
font-weight: bold; |
|
|
color: #0f172a; |
|
|
font-size: 26rpx; |
|
|
} |
|
|
|
|
|
.order-part { |
|
|
color: #475569; |
|
|
font-size: 22rpx; |
|
|
margin-top: 4rpx; |
|
|
} |
|
|
|
|
|
.order-weight { |
|
|
font-weight: bold; |
|
|
color: #059669; |
|
|
font-size: 26rpx; |
|
|
} |
|
|
|
|
|
.action-section { |
|
|
margin-top: auto; |
|
|
padding-top: 16rpx; |
|
|
padding-bottom: 8rpx; |
|
|
} |
|
|
|
|
|
.pickup-btn { |
|
|
width: 100%; |
|
|
padding: 24rpx; |
|
|
background-color: #1d4ed8; |
|
|
color: #ffffff; |
|
|
font-weight: bold; |
|
|
border-radius: 4rpx; |
|
|
font-size: 32rpx; |
|
|
border: 4rpx solid #1e3a8a; |
|
|
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.pickup-btn:active { |
|
|
background-color: #1e40af; |
|
|
} |
|
|
|
|
|
.pickup-icon { |
|
|
font-size: 40rpx; |
|
|
margin-right: 16rpx; |
|
|
} |
|
|
|
|
|
.pickup-text { |
|
|
font-size: 32rpx; |
|
|
} |
|
|
|
|
|
.help-tip { |
|
|
position: absolute; |
|
|
top: 35%; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
pointer-events: none; |
|
|
opacity: 0.5; |
|
|
z-index: 10; |
|
|
} |
|
|
|
|
|
.tip-content { |
|
|
background-color: #1e293b; |
|
|
color: #ffffff; |
|
|
font-size: 20rpx; |
|
|
padding: 8rpx 16rpx; |
|
|
border-radius: 4rpx; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.tip-icon { |
|
|
margin-right: 8rpx; |
|
|
font-size: 24rpx; |
|
|
} |
|
|
|
|
|
.tip-text { |
|
|
font-size: 20rpx; |
|
|
} |
|
|
|
|
|
.bottom-input-row { |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
margin-bottom: 12px; |
|
|
} |
|
|
|
|
|
.weight-input-wrapper { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.submit-btn { |
|
|
width: 88px; |
|
|
height: 50px; |
|
|
background-color: #155dfc; |
|
|
border-radius: 10px; |
|
|
color: #ffffff; |
|
|
font-size: 16px; |
|
|
font-weight: 500; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), |
|
|
0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
|
|
border: none; |
|
|
padding: 0; |
|
|
line-height: 50px; |
|
|
} |
|
|
|
|
|
.submit-btn.disabled { |
|
|
opacity: 0.5; |
|
|
} |
|
|
</style>
|
|
|
|
