<template>
|
<!-- 库存管理-->
|
<div id="viewdata" class="global-content">
|
<!-- 筛选 -->
|
<div class="width margin4auto paddingtopbottom boxshadow4">
|
<view-inquer @inquer="inquer" />
|
<div class="flex flex-wrap margin-top10px align-center justify-around">
|
<div class="flex align-center margin-right" v-for="(item, index) in statuslist" :key="index + 'status'">
|
<p>
|
<i class="iconi" :style="'background:' + item.bgcl" /> {{ item.title }}：{{ StatusPlaceCount[item.name] }}
|
</p>
|
</div>
|
</div>
|
</div>
|
<div class="allheigth width margin4auto paddingtopbottom overflowauto">
|
<div v-for="(item, index) in GetAllPlace" :key="index + 'getallpace'">
|
<!-- <p class="margintopbot">层数{{ item.layer }}</p> -->
|
<div class="flex">
|
<div v-for="(element, index) in item.llist" :key="index + 'layer'">
|
<div
|
class="view-chunk"
|
:class="
|
element.placeStates == 1
|
? 'emptyappliance chunkkhover pointer'
|
: element.placeStates == 2
|
? 'instore chunkkhover pointer'
|
: element.placeStates == 3
|
? 'lock chunkkhover pointer'
|
: element.placeStates == 99
|
? 'bgnull'
|
: 'pointer chunkkhover'
|
"
|
:key="index + 'place'"
|
@click="Placeclick(element)"
|
>
|
{{ element.placeName }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<transition name="modal">
|
<viewdata-info v-if="viewinfoshow" @cancel="viewinfoshow = false">
|
<p slot="title">视图详情</p>
|
<div class="height" slot="centent">
|
<div class="width height overflowy-auto">
|
<div class="width96 margin-auto boxshadow4 viewpadding" v-show="tableData.length > 0">
|
<template v-for="(i, index) in tableData">
|
<div v-if="tableData.length > 0" class="width height" :key="index + 'tabledata'">
|
<div class="flex margintopbot" v-for="(item, count) in tableHead" :key="count + 'tablehead'">
|
<label class="color909399 fontsiez1rem width15">{{ item.columnDescription }}：</label>
|
<p class="borderbottom345 width70">
|
{{ tableData[index][item.columnName] }}
|
</p>
|
</div>
|
</div>
|
</template>
|
</div>
|
<p class="color909399 fontsize2rem absolute transformtopleft" v-show="tableData.length == 0">暂无数据</p>
|
</div>
|
<!-- <table-container :tableHead="tableHead" :tableData="tableData" :operation="false" :paginationshow="false" /> -->
|
</div>
|
</viewdata-info>
|
</transition>
|
</div>
|
</template>
|
|
<script>
|
import ViewInquer from '../../components/viewdataInquer.vue';
|
import { GetAllStatusPlaceCount, GetAllPlaceInfo, GetPVCVIInfo } from '@/api/viewdata';
|
import viewdataInfo from '../../components/viewdatainfo.vue';
|
const { viewdata } = require('@/components/tableContainer/tableHead');
|
export default {
|
data() {
|
return {
|
tableData: [],
|
statuslist: [
|
{
|
title: '当前巷道锁定的库位数量',
|
name: 'lPlaceCount',
|
bgcl: '#C82627'
|
},
|
{
|
title: '当前巷道空库位数量',
|
name: 'ePlaceCount',
|
bgcl: '#909399'
|
},
|
{
|
title: '当前巷道空器具库位数量',
|
name: 'cPlaceCount',
|
bgcl: '#59A9AA'
|
},
|
{
|
title: '当前巷道有货库位数量',
|
name: 'iPlaceCount',
|
bgcl: '#67C23A'
|
}
|
|
],
|
inquerobj: {
|
storageNo: 1,
|
row: 1
|
},
|
StatusPlaceCount: {},
|
GetAllPlace: [],
|
viewinfoshow: false
|
};
|
},
|
components: { ViewInquer, viewdataInfo },
|
computed: {
|
tableHead() {
|
return viewdata;
|
}
|
},
|
mounted() {
|
this.GetAllStatusPlaceCount();
|
this.GetAllPlaceInfo();
|
},
|
methods: {
|
//查询
|
inquer(e) {
|
this.inquerobj = e;
|
this.GetAllStatusPlaceCount();
|
this.GetAllPlaceInfo();
|
},
|
//获取各种状态的库位数量
|
GetAllStatusPlaceCount() {
|
const { storageNo } = this.inquerobj;
|
GetAllStatusPlaceCount({ storageNo }).then(res => {
|
this.StatusPlaceCount = res;
|
});
|
},
|
//获取指定巷道库的所有库位信息
|
GetAllPlaceInfo() {
|
const { storageNo, row } = this.inquerobj;
|
this.GetAllPlace = [];
|
this.$Loading(true);
|
GetAllPlaceInfo({ storageNo, row }).then(res => {
|
if (res.code == 0) {
|
console.log(res.data);
|
let data = res.data;
|
let list = [];
|
data.forEach(element => {
|
list.push(element.layer);
|
});
|
list = Array.from(new Set(list));
|
list.forEach((item, index) => {
|
this.GetAllPlace.push({ layer: item, llist: [] });
|
data.forEach(element => {
|
if (item == element.layer) {
|
this.GetAllPlace[index].llist.push(element);
|
}
|
});
|
});
|
this.GetAllPlace.forEach(item => {
|
console.log(item);
|
item.llist.sort((a, b) => {
|
return a.col - b.col;
|
});
|
});
|
console.log(this.GetAllPlace);
|
// this.GetAllPlace = res.data;
|
}
|
this.$Loading();
|
});
|
},
|
//点击获取库位里的托盘或者物料信息
|
Placeclick(item) {
|
if (item.placeStates != 99) {
|
const { placeName } = item;
|
this.viewinfoshow = true;
|
this.tableData = [];
|
GetPVCVIInfo({ placeName }).then(res => {
|
if (res) {
|
res.forEach(item => {
|
item.isFull = item.isFull == 1 ? '是' : item.isFull == 0 ? '否' : item.isFull;
|
item.isBad = item.isBad == 1 ? '是' : item.isBad == 0 ? '否' : item.isBad;
|
});
|
this.tableData = res;
|
}
|
});
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
#viewdata {
|
.allheigth {
|
height: calc(100% - 110px);
|
}
|
.viewpadding {
|
padding: 1px 10px;
|
}
|
.iconi {
|
display: inline-block;
|
width: 16px;
|
height: 16px;
|
border-radius: 4px;
|
box-shadow: 0 0 4px #eaedef;
|
}
|
.view-chunk {
|
width: 100px;
|
height: 20px;
|
padding: 8px;
|
text-align: center;
|
margin: 0 5px 10px;
|
border-radius: 4px;
|
// box-shadow: 0 0 4px #345;
|
color: #fff;
|
background: #909399;
|
transition: all 0.5s;
|
}
|
.chunkkhover {
|
&:hover {
|
background: #e6a23c;
|
}
|
}
|
.emptyappliance {
|
background: #59a9aa;
|
}
|
.instore {
|
background: #67c23a;
|
}
|
.lock {
|
background: #c82627;
|
}
|
.bgnull {
|
background: unset;
|
}
|
}
|
</style>
|
