baoshi-swms-app-web/src/views/outbound/check/activity/index.vue

<template>
  <div class="container">
    <van-nav-bar
      title="复核-活动单" left-arrow fixed placeholder @click-left="goBack">
      <template #left>
        <van-icon name="arrow-left" size="25" />
        <div style="color: #fff">返回</div>
      </template>
      <!--      <template #right>-->
      <!--        <div class="nav-right" @click="onClickRight">提交任务</div>-->
      <!--      </template>-->
    </van-nav-bar>
    <div class="activity">
      <div class="wave-title">
        <div><span style="font-size: 12px">波次/容器号:</span>{{ waveNo || '--' }}</div>
        <div class="wave-tips">
          <van-notice-bar :background="'none'" :speed="50" :text="tips" />
        </div>
        <van-button plain size="mini" type="primary" @click="_setWaveNo()">更换</van-button>
      </div>
      <div class="scan-barcode">
        <van-field v-model.lazy="scanBarcode"  label-align="left" placeholder="请扫描商品条码/SKU" label="商品条码："
                   class="input-barcode" autocomplete="off" @keydown.enter="_handlerScan(scanBarcode)"  />
        <van-field  v-model.lazy="totalWeight" ref="weightRef" label-align="left" required placeholder="请输入商品重量KG" label="重&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量："
                    autocomplete="off" type="number"  @click.enter.prevent="endCheck()"  >
          <template #button>
            <div>KG</div>
          </template>
        </van-field>
<!--        :class="[totalWeight>0?'success-input-barcode':'error-input-barcode']"-->
      </div>
      <div class="order-detail">
        <div class="picking-no">
          <div class="picking-code">
            <div><van-icon name="stop-circle-o" /></div>
            <div style="flex: 1"><van-notice-bar :background="'none'" color="#419bff" :speed="50" :text="orderDetail.pickingCode||'--'" /></div>
          </div>
          <div>{{ orderDetail.carrierName || '--' }}</div>
        </div>
        <div class="picking-container ">
          <div class="container-item"><span style="color:#666">拣货容器号：</span><div style="flex:1"> <van-notice-bar :background="'none'" color="#000" :speed="50" :text="orderDetail.pickingContainer||'--'" /></div></div>
          <div class="container-item"><span style="color:#666">返拣容器：</span>{{ reversePickingContainerNo || '--' }}</div>
          <div style="display: flex;padding-top: 5px"  @click="setPrinter()">
            <div>打印机:</div>
            <div v-if="printer">{{printer.printer}}</div>
            <div  style="text-decoration: underline;color: #0077ff">设置打印机<van-icon name="edit" color="#0077ff"/> </div>
          </div>
          <div class="picking-order-count ">
            <div>已复核数/总复核数：
              <span style="color: #333;font-weight: bold;font-size: 18px" v-if="orderMap.dataGroup">{{ successNumber }}/{{Object.keys(orderMap.dataGroup).length ||0}}</span>
              <span v-else>0</span>
            </div>
            <div>取消单：
              <span style="color: #333;font-weight: bold;font-size: 18px" v-if="orderMap.cancelGroup">{{Object.keys(orderMap.cancelGroup).length ||0}}</span>
              <span v-else>0</span>
            </div>
            <div>冻结单：
              <span style="color: #333;font-weight: bold;font-size: 18px" v-if="orderMap.freezeGroup">{{Object.keys(orderMap.freezeGroup).length ||0}}</span>
              <span  v-else>0</span>
            </div>
          </div>
        </div>
        <div class="picking-button">
          <div class="picking-button-item" @click="print('A3012_RF_WIFI_HDQD')">波次清单</div>
          <div class="picking-button-item" @click="print('PRINT_WAYBILL')">打印面单</div>
          <div class="picking-button-item" @click="endCheck()" >结束复核</div>
          <van-popover :actions="actions" placement="bottom-end" @select="onSelect" theme="dark">
            <template #reference>
              <div class="picking-button-item" style="padding: 0 5px">更多操作<van-icon name="play" /></div>
            </template>
          </van-popover>
        </div>
      </div>
     <div class="order-list-box">
       <van-divider style="margin: 0;padding: 5px 15px">订单明细</van-divider>
       <div class="order-list">
         <table class="task-table">
           <thead>
           <tr>
             <th style="width: 40%">商品条码</th>
             <th>数量</th>
             <th>剩余</th>
             <th v-if="isUniqueCode">标记</th>
           </tr>
           </thead>
           <tbody>
           <tr v-for="(item, index) in orderList" :key="index" v-if="orderList.length>0">
             <td>{{ item.barcode }} <van-tag type="success" v-if="item.universalCode">万用</van-tag></td>
             <td>{{item.qty}}/{{item.qtyOrdered}}</td>
             <td>{{ item.qty }}</td>
             <td v-if="isUniqueCode">
               <van-tag v-if="item.uniqueRegExp" type="warning" >唯一码</van-tag>
               <van-tag v-if="item.imeiRegExp" type="primary" >IMEI码</van-tag>
             </td>
           </tr>
           <tr v-else>
             <td colspan="3">
               <div>暂无数据</div>
             </td>
           </tr>
           </tbody>
         </table>
       </div>
     </div>
    </div>
    <!-- 条码输入组件 -->
    <input-barcode :back="back" @setBarcode="setBarcode" ref="inputBarcodeRef" />
    <!--    打印面单-->
    <printer ref="printerRef" @onPrint="onPrint"  />
    <!--    订单列表-->
    <order-list-table ref="orderListRef" />
    <!--    返拣-->
    <reverse-picking ref="reversePickingRef" :warehouse="warehouse" :reversePickingContainerNo="reversePickingContainerNo" @load-data="loadData" @reversePickingReset="reversePickingReset" />
    <!--    耗材-->
    <related-materia ref="relatedMateriaRef" @cut-barcode="cutBarcode" />

  </div>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import { androidFocus, getHeader, goBack, scanError, scanSuccess } from '@/utils/android'
