<template>
|
<div class="wms-warehouse-location-view-page" ref="page" :style="{height:pageHeight}">
|
<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 red-tag">锁定</div>
|
<div class="tag primary-tag">有货</div>
|
<!-- <div class="tag warning-tag">空托盘</div> -->
|
<div class="tag">无货</div>
|
</div>
|
<!-- 库区显示区域 start -->
|
<div class="locations-box">
|
<div class="location-items-group">
|
<!-- <div class="location-item abc" v-for="(item,index) in list" :style= "{left:150 + item.columnNo *120 + 'px',top:150 + 240*(item.rowNo - 1) + (4 - item.layerNo) *50 + 'px'}" :key="'location-item-'+ index" @click.stop="openDetail(item)" :class="[ -->
|
<div class="location-item abc" v-for="(item,index) in list" :style= "{left: -200 + item.rowNo *450 + item.layerNo * 105 + 'px',top:200 + item.columnNo*50 + 'px'}" :key="'location-item-'+ index" @click.stop="openDetail(item)" :class="[
|
item.islock?'disabled-item':(
|
(item.placestatus===1||item.placestatus===2)?'':(item.emptyContainer?'carrier-item':'primary-item')
|
)
|
]">
|
{{item.placecode}}
|
</div>
|
</div>
|
</div>
|
<!-- 库区显示区域 end -->
|
</div>
|
|
<detail-drawer @ree="getList" :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'
|
export default {
|
name:'wmsWarehouseLocationViewPage',
|
components:{SearchForm,DetailDrawer},
|
data(){
|
return {
|
pageHeight:'100%',
|
detailVisible:false,
|
detailRow:{},
|
loading:false,
|
list:[],
|
searchForm:{}
|
}
|
},
|
watch:{
|
'$store.state.app.multiTab':{
|
deep:true,
|
handler:(newVal,oldVal)=>{
|
this.calPageHeight(newVal)
|
}
|
}
|
},
|
methods:{
|
calPageHeight(hasTab){
|
if (hasTab) {
|
let _h = this.$refs.page.clientHeight;
|
if (_h) {
|
this.pageHeight = (_h-42)+'px'
|
}
|
} else {
|
this.pageHeight = '100%';
|
}
|
},
|
initPageHeight(callback){
|
setTimeout(()=>{
|
this.calPageHeight(this.$store.state.app.multiTab)
|
callback && callback()
|
},100)
|
},
|
openDetail(obj){
|
this.detailRow = obj
|
this.detailVisible = true;
|
},
|
getList(params,callback){
|
GetPalceList(params).then((d)=>{
|
this.list = d.data.palceDetails || []
|
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.initPageHeight(()=>{
|
this.loading = true
|
// this.$refs.search.init((f,valObj)=>{
|
// if (f) {
|
// this.searchForm = valObj
|
// this.getList(valObj,()=>{
|
// this.loading = false
|
// })
|
// } else {
|
// this.loading = false
|
// }
|
// })
|
let parm = {Areaid:0,Rowno:0}
|
this.getList(parm,()=>{
|
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;
|
.top-blcok{
|
flex-shrink: 0;
|
padding:10px 16px 16px 16px;
|
}
|
.containter-blcok{
|
flex-grow: 1;
|
display: flex;
|
flex-direction: column;
|
@danger-color:#ff3333;
|
@primary-color:#ccffff;
|
@warning-color:#fffacd;
|
@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;
|
&+.tag{
|
margin-left: 10px;
|
}
|
&.red-tag{
|
background-color: @danger-color;
|
color: #FFFFFF;
|
}
|
&.primary-tag{
|
background-color: @primary-color;
|
}
|
&.warning-tag{
|
background-color: @warning-color;
|
}
|
}
|
}
|
.locations-box{
|
flex-grow: 1;
|
overflow: auto;
|
.location-items-group{
|
padding:0 0 0 16px;
|
display:flex;
|
flex-wrap: wrap;
|
.location-item {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width:100px;
|
height:40px;
|
overflow:hidden;
|
white-space:nowrap;
|
margin-bottom: 16px;
|
margin-right: 16px;
|
border: 1px solid @border-color-x;
|
border-radius: 4px;
|
position: fixed;
|
cursor: pointer;
|
&.active{
|
box-shadow: 0 0 4px #00ff00;
|
}
|
&.primary-item{
|
background-color: @primary-color;
|
}
|
&.carrier-item{
|
background-color: @warning-color;
|
}
|
&.disabled-item{
|
background-color: @danger-color;
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
}
|
}
|
</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>
|
