baoshi-swms-app-web/src/views/inbound/blindCollection/components/ResetData.vue

<template>
  <div class="container-no-container">
    <van-dialog v-model:show="resetDataTrueFalseBy"
                :beforeClose="beforeClose"
                :title="'若确定重新清点，请输入'+props.modeTypeName+'！'"
                show-cancel-button
                >
      <van-field  :class="['code-input',bin>0?'success-border':'']"
                 v-model="bin"
                 ref="binRef"
                 type="digit"
                 clearable :max="1000"
                 :placeholder="'请输入'+props.modeTypeName" />
      <van-row>
        <van-col span="16"></van-col>
        <van-col span="8"><div class="completion" @click="onConfirm" >清除全部</div></van-col>
      </van-row>
    </van-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { showToast } from 'vant'
const resetDataTrueFalseBy=ref(false)
const binRef=ref(null)
const bin=ref('');
const props = defineProps({
  binData: Array,
  modeTypeName:String
});
const show = async () => {
    resetDataTrueFalseBy.value = true
    bin.value=''
    setTimeout(()=>{
      binRef.value?.focus()
    },200)
  }
  //输入数量
  const emit = defineEmits()
  const  beforeClose=  (action) =>
    new Promise(async (resolve) => {
      if (action === 'confirm') {
        if (bin.value == '') {
          showToast(`请输入${props.value.modeTypeName}!!!`)
          return resolve(false)
        }
        emit('resetData', bin.value,'bin')
      }
      resolve(true)
    });
    const onConfirm=()=>{
      resetDataTrueFalseBy.value = false
      emit('resetData',undefined,'all')
    }
    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: 14px
       padding: 10px 20px 10px 0
       cursor: pointer
       text-decoration: underline
       color: #ff0d00
     .success-border
       border-bottom: 2px solid #1ca600
</style>