EmailBill/Web/src/components/AddClassifyDialog.vue

<template>
  <PopupContainerV2
    v-model:show="show"
    title="新增交易分类"
    :height="'auto'"
  >
    <div style="padding: 16px">
      <van-form ref="addFormRef">
        <van-field
          v-model="classifyName"
          name="name"
          label="分类名称"
          placeholder="请输入分类名称"
          :rules="[{ required: true, message: '请输入分类名称' }]"
        />
      </van-form>
    </div>
    <template #footer>
      <div style="display: flex; gap: 12px">
        <van-button
          plain
          style="flex: 1"
          @click="resetAddForm"
        >
          取消
        </van-button>
        <van-button
          type="primary"
          style="flex: 1"
          @click="handleConfirm"
        >
          确认
        </van-button>
      </div>
    </template>
  </PopupContainerV2>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'
import PopupContainerV2 from './PopupContainerV2.vue'

const emit = defineEmits(['confirm'])

const show = ref(false)
const classifyName = ref('')

// 打开弹窗
const open = () => {
  classifyName.value = ''
  show.value = true
}

// 确认
const handleConfirm = () => {
  if (!classifyName.value.trim()) {
    showToast('请输入分类名称')
    return
  }

  emit('confirm', classifyName.value.trim())
  show.value = false
  classifyName.value = ''
}

// 重置表单
const resetAddForm = () => {
  classifyName.value = ''
}

// 暴露方法给父组件
defineExpose({
  open
})
</script>