You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
566 lines
22 KiB
Vue
566 lines
22 KiB
Vue
<template>
|
|
<div class="checkOperation">
|
|
<div class="topMenu">
|
|
<a-select v-if="listData[0]"
|
|
:default-value="selectName"
|
|
style="width:160px;margin-right:25px"
|
|
@change="handleChange"
|
|
class="select-roadway">
|
|
<a-select-option v-for="i in listData" :key="i.name" :value="i.id">
|
|
{{i.name}}
|
|
</a-select-option>
|
|
</a-select>
|
|
<a-select
|
|
@change="handleTypeChange"
|
|
style="width: 160px;margin-right:25px"
|
|
:value="selectType">
|
|
<a-select-option value="left">
|
|
左货架
|
|
</a-select-option>
|
|
<a-select-option value="right">
|
|
右货架
|
|
</a-select-option>
|
|
</a-select>
|
|
<a-select
|
|
@change="handleTypeChange2"
|
|
style="width: 160px"
|
|
:value="selectType2"
|
|
v-if="selectType2 !== 'none' && selectType2 !== '' "
|
|
>
|
|
<a-select-option value="out">
|
|
外
|
|
</a-select-option>
|
|
<a-select-option value="inside">
|
|
内
|
|
</a-select-option>
|
|
</a-select>
|
|
<span>
|
|
货架号 : {{ shelveId }} {{rowCount}} {{columnCount}}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<div class="carousel-page"
|
|
>
|
|
|
|
<div class="carousel-page-content">
|
|
<div class="img-box">
|
|
<ul>
|
|
<li v-for="item in params" :key="item.label">
|
|
<span class="img-box-title">
|
|
{{ item.label }}:
|
|
</span>
|
|
<span class="img-box-value">
|
|
{{ scanAndCheck[item.key] }}
|
|
</span>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
<div class="img-box">
|
|
<img
|
|
v-if="checkObj.preoperationPic"
|
|
:src="imgUrl+checkObj.preoperationPic"
|
|
style="width: 100%;height: 358px"
|
|
alt=""/>
|
|
<div
|
|
v-else
|
|
style="display: flex;align-items: center;justify-content: center;width:600px;height:400px;background:#eaeaea">
|
|
暂无图片
|
|
</div>
|
|
<p>操作前照片</p>
|
|
</div>
|
|
<div class="img-box">
|
|
<img
|
|
v-if="checkObj.overoperationPic"
|
|
:src="imgUrl+checkObj.overoperationPic"
|
|
style="width: 100%;height: 358px"
|
|
alt=""/>
|
|
<div
|
|
v-else
|
|
style="display: flex;align-items: center;justify-content: center;width:600px;height:400px;background:#eaeaea">
|
|
暂无图片
|
|
</div>
|
|
<p>操作后照片</p>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div class="carousel-page-footer">
|
|
<div class="status-btn" v-if="checkObj.status == 0">
|
|
<a-button class="btn"
|
|
type="danger"
|
|
@click="showModel(checkObj,index)"
|
|
>人工复核
|
|
</a-button>
|
|
<a-button class="btn"
|
|
type="primary"
|
|
style="background:#29c12b;border-color:#29c12b;"
|
|
@click="checkSure(checkObj.row,checkObj.column,checkObj.shelveId,index)"
|
|
>核对正确
|
|
</a-button>
|
|
</div>
|
|
<div class="status-btn" v-if="checkObj.status == 1 ||checkObj.status == 2">
|
|
<a-button class="btn"
|
|
type="danger"
|
|
@click="showModel(checkObj,index)"
|
|
>核对错误
|
|
</a-button>
|
|
<a-button class="btn"
|
|
type="primary"
|
|
style="background:#29c12b;border-color:#29c12b;"
|
|
@click="checkSure(checkObj.row,checkObj.column,checkObj.shelveId,index)"
|
|
>核对正确
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
<div class="bottom-btn"
|
|
>
|
|
<a-button class="btn" @click="prev()">＜上一个</a-button>
|
|
<p>{{checkObj.row}}行{{checkObj.column}}列</p>
|
|
<a-button class="btn" @click="next()">下一个＞
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<Model
|
|
:visible.sync="visible"
|
|
:modelData.sync="modelData"
|
|
:index="index"
|
|
@sure="submit"
|
|
@close="closeModel"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Model from "./model.vue"
|
|
import {imgUrl} from "@/api/importExcel";
|
|
export default {
|
|
data() {
|
|
return {
|
|
listData: [],
|
|
scanAndCheck: {},
|
|
checkObj: {},
|
|
streetDetail: {},
|
|
checkList: {},
|
|
id: 0,
|
|
row: 1,
|
|
column: 1,
|
|
//当前货架行列总数
|
|
rowCount: 0,
|
|
columnCount: 0,
|
|
selectName: '',
|
|
shelveId: '',
|
|
selectType: 'left',
|
|
selectType2: '',
|
|
visible: false,
|
|
category: '',
|
|
count: 0,
|
|
modelData: {},
|
|
index: 0,
|
|
imgUrl: '',
|
|
params:[
|
|
{
|
|
label:'核对状态',
|
|
key: 'orderNum'
|
|
},
|
|
{
|
|
label:'工单号',
|
|
key: 'orderNum'
|
|
},
|
|
{
|
|
label:'系统条码号',
|
|
key: 'SystemCode'
|
|
},
|
|
{
|
|
label:'扫描条码号',
|
|
key: 'ScanCode'
|
|
},
|
|
{
|
|
label:'系统数量',
|
|
key: 'SystemNumber'
|
|
},
|
|
{
|
|
label:'扫描数量',
|
|
key: 'CheckNumber'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
beforeRouteLeave(to ,form, next) {
|
|
// 修复第二次进入界面不执行created
|
|
this.$destroy();
|
|
//next();
|
|
},
|
|
created() {
|
|
this.imgUrl = imgUrl
|
|
console.log(this.$route.query.id)
|
|
this.getStreetList();
|
|
if (this.$route.query.row && this.$route.query.column && this.$route.query.shelveId && this.$route.query.id && this.$route.query.name) {
|
|
this.id = this.$route.query.id
|
|
this.row = this.$route.query.row
|
|
this.column = this.$route.query.column
|
|
this.shelveId = this.$route.query.shelveId
|
|
this.selectName = this.$route.query.name
|
|
this.selectType = this.$route.query.type
|
|
this.selectType2 = this.$route.query.type2
|
|
this.getStockInfo(this.row, this.column, this.shelveId);
|
|
}
|
|
},
|
|
mounted() {
|
|
//this.getStreetList();
|
|
},
|
|
components: {
|
|
Model
|
|
},
|
|
methods: {
|
|
//获取巷道列表
|
|
getStreetList() {
|
|
this.$api.httpApi.getStreetList({
|
|
data: {
|
|
pageNum: 1,
|
|
pageSize: 50,
|
|
}
|
|
}).then(res => {
|
|
this.listData = res.data.list;
|
|
this.select = this.id
|
|
this.getStreetDetail(this.id)
|
|
this.getStockInfo(this.row,this.column,this.id)
|
|
//this.getStockList(this.id)
|
|
}).catch(err => {
|
|
console.error(err);
|
|
});
|
|
},
|
|
//获取巷道详情
|
|
getStreetDetail(id) {
|
|
this.$axios.get('/street/' + id, {
|
|
data: {}
|
|
}).then(res => {
|
|
this.streetDetail = res.data
|
|
this.getRowColumnCounts()
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
//获取总行列数
|
|
getRowColumnCounts(){
|
|
if(this.selectType != 'none' && this.selectType != ''){
|
|
this.handleTypeChange(this.selectType)
|
|
}else{
|
|
this.handleTypeChange2(this.selectType2)
|
|
}
|
|
|
|
},
|
|
//获取复核页面的核对信息
|
|
getStockInfo(row, column, shelveId) {
|
|
this.$api.httpApi.getStockInfo({
|
|
data: {
|
|
row: Number(row),
|
|
column: Number(column),
|
|
shelveId: shelveId,
|
|
}
|
|
}).then(res => {
|
|
if (res.data) {
|
|
this.checkObj = res.data;
|
|
//this.shelveId = res.data.shelveId;
|
|
//this.getScanAndCheck();
|
|
}
|
|
}).catch(err => {
|
|
console.log(err)
|
|
});
|
|
},
|
|
handleChange(value) {
|
|
|
|
this.select = value
|
|
this.id = value
|
|
this.row = 1
|
|
this.column =1
|
|
|
|
this.getStreetList()
|
|
for (var i = 0; i < this.listData.length; i++) {
|
|
if (this.listData[i].id == value) {
|
|
if (this.listData[i].leftShelveId) {
|
|
this.shelveId = this.listData[i].leftShelveId
|
|
this.selectType = 'left'
|
|
this.selectType2 = 'none'
|
|
this.rowCount = this.listData[i].leftRow
|
|
this.columnCount = this.listData[i].leftColumn
|
|
|
|
} else if (this.listData[i].leftInsideShelveId) {
|
|
this.shelveId = this.listData[i].leftInsideShelveId
|
|
this.selectType = 'left'
|
|
this.selectType2 = 'inside'
|
|
this.rowCount = this.listData[i].leftRow
|
|
this.columnCount = this.listData[i].leftColumn
|
|
} else if (this.listData[i].leftOutsideShelveId) {
|
|
this.shelveId = this.listData[i].leftOutsideShelveId
|
|
this.selectType = 'left'
|
|
this.selectType2 = 'out'
|
|
this.rowCount = this.listData[i].leftRow
|
|
this.columnCount = this.listData[i].leftColumn
|
|
}
|
|
|
|
}
|
|
}
|
|
this.getStockInfo(1, 1, this.shelveId)
|
|
},
|
|
handleTypeChange(value) {
|
|
this.row = 1
|
|
this.column = 1
|
|
this.selectType = value
|
|
if (value == 'left') {
|
|
this.rowCount = this.streetDetail.leftRow
|
|
this.columnCount = this.streetDetail.leftColumn
|
|
if (this.streetDetail.leftShelveId) {
|
|
this.shelveId = this.streetDetail.leftShelveId
|
|
|
|
} else if (this.streetDetail.leftInsideShelveId) {
|
|
this.shelveId = this.streetDetail.leftInsideShelveId
|
|
|
|
} else if (this.streetDetail.leftOutsideShelveId) {
|
|
this.shelveId = this.streetDetail.leftOutsideShelveId
|
|
}
|
|
} else if (value == 'right') {
|
|
this.rowCount = this.streetDetail.rightRow
|
|
this.columnCount = this.streetDetail.rightColumn
|
|
if (this.streetDetail.rightShelveId) {
|
|
this.shelveId = this.streetDetail.rightShelveId
|
|
} else if (this.streetDetail.rightInsideShelveId) {
|
|
this.shelveId = this.streetDetail.rightInsideShelveId
|
|
} else if (this.streetDetail.rightOutsideShelveId) {
|
|
this.shelveId = this.streetDetail.rightOutsideShelveId
|
|
}
|
|
}
|
|
this.getStockInfo(this.row, this.column, this.shelveId)
|
|
|
|
},
|
|
handleTypeChange2(value) {
|
|
this.row = 1
|
|
this.column = 1
|
|
this.selectType2 = value
|
|
if (this.selectType == 'left' && value == 'none') {
|
|
this.shelveId = this.streetDetail.leftShelveId
|
|
this.rowCount = this.streetDetail.leftRow
|
|
this.columnCount = this.streetDetail.leftColumn
|
|
} else if (this.selectType == 'right' && value == 'none') {
|
|
this.rowCount = this.streetDetail.rightRow
|
|
this.columnCount = this.streetDetail.rightColumn
|
|
this.shelveId = this.streetDetail.rightShelveId
|
|
} else if (this.selectType == 'left' && value == 'inside') {
|
|
this.rowCount = this.streetDetail.leftRow
|
|
this.columnCount = this.streetDetail.leftColumn
|
|
this.shelveId = this.streetDetail.leftInsideShelveId
|
|
} else if (this.selectType == 'left' && value == 'out') {
|
|
this.rowCount = this.streetDetail.leftRow
|
|
this.columnCount = this.streetDetail.leftColumn
|
|
this.shelveId = this.streetDetail.leftOutsideShelveId
|
|
} else if (this.selectType == 'right' && value == 'inside') {
|
|
this.rowCount = this.streetDetail.rightRow
|
|
this.columnCount = this.streetDetail.rightColumn
|
|
this.shelveId = this.streetDetail.rightInsideShelveId
|
|
} else if (this.selectType == 'right' && value == 'out') {
|
|
this.rowCount = this.streetDetail.rightRow
|
|
this.columnCount = this.streetDetail.rightColumn
|
|
this.shelveId = this.streetDetail.rightOutsideShelveId
|
|
}
|
|
this.getStockInfo(this.row, this.column, this.shelveId)
|
|
|
|
},
|
|
prev() {
|
|
if(this.column > 1){
|
|
this.column = this.column - 1
|
|
}else{
|
|
if(this.row > 1){
|
|
this.row = this.row - 1
|
|
this.column = this.columnCount
|
|
}else{
|
|
this.row = this.rowCount
|
|
this.column = this.columnCount
|
|
}
|
|
}
|
|
|
|
this.getStockInfo(this.row,this.column,this.shelveId)
|
|
},
|
|
next() {
|
|
if(this.column < this.columnCount){
|
|
this.column = this.column + 1
|
|
}else{
|
|
//最大列了 row+1
|
|
if(this.row < this.rowCount){
|
|
this.row = this.row + 1
|
|
this.column = 1
|
|
}else{
|
|
this.row = 1
|
|
this.column = 1
|
|
}
|
|
}
|
|
this.getStockInfo(this.row,this.column,this.shelveId)
|
|
},
|
|
checkSure(row, column, shelveId, index) {
|
|
this.$api.httpApi.stockCheckCorrect({
|
|
data: {
|
|
row: Number(row),
|
|
column: Number(column),
|
|
shelveId: shelveId,
|
|
}
|
|
}).then(res => {
|
|
if (res.code == 200) {
|
|
// this.next(index)
|
|
this.checkObj.status = 2;
|
|
this.$message.success('操作成功');
|
|
}
|
|
|
|
}).catch(err => {
|
|
|
|
});
|
|
},
|
|
showModel(checkObj, index) {
|
|
this.visible = true
|
|
this.modelData = checkObj
|
|
this.index = index;
|
|
},
|
|
submit(visible, index) {
|
|
this.visible = visible
|
|
console.log(index)
|
|
// this.next(index);
|
|
this.checkObj.status = 1;
|
|
},
|
|
closeModel(visible, data) {
|
|
this.visible = visible
|
|
this.modelData = data
|
|
},
|
|
goHistory(orderNum){
|
|
const href = this.$router.resolve({
|
|
name: 'historyMonitoring',
|
|
params:{orderNum:orderNum}
|
|
});
|
|
window.open(href.href, '_blank');
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.ant-carousel .slick-slide {
|
|
color: #000000;
|
|
}
|
|
|
|
.checkOperation {
|
|
.carousel-page {
|
|
width: 100%;
|
|
/*border: solid 1px blue;*/
|
|
&-title {
|
|
color: #009FE3;
|
|
font-size: 16px;
|
|
margin: 0;
|
|
padding: 15px 0 10px 25px;
|
|
}
|
|
|
|
&-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-left: 25px;
|
|
|
|
.img-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
font-size: 17px;
|
|
height: 400px;
|
|
margin-right: 10px;
|
|
img {
|
|
height: 100%
|
|
}
|
|
|
|
p {
|
|
height: 25px;
|
|
}
|
|
ul {
|
|
width: 320px;
|
|
height: 100%;
|
|
margin-bottom: 0;
|
|
padding-inline-start: 0;
|
|
li {
|
|
background-color: #ffaf11;
|
|
margin: 10px 0;
|
|
padding: 5px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #494e52;
|
|
.img-box-title {
|
|
width: 90px;
|
|
display: inline-block;
|
|
}
|
|
.img-box-value {
|
|
display: inline-block;
|
|
width: calc(100% - 90px);
|
|
overflow: hidden;
|
|
position: relative;
|
|
top: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-footer {
|
|
width: calc(100% - 380px);
|
|
.info-box {
|
|
color: #000000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
p {
|
|
padding: 0 20px;
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
.status {
|
|
text-align: center;
|
|
font-size: 21px;
|
|
}
|
|
|
|
.status-btn {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
|
|
.btn {
|
|
padding: 25px;
|
|
font-size: 17px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: 0;
|
|
margin: 15px 45px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-btn {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: right;
|
|
justify-content: center;
|
|
|
|
p {
|
|
font-size: 18px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.btn {
|
|
margin: 25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|