<template>
|
<div class="item" :id="'item' + count" :style="{background: setBgColor(content.inventoryType),
|
boxShadow: '0 3px 3px' + setBgColor(content.inventoryType),
|
}" :class="content.isDeleted ? 'isDeleted' : ''" @mouseenter.native="popTip(content)" @mouseleave.native="popTip()">
|
<div class="count">
|
<p class="txt-code">{{content.wareLocationCode}}</p>
|
|
<span class="triangle-stop" v-if="content.status==2"><span class="stopBg">封存</span></span>
|
<span class="triangle-stop" v-if="content.status==3"><span class="stopBg">禁出</span></span>
|
<span class="triangle-stop" v-if="content.status==4"><span class="stopBg">禁入</span></span>
|
|
<span class="triangle-stop" v-if="content.status==5"><span class="stopBg">锁定</span></span>
|
</div>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { defineProps, computed, defineEmits } from 'vue'
|
const props = defineProps({
|
itemData: {
|
type: Object,
|
required: true,
|
default: {}
|
},
|
index: {
|
type: String,
|
required: true,
|
default: ""
|
}
|
})
|
const emits = defineEmits(['show'])
|
// 鼠标移入移出
|
const popTip = (param?: any) => {
|
emits('show', param)
|
}
|
//库位数据
|
const content = computed(() => props.itemData)
|
//当前元素的索引元素，区别id
|
const count = computed(() => props.itemData.wareLocationCode)
|
|
//库位状态计算
|
const type = computed(() => {
|
if (content.value.inventoryType == null) {
|
return 0
|
} else {
|
if ((Array.isArray(content.value.inventoryType) && content.value.inventoryType.length == 0) || content.value.inventoryType == null) {
|
return 1
|
} else {
|
return 2
|
}
|
}
|
})
|
|
//0:灰色 1橙色
|
//设置背景
|
const setBgColor = (type: number): string => {
|
let color = ''
|
switch (type) {
|
case 0:
|
color = '#A2A2A2';
|
break;
|
case 1:
|
color = '#F18201';
|
break;
|
case 2:
|
color = '#2BA6FF';
|
break;
|
case 3:
|
color = '#FF0000';
|
break;
|
case 4:
|
color = '#FFFF00';
|
break;
|
}
|
return color;
|
}
|
|
</script>
|
<style lang="less" scoped>
|
.item {
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
width: 80px;
|
height: 30px;
|
border-radius: 4px;
|
justify-content: center;
|
align-items: center;
|
margin-right: 15px;
|
font-size: 12px;
|
color: white;
|
margin-bottom: 15px;
|
cursor: pointer;
|
}
|
|
.count {
|
margin: auto;
|
}
|
|
.lockBg {
|
position: absolute;
|
right: 5px;
|
transform: rotate(-45deg) scale(0.8);
|
color: #4b4948;
|
top: -39px;
|
display: block;
|
z-index: 5;
|
}
|
|
|
.stopBg {
|
text-align: center;
|
color: white;
|
left: 5px;
|
transform: rotate(-45deg) scale(0.8);
|
top: 11px;
|
display: block;
|
z-index: 5;
|
position: absolute;
|
}
|
|
.triangle-topright {
|
width: 0;
|
height: 0;
|
border-top: 37px solid #ffff00;
|
border-left: 31px solid transparent;
|
position: absolute;
|
top: 0;
|
right: 0px;
|
}
|
|
.triangle-stop {
|
width: 0;
|
height: 0;
|
border-bottom: 37px solid #ff0000;
|
border-right: 31px solid transparent;
|
position: absolute;
|
bottom: -3px;
|
left: 0px;
|
}
|
.isDeleted{
|
background: transparent !important;
|
box-shadow: none !important
|
}
|
</style>
|
