<template>
|
<div class="statistics-of-store-location-page subpages-containter-box">
|
<div class="top-buttons-row">
|
<el-button type="danger" :disabled="!activeId||activeLock" @click="onChangeLockStatus(true)">锁定</el-button>
|
<el-button type="success" :disabled="!activeId||!activeLock" @click="onChangeLockStatus(false)">解锁</el-button>
|
<!-- <el-button type="primary">导出</el-button> -->
|
</div>
|
|
<el-form :inline="true" class="search-form">
|
<el-form-item label="库区">
|
<el-select placeholder="请选择..." clearable class="default-form-width" v-model="query.Area" @change="onSelectArea">
|
<el-option v-for="(item,index) in selectList.areas" :key="'areas-'+index" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="排">
|
<el-select placeholder="请选择..." clearable class="default-form-width" v-model="query.Row" @change="onSelectRow">
|
<el-option v-for="(item,index) in selectList.rows" :key="'rows-'+index" :label="item.name" :value="item.id" />
|
</el-select>
|
</el-form-item>
|
</el-form>
|
|
<div class="location-containter">
|
<div class="tags-row">
|
<div class="tag red-tag">锁定</div>
|
<div class="tag primary-tag">有货</div>
|
<div class="tag warning-tag">载具</div>
|
<div class="tag">无货</div>
|
</div>
|
<div class="containters-box">
|
<!-- 库位 头部 start -->
|
<div class="containters-row">
|
<div class="text-cell row-text-cell"></div>
|
<template v-for="index of columnNumber" :key="'header-cell-'+index">
|
<div class="divider-cell" v-if="index!==1"></div>
|
<div class="text-cell zero-cell">第 {{index}} 列</div>
|
</template>
|
</div>
|
<!-- 库位 头部 end -->
|
<!-- ############################################ -->
|
<!-- 库位 body start -->
|
<div class="containters-row" v-for="(item1,index1) in locations" :key="'location-row-'+index1">
|
<div class="text-cell row-text-cell">第 {{layerNumber-index1}} 层</div>
|
<template v-for="(item2,index2) in item1" :key="'location-cell-'+index2">
|
<div class="divider-cell" v-if="index2!==0"></div>
|
<div class="containter-cell" :class="[
|
!item2.IsExist?'died-cell':(item2.IsLock?'disabled-cell':(!item2.IsFull?'empty-cell':(item2.MaterialType===2?'carrier-cell':'primary-cell'))),
|
item2.id===activeId?'active':''
|
]" @click="onClickLocation(item2,[index1,index2])">{{item2.SrmStationCode}}</div>
|
</template>
|
</div>
|
<!-- 库位 body end -->
|
</div>
|
</div>
|
|
<pannel title="货品信息" padding-left="0" padding-right="0" v-show="visibleDetails">
|
<el-descriptions :column="2">
|
<el-descriptions-item label="物料类型:">{{activeDetail.MaterialTypeName}}</el-descriptions-item>
|
<template v-if="activeDetail.MaterialType===2">
|
<el-descriptions-item label="数量">{{activeDetail.Qty}}</el-descriptions-item>
|
</template>
|
<template v-else>
|
<el-descriptions-item label="订货号:">{{activeDetail.OrderNo}}</el-descriptions-item>
|
<el-descriptions-item label="序列号:">{{activeDetail.SerialNumber}}</el-descriptions-item>
|
<el-descriptions-item label="品类:">{{activeDetail.CargoTypeName}}</el-descriptions-item>
|
<el-descriptions-item label="系列:">{{activeDetail.SeriesName}}</el-descriptions-item>
|
<el-descriptions-item label="型号:">{{activeDetail.MaterialModel}}</el-descriptions-item>
|
<el-descriptions-item label="主机厂:">{{activeDetail.Supplier}}</el-descriptions-item>
|
</template>
|
</el-descriptions>
|
</pannel>
|
</div>
|
</template>
|
|
<script>
|
import SearchBar from '@/components/SearchBar.vue'
|
import Pannel from '@/components/Pannel1.vue'
|
const defaultQuery = {
|
Area:1,
|
Row:1
|
}
|
export default {
|
name:'statisticsOfStoreLocationPage',
|
components:{Pannel},
|
data(){
|
return {
|
selectList:{
|
areas:[],
|
rows:[]
|
},
|
columnNumber:8,
|
layerNumber:5,
|
locations:[],
|
activeId:null,
|
activeLock:null,
|
activeDetail:{},
|
visibleDetails:false,
|
query:{...defaultQuery},
|
queried:{...defaultQuery}
|
}
|
},
|
mounted() {
|
this.init()
|
},
|
methods:{
|
init(){
|
this.$loading();
|
this.getSelectLists((f)=>{
|
if (f) {
|
this.reset(false,()=>{
|
this.$loading().close();
|
})
|
} else {
|
this.$loading().close();
|
}
|
})
|
},
|
reset(needLoading=true,callback){
|
this.query = {...defaultQuery}
|
this.newList(callback,needLoading)
|
},
|
newList(needLoading=true,callback){
|
this.queried = {...this.query}
|
this.getRowStations(callback,needLoading)
|
},
|
getRowStations(callback,needLoading=true){
|
if (needLoading) {
|
this.$loading();
|
}
|
let params = {...this.query}
|
this.$api.get('GetStationStore',params,{block:'station'}).then((d)=>{
|
this.columnNumber = d.Colunm;
|
this.layerNumber = d.Layer;
|
this.parseLocations(d.Data);
|
if (needLoading) {
|
this.$loading().close();
|
}
|
callback && callback(true)
|
}).catch(()=>{
|
if (needLoading) {
|
this.$loading().close();
|
}
|
callback && callback(false)
|
})
|
},
|
parseLocations(arr){
|
let res = [];
|
for (let i1=0;i1<this.layerNumber;i1++) {
|
res.push([])
|
}
|
arr.forEach((item,index)=>{
|
res[(this.layerNumber-((index%this.layerNumber)+1))].push(item)
|
})
|
this.locations = res;
|
},
|
getSelectLists(callback){
|
Promise.all([
|
this.$api.get('GetEnumberList',{category:'AreaEnum'},{block:'common'}),
|
this.$api.get('GetEnumberList',{category:'RowEnum'},{block:'common'})
|
]).then((response)=>{
|
this.selectList.areas = response[0] || []
|
this.selectList.rows = response[1] || []
|
callback && callback(true)
|
}).catch((err)=>{
|
callback && callback(false)
|
})
|
},
|
getLocationDetails(){
|
this.$loading()
|
let params = {StationId:this.activeId}
|
this.$api.get('GetStoreByStationId',params,{block:'store'}).then((d)=>{
|
this.activeDetail = d;
|
this.visibleDetails = true;
|
this.$loading().close();
|
}).catch(()=>{
|
this.visibleDetails = false;
|
this.$loading().close();
|
})
|
},
|
onSelectArea(selection){
|
this.query.Row = null;
|
},
|
onSelectRow(selection){
|
if (!selection) return false;
|
this.newList()
|
},
|
onClickLocation(obj){
|
if (!obj.IsExist) return false
|
this.activeId = obj.id
|
this.activeLock = obj.IsLock;
|
if (!obj.IsFull) {
|
this.visibleDetails = false;
|
return false
|
}
|
this.getLocationDetails()
|
},
|
onChangeLockStatus(status){
|
this.$loading()
|
this.lockAjax(status,(f)=>{
|
if (f) {
|
this.newList(false,()=>{
|
this.$loading().close()
|
})
|
} else {
|
this.$loading().close()
|
}
|
})
|
},
|
lockAjax(status,callback){
|
let params = {id:this.activeId,isLock:status}
|
if (status) {
|
params.operationRemark = '人工锁定'
|
} else {
|
params.operationRemark = '人工解锁'
|
}
|
this.$api.put('UpdateIsLock',params,{block:'station'}).then(()=>{
|
this.activeLock = !this.activeLock
|
callback && callback(true)
|
}).catch(()=>{
|
callback && callback(false)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.statistics-of-store-location-page{
|
$danger-color:#ff3333;
|
$primary-color:#ccffff;
|
$warning-color:#fffacd;
|
$border-color-x:#c0c0c0;
|
.top-buttons-row{
|
padding-bottom: 12px;
|
}
|
.location-containter{
|
.tags-row{
|
display: flex;
|
justify-content: center;
|
.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;
|
}
|
}
|
}
|
.containters-box{
|
padding-top: 12px;
|
.containters-row{
|
display: flex;
|
margin-bottom: 6px;
|
&>*{
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.row-text-cell{
|
width: 60px;
|
justify-content:flex-start;
|
flex-shrink: 0;
|
}
|
.divider-cell{
|
width: 20px;
|
flex-shrink: 0;
|
}
|
.containter-cell,.zero-cell{
|
width: 10px;
|
flex-grow: 1;
|
overflow:hidden;
|
white-space:nowrap;
|
}
|
.containter-cell{
|
height: 30px;
|
border: 1px solid $border-color-x;
|
border-radius: 4px;
|
cursor: pointer;
|
&.active{
|
box-shadow: 0 0 4px #00ff00;
|
}
|
}
|
.died-cell{
|
background: 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;
|
}
|
.primary-cell{
|
background-color: $primary-color;
|
}
|
.carrier-cell{
|
background-color: $warning-color;
|
}
|
.disabled-cell{
|
background-color: $danger-color;
|
color: #FFFFFF;
|
cursor: default;
|
}
|
.empty-cell{
|
cursor: default;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
