Skip to content

M
mes-pda-scan
Commit 846de713 authored by 何远江's avatar 何远江
Browse files
Options

库存盘点对接

parent a820d6e0
Hide whitespace changes
Inline Side-by-side
Showing with 301 additions and 290 deletions
pages/inventoryCounting/inventoryList.vue
View file @ 846de713
<template>
<view class="lists">
<StickyNavBar class="stickyBox">
<NavBar title="库存盘点"></NavBar>
<view class="planBox">
<view class="planTitle">盘点计划：{{ inventoryInfo.IVNUM || inventoryInfo.IBLNR }}</view>
<view class="planTip">仓库：{{ inventoryInfo.LGOBE }} | 存货单元：{{ inventoryInfo.LGPLA }}</view>
</view>
</StickyNavBar>
<view class="scanningBtn">
<uni-easyinput prefixIcon="search" v-model="value" focus placeholder="请扫描盘点条码" @input="handleInput"></uni-easyinput>
</view>
<view class="inventoryDetail">
<view class="detailTitle">盘点明细</view>
<!-- <view class="">
<u-button size="mini" class="" type="success" @click="addShowModel = true">
<u-icon name="plus"></u-icon>
新增
</u-button>
</view> -->
</view>
<view class="cardContent" v-for="(item, index) in goodsList" :key="item.MATNR">
<view class="cardItem">
<view class="bottomItem">
<view class="items">物料编码：{{item.MATNR}}({{item.list.length}})</view>
<view class="items">物料名称：{{item.MAKTX}}</view>
</view>
<view class="boxRight">
<view class="items">0 / {{item.GESME}}pcs</view>
</view>
</view>
<view class="listBottom">
<view class="bottomTitle" @tap="toggleShow(item,index)">
<view class="topIcons">
<view v-if="item.show">
<u-icon name="arrow-down" color="#aaa" size="32"></u-icon>
展开
</view>
<view v-else>
<u-icon name="arrow-up" color="#aaa" size="32"></u-icon>
收起
</view>
</view>
</view>
<view v-if="!item.show" class="bottomBox">
<view class="boxAll" v-for="itm in item.list">
<view class="bottomItem">
<view class="items">{{ item.MATNR }}</view>
<view class="items">C009900 | 防霉抗菌包装纸</view>
</view>
<view class="boxRight">
<view class="items">891 / 1000pcs</view>
<view class="itemsBtn">
<u-button size="mini" class="" type="primary" @click="checkShowModel = true">盘点</u-button>
</view>
</view>
</view>
</view>
</view>
</view>
<BottomBtn :btnArr="btnArr" @getBtnHandle="getBtnHandle"></BottomBtn>
<u-modal v-model="addShowModel" @confirm="addConfirm" ref="addShowModel" :show-title="false" :show-cancel-button="true">
<view class="slot-content">
<u-form :model="addForm" ref="addForm">
<u-form-item label="批号"><u-input v-model="addForm.name" /></u-form-item>
<u-form-item label="批次"><u-input v-model="addForm.name" /></u-form-item>
<u-form-item label="数量"><u-input v-model="addForm.name" /></u-form-item>
</u-form>
</view>
</u-modal>
<u-modal v-model="checkShowModel" @confirm="addConfirm" ref="checkShowModel" :show-title="false" :show-cancel-button="true">
<view class="slot-content">
<u-form :model="checkForm" ref="checkForm">
<uni-easyinput prefixIcon="search" class="topSearch" v-model="checkForm.name" focus placeholder="请扫描盘点库位条码" @input="handleInput"></uni-easyinput>
<u-form-item label="数量"><u-input v-model="checkForm.name" /></u-form-item>
</u-form>
</view>
</u-modal>
</view>
</template>
<script>
import StickyNavBar from '@/components/StickyNavBar/index.vue';
import ContentLoadingMore from '@/components/ContentLoadingMore/index.vue';
import BottomBtn from '@/components/BottomBtn/index.vue';
export default {
components: {
StickyNavBar,
ContentLoadingMore,
BottomBtn
},
data() {
return {
urlPs: {},
value: '',
btnArr: [
{
style: '',
type: 'primary',
text: '盘点确认',
way: 'goBack'
}
],
inventoryList: [],
inventoryInfo: {},
addShowModel: false,
checkShowModel: false,
addForm: {
name: ''
},
checkForm: {
name: ''
}
};
},
computed: {
goodsList() {
return this.inventoryList.reduce((acc, cur) => {
// 没有分类的产品编码
const item = acc.find(v => v.MATNR == cur.MATNR)
if (!item) {
acc.push({
MATNR: cur.MATNR, // 物料编码
MAKTX: cur.MAKTX, // 物料名称
GESME: cur.GESME, // 该物料盘点总数
MEINS: cur.MEINS, // 单位
show: true,
list: [cur]
})
} else {
// 有产品分类
item.list.push(cur)
}
return acc
}, [])
}
},
onLoad(option) {
this.urlPs = option
this.$u.api.sapApi
.sapInventory(this.urlPs).then(res => {
if (res.RDATA_IM.length || res.RDATA_WM.length) {
// 是否是IM
this.isIm = res.RDATA_IM.length > 0;
this.inventoryInfo = this.isIm ? res.RDATA_IM[0] : res.RDATA_WM[0];
this.inventoryList = (
this.isIm ? res.RDATA_IM : res.RDATA_WM
).reduce((acc, cur) => {
if (acc.findIndex((item) => item.MATNR === cur.MATNR) === -1) {
acc.push(cur);
}
return acc;
}, []);
} else {
// 不能盘点
this.$u.toast(res.MSG[0].MESSAGE || "该盘点计划暂无库存数据");
}
})
},
methods: {
handleInput(e) {
console.log(e, 'eee');
},
toggleShow(item, index) {
console.log('触发了当前选项！', item)
item.show = !item.show
this.$set(this.goodsList,index,item)
},
getBtnHandle(row) {
console.log('getBtnHandle', row);
this[row.way]();
},
goBack() {
console.log('返回了');
},
ontabtap(e, type) {
console.log('切换tab', e, type);
},
addConfirm() {
this.addShowModel = false;
}
}
};
</script>
<style lang="scss">
/deep/ .u-sticky {
top: 0 !important;
background: #fff;
}
.planBox {
padding: 20rpx;
border-bottom: 1px solid #333;
}
.planTitle {
font-size: 32rpx;
font-weight: 600;
text-align: center;
line-height: 60rpx;
}
.planTip {
font-size: 28rpx;
text-align: center;
line-height: 40rpx;
}
.scanningBtn {
padding: 20rpx;
background: #fff;
.topSearch {
margin-bottom: 20rpx;
}
}
.workTitle {
font-size: 32rpx;
font-weight: 600;
line-height: 40rpx;
margin: 20rpx 0 0 40rpx;
}
.inventoryDetail {
display: flex;
justify-content: space-between;
padding: 0 20rpx;
}
.detailTitle {
font-size: 32rpx;
font-weight: 600;
line-height: 46rpx;
}
.listBottom {
padding: 0 10rpx 20rpx 10rpx;
.bottomTitle {
height: 60rpx;
position: relative;
display: flex;
justify-content: space-between;
.topIcons {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #aaa;
}
}
.bottomBox {
.boxAll {
display: flex;
justify-content: space-between;
background: #fff;
border-radius: 10rpx;
}
.bottomItem {
padding: 20rpx;
.items {
color: #333;
font-size: 24rpx;
height: 40rpx;
line-height: 40rpx;
}
}
.boxRight {
padding: 20rpx 20rpx 0 20rpx;
.items {
color: #333;
font-size: 24rpx;
height: 40rpx;
line-height: 40rpx;
}
.itemsBtn {
float: right;
padding: 20rpx 0 10rpx;
}
}
}
}
.cardContent {
margin: 20rpx;
background: #f8f8f8;
}
.cardItem {
padding: 20rpx 10rpx;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #333;
}
.slot-content {
padding: 20rpx;
.u-form-item {
padding: 0;
}
}
<template>
<view class="lists">
<StickyNavBar class="stickyBox">
<NavBar title="库存盘点"></NavBar>
<view class="planBox">
<view class="planTitle">盘点计划：{{ inventoryInfo.IVNUM || inventoryInfo.IBLNR }}</view>
<!-- <view class="planTip">仓库：{{ inventoryInfo.LGOBE }} | 存货单元：{{ inventoryInfo.LGPLA }}</view> -->
</view>
</StickyNavBar>
<view class="scanningBtn">
<uni-easyinput prefixIcon="search" v-model="value" focus placeholder="请扫描盘点条码" @input="handleInput">
</uni-easyinput>
</view>
<view class="inventoryDetail">
<view class="detailTitle">盘点明细</view>
<!-- <view class="">
<u-button size="mini" class="" type="success" @click="addShowModel = true">
<u-icon name="plus"></u-icon>
新增
</u-button>
</view> -->
</view>
<view class="cardContent" v-for="(item, index) in goodsList" :key="item.MATNR">
<view class="cardItem">
<view class="bottomItem">
<view class="items">物料编码：{{item.MATNR}}({{item.list.length}})</view>
<view class="items">物料名称：{{item.MAKTX}}</view>
</view>
<view class="boxRight">
<view class="items">0 / {{item.GESME}} {{ item.MEINS }}</view>
</view>
</view>
<view class="listBottom">
<view class="bottomTitle" @tap="toggleShow(item,index)">
<view class="topIcons">
<view v-if="item.show">
<u-icon name="arrow-down" color="#aaa" size="32"></u-icon>
展开
</view>
<view v-else>
<u-icon name="arrow-up" color="#aaa" size="32"></u-icon>
收起
</view>
</view>
</view>
<view v-if="!item.show" class="bottomBox">
<view class="boxAll" v-for="itm in item.list">
<view class="bottomItem">
<view class="items">仓位：{{ itm.LGPLA }}</view>
<view class="items">存储地点：{{ itm.LGOBE }}</view>
</view>
<view class="boxRight">
<view class="items">{{ itm.MENGA }} / {{itm.PACMG}} {{itm.MEINS}}</view>
<view class="itemsBtn">
<u-button size="mini" class="" type="primary" @click="checkShowModel = true">盘点
</u-button>
</view>
</view>
</view>
</view>
</view>
</view>
<BottomBtn :btnArr="btnArr" @getBtnHandle="getBtnHandle"></BottomBtn>
<u-modal v-model="checkShowModel" @confirm="addConfirm" ref="checkShowModel" :show-title="false"
:show-cancel-button="true">
<view class="slot-content">
<u-form :model="checkForm" ref="checkForm">
<uni-easyinput prefixIcon="search" class="topSearch" v-model="checkForm.name" focus
placeholder="请扫描盘点库位条码" @input="handleInput"></uni-easyinput>
<u-form-item label="数量">
<u-input v-model="checkForm.name" />
</u-form-item>
</u-form>
</view>
</u-modal>
</view>
</template>
<script>
import StickyNavBar from '@/components/StickyNavBar/index.vue';
import ContentLoadingMore from '@/components/ContentLoadingMore/index.vue';
import BottomBtn from '@/components/BottomBtn/index.vue';
export default {
components: {
StickyNavBar,
ContentLoadingMore,
BottomBtn
},
data() {
return {
urlPs: {},
value: '',
btnArr: [{
style: '',
type: 'primary',
text: '盘点确认',
way: 'goBack'
}],
inventoryList: [],
inventoryInfo: {},
addShowModel: false,
checkShowModel: false,
addForm: {
name: ''
},
checkForm: {
name: ''
},
goodsList: []
};
},
onLoad(option) {
this.urlPs = option
this.$u.api.sapApi
.sapInventory(this.urlPs).then(res => {
if (res.RDATA_IM.length || res.RDATA_WM.length) {
// 是否是 IM 数据结构
this.isIm = res.RDATA_IM.length > 0;
this.inventoryInfo = this.isIm ? res.RDATA_IM[0] : res.RDATA_WM[0];
this.inventoryList = this.isIm ? res.RDATA_IM : res.RDATA_WM
this.setGoodsList()
} else {
// 不能盘点
this.$u.toast(res.MSG[0].MESSAGE || "该盘点计划暂无库存数据");
}
})
},
methods: {
setGoodsList() {
this.goodsList = this.inventoryList.reduce((acc, cur) => {
// 没有分类的产品编码
const item = acc.find(v => v.MATNR == cur.MATNR)
if (!item) {
acc.push({
MATNR: cur.MATNR, // 物料编码
MAKTX: cur.MAKTX, // 物料名称
GESME: cur.GESME, // 该物料盘点总数
MEINS: cur.MEINS, // 单位
show: true,
list: [cur]
})
} else {
// 有产品分类
item.list.push(cur)
}
return acc
}, [])
},
handleInput(e) {
console.log(e, 'eee');
},
toggleShow(item, index) {
console.log('触发了当前选项！', item)
item.show = !item.show
this.$set(this.goodsList, index, item)
},
getBtnHandle(row) {
console.log('getBtnHandle', row);
this[row.way]();
},
goBack() {
console.log('返回了');
},
ontabtap(e, type) {
console.log('切换tab', e, type);
},
addConfirm() {
this.addShowModel = false;
}
}
};
</script>
<style lang="scss">
/deep/ .u-sticky {
top: 0 !important;
background: #fff;
}
.planBox {
padding: 20rpx;
border-bottom: 1px solid #333;
}
.planTitle {
font-size: 32rpx;
font-weight: 600;
text-align: center;
line-height: 60rpx;
}
.planTip {
font-size: 28rpx;
text-align: center;
line-height: 40rpx;
}
.scanningBtn {
padding: 20rpx;
background: #fff;
.topSearch {
margin-bottom: 20rpx;
}
}
.workTitle {
font-size: 32rpx;
font-weight: 600;
line-height: 40rpx;
margin: 20rpx 0 0 40rpx;
}
.inventoryDetail {
display: flex;
justify-content: space-between;
padding: 0 20rpx;
}
.detailTitle {
font-size: 32rpx;
font-weight: 600;
line-height: 46rpx;
}
.listBottom {
padding: 0 10rpx 20rpx 10rpx;
.bottomTitle {
height: 60rpx;
position: relative;
display: flex;
justify-content: space-between;
.topIcons {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #aaa;
}
}
.bottomBox {
.boxAll {
display: flex;
justify-content: space-between;
background: #fff;
border-radius: 10rpx;
}
.bottomItem {
padding: 20rpx;
.items {
color: #333;
font-size: 24rpx;
height: 40rpx;
line-height: 40rpx;
}
}
.boxRight {
padding: 20rpx 20rpx 0 20rpx;
.items {
color: #333;
font-size: 24rpx;
height: 40rpx;
line-height: 40rpx;
}
.itemsBtn {
float: right;
padding: 20rpx 0 10rpx;
}
}
}
}
.cardContent {
margin: 20rpx;
background: #f8f8f8;
}
.cardItem {
padding: 20rpx 10rpx;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #333;
}
.slot-content {
padding: 20rpx;
.u-form-item {
padding: 0;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment