check

src/api/18_command/api.command.ts

@@ -1,6 +1,7 @@
 import env from "../index";
 
 const command = `${env.API_URI}/org/command`;
+const commandSalary = `${env.API_URI}/org/commandSalary`;
 
 export default {
   commandType: `${command}Type/list`, //ประเภทคำสั่ง
@@ -8,4 +9,6 @@ export default {
   command, //สร้างคำสั่ง
   commandAction: (commandId: string, type: string) =>
     `${command}/${type}/${commandId}`,
+
+  commandSalaryList:(command:string)=>`${commandSalary}/list&commandSysId=${command}`
 };

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 () => {
+watch(
-  await fetchData();
+  () => 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

src/modules/18_command/components/Step/2_ListPersons.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted, reactive } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { usePosSalaryDataStore } from "@/modules/18_command/store/PosSalary";
 import { useCommandDetail } from "@/modules/18_command/store/DetailStore";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOption } from "@/modules/18_command/interface/index/Main";
+import type { FormDataDetail } from "@/modules/18_command/interface/request/Main";
 
 import DialogAddPerson from "@/modules/18_command/components/Step/Dialog2_AddPerson.vue";
 import DialogSalary from "@/modules/18_command/components/Step/Dialog2_Salary.vue";
@@ -25,8 +28,25 @@ const {
 } = useCounterMixin();
 
 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 formData = reactive<FormDataDetail>({
+  id: "",
+  status: "",
+  commandTypeName: "",
+  commandNo: "",
+  commandYear: null,
+  detailHeader: "",
+  detailBody: "",
+  detailFooter: "",
+  issue: null,
+  commandAffectDate: null, //วันที่ลงนาม
+  commandExcecuteDate: null, //วันที่คำสั่งมีผล
+  commandSysId: "", // ประเภท คำสั่ง
 });
 
 const posNoOptions = ref<DataOption[]>(storePosSalary.optionPos);
@@ -122,6 +142,18 @@ function filterSelector(val: string, update: Function, filtername: string) {
   }
 }
 
+function getCommandSalaryList() {
+  http
+    .get(config.API.commandSalaryList("PLACEMENT"))
+    .then((res) => {
+      console.log(res.data.result);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+
 function onSubmit() {}
 
 /**
@@ -130,6 +162,14 @@ function onSubmit() {}
 defineExpose({
   onSubmit,
 });
+
+onMounted(() => {
+  if (props.formCommandList) {
+    const list = props.formCommandList;
+    console.log("🚀 ~ onMounted ~ list:", list);
+  }
+  getCommandSalaryList();
+});
 </script>
 
 <template>
@@ -173,16 +213,6 @@ defineExpose({
       </div>
 
       <div class="col-12 row q-pb-sm items-center">
-        <q-btn
-          v-if="!store.readonly"
-          flat
-          round
-          color="primary"
-          icon="add"
-          @click="modalPerson = true"
-        >
-          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-        </q-btn>
         <q-space />
 
         <div class="items-center" style="display: flex">

src/modules/18_command/interface/request/Main.ts

@@ -12,13 +12,18 @@ interface FormCommand {
 }
 
 interface FormDataDetail {
+  id: string;
+  status: string;
   commandNo: string;
   commandYear: number | null;
-  // commandName: string;
   detailHeader: string;
   detailBody: string;
   detailFooter: string;
   issue: string | null;
+  commandAffectDate: Date | null;
+  commandExcecuteDate: Date | null;
+  commandSysId: string;
+  commandTypeName: string;
 }
 
 export type { FormQuery, FormCommand, FormDataDetail };

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>