hrms-mgt/src/modules/07_insignia/components/4_Allocate/DialogForm.vue

<script setup lang="ts">
import { ref, watch, computed } from "vue";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useResultDataStore } from "@/modules/07_insignia/storeResult";

import http from "@/plugins/http";
import config from "@/app.config";
import type { DataOption } from "@/modules/04_registry/components/profileType";
import { useRouter, useRoute } from "vue-router";
const DataStore = useResultDataStore();
const $q = useQuasar();
const myForm = ref<QForm>();
const mixin = useCounterMixin();
const {
  date2Thai,
  dialogConfirm,
  success,
  messageError,
  showLoader,
  hideLoader,
  notifyError,
} = mixin;
const router = useRouter();
const routeName = router.currentRoute.value.name;
const amount = ref<number | null>();
const Org = ref<string | null>("");
const grandCross = ref<string | null>("");
const grandCrossOp = ref<DataOption[]>([
  { id: "xxx1", name: "เครื่อง ราช" },
  { id: "xxx2", name: "เครื่อง ราชฯ" },
]);
const OrgOp = ref<DataOption[]>([
  { id: "xxx1", name: "หน่วยงาน กทม" },
  { id: "xxx2", name: "หน่วยงาน กทมฯ" },
]);

const closeModal = () => {
  props.close();
  grandCross.value = null;
  amount.value = null;
};
const props = defineProps({
  modal: Boolean,
  save: {
    type: Function,
    default: () => console.log("not function"),
  },
  close: {
    type: Function,
    default: () => console.log("not function"),
  },
  roundId: {
    type: String,
  },
  action: {
    type: String,
  },
  personId: {
    type: String,
  },
  profileType: {
    type: String,
  },
});

const clickSave = async () => {
  dialogConfirm($q, () => dataSave());
};
const dataSave = async () => {
  if (routeName == "insigniaAllocate") {
    const data = {
        id: grandCross.value,
        amount: amount.value,
    };
    console.log("saveMainPopup", data);
    props.close();
        grandCross.value = null;
        amount.value = null;
  }
   else if(routeName == 'allocateDetail'){
    const data = {
        id: Org.value,
        amount: amount.value,
    };
    console.log("saveDetailPopup", data);
    props.close();
        Org.value = null;
        amount.value = null;
   }
};
</script>

<template>
  <q-dialog v-model="props.modal" persistent>
    <q-card style="width: 800px">
      <q-toolbar class="q-py-sm">
        <q-toolbar-title class="text-h6">บันทึกผล </q-toolbar-title>
        <q-btn
          icon="close"
          unelevated
          round
          dense
          @click="closeModal"
          style="color: #ff8080; background-color: #ffdede"
        />
      </q-toolbar>
      <q-separator />

      <q-form ref="myForm">
        <div class="q-pa-md">
          <div
            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
          >
            <div class="col-6">
              <q-select
                v-if="routeName == 'insigniaAllocate'"
                hide-bottom-space
                :options="DataStore.insigniaOp2"
                dense
                borderless
                option-label="name"
                option-value="id"
                emit-value
                map-options
                outlined
                options-cover
                v-model="grandCross"
                :label="`เครื่องราชฯ`"
              />
              <q-select
                v-else-if="routeName == 'allocateDetail'"
                hide-bottom-space
                :options="OrgOp"
                dense
                borderless
                option-label="name"
                option-value="id"
                emit-value
                map-options
                outlined
                v-model="Org"
                :label="`เครื่องราชฯ`"
              />
            </div>
            <div class="col-xs-12 col-sm-6">
              <q-input
                hide-bottom-space
                outlined
                class="inputgreen"
                v-model="amount"
                dense
                lazy-rules
                type="number"
                label="จำนวน"
              />
              <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
            </div>
          </div>
        </div>
      </q-form>

      <q-separator />
      <div class="row justify-end q-py-sm">
        <div class="q-px-md">
          <q-btn label="บันทึก" @click="clickSave" color="public" />
        </div>
      </div>
    </q-card>
  </q-dialog>
</template>