<template>
|
<!-- 库位视图 -->
|
<div class="wms-warehouse-location-view-page">
|
<a-spin :spinning="loading">
|
<div class="top-blcok">
|
<search-form ref="search" :loading.sync="loading" @search="onSearch" />
|
</div>
|
<div class="containter-blcok">
|
<div class="example-tags">
|
<div class="tag">空闲({{countNum.empty}})</div>
|
<div class="tag orange-tag">待入({{countNum.daiRu}})</div>
|
<div class="tag purple-tag">待出({{countNum.daiChu}})</div>
|
<div class="tag primary-tag">存货({{countNum.fill}})</div>
|
<div class="tag green-tag">空托({{countNum.kongtuo}})</div>
|
<div class="tag red-tag">锁定({{countNum.lock}})</div>
|
</div>
|
<!-- 库区显示区域 start -->
|
<div class="locations-box">
|
|
<div class="location-items-group-block" v-for="(item1,index1) in list" :key="'location-block-'+index1">
|
<div class="block-title">第{{item1.aisle}}巷道</div>
|
|
<div class="location-items-group">
|
<div class="location-items-row" v-for="(item2,index2) in (item1.wareLocationRownoData || [])" :key="'location-row-'+index2">
|
|
<div class="location-items-layer" v-for="(item3,index3) in (item2.wareLocationLayerData || [])" :key="'location-layer-'+index3">
|
<div class="divider"></div>
|
<div class="location-item" v-for="(item4,index4) in (item3.wareLocationColumnNoData || [])" :key="'location-item-'+index4"
|
:class="[handleClass(item4)]"
|
@click="openDetail(item4)">
|
{{item4?item4.placeCode:''}}
|
</div>
|
<div class="divider-zero"></div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
</div>
|
<!-- 库区显示区域 end -->
|
</div>
|
<detail-drawer :visible.sync="detailVisible" :row="detailRow" @callback="lockCallback" />
|
</a-spin>
|
</div>
|
</template>
|
|
<script>
|
import SearchForm from './SearchForm.vue'
|
import DetailDrawer from './DetailDrawer.vue'
|
import {
|
GetPalceList
|
} from '@/api/modular/main/LocationViewManage'
|
import ItemVue from '@/components/AvatarList/Item.vue'
|
export default {
|
name: 'wmsWarehouseLocationViewPage',
|
components: {
|
SearchForm,
|
DetailDrawer
|
},
|
data() {
|
return {
|
detailVisible: false,
|
detailRow: {},
|
loading: false,
|
countNum: {
|
empty: 0,
|
daiRu: 0,
|
daiChu: 0,
|
fill: 0,
|
kongtuo:0,
|
lock: 0
|
},
|
list: [],
|
searchForm: {}
|
}
|
},
|
methods: {
|
handleClass(item4) {
|
let className = ''
|
if (item4) {
|
if (item4.islock) {
|
className = 'red-item'
|
} else if (item4.placeStatus === 3) {
|
if(item4.emptyContainer === 1){
|
className = 'green-item'
|
}else{
|
className = 'primary-item'
|
}
|
} else if (item4.placeStatus === 2) {
|
className = 'orange-item'
|
} else if (item4.placeStatus === 4) {
|
className = 'purple-item'
|
}
|
} else {
|
className = 'died-item'
|
}
|
return className
|
},
|
|
openDetail(obj) {
|
if (!obj) return false
|
this.detailRow = obj
|
this.detailVisible = true;
|
},
|
getList(params, callback) {
|
GetPalceList(params).then((d) => {
|
if (d.data) {
|
this.countNum = {
|
empty: d.data.emptyNum || 0,
|
daiRu: d.data.daiRuNum || 0,
|
daiChu: d.data.daichuNum || 0,
|
fill: d.data.materialNum || 0,
|
kongtuo: d.data.emptyContainerNum || 0,
|
lock: d.data.lockNum || 0
|
}
|
this.list = d.data.palceDetails || []
|
} else {
|
this.countNum = {
|
empty: 0,
|
daiRu: 0,
|
daiChu: 0,
|
fill: 0,
|
kongtuo:0,
|
lock: 0
|
}
|
this.list = []
|
}
|
callback && callback(true)
|
}).catch(() => {
|
callback && callback(false)
|
})
|
},
|
onSearch(valObj) {
|
this.loading = true
|
this.searchForm = valObj
|
this.getList(valObj, () => {
|
this.loading = false
|
})
|
},
|
lockCallback() {
|
this.loading = true
|
this.getList(this.searchForm, () => {
|
this.loading = false
|
})
|
},
|
init() {
|
this.loading = true
|
this.$refs.search.init((f, valObj) => {
|
this.loading = false
|
if (f) {
|
this.searchForm = valObj
|
this.getList(valObj, () => {
|
this.loading = false
|
})
|
} else {
|
this.loading = false
|
}
|
})
|
}
|
},
|
mounted() {
|
this.init()
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.wms-warehouse-location-view-page {
|
overflow: hidden;
|
display: flex;
|
overflow: auto;
|
background-color: #fff;
|
border-radius: 10px;
|
flex-direction: column;
|
height: 100%;
|
|
.top-blcok {
|
flex-shrink: 0;
|
padding: 10px 16px 16px 16px;
|
}
|
|
.containter-blcok {
|
flex-grow: 1;
|
height: 1px;
|
display: flex;
|
flex-direction: column;
|
@gray-color: #808080;
|
@danger-color: #ff3333;
|
@primary-color: #ccffff;
|
@orange-color: #ffa500;
|
@purple-color: #800080;
|
@green-color: #2cb228;
|
@border-color-x: #c0c0c0;
|
|
.example-tags {
|
flex-shrink: 0;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 0 16px 16px 16px;
|
|
.tag {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 30px;
|
width: 100px;
|
border: 1px solid @border-color-x;
|
border-radius: 4px;
|
cursor: default;
|
background-color: @gray-color;
|
|
&+.tag {
|
margin-left: 10px;
|
}
|
|
&.red-tag {
|
background-color: @danger-color;
|
}
|
|
&.primary-tag {
|
background-color: @primary-color;
|
}
|
|
&.orange-tag {
|
background-color: @orange-color;
|
}
|
|
&.purple-tag {
|
background-color: @purple-color;
|
}
|
&.green-tag {
|
background-color: @green-color;
|
}
|
&:not(.primary-tag) {
|
color: #FFFFFF;
|
}
|
}
|
}
|
|
.locations-box {
|
flex-grow: 1;
|
height: 1px;
|
overflow: auto;
|
|
.location-items-group-block {
|
padding: 0 16px;
|
margin-bottom: 16px;
|
.block-title {
|
padding-bottom: 4px;
|
}
|
&:last-child{
|
margin-bottom: 0;
|
}
|
}
|
|
.location-items-group {
|
@padding-size:8px;
|
|
.location-items-row {
|
margin-bottom: 16px;
|
background-color: #f0f8ff;
|
overflow: auto;
|
padding: @padding-size 0;
|
display: flex;
|
flex-direction: column;
|
|
.location-items-layer{
|
flex-shrink: 0;
|
display: flex;
|
margin-bottom: @padding-size;
|
.divider{
|
width:@padding-size;
|
flex-shrink: 0;
|
}
|
.divider-zero{
|
width:1px;
|
flex-shrink: 0;
|
}
|
.location-item {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 120px;
|
height: 50px;
|
overflow: hidden;
|
white-space: nowrap;
|
margin-right: @padding-size;
|
border: 1px solid @border-color-x;
|
border-radius: 4px;
|
cursor: pointer;
|
flex-shrink: 0;
|
background-color: @gray-color;
|
|
&.active {
|
box-shadow: 0 0 4px #00ff00;
|
}
|
|
&.died-item {
|
background-color: #FFFFFF;
|
background-image: linear-gradient(
|
to top right,
|
rgba(192, 192, 192, 0) 0%,
|
rgba(192, 192, 192, 0) calc(50% - 1px),
|
rgba(192, 192, 192, 1) 50%,
|
rgba(192, 192, 192, 0) calc(50% + 1px),
|
rgba(192, 192, 192, 0) 100%
|
), linear-gradient(
|
to bottom right,
|
rgba(192, 192, 192, 0) 0%,
|
rgba(192, 192, 192, 0) calc(50% - 1px),
|
rgba(192, 192, 192, 1) 50%,
|
rgba(192, 192, 192, 0) calc(50% + 1px),
|
rgba(192, 192, 192, 0) 100%
|
);
|
cursor: not-allowed;
|
}
|
|
&.red-item {
|
background-color: @danger-color;
|
}
|
&.green-item {
|
background-color: @green-color;
|
}
|
|
&.primary-item {
|
background-color: @primary-color;
|
}
|
|
&.orange-item {
|
background-color: @orange-color;
|
}
|
|
&.purple-item {
|
background-color: @purple-color;
|
}
|
|
&:not(.primary-item,.died-item) {
|
color: #FFFFFF;
|
}
|
|
}
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
|
}
|
}
|
}
|
}
|
}
|
</style>
|
<style lang="less">
|
.wms-warehouse-location-view-page {
|
|
.ant-spin-nested-loading,
|
.ant-spin-container {
|
height: 100%;
|
}
|
|
.ant-spin-container {
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
}
|
}
|
</style>
|
