skyouc
2025-07-05 e97cbb592d9165b808a76f654fa0a467817ddedf
pages/outbound/wavePickItem.vue
New file
@@ -0,0 +1,278 @@
<template>
   <view class="has-foot">
      <form>
         <!-- <view class="cu-form-group" v-show="!isconfirm">
            <view class="title">波次号</view>
            <text class="text-black ">{{wave.code}}</text>
         </view> -->
         <view class="cu-form-group" v-show="!isconfirm">
            <view class="title">容器号</view>
            <input placeholder="请扫描容器号" v-model="barcode"  focus></input>
            <text class='cuIcon-close text-gray margin-right-xs' v-show="barcode!==''" @click="clearCode"></text>
            <text class='cuIcon-search text-blue' @click="search"></text>
         </view>
      </form>
      <view class="cu-list det menu sm-border  padding">
         <block  v-for="(item, index) in list">
            <view  class="cu-list det menu  ">
            <view class="cu-bar bg-white solid-bottom margin-top-sm">
               <view class="action">
                  <view class="index">
                     {{index+1}}
                  </view>
               </view>
               <view class="content2">
                  <text class="text-gray"><text class="text-black ">{{item.exceStatus$}}</text></text>
               </view>
            </view>
            <view class="cu-item">
               <view class="content">
                  <text class="text-gray">物料编码:<text class="text-black ">{{item.taskItem.matnrCode}}</text></text>
               </view>
            </view>
            <view class="cu-item">
               <view class="content">
                  <text class="text-gray">物料名称:<text class="text-black ">{{item.taskItem.maktx}}</text></text>
               </view>
            </view>
            <view class="cu-item">
               <view class="content">
                  <text class="text-gray">总数量:<text class="text-black ">{{item.taskItem.anfme}}</text></text>
               </view>
            </view>
            </view>
            <view  class="cu-list det menu noMargin " v-for="(item2,index2) in item.asnOrderItems">
               <view class="cu-item">
                  <view class="content">
                     <text class="text-gray">{{index2+1}}.</text>
                  </view>
               </view>
               <view class="cu-item">
                  <view class="content">
                     <text class="text-gray">订单号:<text class="text-black ">{{item2.asnCode}}</text></text>
                  </view>
               </view>
               <view class="cu-item">
                  <view class="content">
                     <text class="text-gray">需求数量:<text class="text-black ">{{item2.anfme}}</text></text>
                  </view>
               </view>
               <view class="cu-item">
                  <view class="content">
                     <text class="text-gray">已拣数量:<text class="text-black ">{{item2.qty}}</text></text>
                  </view>
               </view>
               <view class="cu-item" v-show="item2.anfme !== item2.qty">
                  <view class="content">
                     <view class="cu-form-group padding-lr-0">
                        <view class="title text-blue"><text
                              class="text-red text-xl vertical-middle">*</text>拣:</view>
                        <uni-number-box style="width: 70%;" :max="max" v-model="item2.demandQty"
                           :step='1' ></uni-number-box>
                     </view>
                  </view>
               </view>
            </view>
            <view class="cu-item">
               <view class="content">
                  <text class="text-gray">本次拣货数量:<text class="text-black ">{{item.asnOrderItems.reduce((total, item) => total + (Number(item.demandQty) ||0 ) , 0)}}</text></text>
               </view>
            </view>
         </block>
      </view>
      <view class="cu-bar btn-group foot" v-show="!isconfirm">
         <button class="cu-btn text-blue line-blue shadow" @click="clear">清空</button>
         <button class="cu-btn bg-blue shadow-blur" :disabled="repeatClick" @click="complete">拣货完成</button>
      </view>
   </view>
</template>
<script>
   import {
      request
   } from '../../common/request.js'
   import {
      mapState,
      mapMutations,
      mapActions,
      mapGetters
   } from 'vuex';
   export default {
      data() {
         return {
            wave:'',
            list: [],
            isconfirm: false,
            barcode:'',
            max: 99999999,
            repeatClick:false
         }
      },
      computed: {
         allCount() {
            return this.list.reduce((acc, row) => +row.receiptQty + acc, 0)
         },
      },
      mounted() {
      },
      onLoad() {
         let that = this
         const eventChannel = this.getOpenerEventChannel();
         eventChannel.on('waveItem', function(data) {
            that.wave = data.data
         })
      },
      methods: {
         clear() {
            this.barcode = ''
            this.list = []
         },
         clearCode() {
            this.barcode = ''
         },
         async search() {
            this.list = []
            // if(this.barcode === '' || this.barcode ===null){
            //    return ;
            // }
            const {
               code,
               data,
               msg
            } = await request('/getContainerWaveList',{
               barcode:this.barcode
            }
            )
            if (code === 200) {
               if (Object.keys(data).length === 0){
                  uni.showToast({
                     title: "该标签未查询到数据",
                     icon: "none",
                     position: 'top'
                  })
               }
               this.list.push(...data)
            }else if(code == 401){
               setTimeout(() => {
                  uni.removeStorageSync('token');
                  uni.reLaunch({
                     url: "/pages/login/login"
                  });
               }, 1000);
            }else {
               uni.showToast({
                  title: msg,
                  icon: "none",
                  position: 'top'
               })
            }
         },
         async complete() {
            let that = this
            if(that.barcode === '' || that.barcode === null){
               uni.showToast({
                  title: "容器号为空",
                  icon: "error",
               })
               return ;
            }
            if(that.list === [] || that.list.length === 0){
               uni.showToast({
                  title: "拣货明细为空",
                  icon: "error",
               })
               return ;
            }
            this.repeatClick = true
            const {
               code,
               data,
               msg
            } = await request('/saveWavePick',{
               container:that.barcode,
               containerWaveDtos:that.list
            })
            if (code === 200) {
               uni.showToast({
                  title: msg,
                  icon: "none",
               })
               that.clear()
            } else {
               uni.showToast({
                  title: msg,
                  icon: "none",
               })
            }
            this.repeatClick = false
         },
      }
   }
</script>
<style>
   .index {
      border: 1px solid #e54d42;
      color: #e54d42;
      border-radius: 50%;
      display: block;
      width: 50rpx;
      height: 50rpx;
      line-height: 48rpx;
      text-align: center;
      margin-right: 20rpx;
      font-size: 30rpx;
   }
   .text-blue {
      color: #0081ff !important;
   }
   .item {
      position: relative;
      display: flex;
      min-height: 80upx;
      align-items: center;
   }
   .content2 {
      /* background-color: coral; */
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      margin-right: 10px;
      color: #0081ff;
   }
   .noMargin{
      margin-top: 0px;
      padding: 5px;
   }
</style>