รายการคำสั่ง ==> API

src/modules/18_command/components/Main/DialogFormCommand.vue

@@ -6,7 +6,8 @@ import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { DataListCommand } from "@/modules/18_command/interface/response/Main";
+import type { FormCommand } from "@/modules/18_command/interface/request/Main";
+import type { DataCommandType } from "@/modules/18_command/interface/response/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -14,18 +15,19 @@ import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
 const router = useRouter();
-const { dialogConfirm, showLoader, hideLoader, messageError } =
+const { dialogConfirm, showLoader, hideLoader, messageError, success } =
   useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
 const isCopy = defineModel<boolean>("isCopy", { required: true });
+const commandId = defineModel<string>("commandId", { default: "" });
 
 const commandType = ref<string>("");
 const commandNo = ref<string>("");
-const commandYear = ref<string>("");
+const commandYear = ref<number>(new Date().getFullYear());
 
-const listCommand = ref<DataListCommand[]>([]);
-const commandOp = ref<DataListCommand[]>([]);
+const listCommand = ref<DataCommandType[]>([]);
+const commandOp = ref<DataCommandType[]>([]);
 
 async function fetchCommandType() {
   showLoader();
@@ -46,10 +48,29 @@ async function fetchCommandType() {
 
 function onSubmit() {
   dialogConfirm($q, () => {
-    !isCopy.value && router.push(`/command/edit/1234`);
-    console.log(commandNo.value);
-    console.log(commandYear.value);
-    onClose();
+    showLoader();
+    const body: FormCommand = {
+      commandYear: commandYear.value,
+      commandNo: commandNo.value,
+      commandTypeId: !isCopy.value ? commandType.value : undefined,
+    };
+    const path = !isCopy.value
+      ? config.API.command
+      : config.API.commandAction(commandId.value, "copy");
+
+    http[!isCopy.value ? "post" : "put"](path, body)
+      .then(async (res) => {
+        const id = await res.data.result;
+        router.push(`/command/edit/${id}`);
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        onClose();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
@@ -72,7 +93,7 @@ function filterSelector(val: string, update: Function, refData: string) {
 function onClose() {
   modal.value = false;
   commandNo.value = "";
-  commandYear.value = "";
+  commandYear.value = new Date().getFullYear();
 }
 
 watch(modal, () => {
@@ -130,7 +151,6 @@ watch(modal, () => {
                 v-model="commandNo"
                 hide-bottom-space
                 :label="`${'คำสั่งเลขที่'}`"
-                :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งเลขที่'}`]"
                 lazy-rules
               />
             </div>
@@ -138,17 +158,41 @@ watch(modal, () => {
               >/</label
             >
             <div class="col-5">
-              <q-input
-                class="inputgreen"
-                outlined
-                dense
+              <datepicker
+                menu-class-name="modalfix"
                 v-model="commandYear"
-                hide-bottom-space
-                :label="`${'พ.ศ.'}`"
-                mask="####"
-                :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
-                lazy-rules
-              />
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                class="inputgreen"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    hide-bottom-space
+                    :model-value="
+                      commandYear == null ? null : commandYear + 543
+                    "
+                    :label="`${'พ.ศ.'}`"
+                    :rules="[(val) => !!val || `${'กรุณากรอก พ.ศ.'}`]"
+                  >
+                    <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>
         </q-card-section>