125 lines
4.5 KiB
Vue
125 lines
4.5 KiB
Vue
<template>
|
||
<div class="card">
|
||
<van-steps :active="callActive" active-color="#23d96e">
|
||
<van-step>选择物料</van-step>
|
||
<van-step>AGV送料中</van-step>
|
||
<van-step>物料验证</van-step>
|
||
</van-steps>
|
||
<el-tabs type="border-card" v-model="callActive" style="margin-top: 5vh;">
|
||
<el-tab-pane :disabled="callActive != 0" :name="0" label="选择物料">
|
||
<van-dropdown-menu>
|
||
<van-field v-model="materials" is-link readonly name="picker" label="叫料图号" placeholder="选择物料图号"
|
||
@click="isShowMaterialsPicker = true" />
|
||
<van-popup :show="isShowMaterialsPicker" destroy-on-close position="bottom">
|
||
<van-picker :columns="materialsList" :model-value="carValue" @confirm="materialsOnConfirm"
|
||
@cancel="isShowMaterialsPicker = false" />
|
||
</van-popup>
|
||
<van-field v-model="carPos" is-link readonly name="picker" label="叫料库位" placeholder="选择库位"
|
||
@click="isShowCarPosPicker = true" />
|
||
<van-popup :show="isShowCarPosPicker" destroy-on-close position="bottom">
|
||
<van-picker :columns="carPosList" :model-value="materialsValue" @confirm="carPosOnConfirm"
|
||
@cancel="isShowCarPosPicker = false" />
|
||
</van-popup>
|
||
</van-dropdown-menu>
|
||
<el-button icon="ShoppingCartFull" type="primary" @click="CallMaterials" style="margin-top: 5vh;">请求叫料</el-button>
|
||
</el-tab-pane>
|
||
<el-tab-pane :disabled="callActive != 1" :name="1" label="AGV送料中">
|
||
<van-cell-group>
|
||
<van-cell title="叫料时间" value="2025-03-25 10:00:00" />
|
||
<van-cell title="叫料图号" :value="materials" />
|
||
<van-cell title="叫料库位" :value="carPos" />
|
||
</van-cell-group>
|
||
<el-button icon="FolderChecked" type="primary" @click="handHandle" style="margin-top: 2vh;">已到达，手动确认</el-button>
|
||
</el-tab-pane>
|
||
<el-tab-pane :disabled="callActive != 2" :name="2" label="物料验证">
|
||
<van-cell-group>
|
||
<van-cell title="计划订单" value="TestOrder1" />
|
||
<van-cell title="工件编号" value="DES1235123" />
|
||
<van-cell title="物料型号" value="DES" />
|
||
<van-cell title="叫料时间" value="2025-03-25 10:00:00" />
|
||
<van-cell title="叫料图号" :value="materials" />
|
||
<van-cell title="叫料库位" :value="carPos" />
|
||
<van-field value="物料码值" label="码值" right-icon="scan" :right-icon-size="19" />
|
||
</van-cell-group>
|
||
<el-button icon="FullScreen" type="primary" @click="verifyCode" style="margin-top: 5vh;">校验物料</el-button>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ElMessageBox } from 'element-plus'
|
||
import { inject, onMounted, onUnmounted, reactive, ref } from 'vue'
|
||
// import { showSuccessToast, showFailToast } from 'vant';
|
||
|
||
const ExecDatabaseByParam = inject('ExecDatabaseByParam')
|
||
|
||
const callActive = ref(0)
|
||
|
||
// 缓存库下拉
|
||
const carPos = ref()
|
||
const carValue = ref()
|
||
const isShowCarPosPicker = ref(false)
|
||
const carPosList = reactive([
|
||
{ text: '缓存库位1', value: '缓存库位1' },
|
||
{ text: '缓存库位2', value: '缓存库位2' },
|
||
{ text: '缓存库位3', value: '缓存库位3' },
|
||
])
|
||
|
||
// 选择物料下拉
|
||
const materials = ref()
|
||
const materialsValue = ref()
|
||
const isShowMaterialsPicker = ref(false)
|
||
const materialsList = reactive([
|
||
{ text: 'MaterialsType1', value: 'MaterialsType1' },
|
||
{ text: 'MaterialsType2', value: 'MaterialsType2' },
|
||
{ text: 'MaterialsType3', value: 'MaterialsType3' },
|
||
])
|
||
|
||
|
||
onMounted(() => {
|
||
})
|
||
|
||
const nextTo = () => {
|
||
if (callActive.value == 2) {
|
||
callActive.value = 0
|
||
} else {
|
||
callActive.value++
|
||
}
|
||
}
|
||
|
||
const carPosOnConfirm = (selectedValues, eslectedOptions) => {
|
||
carPos.value = selectedValues?.text;
|
||
isShowCarPosPicker.value = false;
|
||
};
|
||
|
||
const materialsOnConfirm = (selectedValues, eslectedOptions) => {
|
||
materials.value = selectedValues?.text;
|
||
isShowMaterialsPicker.value = false;
|
||
setTimeout(() => {
|
||
if (carPos.value == undefined) {
|
||
carPos.value = carPosList[2].text
|
||
}
|
||
}, 1000);
|
||
};
|
||
|
||
const CallMaterials = () => {
|
||
ElMessage.success('物料呼叫成功！等待送达')
|
||
nextTo()
|
||
}
|
||
|
||
const handHandle = () => {
|
||
ElMessage.success('手动确认到达，请扫码校验物料')
|
||
nextTo()
|
||
}
|
||
const verifyCode = () => {
|
||
ElMessage.success('物料验证成功！送料结束')
|
||
carPos.value = ''
|
||
materials.value = ''
|
||
nextTo()
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|