เเก้ pop up

src/modules/07_insignia/components/3_result/Dialogbody.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref,watch } from "vue";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
@@ -11,13 +11,14 @@ import type { DataOption } from "@/modules/04_registry/components/profileType";
 const $q = useQuasar();
 const myForm = ref<any>();
 const mixin = useCounterMixin();
-const { date2Thai,showLoader,success,hideLoader,messageError,dialogConfirm } = mixin;
+const { date2Thai,showLoader,success,hideLoader,messageError,dialogConfirm ,dateToISO} = mixin;
 const files = ref<any>();
 const filesReturn = ref<any>();
 const OrganazationId = ref<string>("");
 const OrganazationId2 = ref<string>("");
 const OrgList = ref<DataOption[]>([]);
-const Datereceive = ref<Date | null>(null);
+const OrgList2 = ref<DataOption[]>([]);
+const Datereceive = ref<Date | null>();
 const Datereturn = ref<Date | null>();
 const remark = ref<string>("")
 const nullii = ref<any>(null)
@@ -26,9 +27,10 @@ const props = defineProps({
   personId: String,
   close: Function,
   fecthlistInsignia: Function,
-  fileCheck:String,
+  dateCheckReceive:String,
-  fileCheck2:String
+  dateCheckReturn:String,
-});
+  dataModal:Object
+})
 // reset วันที่ประกาศราชกิจจานุเบกษา
 const clearReceiveDate = () => {
   Datereceive.value = null;
@@ -48,25 +50,22 @@ const close = () => {
 
 const SaveData = async (type:string,id:string) => {
  await myForm.value.validate().then((result: boolean) => {
-  console.log(result)
     if (result) {
-      console.log(1)
       dialogConfirm($q,() => dataSave(type,id))
 }else{
-  console.log(2)
 }
 
 })};
 const dataSave = (type:string,id:string) => {
   const formData = new FormData();
-    if(props.fileCheck === null){
+    if(props.dateCheckReceive === null){
-        formData.append("Datereceiveinsignia", Datereceive.value?.toString() ?? "");
+        formData.append("Date", dateToISO(Datereceive.value ?? nullii));
-        formData.append("Docreceiveinsignia", files.value);
+        formData.append("File", files.value);
-        formData.append("Orgreceiveinsignia", nullii.value);
+        formData.append("OrgId", OrganazationId.value);
     } else {
-        formData.append("DateReturnInsignia", Datereturn.value?.toString() ?? "");
+        formData.append("Date", dateToISO(Datereturn.value ?? nullii));
-        formData.append("DocReturnInsignia", filesReturn.value);
+        formData.append("File", filesReturn.value);
-        formData.append("OrgReturnInsignia", nullii.value);
+        formData.append("OrgId", OrganazationId2.value);
     }
   showLoader();
    http
@@ -98,17 +97,14 @@ const fetchOrgList = async () => {
         id: e.organizationId,
         name: e.organizationName,
       }));
-      // if (props.action == "editData") {
-      //   OrgList.value = [
-      //     {
-      //       id: "00000000-0000-0000-0000-000000000000",
-      //       name: "สำนักนายกรัฐมนตรี",
-      //     },
-      //     ...orgArr,
-      //   ];
-      // } else {
       OrgList.value = orgArr;
-      // }
+      OrgList2.value = [
+          {
+            id: "00000000-0000-0000-0000-000000000000",
+            name: "สำนักนายกรัฐมนตรี",
+          },
+          ...orgArr,
+        ];
     })
     .catch((err) => {
       messageError($q, err);
@@ -117,6 +113,15 @@ const fetchOrgList = async () => {
       hideLoader();
     });
 };
+watch(props,()=>{
+  if(props.dataModal){
+    Datereceive.value = props.dataModal.dateReceiveInsignia
+    Datereturn.value = props.dataModal.dateReturnInsignia
+    OrganazationId.value = props.dataModal.orgReceiveInsignia
+    OrganazationId2.value = props.dataModal.orgReturnInsignia
+  }
+})
+
 onMounted(()=>{
   fetchOrgList()
 })
