# 拍灯容器流动流程修改 发货确认功能开发 部分功能优化

skyouc

2025-01-15 b2455e18b7880638faeda23cb559e7741b734339

 pages/order/orderOutConfirm.vue

@@ -1,17 +1,41 @@
<template>
   <view>
      <view class="code">
         <view class="item">
            <view class="code-decs">订单号:</view>
            <input type="text" placeholder=" 扫码 / 输入" v-model="orderNo" :focus="barcodeFocus"
               @input="barcodeInput()">
         </view>
         <uni-section title="商品列表" type="line" class="mat-list-title"></uni-section>
         <uni-row :gutter="10" v-if="range.length > 0">
            <checkbox-group @change="checkboAll"> 
               <uni-col :span="3" style="padding: 10px;">
                  <checkbox value="全选" checked></checkbox>
               </uni-col>
               <uni-col :span="20">
						
               </uni-col>
            </checkbox-group>
         </uni-row>
      </view>
      <view class="list-view">
         <scroll-view style="overflow: hidden;overflow-y: scroll;height: auto;">
            <view>
               <uni-row :gutter="10">
                  <uni-col :span="3" style="margin: auto;align-items: center;justify-content: center;">
                     <uni-data-checkbox mode="list" icon="left" v-model="value" :localdata="range" @change="change" :multiple="true" />
                  </uni-col>
                  <uni-col :span="20">
                     <view>1112244</view>
                  </uni-col>
               </uni-row>
            </view>
            <checkbox-group @change="checkboxChange">
               <label class="order__list" v-for="(item, index) in range" :key="index">
                  <view class="order__list__right">
                     <checkbox :value="item.id" :checked="item.checked" style="transform:scale(0.7)" />
                  </view>
                  <view class="order__list__left">
                     <view>No：{{index + 1}}</view>
                     <view>订单号：{{item.orderNo}}</view>
                     <view>波次号：{{item.waveNo}}</view>
                     <view>料号：{{item.matnr}}</view>
                     <view>批号：{{item.batch}}</view>
                     <view>订单数量：{{item.anfme}}</view>
                     <view>实发数量：{{item.workQty}}</view>
                  </view>
               </label>
            </checkbox-group>
         </scroll-view>
      </view>
      <!-- 底部操作按钮 -->
@@ -38,29 +62,132 @@
   export default {
      data() {
         return {
            barcodeFocus: '',
            orderNo: '',
            msgType1: 'success',
            msgType: 'success',
            messageText: '',
            title: '',
            content: '',
            dataList: [],
            dataList: [{}],
            barcode: '',
            matFocus: '',
            value: 0,
            range: [{"value": 0,"texts": "篮球"   },{"value": 1,"texts": "足球"},{"value": 2,"texts": "游泳"}]
            value: '0',
            range: []
         }
      },
      onShow() {
         this.baseUrl = uni.getStorageSync('baseUrl');
         this.token = uni.getStorageSync('token');
      },
		
      methods: {
         change(data) {
            console.log(data)
         }
         barcodeInput() {
            let that = this
            setTimeout(() => {
               that.getOrderDetl()
            }, 600)
         },
         /**
          * 获取发货订单明细信息
          */
         getOrderDetl() {
            if (this.orderNo.trim() == undefined || this.orderNo.trim() == null || this.orderNo == '') {
               this.messageToggle('error', '订单编码不能为空！！')
               return
            }
				
            let that = this
            this.$toast.loading('加载中...')
            uni.request({
               url: that.baseUrl + '/pda/shipping/order/detl',
               data: JSON.stringify({
                  orderNo: this.orderNo.trim(),
               }),
               method: 'POST',
               header: {
                  'token': uni.getStorageSync('token')
               },
               success(result) {
                  var res = result.data
                  if (res.code === 200) {
                     that.messageToggle('success', '数据拉取成功！！')
                     that.range = res.data.map(item => {
                        return {...item, checked: true}
                     })
                  } else {
                     that.messageText = res.msg
                     that.messageToggle('error')
                  }
               },
               complete() {
                  that.resst()
                  that.$toast.hideLoading()
               }
            });
         },
			
         /**
          * 输入框重置
          */
         resst() {
            this.orderNo = ''
         },
         /**
          * checkbox选中事件
          * @param {Object} e
          */
         checkboxChange: function (e) {
            var items = this.range,   values = e.detail.value;
            for (var i = 0, lenI = items.length; i < lenI; ++i) {
               const item = items[i]
               if(values.indexOf(item.id) >= 0){
                  this.$set(item,'checked',true)
               }else {
                  this.$set(item,'checked',false)
               }
            }
         },
         /**
          * checkbox全选事件
          * @param {Object} e
          */
         checkboAll(e) {
            let detl = e.detail.value
            if (detl.length < 1) {
               this.range.map(item => {
                  return item.checked = false
               })
            } else {
               this.range.map(item => {
                  return item.checked = true
               })
            }
         },
			
         //dialog弹框信息
         dialogToggle(type,title, msg) {
            this.msgType = type
            this.title = title
            this.content = msg
            this.$refs.combConfirm.open()
         },
			
         //消息弹框
         messageToggle(type, msg) {
            this.msgType1 = type
            if (msg != undefined || msg != null) {
               this.messageText = msg
            } 
            this.$refs.message.open()
         },
			
      }
   }
