Api รายการเครื่องราช

src/api/07_insignia/api.insignia.ts

@@ -8,5 +8,4 @@ export default {
   listRoundInsignia: (type: string) => `${insignia}/period/${type}`,
   editRoundInsignia: (id: string) => `${insignia}/period/${id}`,
   RoundInsignia: (id: string) => `${insignia}/period/${id}`,
-  docRoundInsignia: (id: string) => `${insignia}/period/${id}`,
 };

src/modules/07_insignia/components/1_Proposals/addProposals.vue

@@ -9,9 +9,13 @@
         flat
         color="primary"
         class="q-mr-sm"
-        @click="router.go(-1)"
+        @click="clickBack"
       />
-      <div>เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์</div>
+      {{
+        edit
+          ? "รอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์"
+          : "เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์"
+      }}
     </div>
     <q-form ref="myForm">
       <div class="col-12">
@@ -27,13 +31,40 @@
                   v-model="roundInsig"
                   label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
                 />
-                <q-input
+                <datepicker
+                  menu-class-name="modalfix"
+                  v-model="yearly"
                   class="col-2"
-                  dense
+                  :locale="'th'"
-                  outlined
+                  autoApply
-                  v-model="year"
+                  year-picker
-                  label="ปีที่เสนอ"
+                  :enableTimePicker="false"
-                />
+                  @update:modelValue="updateYear"
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      dense
+                      lazy-rules
+                      outlined
+                      :model-value="yearly + 543"
+                      :rules="[(val) => !!val || `${'กรุณาเลือกปีที่เสนอ'}`]"
+                      :label="`${'ปีที่เสนอ'}`"
+                    >
+                      <template v-slot:prepend>
+                        <q-icon
+                          name="event"
+                          class="cursor-pointer"
+                          style="color: var(--q-primary)"
+                        >
+                        </q-icon>
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
                 <datepicker
                   menu-class-name="modalfix"
                   v-model="dateStart"
@@ -54,7 +85,7 @@
                     <q-input
                       outlined
                       dense
-                      class="col-xs-12 col-sm-5"
+                      class="full-width datepicker"
                       :model-value="
                         dateStart != null ? date2Thai(dateStart) : null
                       "
