<template>
|
<view>
|
<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
|
<view
|
class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
<view class="login__info__item__input__content">
|
<input maxlength="500" style="height: 40px;" v-model="barcode" focus="true" placeholder-class="input-placeholder"
|
@input="barcodeInput" placeholder="请扫描托盘条码" />
|
</view>
|
</view>
|
|
<view
|
class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
<view class="login__info__item__input__content" style="width: 100%;">
|
<input maxlength="500" style="height: 40px;" v-model="stationName" placeholder-class="input-placeholder"
|
@click="stationshow=true" placeholder="请选择车型" />
|
|
<button @tap="onButtonClick2" class="input-button">全部</button>
|
<u-picker v-model="stationshow" mode="selector" :range="selectorStation2" range-key="stationName"
|
@confirm="stationConfirm2"></u-picker>
|
</view>
|
</view>
|
|
|
<view
|
class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
<view class="login__info__item__input__content" style="width: 100%;">
|
<input maxlength="500" style="height: 40px;" v-model="cartnme" placeholder-class="input-placeholder"
|
placeholder="请选择名称" @click="dropdownOpen = true" />
|
|
</view>
|
</view>
|
|
<view
|
class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
<view class="login__info__item__input__content">
|
<input maxlength="500" style="height: 40px;" v-model="barcodemodel" focus="true" placeholder-class="input-placeholder"
|
placeholder="请选择车号" @tap="selectListmoder()" />
|
</view>
|
</view>
|
|
<view
|
class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
<view class="login__info__item__input__content">
|
<input maxlength="500" style="height: 40px;" v-model="cartnumber" focus="true" placeholder-class="input-placeholder"
|
placeholder="请输入车组号" />
|
</view>
|
</view>
|
|
<view
|
class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
|
<view class="login__info__item__input__content">
|
<input maxlength="500" style="height: 40px;" v-model="cartcount" focus="true" placeholder-class="input-placeholder"
|
placeholder="请输入数量" />
|
</view>
|
</view>
|
<view class="login__info__item__button tn-cool-bg-color-7--reverse" @tap="submitCheek()"
|
hover-class="tn-hover" :hover-stay-time="150">更改库存</view>
|
</view>
|
|
<u-popup v-model="show" mode="bottom">
|
<view class="">
|
<u-checkbox-group>
|
<view v-for="(item, index) in list" :key="index" class="picker-item">
|
<u-checkbox @change="checkboxChange" v-model="item.checked" :name="item.name">
|
{{ item.name }}
|
</u-checkbox>
|
</view>
|
</u-checkbox-group>
|
<u-button @click="checkedAll">{{ labeat }}</u-button>
|
<u-button @click="updateBarcodeModel" type="success" style="margin-top: 30px;">确定</u-button>
|
</view>
|
</u-popup>
|
|
<u-popup v-model="dropdownOpen" mode="left">
|
<button @tap="onButtonClick" class="input-button" style="margin-top: 30px;">加载全部</button>
|
<view style="width: 180px;text-align: center;">
|
<scroll-view scroll-y="true" >
|
<view v-for="(item, index) in selectorStation" :key="index" class="tag" @click="toggleSelection(item)"
|
:style="{ backgroundColor: selectedItems.includes(item) ? '#63f004' : '#999999', width: '80%',margin:'20px auto', borderRadius: '10px' }">
|
{{ item }}
|
</view>
|
</scroll-view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
labeat: "全选",
|
// 输入框的值
|
barcodemodel: '',
|
cartnumber:'',
|
barcode: '',
|
stationName: '',
|
show: false,
|
istrue: true,
|
cacheshow: false,
|
stationshow: false,
|
stashow:false,
|
dropdownOpen:false,
|
cartnme: '',
|
cartcount: '',
|
selectorStation: [],
|
selectorStation2: [],
|
selectedItems: [],
|
stationtype:"",
|
list: Array.from({
|
length: 17
|
}, (_, index) => ({
|
name: (index + 1).toString().padStart(2, '0'), // 小于10的数字前加'0'
|
checked: false,
|
disabled: false
|
}))
|
}
|
},
|
mounted() {
|
//this.SetCacheList2();
|
},
|
methods: {
|
SetCacheList(stationId) {
|
this.stationtype=stationId;
|
this.selectorStation=[];
|
this.$u.get("/api/Sys_Vehi/GetCacheList?traycode_code=" + stationId+"&barcode="+this.barcode).then(res => {
|
|
this.selectorStation=res.data;
|
});
|
},
|
toggleSelection(item) {
|
const index = this.selectedItems.indexOf(item);
|
if (index === -1) {
|
// 如果该项未选择，加入选择列表
|
this.selectedItems.push(item);
|
} else {
|
// 如果该项已选择，移除它
|
this.selectedItems.splice(index, 1);
|
}
|
this.cartnme = this.selectedItems.join(', ');
|
},
|
SetCacheList2(barcode) {
|
this.selectorStation2=[];
|
this.$u.get("/api/Sys_Vehi/GetCachedata?traycode_code=" + barcode).then(res => {
|
if (res.data.length > 0) {
|
for (let i = 0; i < res.data.length; i++) {
|
this.selectorStation2.push({
|
stationName: res.data[i].vehiclename,
|
stationId: res.data[i].vehicleid
|
})
|
}
|
}
|
});
|
},
|
onButtonClick() {
|
if (this.barcode == '') {
|
this.$t.message.toast('托盘条码不能为空');
|
return
|
}
|
this.selectorStation=[];
|
this.$u.get("/api/Sys_Vehi/GetdataLis?vehiclerpall="+this.stationtype).then(res => {
|
this.selectorStation=res.data;
|
});
|
},
|
onButtonClick2() {
|
this.selectorStation2=[];
|
this.$u.get("/api/Sys_Vehicle/GetCachedatalst").then(res => {
|
if (res.data.length > 0) {
|
for (let i = 0; i < res.data.length; i++) {
|
this.selectorStation2.push({
|
stationName: res.data[i].vehiclename,
|
stationId: res.data[i].vehicleid
|
})
|
}
|
}
|
});
|
},
|
///条码
|
barcodeInput: function(e) {
|
this.barcode = e.detail.value;
|
this.SetCacheList2(this.barcode);
|
},
|
//下料口
|
stationConfirm(e) {
|
uni.hideKeyboard(); //隐藏软键盘
|
let x = this.selectorStation[e];
|
this.cartnme = x.cartnme
|
},
|
stationConfirm2(e) {
|
uni.hideKeyboard(); //隐藏软键盘
|
let x = this.selectorStation2[e];
|
this.stationName = x.stationName
|
this.SetCacheList(x.stationId);
|
},
|
//入库通知信息校验
|
submitCheek() {
|
if (this.barcode == '') {
|
this.$t.message.toast('托盘条码不能为空');
|
return
|
}
|
if (this.stationName == '') {
|
this.$t.message.toast('请选择车型');
|
return
|
}
|
if (this.cartnme == '') {
|
this.$t.message.toast('请选择名称');
|
return
|
}
|
if (this.cartcount == '') {
|
this.$t.message.toast('请输入数量');
|
return
|
}
|
if (this.barcodemodel == '') {
|
this.$t.message.toast('请选择型号');
|
return
|
}
|
if (this.cartnumber == '') {
|
this.$t.message.toast('请输入车组号');
|
return
|
}
|
// console.log(ip);
|
this.$u.post("api/Task/RequestInboundPDA2", {
|
MainData: {
|
barcode: this.barcode,
|
stationName:this.stationName,
|
cartnme:this.cartnme,
|
cartcount:this.cartcount,
|
barcodemodel:this.barcodemodel,
|
cartnumber:this.cartnumber
|
}
|
}).then(res => {
|
if(res.status){
|
this.barcode="";
|
this.stationName="";
|
this.cartnme="";
|
this.cartcount="";
|
this.barcodemodel="";
|
this.cartnumber="";
|
}
|
this.$t.message.toast(res.message);
|
}).catch(err => {
|
|
})
|
},
|
|
selectListmoder() {
|
this.show = true;
|
},
|
// 每当复选框的选中状态发生变化时触发
|
checkboxChange() {
|
this.checkIfAllChecked(); // 检查是否全选
|
},
|
updateBarcodeModel() {
|
const selectedItems = this.list.filter(item => item.checked).map(item => item.name);
|
this.barcodemodel = selectedItems.join(", "); // 用逗号隔开
|
this.show = false;
|
},
|
// 检查是否所有复选框都被选中
|
checkIfAllChecked() {
|
// 检查所有项的 checked 状态，如果都为 true，则全选
|
const allChecked = this.list.every(item => item.checked);
|
|
// 根据是否全选来更新按钮的文本
|
this.labeat = allChecked ? "取消全选" : "全选";
|
},
|
|
// 点击全选/取消全选按钮时触发
|
checkedAll() {
|
// 如果已经全选，点击后取消所有选中
|
const allChecked = this.labeat === "取消全选";
|
|
// 根据状态来设置所有复选框的选中状态
|
this.list.forEach(item => {
|
item.checked = !allChecked; // 如果全选，则取消选中；如果取消全选，则选中
|
});
|
|
// 更新按钮文本
|
this.checkIfAllChecked();
|
}
|
},
|
watch: {
|
// 监听 list 的变化，以确保在复选框项的 checked 状态变化时更新按钮文本
|
list: {
|
handler() {
|
this.checkIfAllChecked();
|
},
|
deep: true
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.isnone {
|
display: none;
|
width: 100%;
|
}
|
|
.isnonone {
|
width: 100%;
|
}
|
// @import '@/static/css/templatePage/custom_nav_bar.scss';
|
/* 悬浮 */
|
.rocket-sussuspension {
|
animation: suspension 3s ease-in-out infinite;
|
}
|
|
|
|
.login__info__item__input__content {
|
display: flex; /* 使用 flex 布局 */
|
flex-direction: row; /* 水平排列 */
|
align-items: center; /* 垂直居中对齐 */
|
}
|
|
input {
|
flex-grow: 1; /* 让输入框占据尽可能多的空间 */
|
padding: 10px;
|
font-size: 14px;
|
}
|
|
.input-button {
|
width: 60px; /* 设置按钮的宽度 */
|
height: 40px; /* 设置按钮的高度 */
|
padding: 0;
|
background-color: #007bff;
|
color: white;
|
border: none;
|
border-radius: 5px;
|
cursor: pointer;
|
font-size: 14px; /* 使按钮文字大小与输入框相匹配 */
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
}
|
|
.input-button:hover {
|
background-color: #0056b3;
|
}
|
|
|
|
|
@keyframes suspension {
|
|
0%,
|
100% {
|
transform: translate(0, 0);
|
}
|
|
50% {
|
transform: translate(-0.8rem, 1rem);
|
}
|
}
|
|
.login {
|
position: relative;
|
height: 100%;
|
z-index: 1;
|
|
/* 背景图片 start */
|
&__bg {
|
z-index: -1;
|
position: fixed;
|
|
&--top {
|
top: 0;
|
left: 0;
|
right: 0;
|
width: 100%;
|
|
.bg {
|
width: 750rpx;
|
will-change: transform;
|
}
|
|
.rocket {
|
margin: 50rpx 28%;
|
width: 400rpx;
|
will-change: transform;
|
}
|
}
|
|
&--bottom {
|
bottom: -10rpx;
|
left: 0;
|
right: 0;
|
width: 100%;
|
// height: 144px;
|
margin-bottom: env(safe-area-inset-bottom);
|
|
image {
|
width: 750rpx;
|
will-change: transform;
|
}
|
}
|
}
|
|
/* 背景图片 end */
|
|
/* 内容 start */
|
&__wrapper {
|
margin-top: 403rpx;
|
width: 100%;
|
}
|
|
/* 切换 start */
|
&__mode {
|
position: relative;
|
margin: 0 auto;
|
width: 476rpx;
|
height: 77rpx;
|
background-color: #FFFFFF;
|
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
|
border-radius: 39rpx;
|
|
&__item {
|
height: 77rpx;
|
width: 100%;
|
line-height: 77rpx;
|
text-align: center;
|
font-size: 31rpx;
|
color: #908f8f;
|
letter-spacing: 1em;
|
text-indent: 1em;
|
z-index: 2;
|
transition: all 0.4s;
|
|
&--active {
|
font-weight: bold;
|
color: #FFFFFF;
|
}
|
}
|
|
&__slider {
|
position: absolute;
|
height: inherit;
|
width: calc(476rpx);
|
border-radius: inherit;
|
box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
|
z-index: 1;
|
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
}
|
}
|
|
/* 切换 end */
|
.prop {
|
width: 100%;
|
height: 300px;
|
background-color: #000;
|
border: 1px solid #e3e3e3;
|
z-index: 999;
|
position: fixed;
|
bottom: 0;
|
border-top-left-radius: 20rpx;
|
border-top-right-radius: 20rpx;
|
}
|
|
.g-picker-con {
|
color: #333;
|
font-size: 28rpx;
|
|
.g-picker-operate {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 80rpx;
|
padding: 0 32rpx;
|
|
text {
|
color: #999;
|
|
&:last-child {
|
color: #3c9cff;
|
}
|
}
|
}
|
|
.g-picker-list {
|
min-height: 30vh;
|
max-height: 60vh;
|
overflow-y: scroll;
|
|
.g-picker-item {
|
position: relative;
|
width: 100%;
|
height: 80rpx;
|
|
.g-picker-item_label {
|
width: 66%;
|
margin: 0 auto;
|
text-align: center;
|
line-height: 80rpx;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
}
|
|
.g-picker-item--actived {
|
font-weight: 600;
|
}
|
|
.g-picker-item_icon {
|
position: absolute;
|
top: 50%;
|
right: 40rpx;
|
transform: translateY(-50%);
|
}
|
}
|
}
|
}
|
|
/* 登录注册信息 start */
|
&__info {
|
margin: 0 30rpx;
|
margin-top: 105rpx;
|
padding: 30rpx 51rpx;
|
padding-bottom: 0;
|
border-radius: 20rpx;
|
background-color: #ffff;
|
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
|
|
&__item {
|
|
&__input {
|
margin-top: 59rpx;
|
width: 100%;
|
height: 100rpx;
|
border: 1rpx solid #E6E6E6;
|
border-radius: 39rpx;
|
|
&__left-icon {
|
width: 10%;
|
font-size: 44rpx;
|
margin-left: 20rpx;
|
color: #AAAAAA;
|
}
|
|
&__content {
|
width: 80%;
|
padding-left: 10rpx;
|
|
&--verify-code {
|
width: 56%;
|
}
|
|
input {
|
font-size: 48rpx;
|
// letter-spacing: 0.1em;
|
}
|
}
|
|
&__right-icon {
|
width: 10%;
|
font-size: 44rpx;
|
margin-right: 20rpx;
|
color: #AAAAAA;
|
}
|
|
&__right-verify-code {
|
width: 34%;
|
margin-right: 20rpx;
|
}
|
}
|
|
&__button {
|
margin-top: 75rpx;
|
margin-bottom: 39rpx;
|
width: 100%;
|
height: 77rpx;
|
text-align: center;
|
font-size: 48rpx;
|
font-weight: bold;
|
line-height: 77rpx;
|
letter-spacing: 1em;
|
text-indent: 1em;
|
border-radius: 39rpx;
|
box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
|
}
|
|
&__tips {
|
margin: 30rpx 0;
|
color: #AAAAAA;
|
}
|
}
|
}
|
|
/* 登录注册信息 end */
|
|
/* 登录方式切换 start */
|
&__way {
|
margin: 0 auto;
|
margin-top: 110rpx;
|
|
&__item {
|
&--icon {
|
width: 77rpx;
|
height: 77rpx;
|
font-size: 50rpx;
|
border-radius: 100rpx;
|
margin-bottom: 18rpx;
|
position: relative;
|
z-index: 1;
|
|
&::after {
|
content: " ";
|
position: absolute;
|
z-index: -1;
|
width: 100%;
|
height: 100%;
|
left: 0;
|
bottom: 0;
|
border-radius: inherit;
|
opacity: 1;
|
transform: scale(1, 1);
|
background-size: 100% 100%;
|
background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
|
}
|
}
|
}
|
}
|
|
/* 登录方式切换 end */
|
/* 内容 end */
|
|
}
|
|
/deep/.input-placeholder {
|
font-size: 24rpx;
|
//color: #E6E6E6;
|
}
|
|
.picker-modal {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
background: rgba(0, 0, 0, 0.5);
|
}
|
|
.picker-overlay {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
}
|
|
.picker-content {
|
width: 90%;
|
height: 80%;
|
background: #fff;
|
border-radius: 10px;
|
overflow-y: auto;
|
padding: 10px;
|
}
|
|
.picker-item {
|
display: flex;
|
align-items: center;
|
padding: 10px;
|
border-bottom: 1px solid #eee;
|
}
|
</style>
|
