hrms-mgt/src/components/Workflow/DialogApprove.vue

<script setup lang="ts">
import { ref } from "vue";

import DialogHeader from "@/components/DialogHeader.vue";

const modal = defineModel<boolean>("modal", { required: true });

const isAcknowledge = ref<boolean>(false);
const isConsider = ref<boolean>(false);
const isComment = ref<boolean>(false);

function onSubmit() {}

function onCloseModal() {
  modal.value = false;
}
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="min-width: 700px">
      <q-form q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader
          :tittle="`รับทราบ/พิจารณา/แสดงความเห็น`"
          :close="onCloseModal"
        />
        <q-separator />

        <q-card-section>
          <div class="q-gutter-xs q-pt-sm">
            <div>
              <q-checkbox
                keep-color
                color="primary"
                dense
                v-model="isAcknowledge"
                label="ให้เลือกรับทราบ"
                @update:model-value="(isConsider = false), (isComment = false)"
              />
            </div>
            <div v-if="!isAcknowledge">
              <q-checkbox
                dense
                keep-color
                color="primary"
                v-model="isConsider"
                label="ให้เลือกพิจารณา (อนุมัติ/ไม่อนุมัติ)"
              />
            </div>
            <div v-if="!isAcknowledge">
              <q-checkbox
                dense
                keep-color
                color="primary"
                v-model="isComment"
                label="ให้แสดงความเห็นในเอกสาร"
              />
            </div>
          </div>
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn
            label="บันทึกข้อมูล"
            color="public"
            type="submit"
            :disable="!isAcknowledge && !isConsider && !isComment"
          >
          </q-btn>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>