</script>

<style>
   @import url('../../static/css/wms.css/wms.css');
	
   
   .uni-section {
      margin-top: 0rpx;
@@ -69,79 +196,84 @@
         font-size: 16px !important;
      }
   }
	
   .buttom uni-button {
      width: 60%;
   }
	
   .list-view {
      width: 100%;
      position: relative;
		
      .uni-data-checklist .checklist-group .checklist-box.is--list {
         padding-left: 30rpx;
      }
		
   }
	
   .list {

      display: flex;

      min-height: 80rpx;

      background-color: #FFF;

      margin: 20rpx;

      border-radius: 20rpx;

      box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);

   }

   .list:first-child {

      margin-top: 300rpx;

   }

   .list:last-child {

      margin-bottom: 120rpx;

   }

   .code {

      width: 100%;
      position: fixed;
      top: 76rpx;
      position: sticky;
      background: white;

      min-height: 200rpx;

      background-color: #FFF;

      z-index: 10;

   }

   .item {

      display: flex;

      align-items: center;

      height: 100rpx;

      margin-left: 20rpx;

      border-bottom: 1px solid #DCDFE6;

   }

	
   .item input {

      height: 50rpx;

      line-height: 50rpx;

      /* font-family: PingFang SC; uniapp 默认字体不居中 */

      font-size: 36upx;

      font-family: PingFang SC;

      width: 55vw;

	
   }

	
   .code-decs {

      width: 20vw;

      font-size: 18px;

      color: #303133;

   }

      z-index: 10;
		
      .item {
         display: flex;
         align-items: center;
         height: 100rpx;
         margin-left: 20rpx;
         border-bottom: 1px solid #DCDFE6;
			
         .code-decs {
            width: 20vw;
            font-size: 18px;
            color: #303133;
         }
      }
		
      .item input {
         height: 50rpx;
         line-height: 50rpx;
         /* font-family: PingFang SC; uniapp 默认字体不居中 */
         font-size: 36upx;
         font-family: PingFang SC;
         width: 55vw;
		
      }
		
      .mat-list-title {
         height: 80rpx;
         line-height: 80rpx;
         font-size: 24px;
         width: 100%;
         background: white;
         font-weight: 500;
      }
		
   }
	
   .list-view {
      padding-bottom: 92rpx;
   }
   

   .item-right {

      margin-left: auto;

      margin-right: 20rpx;

   }

	
   .mat-list-title {

      height: 80rpx;
      position: fixed;

      line-height: 80rpx;
      font-size: 24px;

      width: 100%;
      background: white;
      font-weight: 500;

	
   .order__list {
      margin: 20rpx;
      font-size: 14px;
      background-color: #fff;
      border-radius: 20rpx;
      border: 1px solid #eeeeee;
      display: flex;
      position: relative;
      background-color: #3eb689;
      color: #FFF;
   }
   .order__list__left {
      flex: 1;
      padding: 20rpx;
      position: relative;
   }
   .order__list__right {
      width: 70rpx;
      border-right: 1rpx solid #eeeeee;
      display: flex;
      align-items: center;
      justify-content: center;
   }
	
</style>