hrms-edm/Services/client/src/components/UploadExistDialog.vue

<script lang="ts" setup>
defineProps<{
  notification: boolean
}>()

defineEmits(['update:notification', 'confirm', 'cancel'])
</script>

<template>
  <q-dialog
    :model-value="notification"
    @update:model-value="(v) => $emit('update:notification', v)"
    transition-show="scale"
    transition-hide="scale"
  >
    <q-card style="width: 400px">
      <q-card-section>
        <div class="flex items-center" style="flex-wrap: nowrap">
          <div class="q-pa-sm">
            <div style="border-radius: 50%" class="bg-secondary q-pa-sm">
              <q-icon name="mdi-alert-outline" color="warning" size="2.5rem" />
            </div>
          </div>
          <div>
            <h6 class="q-my-none">ยืนยันการเพิ่มข้อมูล</h6>
            <p class="q-my-none">
              พบไฟล์ชื่อซ้ำในระบบ หากดำเนินการต่อ
              ไฟล์ที่มีอยู่จะถูกแทนที่ด้วยไฟล์ใหม่
              ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่
            </p>
          </div>
        </div>
      </q-card-section>

      <q-card-actions align="right" class="bg-white text-primary">
        <q-space />
        <q-btn
          flat
          label="ยกเลิก"
          v-close-popup
          @click="() => $emit('cancel')"
        />
        <q-btn
          label="ดำเนินการต่อ"
          v-close-popup
          color="warning"
          @click="() => $emit('confirm')"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>