check

src/modules/18_command/components/Step/1_Detail.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { onMounted, reactive, ref, watch } from "vue";
 import { useQuasar } from "quasar";
-
 import { useRoute } from "vue-router";
+
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
@@ -15,56 +15,36 @@ import DialogPerview from "@/modules/18_command/components/Step/Dialog1_Perview.
 const $q = useQuasar();
 const route = useRoute();
 const store = useCommandDetail();
-const { showLoader, hideLoader, messageError } = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 
 /**
  * props
  */
 const isChangeData = defineModel<boolean>("isChangeData", { required: true });
-const { onCheckChangeData } = defineProps({
+const props = defineProps({
   onCheckChangeData: { type: Function, required: true },
+  fetchDataCommandList: { type: Function, required: true },
+  formCommandList: { type: Object, required: true },
 });
 
 const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
 // ฟอร์มข้อมูล
 const formData = reactive<FormDataDetail>({
+  id: "",
+  status: "",
+  commandTypeName: "",
   commandNo: "",
   commandYear: null,
-  // commandName: "",
   detailHeader: "",
   detailBody: "",
   detailFooter: "",
   issue: null,
+  commandAffectDate: null, //วันที่ลงนาม
+  commandExcecuteDate: null, //วันที่คำสั่งมีผล
+  commandSysId: "", // ประเภท คำสั่ง
 });
 const modalPreview = ref<boolean>(false); //แสดงตัวอย่าง
 
-/**
- * ฟังก์ชันดึงข้อมูลรายละเอียดคำสั่ง
- *
- * กำหนดข้อมูลที่ได้รับมาให้กับตัวแปร `formData`
- */
-async function fetchData() {
-  showLoader();
-  await http
-    .get(config.API.commandAction(commandId.value, "tab1"))
-    .then(async (res) => {
-      const data = await res.data.result;
-      formData.commandNo = data.commandNo;
-      formData.commandYear = data.commandYear;
-      formData.detailHeader = data.detailHeader;
-      formData.detailBody = data.detailBody;
-      formData.detailFooter = data.detailFooter;
-      formData.issue = data.issue;
-      isChangeData.value = false;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 /**
  * ฟังก์ชันบันทึกข้อมูลรายละเอียดคำสั่ง
  *
@@ -75,7 +55,7 @@ async function onSubmit() {
   await http
     .put(config.API.commandAction(commandId.value, "tab1"), formData)
     .then(() => {
-      fetchData();
+      props.fetchDataCommandList();
     })
     .catch((err) => {
       messageError($q, err);
@@ -89,9 +69,14 @@ async function onSubmit() {
 /**
  * ทำงานเมื่อ Components ถูกเรียกใช้งาน
  */
-onMounted(async () => {
-  await fetchData();
-});
+watch(
+  () => props.formCommandList,
+  () => {
+    const list = props.formCommandList;
+    console.log("🚀 ~ props.formCommandList:", props.formCommandList)
+    console.log("🚀 ~ onMounted ~ list:", list);
+  }
+);
 
 /**
  * ฟังก์ชันที่ต้องการนำฟังก์ชันออกไปใช้ใน Components แม่
@@ -104,16 +89,8 @@ defineExpose({
 <template>
   <q-card-section>
     <div class="row q-col-gutter-sm">
-      <div class="col-12 row justify-end">
-        <q-btn
-          label="แสดงตัวอย่าง"
-          color="info"
-          icon="mdi-eye"
-          @click.prevent="modalPreview = true"
-        />
-      </div>
-
       <!-- คำสั่งเลขที่ -->
+       {{ props.formCommandList }}
       <div class="col-4 row">
         <div class="col-6">
           <q-input
@@ -187,7 +164,92 @@ defineExpose({
           @update:model-value="onCheckChangeData()"
         />
       </div>
-
+      <div class="col-3">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="formData.commandAffectDate"
+          :locale="'th'"
+          autoApply
+          :enableTimePicker="false"
+          :class="store.classInput(!store.readonly)"
+          :readonly="store.readonly"
+          @update:model-value="onCheckChangeData()"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              hide-bottom-space
+              :class="store.classInput(!store.readonly)"
+              :readonly="store.readonly"
+              :model-value="
+                formData.commandAffectDate == null
+                  ? null
+                  : date2Thai(formData.commandAffectDate)
+              "
+              :label="`${'วันที่ลงนาม'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+      </div>
+      <div class="col-3">
+        <datepicker
+          menu-class-name="modalfix"
+          v-model="formData.commandExcecuteDate"
+          :locale="'th'"
+          autoApply
+          :enableTimePicker="false"
+          :class="store.classInput(!store.readonly)"
+          :readonly="store.readonly"
+          @update:model-value="onCheckChangeData()"
+        >
+          <template #year="{ year }">
+            {{ year + 543 }}
+          </template>
+          <template #year-overlay-value="{ value }">
+            {{ parseInt(value + 543) }}
+          </template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              hide-bottom-space
+              :class="store.classInput(!store.readonly)"
+              :readonly="store.readonly"
+              :model-value="
+                formData.commandExcecuteDate == null
+                  ? null
+                  : date2Thai(formData.commandExcecuteDate)
+              "
+              :label="`${'วันที่คำสั่งมีผล'}`"
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+      </div>
       <!-- เนื้อหาคำสั่งส่วนต้น -->
       <div class="col-12">
         <q-input