ui เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์

src/modules/07_insignia/router.ts

@@ -3,6 +3,10 @@
  */
 
 const Main = () => import("@/modules/07_insignia/views/Main.vue");
+const insigniaProposals = () =>
+  import("@/modules/07_insignia/views/1_Proposals/listProposals.vue");
+const roundAdd = () =>
+  import("@/modules/07_insignia/views/1_Proposals/addProposals.vue");
 
 export default [
   {
@@ -15,4 +19,24 @@ export default [
       Role: "insignia",
     },
   },
+  {
+    path: "/insignia/round-proposals",
+    name: "insigniaProposals",
+    component: insigniaProposals,
+    meta: {
+      Auth: true,
+      Key: [7.1],
+      Role: "insignia",
+    },
+  },
+  {
+    path: "/insignia/round/add",
+    name: "roundAdd",
+    component: roundAdd,
+    meta: {
+      Auth: true,
+      Key: [7.1],
+      Role: "insignia",
+    },
+  },
 ];

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

@@ -0,0 +1,171 @@
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์</div>
+    </div>
+    <div class="col-12">
+      <q-card bordered>
+        <div class="col-12 row q-col-gutter-md q-pa-md">
+          <div class="col-xs-12 col-sm-12 row">
+            <q-separator />
+            <div class="col-12 row q-pa-sm q-col-gutter-sm">
+              <q-input
+                class="col-10"
+                dense
+                outlined
+                v-model="roundInsig"
+                label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
+              />
+              <q-input
+                class="col-2"
+                dense
+                outlined
+                v-model="year"
+                label="ปีที่เสนอ"
+              />
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateStart"
+                :locale="'th'"
+                autoApply
+                class="col-xs-12 col-sm-5"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="col-xs-12 col-sm-5"
+                    :model-value="
+                      dateStart != null ? date2Thai(dateStart) : null
+                    "
+                    :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>
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateEnd"
+                class="col-xs-12 col-sm-5"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="col-xs-12 col-sm-4"
+                    :model-value="dateEnd != null ? date2Thai(dateEnd) : null"
+                    :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>
+
+              <q-input
+                class="col-xs-12 col-sm-2"
+                dense
+                outlined
+                v-model="datelast"
+                label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
+              />
+              <q-file
+                class="col-xs-12 col-sm-10"
+                outlined
+                dense
+                v-model="files"
+                label="อัปโหลดเอกสารประกอบ"
+                hide-bottom-space
+                lazy-rules
+                :rules="[
+                  (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                ]"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </div>
+        <q-separator />
+        <q-separator />
+        <div class="row col-12 q-pa-sm">
+          <q-space />
+          <q-btn
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+            @click="router.go(-1)"
+          />
+        </div>
+      </q-card>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const router = useRouter();
+const $q = useQuasar();
+const dateStart = ref<any>(new Date());
+const dateEnd = ref<any>(new Date());
+
+const routeName = router.currentRoute.value.name;
+</script>

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

@@ -118,9 +118,9 @@
                   round
                   color="indigo"
                   @click.stop.prevent="clickProposals(props.row.id)"
-                  icon="mdi-clipboard-arrow-down"
+                  icon="mdi-file-download"
                 >
-                  <q-tooltip>ดาวน์โหลดเอกสารประกอบ</q-tooltip>
+                  <q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
                 </q-btn>
               </q-td>
               <q-td auto-width>
@@ -284,10 +284,7 @@ const clickDelete = (id: string) => {
 };
 
 const clickAdd = () => {
-  modal.value = true;
-};
-const clickClose = async () => {
-  modal.value = false;
+  router.push({ name: "roundAdd" });
 };
 
 // ค้นหาในตาราง