check

src/modules/18_command/views/detail.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, reactive } from "vue";
+import { useQuasar } from "quasar";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useRouter, useRoute } from "vue-router";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { ItemTabs } from "@/modules/18_command/interface/index/Main";
+import type { FormDataDetail } from "@/modules/18_command/interface/request/Main";
 
 import Main from "@/modules/18_command/components/Step/0_Main.vue"; //ประมวลผลคำสั่ง
 import Detail from "@/modules/18_command/components/Step/1_Detail.vue"; //รายละเอียดคำสั่ง
@@ -12,8 +17,11 @@ import ListPersons from "@/modules/18_command/components/Step/2_ListPersons.vue"
 import ReceivedCopy from "@/modules/18_command/components/Step/3_ReceivedCopy.vue"; //รายชื่อผู้ได้รับสำเนาคำสั่ง
 import Attached from "@/modules/18_command/components/Step/4_Attached.vue"; //คำสั่งและบัญชีแนบท้าบ
 
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
+const commandId = ref<string>(route.params.id.toString()); //ID คำสั่ง
 const store = useCommandDetail();
 
 const childDetailRef = ref<InstanceType<typeof Detail> | null>(null); //ref components รายละเอียดคำสั่ง
@@ -41,6 +49,21 @@ const tabsManu = ref<ItemTabs[]>([
   { label: "พรีวิวคำสั่ง", name: "Attached" },
 ]);
 
+const formCommandList = reactive<FormDataDetail>({
+  id: "",
+  status: "",
+  commandTypeName: "",
+  commandNo: "",
+  commandYear: null,
+  detailHeader: "",
+  detailBody: "",
+  detailFooter: "",
+  issue: null,
+  commandAffectDate: null, //วันที่ลงนาม
+  commandExcecuteDate: null, //วันที่คำสั่งมีผล
+  commandSysId: "", // ประเภท คำสั่ง
+});
+
 /**
  * ฟังก์ชันเช็คการเปลี่นรแปลงของข้อมูล
  *
@@ -50,6 +73,40 @@ function onCheckChangeData() {
   isChangeData.value = true;
 }
 
+/**
+ * ฟังก์ชันดึงข้อมูลรายละเอียดคำสั่ง
+ *
+ * กำหนดข้อมูลที่ได้รับมาให้กับตัวแปร `formData`
+ */
+async function fetchDataCommandList() {
+  showLoader();
+  await http
+    .get(config.API.commandAction(commandId.value, "tab1"))
+    .then(async (res) => {
+      const data = await res.data.result;
+      formCommandList.id = data.id;
+      formCommandList.status = data.status;
+      formCommandList.commandTypeName = data.commandTypeName;
+      formCommandList.commandNo = data.commandNo;
+      formCommandList.commandYear = data.commandYear;
+      formCommandList.detailHeader = data.detailHeader;
+      formCommandList.detailBody = data.detailBody;
+      formCommandList.detailFooter = data.detailFooter;
+      formCommandList.issue = data.issue;
+      formCommandList.commandAffectDate = data.commandAffectDate;
+      formCommandList.commandExcecuteDate = data.commandExcecuteDate;
+      formCommandList.commandSysId = data.commandSysId;
+
+      isChangeData.value = false;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 /**
  * ดูการเปลี่ยนแปลงของ tabs เมื่อมีการเปลี่ยนแปลง
  *
@@ -74,8 +131,9 @@ watch(tabs, (newValue, oldValue) => {
  *
  * กำหนดค่า `store.readonly` เมื่อ  route.name เป็น "commandViewDetailPage" จะอ่านข้อมูลได้อย่างเดียว
  */
-onMounted(() => {
+onMounted(async () => {
   store.readonly = route.name === "commandViewDetailPage";
+  await fetchDataCommandList();
 });
 </script>
 
@@ -134,6 +192,8 @@ onMounted(() => {
               ref="childDetailRef"
               v-model:is-change-data="isChangeData"
               :on-check-change-data="onCheckChangeData"
+              :fetch-data-command-list="fetchDataCommandList"
+              :form-command-list="formCommandList"
             />
           </q-card>
         </q-tab-panel>
@@ -144,6 +204,8 @@ onMounted(() => {
               ref="childListPersonsRef"
               v-model:is-change-data="isChangeData"
               :on-check-change-data="onCheckChangeData"
+              :form-command-list="formCommandList"
+              :fetch-data-command-list="fetchDataCommandList"
             />
           </q-card>
         </q-tab-panel>