589 lines
14 KiB
Vue
589 lines
14 KiB
Vue
<template>
|
||
<view class="bg-image">
|
||
<uni-popup ref="popup" type="dialog">
|
||
<view class="popup-content">
|
||
<view class="info-item">
|
||
<label>物料编码：</label>
|
||
<text>{{fixedInfo.matCode}}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<label>物料名称：</label>
|
||
<text>{{fixedInfo.matName}}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<label>物料规格：</label>
|
||
<text>{{fixedInfo.matSpec}}</text>
|
||
</view>
|
||
<view class="input-item" style="background-color: wheat;">
|
||
<label>数量：</label>
|
||
<input ref="inputRef" v-model.number="inputValue" type="number" placeholder="输入数量" />
|
||
</view>
|
||
<view class="button-group">
|
||
<button @click="hidePopup">取消</button>
|
||
<button @click="saveData">保存</button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
<view class="diy-flex-row">
|
||
<view style="flex: 3">
|
||
<!-- 占位 -->
|
||
</view>
|
||
<view style="flex: 80;margin: 5rpx;">
|
||
<view class="diy-flex-row">
|
||
<view class="rightImageContainer" style="flex: 12;padding-top: 20rpx;">
|
||
<image style="width: 60rpx;height: 60rpx" src="/static/scan.png" />
|
||
</view>
|
||
|
||
<view class="uni-input-wrapper" style="flex: 60;">
|
||
<input id="inputMatCode" class="uni-input" style="font-size: 50rpx; padding: 10rpx;"
|
||
:placeholder="placeholderText" v-model="matCodeCondition" @blur="queryMatList"></input>
|
||
</view>
|
||
|
||
<view style="flex: 3;">
|
||
</view>
|
||
|
||
<view style="flex: 30;">
|
||
<button @click="queryMatList">查询</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="flex: 2">
|
||
<!-- 占位 -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="diy-flex-column" style="margin-top: 5rpx;">
|
||
<view class="diy-flex-inforow">
|
||
|
||
<view style="width: 10rpx;"></view>
|
||
|
||
<view style="width: 275rpx;">记录数:[{{recordCount}}]</view>
|
||
|
||
<view style="width: 10rpx;"></view>
|
||
|
||
<view style="width: 455rpx;">货架码:{{shelfCode}}</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<view class="diy-flex-column" style="margin-top: 5rpx;">
|
||
<scroll-view class="scroll-view" scroll-y="true">
|
||
<view v-for="(item, index) in cardData" :key="index" @touchstart="cardTouchStart"
|
||
@touchmove="cardTouchMove" @longpress="longpress(item)">
|
||
<Card :item="item" :currentIndex="index" :cardData="cardData" />
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import bindSelectMat from '@/pages/bindSelectMat/bindSelectMat.vue';
|
||
|
||
import {
|
||
recive
|
||
} from '../../src/libs/Broadcast.js';
|
||
|
||
import {
|
||
unregisterReceiver
|
||
} from '../../src/libs/Broadcast.js';
|
||
|
||
import {
|
||
getConfig
|
||
} from '@/config.js';
|
||
|
||
import {
|
||
saveConfig
|
||
} from '@/config.js';
|
||
|
||
import {
|
||
getServerIPAndPort
|
||
} from '@/config.js';
|
||
|
||
import Card from '@/components/Card.vue';
|
||
import {
|
||
ref,
|
||
nextTick
|
||
} from 'vue';
|
||
import uniPopup from '@/node_modules/@dcloudio/uni-ui/lib/uni-popup/uni-popup';
|
||
import {
|
||
getCurrentInstance
|
||
} from 'vue';
|
||
|
||
export default {
|
||
components: {
|
||
uniPopup,
|
||
Card
|
||
},
|
||
setup() {
|
||
const {
|
||
proxy
|
||
} = getCurrentInstance();
|
||
// 不能修改的信息
|
||
const fixedInfo = {
|
||
infoId: 0,
|
||
matCode: '示例名称',
|
||
matName: '这是一段示例描述',
|
||
matSpec: '',
|
||
matQty: 0,
|
||
};
|
||
const popup = ref(null);
|
||
const inputValue = ref('');
|
||
|
||
const showPopup = (info) => {
|
||
fixedInfo.infoId = info.id;
|
||
fixedInfo.matCode = info.matCode;
|
||
fixedInfo.matName = info.matName;
|
||
fixedInfo.matSpec = info.matSpec;
|
||
fixedInfo.matQty = info.matQty;
|
||
|
||
inputValue.value = info.matQty;
|
||
|
||
popup.value.open();
|
||
};
|
||
|
||
const hidePopup = () => {
|
||
popup.value.close();
|
||
};
|
||
|
||
const saveData = () => {
|
||
if (inputValue.value == fixedInfo.matQty) {
|
||
uni.showToast({
|
||
title: '本次修改未修改数量',
|
||
icon: 'none',
|
||
duration: 1500
|
||
});
|
||
hidePopup();
|
||
return;
|
||
}
|
||
if (inputValue.value < 0) {
|
||
uni.showToast({
|
||
title: '您所输入的数量应该大于0！',
|
||
icon: 'none',
|
||
duration: 1500
|
||
});
|
||
return;
|
||
}
|
||
if (inputValue.value == 0) {
|
||
uni.showToast({
|
||
title: '数量为0，请使用删除功能！',
|
||
icon: 'none',
|
||
duration: 1500
|
||
});
|
||
return;
|
||
}
|
||
var serverIPAndPort = getServerIPAndPort();
|
||
|
||
//调用接口进行数量的修改
|
||
uni.request({
|
||
url: 'http://' + serverIPAndPort +
|
||
'/matDetailCurrenInfo/updateMatDetailCurrentInfoById', // 请求的接口地址
|
||
method: 'POST', // 设置请求方式为 POST
|
||
data: {
|
||
"matQty": inputValue.value,
|
||
"matDetailCurrentInfoId": fixedInfo.infoId,
|
||
"userName": getConfig('userName', 'admin'),
|
||
"deviceType": "PDA"
|
||
},
|
||
header: {
|
||
'Content-Type': 'application/json', // 如果需要以JSON格式发送数据
|
||
},
|
||
success: (res) => {
|
||
// 请求成功的回调函数
|
||
if (res.statusCode === 200) {
|
||
//接口返回数据为200 表示获取成功！
|
||
if (res.data.code == 200) {
|
||
hidePopup();
|
||
uni.showToast({
|
||
title: '修改成功!',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
|
||
proxy.queryMatList();
|
||
} else {
|
||
uni.showToast({
|
||
title: '修改失败:' + res.data.message,
|
||
icon: 'none',
|
||
duration: 2500
|
||
});
|
||
}
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: '服务器返回错误状态码' + res.statusCode,
|
||
icon: 'none',
|
||
duration: 2500
|
||
});
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
// 请求失败的回调函数
|
||
uni.showToast({
|
||
title: '请求失败' + err,
|
||
icon: 'none',
|
||
duration: 2500
|
||
});
|
||
|
||
this.clear();
|
||
},
|
||
complete: (event) => {
|
||
// 请求完成的回调函数（无论成功或失败都会调用）
|
||
|
||
}
|
||
});
|
||
};
|
||
|
||
return {
|
||
fixedInfo,
|
||
popup,
|
||
inputValue,
|
||
showPopup,
|
||
hidePopup,
|
||
saveData
|
||
};
|
||
},
|
||
data() {
|
||
return {
|
||
locationId: null,
|
||
locationCode: '',
|
||
|
||
userName: '', //当前登录的用户名
|
||
|
||
recordCount: 0,
|
||
shelfId: null,
|
||
shelfCode: '',
|
||
placeholderText: '请先扫描货架码',
|
||
matCodeCondition: '', //物料编码搜索条件
|
||
cardData: null,
|
||
|
||
//监控滑动的位置
|
||
touchStartX: 0,
|
||
touchStartY: 0,
|
||
isMove: false, //滑动标识 是否滑动
|
||
}
|
||
},
|
||
onShow: function() {
|
||
this.userName = getConfig('userName', 'admin');
|
||
|
||
const self = this; // 保存this的引用
|
||
recive(function(res) {
|
||
console.log("Success:" + res.data);
|
||
self.analysisScanCode(res.data);
|
||
}, function(err) {
|
||
console.log("Error:", JSON.stringify(err)); // 正确打印错误信息
|
||
});
|
||
},
|
||
methods: {
|
||
analysisScanCode: function(encodedString) {
|
||
// 去除末尾的逗号和"..."（如果有的话）
|
||
encodedString = encodedString.replace(/,\s*\.\.\.$/, '');
|
||
// // 分割字符串并转换为字节数组
|
||
// let byteStrings = encodedString.split(',');
|
||
// let byteArray = [];
|
||
// for (let byteString of byteStrings) {
|
||
// byteArray.push(parseInt(byteString, 10)); // 将字符串转换为十进制整数
|
||
// }
|
||
// // 将字节数组转换为UTF-8字符串
|
||
// // 注意：这里使用了一个简单的循环来构建字符串，因为String.fromCharCode.apply可能在大数据上性能不佳
|
||
// let originalString = '';
|
||
// for (let i = 0; i < byteArray.length; i++) {
|
||
// // 对于每个字节，使用fromCharCode转换为对应的字符
|
||
// // 注意：这里假设你的字节数组已经是正确的UTF-8编码，并且不需要额外的处理来组合多字节字符
|
||
// originalString += String.fromCharCode(byteArray[i]);
|
||
// }
|
||
this.shelfCode = encodedString;
|
||
//调用接口获取当前工位信息 当前工位是否有货架
|
||
var serverIPAndPort = getServerIPAndPort();
|
||
uni.request({
|
||
url: 'http://' + serverIPAndPort +
|
||
'/matDetailCurrenInfo/getMatDetailCurrentInfos', // 请求的接口地址
|
||
method: 'POST', // 设置请求方式为 POST
|
||
data: {
|
||
"shelfCode": this.shelfCode,
|
||
"matCode": '',
|
||
"userName": this.userName,
|
||
"deviceType": "PDA",
|
||
"pageNumber": 1,
|
||
"pageSize": 300,
|
||
},
|
||
header: {
|
||
'Content-Type': 'application/json', // 如果需要以JSON格式发送数据
|
||
},
|
||
success: (res) => {
|
||
// 请求成功的回调函数
|
||
if (res.statusCode === 200) {
|
||
//接口返回数据为200 表示获取成功！
|
||
if (res.data.code == 200) {
|
||
//未查询到信息
|
||
if (res.data.data == null || res.data.data.count == 0) {
|
||
uni.showToast({
|
||
title: '该货架不存在绑定的物料信息!',
|
||
icon: 'none',
|
||
duration: 1500
|
||
});
|
||
return;
|
||
}
|
||
//有物料信息
|
||
this.cardData = res.data.data.lists;
|
||
this.recordCount = res.data.data.count;
|
||
uni.showToast({
|
||
title: '获取成功!',
|
||
icon: 'none',
|
||
duration: 100
|
||
});
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: '获取失败:' + res.data.message,
|
||
icon: 'none',
|
||
duration: 3500
|
||
});
|
||
this.clear();
|
||
}
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: '服务器返回错误状态码' + res.statusCode,
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
this.clear();
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
// 请求失败的回调函数
|
||
uni.showToast({
|
||
title: '请求失败' + err,
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
|
||
this.clear();
|
||
},
|
||
complete: (event) => {
|
||
// 请求完成的回调函数（无论成功或失败都会调用）
|
||
console.log('请求完成', event);
|
||
}
|
||
});
|
||
|
||
|
||
},
|
||
|
||
queryMatList: function() {
|
||
if (this.shelfCode == null || this.shelfCode == '') {
|
||
uni.showToast({
|
||
title: '请先扫描货架码！',
|
||
icon: 'none',
|
||
duration: 1000
|
||
});
|
||
return;
|
||
}
|
||
var serverIPAndPort = getServerIPAndPort();
|
||
uni.request({
|
||
url: 'http://' + serverIPAndPort +
|
||
'/matDetailCurrenInfo/getMatDetailCurrentInfos', // 请求的接口地址
|
||
method: 'POST', // 设置请求方式为 POST
|
||
data: {
|
||
"shelfCode": this.shelfCode,
|
||
"matCode": this.matCodeCondition,
|
||
"userName": this.userName,
|
||
"deviceType": "PDA",
|
||
"pageNumber": 1,
|
||
"pageSize": 300
|
||
},
|
||
header: {
|
||
'Content-Type': 'application/json', // 如果需要以JSON格式发送数据
|
||
},
|
||
success: (res) => {
|
||
// 请求成功的回调函数
|
||
if (res.statusCode === 200) {
|
||
//接口返回数据为200 表示获取成功！
|
||
if (res.data.code == 200) {
|
||
//未查询到信息
|
||
if (res.data.data == null || res.data.data.count == 0) {
|
||
uni.showToast({
|
||
title: '该货架不存在绑定的物料信息!',
|
||
icon: 'none',
|
||
duration: 1500
|
||
});
|
||
return;
|
||
}
|
||
//有物料信息
|
||
this.cardData = res.data.data.lists;
|
||
this.recordCount = res.data.data.count;
|
||
uni.showToast({
|
||
title: '获取成功!',
|
||
icon: 'none',
|
||
duration: 100
|
||
});
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: '获取失败:' + res.data.message,
|
||
icon: 'none',
|
||
duration: 3500
|
||
});
|
||
this.clear();
|
||
}
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: '服务器返回错误状态码' + res.statusCode,
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
this.clear();
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
// 请求失败的回调函数
|
||
uni.showToast({
|
||
title: '请求失败' + err,
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
|
||
this.clear();
|
||
},
|
||
complete: (event) => {
|
||
// 请求完成的回调函数（无论成功或失败都会调用）
|
||
console.log('请求完成', event);
|
||
}
|
||
});
|
||
|
||
|
||
},
|
||
|
||
//清空当前界面所有内容
|
||
clear: function() {
|
||
this.placeholderText = '请先扫描货架码';
|
||
this.cardData = null;
|
||
this.recordCount = 0;
|
||
},
|
||
//解决长按和滑动冲突的问题
|
||
cardTouchStart(e) {
|
||
this.isMove = false;
|
||
this.touchStartX = e.touches[0].clientX;
|
||
this.touchStartY = e.touches[0].clientY;
|
||
},
|
||
cardTouchMove(e) {
|
||
var deltaX = e.changedTouches[0].clientX - this.touchStartX;
|
||
var deltaY = e.changedTouches[0].clientY - this.touchStartY;
|
||
if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
|
||
this.isMove = true;
|
||
}
|
||
},
|
||
//长按
|
||
longpress(item) {
|
||
if (this.isMove == false) {
|
||
this.showPopup(item);
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.uni-input-wrapper {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.mini-btn {
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.bg-image {
|
||
background-image: url('/static/background.png');
|
||
/* 背景图片路径 */
|
||
background-size: cover;
|
||
/* 背景图片覆盖整个元素 */
|
||
background-position: center;
|
||
/* 背景图片居中 */
|
||
height: 100%;
|
||
/* 视图高度设置为100% */
|
||
width: 100%;
|
||
/* 视图宽度设置为100% */
|
||
position: fixed;
|
||
/* 视图定位为固定 */
|
||
top: 0;
|
||
left: 0;
|
||
/* z-index: -1; */
|
||
}
|
||
|
||
.diy-flex-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
margin-top: 15rpx;
|
||
margin-bottom: 15rpx;
|
||
font-size: 50rpx;
|
||
}
|
||
|
||
.diy-flex-column {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.diy-flex-inforow {
|
||
display: flex;
|
||
flex-direction: row;
|
||
font-size: 40rpx;
|
||
font-weight: 500;
|
||
margin-top: 8rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.scroll-view {
|
||
height: 75vh;
|
||
}
|
||
|
||
.popup-content {
|
||
padding: 20px;
|
||
background-color: rgba(0, 0, 0, 1);
|
||
background-color: white;
|
||
z-index: 2;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
|
||
.input-item {
|
||
margin-bottom: 5rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
/* 让内部元素垂直居中 */
|
||
}
|
||
|
||
.input-item label {
|
||
display: inline-block;
|
||
}
|
||
|
||
.input-item input {
|
||
display: inline-block;
|
||
background: wheat;
|
||
width: 280rpx;
|
||
}
|
||
|
||
.button-group {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.button-group button {
|
||
margin-top: 20rpx;
|
||
padding: 10rpx 10rpx;
|
||
border: none;
|
||
border-radius: 5px;
|
||
background-color: #007AFF;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
}
|
||
</style> |