1.采购入库扫条码实现

小小儁爺

2025-05-14 3afe42dec5534422f2a99292542fbba86883b527

 pages/wlgl/cgrk3.vue

@@ -0,0 +1,469 @@
<template>
   <view>
      <page-nav title="采购入库"></page-nav>

      <view v-if='purchorderArr.length!==0' class="mainContent" style="">
         <view>
            <u-gap height="10" bgColor="#eff0f1"></u-gap>
            <view class="head">
               <!-- max-height: 1340rpx;overflow: auto; -->
               <view style="max-height: 1020rpx;overflow: auto;">

                  <view class="head" style="position: relative;">

                     <u-radio-group class="flex_column">
                        <view class=" flex_column" style="width: 100%;" v-for="(item,index) in purchorderArr"
                           :key="item.hbarcode">

                           <view class="head_block" style="position: absolute;margin: 38rpx 0 0 0;">
                              <view class="head_left">
                                 <view class="head_bar"></view>
                                 <view class="head_title" style="font-weight: bold;">
                                    物料信息
                                 </view>
                              </view>
                           </view>


                           <view class="orderNumber" :key="item.hbarcode">
                              {{(index+1).toString().padStart(2,0)}}
                           </view>

                           <view class="trash" v-show="purchorderArr.length>1" @click="trashClick(index)">
                              <u-icon name="trash" size='20'></u-icon>
                           </view>

                           <view v-show="purchorderArr.length===1" style="width: 48rpx;height: 48rpx;">
                           </view>



                           <view class="flex_between marginBottom20 marginLeft20 marginTop20">
                              <view style="display: flex;">
                                 <view class="flex_column titleFont">
                                    <view>物料编码：</view>
                                    <view>物料名称：</view>
                                    <view>物料规格：</view>
                                    <view>到货单号：</view>

                                    <view>物料标签：</view>
                                    <view>物料数量：</view>
                                    <view>供方信息：</view>
                                    <view>采购批次：</view>
                                    <view>质量状态：</view>
                                 </view>
                                 <view class="flex_column contentFont">
                                    <view>{{item.partcode}}</view>
                                    <view>{{item.partname}}</view>
                                    <view class="ellipsis" style="width: 460rpx;">
                                       {{item.partspec?item.partspec:'/'}}
                                    </view>
                                    <view>{{item.hbillno}}</view>

                                    <view>{{item.hbarcode}}</view>
                                    <view>{{item.hqty}}</view>
                                    <view>{{item.hcustomername}}</view>
                                    <view>/</view>
                                    <view>
                                       <view v-if="!item.qualitystatus">/</view>
                                       <view v-else style="display: flex;align-items: center;">

                                          <u-icon name="tags-fill" color="green" size="20"
                                             v-if="item.qualitystatus==='CS'"></u-icon>
                                          <view style="margin-left: 10rpx;"
                                             v-if="item.qualitystatus==='CS'">免检</view>

                                          <u-icon name="checkmark-circle-fill" color="#55ff00" size="20"
                                             v-if="item.qualitystatus==='OK'"></u-icon>
                                          <view style="margin-left: 10rpx;"
                                             v-if="item.qualitystatus==='OK'">合格</view>

                                          <u-icon name="close-circle-fill" color="#FF0000" size="20"
                                             v-if="item.qualitystatus==='NG'"></u-icon>
                                          <view style="margin-left: 10rpx;"
                                             v-if="item.qualitystatus==='NG'">不合格</view>

                                          <u-icon name="more-circle-fill" color="#55aaff" size="20"
                                             v-if="item.qualitystatus==='TS'"></u-icon>
                                          <view style="margin-left: 10rpx;"
                                             v-if="item.qualitystatus==='TS'">待检</view>

                                       </view>
                                    </view>

                                 </view>
                              </view>

                           </view>

                           <u-gap height="10" v-if="index!==purchorderArr.length-1" bgColor="#eff0f1"></u-gap>

                        </view>
                     </u-radio-group>
                  </view>

               </view>

            </view>



         </view>

      </view>


      <view class="footer" v-if='purchorderArr.length!==0'>
         <view class="head_block">
            <view class="head_left">
               <view class="head_bar"></view>
               <view class="head_title" style="font-weight: bold;">
                  扫描库位
               </view>
            </view>

            <view class="marginRight20">
               <u-icon name="scan" @click="topScanClick" color="red" size="28"></u-icon>
            </view>
         </view>

         <view class="flex_between marginBottom20 marginLeft20 marginTop20">
            <view style="display: flex;">
               <view class="flex_column titleFont">
                  <view>库位信息：</view>
                  <view>所属仓库：</view>
               </view>

               <view class="flex_column contentFont" @click="sheetShow=true">
                  <view v-if="purchorderObj.lcationcode">{{purchorderObj.lcationcode}}</view>
                  <view v-else style="color: #ccc;">点击选择或扫库位码</view>
                  <view v-if="purchorderObj.stockcode">{{purchorderObj.stockcode}}</view>
                  <view v-else style="color: #ccc;">点击选择或扫库位码</view>
               </view>
            </view>
         </view>


         <u-button size="large" :loading="isDisabledSubmitButton" :disabled="isDisabledSubmitButton"
            loadingText="正在提交,请稍等..." type="primary" @click="submit" text="确认提交">
         </u-button>
      </view>

      <view v-if='purchorderArr.length===0'>
         <div class="sacnBody">
            <div class="scanImg" @click="topScanClick2"></div>
            <div class="scanText">扫描物料条码</div>
         </div>
      </view>



      <u-picker :show="sheetShow" :columns="columns" :itemHeight='55' :closeOnClickOverlay='true'
         @close='sheetShow=false' @change="changeHandler" @confirm='pickerConfirm'
         @cancel='sheetShow=false'></u-picker>


      <!-- 悬浮球 -->
      <view v-if='purchorderArr.length!==0' @click="topScanClick2">
         <drag-ball :x='$DeviceInformation.screenWidth*0.8' :y="$DeviceInformation.screenHeight*0.7"></drag-ball>
      </view>


   </view>
