#

whycq

2022-09-21 715e98f510a4c1f024eb8f82044e644ca5c73070

 pages/basics/pickOffLines.vue

@@ -1,8 +1,230 @@
<template>
   <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">
               <input readonly="value" v-model="barcode" type="text" placeholder="扫码 / 输入" maxlength="8"
               :focus="barcodeFocus" @input="nextInput">
               <uni-icons type="closeempty" size="20" color="#dadada" @click="removeBarcode()"></uni-icons>
            </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>
         </view>
      </view>
      <view class="square-none"  v-show="matList.length === 0">
         <view class="v-show">暂无更多数据...</view>
      </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}}
         </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>
            <view class="matkx indent" style="width: 400rpx;font-weight: 700;color: #303133;">
               商品名称：<text style="color: #606266;font-weight: 500;">{{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>
         </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="column">
               <view style="text-indent: 20rpx;">拣货单号：</view>
               <view>jh202209211355</view>
            </view>
            <view class="column">
               <view style="text-indent: 20rpx;">货架号：</view>
               <input type="text" style="border: 1rpx solid #C0C4CC;border-radius: 5rpx;">
            </view>
            <view class="column">
               <view style="text-indent: 20rpx;">库位号：</view>
               <input type="text" style="border: 1rpx solid #C0C4CC;border-radius: 5rpx;">
            </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>
         </view>
      </view>
   </view>
</template>

<script>
   export default {
      data() {
         return {
            commonUrl:null,
            barcode: '',
            barcodeFocus:true,
            matList:[
               {
                  locNo:"010022",
                  matkx:"属性用于设置字体",
                  count:"9999",
                  btnType:"default", // default
                  btnText: '未确认', // 未确认
               },
               {
                  locNo:"01001",
                  matkx:"属性用于设置字体",
                  count:"9999",
                  btnType:"primary", // default
                  btnText: '已出库', // 未确认
               }
            ],
            btnType:"primary", // default
            btnText: '已出库', // 未确认
            popShow:false
				
				
         }
      },
      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()
      },
      onLoad() {
         // #ifdef APP
         setInterval(()=>{
            uni.hideKeyboard()
         },20)
         // #endif
      },
      methods: {
         // 获取url
         getUrl() {
            this.commonUrl = this.baseHttp + this.baseIP + ':' +this.basePORT + "/" +this.baseUrl
         },
         nextInput() {
            let that = this
            uni.request({
               url: 'http://192.168.4.188:8081/sxjzwms/ManPakOut/list/auth',
               data:{doc_num:"202209211053"},
               header: { 'token':uni.getStorageSync('token'),},
               method:'GET',
               success(result) {
                  let res = result.data
                  if (res.code === 200) {
                     let records = res.data.records
                     for(var i = 0; i < records.length; i++) {
                        records[i]['btnType'] = 'default'
                        records[i]['btnText'] = '未确认'
                     }
                     that.matList = res.data.records
							
							
                  }
               }
            })
         },
         open() {
				
         }
      }
   }
</script>

<style>
   .bg-false {
      background-color: #FFFFFF;
   }
   .bg-true {
      background-color: #ebebeb;
   }
   .data-list {
      display: flex;
      flex-direction:column;
      border-bottom: 1px solid #d8d8d8;
      min-height: 100rpx;
      /* height: 130rpx; */
      margin: 25rpx;
      border-radius: 20rpx;
   }
   .data-list:first-child {
      margin-top: 20rpx;
   }
   .data-list:last-child {
      margin-bottom: 200rpx;
   }
   .number {
      width: 100%;
      height: 50rpx;
      line-height: 50rpx;
      font-size: 32rpx;
      font-weight: bold;
   }
   .column {
      display: flex;
      min-height: 70rpx;
      line-height: 70rpx;
   }
   .button {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;

   }
   .indent {
      text-indent: 32rpx;
   }
   /* .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: 130rpx;
      /* line-height: 100rpx; */
      color: #676767;
   }
   .matnr {
      font-size: 14px;
      font-weight: 700;
      /* padding-top: 15rpx; */
      padding-top: 15rpx;
   }
   .data-list-right {
      display: inline-block;
      float: right;
      height: 130rpx;
      line-height: 130rpx;
      margin-right: 10%;
   }
</style>