From 722736f9a56cf64b615e37ed1722dd430ad90d2d Mon Sep 17 00:00:00 2001 From: whycq <123456> Date: 星期三, 26 十月 2022 08:48:31 +0800 Subject: [PATCH] # --- pages/basics/pakin.vue | 739 ++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 476 insertions(+), 263 deletions(-) diff --git a/pages/basics/pakin.vue b/pages/basics/pakin.vue index d72bd8c..c79978c 100644 --- a/pages/basics/pakin.vue +++ b/pages/basics/pakin.vue @@ -1,172 +1,338 @@ <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" @click="pickEject()">+鎻愬彇</button> - </view> - </view> - <view class="pak-data-box"> - <view class="box-top"> - <view class="color-block-blue"></view> - <text class="title">鍟嗗搧鍒楄〃</text> - </view> - - </view> - <checkbox-group @change="checkbox"> - <label v-for="(item,index) in data" :key="index" class="data-list bg-false" :class="'bg-'+item.checked" > - <view class="data-list-left"> - <checkbox :value="item.id+''" :checked="item.checked" style="display: block;" /> - </view> - <view class="data-list-right"> - <view><text style="width: 400rpx;">缂栫爜锛歿{item.matnr}}</text></view> - <view><text style="width: 400rpx;">鍝佸悕锛歿{item.maktx}}</text></view> - <view><text style="width: 400rpx;">鎵瑰彿锛歿{item.anfme}}</text></view> - </view> - </label> - </checkbox-group> - </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="searchEject()"><text class="button-text">灞呬腑</text></button> - </view> - </view> - <!-- 寮瑰嚭灞� --> - <view> - <!-- 鍟嗗搧妫�绱㈠脊绐� --> - <view class="search-box" :class="'search-box-' + searchBox"> - <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="searchEject()"></uni-icons> - </view> - </view> - <view class="container"> - <view class="text-box"> - <view><text>鍟嗗搧缂栫爜</text></view> - <view><text>1111</text></view> - </view> - <view class="text-box"> - <view><text>鍟嗗搧鍚嶇О</text></view> - <view></view> - </view> - <view class="text-box"> - <view><text>瑙勬牸</text></view> - <view></view> - </view> - <view class="text-box"> - <view><text>鎵瑰彿</text></view> - <view></view> - </view> - <view class="text-box"> - <view><text>鏁伴噺</text></view> - <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="鎵爜 / 杈撳叆" placeholder-style="margin-top:10px" maxlength="10" + :focus="barcodeFocus" @confirm="barcodeInput()"> + <uni-icons type="closeempty" size="20" color="#dadada" @click="removeBarcode()"></uni-icons> </view> </view> </view> - </view> - <view> - <!-- 鎻愬彇寮圭獥 --> - <view class="pick-box" :class="'pick-box-' + pick"> - <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="pickEject()"></uni-icons> + + <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"> + <input v-model="matnr" type="text" placeholder="鎵爜 / 杈撳叆" @input="findMat()" + :focus="focus" placeholder-style="margin-top:9px"> + <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> + <!-- <label v-show="matList.length != 0" style="float: right;margin-right: 20px;margin-top: 13px;"><uni-icons type="trash" size="25" color="#a5a5a5" @click="remove()"></uni-icons></label> --> + </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> + <checkbox :value="item.id+''" :checked="item.checked" style="display: block;" /> + </view> --> + <view class="matnr"><text style="width: 400rpx;">缂栫爜锛歿{item.matNo}}</text></view> + <view><text style="width: 400rpx;">鍝佸悕锛歿{item.matName}}</text></view> + <view><text style="width: 400rpx;">瑙勬牸锛歿{item.str2}}</text></view> + <view> + <text style="width: 400rpx;">鏁伴噺锛歿{item.count}}</text> </view> </view> - <view class="container"> - <view class="text-box"> - <view><text>鍟嗗搧缂栫爜</text></view> - <view><text>6666</text></view> - </view> - <view class="text-box"> - <view><text>鍟嗗搧鍚嶇О</text></view> - <view></view> - </view> - <view class="text-box"> - <view><text>瑙勬牸</text></view> - <view></view> - </view> - <view class="text-box"> - <view><text>鎵瑰彿</text></view> - <view></view> - </view> - <view class="text-box"> - <view><text>鏁伴噺</text></view> - <view></view> - </view> - - <view class="foot flex justify-center"> - <label for=""> - <button class="cu-btn bg-blue">鎻愬彇</button> - </label> - </view> + <view class="data-list-right"> + <label><uni-icons type="compose" size="20" color="#a5a5a5" @click="revise(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: 170rpx;"> + <checkbox :checked="check" @click="allChecked()">{{checkText}}</checkbox> + </label> + <label class="label-btn" style="width: 100rpx;"> + <text @click="reChecked()">鍙嶉��</text> + </label> --> + + <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" background-color="#fff"> + <view class="revise-box"> + <view class="revise-box-top"> + <view class="color-block-blue"></view> + <text class="title">缁勬墭鏁伴噺</text> + </view> + <view class="text-box"> + <text>纭缁勬墭鏁伴噺</text> + </view> + <view class="changeBox"> + <view class="num-box"> + <uni-number-box :value="count" :max="999999999" color="#747474" @change="changeValue" /> + </view> + </view> + <view class="revise-box-buttom"> + <view> + <button class="cu-btn bg-blue" @click="confirm()">纭</button> </view> </view> </view> - </view> + </uni-popup> </view> </template> <script> + import permision from "@/common/permission.js" export default { data() { return { + barcode: '', + barcodeFocus:true, + focus:false, type: 'center', searchBox: 'hide', pick:'hide', - data:[ - {matnr:'123456',anfme:'1',maktx:'鏄剧ず鍣�',inQty:'2022鎵�',id:21} - ] + matnr:'', + matList:[], + result: '', + enableQty:'', + count:'', + counts:'', + minCount:0, + maxCount:'', + rowNum:'', + check:false, + checkText:'鍏ㄩ��', + checkedData:[], } }, + onShow() { + setTimeout(()=>{ + // this.focuss() + }, 100); + + }, + mounted(){ + const UIP = uni.getStorageSync('UIP'); + this.baseIP = UIP; + const UPORT = uni.getStorageSync('UPORT'); + this.basePORT = UPORT + }, methods: { - searchEject() { - if (this.searchBox == 'show') { - this.searchBox = 'hide' - } else { - this.searchBox = 'show' - } + // barcode input 浜嬩欢 + barcodeInput() { + // 涓嶈缃畾鏃跺櫒 浼氬嚭鐜版壂鍏ョ殑瀛楃涓蹭笉鍏� + setTimeout(()=>{ + var len = this.barcode.length + if (len != 8) { + uni.showToast({title: '鎵樼洏鐮佹湁璇閲嶈瘯', icon: "none", position: 'top'}); + this.barcodeFocuss() + return; + } + if (len == 8) { + this.focuss() + } + },100) + + }, + // 鎵樼洏鐮佹湁璇噸缃� + barcodeFocuss() { + // #ifdef APP + let that = this; + that.barcodeFocus = false; + setTimeout(()=>{ + that.barcode = ''; + that.barcodeFocus = true; + }, 100); + // #endif + }, + // 鍟嗗搧鍏夋爣娓呯┖閲嶇疆 + focuss() { + // #ifdef APP + let that = this; + that.focus = false; + setTimeout(()=>{ + that.matnr = ''; + that.focus = true; + }, 100); + // #endif + }, + resst() { + this.matList = [] + this.barcode = '' + this.barcodeFocuss() uni.vibrateShort(); }, - pickEject() { - if (this.pick == 'show') { - this.pick = 'hide' - } else { - this.pick = 'show' - } + 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) + this.checkList(); + 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; + } + uni.showLoading(); + uni.request({ + url: that.baseHttp + that.baseIP + ':' +that.basePORT + that.baseUrl + '/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) { + 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('matData', {baseIP:that.baseIP, basePORT:that.basePORT }) + }, + + }); + that.matnr = '' + }, + findMat() { + let that = this + uni.request({ + url: that.baseHttp + that.baseIP + ':' +that.basePORT + that.baseUrl + '/matCode/auth', + data: { + id: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 = '' + 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 }) + }, + }); + } + + } + }); + + }, + // 娣诲姞鍟嗗搧 + addMat(mat) { + this.matList.unshift(mat) + }, + checkMat(mat) { + var len = this.matList.length + var add = true + for (var i = 0; i < len; i++) { + if (mat.matNo === this.matList[i].matNo) { + this.matList[i].count += mat.count + this.$forceUpdate() // 寮哄埗鍒锋柊 + add = false + } + } + if (add) { + this.matList.unshift(mat) + } }, change(e) { console.log('褰撳墠妯″紡锛�' + e.type + ',鐘舵�侊細' + e.show); @@ -177,18 +343,61 @@ this.$refs.goodsSearch.open(type) }, checkbox: function (e) { - var items = this.data, - 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) + // 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(index) { + this.rowNum = index + this.count = this.matList[this.rowNum].count + this.$refs.revise.open() + + }, + changeCount(e) { + + }, + changeValue(value) { + this.count = value + }, + // 纭缁勬墭鏁伴噺 + confirm() { + this.matList[this.rowNum].count = this.count + 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(item,'checked',false) + this.$set(this.matList[i],'checked',true) + } + if (this.matList[i].checked == true) { + checkArr.push(this.matList[i].checked) } } - if (values.length == items.length) { + if (checkArr.length == this.matList.length) { this.check = true this.checkText = "鍙栨秷鍏ㄩ��" } else { @@ -197,11 +406,40 @@ } 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(); + }, + // 妫�楠屽垪琛ㄩ暱搴� 绛変簬0 鏄剧ず鍏ㄩ�� + checkList() { + if (this.matList.length == 0) { + this.check = false + this.checkText = "鍏ㄩ��" + return; + } + } } } </script> <style> + /* @import "../../colorui/main.css"; + @import "../../colorui/icon.css"; */ + .pak-seach-box { background-color: #FFFFFF; margin: 15rpx 15rpx 0rpx 15rpx; @@ -234,11 +472,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; @@ -249,13 +502,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; @@ -267,7 +520,7 @@ background-color: #F1F1F1; margin: 15rpx 15rpx 0rpx 15rpx; width: 96%; - height: 800rpx; + height: 70rpx; border-radius: 20rpx; } .pak-data-box .box-top { @@ -286,133 +539,93 @@ height: 180rpx; margin: 15rpx; border-radius: 20rpx; + font-size: 12px; } .data-list:first-child { - margin-top: 120rpx; + margin-top: 20rpx; } .data-list:last-child { - margin-bottom: 120rpx; + margin-bottom: 170rpx; } - .data-list-left { + /* .data-list-left { display: inline-block; float: left; 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; + } + .matnr { + padding-top: 10rpx; } .data-list-right { display: inline-block; - float: left; + float: right; height: 180rpx; - color: #828282; + line-height: 180rpx; } - /* 閬僵灞� */ - .search-box-show { - display: block; + /* 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; } - .search-box-hide { - display: none; + .revise-box { + width: 500rpx; + height: 500rpx; } - .pick-box-show { - display: block; - } - .pick-box-hide { - display: none; - } - .pick-box { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0,0,0,0.6); - z-index: 90; - } - .search-box { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0,0,0,0.6); - z-index: 90; - } - .goodsSearch { - background-color: #FFFFFF; - display: block; - position: absolute; - top: 10%; - left: 20rpx; - width: 720rpx; - height: 80%; - border-radius: 21rpx; - z-index: 100; - } - .head { - background-color: #FFFFFF; - position: relative; + .revise-box-top { width: 100%; height: 100rpx; - border-radius: 20rpx 20rpx 0 0 ; + background-color: #fff; + padding: 10rpx; } - .head .color-block-blue { - margin: 36rpx 5rpx 0 30rpx; - } - .head-title { - display: inline-block; - float: left; - font-size: 40rpx; - font-weight: 700; - margin-top: 25rpx; - margin-left: 20rpx; - } - .head-icon { - display: inline-block; - float: right; - margin-top: 25rpx; - margin-right: 20rpx; - } - .container { + .changeBox { width: 100%; - height: 92%; + height: 100rpx; + line-height: 120rpx; + text-align: center; + background-color: #FFF; + margin-top: 20rpx; + border-bottom: 1px solid #e3e3e3; + } + .text-box { + width: 100%; + height: 100rpx; + line-height: 120rpx; + text-align: center; + /* padding-left: 120rpx; */ + background-color: #FFF; + margin-top: 20rpx; + border-bottom: 1px solid #e3e3e3; + } + .changeBox .num-box { + display: inline-block; + /* float: left; */ + } + .changeBox button { + float: left; + } + .revise-box-buttom { position: absolute; - background-color: #F1F1F1; - border-radius: 0 0 20rpx 20rpx; + width: 100%; + height: 100rpx; + line-height: 100rpx; + background-color: #FFFFFF; + bottom: 0; + text-align: center; } - .text-box { - background-color: #FFFFFF; - position: ; - height: 100rpx; - line-height: 100rpx; - margin-left: 2%; - margin-top: 20rpx; - width: 96%; - border-radius: 20rpx; - } - .text-box:first-child { - margin-top: 20rpx; - } - .text-box view{ - text-align: end; - display: inline-block; - width: 288rpx; - padding-right: 20rpx; - } - .text-box view:last-child { - text-align: start; - padding-left: 20rpx; - } - .foot { - width: 95.7%; - height: 100rpx; - line-height: 100rpx; - background-color: rgba(255,255,255,1); - position: fixed; - bottom: 7.2%; - 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