@@ -160,7 +191,7 @@
 import type { QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
 import { useQuasar, QForm } from "quasar";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -169,45 +200,49 @@ const mixin = useCounterMixin();
 const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
   mixin;
 const router = useRouter();
+const route = useRoute();
 const $q = useQuasar();
-const id = ref<string>("");
+const id = ref<string>(route.params.id as string);
 const myForm = ref<QForm | null>(null); //form data input
 const edit = ref<boolean>(false);
-const dateStart = ref<any>(new Date());
+const dateStart = ref<Date>(new Date());
-const dateEnd = ref<any>(new Date());
+const dateEnd = ref<Date>(new Date());
-const files = ref<any[]>([]);
+const yearly = ref<number>(new Date().getFullYear());
+const files = ref<File[]>([]);
 const fileDocDataUpload = ref<File[]>([]);
 const roundInsig = ref<string>("");
-const yearOffer = ref<number>(0);
+const datelast = ref<number>(1);
-const datelast = ref<number>(0);
 
 onMounted(async () => {
   await fetchData();
 });
 
 const fetchData = async () => {
-  showLoader();
+  if (route.params.id) {
-  await http
+    edit.value = true;
-    .get(config.API.getRoundInsignia("insignia"))
+    showLoader();
-    .then((res) => {
+    console.log(id.value);
-      const data = res.data.result.periods;
-      const files = res.data.result.files;
 
-      id.value = data.id;
+    await http
-      roundInsig.value = data.period_name;
+      .get(config.API.getRoundInsignia(id.value))
-      yearOffer.value = data.year;
+      .then((res) => {
-      datelast.value = data.amount;
+        const data = res.data.result;
-      dateStart.value = data.startDate;
+        //   const files = res.data.result.files;
-      dateEnd.value = data.endDate;
+        id.value = data.period_id;
-
+        roundInsig.value = data.period_name;
-      files.value = files;
+        yearly.value = data.period_year;
-    })
+        datelast.value = data.period_amount;
-    .catch((e) => {
+        dateStart.value = new Date(data.period_start);
-      messageError($q, e);
+        dateEnd.value = new Date(data.period_end);
-    })
+        files.value = data.period_doc;
-    .finally(() => {
+      })
-      hideLoader();
+      .catch((e) => {
-    });
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
 };
 
 const routeName = router.currentRoute.value.name;
@@ -218,6 +253,10 @@ const fileUploadDoc = async (files: any) => {
   });
 };
 
+const updateYear = async (e: number) => {
+  yearly.value = e;
+};
+
 const uploadDocData = async () => {
   const formData = new FormData();
   if (fileDocDataUpload.value.length > 0) {
@@ -226,7 +265,7 @@ const uploadDocData = async () => {
     });
     showLoader();
     await http
-      .put(config.API.docRoundInsignia(id.value), formData)
+      .put(config.API.RoundInsignia(id.value), formData)
       .then((res) => {})
       .catch((e) => {
         messageError($q, e);
@@ -243,6 +282,18 @@ const uploadDocData = async () => {
 };
 
 const editData = async (id: string) => {
+  const formData = new FormData();
+  formData.append("Name", roundInsig.value);
+  formData.append("year", parseInt(yearly.value).toString());
+  formData.append("amount", datelast.value.toString());
+  if (dateStart.value !== null) {
+    formData.append("startDate", dateToISO(dateStart.value));
+  }
+  if (dateEnd.value !== null) {
+    formData.append("endDate", dateToISO(dateEnd.value));
+  }
+  formData.append("file", files.value.toString());
+  console.log(formData);
   showLoader();
   await http
     .put(config.API.editRoundInsignia(id))
@@ -255,6 +306,7 @@ const editData = async (id: string) => {
     .finally(async () => {
       hideLoader();
     });
+  console.log(formData);
 };
 
 const checkSave = async () => {
@@ -284,15 +336,17 @@ const checkSave = async () => {
 
 const addData = async () => {
   const formData = new FormData();
-  formData.append("Name", roundInsig.value);
+  formData.append("name", roundInsig.value);
-  formData.append("year", parseInt(yearOffer.value).toString());
+  formData.append("year", parseInt(yearly.value).toString());
-  formData.append("Amount", files.datelast);
+  formData.append("amount", datelast.value.toString());
   if (dateStart.value !== null) {
-    formData.append("StartDate", dateToISO(dateStart.value));
+    formData.append("startDate", dateToISO(dateStart.value));
   }
   if (dateEnd.value !== null) {
-    formData.append("EndDate", dateToISO(dateEnd.value));
+    formData.append("endDate", dateToISO(dateEnd.value));
   }
+  formData.append("file", files.value.toString());
+  console.log(formData);
 
   showLoader();
   await http

src/modules/07_insignia/components/1_Proposals/listProposals.vue

@@ -84,30 +84,36 @@
           </template>
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
-              <q-td key="round" :props="props">
+              <q-td key="round" :props="props" @click="clickEdit(props.row)">
                 {{ props.row.round }}
               </q-td>
-              <q-td key="year" :props="props">
+              <q-td key="year" :props="props" @click="clickEdit(props.row)">
                 {{ props.row.year }}
               </q-td>
-              <q-td key="startDate" :props="props">
+              <q-td
+                key="startDate"
+                :props="props"
+                @click="clickEdit(props.row)"
+              >
                 {{ props.row.startDate }}
               </q-td>
-              <q-td key="endDate" :props="props">
+              <q-td key="endDate" :props="props" @click="clickEdit(props.row)">
                 {{ props.row.endDate }}
               </q-td>
-              <q-td key="status" :props="props">
+              <q-td key="status" :props="props" @click="clickEdit(props.row)">
                 <q-icon
                   v-if="props.row.status == 'ยังไม่ได้เสนอ'"
                   name="mdi-close"
                   color="grey-5"
                   class="text-h5"
+                  @click="clickEdit(props.row)"
                 />
                 <q-icon
                   v-else
                   name="mdi-check"
                   color="positive"
                   class="text-h5"
+                  @click="clickEdit(props.row)"
                 />
               </q-td>
               <q-td key="statusRoyal" :props="props">
@@ -116,12 +122,14 @@
                   name="mdi-timer-sand"
                   color="orange"
                   class="text-h5"
+                  @click="clickEdit(props.row)"
                 />
                 <q-icon
                   v-else
                   name="mdi-check"
                   color="positive"
                   class="text-h5"
+                  @click="clickEdit(props.row)"
                 />
               </q-td>
               <q-td auto-width>
@@ -313,7 +321,7 @@ const rows = ref<FormProprsalsRound[]>([
     year: "2566",
     startDate: "2566",
     endDate: "31 พ.ค. 2566",
-    status: "ยังไม่ได้เสนอ",
+    status: "ไม่ใช้งาน",
     statusRoyal: "ยังไม่ได้เสนอ",
   },
   {
@@ -343,9 +351,11 @@ const fetchData = async () => {
           id: e.period_id,
           round: e.period_name,
           year: e.period_year,
+          amount: e.period_amount,
           startDate:
-            e.startDate == null ? null : date2Thai(new Date(e.startDate)),
+            e.period_start == null ? null : date2Thai(new Date(e.period_start)),
-          endDate: e.endDate == null ? null : date2Thai(new Date(e.endDate)),
+          endDate:
+            e.period_end == null ? null : date2Thai(new Date(e.period_end)),
           status: e.period_status,
         });
       });
@@ -358,6 +368,10 @@ const fetchData = async () => {
     });
 };
 
+const clickEdit = (col: any) => {
+  router.push(`/insignia/round-add/${col.id}`);
+};
+
 // หัวตาราง2
 const clickDelete = (id: string) => {
   $q.dialog({

src/modules/07_insignia/router.ts

@@ -45,6 +45,16 @@ export default [
       Role: "insignia",
     },
   },
+  {
+    path: "/insignia/round-add/:id",
+    name: "roundAddEdit",
+    component: roundAdd,
+    meta: {
+      Auth: true,
+      Key: [8.1],
+      Role: "insignia",
+    },
+  },
   {
     path: "/insignia/round-add",
     name: "roundAdd",