baoshi-swms-app-web/src/views/outbound/picking/components/InputBarcode.vue

<template>
  <div class="container-no-container">
    <van-dialog v-model:show="barcodeTrueFalseBy"
                :beforeClose="beforeClose"
                :title="title"
                show-cancel-button>
      <van-field class="code-input"
                 v-model="barcode"
                 ref="barcodeRef"
                 @keydown.enter="onKeydown"
                 clearable
                 autocomplete="off"
                 :placeholder="title" />
      <span class="tips">{{tag}}</span>
    </van-dialog>
  </div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
import { showToast } from 'vant'
  const store = useStore()
  const warehouse = store.warehouse
  import { useStore } from '@/store/modules/user'
  import { goBack } from '@/utils/android'
  const barcodeTrueFalseBy=ref(false)
  const barcodeRef=ref(null)
  const barcode=ref('');
  const title=ref('请扫描条码')
  const props=defineProps(['back'])
  const tag=ref('')
  const show = async (code,desc,tips) => {
    if(desc!==undefined){
      title.value=desc
    }
    if(tips!==undefined){
      tag.value=tips
    }
    barcodeTrueFalseBy.value = true
    barcode.value=code
    setTimeout(()=>{
      barcodeRef.value?.focus()
    },200)
  }
  //输入拣货容器号
  const emit = defineEmits(['setBarcode'])
  const  beforeClose=  (action) =>
    new Promise(async (resolve) => {
      if (action === 'confirm') {
        if (barcode.value === '' || barcode.value==undefined) {
          showToast(title.value)
          return resolve(false)
        }
        resolve(true)
        emit('setBarcode', barcode.value)
      }else {
        resolve(true)
        if(props.back){
          goBack()
          return
        }
      }

    });
    const onKeydown=()=>{
      setTimeout(()=>{
        barcodeRef.value?.blur()
      },300)
    }
    defineExpose({show})
</script>
<style scoped lang="sass">
   .container-no-container
     .code-input
       font-size: 22px
       font-weight: bold
       border-bottom: 2px solid #0077ff
       margin-top: 10px
     .completion
       text-align: right
       font-size: 12px
       padding: 5px 20px
       cursor: pointer
       text-decoration: underline
     .container-list
       max-height: 100px
       font-size: 13px
       font-weight: bold
       display: flex
       padding: 5px 20px
       justify-content: space-between
       flex-wrap: wrap
       overflow: auto
       .container-item
         width: 50%
         display: flex
         justify-items: center
         align-items: center
         padding: 2px 0
         cursor: pointer
         text-decoration: underline
         .container-item-line
           width: 5px
           height: 5px
           background: #0077ff
           border-radius: 50%
           margin-right: 5px
         .container-item-no
           flex: 1
           text-align: left
  .tips
    font-size: 14px
    color: #ff4141
    line-height: 20px

</style>