@@ -138,9 +143,9 @@ onMounted(()=>{
                 รับเครื่องราชฯ
               </div>
               <div class="col-xs-12 col-sm-4">
-                
+
                 <datepicker menu-class-name="modalfix" v-model="Datereceive" :locale="'th'" autoApply borderless
-                  :enableTimePicker="false" week-start="0" :readonly="fileCheck !== null">
+                  :enableTimePicker="false" week-start="0" :readonly="dateCheckReceive !== null">
                   <template #year="{ year }">
                     {{ year + 543 }}
                   </template>
@@ -149,8 +154,8 @@ onMounted(()=>{
                   </template>
                   <template #trigger>
                     <q-input dense borderless outlined lazy-rules :rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
-                      hide-bottom-space :model-value="Datereceive != null ? date2Thai(Datereceive) : undefined
+                      hide-bottom-space :model-value="Datereceive != null ? date2Thai(Datereceive) : null
-                        " :label="`${'วันที่ได้รับ'}`" clearable @clear="clearReceiveDate" :disable="fileCheck !== null">
+                        " :label="`${'วันที่ได้รับ'}`" clearable @clear="clearReceiveDate" :disable="dateCheckReceive !== null">
                       <template v-slot:prepend>
                         <q-icon name="event" class="cursor-pointer" color="primary">
                         </q-icon>
@@ -163,7 +168,7 @@ onMounted(()=>{
               <div class="col-xs-12 col-sm-4">
 
                 <q-file outlined dense v-model="files" label="ไฟล์หลักฐานการรับ" lazy-rules
-                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']" hide-bottom-space :disable="fileCheck !== null">
+                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']" hide-bottom-space :disable="dateCheckReceive !== null">
                   <template v-slot:prepend>
                     <q-icon name="attach_file" color="primary" />
                   </template>
@@ -172,11 +177,11 @@ onMounted(()=>{
               <div class="col-xs-12 col-sm-4">
                 <q-select  hide-bottom-space :options="OrgList" dense borderless option-label="name" option-value="id"
                   emit-value map-options outlined v-model="OrganazationId" lazy-rules :label="`หน่วยงานที่รับ`"
-                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']" :disable="fileCheck !== null"/>
+                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']" :disable="dateCheckReceive !== null"/>
               </div>
             </div>
             
-            <div v-if="fileCheck !== null" class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+            <div v-if="dateCheckReceive !== null" class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
               <div class="col-12 q-mt-sm"><q-separator/></div>
               <div class="col-12 text-weight-bold text-grey-7">
                 คืนเครื่องราชฯ
@@ -184,7 +189,7 @@ onMounted(()=>{
               <div class="col-xs-12 col-sm-4">
                 
                 <datepicker menu-class-name="modalfix" v-model="Datereturn" :locale="'th'" autoApply borderless
-                  :enableTimePicker="false" week-start="0" :readonly="fileCheck2 !== null">
+                  :enableTimePicker="false" week-start="0" :readonly="dateCheckReturn !== null">
                   <template #year="{ year }">
                     {{ year + 543 }}
                   </template>
@@ -194,7 +199,7 @@ onMounted(()=>{
                   <template #trigger>
                     <q-input dense borderless outlined lazy-rules :rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
                       hide-bottom-space :model-value="Datereturn != null ? date2Thai(Datereturn) : undefined
-                        " :label="`${'วันที่คืน'}`" clearable @clear="clearReturnDate" :disable="fileCheck2 !== null">
+                        " :label="`${'วันที่คืน'}`" clearable @clear="clearReturnDate" :disable="dateCheckReturn !== null">
                       <template v-slot:prepend>
                         <q-icon name="event" class="cursor-pointer" color="primary">
                         </q-icon>
@@ -205,16 +210,16 @@ onMounted(()=>{
               </div>
               <div class="col-xs-12 col-sm-4">
                 <q-file outlined dense v-model="filesReturn" label="ไฟล์หลักฐานการคืน" lazy-rules
-                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการคืน']" hide-bottom-space :disable="fileCheck2 !== null">
+                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการคืน']" hide-bottom-space :disable="dateCheckReturn !== null">
                   <template v-slot:prepend>
                     <q-icon name="attach_file" color="primary" />
                   </template>
                 </q-file>
               </div>
               <div class="col-xs-12 col-sm-4">
-                <q-select hide-bottom-space :options="OrgList" dense borderless option-label="name" option-value="id"
+                <q-select hide-bottom-space :options="OrgList2" dense borderless option-label="name" option-value="id"
                   emit-value map-options outlined v-model="OrganazationId2" lazy-rules :label="`หน่วยงานที่คืน` "
-                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']" :disable="fileCheck2 !== null"/>
+                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']" :disable="dateCheckReturn !== null"/>
               </div>
             </div>
           </div>
@@ -224,7 +229,7 @@ onMounted(()=>{
       <q-separator />
       <div class="q-px-md q-py-sm">
         <div class="row justify-end">
-          <q-btn v-if="fileCheck2 === null" label="บันทึก" color="public" @click="SaveData(props.fileCheck === null ? 'receive':'return',props.personId as string)">
+          <q-btn v-if="dateCheckReturn === null" label="บันทึก" color="public" @click="SaveData(props.dateCheckReceive === null ? 'receive':'return',props.personId as string)">
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
         </div>

src/modules/07_insignia/views/ResultPage.vue

@@ -42,9 +42,9 @@ const insigniaTypeFilter = ref<any>({
 const filterInvoice = ref<any>(DataStore.invoiceTypeop);
 const filterEmployee = ref<any>(DataStore.employeeClassOps);
 const ModalDialog = ref<boolean>(false);
-const dateReceiveInsignia = ref<Date>();
+const dateCheckReceive = ref<any>();
-const fileCheck = ref<any>();
+const dateCheckReturn = ref<any>();
-const fileCheck2 = ref<any>();
+const dataModal = ref<any>([])
 onMounted(async () => {
   await fecthRound();
 });
@@ -436,9 +436,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
   else return start + "-" + end + " ใน " + total;
 };
 const OpenModal = (data: any) => {
+  dataModal.value = data
   ModalDialog.value = true;
-  fileCheck.value = data.docReceiveInsignia;
+  dateCheckReceive.value = data.dateReceiveInsignia;
-  fileCheck2.value = data.docReturnInsignia;
+  dateCheckReturn.value = data.dateReturnInsignia;
   personId.value = data.id;
 };
 const filterSelector = (val: any, update: Function, name: any) => {
@@ -865,8 +866,9 @@ const clearInsigniaFilters = (name: string) => {
     <Dialogbody
       :modal="ModalDialog"
       :close="close"
-      :fileCheck="fileCheck"
+      :dateCheckReceive="dateCheckReceive"
-      :fileCheck2="fileCheck2"
+      :dateCheckReturn="dateCheckReturn"
+      :dataModal="dataModal"
       :personId="personId"
       :fecthlistInsignia="fecthlistInsignia"
     />