</template>


<script>
   import {
      MesAppPurchInStorScanLabCode,
      WarehouseLocationSearchStoreHouse,
      MesAppPurchInStorLabSave,
      WareHouseLocation
   } from '../../config/api.js';
   export default {
      onLoad(option) {

      },

      onPullDownRefresh() {
         setTimeout(() => {
            this.init(() => {
               uni.stopPullDownRefresh();
            })
         }, 1000);
      },

      data() {
         return {
            purchorderArr: [],
            sheetShow: false, //上拉列表是否展开
            sheetList: [],
            columns: [],
            columnsData: [],
            wareHouseLocationArr: [], //仓库库位数组
            isDisabledSubmitButton: false,
            purchorderObj: {}, //存储仓库库位信息
         }
      },
      created() {

      },
      mounted() {
         this.init()
         this.getWareHouseLocation()


         // this.getMesAppPurchInStorScanLabCode('DH25051400099')
         // this.getWarehouseLocationSearchStoreHouse('0011')
         // setTimeout(() => {
         //    this.getMesAppPurchInStorScanLabCode('DH25051400096')
         // }, 2000)
      },
      methods: {
         // 获取弹出层仓库库位信息
         async getWareHouseLocation() {
            const {
               data: res
            } = await WareHouseLocation()
            this.wareHouseLocationArr = res.filter(i => i.children.length > 0)
            this.columns = [
               this.wareHouseLocationArr.map(i => i.text),
               this.wareHouseLocationArr[0].children.map(i => i.text)
            ]
            this.wareHouseLocationArr.forEach(i => {
               this.columnsData.push(i.children.map(j => j.text))
            })

         },
         changeHandler(e) {
            const {
               columnIndex,
               value,
               values, // values为当前变化列的数组内容
               index,
               // 微信小程序无法将picker实例传出来，只能通过ref操作
               picker = this.$refs.uPicker
            } = e
            // 当第一列值发生变化时，变化第二列(后一列)对应的选项
            if (columnIndex === 0) {
               // picker为选择器this实例，变化第二列对应的选项
               picker.setColumnValues(1, this.columnsData[index])
            }
         },
         init() {
            uni.stopPullDownRefresh();
         },
         // 扫描
         topScanClick() {
            let that = this;

            uni.scanCode({
               onlyFromCamera: true,
               // scanType: ['barCode', 'qrCode'],
               scanType: ['qrCode'],
               success: function(res) {
                  console.log('条码类型：' + res.scanType);
                  console.log('条码内容：' + res.result);
                  that.scanContent = res.result;
                  that.getWarehouseLocationSearchStoreHouse(that.scanContent)
               },
               complete: function(res) {

               },
               fail: function(res) {
                  console.log('条码类型：' + res.scanType);
                  console.log('条码内容：' + res.result);
               }

            });
         },

         // 扫描物料信息码
         topScanClick2() {
            let that = this;

            uni.scanCode({
               onlyFromCamera: true,
               // scanType: ['barCode', 'qrCode'],
               scanType: ['qrCode'],
               success: function(res) {
                  console.log('条码类型：' + res.scanType);
                  console.log('条码内容：' + res.result);
                  that.scanContent = res.result;
                  if (that.purchorderArr.findIndex(i => i.hbarcode === that.scanContent) > -1) {
                     that.$u.toast('此条码已在列表中')
                  } else {
                     that.getMesAppPurchInStorScanLabCode(that.scanContent)
                  }


               },
               complete: function(res) {

               },
               fail: function(res) {
                  console.log('条码类型：' + res.scanType);
                  console.log('条码内容：' + res.result);
               }

            });
         },

         async getWarehouseLocationSearchStoreHouse(locationcode) {
            const data = {
               locationcode
            }
            const res = await WarehouseLocationSearchStoreHouse(data)
            if (res.code === '200') {
               this.purchorderObj.lcationcode = res.data[0].locationname
               this.purchorderObj.stockcode = res.data[0].warehousename

               this.purchorderObj.lcationname2 = res.data[0].locationcode
               this.purchorderObj.stockname2 = res.data[0].warehousecode
               this.$forceUpdate()
            } else {
               this.$u.toast(res.message)
            }
         },
         // 获取标签信息
         async getMesAppPurchInStorScanLabCode(labcode) {
            const data = {
               labcode
            }
            const res = await MesAppPurchInStorScanLabCode(this.global.formatData(data))
            if (res.code === '200') {
               this.purchorderArr.unshift(res.data[0])
            }
         },
         // picker确认按钮
         pickerConfirm(val) {

            this.purchorderObj.lcationcode = val.value[1]
            this.purchorderObj.stockcode = val.value[0]

            this.purchorderObj.stockname2 = this.wareHouseLocationArr.find(i => i.text === this.purchorderObj
               .stockcode).value

            this.purchorderObj.lcationname2 = this.wareHouseLocationArr.find(i => i.value === this.purchorderObj
               .stockname2).children.find(i => i.text === this.purchorderObj
               .lcationcode).value


            this.sheetShow = false
         },
         // 删除事件点击
         trashClick(val) {
            this.purchorderArr.splice(val, 1)
         },
         async submit() {
            const data1 = {
               username: uni.getStorageSync("username")
            }
            let data2 = []


            if (!this.purchorderObj.lcationcode) { //说明有未填写的库位信息
               return this.$u.toast('库位信息未选择或未扫码！')
            }

            this.purchorderArr.forEach(i => {
               data2.push({
                  "sbid": i.hsourcesbid,
                  "hbarcode": i.hbarcode,
                  "hbillno": i.hbillno,
                  "hsourceid": i.hsourceid,
                  "hsourcebillno": i.hsourcebillno,
                  "partcode": i.partcode,
                  "partname": i.partname,
                  "partspec": i.partspec,
                  "unitcode": i.unitcode,
                  "unitname": i.unitname,
                  "hqty": i.hqty,
                  "quantity": i.quantity,
                  "countarrivalquantity": i.countarrivalquantity,
                  "countInquantity": i.countInquantity,
                  "countreturnquantity": i.countreturnquantity,
                  "harcodelocation": i.harcodelocation,
                  "lactioncode": this.purchorderObj.lcationname2,
                  "lactionname": this.purchorderObj.lcationcode,
                  "housecode": this.purchorderObj.stockname2,
                  "housename": this.purchorderObj.stockcode,
                  "hcustomercode": i.hcustomercode,
                  "hcustomername": i.hcustomername,
                  "deptcode": i.deptcode,
                  "deptname": i.deptname,
                  "batchcode": "",
                  "qstatus": i.qualitystatus
               })
            })

            // console.log(JSON.stringify(data2))

            const res = await MesAppPurchInStorLabSave(this.global.formatData(
               data1), data2)

            if (res.code === '200') {
               this.$u.toast('提交成功！')
               setTimeout(() => {
                  uni.navigateBack({
                     delta: 1, //返回层数，2则上上页
                  })
               }, 1000)
            } else {
               this.$u.toast(res.message)
            }


         }
      }
   }
</script>

<style lang="scss" scoped>
   @import url('@/style/global.css');

   ::v-deep .uicon-arrow-left>span {
      display: block;
   }



   .orderNumber {
      width: 60rpx;
      height: 40rpx;
      // margin: -22rpx 0 0 -30rpx;
      background-color: #d3daf9;
      color: #2979FF;
      font-size: 26rpx;
      padding: 4rpx 0 0 10rpx;
      border-radius: 0 0 90% 0;
   }

   .trash {
      width: 48rpx;
      height: 48rpx;
      margin: -26rpx 0 0 646rpx;
      background-color: #d3daf9;
      font-size: 26rpx;
      padding: 6rpx 0 0 10rpx;
      border-radius: 100%;
   }

   .custominputClass {
      width: 424rpx;
      display: flex;
      justify-content: space-between;
      border: 3rpx #eff0f1 solid;
      border-radius: 10rpx;
      padding: 0 10rpx;
   }

   .arrowClass {
      display: flex;
      justify-content: center;
      // background-color: #efefef;
      width: 100rpx;
      // border-radius: 10rpx;
      height: 56rpx;
   }
</style>