From 0af3fbd3cb53f23a23287db1de1b44e96f5ed938 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Mon, 25 Sep 2023 11:22:13 +0700
Subject: [PATCH] =?UTF-8?q?ui=20popup=20=E0=B8=9A=E0=B8=B1=E0=B8=99?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B6=E0=B8=81=E0=B8=9C=E0=B8=A5=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=80=E0=B8=AA=E0=B8=99=E0=B8=AD=E0=B8=82=E0=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/3_result/Dialogbody.vue        | 238 ++++++++++++++++++
 src/modules/07_insignia/views/ResultPage.vue  |  42 +++-
 2 files changed, 268 insertions(+), 12 deletions(-)
 create mode 100644 src/modules/07_insignia/components/3_result/Dialogbody.vue

diff --git a/src/modules/07_insignia/components/3_result/Dialogbody.vue b/src/modules/07_insignia/components/3_result/Dialogbody.vue
new file mode 100644
index 000000000..fbab609c2
--- /dev/null
+++ b/src/modules/07_insignia/components/3_result/Dialogbody.vue
@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { QForm, useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { DataOption } from "@/modules/04_registry/components/profileType";
+
+const $q = useQuasar();
+const myForm = ref<QForm>();
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const files = ref<any>();
+const filesReturn = ref<any>();
+const OrganazationId = ref<string>("");
+const OrgList = ref<DataOption[]>([]);
+const Datereceive = ref<Date | null>();
+const Datereturn = ref<Date | null>();
+
+const props = defineProps({
+  modal: Boolean,
+  close: Function,
+});
+// reset วันที่ประกาศราชกิจจานุเบกษา
+const clearReceiveDate = () => {
+  Datereceive.value = null;
+};
+const clearReturnDate = () => {
+  Datereturn.value = null;
+};
+const close = () => {
+  props.close?.();
+  Datereceive.value = null;
+  Datereturn.value = null;
+};
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="min-width: 900px">
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle2 text-bold"
+          >ยืม-คืนเครื่องราชฯ</q-toolbar-title
+        >
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="close"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator />
+
+      <q-form ref="myForm">
+        <div class="q-pa-md bg-grey-1">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-12 text-weight-bold text-grey-7">
+              รับเครื่องราชฯ
+            </div>
+            <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
+              <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"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      borderless
+                      outlined
+                      lazy-rules
+                      :rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
+                      hide-bottom-space
+                      :model-value="
+                        Datereceive != null ? date2Thai(Datereceive) : undefined
+                      "
+                      :label="`${'วันที่ได้รับ'}`"
+                      clearable
+                      @clear="clearReceiveDate"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+
+              <div class="col-xs-12 col-sm-4">
+                <q-file
+                  ref="myForm"
+                  outlined
+                  dense
+                  v-model="files"
+                  label="ไฟล์หลักฐานการรับ"
+                  lazy-rules
+                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการรับ']"
+                  hide-bottom-space
+                >
+                  <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"
+                  emit-value
+                  map-options
+                  outlined
+                  v-model="OrganazationId"
+                  lazy-rules
+                  :label="`หน่วยงานที่รับ`"
+                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']"
+                />
+              </div>
+              <div class="col-12 q-mt-md text-weight-bold text-grey-7">
+                คืนเครื่องราชฯ
+              </div>
+              <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"
+                >
+                  <template #year="{ year }">
+                    {{ year + 543 }}
+                  </template>
+                  <template #year-overlay-value="{ value }">
+                    {{ parseInt(value + 543) }}
+                  </template>
+                  <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"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          color="primary"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
+              </div>
+              <div class="col-xs-12 col-sm-4">
+                <q-file
+                  ref="myForm"
+                  outlined
+                  dense
+                  v-model="filesReturn"
+                  label="ไฟล์หลักฐานการคืน"
+                  lazy-rules
+                  :rules="[(val) => val || 'กรุณาเลือกไฟล์หลักฐานการคืน']"
+                  hide-bottom-space
+                >
+                  <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"
+                  emit-value
+                  map-options
+                  outlined
+                  v-model="OrganazationId"
+                  lazy-rules
+                  :label="`หน่วยงานที่คืน`"
+                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-form>
+
+      <q-separator />
+      <div class="q-px-md q-py-sm">
+        <div class="row justify-end">
+          <q-btn label="บันทึก" color="public">
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index 19d87db6a..13ea91ed7 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -5,6 +5,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useResultDataStore } from "@/modules/07_insignia/storeResult";
 
+import Dialogbody from "@/modules/07_insignia/components/3_result/Dialogbody.vue"
 import DialogForm from "@/modules/07_insignia/components/3_result/DialogForm.vue";
 import fileUploadview from "../components/3_result/fileUpload.vue";
 
@@ -35,7 +36,7 @@ const fileResult = ref<any>(null);
 const fileinvoice = ref<any>(null);
 const loadView = ref<boolean>(false);
 const insigniaTypeOption = ref<any>([]);
-
+const ModalDialog = ref<boolean>(false)
 onMounted(async () => {
   await fecthRound();
 });
@@ -348,6 +349,7 @@ const filter = ref<string>("");
 
 const close = () => {
   modal.value = false;
+  ModalDialog.value = false
 };
 
 const addData = () => {
@@ -428,6 +430,9 @@ const paginationLabel = (start: number, end: number, total: number) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+const OpenModal = () =>{
+  ModalDialog.value = true
+}
 </script>
 
 <template>
@@ -689,19 +694,28 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 </div>
 
                 <div v-else-if="props.col.name == 'action'">
-                  <q-btn
-                    dense
-                    size="12px"
-                    flat
-                    round
-                    color="primary"
-                    @click.stop="editData(props.row)"
-                    icon="mdi-pencil-outline"
-                  >
-                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                  <q-btn icon="mdi-dots-vertical" size="12px" color="grey-7"
+                    flat round dense >
+                    <q-menu transition-show="jump-down" transition-hide="jump-up" >
+                      <q-list dense style="min-width: 100px" >
+                        <q-item clickable v-close-popup @click.stop="editData(props.row)" >
+                          <q-item-section style="min-width: 0px" avatar class="q-py-sm" >
+                            <q-icon size="xs" name="mdi-pencil-outline" color="primary"/>
+                          </q-item-section>
+                          <q-item-section
+                            >เเก้ไขข้อมูล</q-item-section
+                          >
+                        </q-item>
+                        <q-item clickable v-close-popup @click="OpenModal()">
+                          <q-item-section style="min-width: 0px" avatar class="q-py-sm" >
+                            <q-icon size="xs" name="mdi-information-outline" color="blue"/>
+                          </q-item-section>
+                          <q-item-section no-wrap>รับ-คืนเครื่องราชฯ</q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-menu>
                   </q-btn>
                 </div>
-
                 <div v-else>
                   {{ props.value }}
                 </div>
@@ -715,6 +729,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
       </q-tab-panel>
     </q-tab-panels>
 
+    <Dialogbody
+      :modal="ModalDialog"
+      :close="close"
+    />
     <DialogForm
       :modal="modal"
       :save="save"