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.
606 lines
12 KiB
606 lines
12 KiB
<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="boxCode" |
|
@confirm="handleBoxConfirm" |
|
placeholder="物料箱条码" |
|
class="uni-input-border" |
|
confirm-type="done" |
|
:focus="boxInputFocus" |
|
/> |
|
</view> |
|
</view> |
|
<button |
|
@click="handleSubmit" |
|
:disabled="!startData || !endCenter" |
|
class="submit-btn" |
|
:class="{ 'btn-disabled': !startData || !endCenter }" |
|
> |
|
配送 |
|
</button> |
|
</view> |
|
<view v-if="boxData" class="box-info"> |
|
<view class="info-section"> |
|
<text class="info-text"> |
|
包含订单: |
|
<text class="info-value">{{ boxData.quantity }}</text> 单 |
|
</text> |
|
<text class="info-text"> |
|
对应中心: |
|
<text class="info-value-center">{{ boxData.wcName }}</text> |
|
</text> |
|
</view> |
|
<button @click="detailsFn()" class="details-btn"> |
|
明细 <text class="arrow">›</text> |
|
</button> |
|
</view> |
|
</uni-forms-item> |
|
<uni-forms-item label="配送起点：" label-width="100px"> |
|
<input |
|
type="text" |
|
v-model="startCode" |
|
@confirm="handleStartConfirm" |
|
placeholder="站点码" |
|
class="uni-input-border" |
|
confirm-type="done" |
|
:focus="startInputFocus" |
|
/> |
|
<view v-if="startData" class="start-confirm"> |
|
<text class="check-icon">✓</text> |
|
<text class="confirm-text">已确认: {{ startData.stationName }}</text> |
|
</view> |
|
</uni-forms-item> |
|
<uni-forms-item label="终点(作业中心)：" label-width="150px"> |
|
<picker |
|
mode="selector" |
|
:range="workCenters" |
|
range-key="name" |
|
:value="endCenterIndex" |
|
@change="handleEndChange" |
|
class="uni-input-border" |
|
> |
|
<view class="picker-input"> |
|
<text :class="endCenter ? 'picker-value' : 'picker-placeholder'"> |
|
{{ endCenter || "请选择终点" }} |
|
</text> |
|
</view> |
|
</picker> |
|
</uni-forms-item> |
|
</uni-forms> |
|
|
|
<view v-if="showDetails" class="popup-overlay" @click="showDetails = false"> |
|
<view class="popup-content" @click.stop> |
|
<view class="popup-header"> |
|
<text class="popup-title">箱 {{ boxData.boxBarcode }} 明细</text> |
|
</view> |
|
<scroll-view class="popup-scroll" scroll-y> |
|
<view class="popup-orders"> |
|
<view |
|
v-for="(order, index) in yieldOrderList" |
|
:key="index" |
|
class="popup-order-item" |
|
> |
|
<view class="popup-order-header"> |
|
<text class="popup-order-no">{{ order.partCode }}</text> |
|
<text class="popup-order-qty">{{ order.actualWeighing }}g</text> |
|
</view> |
|
<text class="popup-order-name">{{ order.partName }}</text> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
<view class="popup-footer"> |
|
<button @click="showDetails = false" class="popup-close-btn"> |
|
关闭 |
|
</button> |
|
</view> |
|
</view> |
|
</view> |
|
</ifrm> |
|
</template> |
|
|
|
<script> |
|
import ifrm from "@/pages/index/ifrm"; |
|
|
|
export default { |
|
components: { |
|
ifrm, |
|
}, |
|
data() { |
|
return { |
|
boxCode: "", |
|
startCode: "", |
|
boxData: null, |
|
startData: null, |
|
endCenter: "", |
|
showDetails: false, |
|
boxInputFocus: true, |
|
startInputFocus: false, |
|
mockBoxes: {}, |
|
mockStarts: { |
|
ST001: { stationCode: "ST001", stationName: "镀前总仓区" }, |
|
ST002: { stationCode: "ST002", stationName: "A区暂存点" }, |
|
}, |
|
workCenters: [], |
|
yieldOrderList: [], //订单明细 |
|
}; |
|
}, |
|
computed: { |
|
endCenterIndex() { |
|
if (!this.endCenter) return 0; |
|
|
|
const index = this.workCenters.find((c) => c.name === this.endCenter); |
|
console.log(9999, this.endCenter, index.id); |
|
return index.id; |
|
}, |
|
}, |
|
mounted() { |
|
this.getWorkCenterList(); |
|
}, |
|
methods: { |
|
// 获取订单明细 |
|
detailsFn() { |
|
this.showDetails = true; |
|
this.$u.api |
|
.boxbarcodeDetails({ boxBarcode: this.boxData.boxBarcode }) |
|
.then((res) => { |
|
console.log(9999, res.data); |
|
this.yieldOrderList = res.data.yieldOrderList; |
|
}); |
|
}, |
|
handleBoxConfirm() { |
|
const code = this.boxCode.trim(); |
|
if (!code) return; |
|
this.$u.api |
|
.getQuantityLocation({ boxBarcode: this.boxCode }) |
|
.then((res) => { |
|
this.boxData = res.data; |
|
this.boxInputFocus = false; |
|
this.startInputFocus = true; |
|
// this.endCenter = ""; |
|
// this.boxCode = ""; |
|
}); |
|
// const data = this.mockBoxes[code]; |
|
// if (data) { |
|
// this.boxData = data; |
|
// this.endCenter = data.targetWorkCenter; |
|
// uni.showToast({ |
|
// title: `已识别物料箱 ${code}`, |
|
// icon: "success", |
|
// }); |
|
// this.boxInputFocus = false; |
|
// this.startInputFocus = true; |
|
// } else { |
|
// uni.showToast({ |
|
// title: "未查询到该物料箱信息", |
|
// icon: "none", |
|
// }); |
|
// this.boxData = null; |
|
// this.endCenter = ""; |
|
// this.boxCode = ""; |
|
// } |
|
}, |
|
|
|
handleStartConfirm() { |
|
const code = this.startCode.trim(); |
|
if (!code) return; |
|
this.$u.api |
|
.getStationName({ stationCode: this.startCode }) |
|
.then((res) => { |
|
console.log("起点站点", res.data); |
|
this.startData = res.data; |
|
this.startInputFocus = false; |
|
}); |
|
}, |
|
|
|
handleEndChange(e) { |
|
const index = e.detail.value; |
|
this.endCenter = this.workCenters[index].name; |
|
}, |
|
|
|
// 获取作业中心列表 |
|
getWorkCenterList() { |
|
this.$u.api.getWorkCenter().then((res) => { |
|
console.log(res.data); |
|
this.workCenters = res.data.map((c) => ({ |
|
id: c.id, |
|
name: c.wcName, |
|
})); |
|
}); |
|
}, |
|
|
|
handleSubmit() { |
|
uni.showLoading({ |
|
title: "提交中...", |
|
}); |
|
let query_ = { |
|
boxBarcode: this.boxBarcode||'', //箱条码 |
|
startStationCode: this.startData.stationCode, //开始站点 |
|
endWcId: this.endCenterIndex, //终点作业中心 |
|
}; |
|
this.$u.api.boxBindingTesk(query_).then((res) => { |
|
uni.showToast({ |
|
title: `成功配送至 ${this.endCenter}!`, |
|
icon: "success", |
|
}); |
|
uni.hideLoading() |
|
|
|
this.boxCode = ""; |
|
this.boxData = null; |
|
this.startCode = ""; |
|
this.startData = null; |
|
this.endCenter = ""; |
|
this.boxInputFocus = true; |
|
this.startInputFocus = false; |
|
}).catch(err=>{ |
|
uni.hideLoading() |
|
}) |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped> |
|
.page-container { |
|
display: flex; |
|
flex-direction: column; |
|
height: 100vh; |
|
background-color: #ffffff; |
|
user-select: none; |
|
font-size: 26rpx; |
|
position: relative; |
|
} |
|
|
|
.header { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
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; |
|
} |
|
|
|
.content-scroll { |
|
flex: 1; |
|
overflow-y: auto; |
|
display: flex; |
|
flex-direction: column; |
|
background-color: #ffffff; |
|
} |
|
|
|
.module { |
|
padding: 16rpx; |
|
border-bottom: 4rpx solid #e2e8f0; |
|
} |
|
|
|
.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; |
|
} |
|
|
|
.box-info { |
|
margin-top: 12rpx; |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
background-color: #f8fafc; |
|
padding: 12rpx; |
|
border-radius: 4rpx; |
|
border: 2rpx solid #e2e8f0; |
|
} |
|
|
|
.info-section { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 4rpx; |
|
flex: 1; |
|
} |
|
|
|
.info-text { |
|
color: #475569; |
|
font-size: 26rpx; |
|
} |
|
|
|
.info-value { |
|
font-weight: bold; |
|
color: #0f172a; |
|
margin-left: 4rpx; |
|
} |
|
|
|
.info-value-center { |
|
font-weight: bold; |
|
color: #1d4ed8; |
|
margin-left: 4rpx; |
|
} |
|
|
|
.details-btn { |
|
color: #1d4ed8; |
|
background-color: #dbeafe; |
|
font-weight: bold; |
|
border: 2rpx solid #bfdbfe; |
|
font-size: 26rpx; |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.details-btn:active { |
|
background-color: #bfdbfe; |
|
} |
|
|
|
.arrow { |
|
margin-left: 4rpx; |
|
font-size: 24rpx; |
|
} |
|
|
|
.start-confirm { |
|
margin-top: 8rpx; |
|
display: flex; |
|
align-items: center; |
|
font-weight: bold; |
|
color: #059669; |
|
} |
|
|
|
.check-icon { |
|
font-size: 28rpx; |
|
margin-right: 8rpx; |
|
} |
|
|
|
.confirm-text { |
|
font-size: 26rpx; |
|
} |
|
|
|
.picker-input { |
|
width: 100%; |
|
padding: 16rpx; |
|
} |
|
|
|
.picker-disabled { |
|
opacity: 0.5; |
|
} |
|
|
|
.picker-value { |
|
font-size: 28rpx; |
|
font-weight: bold; |
|
color: #0f172a; |
|
} |
|
|
|
.picker-placeholder { |
|
font-size: 28rpx; |
|
color: #94a3b8; |
|
} |
|
|
|
.footer { |
|
padding: 16rpx; |
|
background-color: #f1f5f9; |
|
border-top: 2rpx solid #cbd5e1; |
|
flex-shrink: 0; |
|
} |
|
|
|
.submit-btn { |
|
width: 100%; |
|
background-color: #1d4ed8; |
|
color: #ffffff; |
|
padding: 20rpx; |
|
border-radius: 4rpx; |
|
font-weight: bold; |
|
font-size: 30rpx; |
|
border: none; |
|
} |
|
|
|
.submit-btn:active { |
|
background-color: #1e40af; |
|
} |
|
|
|
.btn-disabled { |
|
opacity: 0.5; |
|
background-color: rgba(29, 78, 216, 0.5); |
|
} |
|
|
|
/* Popup Styles */ |
|
.popup-overlay { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
background-color: rgba(0, 0, 0, 0.5); |
|
z-index: 100; |
|
display: flex; |
|
align-items: flex-end; |
|
} |
|
|
|
.popup-content { |
|
background-color: #ffffff; |
|
border-radius: 16rpx 16rpx 0 0; |
|
max-height: 70vh; |
|
width: 100%; |
|
display: flex; |
|
flex-direction: column; |
|
border-top: 4rpx solid #94a3b8; |
|
} |
|
|
|
.popup-header { |
|
padding: 24rpx; |
|
background-color: #ffffff; |
|
border-bottom: 4rpx solid #e2e8f0; |
|
flex-shrink: 0; |
|
text-align: center; |
|
} |
|
|
|
.popup-title { |
|
font-weight: bold; |
|
font-size: 30rpx; |
|
color: #0f172a; |
|
text-align: center; |
|
} |
|
|
|
.popup-scroll { |
|
flex: 1; |
|
padding: 24rpx; |
|
overflow-y: auto; |
|
width: auto; |
|
} |
|
|
|
.popup-orders { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 16rpx; |
|
} |
|
|
|
.popup-order-item { |
|
background-color: #f8fafc; |
|
padding: 16rpx; |
|
border: 2rpx solid #cbd5e1; |
|
border-radius: 4rpx; |
|
} |
|
|
|
.popup-order-header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-bottom: 8rpx; |
|
} |
|
|
|
.popup-order-no { |
|
font-weight: bold; |
|
color: #0f172a; |
|
font-size: 26rpx; |
|
} |
|
|
|
.popup-order-qty { |
|
color: #1d4ed8; |
|
font-weight: bold; |
|
font-size: 26rpx; |
|
} |
|
|
|
.popup-order-name { |
|
color: #475569; |
|
font-size: 24rpx; |
|
} |
|
|
|
.popup-footer { |
|
padding: 16rpx; |
|
background-color: #f1f5f9; |
|
border-top: 2rpx solid #cbd5e1; |
|
flex-shrink: 0; |
|
} |
|
|
|
.popup-close-btn { |
|
width: 100%; |
|
background-color: #ffffff; |
|
border: 4rpx solid #94a3b8; |
|
color: #1e293b; |
|
padding: 16rpx; |
|
border-radius: 4rpx; |
|
font-weight: bold; |
|
font-size: 28rpx; |
|
} |
|
|
|
.popup-close-btn:active { |
|
background-color: #e2e8f0; |
|
} |
|
|
|
.help-tip { |
|
position: absolute; |
|
top: 45%; |
|
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>
|
|
|