<template>
|
<a-drawer
|
title="库位详情"
|
wrapClassName="weiben-private-drawer"
|
:width="400"
|
:closable="false"
|
:maskClosable="true"
|
:visible="visible"
|
:after-visible-change="afterVisibleChange"
|
@close="onClose"
|
>
|
<a-spin :spinning="loading">
|
<div class="zz-inverting-storages-detail-div">
|
<div class="location-detail-box">
|
<div class="base-info info-box">
|
<p>库位编号：{{locationObj.placecode}}</p>
|
<p>托盘编号：{{containercode}}</p>
|
</div>
|
<!-- 物料列表 start -->
|
<div class="location-materials">
|
|
<div class="location-material-item" v-for="(item,index) in materialList" :key="'material-item-'+index">
|
<a-card>
|
<div class="info-box">
|
<p>物料编号：{{item.materialNo}}</p>
|
<p>物料名称：{{item.materialName}}</p>
|
<p>尺寸：{{item.materialSpec}}</p>
|
<p>船号：{{item.shipNo}}</p>
|
<p>图号：{{item.drawingNo}}</p>
|
</div>
|
</a-card>
|
</div>
|
|
</div>
|
<!-- 物料列表 end -->
|
</div>
|
</div>
|
</a-spin>
|
</a-drawer>
|
</template>
|
|
<script>
|
import { GetLocationDetail } from '@/api/modular/main/InvertingStorageManage'
|
export default {
|
name:'zzInvertingStorageDetailDrawer',
|
emits:['update:visible','callback'],
|
props:{
|
visible:{
|
type:Boolean,
|
default:false
|
},
|
row:{
|
type:Object,
|
default:function(){
|
return {}
|
}
|
}
|
},
|
data(){
|
return {
|
loading:false,
|
locationObj:{
|
placestatus:null,
|
islock:null
|
},
|
containercode:'',
|
materialList:[],
|
actionFlag:false
|
}
|
},
|
methods:{
|
onClose(){
|
this.close()
|
},
|
close(){
|
this.$emit('update:visible',false)
|
},
|
afterVisibleChange(visible){
|
if (visible) {
|
this.initShow()
|
} else {
|
this.afterClsoe()
|
}
|
},
|
initShow(){
|
this.loading = true;
|
this.getLocationDetail(()=>{
|
this.loading = false;
|
})
|
},
|
getLocationDetail(callback){
|
let params = {Placecode:this.row.placecode}
|
GetLocationDetail(params).then((d)=>{
|
this.locationObj = d.data.palceDetails || {}
|
this.containercode = d.data.containercode || ''
|
this.materialList = d.data.wmsMaterialStocks || []
|
callback && callback(true)
|
}).catch(()=>{
|
callback && callback(false)
|
})
|
},
|
afterClsoe(){
|
this.locationObj = {
|
placestatus:null,
|
islock:null
|
}
|
this.containercode = ''
|
this.materialList = []
|
if (this.actionFlag) {
|
this.$emit('callback')
|
}
|
this.actionFlag = false
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.zz-inverting-storages-detail-div{
|
height:100%;
|
display: flex;
|
flex-direction: column;
|
&>.btns-row{
|
flex-shrink: 0;
|
padding:12px 16px;
|
.ant-btn + .ant-btn {
|
margin-left: 10px;
|
}
|
}
|
.location-detail-box{
|
flex-grow: 1;
|
overflow: auto;
|
}
|
.info-box{
|
line-height: 1.5;
|
p{
|
margin-bottom: 0;
|
}
|
}
|
.base-info,.location-materials{
|
padding:0 16px;
|
margin-bottom: 16px;
|
}
|
.location-materials{
|
.location-material-item{
|
margin-bottom: 12px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
</style>
|
