#
whycq
2022-09-22 e11a5e1d2b1f2f1ff428d6cb89625e5f858de107
pages/basics/pickOffLines.vue
@@ -7,7 +7,7 @@
         </view>
         <view class="square-content">
            <view class="content-input">
               <input readonly="value" v-model="barcode" type="text" placeholder="扫码 / 输入" maxlength="8"
               <input readonly="value" v-model="doc_num" type="text" placeholder="扫码 / 输入" maxlength="8"
               :focus="barcodeFocus" @input="nextInput">
               <uni-icons type="closeempty" size="20" color="#dadada" @click="removeBarcode()"></uni-icons>
            </view>
@@ -24,50 +24,49 @@
      </view>
      <view v-for="(item,index) in matList" :key="index" class="data-list bg-false" :class="'bg-'+item.checked" >
         <view class="number indent">
            No:{{index + 1}}
            <text class="text-key">No:</text>
            <text class="text-value">{{index + 1}}</text>
         </view>
         <view class="column">
            <view class="locno indent" style="width: 260rpx;font-weight: 700;color: #303133;">
               库位号:<text style="color: #606266;font-weight: 500;">{{item.locNo}}</text>
         <view class="column indent">
            <view class="text-key">
               <text class="text-key">库位号:</text>
               <text class="text-value">{{item.locNo}}</text>
            </view>
            <view class="matkx indent" style="width: 400rpx;font-weight: 700;color: #303133;">
               商品名称:<text style="color: #606266;font-weight: 500;">{{item.maktx}}</text></view>
            <view class="matkx indent" >
               <text class="text-key">商品名称:</text>
               <text class="text-value">{{item.maktx}}</text>
            </view>
         </view>
         <view class="column">
            <view class="count indent" style="width: 260rpx;font-weight: 700;color: #303133;">
               数量:<text style="color: #606266;font-weight: 500;">{{item.anfme}}</text></view>
            <view class="button">
               <button :type="item.btnType"
               style="width: 150rpx;font-size: 24rpx;height: 60rpx;line-height:60rpx;margin-left: 170rpx;"
               @click="open">{{item.btnText}}</button>
         <view class="column indent">
            <view class="anfme">
               <text class="text-key">数量:</text>
               <text class="text-value">{{item.anfme}}</text></view>
            <view>
               <button :type="item.btnType" @click="open(index)">{{item.btnText}}</button>
            </view>
         </view>
      </view>
      <!-- 弹出层 -->
      <view style="position: absolute;width: 100%;min-height: 100%;background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;left: 0;top: 0;margin: 0;padding: 0;display: flex;flex-direction: column;align-items:center;
      justify-content:center" v-if="popShow">
         <view style="background-color: #fff;width: 90%;min-height: 200rpx;border-radius: 14rpx;">
            <view style="text-align: center;font-weight: bold;font-size: 36rpx;height: 100rpx;line-height: 120rpx;
            color: #909399;">拣货信息</view>
      <view class="popup-mask" v-if="popShow">
         <view class="popup">
            <view class="title">拣货信息</view>
            <view class="column">
               <view style="text-indent: 20rpx;">拣货单号:</view>
               <view>jh202209211355</view>
               <view class="popup-text-key">拣货单号:</view>
               <view>{{doc_num}}</view>
            </view>
            <view class="column">
               <view style="text-indent: 20rpx;">货架号:</view>
               <input type="text" style="border: 1rpx solid #C0C4CC;border-radius: 5rpx;">
               <view class="popup-text-key">货架号:</view>
               <input type="text">
            </view>
            <view class="column">
               <view style="text-indent: 20rpx;">库位号:</view>
               <input type="text" style="border: 1rpx solid #C0C4CC;border-radius: 5rpx;">
               <view class="popup-text-key">库位号:</view>
               <input type="text">
            </view>
            <view class="column" style="border-top: 1rpx solid #ccc;height: 100rpx;line-height: 100rpx;">
               <view style="width: 50%;border-right: 1rpx solid #ccc;text-align: center;letter-spacing: 8px;
               font-weight: 700;">取消</view>
               <view style="width: 50%;text-align: center;letter-spacing: 8px;color: #409EFF;
               font-weight: 700;">确认</view>
            <view class="column event">
               <view class="close" @click="close">取消</view>
               <view class="confirm" @click="confirm()">确认</view>
            </view>
         </view>
      </view>
@@ -79,27 +78,29 @@
      data() {
         return {
            commonUrl:null,
            barcode: '',
            doc_num: '',
            barcodeFocus:true,
            matList:[
               {
                  locNo:"010022",
                  matkx:"属性用于设置字体",
                  count:"9999",
                  maktx:"属性用于设置字体",
                  anfme:"9999",
                  btnType:"default", // default
                  btnText: '未确认', // 未确认
               },
               {
                  locNo:"01001",
                  matkx:"属性用于设置字体",
                  count:"9999",
                  maktx:"属性用于设置字体",
                  anfme:"9999",
                  btnType:"primary", // default
                  btnText: '已出库', // 未确认
               }
            ],
            btnType:"primary", // default
            btnText: '已出库', // 未确认
            popShow:false
            popShow:false,
            index:0,
            
            
         }
@@ -141,15 +142,33 @@
                        records[i]['btnText'] = '未确认'
                     }
                     that.matList = res.data.records
                  } 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'})
                  }
               }
            })
         },
         open() {
         }
         open(index) {
            this.popShow = true
            this.index = index
         },
         close() {
            this.popShow = false
         },
         confirm() {
            this.popShow = false
            this.matList[this.index].btnText= '已出库'
            this.matList[this.index].btnType = 'primary'
         },
      }
   }
</script>
@@ -188,15 +207,16 @@
      min-height: 70rpx;
      line-height: 70rpx;
   }
   .button {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
   }
   .indent {
      text-indent: 32rpx;
   }
   .column button {
      width: 150rpx;
      font-size: 24rpx;
      height: 60rpx;
      line-height:60rpx;
      margin-left: 170rpx;
      text-indent: 0;
   }
   /* .data-list-left {
      display: inline-block;
@@ -227,4 +247,74 @@
      line-height: 130rpx;
      margin-right: 10%;
   }
   .text-key {
      width: 260rpx;
      font-weight: 700;
      color: #303133;
   }
   .text-value {
      color: #606266;
      font-weight: 500;
   }
   .anfme {
      width: 260rpx;
      font-weight: 700;
      color: #303133;
   }
   .popup-mask {
      position: fixed;
      width: 100%;
      min-height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
      left: 0;
      top: 0;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items:center;
      justify-content:center
   }
   .popup {
      background-color: #fff;
      width: 90%;
      min-height: 200rpx;
      border-radius: 14rpx;
   }
   .popup .title {
      text-align: center;
      font-weight: bold;
      font-size: 36rpx;
      height: 100rpx;
      line-height: 120rpx;
      color: #909399;
   }
   .popup-text-key {
      width: 180rpx;
      text-indent: 20rpx;
   }
   .popup input {
      border: 1rpx solid #C0C4CC;border-radius: 5rpx;
   }
   .close {
      width: 50%;
      border-right: 1rpx solid #ccc;
      text-align: center;
      letter-spacing: 8px;
      font-weight: 700
   }
   .confirm {
      width: 50%;
      text-align: center;
      letter-spacing: 8px;
      color: #409EFF;
      font-weight: 700;
   }
   /* 事件 */
   .event {
      border-top: 1rpx solid #ccc;
      height: 100rpx;
      line-height: 100rpx;
   }
</style>