|
|
<template>
|
|
|
<div class="check-page">
|
|
|
<a-button type="primary" @click="exportStock" class="export-all">
|
|
|
导出全部巷道
|
|
|
</a-button>
|
|
|
<div class="title-info">
|
|
|
<span class="explain">颜色说明：</span>
|
|
|
<span class="info-text">
|
|
|
<a-tag color="#d81e06" style="width:30px;height:20px;margin-right:6px"></a-tag>
|
|
|
盘点错误
|
|
|
</span>
|
|
|
<span class="info-text">
|
|
|
<a-tag color="#1afa29" style="width:30px;height:20px;margin-right:6px"></a-tag>
|
|
|
盘点正确
|
|
|
</span>
|
|
|
<span class="info-text">
|
|
|
<a-tag color="#bfbfbf" style="width:30px;height:20px;margin-right:6px"></a-tag>
|
|
|
未盘点
|
|
|
</span>
|
|
|
</div>
|
|
|
|
|
|
<div style="margin-top: 10px">
|
|
|
<a-select v-if="data[0]" :default-value="data[0].name"
|
|
|
@change="handleChange" class="select-roadway">
|
|
|
<a-select-option v-for="i in data" :key="i.name" :value="i.id">
|
|
|
{{i.name}}
|
|
|
</a-select-option>
|
|
|
</a-select>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!--左货架DOM-->
|
|
|
<div class="center-box">
|
|
|
<span class="shelf-number">
|
|
|
左货架号: {{leftShelveId.shelveId}}
|
|
|
</span>
|
|
|
|
|
|
<a-radio-group v-model="size" style="margin:10px 0" @change="getStockRowColumn"
|
|
|
v-if="streetDetail.leftInsideShelveId && streetDetail.leftOutsideShelveId">
|
|
|
<a-radio-button value="leftOutsideShelveId">
|
|
|
外
|
|
|
</a-radio-button>
|
|
|
<a-radio-button value="leftInsideShelveId">
|
|
|
内
|
|
|
</a-radio-button>
|
|
|
</a-radio-group>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="check-content" v-for="item in data" :key="item.id">
|
|
|
<subsection v-if="item.id == select" :total="{row: item.leftRow, column: item.leftColumn}" :shelveId="leftShelveId.shelveId">
|
|
|
<!-- <template v-slot="scope">
|
|
|
<div class="roadway-top">
|
|
|
<div class="roadway-box">
|
|
|
<div class="line" v-for="(column,index) in item.leftColumn" :key="index" v-if="column >= scope.data.random.column[0] && column <= scope.data.random.column[1]">
|
|
|
<div v-for="(row,i) in item.leftRow" :key="i" class="el" v-if="row >= scope.data.random.row[0] && row <= scope.data.random.row[1]">
|
|
|
渲染默认巷道框架规格 定位浮在 已有巷道上做对应
|
|
|
<span
|
|
|
class="default"
|
|
|
:style="{background:getStatusBg(stockInfo.left, `${row}-${column}`)}"
|
|
|
@click="tocheck(row,column,leftShelveId.shelveId,item.id,item.name,'left',leftShelveId.shelveType)"
|
|
|
>
|
|
|
{{row}}-{{column}}
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template> -->
|
|
|
</subsection>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!--单伸类型右货架DOM-->
|
|
|
<div class="center-box">
|
|
|
<span class="shelf-number">
|
|
|
右货架号: {{rightShelveId.shelveId}}
|
|
|
</span>
|
|
|
|
|
|
<a-radio-group v-model="size2" style="margin:10px 0" @change="getStockRowColumn"
|
|
|
v-if="streetDetail.rightInsideShelveId && streetDetail.rightOutsideShelveId">
|
|
|
<a-radio-button value="rightOutsideShelveId">
|
|
|
外
|
|
|
</a-radio-button>
|
|
|
<a-radio-button value="rightInsideShelveId">
|
|
|
内
|
|
|
</a-radio-button>
|
|
|
</a-radio-group>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="check-content" v-for="item in data" :key="item.name">
|
|
|
<subsection v-if="item.id == select" :total="{row:item.leftRow, column: item.leftColumn}" :shelveId="rightShelveId.shelveId">
|
|
|
<!-- <template v-slot="scope">
|
|
|
<div class="roadway-buttom">
|
|
|
<div class="roadway-box">
|
|
|
<div class="line" v-for="(column,index) in item.rightColumn" :key="index" v-if="column >= scope.data.random.column[0] && column <= scope.data.random.column[1]">
|
|
|
<div v-for="(row,index) in item.rightRow" :key="index" class="el" v-if="row >= scope.data.random.row[0] && row <= scope.data.random.row[1]">
|
|
|
|
|
|
渲染默认巷道框架规格 定位浮在 已有巷道上做对应
|
|
|
<span
|
|
|
class="default"
|
|
|
:style="{background:getStatusBg(stockInfo.right, `${row}-${column}`)}"
|
|
|
@click="tocheck(row,column,rightShelveId.shelveId,item.id,item.name,'right',rightShelveId.shelveType)">
|
|
|
{{row}}-{{column}}
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template> -->
|
|
|
</subsection>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import Subsection from "./Subsection";
|
|
|
export default {
|
|
|
name:'checkManage',
|
|
|
data() {
|
|
|
return {
|
|
|
size: 'leftOutsideShelveId',
|
|
|
size2: 'rightOutsideShelveId',
|
|
|
data: [],
|
|
|
select: '',
|
|
|
streetId: 0,
|
|
|
streetDetail: {},
|
|
|
checkList: [],
|
|
|
stockInfo: {
|
|
|
left: {},
|
|
|
right: {}
|
|
|
},
|
|
|
timer: null
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
// 获取左侧货架号
|
|
|
leftShelveId() {
|
|
|
let shelveId;
|
|
|
let shelveType = 'none';
|
|
|
if(this.streetDetail.leftShelveId) {
|
|
|
shelveId = this.streetDetail.leftShelveId;
|
|
|
}else if(this.streetDetail.leftInsideShelveId && this.size =='leftInsideShelveId'){
|
|
|
shelveId = this.streetDetail.leftInsideShelveId;
|
|
|
shelveType = 'inside';
|
|
|
}else if(this.streetDetail.leftOutsideShelveId && this.size== 'leftOutsideShelveId'){
|
|
|
shelveId = this.streetDetail.leftOutsideShelveId;
|
|
|
shelveType = 'out';
|
|
|
};
|
|
|
return {
|
|
|
shelveId,
|
|
|
shelveType
|
|
|
};
|
|
|
},
|
|
|
// 获取右侧货架号
|
|
|
rightShelveId() {
|
|
|
let shelveId;
|
|
|
let shelveType = 'none';
|
|
|
if(this.streetDetail.rightShelveId) {
|
|
|
shelveId = this.streetDetail.rightShelveId;
|
|
|
}else if(this.streetDetail.rightInsideShelveId && this.size2 =='rightInsideShelveId'){
|
|
|
shelveId = this.streetDetail.rightInsideShelveId;
|
|
|
shelveType = 'inside';
|
|
|
}else if(this.streetDetail.rightOutsideShelveId && this.size2 == 'rightOutsideShelveId'){
|
|
|
shelveId = this.streetDetail.rightOutsideShelveId;
|
|
|
shelveType = 'out';
|
|
|
};
|
|
|
return {
|
|
|
shelveId,
|
|
|
shelveType
|
|
|
};
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.request();
|
|
|
},
|
|
|
activated() {
|
|
|
this.request();
|
|
|
},
|
|
|
beforeRouteLeave(to, form, next) {
|
|
|
this.timer && clearInterval(this.timer);
|
|
|
next();
|
|
|
},
|
|
|
methods: {
|
|
|
//获取巷道列表
|
|
|
request() {
|
|
|
this.$api.httpApi.getStreetList({
|
|
|
data: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 50,
|
|
|
}
|
|
|
}).then(res => {
|
|
|
this.data = res.data.list;
|
|
|
this.select = res.data.list[0].id
|
|
|
//this.getStockList(res.data.list[0].id)
|
|
|
this.getStreetDetail(res.data.list[0].id);
|
|
|
this.getStockRowColumn();
|
|
|
}).catch(err => {
|
|
|
|
|
|
});
|
|
|
},
|
|
|
// 获取盘点状态
|
|
|
async getStockRowColumn() {
|
|
|
const init = () => {
|
|
|
let row = this.data.filter(item => item.id === this.select)[0];
|
|
|
let leftShelveId = null, rightShelveId = null;
|
|
|
|
|
|
if(row.leftInsideShelveId && this.size == 'leftInsideShelveId') {
|
|
|
leftShelveId = row.leftInsideShelveId;
|
|
|
}else if(row.leftOutsideShelveId && this.size == 'leftOutsideShelveId'){
|
|
|
leftShelveId = row.leftOutsideShelveId;
|
|
|
}else if(row.leftShelveId) {
|
|
|
leftShelveId = row.leftShelveId;
|
|
|
}
|
|
|
|
|
|
if(row.rightInsideShelveId && this.size2 == 'rightInsideShelveId') {
|
|
|
rightShelveId = row.rightInsideShelveId;
|
|
|
}else if(row.rightOutsideShelveId && this.size2 == 'rightOutsideShelveId'){
|
|
|
rightShelveId = row.rightOutsideShelveId;
|
|
|
}else if(row.rightShelveId) {
|
|
|
rightShelveId = row.rightShelveId;
|
|
|
}
|
|
|
let params = {
|
|
|
leftShelveId,
|
|
|
rightShelveId
|
|
|
};
|
|
|
// this.$api.httpNodeApi.getStockRowColumnAPI({params}).then(({data})=>{
|
|
|
// this.$set(this, 'stockInfo', data);
|
|
|
// // this.stockInfo = data;
|
|
|
// });
|
|
|
}
|
|
|
this.timer && clearInterval(this.timer);
|
|
|
init();
|
|
|
this.timer = setInterval(init, 5000);
|
|
|
},
|
|
|
getStatus(data, rowCol) {
|
|
|
return (data[rowCol] || {}).status;
|
|
|
},
|
|
|
// 获取状态对应的颜色
|
|
|
getStatusBg(data, rowCol) {
|
|
|
let status = this.getStatus(data, rowCol);
|
|
|
return status == 1 ?'#d81e06': status == 2 ? '#1afa29': '#bfbfbf';
|
|
|
},
|
|
|
//获取巷道详情
|
|
|
getStreetDetail(id) {
|
|
|
this.$axios.get('/street/' + id, {
|
|
|
data: {}
|
|
|
}).then(res => {
|
|
|
this.streetDetail = res.data
|
|
|
|
|
|
}).catch(err => {
|
|
|
|
|
|
})
|
|
|
},
|
|
|
//获取盘点列表
|
|
|
// getStockList(streetId) {
|
|
|
// this.$api.httpApi.getStockList({
|
|
|
// params: {
|
|
|
// streetId: streetId,
|
|
|
// }
|
|
|
// }).then(res => {
|
|
|
// this.checkList = res.data
|
|
|
// }).catch(err => {
|
|
|
|
|
|
// });
|
|
|
// },
|
|
|
handleChange(value) {
|
|
|
|
|
|
this.select = value
|
|
|
this.getStreetDetail(value)
|
|
|
//this.getStockList(value);
|
|
|
this.getStockRowColumn()
|
|
|
},
|
|
|
tocheckOperation(checkObj, item) {
|
|
|
console.log(checkObj)
|
|
|
console.log(item)
|
|
|
this.$router.push({name: 'checkOperation', query: {checkObj: checkObj, item: item}})
|
|
|
},
|
|
|
tocheck(row, column, shelveId, id, name, type, type2) {
|
|
|
console.log(type)
|
|
|
console.log(type2)
|
|
|
this.$router.push({
|
|
|
name: 'checkOperation',
|
|
|
query: {row: row, column: column, shelveId: shelveId, id: id, name, type: type, type2: type2}
|
|
|
})
|
|
|
},
|
|
|
exportStock() {
|
|
|
this.$api.httpApi.exportStock({
|
|
|
params: {
|
|
|
streetId: this.select,
|
|
|
}
|
|
|
}).then(res => {
|
|
|
let blob = new Blob([res], {type: "application/vnd.ms-excel"})
|
|
|
this.$utils.downloadFile('巷道列表.xls', blob)
|
|
|
}).catch(err => {
|
|
|
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
components: {Subsection}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.check-page {
|
|
|
position: relative;
|
|
|
|
|
|
.title-info {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: start;
|
|
|
|
|
|
.explain {
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.info-text {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
margin-right: 15px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.ant-tag {
|
|
|
margin-right: 0;
|
|
|
display: block;
|
|
|
line-height: 25px;
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.roadway-top, roadway-buttom {
|
|
|
padding: 5px 0;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.roadway-box {
|
|
|
transform: rotateX(180deg);
|
|
|
padding: 10px 10px 0 0;
|
|
|
.line {
|
|
|
display: flex;
|
|
|
transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
|
|
|
|
|
|
.el {
|
|
|
width: 46px;
|
|
|
height: 25px;
|
|
|
line-height: 25px;
|
|
|
margin: 2px;
|
|
|
font-size: 12px;
|
|
|
text-align: center;
|
|
|
border-radius: 4px;
|
|
|
cursor: pointer;
|
|
|
position: relative;
|
|
|
.default {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.center-box {
|
|
|
width: 500px;
|
|
|
height: 52px;
|
|
|
line-height: 52px;
|
|
|
.shelf-number {
|
|
|
display: inline-block;
|
|
|
width: 200px;
|
|
|
}
|
|
|
}
|
|
|
.export-all {
|
|
|
position: absolute;
|
|
|
right: 20px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|