vant dialog表单验证后再关闭dialog

<script lang="ts" setup>
import { ref, reactive } from 'vue'

const dialogFormRef = ref()

const dialog = reactive({
  visible: false,
  form: {
    orderNo: '',
    reason: ''
  }
})

const openDialog = (orderNo: string) => {
  dialog.form = {
    orderNo,
    reason: ''
  }
  dialog.visible = true
}

const handleDialogSubmit = () => {
  dialogFormRef.value.validate().then(async () => {
    dialog.visible = false
  }).catch((error: Error) => {
    console.error(error);
  })
}

const onBeforeClose = (action: string) => {
  if (action === 'cancel') {
    return true
  }
  return false
}
<script>

<template>
    <van-button plain type="primary" color="#f00" size="small" block @click="openDialog('20240511212732132000184')">撤销订单</van-button>

    <van-dialog v-model:show="dialog.visible" title="撤销订单" show-cancel-button @confirm="handleDialogSubmit"
      :beforeClose="onBeforeClose">
      <van-form ref="dialogFormRef" label-width="70px">
        <van-cell-group inset>
          <van-field label="订单号" v-model="dialog.form.orderNo" readonly />
          <van-field v-model="dialog.form.reason" rows="3" required autosize label="原因" type="textarea" maxlength="100"
            placeholder="请输入原因" show-word-limit :rules="[{ required: true, message: '请输入原因' }]" />
        </van-cell-group>
      </van-form>
    </van-dialog>
</template>