中航光电PDA端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

584 lines
11 KiB

3 weeks ago
<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 != ''&&currentBox!=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,
},
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>