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>
|