import { useStore } from '@/store/modules/user'
import { closeListener, openListener, scanInit } from '@/utils/keydownListener'
import { getPendingReviewTask, packingReview } from '@/api/check/index'
import { barcodeToUpperCase } from '@/utils/dataType.js'
import { showConfirmDialog, showNotify } from 'vant'
import { closeLoading, showLoading } from '@/utils/loading'
import { fluxPrint } from '@/api/picking/index'
import InputBarcode from '@/views/outbound/picking/components/InputBarcode.vue'
import Printer from '@/components/Printer.vue'
import orderListTable from '@/views/outbound/check/components/OrderListTable.vue'
import ReversePicking from '@/views/outbound/check/components/ReversePicking.vue'
import RelatedMateria from '@/views/outbound/check/components/RelatedMateria.vue'
const store = useStore()
try {
  getHeader()
  androidFocus()
} catch (error) {
}
// 页面初始化
onMounted(() => {
  openListener()
  scanInit(_handlerScan)
  loadData()
})
const warehouse = store.warehouse
//收货容器号
const waveNo = ref('')
const  isUniqueCode=ref(false)
// 错误提示
const tips = ref('')
//强制返回
const back = ref(true)
const scanBarcode=ref('')
const totalWeight=ref('')
const containerNoMap={
  'WH01':'FJ-WH01-20',
  'WH02':'FJ-WH02-20',
  'WH10':'FJ-WH10-01',
  'WH99':'FJ-WH99-01',
}
//返拣容器
const reversePickingContainerNo=containerNoMap[warehouse]
// 订单明细
const orderDetail=ref({})
//订单详情
const orderMap=ref({})
const orderList=ref([])
//匹配条码
const matchBarcodeList=ref([])
const actions = [
  { text: '重新开始',value:'reset' },
  // { text: '波次清单',value:'goods' },
  { text: '装箱清单',value:'packing' },
  { text: '取消单列表',value:'cancel' },
  { text: '冻结单列表',value: 'freeze' },
];
// 扫描条码监听
const relatedMateriaRef=ref(null)
const _handlerScan = (code) => {
  if (code) {
    const barcode = [...new Set(
      orderList.value
        .flatMap(item => [item.barcode, item.barcode2, item.sku, item.universalCode])
        .filter(value => value !== null && value !== '' && value !== undefined),
    )];
    const checkBarcode = barcodeToUpperCase(code);
    if (barcode.some(item => barcodeToUpperCase(item) === checkBarcode)) {
      matchBarcodeList.value=orderList.value.filter(item=>((item.barcode===checkBarcode || item.sku===checkBarcode || item.barcode2===checkBarcode || item.universalCode==checkBarcode) && item.qty>0) )
      if(matchBarcodeList.value.length>0){
        const itemActive = matchBarcodeList.value[0]
        if(itemActive.uniqueRegExp){
          scanBarcode.value=''
          showNotify({ type: 'warning', duration: 3000, message: `此活动单包含唯一码，请到PC复核`})
          return
        }
        if(itemActive.imeiRegExp){
          scanBarcode.value=''
          showNotify({ type: 'warning', duration: 3000, message: `此活动单包含IMEI码，请到PC复核`})
          return
        }
        scanBarcode.value=code
        if(itemActive.relatedMaterial && itemActive.relatedMaterial.length>0){
          relatedMateriaRef.value.show(itemActive)
          return
        }
       cutBarcode(itemActive,1)
     }else {
        scanBarcode.value=''
       scanError()
       showNotify({ type: 'warning', duration: 3000, message: `商品条码${code},已全部扫描完成`})
     }
    }else {
      scanBarcode.value=''
      showNotify({ type: 'warning', duration: 3000, message: `商品条码${code},不匹配请重新扫描！`})
      scanError()
    }
  }
}
//扣除商品数量
const weightRef=ref(null)
const cutBarcode = (itemActive, count) => {
  if (itemActive.qty > 0) {
    itemActive.qty -= count;
    itemActive.qty = Math.max(itemActive.qty, 0)
    itemActive.quantity+=count
  }
  // 计算所有商品的总数量
  const allCount = orderList.value.reduce((sum, item) => sum + Math.max(Number(item.qty), 0), 0);
  // 根据所有商品总数量判断是否继续扫描
  if (allCount > 0) {
    scanBarcode.value = '';
    tips.value = '请继续扫描条码';
    showNotify({ type: 'success', duration: 3000, message: '数量已扣除，请继续扫描条码' });
  } else {
    // 如果所有商品已扫描完毕，根据总重量判断提示信息
    if (!totalWeight.value) {
      tips.value = '请输入重量';
      weightRef.value?.focus()
    } else {
      tips.value = '商品扫描完成，请点击结束复核';
    }
  }
  scanSuccess();
};
//重新开始
const reset=()=>{
  showConfirmDialog({
    title: '温馨提示',
    message: '您正在进行重新开始操作，是否继续？',
  }).then(() => {
    waveNo.value=''
    scanBarcode.value=''
    totalWeight.value=''
    orderDetail.value={}
    orderMap.value={}
    orderList.value=[]
    matchBarcodeList.value=[]
    tips.value='请扫描商品条码'
    inputBarcodeRef.value?.show('', '请扫描波次/容器号', '')
  })
}
const reversePickingReset=()=>{
  orderMap.value.dataGroup=[]
}
const printerRef=ref(null)
//设置打印机
const setPrinter=()=>{
  printerRef.value?.show(warehouse)
}
const printer=ref(null)
if(localStorage.getItem('check-print')){
  printer.value=JSON.parse(localStorage.getItem('check-print'))
}
const onPrint=(code)=>{
  printer.value=code
  localStorage.setItem('check-print',JSON.stringify(code))
}
const print=(templateCode)=>{
  if(!printer.value){
    scanError()
    showNotify({ type: 'warning', duration: 3000, message: '请先设置打印机' });
    return
  }
  const data = {warehouse,code:orderDetail.value.waveNo,printServer: printer.value.server, printName:printer.value.printer,templateCode }
  showLoading()
  fluxPrint(data)
    .then(res => {
      scanSuccess()
      showNotify({ type: 'success', duration: 3000, message: '打印已发起，请检查打印情况' });
    })
    .catch(err => {
      scanError()
      tips.value=err.message || '系统异常，请联系技术支持！'
    }).finally(() => {
      closeLoading()
  })
}
const successNumber=ref(0)
const errorNumber=ref(0)
//结束复核
const endCheck=()=>{
  const allCount = orderList.value.reduce((sum, item) => sum + Math.max(Number(item.qty), 0), 0);
  if(allCount>0){
    scanError()
    tips.value = '商品未扫描完成，请先扫描商品';
    showNotify({ type: 'warning', duration: 3000, message: '商品未扫描完成，请先扫描商品' });
    return
  }
  const lastNumber=Object.keys(orderMap.value.dataGroup).length
  if (totalWeight.value<=0 && lastNumber>0) {
    tips.value = '请输入重量';
    scanError()
    showNotify({ type: 'warning', duration: 3000, message: '请输入重量' });
    weightRef.value?.focus()
    return
  }
  if (lastNumber > 0) {
    const dataGroup = orderMap.value.dataGroup
    for (const order of Object.values(dataGroup)) {
      for (const item of order) {
        if (item.qty !== 0) {
          item.quantity = item.qty
          item.qty = 0
        }
      }
    }
  }
  packingRequests(0,lastNumber)
  successNumber.value=0
  errorNumber.value=0
}
//装箱
const reversePickingRef=ref(null)
const packingRequests = async (startIndex = 0, lastNumber) => {
  if(startIndex>=lastNumber){
    const cancelOrder= Object.keys(orderMap.value.cancelGroup).length
    const freezeOrder= Object.keys(orderMap.value.freezeGroup).length
   if(cancelOrder>0 || freezeOrder>0) {
     scanError()
   }else {
     scanSuccess()
   }
    reversePickingRef.value.show(successNumber.value,errorNumber.value,orderMap.value.cancelGroup,orderMap.value.freezeGroup)
    return
  }
  try {
      const key = Object.keys(orderMap.value.dataGroup)[startIndex];
      const list = orderMap.value.dataGroup[key] || [];
      const groupDetailList = list.map(items => {
        return {
          lotNum: items.lotNum,
          qty: items.quantity,
        };
      });
      const item = list[0] || {};
      const data = {
        warehouse: item.warehouseId,
        workStation: item.warehouseId,
        code: item.orderNo,
        totalGrossWeight: totalWeight.value,
        groupDetailList,
      };
      showLoading()
      const res = await packingReview(data)
      closeLoading()
      if (res) {
        if (res.data == '0000'){
          orderMap.value.cancelGroup[item.orderNo] = item.orderNo
        }else if(res.data == '1111'){
          orderMap.value.freezeGroup[item.orderNo] = item.orderNo
        }else {
          successNumber.value+=1
        }
        await packingRequests(startIndex + 1, lastNumber)
      }
  } catch (error) {
    errorNumber.value+=1
    tips.value=error.message
    if(startIndex>0){
      reversePickingRef.value.show(successNumber.value,orderMap.value.cancelGroup.length-successNumber.value,orderMap.value.cancelGroup,orderMap.value.freezeGroup)
    }
    scanError()
  } finally {
    closeLoading()
  }
}
//更多操作
const orderListRef=ref(null)
const onSelect=(item)=>{
  const handleGroup = (groupKey, emptyMessage) => {
    const order = orderMap.value[groupKey];
    if (Object.keys(order).length === 0) {
      showNotify({ message: emptyMessage, duration: 5000, type: 'danger' });
      return;
    }
    orderListRef.value?.show(item.value,order);
  };
  if (item.value == 'cancel') {
    handleGroup('cancelGroup', '暂无取消单');
  } else if (item.value == 'freeze') {
    handleGroup('freezeGroup', '暂无冻结单');
  }else if(item.value=='reset'){
    reset()
  }else if(item.value=='packing'){
    print('A3014_PACK_CARTON_PACKINGLIST')
  }
}

