205 lines
8.4 KiB
Vue
205 lines
8.4 KiB
Vue
<template>
|
||
<view>
|
||
<uni-collapse>
|
||
<uni-forms ref="form" :modelValue="formData" :rules="rules">
|
||
<!-- <uni-collapse-item title="库存查询" :open="true"> -->
|
||
<uni-forms-item label="物料编码" :labelWidth='90' name="materialCode">
|
||
<uni-easyinput suffixIcon="scan" @iconClick="scanBar" v-model="formData.materialCode"
|
||
@confirm="scanBarMaterialCode" type="text" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="物料名称" :labelWidth='90' name="materialName">
|
||
<uni-easyinput v-model="formData.materialName"></uni-easyinput>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="批号" :labelWidth='90' name="batchNo">
|
||
<uni-easyinput v-model="formData.batchNo" type="text" />
|
||
</uni-forms-item>
|
||
<uni-forms-item label="库位条码" :labelWidth='90' name="storageLocationBarcode">
|
||
<uni-easyinput suffixIcon="scan" @iconClick="scanBarstorageLocationBarcode"
|
||
@confirm="splitStlBarcode" type="text" v-model="formData.storageLocationBarcode" />
|
||
</uni-forms-item>
|
||
<button @click="queryStockInfo" form-type="submit" type="primary"
|
||
style="text-align: center;font-size: 18px;width: 50%;">查询</button>
|
||
<!-- </uni-collapse-item> -->
|
||
</uni-forms>
|
||
<uni-collapse-item title="库位库存明细" :open="true">
|
||
<view v-for="(item, index) in wmsMaterialDetailList" :key="index" :disabled="item.disabled"
|
||
class="item">
|
||
<text>物料编码：{{ item.materialCode }}</text>
|
||
<text>批号：{{ item.batchNo }}</text>
|
||
<text>箱号：{{ item.lotNo }}</text>
|
||
<text>物料名称：{{ item.materialName }}</text>
|
||
<text>拼接库位：{{ item.connectBin }}</text>
|
||
<text>入库时间：{{ item.storageInTime }}</text>
|
||
<text>库存总数：{{ item.number }}</text>
|
||
<text>锁定数量：{{ item.lockNumber }}</text>
|
||
<text>可用数量：{{ item.MaterialAvailableNumber }}</text>
|
||
</view>
|
||
</uni-collapse-item>
|
||
</uni-collapse>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
listStock,
|
||
listStockLike
|
||
} from "@/api/wms/stock";
|
||
import {
|
||
listMaterial
|
||
} from "@/api/mes/material.js";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
formData: {
|
||
storageLocationBarcode: null,
|
||
materialCode: null,
|
||
materialName: null,
|
||
batchNo: null,
|
||
},
|
||
wmsMaterialDetailList: [],
|
||
// rules: {
|
||
// materialCode: {
|
||
// rules: [{
|
||
// required: true,
|
||
// errorMessage: '请输入物料编码!'
|
||
// }]
|
||
// },
|
||
// materialName: {
|
||
// rules: [{
|
||
// required: true,
|
||
// errorMessage: '请输入物料名称!'
|
||
// }]
|
||
// },
|
||
// }
|
||
};
|
||
},
|
||
|
||
methods: {
|
||
// 【物料编码】的扫描按钮点击操作
|
||
scanBar() {
|
||
const _this = this;
|
||
uni.scanCode({
|
||
scanType: ['barCode', 'qrCode'],
|
||
success: function(res) {
|
||
_this.$set(_this.formData, "materialCode", res.result);
|
||
_this.scanBarMaterialCode(res.result);
|
||
}
|
||
});
|
||
},
|
||
// 输入物料编码确认后的操作
|
||
scanBarMaterialCode(code) {
|
||
// 查出物料编码关联的物料名称
|
||
listMaterial({
|
||
materialCode: code
|
||
}).then(res => {
|
||
if (res.total > 0) {
|
||
this.formData.materialName = res.rows[0].materialName;
|
||
}
|
||
});
|
||
},
|
||
// 【库位条码】的扫描按钮点击操作
|
||
scanBarstorageLocationBarcode() {
|
||
const _this = this;
|
||
uni.scanCode({
|
||
scanType: ['barCode', 'qrCode'],
|
||
success: function(res) {
|
||
_this.$set(_this.formData, "storageLocationBarcode", res.result);
|
||
_this.splitStlBarcode(res.result);
|
||
}
|
||
});
|
||
},
|
||
// 分割库位条码
|
||
splitStlBarcode(e) {
|
||
this.formData.whCode = null;
|
||
this.formData.areaCode = null;
|
||
this.formData.shelvesCode = null;
|
||
this.formData.storageLocationCode = null;
|
||
let array = e.split('-');
|
||
switch (array.length) {
|
||
case 1:
|
||
this.formData.whCode = array[0];
|
||
this.queryStockInfo();
|
||
break;
|
||
case 2:
|
||
this.formData.whCode = array[0];
|
||
this.formData.areaCode = array[1];
|
||
this.queryStockInfo();
|
||
break;
|
||
case 3:
|
||
this.formData.whCode = array[0];
|
||
this.formData.areaCode = array[1];
|
||
this.formData.shelvesCode = array[2];
|
||
this.queryStockInfo();
|
||
break;
|
||
case 4:
|
||
this.formData.whCode = array[0];
|
||
this.formData.areaCode = array[1];
|
||
this.formData.shelvesCode = array[2];
|
||
this.formData.storageLocationCode = array[3];
|
||
this.queryStockInfo();
|
||
break;
|
||
case 5:
|
||
this.formData.whCode = array[0];
|
||
this.formData.areaCode = array[1];
|
||
this.formData.shelvesCode = array[2];
|
||
this.formData.storageLocationCode = array[3] + '-' + array[4];
|
||
this.queryStockInfo();
|
||
break;
|
||
}
|
||
},
|
||
queryStockInfo() {
|
||
// 获取库位库存明细数据
|
||
listStockLike(this.formData).then(res => {
|
||
for (let obj of res.rows) {
|
||
obj.MaterialAvailableNumber = obj.number - obj.lockNumber;
|
||
}
|
||
this.wmsMaterialDetailList = res.rows;
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: '请输入必填字段',
|
||
icon: 'none',
|
||
})
|
||
console.error('获取库存明细失败:', err);
|
||
});
|
||
// // 先验证表单，不知道为什么，uniapp里的验证功能没用，查不出来，自己写吧
|
||
// this.$refs.form.validate((res) => {
|
||
// // 自己写个验证逻辑
|
||
// let required = ['materialCode', 'materialName'];
|
||
// for (let field of required) {
|
||
// if (!this.formData[field]) {
|
||
// uni.showToast({
|
||
// title: '请输入必填字段',
|
||
// icon: 'none',
|
||
// })
|
||
// return;
|
||
// }
|
||
// }
|
||
|
||
// console.log('表单数据信息：', res);
|
||
// }).catch((error) => {
|
||
// console.error('表单验证失败:', error);
|
||
// });
|
||
},
|
||
},
|
||
onReady() {
|
||
this.$refs.form.setRules(this.rules);
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.item {
|
||
margin-bottom: 10px;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
background-color: #f7f7f7;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.item text {
|
||
display: block;
|
||
margin: 5px 0;
|
||
}
|
||
</style> |