<template>
|
<view>
|
<scroll-view scroll-y>
|
|
<!-- Pallet Barcode -->
|
<view class="square-2">
|
<view class="square-title">
|
<view class="title-sign"><view class="sign"></view></view>
|
<view class="title-text"><text>Pallet Barcode</text></view>
|
</view>
|
<view class="square-content">
|
<view class="content-input">
|
<input
|
v-model="barcode"
|
placeholder="Scan / Input Pallet Code"
|
maxlength="10"
|
:focus="barcodeFocus"
|
@input="barcodeInput"
|
/>
|
<uni-icons type="closeempty" size="20" color="#dadada" @click="removeBarcode" />
|
</view>
|
</view>
|
</view>
|
|
<!-- Title -->
|
<view class="square-1">
|
<view class="square-title">
|
<view class="title-sign"><view class="sign"></view></view>
|
<view class="title-text"><text>Pallet Info</text></view>
|
</view>
|
</view>
|
|
<!-- No Data -->
|
<view class="square-none" v-if="matList.length === 0">
|
<view class="v-show">No data</view>
|
</view>
|
|
<!-- List -->
|
<view
|
v-for="(item, index) in matList"
|
:key="index"
|
class="data-list"
|
:class="item.confirmed ? 'bg-true' : 'bg-false'"
|
>
|
<view class="data-list-left">
|
<view>
|
<text>Code: {{ item.matnr }}</text>
|
<text style="margin-left: 40rpx;">Name: {{ item.maknx }}</text>
|
</view>
|
<view>
|
<text>PO Number: {{ item.boxType3 }}</text>
|
</view>
|
<view>
|
<text>Customer PO: {{ item.standby1 }}</text>
|
<text style="margin-left: 40rpx;">SKU: {{ item.standby3 }}</text>
|
</view>
|
<view>
|
<text>UPC: {{ item.standby2 }}</text>
|
</view>
|
<view>
|
<!-- <text>Pick/Count Qty: {{ item.count }}</text> -->
|
<text style="margin-left: 40rpx;">Total Qty: {{ item.anfme }}</text>
|
</view>
|
</view>
|
|
<!-- Right Confirm -->
|
<view class="data-list-right">
|
<button
|
v-if="!item.confirmed"
|
class="confirm-btn"
|
@click="confirmRow(index)"
|
>
|
Confirm
|
</button>
|
<text v-else class="confirmed-text">Confirmed</text>
|
</view>
|
</view>
|
|
</scroll-view>
|
|
<!-- Bottom Button -->
|
<view class="footer">
|
<button class="cu-btn bg-blue" @click="confirmAndClear">
|
Confirm & Clear
|
</button>
|
</view>
|
|
<!-- Success Popup -->
|
<uni-popup ref="successPopup" type="center">
|
<view class="success-popup">
|
<uni-icons type="checkbox-filled" size="60" color="#19be6b"></uni-icons>
|
<view class="success-text">Unbind Successful</view>
|
</view>
|
</uni-popup>
|
</view>
|
</template>
|
|
|
<script>
|
export default {
|
data() {
|
return {
|
barcode: "",
|
barcodeFocus: true,
|
matList: [],
|
commonUrl: "",
|
baseIP: "",
|
basePORT: "",
|
baseUrl: "",
|
};
|
},
|
|
mounted() {
|
const UIP = uni.getStorageSync("UIP");
|
this.baseIP = UIP;
|
const UPORT = uni.getStorageSync("UPORT");
|
this.basePORT = UPORT;
|
const PROJ = uni.getStorageSync("UPROJ");
|
this.baseUrl = PROJ;
|
this.getUrl();
|
},
|
|
methods: {
|
getUrl() {
|
this.commonUrl = this.baseHttp + this.baseIP + ":" + this.basePORT + "/" + this.baseUrl;
|
},
|
/* Scan Pallet Barcode */
|
barcodeInput() {
|
if (this.barcode.length !== 8) return;
|
this.getPickList();
|
},
|
|
/* Call Interface */
|
getPickList() {
|
uni.showLoading();
|
|
uni.request({
|
url: this.commonUrl + "/open/asrs/comb/v1/getCombList",
|
method: "POST",
|
data: {
|
barcode: this.barcode,
|
},
|
header: { token: uni.getStorageSync("token") },
|
success: res => {
|
uni.hideLoading();
|
const r = res.data;
|
if (r.code === 200) {
|
this.matList = (r.data || []).map(item => ({
|
...item,
|
confirmed: false,
|
}));
|
} else {
|
uni.showToast({ title: r.msg || "Fetch failed", icon: "none" });
|
}
|
},
|
fail() {
|
uni.hideLoading();
|
uni.showToast({ title: "Request failed", icon: "none" });
|
},
|
});
|
},
|
|
/* Single Row Confirmation */
|
confirmRow(index) {
|
const item = this.matList[index];
|
if (item.count <= 0 || item.count > item.total) {
|
uni.showToast({
|
title: "Invalid Pick/Count Quantity",
|
icon: "none",
|
});
|
return;
|
}
|
this.$set(this.matList[index], "confirmed", true);
|
uni.vibrateShort();
|
},
|
|
/* Confirm & Clear */
|
confirmAndClear() {
|
if (!this.matList.length) {
|
uni.showToast({ title: "No picking data available", icon: "none" });
|
return;
|
}
|
|
const hasUnConfirm = this.matList.some(i => !i.confirmed);
|
if (hasUnConfirm) {
|
uni.showToast({
|
title: "Please confirm all items first",
|
icon: "none",
|
});
|
return;
|
}
|
|
uni.showLoading({ title: "Unbinding..." });
|
|
uni.request({
|
url: this.commonUrl + "/open/asrs/comb/v1/deleteComb",
|
method: "POST",
|
data: {
|
barcode: this.barcode,
|
},
|
header: { token: uni.getStorageSync("token") },
|
success: res => {
|
uni.hideLoading();
|
const r = res.data;
|
if (r.code === 200) {
|
this.removeBarcode();
|
// Open success popup
|
this.$refs.successPopup.open();
|
// Auto close after 1.5s
|
setTimeout(() => {
|
this.$refs.successPopup.close();
|
}, 1500);
|
} else {
|
uni.showToast({ title: r.msg || "Unbind failed", icon: "none" });
|
}
|
},
|
fail: () => {
|
uni.hideLoading();
|
uni.showToast({ title: "Request failed", icon: "none" });
|
}
|
});
|
},
|
|
removeBarcode() {
|
this.barcode = "";
|
this.barcodeFocus = false;
|
this.matList = [];
|
this.$nextTick(() => (this.barcodeFocus = true));
|
},
|
},
|
};
|
|
</script>
|
|
<style>
|
.data-list {
|
background-color: #fff;
|
margin: 15rpx;
|
padding: 20rpx;
|
border-radius: 20rpx;
|
display: flex;
|
}
|
|
.bg-true {
|
background-color: #f0f9eb;
|
}
|
|
.data-list-left {
|
flex: 1;
|
font-size: 24rpx;
|
color: #666;
|
}
|
|
.data-list-right {
|
width: 120rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.confirm-btn {
|
background-color: #1e9fff;
|
color: #fff;
|
font-size: 24rpx;
|
border-radius: 10rpx;
|
width: 150rpx;
|
height: 50rpx;
|
line-height: 50rpx;
|
}
|
|
.confirmed-text {
|
color: #67c23a;
|
font-size: 26rpx;
|
}
|
|
.footer {
|
position: fixed;
|
bottom: 0;
|
width: 100%;
|
background: #fff;
|
padding: 20rpx;
|
|
display: flex;
|
justify-content: center; /* Horizontal Center */
|
align-items: center; /* Vertical Center */
|
}
|
|
.success-popup {
|
background-color: #fff;
|
width: 400rpx;
|
height: 350rpx;
|
border-radius: 20rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 20rpx;
|
}
|
|
.success-text {
|
margin-top: 20rpx;
|
font-size: 32rpx;
|
color: #333;
|
text-align: center;
|
font-weight: bold;
|
}
|
|
|
</style>
|
