baoshi-swms-app-web/src/views/inbound/putaway/components/BarcodeCombine.vue

<template>
  <div class="goods">
    <van-dialog v-model:show="goodsTrueFalseBy"
                :beforeClose="beforeClose"
                title="组合商品上架"
                show-cancel-button>
        <div style="width:100%;max-height:150px;overflow:auto">
          <div v-for="(item,index) in matchedSkuList" :key="index">
            <van-cell center :title="item.matchedJson.barcode" :label="item.matchedJson.skuName">
              <template #value>
                <div>{{ item.matchedJson.quantity }}件/套</div>
                <div class="goods-tips">待上架:{{ (item.expectedQuantity || 0) - (item.receivedQuantity || 0) }}件</div>
              </template>
            </van-cell>
          </div>
        </div>
        <div class="goods-number">可上架套数:{{ maxCount }}</div>
        <van-field label="上架套数" type="number" class="code-input" v-model="count" ref="countRef" placeholder="上架套数" />
    </van-dialog>
  </div>
</template>
<script setup>
/** 组合商品上架弹框 */
import { computed, ref } from 'vue'
import { showToast } from 'vant'
const goodsTrueFalseBy = ref(false)
const countRef = ref(null)
const count = ref('')
const props = defineProps({
  matchedSku: { type: Array, default: () => [] },
})
const matchedSkuList = computed(() => props.matchedSku)
const maxCount = computed(() => {
  const min = Math.min(
    ...props.matchedSku.map((item) => ((item.expectedQuantity || 0) - (item.receivedQuantity || 0)) / (item.matchedJson?.quantity || 1))
  )
  return Number.isFinite(min) ? Math.floor(min) : 0
})
const show = () => {
  count.value = ''
  goodsTrueFalseBy.value = true
  setTimeout(() => {
    countRef.value?.focus()
  }, 200)
}
const dataResult = (data) =>
  data.map((item) => {
    const { matchedJson, ...rest } = item
    return { ...rest, quantity: matchedJson.quantity * Number(count.value) }
  })
const emit = defineEmits(['setCombine', 'cancel'])
const beforeClose = (action) =>
  new Promise((resolve) => {
    if (action === 'confirm') {
      if (count.value == '') {
        showToast('请输入上架套数')
        return resolve(false)
      }
      if (Number(count.value) <= 0) {
        showToast('请输入有效上架套数')
        return resolve(false)
      }
      if (Number(count.value) > maxCount.value) {
        showToast({ duration: 3000, message: '上架套数不能大于可上架套数' })
        return resolve(false)
      }
      const dataList = dataResult(matchedSkuList.value)
      emit('setCombine', { dataList, count: Number(count.value) })
    } else {
      emit('cancel')
    }
    resolve(true)
  })
defineExpose({ show })
</script>
<style scoped lang="sass">
.goods
  .code-input
    font-size: 16px
    font-weight: bold
    border-bottom: 2px solid #0077ff
  :deep(.van-cell--center)
    padding: 5px 20px
  :deep(.van-cell__title)
    text-align: left !important
  :deep(.van-cell__value)
    width: 40% !important
    flex: 0 0 40% !important
    color: #000
  .goods-number
    text-align: left
    font-size: 16px
    padding-left: 20px
    margin-top: 5px
  .goods-tips
    font-size: 12px
    text-align: right
    color: #333
</style>