// 设置波次号
const inputBarcodeRef = ref(null)
const setBarcode = (code) => {
  const data = { warehouse, code, activityOrderFlag: true }
  showLoading()
  getPendingReviewTask(data).then(res => {
    if (res.data.details.length == 0) {
      scanError()
      inputBarcodeRef.value?.show('', '请扫描波次/容器号', '暂未查询到待复核数据，请切换波次/容器号')
    } else {
      if(res.data.waveType!=='*'){
        scanError()
        inputBarcodeRef.value?.show('', '请扫描波次/容器号', '仅支持活动单复核')
        return
      }
      scanSuccess()
      tips.value = '请扫描商品条码'
      waveNo.value = code
      orderDetail.value = res.data
      orderMap.value=getDataList(res.data.details)
      if(orderMap.value.dataGroup && Object.keys(orderMap.value.dataGroup).length>0){
        orderList.value=orderMap.value.dataGroup[Object.keys(orderMap.value.dataGroup)[0]]
        isUniqueCode.value = orderList.value.some(item => item.uniqueRegExp || item.imeiRegExp );
      }else {
        orderList.value=[]
      }
      matchBarcodeList.value=[]
      scanBarcode.value=''
      totalWeight.value=''
      successNumber.value=0
    }
  }).catch(err => {
    scanError()
    inputBarcodeRef.value?.show('', '请扫描波次/容器号', err.message)
  }).finally(f=>{
    closeLoading()
  })
}
//格式化订单
const getDataList = (data) => {
  const freezeList = [],cancelList = [],dataList = []
  const groupedData = {
    freezeGroup: {}, // 冻结订单
    cancelGroup: {}, //取消订单
    dataGroup: {} // 普通订单
  };
  const groupOrder = (order, group, groupKey, list) => {
    list.push(order)
    if (!group[groupKey]) {
      group[groupKey] = [] // 如果该订单号的组不存在，创建一个新数组
    }
    group[groupKey].push(order) // 将订单按订单号分组
  };
  data.forEach(curr => {
    curr.serialNoList = []
    curr.secondSerialNoList = []
    if (curr.universalBarcode) {
      curr.universalCode = '#@@@@@@#'
    }
    curr.quantity=0
    if (curr.releaseStatus === 'H') {
      groupOrder(curr, groupedData.freezeGroup, curr.orderNo, freezeList) // 处理冻结订单
    } else if (curr.erpCancelFlag === 'Y') {
      groupOrder(curr, groupedData.cancelGroup, curr.orderNo, cancelList) // 处理取消订单
    } else {
      groupOrder(curr, groupedData.dataGroup, curr.orderNo, dataList) // 处理普通订单
    }
  });
  return groupedData
};


