From 750f856006af98dffb7918ab80fdc689781ea017 Mon Sep 17 00:00:00 2001 From: whycq <913841844@qq.com> Date: 星期三, 17 一月 2024 16:20:32 +0800 Subject: [PATCH] # --- pages/basics/pakin.vue | 723 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 583 insertions(+), 140 deletions(-) diff --git a/pages/basics/pakin.vue b/pages/basics/pakin.vue index 386c623..7516a21 100644 --- a/pages/basics/pakin.vue +++ b/pages/basics/pakin.vue @@ -1,116 +1,545 @@ <template> - <view> - <scroll-view scroll-y> - <view class="pak-seach-box"> - <view class="box-top"> - <view class="color-block-blue"></view> - <text class="title">鎵樼洏鏉$爜</text> + <view > + <scroll-view scroll-y catch:touchmove="touchmove"> + <view class="square-2"> + <view class="square-title"> + <view class="title-sign"><view class="sign"></view></view> + <view class="title-text"><text>鎵樼洏鏉$爜</text></view> </view> - <view class="box-buttom"> - <input type="text" placeholder="鎵爜 / 杈撳叆"> - </view> - </view> - <view class="pak-seach-box"> - <view class="box-top"> - <view class="color-block-blue"></view> - <text class="title">妫�绱㈠晢鍝�</text> - </view> - <view class="box-buttom"> - <input type="text" placeholder="鎵爜 / 杈撳叆"> - <button class="cu-btn bg-blue">+鎻愬彇</button> - </view> - </view> - <view class="pak-seach-box"> - <view class="box-top"> - <view class="color-block-blue"></view> - <text class="title">鍟嗗搧鍒楄〃</text> - </view> - </view> - <view class="pak-data-box"> - - </view> - </scroll-view> - <view class="footer flex justify-around"> - <view> - <button class="cu-btn">閲嶇疆</button> - </view> - <view> - <button class="cu-btn pakin-btn bg-blue">缁勬墭</button> - </view> - <view> - <button class="cu-btn bg-blue" @click="eject()"><text class="button-text">灞呬腑</text></button> - </view> - </view> - <!-- 寮瑰嚭灞� --> - <view> - <!-- 鍟嗗搧妫�绱㈠脊绐� --> - <view class="shade" :class="'shade-' + display"> - <view class="goodsSearch"> - <view class="head"> - <view class="color-block-blue"></view> - <view class="head-title">鎻愬彇鍟嗗搧</view> - <view class="head-icon"> - <uni-icons type="closeempty" size="25" @click="eject()"></uni-icons> - </view> - </view> - <view class="container"> - <view> - <text>鍟嗗搧缂栫爜</text> - </view> - <view> - <text>鍟嗗搧鍚嶇О</text> - </view> - <view> - <text>瑙勬牸</text> - </view> - <view> - <text>鎵瑰彿</text> - </view> - <view> - 鏁伴噺 - </view> - <view class="foot flex justify-center"> - <label for=""> - <button class="cu-btn bg-blue">鎻愬彇</button> - </label> - </view> + <view class="square-content"> + <view class="content-input"> + <input v-model="barcode" type="text" placeholder="鎵爜 / 杈撳叆" + :focus="barcodeFocus" @input="barcodeInput()" placeholder-style="line-height: 85rpx;"> + <uni-icons type="closeempty" size="20" color="#dadada" @click="removeBarcode()"></uni-icons> </view> </view> </view> + + <view class="square-2"> + <view class="square-title"> + <view class="title-sign"><view class="sign"></view></view> + <view class="title-text"><text>妫�绱㈠晢鍝�</text></view> + </view> + <view class="square-content"> + <view class="content-input-btn"> + <input v-model="matnr" type="text" placeholder="鎵爜 / 杈撳叆" @input="findMat()" + :focus="focus" placeholder-style="line-height: 85rpx;"> + <uni-icons type="closeempty" size="20" color="#dadada" @click="removeMatnr()"></uni-icons> + </view> + <view class="content-btn"> + <button class="cu-btn bg-blue pda-btn" @click="selectMat()">+鎻愬彇</button> + </view> + </view> + </view> + <view class="square-1"> + <view class="square-title"> + <view class="title-sign"><view class="sign"></view></view> + <view class="title-text"><text>鏄惁鍖呰</text></view> + <radio-group @change="isFrozen"> + <label> + <radio :checked="ck1" style="margin-left: 100rpx;"/><text>鏄�</text> + </label> + <label> + <radio :checked="ck2" style="margin-left: 50rpx;"/><text>鍚�</text> + </label> + </radio-group> + </view> + </view> + + <view class="square-1"> + <view class="square-title"> + <view class="title-sign"><view class="sign"></view></view> + <view class="title-text"><text>鍟嗗搧鍒楄〃</text></view> + </view> + </view> + + <view class="square-none" v-show="matList.length === 0"> + <view class="v-show">鏆傛棤鏇村鏁版嵁...</view> + </view> + + <checkbox-group @change="checkbox"> + <view v-for="(item,index) in matList" :key="index" class="data-list bg-false" :class="'bg-'+item.checked" > + <view class="data-list-left"> + <view class="matnr"><text style="width: 400rpx;">缂栫爜锛歿{item.matnr}}</text></view> + <view><text style="width: 400rpx;">鍝佸悕锛歿{item.maktx}}</text></view> + <view><text style="width: 400rpx;">瑙勬牸锛歿{item.specs}}</text></view> + <view><text style="width: 400rpx;">鎵瑰彿锛歿{item.batch}}</text></view> + <view> + <text style="width: 400rpx;">澶囨敞锛歿{item.memo}}</text> + <text style="width: 400rpx;margin-left: 100rpx">鏁伴噺锛歿{item.anfme}}</text> + </view> + </view> + <view class="data-list-right"> + <label><uni-icons type="compose" size="20" color="#a5a5a5" @click="revise(item,index)"></uni-icons></label> + <label><uni-icons type="trash" size="25" color="#a5a5a5" @click="remove(item,index)"></uni-icons></label> + </view> + </view> + </checkbox-group> + </scroll-view> + + + <!-- 搴曢儴鎸夐挳 --> + <view class="footer flex justify-around"> + + <label class="label-btn" style="width: 150rpx;"> + <button class="cu-btn" @click="resst()">閲嶇疆</button> + </label> + <label class="label-btn"> + <button class="cu-btn bg-blue " @click="comb()">缁勬墭</button> + </label> </view> + <!-- 寮圭獥 --> + <!-- 淇敼鏁伴噺 --> + <uni-popup ref="revise" > + <view class="revise-box "> + <view class="revise-box-top"> + <view class="color-block-blue"></view> + <text class="title">淇敼</text> + </view> + <view class="" style="position: relative;left: 50px;margin-bottom: 20px;"> + <text style="display: inline-block;float: left;width: 50px;">鎵瑰彿锛�</text> + <input type="text" style="width: 100px;border-bottom: 1px solid #9e9e9e;" v-model="batch"> + </view> + <view class="" style="position: relative;left: 50px;margin-bottom: 20px;"> + <text style="display: inline-block;float: left;width: 50px;">澶囨敞锛�</text> + <input type="text" style="width: 100px;border-bottom: 1px solid #9e9e9e;" v-model="memo"> + </view> + <view class="changeBox"> + <view class="num-box"> + <text style="display: inline-block;float: left;width: 50px;">鏁伴噺锛�</text> + <uni-number-box :value="count" :max="9999999" color="#747474" @change="changeValue"/> + </view> + </view> + <view class="revise-box-buttom"> + <view> + <button class="cu-btn bg-blue" @click="confirm()">纭</button> + </view> + </view> + </view> + </uni-popup> </view> </template> <script> + import permision from "@/common/permission.js" + import loginVue from "../login/login.vue"; export default { data() { return { + commonUrl:null, + barcode: '', + barcodeFocus:true, + focus:false, type: 'center', - display: 'show' + searchBox: 'hide', + pick:'hide', + matnr:'', + matList:[], + result: '', + enableQty:'', + count:'', + minCount:0, + maxCount:'', + rowNum:'', + check:false, + checkText:'鍏ㄩ��', + checkedData:[], + batch:'', + memo: '', + ck1: true, + ck2: false, + frozen: 1, } }, + onShow() { + setTimeout(()=>{ + // this.focuss() + }, 100); + + }, + mounted(){ + const UIP = uni.getStorageSync('UIP'); + this.baseIP = UIP; + const UPORT = uni.getStorageSync('UPORT'); + this.basePORT = UPORT + const PROJ = uni.getStorageSync('UPROJ'); + this.baseUrl = PROJ + this.getUrl() + }, methods: { - eject() { - if (this.display == 'show') { - this.display = 'hide' + // 鍖呰 + isFrozen() { + var temp = this.ck1 + this.ck1 = this.ck2 + this.ck2 = temp + this.frozen = this.ck1 + if (this.frozen == true) { + this.frozen = 1 } else { - this.display = 'show' + this.frozen = 0 + } + console.log(this.frozen); + }, + // 鑾峰彇url + getUrl() { + this.commonUrl = this.baseHttp + this.baseIP + ':' +this.basePORT + "/" +this.baseUrl + }, + // barcode input 浜嬩欢 + barcodeInput() { + // 涓嶈缃畾鏃跺櫒 浼氬嚭鐜版壂鍏ョ殑瀛楃涓蹭笉鍏� + setTimeout(()=>{ + var len = this.barcode.length + if (len != 8) { + uni.showToast({title: '鎵樼洏鐮�'+this.barcode+'鏈夎璇烽噸璇�', icon: "none", position: 'top'}); + this.barcodeFocuss() + return; + } + this.focuss() + },200) + }, + // 鎵樼洏鐮佹湁璇噸缃� + barcodeFocuss() { + let that = this; + that.barcodeFocus = false; + setTimeout(()=>{ + that.barcode = ''; + that.barcodeFocus = true; + }, 100); + }, + // 鍟嗗搧鍏夋爣娓呯┖閲嶇疆 + focuss() { + // #ifdef APP + let that = this; + that.focus = false; + setTimeout(()=>{ + that.matnr = ''; + that.focus = true; + }, 100); + // #endif + }, + resst() { + this.matList = [] + this.barcode = '' + this.matnr = '' + this.barcodeFocuss() + uni.vibrateShort(); + }, + removeBarcode() { + this.barcode = '' + uni.vibrateShort(); + this.barcodeFocus = false; + this.$nextTick(function() { + this.barcodeFocus = true; + }); + }, + removeMatnr() { + this.matnr = '' + uni.vibrateShort(); + this.focus = false; + this.$nextTick(function() { + this.focus = true; + }); + }, + // 鍒楄〃鍒犻櫎鎸夐挳 + remove(item,index) { + this.matList.splice(index,1) + uni.vibrateShort(); + }, + comb() { + uni.vibrateShort(); + let that = this; + if (that.barcode === '') { + uni.showToast({title: '璇锋壂鎻忔墭鐩樻潯鐮�', icon: "none", position: 'top'}); + return; + } + if (that.matList.length === 0) { + uni.showToast({title: '璇锋坊鍔犲晢鍝佸垪琛�', icon: "none", position: 'top'}); + return; + } + for (var i = 0; i < that.matList.length; i++) { + if (that.matList[i].anfme == 0 || that.matList[i].anfme == '') { + uni.showToast({title: that.matList[i].matnr + '缁勬墭鏁伴噺涓嶈兘涓�0', icon: "none", position: 'top'}); + return; + } + } + for (var j = 0; j < that.matList.length; j++) { + that.matList[j].beBatch = that.frozen + } + uni.showLoading(); + uni.request({ + url: that.commonUrl + '/mobile/comb/auth', + data: JSON.stringify({ + barcode: that.barcode, + combMats: that.matList + }), + method: 'POST', + header: { + 'token':uni.getStorageSync('token') + }, + success(result) { + uni.hideLoading(); + var res = result.data + if (res.code === 200) { + const innerAudioContext = uni.createInnerAudioContext(); + innerAudioContext.src = '/static/music/pakinOk.mp3'; + innerAudioContext.play() + that.resst(); + uni.showToast({ + title: res.msg, + position: 'bottom', + duration: 1000 + }); + } else if (res.code == 403) { + uni.showToast({title: res.msg, icon: "none", position: 'top'}) + setTimeout(() => { + uni.reLaunch({ + url: '../login/login' + }); + }, 1000); + } else { + uni.showToast({title: res.msg, icon: "none",position: 'top'}) + } + } + }); + }, + selectMat() { + let that = this + uni.vibrateShort(); + uni.navigateTo({ + url: "matSelect", + events: { + // 涓烘寚瀹氫簨浠舵坊鍔犱竴涓洃鍚櫒锛岃幏鍙栬鎵撳紑椤甸潰浼犻�佸埌褰撳墠椤甸潰鐨勬暟鎹� 鍙﹀涓�涓〉闈紶杩囨潵鐨� + acceptDataFromOpenedPage: function(data) { + that.matnr = data.data + that.findMat(that.matnr) + }, + }, + success: function(res) { + // 閫氳繃eventChannel鍚戣鎵撳紑椤甸潰浼犻�佹暟鎹� 鍚戝彟澶栦竴涓〉闈紶閫掑�肩殑 + res.eventChannel.emit('commonUrl', {commonUrl:that.commonUrl }) + }, + + }); + that.matnr = '' + }, + findMat() { + let that = this + let len = that.matnr.length + let bat = '' + let re = /\s+/g + that.matnr = that.matnr.replace(/\s+/g,'') + if (len == 26 || len == 25 || len == 27 || len == 28) { + bat = that.matnr.substring(18,22) + that.matnr = that.matnr.substring(3,17) + } + for (var i = 0; i < that.matList.length; i++) { + if (that.matnr == that.matList[i].matnr) { + uni.showToast({title: that.matnr + "褰撳墠鐗╂枡鎻愬彇锛岃鍕块噸澶嶆壂鎻�!", icon: "none",position: 'top'}) + setTimeout(()=>{ + that.matnr = ''; + that.focus = true; + }, 100); + return; + } + } + uni.request({ + url: that.commonUrl + '/mat/auth', + data: { + matnr:that.matnr + }, + header: { + 'token':uni.getStorageSync('token') + }, + success(result) { + uni.vibrateShort(); + let res = result.data + if (res.code === 200 && res.data) { + that.matData = res.data + that.matnr = '' + that.matData['batch'] = bat + uni.navigateTo({ + url: "matQuery", + events: { + // 涓烘寚瀹氫簨浠舵坊鍔犱竴涓洃鍚櫒锛岃幏鍙栬鎵撳紑椤甸潰浼犻�佸埌褰撳墠椤甸潰鐨勬暟鎹� + matList: function(data) { + that.checkMat(data.data) + // that.matList.push(data.data) + }, + }, + success: function(res) { + // 閫氳繃eventChannel鍚戣鎵撳紑椤甸潰浼犻�佹暟鎹� + res.eventChannel.emit('matData', { data: that.matData }) + }, + }); + } else if (res.code == 403) { + uni.showToast({title: res.msg, icon: "none", position: 'top'}) + setTimeout(() => { + uni.reLaunch({ + url: '../login/login' + }); + }, 1000); + } else { + // setTimeout(()=>{ + // that.matnr = ''; + // that.focus = true; + // }, 100); + // uni.showToast({title: res.msg, icon: "none",position: 'top'}) + } + + } + }); + }, + + // 娣诲姞鍟嗗搧 + addMat(mat) { + this.matList.unshift(mat) + }, + checkMat(mat) { + var len = this.matList.length + var add = true + var date = new Date() + var today = date.getFullYear() + '/' + (date.getMonth()+1) + '/' + date.getDate() + for (var i = 0; i < len; i++) { + if (mat.matnr == this.matList[i].matnr) { + uni.showToast({title: mat.matnr + "褰撳墠鐗╂枡鎻愬彇锛岃鍕块噸澶嶆壂鎻�!", icon: "none",position: 'top'}) + // this.matList[i].anfme += mat.anfme + this.$forceUpdate() // 寮哄埗鍒锋柊 + add = false + } + } + if (add) { + if(mat.batch === '' || mat.batch === null) { + // mat.batch = today + } + this.matList.unshift(mat) } }, change(e) { - console.log('褰撳墠妯″紡锛�' + e.type + ',鐘舵�侊細' + e.show); }, toggle(type) { this.type = type // open 鏂规硶浼犲叆鍙傛暟 绛夊悓鍦� uni-popup 缁勪欢涓婄粦瀹� type灞炴�� this.$refs.goodsSearch.open(type) }, + checkbox: function (e) { + var items = this.matList, + values = e.detail.value; + for (var i = 0, lenI = items.length; i < lenI; ++i) { + const item = items[i] + item.id = item.id + '' + if(values.indexOf(item.id) >= 0){ + this.$set(item,'checked',true) + }else{ + this.$set(item,'checked',false) + } + } + if (values.length == items.length) { + this.check = true + this.checkText = "鍙栨秷鍏ㄩ��" + } else { + this.check = false + this.checkText = "鍏ㄩ��" + } + uni.vibrateShort(); + }, + revise(item,index) { + this.count = this.matList[index].anfme + this.batch = this.matList[index].batch + this.memo = this.matList[index].memo + this.cstmr = this.matList[index].cstmr + this.rowNum = index + this.eject() + }, + eject(type) { + this.type = type + // open 鏂规硶浼犲叆鍙傛暟 绛夊悓鍦� uni-popup 缁勪欢涓婄粦瀹� type灞炴�� + this.$refs.revise.open(type) + }, + changeValue(value) { + this.count = value + }, + confirm() { + this.matList[this.rowNum].anfme = this.count + this.matList[this.rowNum].batch = this.batch + this.matList[this.rowNum].memo = this.memo + this.matList[this.rowNum].cstmr = this.cstmr + this.$refs.revise.close() + this.$forceUpdate() // 寮哄埗鍒锋柊 + }, + // 鍒楄〃鍙嶉�� + reChecked() { + if (this.matList.length == 0) { + return; + } + var checkArr = [] + for (var i = 0; i < this.matList.length;i++) { + if (this.matList[i].checked == true) { + this.$set(this.matList[i],'checked',false) + }else{ + this.$set(this.matList[i],'checked',true) + } + if (this.matList[i].checked == true) { + checkArr.push(this.matList[i].checked) + } + } + if (checkArr.length == this.matList.length) { + this.check = true + this.checkText = "鍙栨秷鍏ㄩ��" + } else { + this.check = false + this.checkText = "鍏ㄩ��" + } + uni.vibrateShort(); + }, + // 鍒楄〃鍏ㄩ�� + allChecked(e){ + + if (this.check == true) { + for (var i = 0; i < this.matList.length;i++) { + this.$set(this.matList[i],'checked',false) + } + this.check = false + this.checkText = "鍏ㄩ��" + } else { + for (var i = 0; i < this.matList.length;i++) { + this.$set(this.matList[i],'checked',true) + } + this.check = true + this.checkText = "鍙栨秷鍏ㄩ��" + } + uni.vibrateShort(); + }, } } </script> <style> + /* @import "../../colorui/main.css"; + @import "../../colorui/icon.css"; */ + .revise-box { + position: relative; + width: 500rpx; + height: 500rpx; + border-radius: 25px; + background-color: #fff; + border-radius: 20rpx; + } + .revise-box-top { + width: 400rpx; + height: 120rpx; + border-radius: 25px; + } + .changeBox { + width: 400rpx; + height: 100rpx; + } + .num-box { + margin-left: 100rpx; + } + .revise-box-buttom{ + margin-left: 190rpx; + } .pak-seach-box { background-color: #FFFFFF; margin: 15rpx 15rpx 0rpx 15rpx; @@ -143,11 +572,26 @@ margin-top: 10rpx; } .box-buttom { - display: block; - width: 720rpx; - height: 80rpx; + display: inline-block; + background-color: #ededed; + width: 65%; + height: 60rpx; + border-radius: 20rpx; + margin: 15rpx 15rpx 0rpx 15rpx; } - .pak-seach-box input { + .box-buttom input { + width: 75%; + float: left; + margin: 8rpx 10rpx 0rpx 25rpx; + } + .box-buttom .search-icon{ + width: 60rpx; + height: 60rpx; + float: right; + margin-top: 5rpx; + margin-right: 10rpx; + } + /* .pak-seach-box input { background-color: #ededed; border: 1rpx solid #d8d8d8; display: inline-block; @@ -158,13 +602,13 @@ line-height: 60rpx; margin: 15rpx 15rpx 0rpx 15rpx; padding-left: 20rpx; - } + } */ .pak-seach-box button { background-color: #1E9FFF; color: #ffffff; display: inline-block; float: right; - width: 150rpx; + width: 180rpx; height: 60rpx; margin: 15rpx 15rpx 0rpx 15rpx; line-height: 60rpx; @@ -172,70 +616,69 @@ .pakin-btn { background-color: #1E9FFF; } - /* 閬僵灞� */ - .shade-show { - display: block; + .pak-data-box { + background-color: #F1F1F1; + margin: 15rpx 15rpx 0rpx 15rpx; + width: 96%; + height: 70rpx; + border-radius: 20rpx; } - .shade-hide { - display: none; - } - .shade { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0,0,0,0.6); - z-index: 90; - } - .goodsSearch { + .pak-data-box .box-top { background-color: #FFFFFF; - display: block; - position: fixed; - top: 5%; - left: 20rpx; - width: 720rpx; - height: 90%; - border-radius: 21rpx; - z-index: 100; + height: 70rpx; + border-radius: 20rpx 20rpx 20rpx 20rpx; } - .head { + .bg-false { background-color: #FFFFFF; - width: 100%; - height: 8%; - border-radius: 20rpx 20rpx 0 0 ; } - .head .color-block-blue { - margin: 36rpx 5rpx 0 30rpx; + .bg-true { + background-color: #ebebeb; } - .head-title { + .data-list { + border-bottom: 1px solid #d8d8d8; + height: 220rpx; + margin: 15rpx; + border-radius: 20rpx; + } + .data-list:first-child { + margin-top: 20rpx; + } + .data-list:last-child { + margin-bottom: 180rpx; + } + /* .data-list-left { display: inline-block; float: left; - font-size: 40rpx; - margin-top: 25rpx; - margin-left: 20rpx; + text-align: center; + width: 100rpx; + height: 180rpx; + line-height: 180rpx; + } */ + .data-list-left { + display: inline-block; + float: left; + margin-left: 6%; + height: 180rpx; + color: #676767; } - .head-icon { + .matnr { + padding-top: 10rpx; + } + .data-list-right { display: inline-block; float: right; - margin-top: 25rpx; - margin-right: 20rpx; + height: 220rpx; + line-height: 220rpx; } - .container { - width: 100%; - height: 92%; - background-color: #F1F1F1; - border-radius: 0 0 20rpx 20rpx; + /* display: inline-block; + float: right; + width: 200rpx; + height: 180rpx; + line-height: 180rpx; */ + .data-list-right label { + display: inline-block; + float: left; + width: 80rpx; + height: 180rpx; } - .foot { - width: 95.7%; - height: 100rpx; - line-height: 100rpx; - background-color: #FFF; - position: fixed; - bottom: 5%; - border-top: 1px solid #d8d8d8; - border-radius: 0 0 20rpx 20rpx ; - z-index: 1; - } -</style> +</style> \ No newline at end of file -- Gitblit v1.9.1