<template>
|
<div>
|
|
<!-- 库位列表 -->
|
|
<div v-for="(itemW, indexW) in storageList" :key="indexW">
|
<p>巷道：{{ itemW.laneCode }}</p>
|
<div v-for="(itemIN, indexIN) in itemW.rows" :key="indexIN">
|
<div class="content-view">
|
<!-- 每个库位方块 查询库位全部库存 -->
|
<div class="mask100" v-for="(itemSmall, itemSmallIndex) in itemIN.rowLocations2" :key="itemSmallIndex">
|
<content-item
|
v-for="item in itemSmall"
|
:key="item.wareLocationCode"
|
:itemData="item"
|
:index="item.wareLocationCode"
|
@show="show(item, item.wareLocationCode)"
|
@click="openDialog(item.wareLocationCode)"
|
:class="'laneCodeBox_' + item.showInventoryType"
|
>
|
</content-item>
|
</div>
|
</div>
|
<div v-if="itemW.rows.length > 1" class="stripe stripeM"></div>
|
</div>
|
</div>
|
<!-- 库位悬浮层 -->
|
<teleport :to="'#item' + count" v-if="itemVisible">
|
<div class="item-detail" v-if="!detailData.isDeleted">
|
<p>{{ setKwStauts(detailData.inventoryType) }}</p>
|
{{ containerCodeSHsow }}
|
</div>
|
</teleport>
|
<!-- 详情弹框 -->
|
<prop-detail ref="propDetailRef"></prop-detail>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { ElMessage } from 'element-plus';
|
import { ref, defineProps, computed, getCurrentInstance } from 'vue';
|
import ContentItem from './ContentItem.vue';
|
import PropDetail from './propDetail.vue';
|
const { proxy }: any = getCurrentInstance(); // 访问实例上下文 proxy同时支持开发 线上环境
|
//props
|
const props = defineProps({
|
contentData: {
|
type: Array,
|
required: true,
|
default: [],
|
},
|
});
|
const containerCodeSHsow = ref('');
|
//库位列表
|
const storageList: Record<any, any> = computed(() => props.contentData);
|
//每个库位详情的显示
|
const itemVisible = ref(false);
|
//详情数据
|
const detailData = ref({} as Record<string, any>);
|
//当前选中的库位
|
const count = ref(String);
|
//显示 隐藏详情
|
const show = (item: any, index: any) => {
|
// console.log('item:'+JSON.stringify(item) )
|
// console.log('库位号'+index)
|
if (item) {
|
itemVisible.value = true;
|
count.value = index;
|
detailData.value = item;
|
containerCodeSHsow.value = item.wareContainerCode;
|
} else {
|
itemVisible.value = false;
|
count.value = index;
|
detailData.value = {};
|
containerCodeSHsow.value = '';
|
}
|
};
|
|
// 显示库位状态
|
const setKwStauts = (type: number): string => {
|
let status = '';
|
switch (type) {
|
case 0:
|
status = '空库位';
|
break;
|
case 1:
|
status = '有货库位（空容器）';
|
break;
|
case 2:
|
status = '有货库位（物料）';
|
}
|
return status;
|
};
|
|
//打开窗口
|
const openDialog = (type: string) => {
|
//托盘号
|
if (!type || type == null) {
|
ElMessage.warning('不存在托盘号！');
|
return;
|
}
|
proxy.$refs['propDetailRef'].openDialog(type);
|
};
|
</script>
|
<style lang="less" scoped>
|
.content-view {
|
width: 100%;
|
padding-left: 14px;
|
box-sizing: border-box;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: end;
|
align-content: flex-start;
|
flex-direction: column-reverse;
|
height: 480px;
|
overflow-x: auto;
|
// border-bottom: 10px solid #e0e0e0;
|
|
.item-detail {
|
min-width: 100%;
|
position: absolute;
|
left: 50%;
|
top: 20px;
|
transform: translate(-50%, -102%);
|
padding: 2px;
|
background: #000;
|
opacity: 0.7;
|
color: #fff;
|
border-radius: 4px;
|
box-sizing: content-box;
|
white-space: nowrap;
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-start;
|
align-items: center;
|
z-index: 3;
|
|
p {
|
margin: 5px;
|
}
|
}
|
}
|
|
.stripe {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
width: 100%;
|
height: 58px;
|
color: white;
|
font-size: 25px;
|
}
|
|
/*斑马条纹*/
|
.stripeM {
|
background: linear-gradient(#dbd4b4 50%, #f5be6a 50%);
|
background-size: 100% 40px;
|
}
|
.laneCodeBox_0 {
|
visibility: hidden;
|
}
|
.laneCodeBox_1 {
|
visibility: visible;
|
}
|
|
.mask100 {
|
height: 100%;
|
display: flex;
|
flex-direction: column-reverse;
|
}
|
// #item3-4-3-3,#item3-4-1-3,#item3-4-2-3,#item3-4-4-3{
|
// margin-bottom: 104px;
|
// }
|
// #item3-1-3-4,#item3-1-4-4{
|
// margin-bottom: 149px;
|
|
// }
|
</style>
|
