ผูก api จัดสรร

src/modules/07_insignia/components/4_Allocate/DialogForm.vue

@@ -1,45 +1,24 @@
 <script setup lang="ts">
-import { ref, watch, computed } from "vue";
+import { ref, watch } 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();
+import { useRouter } from "vue-router";
 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: {
@@ -50,44 +29,23 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
-  roundId: {
-    type: String,
-  },
-  action: {
-    type: String,
-  },
-  personId: {
-    type: String,
-  },
-  profileType: {
-    type: String,
+  insigniaList: {
+    type: Array,
+    default: []
   },
 });
 
-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;
+watch(props, () => {
+  if (props.modal) {
+    grandCross.value = ""
+    Org.value = ""
+    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;
-   }
+  console.log("insigniaList===>", props.insigniaList)
+})
+
+const clickSave = () => {
+  dialogConfirm($q, () => props.save(grandCross.value, amount.value));
 };
 </script>
 
@@ -96,64 +54,22 @@ const dataSave = async () => {
     <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-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="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="`เลือกหน่วยงาน`"
-              />
+              <q-select hide-bottom-space :options="insigniaList" dense borderless
+                option-label="name" option-value="id" emit-value map-options outlined options-cover v-model="grandCross"
+                :label="routeName == 'insigniaAllocate' ? `เครื่องราชฯ` : `เลือกหน่วยงาน`" />
             </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="จำนวน"
-              />
+              <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>