//切换波次
const _setWaveNo = () => {
  back.value = false
  inputBarcodeRef.value?.show('', '请扫描波次/容器号', '')
}
// 数据刷新
const loadData = () => {
  if (!waveNo.value) {
    inputBarcodeRef.value?.show('', '请扫描波次/容器号', '')
    return
  } else {
    setBarcode(waveNo.value)
  }
}
onUnmounted(() => {
  closeListener()
})

window.onRefresh = loadData
</script>

<style scoped lang="sass">
.container
  background: #e9f4ff
  .activity
    .wave-title
      display: flex
      justify-content: space-between
      padding: 8px 10px
      .wave-tips
        color: #ed6a0c
        flex: 1
    .scan-barcode
      ::v-deep(.van-cell)
        padding: 5px 15px 0 15px

      ::v-deep(.van-field__control)
        border-bottom: 2px solid #efefef
        font-size: 16px

      ::v-deep(.van-field__label)
        width: unset
        font-size: 16px
      .input-barcode
        ::v-deep(.van-field__control)
          border-bottom: 2px solid #0077ff
          z-index: 2
      .success-input-barcode
        ::v-deep(.van-field__control)
          border-bottom: 2px solid #1ca600
          z-index: 2
      .error-input-barcode
        ::v-deep(.van-field__control)
          border-bottom: 2px solid #ff0000
          z-index: 2
    .order-detail
      margin-top: 2px
      background: #fff
      font-size: 14px
      .picking-no
        display: flex
        justify-content: space-between
        margin: 0 15px
        padding: 8px 0
        border-bottom: 1px solid #eaeaeb
        .picking-code
          flex: 1
          display: flex
          align-items: center
          color: #419bff
      .picking-container
        padding: 0 15px
        text-align: left
        border-bottom: 1px solid #eaeaeb
        .container-item
          line-height: 30px
          display: flex
          align-items: center
        .picking-order-count
          display: flex
          justify-content: space-between
          line-height: 30px
      .picking-button
        display: flex
        justify-content: space-evenly
        align-items: center
        .picking-button-item
          flex: 1
          color: #419bff
          font-weight: bold
          line-height: 35px
          border-right: 1px solid #eaeaeb
          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
        .picking-button-item:last-child
          border-right: none
    .order-list-box
      background: #fff
      margin-top: 2px
      .order-list
        width: 100%
        overflow-y: auto
        max-height: 60vh
        .task-table, .task-table-bin, .task-table-box
          width: 100%
          table-layout: fixed
          border-collapse: collapse
          font-size: 15px

        .task-table th, .task-table-bin th, .task-table td, .task-table-bin td, .task-table-box th, .task-table-box td
          text-align: center
          border: 1px solid #ccc
          word-wrap: break-word
          word-break: break-all

        .task-table thead, .task-table-bin thead, .task-table-box thead
          background-color: #3f8dff
          position: sticky
          top: 0
          color: white
          font-size: 15px

        .task-table-bin thead
          background-color: #3f8dff

        .task-table-bin tbody
          background: #cde7ff




</style>