添加销售拣货缓存功能

pages/salesOutbound/salesOutbound.vue

@@ -50,31 +50,12 @@ export default {
 	data() {
 		return {
 			bgSrc: require('@/static/images/qrcode.png'),
-			number: 0,
-			show: true,
-			nlpla: '',
 			wxparams: '',
-			btnArr: [
-				{
-					style: '',
-					type: 'primary',
-					text: '扫描单号',
-					way: 'scanning'
-				},
-				// {
-				// 	style: '',
-				// 	type: 'warning',
-				// 	text: '查询单号',
-				// 	way: 'goClick'
-				// }
-			],
-			goodsList: [],
 			isFocus: false,
 			isDisabled: false
 		};
 	},
 	created() {
-		// this.getPlnr('80000033');
 	},
 	methods: {
 		getBtnHandle(row) {
@@ -102,13 +83,11 @@ export default {
 				})
 				.then((res) => {
 					if (res && res.BKDT.length) {
-						this.goodsList = res.BKDT
 						uni.navigateTo({
-							url: `/pages/salesOutbound/salesOutboundList?order=${JSON.stringify(this.goodsList)}`
+							url: `/pages/salesOutbound/salesOutboundList?order=${VBELN}`
 						});
 					} else {
-						// res.forEach(element => {
-						// });
+						// 删除本地缓存的单号
 						this.$u.toast(res.MSG[0].MESSAGE);
 					}
 					this.loading = false;

pages/salesOutbound/salesOutboundList.vue

@@ -2,9 +2,6 @@
 	<view class="lists page">
 		<StickyNavBar class="listTitle">
 			<NavBar title="销售拣货"></NavBar>
-      <!-- <view class="selectSheet">
-				<u-tabs :list="list" :is-scroll="false" :current="current" @change="changeTab"></u-tabs>
-			</view> -->
 			<view class="headerTitle">
 				<view class="items">交货单号:{{ vbeln }}</view>
 				<view class="items">8|李XXXXXXX体</view>
@@ -12,15 +9,8 @@
 			</view>
 			<view class="">
 				<view class="btn">
-          <!-- <uni-easyinput prefixIcon="search" class="topSearch" v-model="nlpla" focus placeholder="请扫描库位" @change="handleInputNlpla"></uni-easyinput> -->
-          <uni-easyinput
-            prefixIcon="search"
-            :disabled="isDisabled"
-            v-model="wxparams"
-            :focus="isFocus"
-            placeholder="请扫描产品包装条码/外箱码"
-            @input="handleInputPlnr"
-          ></uni-easyinput>
+					<uni-easyinput prefixIcon="search" :disabled="isDisabled" v-model="wxparams" :focus="isFocus"
+						placeholder="请扫描产品包装条码/外箱码" @input="handleInputPlnr"></uni-easyinput>
 				</view>
 				<view class="total">
 					<view class="left">明细</view>
@@ -35,32 +25,25 @@
 		</StickyNavBar>
 		<ContentLoadingMore class="contentMore" :list="goodsList">
 			<view class="cardbox">
-        <view
-          class="cardContent"
-          v-for="(item, index) in goodsList"
-          :key="item.PLNR"
-        >
+				<view class="cardContent" v-for="(item, index) in goodsList" :key="item.PLNR">
 					<scanningList :item="item" :list="item.ZPLDT" />
 				</view>
 			</view>
-      <!-- <view class="cardbox" v-else>
-				<view class="cardContent" v-for="(item, index) in goodsList">
-					<stockList :item='item' />
-				</view>
-			</view> -->
 		</ContentLoadingMore>
 		<BottomBtn :btnArr="btnArr" @getBtnHandle="getBtnHandle"></BottomBtn>
 	</view>
 </template>
 
 <script>
-import StickyNavBar from "@/components/StickyNavBar/index.vue";
-import ContentLoadingMore from "@/components/ContentLoadingMore/index.vue";
-import BottomBtn from "@/components/BottomBtn/index.vue";
-import scanningList from "./scanningList.vue";
-import stockList from "./stockList.vue";
-import { parseTime } from "@/utils/ruoyi";
-export default {
+	import StickyNavBar from "@/components/StickyNavBar/index.vue";
+	import ContentLoadingMore from "@/components/ContentLoadingMore/index.vue";
+	import BottomBtn from "@/components/BottomBtn/index.vue";
+	import scanningList from "./scanningList.vue";
+	import stockList from "./stockList.vue";
+	import {
+		parseTime
+	} from "@/utils/ruoyi";
+	export default {
 		components: {
 			StickyNavBar,
 			ContentLoadingMore,
@@ -75,12 +58,11 @@ export default {
 				border: true,
 				current: 0,
 				status: "loadmore",
-      btnArr: [
-        {
+				btnArr: [{
 						style: "",
-          type: "warning",
-          text: "返回",
-          way: "goBack",
+						type: "primary",
+						text: "保存",
+						way: "goSave",
 					},
 					{
 						style: "",
@@ -94,52 +76,28 @@ export default {
 				nlpla: "",
 				wxparams: "",
 				goodsList: [],
-      orderItem: {},
+				pls: [], // 已经扫码的pl号
 				resFlag: false,
 			};
 		},
-  created() {
-    // this.getPlnr('10000820240325000001|10000320100');
-  },
+		created() {},
 		onLoad(option) {
-    if (option && option.order) {
-      const arr = [...JSON.parse(option.order)];
-      console.log(arr, "------");
-      // 有SIZE行就取ZINSNUM+ZLOSSC，没有SIZE行的就是取交货单行的LFIMG
-      arr.forEach((ele) => {
-        if (ele.ZSIZE.length) {
-          this.goodsList.push(
-            ...ele.ZSIZE.map((item) => {
-              return {
-                KDAUF: ele.KDAUF,
-                KDPOS: ele.KDPOS,
-                LFIMG: ele.LFIMG,
-                MEINS: ele.MEINS,
-                WERKS: ele.WERKS,
-                ...item,
-                MATNR: ele.MATNR,
-                MAKTX: ele.MAKTX,
-                sumNum: item.ZINSNUM+item.ZLOSSC
-              };
-            })
-          );
-        } else {
-          ele.ZSIZE = "";
-          ele.sumNum = ele.LFIMG;
-          // ele.ZINSNUM = ele.LFIMG;
-          this.goodsList.push(ele);
-		  this.$u.toast(`物料编号：${ele.MATNR}--没有尺码信息`);
-        }
-      });
-    }
+			/**
+			 * 查询缓存中是否有单号，有单号读取扫描PL的数据
+			 */
+			this.getInfo(option.order);
+			this.vbeln = option.order
 		},
 		computed: {
 			totalNum() {
 				const count = this.goodsList.filter((item) => item.checkedBox).length;
 				return count || 0;
 			},
-    vbeln() {
-      return this.goodsList[0]?.VBELN || "";
+			/**
+			 * 缓存的扫描过的pl条目
+			 */
+			catchPL() {
+				return this.vuex_sales_outbound[this.vbeln] || null
 			},
 		},
 		methods: {
@@ -186,22 +144,83 @@ export default {
 					});
 					if (!flag) {
 						this.$u.toast("提交成功");
-          // this.resFlag = true
+						// 如果有缓存PL，提交成功将要清楚当前缓存
+						if (this.catchPL) {
+							const sales_outbound = {
+								...this.vuex_sales_outbound
+							}
+							delete sales_outbound[this.vbeln]
+							this.$u.vuex('vuex_sales_outbound', sales_outbound)
+						}
 						setTimeout(() => {
 							this.goBack();
 						}, 1000);
 					}
 				});
 			},
-    getPlnr(plnr) {
-      let params = {
-        ZCODE: plnr.includes("BL") ? plnr : "",
-        plnr: plnr.includes("BL") ? "" : plnr,
+			goSave() {
+				console.log(this.vuex_sales_outbound, 'this.vuex_sales_outbound')
+				// 缓存以单号为key，扫描的pl为value
+				const pls = this.goodsList.reduce((acc, cur) => {
+					cur.ZPLDT && acc.push(...cur.ZPLDT)
+					return acc
+				}, [])
+				// 如果已经扫描pl执行缓存
+				if (pls.length) {
+					const sales_outbound = {
+						...(this.vuex_sales_outbound || {}),
+						[this.vbeln]: pls
+					}
+					this.$u.vuex('vuex_sales_outbound', sales_outbound)
+					this.$u.toast('保存成功！')
+				}
+			},
+			getInfo(VBELN) {
+				this.$u.api.sapApi
+					.sapSchDn({
+						VBELN
+					}).then(res => {
+						this.initGoodsList(res.BKDT)
+						console.log(this.catchPL, 'this.catchPL')
+						this.catchPL && this.setSalesBoundPL(this.catchPL)
+					})
+			},
+			initGoodsList(arr) {
+				// 有SIZE行就取ZINSNUM+ZLOSSC，没有SIZE行的就是取交货单行的LFIMG
+				arr.forEach((ele) => {
+					if (ele.ZSIZE.length) {
+						this.goodsList.push(
+							...ele.ZSIZE.map((item) => {
+								return {
+									KDAUF: ele.KDAUF,
+									KDPOS: ele.KDPOS,
+									LFIMG: ele.LFIMG,
+									MEINS: ele.MEINS,
+									WERKS: ele.WERKS,
+									...item,
+									MATNR: ele.MATNR,
+									MAKTX: ele.MAKTX,
+									sumNum: item.ZINSNUM + item.ZLOSSC
 								};
-      this.$u.api.sapApi.sapBlpl(params).then((res) => {
-        if (res && res.MSG[0].TYPE === "S") {
+							})
+						);
+					} else {
+						ele.ZSIZE = "";
+						ele.sumNum = ele.LFIMG;
+						// ele.ZINSNUM = ele.LFIMG;
+						this.goodsList.push(ele);
+						this.$u.toast(`物料编号：${ele.MATNR}--没有尺码信息`);
+					}
+				});
+			},
+			setSalesBoundPL(pls) {
+				console.log(pls, 'pls')
 				// 循环BLPL合并相同的物料号和size
-          res.BLPL.forEach((ele) => {
+				pls.forEach((ele) => {
+					if (!this.pls.includes(ele.PLNR) || !this.pls.includes(ele.ZCODE)) {
+						ele.PLNR && this.pls.push(ele.PLNR)
+						ele.ZCODE && this.pls.push(ele.ZCODE)
+					}
 					ele.TOMNG = ele.PACMG;
 					const item = this.goodsList.find(
 						(v) => v.ZSIZE == ele.ZSIZE && ele.MATNR == v.MATNR
@@ -214,6 +233,15 @@ export default {
 						}
 					}
 				});
+			},
+			getPlnr(plnr) {
+				let params = {
+					ZCODE: plnr.includes("BL") ? plnr : "",
+					plnr: plnr.includes("BL") ? "" : plnr,
+				};
+				this.$u.api.sapApi.sapBlpl(params).then((res) => {
+					if (res && res.MSG[0].TYPE === "S") {
+						this.setSalesBoundPL(res.BLPL)
 					} else {
 						this.$u.toast(res.MSG[0].MESSAGE);
 					}
@@ -242,59 +270,63 @@ export default {
 			},
 			handleInputNlpla(e) {},
 			handleInputPlnr(e) {
+				if (!e) return
 				this.isFocus = false;
-      e && this.getPlnr(e);
+				console.log(this.pls, 'this.pls')
+				if (this.pls.includes(e)) {
+					return this.$u.toast('请勿重复扫描！')
+				}
+				this.getPlnr(e);
 			},
 		},
-};
+	};
 </script>
 
 <style lang="scss">
-.selectSheet {
+	.selectSheet {
 		border-bottom: 1px solid #ccc;
-}
+	}
 
-/deep/ .u-sticky {
+	/deep/ .u-sticky {
 		top: 0 !important;
 		background: #fff;
-}
+	}
 
-.tabTwo {
+	.tabTwo {
 		/deep/ .u-sticky-wrap {
 			height: 330rpx !important;
 		}
-}
+	}
 
-.listTitle {
-}
+	.listTitle {}
 
-.contentMore {
+	.contentMore {
 		margin: 20rpx;
-}
+	}
 
-page {
+	page {
 		background: #f8f8f8;
-}
+	}
 
-.headerTitle {
+	.headerTitle {
 		padding: 20rpx;
 		font-weight: 600;
 
 		.items {
 			line-height: 40rpx;
 		}
-}
+	}
 
-.btn {
+	.btn {
 		padding: 20rpx;
 		background: #fff;
 
 		.topSearch {
 			margin-bottom: 20rpx;
 		}
-}
+	}
 
-.total {
+	.total {
 		background: #fff;
 		color: #000;
 		padding: 0rpx 40rpx;
@@ -305,17 +337,17 @@ page {
 		.line {
 			margin: 0px 10rpx;
 		}
-}
+	}
 
-.cardbox {
+	.cardbox {
 		min-height: calc(100vh - 410rpx);
 		padding: 0rpx 20rpx;
 		margin-top: 20rpx;
-}
+	}
 
-.cardContent {
+	.cardContent {
 		border-radius: 8px;
 		background: #fff;
 		margin-bottom: 20rpx;
-}
+	}
 </style>

store/index.js

@@ -8,20 +8,22 @@ Vue.use(Vuex)
 
 let lifeData = {};
 
-try{
+try {
 	// 尝试获取本地是否存在lifeData变量，第一次启动APP时是不存在的
 	lifeData = uni.getStorageSync('lifeData');
-}catch(e){
+} catch (e) {
 
 }
 
 // 需要永久存储，且下次APP启动需要取出的，在state中的变量名
-let saveStateKeys = ['vuex_user', 'vuex_user_factory','vuex_token', 'vuex_remember', 'vuex_locale','vuex_isAgent','vuex_workstation','vuex_task'];
+let saveStateKeys = ['vuex_user', 'vuex_user_factory', 'vuex_token', 'vuex_remember', 'vuex_locale', 'vuex_isAgent',
+	'vuex_workstation', 'vuex_task', 'vuex_sales_outbound'
+];
 
 // 保存变量到本地存储中
-const saveLifeData = function(key, value){
+const saveLifeData = function(key, value) {
 	// 判断变量名是否在需要存储的数组中
-	if(saveStateKeys.indexOf(key) != -1) {
+	if (saveStateKeys.indexOf(key) != -1) {
 		// 获取本地存储的lifeData对象，将变量添加到对象中
 		let tmp = uni.getStorageSync('lifeData');
 		// 第一次打开APP，不存在lifeData变量，故放一个{}空对象
@@ -36,12 +38,15 @@ const store = new Vuex.Store({
 	state: {
 		// 如果上面从本地获取的lifeData对象下有对应的属性，就赋值给state中对应的变量
 		// 加上vuex_前缀，是防止变量名冲突，也让人一目了然
-		vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {userName: 'Aidex'},
+		vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {
+			userName: 'Aidex'
+		},
 		vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
 		vuex_remember: lifeData.vuex_remember ? lifeData.vuex_remember : '',
 		vuex_locale: lifeData.vuex_locale ? lifeData.vuex_locale : '',
 		vuex_isAgent: lifeData.vuex_isAgent ? lifeData.vuex_isAgent : '',
 		vuex_user_factory: lifeData.vuex_user_factory || '1000',
+		vuex_sales_outbound: lifeData.vuex_sales_outbound || {},
 
 		// 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式
 		vuex_config: config,
@@ -79,9 +84,9 @@ const store = new Vuex.Store({
 			let nameArr = payload.name.split('.');
 			let saveKey = '';
 			let len = nameArr.length;
-			if(len >= 2) {
+			if (len >= 2) {
 				let obj = state[nameArr[0]];
-				for(let i = 1; i < len - 1; i ++) {
+				for (let i = 1; i < len - 1; i++) {
 					obj = obj[nameArr[i]];
 				}
 				obj[nameArr[len - 1]] = payload.value;