From 94c15dd016c17126b78acd58229565a295fa3303 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Tue, 4 Jul 2023 17:24:28 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=20=E0=B8=AD=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=B1=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../OrderPlacement/detailOrderPlacement.vue   |   2 +-
 .../components/OrderPlacement/step/step01.vue |  12 +-
 .../components/OrderPlacement/step/step04.vue | 230 ++++++++++++++----
 3 files changed, 186 insertions(+), 58 deletions(-)

diff --git a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
index 790db1c27..e3fc70177 100644
--- a/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue
@@ -82,7 +82,7 @@ const step04 = defineAsyncComponent(
 );
 
 const router = useRouter();
-const step = ref<number>(1);
+const step = ref<number>(4);
 const stepper = ref<QStepper>();
 
 const nextStep = () => {
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step01.vue b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
index 80d650866..be299f242 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step01.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step01.vue
@@ -370,7 +370,7 @@
     </div>
     <q-separator />
     <div class="flex justify-end q-pa-sm q-gutter-sm">
-      <q-btn unelevated label="บันทึก" color="public" @click="next"
+      <q-btn unelevated label="บันทึก" color="public" @click="submit"
         ><!-- icon="mdi-content-save-outline"
         <q-tooltip>บันทึก</q-tooltip> -->
       </q-btn>
@@ -497,10 +497,12 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
 };
 
 const submit = async () => {
-  await myForm.value!.validate().then((result: boolean) => {
-    if (result == false) {
-    }
-  });
+  next();
+  //   await myForm.value!.validate().then((result: boolean) => {
+  //     if (result) {
+  //       next();
+  //     }
+  //   });
 };
 
 /**
diff --git a/src/modules/05_placement/components/OrderPlacement/step/step04.vue b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
index 3721ea978..e28ec4e50 100644
--- a/src/modules/05_placement/components/OrderPlacement/step/step04.vue
+++ b/src/modules/05_placement/components/OrderPlacement/step/step04.vue
@@ -132,40 +132,146 @@
         </template>
 
         <template v-slot:after>
-          <div class="q-pa-md">
-            <fieldset class="border q-pa-lg">
-              <legend class="text-header">อัปโหลดไฟล์</legend>
-              <q-form ref="myForm">
-                <div>
-                  <label class="text-file">คำสั่ง</label>
-                  <q-file
-                    outlined
-                    v-model="fileOrder"
-                    label="เลือกไฟล์คำสั่ง"
-                    lazy-rules
-                    :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" />
-                    </template>
-                  </q-file>
-                  <div class="q-py-lg" />
-                  <label class="text-file">เอกสารแนบท้าย</label>
-                  <q-file
-                    outlined
-                    v-model="fileTailer"
-                    label="เลือกไฟล์เอกสารแนบท้าย"
-                    lazy-rules
-                    :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon name="attach_file" />
-                    </template>
-                  </q-file>
+          <q-form ref="myForm">
+            <div class="q-pa-md q-gutter-y-md">
+              <fieldset class="border q-pa-lg">
+                <legend class="text-header">อัปโหลดไฟล์</legend>
+                <div class="q-gutter-y-lg">
+                  <div>
+                    <label class="text-file">คำสั่ง</label>
+                    <q-file
+                      outlined
+                      dense
+                      v-model="fileOrder"
+                      label="เลือกไฟล์คำสั่ง"
+                      lazy-rules
+                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
+                    </q-file>
+                  </div>
+                  <!-- <div class="q-py-lg" /> -->
+                  <div>
+                    <label class="text-file">เอกสารแนบท้าย</label>
+                    <q-file
+                      outlined
+                      dense
+                      v-model="fileTailer"
+                      label="เลือกไฟล์เอกสารแนบท้าย"
+                      lazy-rules
+                      :rules="[(val) => val || 'กรุณาเลือกไฟล์เอกสารแนบท้าย']"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon name="attach_file" />
+                      </template>
+                    </q-file>
+                  </div>
                 </div>
-              </q-form>
-            </fieldset>
-          </div>
+              </fieldset>
+
+              <fieldset class="border q-pa-lg">
+                <legend class="text-header">รายละเอียด</legend>
+                <div class="q-gutter-y-md">
+                  <div>
+                    <label class="text-file">เลขที่คำสั่ง</label>
+                    <q-input
+                      :outlined="true"
+                      dense
+                      lazy-rules
+                      :readonly="!true"
+                      :borderless="!true"
+                      v-model="order"
+                      :rules="[(val) => !!val || `${'กรุณากรอกเลขที่คำสั่ง'}`]"
+                      hide-bottom-space
+                      :label="`${'เลขที่คำสั่ง'}`"
+                    />
+                  </div>
+                  <div>
+                    <label class="text-file">ปีที่ออกคำสั่ง</label>
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="years"
+                      :locale="'th'"
+                      autoApply
+                      year-picker
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
+                      <template #year="{ year }">{{ year + 543 }}</template>
+                      <template #year-overlay-value="{ value }">{{
+                        parseInt(value + 543)
+                      }}</template>
+                      <template #trigger>
+                        <q-input
+                          outlined
+                          dense
+                          lazy-rules
+                          :model-value="years + 543"
+                          :rules="[
+                            (val) => !!val || `${'กรุณาเลือกปีที่ออกคำสั่ง'}`,
+                          ]"
+                          hide-bottom-space
+                          :label="`${'ปีที่ออกคำสั่ง'}`"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-grey)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                  <div>
+                    <label class="text-file">วันที่ลงนาม</label>
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="date"
+                      :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
+                          outlined
+                          dense
+                          class="full-width datepicker"
+                          :model-value="date != null ? date2Thai(date) : null"
+                          :label="`${'วันที่มีผลออกคำสั่ง'}`"
+                          :rules="[
+                            (val) =>
+                              !!val || `${'กรุณาเลือกวันที่มีผลออกคำสั่ง'}`,
+                          ]"
+                        >
+                          <template v-slot:prepend>
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-grey)"
+                            >
+                            </q-icon>
+                          </template>
+                        </q-input>
+                      </template>
+                    </datepicker>
+                  </div>
+                </div>
+              </fieldset>
+            </div>
+          </q-form>
         </template>
       </q-splitter>
     </div>
@@ -181,9 +287,13 @@
         label="เลือกรายชื่อส่งสำเนา"
       >
       </q-btn>
-      <q-btn unelevated label="บันทึก" color="public" @click="save">
-        <!-- icon="mdi-content-save-outline"
-        <q-tooltip>บันทึก</q-tooltip> -->
+      <q-btn
+        unelevated
+        label="บันทึก"
+        :color="validateForm() ? 'public' : 'grey'"
+        :disable="!validateForm()"
+        @click="save"
+      >
       </q-btn>
 
       <!-- <q-btn flat round color="primary" icon="chevron_right" @click="next">
@@ -193,21 +303,25 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted, computed } from "vue";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import type { PDFDocumentLoadingTask } from "pdfjs-dist/types/src/display/api";
 import type { QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
 
-onUnmounted(() => {
-  window.removeEventListener("resize", (e: any) => {
-    myEventHandler(e);
-  });
-});
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+
+// onUnmounted(() => {
+//   window.removeEventListener("resize", (e: any) => {
+//     myEventHandler(e);
+//   });
+// });
 
 onMounted(async () => {
-  window.addEventListener("resize", (e: any) => {
-    myEventHandler(e);
-  });
+  //   window.addEventListener("resize", (e: any) => {
+  //     myEventHandler(e);
+  //   });
 
   const pdfData = usePDF(
     "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
@@ -219,12 +333,12 @@ onMounted(async () => {
   }, 1000);
 });
 
-const myEventHandler = (e: any) => {
-  console.log("e", e.target.innerWidth);
-  //   if (vuePDFRef !== null) {
-  //     vuePDFRef.value.reload();
-  //   }
-};
+// const myEventHandler = (e: any) => {
+//   console.log("e", e.target.innerWidth);
+//   if (vuePDFRef !== null) {
+//     vuePDFRef.value.reload();
+//   }
+// };
 
 const pdfSrc = ref<PDFDocumentLoadingTask | undefined>();
 const numOfPages = ref<number>(0);
@@ -252,6 +366,10 @@ const tab = ref<string>("main");
 const fileOrder = ref<any>(null);
 const fileTailer = ref<any>(null);
 
+const order = ref<string>("");
+const years = ref<number>(new Date().getFullYear());
+const date = ref<Date>(new Date());
+
 const onchangePage = (val: any) => {
   //   console.log(val);
   if (vuePDFRef !== null) {
@@ -260,7 +378,7 @@ const onchangePage = (val: any) => {
 };
 
 const save = () => {
-  if (myForm !== null) {
+  if (myForm.value !== null) {
     myForm.value!.validate().then((success: Boolean) => {
       if (success) {
         // yay, models are correct
@@ -269,6 +387,14 @@ const save = () => {
   }
 };
 
+const validateForm = () => {
+  return (
+    fileOrder.value !== null &&
+    fileOrder.value !== null &&
+    order.value.trim() !== ""
+  );
+};
+
 const getClass = (val: boolean) => {
   return {
     "card-header-active q-px-lg q-py-md cursor-pointer": val,