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.
668 lines
27 KiB
Vue
668 lines
27 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>
|
|
</div>
|
|
|
|
<div v-if="checkObj.id">
|
|
<div v-for="(key,value) in checkList" :key="value">
|
|
<div v-if="checkObj.shelveId == value">
|
|
<!--{{value}}{{key}}-->
|
|
<div v-for="(columnItem,index) in key" :key="index"
|
|
style="width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction: column">
|
|
<div class="carousel-page"
|
|
v-if="columnItem.row == checkObj.row && columnItem.column == checkObj.column">
|
|
<p class="carousel-page-title" @click="goHistory(checkObj.orderNum)" v-if="checkObj.orderNum">工单号：{{checkObj.orderNum}}</p>
|
|
<p class="carousel-page-title" @click="goHistory()" v-else>工单号：暂无</p>
|
|
<div class="carousel-page-content">
|
|
<div class="img-box">
|
|
<img
|
|
v-if="checkObj.preoperationPic"
|
|
:src="imgUrl+checkObj.preoperationPic"
|
|
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"
|
|
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 class="carousel-page-footer">
|
|
<div class="info-box">
|
|
<p>系统登记品规：{{checkObj.category}}</p>
|
|
<p>系统登记数量：{{checkObj.count}}</p>
|
|
</div>
|
|
<div class="status" v-if="checkObj.status == 0">
|
|
未核对
|
|
</div>
|
|
<div class="status" v-if="checkObj.status == 1">
|
|
已核对：<span style="color: #d81e06;">核对错误</span>
|
|
</div>
|
|
<div class="status" v-if="checkObj.status == 2">
|
|
已核对：<span style="color: #1afa29;">核对正确</span>
|
|
</div>
|
|
<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>
|
|
|
|
<div class="bottom-btn"
|
|
v-if="columnItem.row == checkObj.row && columnItem.column == checkObj.column">
|
|
<a-button class="btn" @click="prev(index > 0 ? index : 0)">＜上一个</a-button>
|
|
<p>{{checkObj.row}}行{{checkObj.column}}列</p>
|
|
<a-button class="btn" @click="next(index<=key.length ? index :index=key.length-1)">下一个＞
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div class="line" v-for="(listcolumn,index) in streetDetail.leftColumn" :key="index">
|
|
<div v-for="(listrow,i) in streetDetail.leftRow" :key="i" class="el"
|
|
style="width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction: column">
|
|
<div class="carousel-page"
|
|
v-if="listrow == row && listcolumn == column">
|
|
<p class="carousel-page-title" @click="goHistory()">工单号：暂无</p>
|
|
<div class="carousel-page-content">
|
|
<div class="img-box">
|
|
<div
|
|
style="display: flex;align-items: center;justify-content: center;width:500px;height:400px;background:#eaeaea">
|
|
暂无图片
|
|
</div>
|
|
<p>操作前照片</p>
|
|
</div>
|
|
<div class="img-box">
|
|
<div
|
|
style="display: flex;align-items: center;justify-content: center;width:500px;height:400px;background:#eaeaea">
|
|
暂无图片
|
|
</div>
|
|
<p>操作后照片</p>
|
|
</div>
|
|
<div class="img-box">
|
|
<a-spin tip="加载中..." :spinning="!Object.keys(scanAndCheck).length">
|
|
<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>
|
|
</a-spin>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-page-footer">
|
|
<div class="info-box">
|
|
<p>系统登记品规：暂无</p>
|
|
<p>系统登记数量：暂无</p>
|
|
</div>
|
|
<div class="status">
|
|
未核对
|
|
</div>
|
|
<div class="status-btn">
|
|
<a-button class="btn"
|
|
type="danger"
|
|
@click="showModel({},index)"
|
|
>人工复核
|
|
</a-button>
|
|
<a-button class="btn"
|
|
type="primary"
|
|
style="background:#29c12b;border-color:#29c12b;"
|
|
@click="checkSure(row,column,shelveId,index)"
|
|
>核对正确
|
|
</a-button>
|
|
</div>
|
|
<div class="bottom-btn"
|
|
v-if="listrow == row && listcolumn == column">
|
|
<a-button class="btn" @click="defaultPrev(listrow,listcolumn)">＜上一个</a-button>
|
|
<p>{{listrow}}行{{listcolumn}}列</p>
|
|
<a-button class="btn" @click="defaultNext(listrow,listcolumn)">下一个＞
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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,
|
|
selectName: '',
|
|
shelveId: '',
|
|
selectType: '',
|
|
selectType2: '',
|
|
visible: false,
|
|
category: '',
|
|
count: 0,
|
|
modelData: {},
|
|
index: 0,
|
|
imgUrl: '',
|
|
params:[
|
|
{
|
|
label:'系统条码号',
|
|
key: 'SystemCode'
|
|
},
|
|
{
|
|
label:'扫描条码号',
|
|
key: 'ScanCode'
|
|
},
|
|
{
|
|
label:'系统数量',
|
|
key: 'SystemNumber'
|
|
},
|
|
{
|
|
label:'检测数量',
|
|
key: 'CheckNumber'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
this.imgUrl = imgUrl
|
|
console.log(this.$route.query.id)
|
|
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
|
|
console.log(this.shelveId)
|
|
console.log(this.row)
|
|
console.log(this.column)
|
|
this.getStockInfo(this.row, this.column, this.shelveId)
|
|
} else if (this.$route.query.checkObj && this.$route.query.item && this.$route.query.item.id && this.$route.query.item.name) {
|
|
this.checkObj = this.$route.query.checkObj
|
|
this.streetDetail = this.$route.query.item
|
|
this.id = this.$route.query.item.id
|
|
this.selectName = this.$route.query.item.name
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getStreetList();
|
|
this.getScanAndCheck();
|
|
if (JSON.stringify(this.checkObj) !== '{}') {
|
|
if (this.checkObj.shelveId == this.streetDetail.leftShelveId) {
|
|
this.selectType = 'left'
|
|
} else {
|
|
this.selectType = 'right'
|
|
}
|
|
}
|
|
console.log(this.selectType2)
|
|
},
|
|
components: {
|
|
Model
|
|
},
|
|
methods: {
|
|
getScanAndCheck() {
|
|
// this.scanAndCheck = {
|
|
// SystemCode: 'D1H0000147',
|
|
// ScanCode: 'D1H0000147',
|
|
// SystemNumber: 10,
|
|
// CheckNumber: 10
|
|
// }
|
|
this.$api.httpApi.scanAndCheck({
|
|
name: 'getData'
|
|
}).then(res=>{
|
|
// 如果还未执行完成 2秒后再次请求
|
|
if(res.status === '0') {
|
|
setTimeout(()=>{
|
|
this.getScanAndCheck();
|
|
}, 2000);
|
|
}else{
|
|
this.scanAndCheck = res.data[0];
|
|
}
|
|
})
|
|
},
|
|
//获取巷道列表
|
|
getStreetList() {
|
|
this.$api.httpApi.getStreetList({
|
|
data: {
|
|
pageNum: 1,
|
|
pageSize: 50,
|
|
}
|
|
}).then(res => {
|
|
this.listData = res.data.list;
|
|
console.log(this.listData)
|
|
this.select = this.id
|
|
this.getStreetDetail(this.id)
|
|
this.getStockList(this.id)
|
|
}).catch(err => {
|
|
|
|
});
|
|
},
|
|
//获取巷道详情
|
|
getStreetDetail(id) {
|
|
this.$axios.get('/street/' + id, {
|
|
data: {}
|
|
}).then(res => {
|
|
this.streetDetail = res.data
|
|
console.log(this.streetDetail)
|
|
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
//获取盘点列表
|
|
getStockList(streetId) {
|
|
this.$api.httpApi.getStockList({
|
|
params: {
|
|
streetId: streetId,
|
|
}
|
|
}).then(res => {
|
|
this.checkList = res.data
|
|
console.log(this.checkList)
|
|
}).catch(err => {
|
|
|
|
});
|
|
},
|
|
//获取复核页面的核对信息
|
|
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
|
|
}
|
|
}).catch(err => {
|
|
|
|
});
|
|
},
|
|
handleChange(value) {
|
|
console.log(value)
|
|
this.select = value
|
|
this.id = value
|
|
this.row = 1
|
|
this.column =1
|
|
console.log(JSON.stringify(this.checkObj))
|
|
this.getStreetList()
|
|
for (var i = 0; i < this.listData.length; i++) {
|
|
console.log(this.listData[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.getStockInfo(1, 1, this.shelveId)
|
|
} else if (this.listData[i].leftInsideShelveId) {
|
|
this.shelveId = this.listData[i].leftInsideShelveId
|
|
this.selectType = 'left'
|
|
this.selectType2 = 'inside'
|
|
this.getStockInfo(1, 1, this.shelveId)
|
|
} else if (this.listData[i].leftOutsideShelveId) {
|
|
this.shelveId = this.listData[i].leftOutsideShelveId
|
|
this.selectType = 'left'
|
|
this.selectType2 = 'out'
|
|
this.getStockInfo(1, 1, this.shelveId)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
handleTypeChange(value) {
|
|
console.log(this.streetDetail.leftShelveId)
|
|
console.log(value)
|
|
this.selectType = value
|
|
if (value == 'left') {
|
|
if (this.streetDetail.leftShelveId) {
|
|
this.getStockInfo(1, 1, this.streetDetail.leftShelveId)
|
|
} else if (this.streetDetail.leftInsideShelveId) {
|
|
this.getStockInfo(1, 1, this.streetDetail.leftInsideShelveId)
|
|
} else if (this.streetDetail.leftOutsideShelveId) {
|
|
this.getStockInfo(1, 1, this.streetDetail.leftOutsideShelveId)
|
|
}
|
|
} else if (value == 'right') {
|
|
if (this.streetDetail.rightShelveId) {
|
|
this.getStockInfo(1, 1, this.streetDetail.rightShelveId)
|
|
} else if (this.streetDetail.rightInsideShelveId) {
|
|
this.getStockInfo(1, 1, this.streetDetail.rightInsideShelveId)
|
|
} else if (this.streetDetail.rightOutsideShelveId) {
|
|
this.getStockInfo(1, 1, this.streetDetail.rightOutsideShelveId)
|
|
}
|
|
}
|
|
|
|
},
|
|
handleTypeChange2(value) {
|
|
console.log(this.streetDetail.leftShelveId)
|
|
console.log(value)
|
|
this.selectType2 = value
|
|
if (this.selectType == 'left' && value == 'none') {
|
|
this.getStockInfo(1, 1, this.streetDetail.leftShelveId)
|
|
} else if (this.selectType == 'right' && value == 'none') {
|
|
this.getStockInfo(1, 1, this.streetDetail.rightShelveId)
|
|
} else if (this.selectType == 'left' && value == 'inside') {
|
|
this.getStockInfo(1, 1, this.streetDetail.leftInsideShelveId)
|
|
} else if (this.selectType == 'left' && value == 'out') {
|
|
this.getStockInfo(1, 1, this.streetDetail.leftOutsideShelveId)
|
|
} else if (this.selectType == 'right' && value == 'inside') {
|
|
this.getStockInfo(1, 1, this.streetDetail.rightInsideShelveId)
|
|
} else if (this.selectType == 'right' && value == 'out') {
|
|
this.getStockInfo(1, 1, this.streetDetail.rightOutsideShelveId)
|
|
}
|
|
|
|
},
|
|
prev(index) {
|
|
index--
|
|
console.log(index)
|
|
for (let x in this.checkList) {
|
|
if (this.checkObj.shelveId == this.checkList[x][index].shelveId) {
|
|
console.log(this.checkList[x][index].row)
|
|
console.log(this.checkList[x][index].column)
|
|
console.log(this.checkList[x][index].shelveId)
|
|
this.getStockInfo(this.checkList[x][index].row, this.checkList[x][index].column, this.checkList[x][index].shelveId)
|
|
}
|
|
}
|
|
},
|
|
next(index) {
|
|
index++
|
|
console.log(index)
|
|
for (let x in this.checkList) {
|
|
if (this.checkObj.shelveId == this.checkList[x][index].shelveId) {
|
|
console.log(this.checkList[x][index].row)
|
|
console.log(this.checkList[x][index].column)
|
|
console.log(this.checkList[x][index].shelveId)
|
|
this.getStockInfo(this.checkList[x][index].row, this.checkList[x][index].column, this.checkList[x][index].shelveId)
|
|
}
|
|
}
|
|
},
|
|
defaultPrev(row, column) {
|
|
for (var i = 1; i < this.streetDetail.leftColumn + 1; i++) {
|
|
for (var j = 1; j < this.streetDetail.leftRow + 1; j++) {
|
|
console.log(i)
|
|
console.log(j)
|
|
if (i == row && j == column) {
|
|
this.column = j - 1
|
|
if (this.column < 1) {
|
|
this.row = i - 1
|
|
this.column = this.streetDetail.leftColumn
|
|
}
|
|
if (i == 1 && j == 1) {
|
|
this.row = 1
|
|
this.column = 1
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
defaultNext(row, column) {
|
|
|
|
for (var i = 1; i < this.streetDetail.leftColumn + 1; i++) {
|
|
for (var j = 1; j < this.streetDetail.leftRow + 1; j++) {
|
|
console.log(i)
|
|
console.log(j)
|
|
if (i == row && j == column) {
|
|
this.column = j + 1
|
|
if (this.column == this.streetDetail.leftColumn + 1) {
|
|
this.row = i + 1
|
|
this.column = 1
|
|
}
|
|
if (i == this.streetDetail.leftColumn && j == this.streetDetail.leftRow) {
|
|
this.row = this.streetDetail.leftRow
|
|
this.column = this.streetDetail.leftColumn
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
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.$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)
|
|
},
|
|
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: center;
|
|
justify-content: center;
|
|
|
|
.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: center;
|
|
justify-content: center;
|
|
|
|
p {
|
|
font-size: 18px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.btn {
|
|
margin: 25px;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|