<template>
|
<view>
|
<view class="nav_item form-container">
|
<form :modelValue="scanFormData">
|
<view class="form-group">
|
<label class="form-label">出库单号:</label>
|
<superwei-combox :candidates="itemOutNoList" placeholder="请选择/扫描出库单号"
|
v-model="scanFormData.itemOutNo"
|
@select="onOutNoChange"
|
class="picker form-input"
|
style="border: none;" :isJSON="true" keyName="billNo" :focus="focus1" @focus="getFocus(1)"></superwei-combox>
|
</view>
|
<view class="form-group">
|
<label class="form-label">物料条码:</label>
|
<input class="form-input" placeholder="请扫描物料条码" type="text"
|
v-model="scanFormData.barcode" :focus="focus2" @confirm="checkWl" @focus="getFocus(2)"/>
|
</view>
|
<view class="form-group">
|
<label class="form-label">物料编码:</label>
|
<input class="form-input" disabled="true" type="text" v-model="scanFormData.itemNo"/>
|
</view>
|
<view class="form-group">
|
<label class="form-label">数量:</label>
|
<input class="form-input" type="text" v-model="scanFormData.quantity"/>
|
</view>
|
</form>
|
</view>
|
|
<view class="text" v-if="Message">
|
<text v-text="Message"></text>
|
</view>
|
|
<view class="container">
|
<view class="tab-bar">
|
<view
|
class="tab-item"
|
:class="{ active: currentTab === 0 }"
|
@click="changeTab(0)">
|
待出库物料
|
</view>
|
<view
|
class="tab-item"
|
:class="{ active: currentTab === 1 }"
|
@click="changeTab(1)">
|
已扫条码
|
</view>
|
<view
|
class="tab-item"
|
:class="{ active: currentTab === 2 }"
|
@click="changeTab(2)">
|
出库单
|
</view>
|
</view>
|
<!-- 内容区域 -->
|
<scroll-view class="content pdmg0">
|
<view v-if="currentTab === 0" class="tab-content pdmg0">
|
<view class="list-container pdmg0">
|
<uni-table ref="table" border emptyText="暂无更多数据">
|
<uni-tr>
|
<uni-th align="center" class="th">物料编号</uni-th>
|
<uni-th align="center" class="th">申请数量</uni-th>
|
<uni-th align="center" class="th">规格型号</uni-th>
|
<uni-th align="center" class="th">物料名称</uni-th>
|
<uni-th align="center" class="th">已扫码数</uni-th>
|
<uni-th align="center" class="th">备注信息</uni-th>
|
<uni-th align="center" class="th">单位</uni-th>
|
</uni-tr>
|
<uni-tr v-for="(item, index) in outItems" :key="index">
|
<uni-td><text>{{item.itemNo}}</text></uni-td>
|
<uni-td><text>{{item.quantity}}</text></uni-td>
|
<uni-td><text>{{item.itemModel}}</text></uni-td>
|
<uni-td><text>{{item.itemName}}</text></uni-td>
|
<uni-td><text>{{item.quantityOk}}</text></uni-td>
|
<uni-td><text>{{item.remark}}</text></uni-td>
|
<uni-td><text>{{item.itemUnit}}</text></uni-td>
|
</uni-tr>
|
</uni-table>
|
</view>
|
</view>
|
<view v-if="currentTab === 1" class="tab-content pdmg0">
|
<view class="list-container pdmg0">
|
<uni-table ref="table" border emptyText="暂无更多数据">
|
<uni-tr>
|
<uni-th align="center" class="th">移出仓库编号</uni-th>
|
<uni-th align="center" class="th">物料名称</uni-th>
|
<uni-th align="center" class="th">规格型号</uni-th>
|
<uni-th align="center" class="th">移出库位编号</uni-th>
|
<uni-th align="center" class="th">产品型号</uni-th>
|
<uni-th align="center" class="th">单位</uni-th>
|
<uni-th align="center" class="th">调入货位CODE</uni-th>
|
<uni-th align="center" class="th">调入仓库</uni-th>
|
<uni-th align="center" class="th">数量</uni-th>
|
<uni-th align="center" class="th">批次</uni-th>
|
<uni-th align="center" class="th">物料编码</uni-th>
|
<uni-th align="center" class="th">调入</uni-th>
|
<uni-th align="center" class="th">物料条码</uni-th>
|
</uni-tr>
|
<uni-tr v-for="(item, index) in barcodeList" :key="index">
|
<uni-td><text>{{item.fromDepotsCode}}</text></uni-td>
|
<uni-td><text>{{item.itemName}}</text></uni-td>
|
<uni-td><text>{{item.itemModel}}</text></uni-td>
|
<uni-td><text>{{item.fromDepotSectionCode}}</text></uni-td>
|
<uni-td><text>{{item.boardStyle}}</text></uni-td>
|
<uni-td><text>{{item.itemUnit}}</text></uni-td>
|
<uni-td><text>{{item.invDepotSectionsCode}}</text></uni-td>
|
<uni-td><text>{{item.invDepotsCode}}</text></uni-td>
|
<uni-td><text>{{item.quantity}}</text></uni-td>
|
<uni-td><text>{{item.lotNo}}</text></uni-td>
|
<uni-td><text>{{item.itemNo}}</text></uni-td>
|
<uni-td><text>{{item.mok}}</text></uni-td>
|
<uni-td><text>{{item.itemBarcode}}</text></uni-td>
|
</uni-tr>
|
</uni-table>
|
</view>
|
</view>
|
<view v-if="currentTab === 2" class="tab-content pdmg0">
|
<view>
|
<view class="form-group">
|
<label class="form-label">审核:</label>
|
<checkbox disabled="true" :checked="mainData.status == 1"/>
|
</view>
|
<view class="form-group">
|
<label class="form-label">备注信息:</label>
|
<label>{{mainData.remark}}</label>
|
</view>
|
<view class="form-group">
|
<label class="form-label">收货仓位:</label>
|
<label>{{mainData.depotName}}</label>
|
</view>
|
<view class="form-group">
|
<label class="form-label">推送:</label>
|
<checkbox disabled="true" :checked="mainData.ts == 1"/>
|
</view>
|
<view class="uni-form-item uni-column form-item edit">
|
<text class="form-label">调拔单号:</text>
|
<label>{{mainData.billNo}}</label>
|
</view>
|
<view class="uni-form-item uni-column form-item edit">
|
<label class="form-label">审核日期:</label>
|
<label>{{mainData.checkdate}}</label>
|
</view>
|
<view class="uni-form-item uni-column form-item edit">
|
<view class="form-group">
|
<label class="form-label">审核人:</label>
|
<label>{{mainData.checkuser}}</label>
|
</view>
|
</view>
|
<view class="form-group">
|
<label class="form-label">发料仓位:</label>
|
<label>{{mainData.depotsname}}</label>
|
</view>
|
<view class="uni-form-item uni-column form-item edit">
|
<label class="form-label">创建人:</label>
|
<label>{{mainData.creatBy}}</label>
|
</view>
|
<view class="form-group">
|
<label class="form-label">调拔日期:</label>
|
<label>{{mainData.createDate}}</label>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
broadcastScan
|
} from '@/utils/scanCode.js';
|
|
export default {
|
data() {
|
return {
|
focus1: true,
|
focus2: false,
|
scanFormData: {itemOutNo:"",barcode:""},
|
itemOutNoList: [],
|
mainData:{},
|
currentTab: 0,
|
Message: '',
|
outItems:[],
|
barcodeList:[]
|
}
|
},
|
methods: {
|
// onLoad 是在页面加载时触发，用于页面的初始化操作，只执行一次
|
onLoad() {
|
this.getItemOutNo();
|
// init传入一个回调函数做参数，在扫描时候会将数据传入此方法里，然后处理此方法的自定义业务逻辑
|
broadcastScan.init(this.getScanCode);
|
},
|
onUnload() {
|
broadcastScan.stop();
|
},
|
// 在页面展示时触发，用于处理页面显示相关的逻辑，可能会多次执行，包括页面首次展示和从后台切换到前台时
|
onShow() {
|
broadcastScan.start();
|
},
|
onHide() {
|
broadcastScan.stop();
|
},
|
// 自定义扫描的结果回调函数
|
getScanCode(code) {
|
let parseData = code.trim();
|
console.log('自定义扫描的结果回调函数:' + parseData);
|
if (this.focus2) {
|
console.log('111111111111111:' + parseData);
|
this.scanFormData.barcode = parseData;
|
this.checkWl();
|
} else {
|
this.scanFormData.itemOutNo = parseData;
|
this.onOutNoChange();
|
}
|
},
|
// 主动触发扫描
|
openScan() {
|
broadcastScan.triggerScan();
|
},
|
//移动焦点
|
getFocus(f) {
|
switch(f){
|
case 1:
|
this.focus1 = true;
|
this.focus2 = false;
|
this.scanFormData.itemOutNo = "";
|
break;
|
case 2:
|
this.focus1 = false;
|
this.focus2 = true;
|
this.scanFormData.barcode = "";
|
default:
|
break;
|
}
|
},
|
changeTab(index) {
|
this.currentTab = index;
|
},
|
//出库单号下拉
|
getItemOutNo() {
|
var that=this;
|
that.$post({
|
url: "/MesInvItemMoves/GetBillNo"
|
}).then(res1 => {
|
that.itemOutNoList = res1.data.tbBillList;
|
});
|
},
|
//根据出库单号读取表格（待出库+已扫码）
|
onOutNoChange(event) {
|
var that=this;
|
that.scanFormData.itemOutNo = event.billNo;
|
this.$post({
|
url: '/MesInvItemMoves/GetPage',
|
data: {
|
billNo: that.scanFormData.itemOutNo,
|
pageIndex: 1,
|
limit: 1,
|
}
|
}).then(res => {
|
that.mainData = res.data.tbBillList[0];
|
that.getFocus(2);
|
that.getGetItem(that.mainData.id);
|
}
|
)
|
},
|
|
//根据出库单号读取表格（待出库+已扫码）
|
getGetItem(id) {
|
var that=this;
|
that.$post({
|
url: "/MesInvItemMoves/GetItems",
|
data: {
|
id: id,
|
}
|
}).then(res => {
|
that.barcodeList=res.data.tbBillList.barcodeList;
|
that.outItems=res.data.tbBillList.outItems;
|
});
|
},
|
|
//根据物料条码读取
|
checkWl(){
|
var that=this;
|
let userName = this.$loginInfo.account;
|
that.$post({
|
url: "/MesInvItemMoves/ScanMoveBarcode",
|
data: {
|
userName: userName,
|
billNo:that.scanFormData.itemOutNo,
|
barcode:that.scanFormData.barcode,
|
}
|
}).then(res => {
|
that.getGetItem(that.mainData.id);
|
//待赋值
|
that.scanFormData.itemNo="";
|
that.scanFormData.quantity="";
|
that.getFocus(2);
|
});
|
},
|
|
|
}
|
}
|
</script>
|
|
<style>
|
.pdmg0{padding: 0px !important;margin: 0px !important;}
|
.form-group {
|
display: flex;
|
align-items: center;
|
border-bottom: 1px solid #c9c9c9;
|
}
|
|
.form-label {
|
margin-bottom: 0;
|
padding: 5px;
|
}
|
|
.form-input {
|
flex: 1;
|
margin-bottom: 0;
|
padding: 5px;
|
}
|
|
.picker {
|
flex: 1;
|
margin-bottom: 0;
|
padding: 5px;
|
font-size: 12px;
|
}
|
|
.uni-form-item {
|
display: flex;
|
border-bottom: 1px solid #c9c9c9;
|
}
|
|
.edit {
|
background-color: white;
|
}
|
|
/* 默认样式 */
|
.list-container {
|
height: 60vh;
|
/* 设置列表容器的高度为剩余空间，并减去表单容器的高度 */
|
overflow-y: auto;
|
/* 允许列表容器垂直滚动 */
|
padding: 10px;
|
/* 可选：添加一些内边距，使列表内容更美观 */
|
}
|
|
/* 在小屏幕设备上，重置高度为适应屏幕 */
|
@media (max-width: 768px) {
|
.list-container {
|
height: calc(100vh - 500px);
|
/* 适当调整高度 */
|
}
|
}
|
|
|
.form-container {
|
padding: 10px;
|
/* 可选：添加一些内边距，使表单内容更美观 */
|
}
|
|
.th {
|
background-color: lightskyblue;
|
color: #FFFFFF;
|
}
|
|
.text {
|
background-color: #ffee6f;
|
}
|
|
.plus-button {
|
line-height: 59px;
|
font-size: 24px;
|
cursor: pointer;
|
z-index: 1000;
|
margin-bottom: 10px;
|
}
|
|
.overlay {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.5);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.popup {
|
background-color: #fff;
|
padding: 20px;
|
border: 1px solid #ccc;
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
width: 68vw;
|
/* 设置宽度为视口宽度的80% */
|
height: 25vh;
|
/* 设置高度为视口高度的80% */
|
}
|
|
.container {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.tab-bar {
|
display: flex;
|
justify-content: space-around;
|
background-color: #f5f5f5;
|
padding: 10px;
|
border-bottom: 1px solid #ccc;
|
}
|
|
.tab-item {
|
flex: 1;
|
text-align: center;
|
padding: 10px;
|
border-radius: 5px;
|
background-color: #fff;
|
color: #007aff;
|
cursor: pointer;
|
font-size: 16px;
|
transition: background-color 0.3s, color 0.3s;
|
}
|
|
.tab-item.active {
|
background-color: #007aff;
|
color: #fff;
|
font-weight: bold;
|
}
|
|
.content {
|
flex: 1;
|
padding: 10px;
|
}
|
|
.tab-content {
|
padding: 10px;
|
}
|
</style>
|
