check

2024-09-23 17:00:32 +07:00 · 2024-09-23 17:00:32 +07:00 · 3fc9258d99
commit 3fc9258d99
parent daa2054b56
5 changed files with 222 additions and 60 deletions
--- a/src/api/18_command/api.command.ts
+++ b/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}`
 };
--- a/src/modules/18_command/components/Step/1_Detail.vue
+++ b/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
--- a/src/modules/18_command/components/Step/2_ListPersons.vue
+++ b/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">
--- a/src/modules/18_command/interface/request/Main.ts
+++ b/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 };
--- a/src/modules/18_command/views/detail.vue
+++ b/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>