|
|
<template>
|
|
|
<div class="check-page">
|
|
|
<div class="title-info">
|
|
|
<span class="explain">颜色说明：</span>
|
|
|
<span class="info-text">
|
|
|
<a-tag color="#d81e06" style="width:30px;height:20px"></a-tag>
|
|
|
盘点错误
|
|
|
</span>
|
|
|
<span class="info-text">
|
|
|
<a-tag color="#1afa29" style="width:30px;height:20px"></a-tag>
|
|
|
盘点正确
|
|
|
</span>
|
|
|
<span class="info-text">
|
|
|
<a-tag color="#bfbfbf" style="width:30px;height:20px"></a-tag>
|
|
|
未盘点
|
|
|
</span>
|
|
|
</div>
|
|
|
|
|
|
<div class="check-content" v-for="item in data" :key="item.id">
|
|
|
<div class="roadway-top" v-if="item.id == select ">
|
|
|
<happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
|
|
|
<div class="roadway-box">
|
|
|
<div class="line" v-for="(column,index) in item.leftColumn" :key="index">
|
|
|
<div v-for="(row,i) in item.leftRow" :key="i" class="el">
|
|
|
<!--渲染默认巷道框架规格 定位浮在 已有巷道上做对应-->
|
|
|
<span class="default">
|
|
|
{{row}}-{{column}}
|
|
|
</span>
|
|
|
<div v-for="(key,value) in checkList" :key="value">
|
|
|
<div v-for="(columnItem,val) in key" :key="val">
|
|
|
<div
|
|
|
v-if="columnItem.row== row && columnItem.column ==column && value == streetDetail.leftShelveId"
|
|
|
@click="tocheckOperation(columnItem,item)"
|
|
|
class="el"
|
|
|
:style="{background:columnItem.status ==0?'#bfbfbf':columnItem.status == 2?'#1afa29':'#d81e06'}"
|
|
|
>
|
|
|
{{columnItem.row}}-{{columnItem.column}}
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</happy-scroll>
|
|
|
<a-radio-group v-model="size" style="margin:10px 0"
|
|
|
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>
|
|
|
|
|
|
<div class="center-box">
|
|
|
<a-select v-if="data[0]" :default-value="data[0].name" style="width: 180px"
|
|
|
@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>
|
|
|
<a-button type="primary" @click="exportStock">
|
|
|
导出全部巷道
|
|
|
</a-button>
|
|
|
</div>
|
|
|
<div class="check-content" v-for="item in data" :key="item.id">
|
|
|
<div class="roadway-buttom" v-if="item.id == select">
|
|
|
<happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box">
|
|
|
<div class="roadway-box">
|
|
|
<div class="line" v-for="(column,index) in item.rightColumn" :key="index">
|
|
|
<div v-for="(row,index) in item.rightRow" :key="index" class="el">
|
|
|
|
|
|
<!--渲染默认巷道框架规格 定位浮在 已有巷道上做对应-->
|
|
|
<span class="default">
|
|
|
{{row}}-{{column}}
|
|
|
</span>
|
|
|
<div v-for="(key,value) in checkList" :key="value">
|
|
|
<div v-for="(columnItem,val) in key" :key="val">
|
|
|
<div
|
|
|
v-if="columnItem.row== row && columnItem.column ==column && value == streetDetail.rightShelveId"
|
|
|
@click="tocheckOperation(columnItem,item)"
|
|
|
class="el"
|
|
|
:style="{background:columnItem.status ==0?'#bfbfbf':columnItem.status == 2?'#1afa29':'#d81e06'}"
|
|
|
>
|
|
|
{{columnItem.row}}-{{columnItem.column}}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</happy-scroll>
|
|
|
<a-radio-group v-model="size2" style="margin:10px 0"
|
|
|
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>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
size: 'small',
|
|
|
size2: 'small',
|
|
|
data: [],
|
|
|
select: '',
|
|
|
streetId: 0,
|
|
|
streetDetail: {},
|
|
|
checkList: {}
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.request()
|
|
|
},
|
|
|
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)
|
|
|
}).catch(err => {
|
|
|
|
|
|
});
|
|
|
},
|
|
|
//获取巷道详情
|
|
|
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) {
|
|
|
console.log(value)
|
|
|
this.select = value
|
|
|
this.getStreetDetail(value)
|
|
|
this.getStockList(value)
|
|
|
},
|
|
|
tocheckOperation(checkObj, item) {
|
|
|
console.log(checkObj)
|
|
|
console.log(item)
|
|
|
this.$router.push({name: 'checkOperation', query: {checkObj: checkObj, item: item}})
|
|
|
},
|
|
|
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: {}
|
|
|
};
|
|
|
</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 {
|
|
|
padding: 20px 0;
|
|
|
width: 1000px;
|
|
|
}
|
|
|
|
|
|
.roadway-buttom {
|
|
|
padding: 20px 0 20px 0;
|
|
|
width: 1000px;
|
|
|
}
|
|
|
|
|
|
.scroll-box {
|
|
|
height: 270px;
|
|
|
.roadway-box {
|
|
|
transform: rotateX(180deg);
|
|
|
padding: 10px 10px 0 0;
|
|
|
|
|
|
.line {
|
|
|
display: flex;
|
|
|
transform: rotateX(180deg); //两次垂直镜像翻转让原本由上到下排列的div 更改为由下到上
|
|
|
|
|
|
.el {
|
|
|
width: 46px;
|
|
|
height: 25px;
|
|
|
margin: 1px 2px;
|
|
|
text-align: center;
|
|
|
border-radius: 4px;
|
|
|
cursor: pointer;
|
|
|
font-size: 14px;
|
|
|
position: relative;
|
|
|
|
|
|
.default {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.center-box {
|
|
|
width: 500px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
}
|
|
|
</style>
|