423 lines
9.1 KiB
Vue
423 lines
9.1 KiB
Vue
<!--RS2508 重庆电热 SMT定制：串杆呼叫-->
|
||
<template>
|
||
<view class="container">
|
||
<cu-custom :isBack="true">
|
||
<block slot="content">容器呼叫</block>
|
||
</cu-custom>
|
||
<view class="example">
|
||
<uni-forms ref="form" :model="formData" labelWidth="80px">
|
||
<uni-forms-item label="库存类型" name="skuType">
|
||
<view class="fromItem">
|
||
<uni-data-select v-model="skuType" :localdata="skuTypeList" @change="changeSkuType"
|
||
placeholder="请选择库存类型">
|
||
</uni-data-select>
|
||
<image style="width: 28rpx;" src="/static/images/right.png" mode="widthFix"></image>
|
||
</view>
|
||
</uni-forms-item>
|
||
<uni-forms-item label="容器类型" name="containerType">
|
||
<view class="fromItem">
|
||
<uni-easyinput v-model="skuInput" placeholder="请选择容器类型" @input="onSkuInput"
|
||
@focus="showSkuDropdown = true" @blur="handleSkuBlur" />
|
||
<view class="sku-dropdown" v-if="showSkuDropdown && filteredSkuList.length > 0">
|
||
<view v-for="item in filteredSkuList" :key="item.value" class="dropdown-item"
|
||
@mousedown.prevent="selectSku(item)">
|
||
{{ item.text }}
|
||
</view>
|
||
</view>
|
||
<image style="width: 28rpx;" src="/static/images/right.png" mode="widthFix"></image>
|
||
</view>
|
||
</uni-forms-item>
|
||
<view class="textarea">
|
||
<textarea class="full-width-textarea" v-model="skuInfo">
|
||
</textarea>
|
||
</view>
|
||
<uni-forms-item label="送料位置" name="targetLoc">
|
||
<view class="fromItem">
|
||
<uni-easyinput v-model="formData.targetLoc" placeholder="请扫描货位编号" @blur="trimLocInput" />
|
||
<image style="width: 28rpx;" src="/static/images/right.png" mode="widthFix"></image>
|
||
</view>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
<view class="switch-item">
|
||
<view class="uni-list-cell-db">{{callStatus}}</view>
|
||
<switch v-model="formData.targetLoc" :checked="formData.fullFlag" @change="switchChange" />
|
||
</view>
|
||
</view>
|
||
<bottomBtnGroup :toolbar="bottomBtnList"></bottomBtnGroup>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getSkuDictionary,
|
||
getSkuTypes
|
||
} from "@/api/wms/sku.js"
|
||
import {
|
||
queryAreaByLocCode
|
||
} from "@/api/wms/palletDetailUnBind.js"
|
||
|
||
import {
|
||
emptyPoleCall
|
||
} from "@/api/project/smtOperateApi.js"
|
||
import {
|
||
createPalletBySku,
|
||
callAgvIn
|
||
} from "@/api/wms/bill.js"
|
||
import {
|
||
getDictionary
|
||
} from "@/api/wms/dictData.js"
|
||
import {
|
||
formatDate
|
||
} from 'tough-cookie';
|
||
import
|
||
bottomBtnGroup
|
||
from '@/components/bottomBtn/bottomBtnGroup.vue'
|
||
|
||
export default {
|
||
components: {
|
||
bottomBtnGroup
|
||
},
|
||
onLoad() {
|
||
//加载物料下拉值列表
|
||
this.getSkuTypes();
|
||
},
|
||
onReady() {
|
||
this.$refs.form.setRules(this.rules)
|
||
},
|
||
watch: {
|
||
async skuType(newVal) {
|
||
const param = {
|
||
categoryCode: this.skuType
|
||
};
|
||
const data = await getSkuDictionary(param);
|
||
//this.skuList =data;
|
||
this.originalSkuList = data; // 存储原始数据
|
||
this.filteredSkuList = data.map(item => ({
|
||
value: item.skuCode,
|
||
text: `${item.skuCode} - ${item.skuName}`
|
||
}));
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
/// 数据来源 [模拟]
|
||
async formSubmit(param) {
|
||
//表单提交所需的方法
|
||
console.log("父组件的 提交方法formSubmit", param)
|
||
},
|
||
onSkuInput(value) {
|
||
this.skuInput = value;
|
||
|
||
this.filteredSkuList = this.originalSkuList
|
||
.filter(item => item.skuCode.includes(value))
|
||
.map(item => ({
|
||
value: item.skuCode,
|
||
text: `${item.skuCode} - ${item.skuName}`
|
||
}));
|
||
this.showSkuDropdown = true;
|
||
},
|
||
selectSku(item) {
|
||
this.formData.containerType = item.value;
|
||
this.skuInput = item.value; // 显示完整物料码
|
||
this.showSkuDropdown = false;
|
||
this.skuInfo = item.text
|
||
},
|
||
handleSkuBlur() {
|
||
setTimeout(() => {
|
||
this.showSkuDropdown = false;
|
||
}, 200);
|
||
},
|
||
|
||
//去除空格
|
||
async trimLocInput(event) {
|
||
this.formData.targetLoc = event.target.value.trim();
|
||
|
||
if (!this.formData.targetLoc) {
|
||
//提示
|
||
this.$modal.msgError("请扫描货位编号")
|
||
return;
|
||
}
|
||
},
|
||
|
||
switchChange(e) {
|
||
this.formData.fullFlag = e.detail.value;
|
||
if (this.formData.fullFlag) {
|
||
this.callStatus = "容器类型【满】"
|
||
} else {
|
||
this.callStatus = "容器类型【空】"
|
||
}
|
||
},
|
||
//获取物料类型列表
|
||
async getSkuTypes() {
|
||
this.skuTypeList = await getSkuTypes();
|
||
console.log("this.skuTypeList", this.skuTypeList)
|
||
this.formData.skuType = this.skuTypeList[0].categoryCode
|
||
},
|
||
changeSkuType() {
|
||
this.skuInput = '';
|
||
this.skuInfo = '';
|
||
},
|
||
// submit(ref) {
|
||
// this.$refs.form.validate().then(res => {
|
||
// updateUserProfile(this.user).then(response => {
|
||
// this.$modal.msgSuccess("修改成功")
|
||
// })
|
||
// })
|
||
// }
|
||
//组盘
|
||
async containCallMethods(done) {
|
||
this.$refs.form.validate().then(res => {
|
||
console.log("校验通过后的数据", res)
|
||
const requestData = {
|
||
...this.formData,
|
||
}
|
||
console.log("requestData", requestData)
|
||
emptyPoleCall({
|
||
...this.formData,
|
||
}).then(response => {
|
||
console.log("response", response)
|
||
this.$modal.msgSuccess(response.msg)
|
||
}).finally(() => {
|
||
done();
|
||
});
|
||
})
|
||
},
|
||
|
||
|
||
textareaAInput(e) {
|
||
this.textareaAValue = e.detail.value
|
||
},
|
||
textareaBInput(e) {
|
||
this.textareaBValue = e.detail.value
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
rules: {
|
||
containType: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '请选择物料'
|
||
}]
|
||
},
|
||
remark: {
|
||
rules: [{
|
||
required: true,
|
||
errorMessage: '请扫码托盘号'
|
||
}]
|
||
}
|
||
|
||
},
|
||
//form 底部按钮栏配置
|
||
bottomBtnList: [{
|
||
label: "新增",
|
||
type: "primary",
|
||
event: (done) => { // 接收 done 回调 // ✅ 箭头函数，this 指向组件
|
||
setTimeout(() => {
|
||
// // 在这里执行你想要延迟执行的函数或代码
|
||
console.log("延时5秒") // 调用你的函数
|
||
this.containCallMethods(done);
|
||
}, 5000);
|
||
//this.containCallMethods(done);
|
||
},
|
||
},
|
||
|
||
{
|
||
label: "取消",
|
||
type: "primary",
|
||
event: function() {
|
||
//方式2：
|
||
return new Promise(resolve => {
|
||
console.log("取消方法完成")
|
||
setTimeout(resolve, 5000);
|
||
});
|
||
}
|
||
},
|
||
],
|
||
//tabe选中的数据对象
|
||
skuList: [],
|
||
skuType: '',
|
||
skuTypeList: [],
|
||
skuInput: '',
|
||
showSkuDropdown: false,
|
||
filteredSkuList: [],
|
||
originalSkuList: [],
|
||
skuInfo: "",
|
||
callStatus: "容器类型【满】",
|
||
//表单中的数据信息
|
||
formData: {
|
||
houseCode: "SMT", //仓库
|
||
sourceLocArea: "", //原地址
|
||
containerCode: "", //容器编号
|
||
containerType: "", //容器类型
|
||
fullFlag: true, //满盘标记
|
||
targetLoc: ""
|
||
},
|
||
};
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
background: rgb(242, 243, 245);
|
||
height: 100vh;
|
||
}
|
||
|
||
.uni-forms-item {
|
||
border-bottom: 1px solid #E5E6EB;
|
||
margin-bottom: 0;
|
||
padding: 24rpx 0;
|
||
}
|
||
|
||
::v-deep .uni-forms-item__label {
|
||
color: #1D2129;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
}
|
||
|
||
::v-deep .uni-select {
|
||
border: 0px;
|
||
}
|
||
|
||
::v-deep.uni-select__input-placeholder {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #86909C;
|
||
}
|
||
|
||
.textarea {
|
||
background-color: #F2F3F5;
|
||
width: 100%;
|
||
}
|
||
|
||
::v-deep.full-width-textarea {
|
||
width: 100% !important;
|
||
border: unset !important;
|
||
}
|
||
|
||
::v-deep .is-input-border {
|
||
border: unset;
|
||
}
|
||
|
||
::v-deep .uni-easyinput__placeholder-class {
|
||
font-size: 28rpx;
|
||
color: #86909C;
|
||
}
|
||
|
||
::v-deep .uni-input-input {
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
::v-deep .uni-select__input-placeholder {
|
||
font-size: 28rpx;
|
||
color: #86909C;
|
||
}
|
||
|
||
::v-deep .uniui-bottom {
|
||
display: none;
|
||
}
|
||
|
||
::v-deep .uniui-top {
|
||
display: none;
|
||
}
|
||
|
||
.fromItem {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.example {
|
||
padding: 0 24rpx;
|
||
background-color: #fff;
|
||
width: 702rpx;
|
||
border-radius: 24rpx;
|
||
margin: 24rpx auto;
|
||
|
||
}
|
||
|
||
// 文字色/三级文字-#86909C
|
||
.sku-dropdown {
|
||
position: absolute;
|
||
z-index: 1000;
|
||
background: white;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
width: 100%;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.dropdown-item {
|
||
padding: 8px 12px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.dropdown-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.dropdown-item:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.cu-form-group .title {
|
||
min-width: calc(4em + 15px);
|
||
}
|
||
|
||
page {
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
|
||
|
||
.segmented-control {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.button-group {
|
||
margin-top: 15px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.form-item {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.button {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.switch-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
/* 输入框样式 */
|
||
.full-width-textarea {
|
||
width: calc(100vw - 260rpx);
|
||
/* 直接扣除边距 */
|
||
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
border: 2rpx solid #e5e5e5;
|
||
border-radius: 8rpx;
|
||
min-height: 200rpx;
|
||
font-size: 28rpx;
|
||
line-height: 1.5;
|
||
}
|
||
</style> |