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

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

import { useCounterMixin } from "@/stores/mixin";

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

const $q = useQuasar();
const { dialogConfirm } = useCounterMixin();

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

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

const acknowledge = ref<boolean>(false);
const consider = ref<string>("");
const comment = ref<string>("");

function onSubmit() {
  dialogConfirm($q, () => {});
}

function onCloseModal() {
  modal.value = false;
  acknowledge.value = false;
  consider.value = "";
  comment.value = "";
}
</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">
            <div v-if="isAcknowledge">
              <q-checkbox
                keep-color
                color="primary"
                dense
                v-model="acknowledge"
                label="รับทราบ"
              />
            </div>
            <div v-if="!isAcknowledge && isConsider">
              <div class="text-weight-bold">พิจารณา (อนุมัติ/ไม่อนุมัติ)</div>
              <div class="q-pa-sm q-gutter-sm">
                <q-radio
                  dense
                  keep-color
                  color="primary"
                  v-model="consider"
                  label="อนุมัติ"
                  val="approve"
                />
                <q-radio
                  dense
                  keep-color
                  color="primary"
                  v-model="consider"
                  label="ไม่อนุมัติ"
                  val="reject"
                />
              </div>
            </div>

            <div v-if="!isAcknowledge && isComment">
              <div class="text-weight-bold">แสดงความเห็นในเอกสาร</div>
              <div class="q-pa-sm q-gutter-sm">
                <div class="col-12">
                  <q-input
                    dense
                    outlined
                    label="ความเห็น"
                    v-model="comment"
                    type="textarea"
                    lazy-rules
                    :rules="[
                      (val:string) => !!val || `${'กรุณากรอกความเห็น'}`,
                    ]"
                    hide-bottom-space
                  />
                </div>
              </div>
            </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>