增加库存历史照片
yiming
4 years ago
parent
7408c87193
commit
270521f552
@ -0,0 +1,280 @@
|
|||||||
|
<template>
|
||||||
|
<div class="subsection">
|
||||||
|
<a-layout style="width: 1500px">
|
||||||
|
<a-layout style="width: 100%;height: 310px">
|
||||||
|
<a-layout-sider width="110px">
|
||||||
|
<a-tabs default-active-key="1" tab-position="left" @change="changeTabLeft" v-if="total.row > nums.row">
|
||||||
|
<a-tab-pane
|
||||||
|
v-for="index in latticeRow"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<span slot="tab" >
|
||||||
|
{{ getRandom(latticeRow + 1 -index, latticeRow, nums.row, total.row) }}
|
||||||
|
</span>
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</a-layout-sider>
|
||||||
|
<a-layout-content>
|
||||||
|
<!-- <slot :data="{select, nums, random}"></slot> -->
|
||||||
|
<div class="roadway-buttom">
|
||||||
|
<div class="roadway-box">
|
||||||
|
|
||||||
|
<div class="line" v-for="(row,rowIndex) in total.row" :key="rowIndex" v-if="row >= random.row[0] && row <= random.row[1]">
|
||||||
|
<div v-for="(column,index) in total.column" :key="index" class="el" v-if="column >= random.column[0] && column <= random.column[1]">
|
||||||
|
|
||||||
|
<!--渲染默认巷道框架规格 定位浮在 已有巷道上做对应-->
|
||||||
|
<span style="background:#bfbfbf;"
|
||||||
|
class="default"
|
||||||
|
:id="`${shelveId}-${random.row[0] + random.row[1] - rowIndex - 1}-${column}`"
|
||||||
|
@click="toStockPage(random.row[0] + random.row[1] - rowIndex - 1,column)">
|
||||||
|
{{ random.row[0] + random.row[1] - rowIndex - 1}}-{{column}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-layout-content>
|
||||||
|
</a-layout>
|
||||||
|
<a-layout-footer>
|
||||||
|
<!-- <a-tabs default-active-key="1" tab-position="bottom" @change="value => select.row = value" v-if="total.row > nums.row"> -->
|
||||||
|
<a-tabs default-active-key="1" tab-position="bottom" @change="changeTab" v-if="total.column > nums.column">
|
||||||
|
<a-tab-pane
|
||||||
|
v-for="index in latticeColumn"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<span slot="tab">
|
||||||
|
{{ getRandom(index, latticeColumn, nums.column, total.column) }}
|
||||||
|
</span>
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</a-layout-footer>
|
||||||
|
</a-layout>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Subsection",
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
// 默认行第一个 列第一个
|
||||||
|
select: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
row: 1,
|
||||||
|
column: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 总共数据
|
||||||
|
total:{
|
||||||
|
type: Object,
|
||||||
|
default:()=>{
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
nums: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
row: 10,
|
||||||
|
column: 15
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
shelveId: {
|
||||||
|
type: String,
|
||||||
|
default: () => {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
streetId: {
|
||||||
|
type: Number,
|
||||||
|
default: () => {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
streetName: {
|
||||||
|
type: String,
|
||||||
|
default: () => {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: () => {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
inOut: {
|
||||||
|
type: String,
|
||||||
|
default: () => {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 应有的格子数
|
||||||
|
latticeRow() {
|
||||||
|
return parseInt(this.total.row / this.nums.row) + (this.total.row % this.nums.row > 0 ? 1 : 0);
|
||||||
|
},
|
||||||
|
latticeColumn() {
|
||||||
|
return parseInt(this.total.column / this.nums.column) + (this.total.column % this.nums.column > 0 ? 1 : 0);
|
||||||
|
},
|
||||||
|
random() {
|
||||||
|
|
||||||
|
return {
|
||||||
|
|
||||||
|
row: this.getRandomRow(this.select.row),
|
||||||
|
column: this.getRandomColumn(this.select.column),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
status: {
|
||||||
|
row: {},
|
||||||
|
column: {}
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeDestroy() {
|
||||||
|
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
changeTab(value){
|
||||||
|
this.select.column = value
|
||||||
|
|
||||||
|
},
|
||||||
|
changeTabLeft(value){
|
||||||
|
this.select.row = value
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
// 获取行或列的范围字符串
|
||||||
|
getRandom(index, lattice, num, total) {
|
||||||
|
if(index !== lattice) {
|
||||||
|
return `${(index - 1) * num + 1} - ${index * num}`;
|
||||||
|
}else {
|
||||||
|
return `${(index - 1) * num + 1} - ${total}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取行和列的范围数组
|
||||||
|
getRandomRow(val) {
|
||||||
|
console.log(this.latticeRow + 1 - val, this.latticeRow, this.nums.row, this.total.row)
|
||||||
|
return this.getRandom(this.latticeRow + 1 - val, this.latticeRow, this.nums.row, this.total.row).split(' - ').map(item => Number(item));
|
||||||
|
},
|
||||||
|
getRandomColumn(val) {
|
||||||
|
return this.getRandom(val, this.latticeColumn, this.nums.column, this.total.column).split(' - ').map(item => Number(item));
|
||||||
|
},
|
||||||
|
|
||||||
|
toStockPage(row,column){
|
||||||
|
this.$router.push({
|
||||||
|
name: 'stockLogDetail',
|
||||||
|
query: {row: row, column: column, shelveId: this.shelveId}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.subsection /deep/{
|
||||||
|
width: 100%;
|
||||||
|
height: 360px;
|
||||||
|
overflow: hidden;
|
||||||
|
.ant-tabs-nav .ant-tabs-tab {
|
||||||
|
// padding: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
|
||||||
|
&:hover{
|
||||||
|
background: #40a9ff;
|
||||||
|
border-color: #40a9ff;
|
||||||
|
}
|
||||||
|
background: #40a9ff;
|
||||||
|
border-color: #40a9ff;
|
||||||
|
box-shadow: -1px 0 0 0 #40a9ff;
|
||||||
|
}
|
||||||
|
.ant-radio-button-wrapper-checked {
|
||||||
|
box-shadow: -1px 0 0 0 #40a9ff;
|
||||||
|
}
|
||||||
|
.radio-button-cell {
|
||||||
|
width: 100px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.ant-layout-sider {
|
||||||
|
height: 100%;
|
||||||
|
.ant-tabs {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-tabs-tab {
|
||||||
|
padding: 8px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
width: 104px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-layout-footer {
|
||||||
|
// width: 500px;
|
||||||
|
padding: 0 0 0 110px;
|
||||||
|
.ant-tabs {
|
||||||
|
// width: 735px;
|
||||||
|
}
|
||||||
|
.ant-tabs-bottom-bar {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-layout, .ant-layout-sider, .ant-layout-footer {
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,261 @@
|
|||||||
|
<template>
|
||||||
|
<div class="check-page">
|
||||||
|
|
||||||
|
<div style="margin-top: 10px">
|
||||||
|
<a-select @change="handleChange" style="width:200px" v-model="select">
|
||||||
|
<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" :streetId="item.id" :streetName="item.name" type="left" :inOut="leftShelveId.shelveType" >
|
||||||
|
</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.rightRow, column: item.rightColumn}" :shelveId="rightShelveId.shelveId" :streetId="item.id" :streetName="item.name" type="right" :inOut="rightShelveId.shelveType">
|
||||||
|
</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: {}
|
||||||
|
},
|
||||||
|
|
||||||
|
leftShelveId:{},
|
||||||
|
rightShelveId:{}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.request();
|
||||||
|
},
|
||||||
|
created(){
|
||||||
|
|
||||||
|
},
|
||||||
|
activated() {
|
||||||
|
if(!this.$route.meta.isUseCache){
|
||||||
|
console.log("$route.meta.isUseCache false")
|
||||||
|
// 清空原有数据
|
||||||
|
this.request();// 这是我们获取数据的函数
|
||||||
|
}else{
|
||||||
|
console.log("$route.meta.isUseCache true")
|
||||||
|
//this.request();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
//获取巷道列表
|
||||||
|
request() {
|
||||||
|
this.$api.httpApi.getAllStreet({
|
||||||
|
}).then(res => {
|
||||||
|
console.log("update data")
|
||||||
|
for(let i = 0;i<res.data.length;i++){
|
||||||
|
|
||||||
|
this.$set(this.data,i,res.data[i])
|
||||||
|
}
|
||||||
|
this.select = res.data[0].id
|
||||||
|
//this.$set(this.select,res.data.list[0].id,0)
|
||||||
|
this.getStreetDetail(this.select);
|
||||||
|
}).catch(err => {
|
||||||
|
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 获取盘点状态
|
||||||
|
async getStockRowColumn() {
|
||||||
|
this.rightShelveChange();
|
||||||
|
this.leftShelveChange();
|
||||||
|
|
||||||
|
},
|
||||||
|
rightShelveChange() {
|
||||||
|
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';
|
||||||
|
};
|
||||||
|
this.rightShelveId.shelveId = shelveId;
|
||||||
|
this.rightShelveId.shelveType = shelveType;
|
||||||
|
|
||||||
|
},
|
||||||
|
leftShelveChange() {
|
||||||
|
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';
|
||||||
|
};
|
||||||
|
this.leftShelveId.shelveId = shelveId;
|
||||||
|
this.leftShelveId.shelveType = shelveType;
|
||||||
|
},
|
||||||
|
|
||||||
|
//获取巷道详情
|
||||||
|
getStreetDetail(id) {
|
||||||
|
this.$axios.get('/street/' + id, {
|
||||||
|
data: {}
|
||||||
|
}).then(res => {
|
||||||
|
this.streetDetail = res.data
|
||||||
|
this.getStockRowColumn()
|
||||||
|
}).catch(err => {
|
||||||
|
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
handleChange(value) {
|
||||||
|
|
||||||
|
this.select = value
|
||||||
|
|
||||||
|
this.getStreetDetail(value)
|
||||||
|
this.leftShelveChange();
|
||||||
|
this.rightShelveChange();
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
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>
|
||||||
@ -0,0 +1,267 @@
|
|||||||
|
<template>
|
||||||
|
<div >
|
||||||
|
<a-table
|
||||||
|
style="margin-top:40px"
|
||||||
|
:columns="columns"
|
||||||
|
:row-key="record => record.id"
|
||||||
|
:data-source="data"
|
||||||
|
:pagination="pagination"
|
||||||
|
@change="getStockPageInfo"
|
||||||
|
>
|
||||||
|
<span slot="type" slot-scope="record">
|
||||||
|
{{ statusMap[record.type] }}
|
||||||
|
</span>
|
||||||
|
<span slot="pic" slot-scope="text" style="width:auto">
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<span style="height:100%;">
|
||||||
|
<happy-scroll color="rgba(100,100,100,0.5)" size="8" class="scroll-box" style="width:320px;height:90px;">
|
||||||
|
<viewer><img class="historyImg" :src="imgUrl+text.pic"/></viewer>
|
||||||
|
</happy-scroll>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</span>
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {imgUrl} from "@/api/importExcel";
|
||||||
|
const columns=[
|
||||||
|
{
|
||||||
|
title:'随行工单号',
|
||||||
|
dataIndex: 'orderNum'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'货架号',
|
||||||
|
dataIndex: 'shelveId'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'行',
|
||||||
|
dataIndex: 'row'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'列',
|
||||||
|
dataIndex: 'column'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'类型',
|
||||||
|
|
||||||
|
scopedSlots: {customRender: 'type'},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'图片',
|
||||||
|
scopedSlots: {customRender: 'pic'},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title:'时间',
|
||||||
|
dataIndex: 'createTime'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pageNum:1,
|
||||||
|
pageSize:10,
|
||||||
|
data: [],
|
||||||
|
pagination:{
|
||||||
|
total:0,
|
||||||
|
defaultPageSize:10, // 默认每页显示数量
|
||||||
|
showTotal: total => `共 ${total} 条数据`, // 显示总数
|
||||||
|
showSizeChanger:true, // 显示可改变每页数量
|
||||||
|
pageSizeOptions: ['10', '20', '30'],
|
||||||
|
onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize // 改变每页数量时更新显示
|
||||||
|
},
|
||||||
|
row: 0,
|
||||||
|
column: 0,
|
||||||
|
shelveId: '',
|
||||||
|
columns,
|
||||||
|
statusMap: {0:"未知",1:"取货到位",2:"取货完成",3:"放货到位",4:"放货完成"},
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeRouteLeave(to ,form, next) {
|
||||||
|
// 修复第二次进入界面不执行created
|
||||||
|
this.$destroy();
|
||||||
|
// if (to.name == 'checkManage') {
|
||||||
|
// to.meta.isUseCache = true;
|
||||||
|
// }else{
|
||||||
|
// to.meta.isUseCache = false;
|
||||||
|
// }
|
||||||
|
next();
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.imgUrl = imgUrl
|
||||||
|
if (this.$route.query.row && this.$route.query.column && this.$route.query.shelveId ) {
|
||||||
|
|
||||||
|
this.row = this.$route.query.row
|
||||||
|
this.column = this.$route.query.column
|
||||||
|
this.shelveId = this.$route.query.shelveId
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getStockPageInfo()
|
||||||
|
},
|
||||||
|
destroyed () {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getStockPageInfo(pagination) {
|
||||||
|
if(pagination){
|
||||||
|
this.pagination.current = pagination.current;
|
||||||
|
this.pagination.pageSize = pagination.pageSize;
|
||||||
|
this.pageNum = pagination.current;
|
||||||
|
this.pageSize = pagination.pageSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.request();
|
||||||
|
},
|
||||||
|
request(){
|
||||||
|
this.$api.httpApi.getStockPage({
|
||||||
|
data: {
|
||||||
|
pageNum:this.pageNum,
|
||||||
|
pageSize:this.pageSize,
|
||||||
|
row:this.row,
|
||||||
|
column:this.column,
|
||||||
|
shelveId:this.shelveId
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
const pagination = { ...this.pagination };
|
||||||
|
pagination.total = res.data.total;
|
||||||
|
this.data = res.data.list;
|
||||||
|
this.pagination = pagination;
|
||||||
|
}).catch(err => {
|
||||||
|
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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: 100% / 4;
|
||||||
|
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: 130px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.img-box-value {
|
||||||
|
display: inline-block;
|
||||||
|
width: calc(100% - 130px);
|
||||||
|
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: 50px;
|
||||||
|
font-size: 20px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.historyImg {
|
||||||
|
width: 180px;
|
||||||
|
height:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue