เครื่องราช => permission รอบการเสนอ

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

@@ -0,0 +1,391 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** import Store*/
+import { useCounterMixin } from "@/stores/mixin";
+
+/** use*/
+const $q = useQuasar();
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+  success,
+} = useCounterMixin();
+
+/**
+ * props
+ */
+const modal = defineModel<boolean>("modal", { required: true });
+const actionType = defineModel<string>("actionType", { required: true });
+const roundId = defineModel<string>("roundId", { required: true });
+const props = defineProps({
+  fetchList: { type: Function, required: true },
+});
+
+const title = computed(() => {
+  return actionType.value === "view"
+    ? "รายละเอียดรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์"
+    : actionType.value === "edit"
+    ? "แก้ไขข้อมูล"
+    : "เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์";
+});
+
+const readonly = computed(() => {
+  return actionType.value === "view" ? true : false;
+});
+
+const options = ref([
+  { label: "รอบการเสนอขอพระราชทานเครื่องราชฯ รอบที่ 1", value: 1 },
+  { label: "รอบการเสนอขอพระราชทานเครื่องราชฯ รอบที่ 2", value: 2 },
+]);
+
+const roundInsig = ref<any>();
+const yearly = ref<number>(new Date().getFullYear());
+const dateStart = ref<Date | null>(null);
+const dateEnd = ref<Date | null>(null);
+const datelast = ref<number | null>(null);
+const files = ref<any>();
+const fileDocDataUpload = ref<File[]>([]);
+
+/**
+ * Function เรียกข้อมูลของรอบการเสนอขอ
+ */
+function fetchData() {
+  showLoader();
+  http
+    .get(config.API.getRoundInsignia(roundId.value))
+    .then((res) => {
+      const data = res.data.result;
+      roundInsig.value =
+        options.value.filter((r: any) => r.value == data.period_round).length >
+        0
+          ? options.value.filter((r: any) => r.value == data.period_round)[0]
+          : null;
+      yearly.value = data.period_year;
+      datelast.value = data.period_amount;
+      dateStart.value = new Date(data.period_start);
+      dateEnd.value = new Date(data.period_end);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**  Function อัพเดทวันที่เริ่มต้น และ สิ้นสุด */
+function updateDateRange() {
+  if (roundInsig.value.value == 1) {
+    dateStart.value = new Date(yearly.value, 9, 1);
+    dateEnd.value = new Date(yearly.value + 1, 3, 29);
+  } else if (roundInsig.value.value == 2) {
+    dateStart.value = new Date(yearly.value + 1, 3, 29);
+    dateEnd.value = new Date(yearly.value + 1, 4, 29);
+  }
+}
+
+/**
+ * Function อัพเดทปี
+ * @param year รับค่าปี คศ
+ */
+function updateYear(year: number) {
+  yearly.value = year;
+  updateDateRange();
+}
+
+/**
+ * Function อัพโหลดไฟล์
+ * @param files ไฟล์
+ */
+function fileUploadDoc(files: any) {
+  files.forEach((file: any) => {
+    fileDocDataUpload.value.push(file);
+  });
+}
+
+/**
+ * Function บันทึกข้อมูล
+ */
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const formData = new FormData();
+    const name = `รอบการเสนอขอพระราชทานเครื่องราชฯ รอบที่ ${
+      roundInsig.value.value
+    }  ปี ${yearly.value + 543} `;
+    formData.append("name", name);
+    formData.append("year", yearly.value.toString());
+    formData.append("amount", datelast.value ? datelast.value.toString() : "");
+    formData.append("round", roundInsig.value.value);
+    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);
+    const url =
+      actionType.value !== "edit"
+        ? config.API.listRoundInsignia()
+        : config.API.editRoundInsignia(roundId.value);
+
+    const httpMethod = actionType.value !== "edit" ? http.post : http.put;
+
+    httpMethod(url, formData)
+      .then(async () => {
+        await props.fetchList();
+        onCloseDialog();
+        await success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function onCloseDialog() {
+  modal.value = false;
+  roundInsig.value = "";
+  yearly.value = new Date().getFullYear();
+  dateStart.value = null;
+  dateEnd.value = null;
+  datelast.value = null;
+  files.value = null;
+  fileDocDataUpload.value = [];
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      if (actionType.value !== "") {
+        fetchData();
+      }
+    }
+  }
+);
+
+const classInput = (val: boolean) => {
+  return {
+    "full-width inputgreen cursor-pointer": val,
+    "full-width cursor-pointer": !val,
+  };
+};
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 1200px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader :tittle="title" :close="onCloseDialog" />
+        <q-separator />
+
+        <q-card-section>
+          <div class="col-12 row q-col-gutter-md">
+            <div class="col-md-10 col-xs-12">
+              <q-select
+                :class="classInput(!readonly)"
+                :readonly="readonly"
+                dense
+                outlined
+                v-model="roundInsig"
+                :options="options"
+                option-value="value"
+                option-label="label"
+                label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
+                @update:model-value="updateDateRange"
+                :rules="[(val) => !!val || `${'กรุณาเลือกรอบที่'}`]"
+                hide-bottom-space
+                lazy-rules
+              />
+            </div>
+            <div class="col-md-2 col-xs-12">
+              <datepicker
+                :class="classInput(!readonly)"
+                :readonly="readonly"
+                menu-class-name="modalfix"
+                v-model="yearly"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                @update:modelValue="updateYear"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    :class="classInput(!readonly)"
+                    :readonly="readonly"
+                    dense
+                    outlined
+                    hide-bottom-space
+                    :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>
+            </div>
+            <div class="col-md-5 col-xs-12">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateStart"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :class="classInput(!readonly)"
+                :readonly="readonly"
+                :max-date="dateEnd"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    :class="classInput(!readonly)"
+                    :readonly="readonly"
+                    outlined
+                    dense
+                    class="full-width datepicker"
+                    :model-value="
+                      dateStart != null ? date2Thai(dateStart) : null
+                    "
+                    :label="`${'วันเริ่มต้น'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันเริ่มต้น'}`]"
+                    hide-bottom-space
+                  >
+                    <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-md-5 col-xs-12">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateEnd"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                :class="classInput(!readonly)"
+                :readonly="readonly"
+                :min-date="dateStart"
+              >
+                <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 || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`,
+                    ]"
+                    :class="classInput(!readonly)"
+                    :readonly="readonly"
+                    hide-bottom-space
+                  >
+                    <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-md-2 col-xs-12">
+              <q-input
+                :class="classInput(!readonly)"
+                :readonly="readonly"
+                dense
+                outlined
+                v-model="datelast"
+                label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
+                mask="###"
+                :rules="[
+                  (val) =>
+                    !!val || `${'กรุณากรอกจำนวนวันแจ้งเตือนก่อนวันสิ้นสุด'}`,
+                ]"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-md-12 col-xs-12">
+              <q-file
+                :class="classInput(!readonly)"
+                :readonly="readonly"
+                outlined
+                dense
+                v-model="files"
+                @added="fileUploadDoc"
+                label="อัปโหลดเอกสารประกอบ"
+                hide-bottom-space
+                lazy-rules
+                accept=".pdf,.xlsx,.doc"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right" v-if="actionType !== 'view'">
+          <q-btn label="บันทึก" color="secondary" type="submit" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, useAttrs, onMounted } from "vue";
+import { checkPermission } from "@/utils/permissions";
 import router from "@/router";
 import { useQuasar } from "quasar";
 import config from "@/app.config";
@@ -12,10 +13,13 @@ import type {
   ColId,
 } from "@/modules/07_insignia/interface/request/Main";
 
+import DialogDetail from "@/modules/07_insignia/components/1_Proposals/DialogDetail.vue";
+
 /** import Store*/
 import { useCounterMixin } from "@/stores/mixin";
 import { useInsigniaDataStore } from "@/modules/07_insignia/store";
-/** useStroe */
+
+/** use */
 const storeInsignia = useInsigniaDataStore();
 const mixin = useCounterMixin();
 const {
@@ -114,7 +118,7 @@ async function fetchData() {
           e.period_end == null ? null : date2Thai(new Date(e.period_end)),
         period_isActive: e.period_isActive,
         period_doc: e.period_doc,
-        period_status: e.period_status.result,
+        period_status: e.period_status,
         statusRoyal: storeInsignia.convertStatus(e.period_status),
       }));
     })
@@ -140,9 +144,9 @@ function clickDelete(id: string) {
     showLoader();
     await http
       .delete(config.API.RoundInsignia(id))
-      .then(() => {
-        success($q, "ลบข้อมูลการเสนอขอสำเร็จ");
-        fetchData();
+      .then(async () => {
+        await fetchData();
+        await success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
@@ -207,6 +211,16 @@ const pagination = ref({
 onMounted(async () => {
   await fetchData();
 });
+
+const modalForm = ref<boolean>(false);
+const actionType = ref<string>("");
+const roundId = ref<string>("");
+
+function onOpenFormDetail(action: string = "", id: string = "") {
+  modalForm.value = true;
+  actionType.value = action;
+  roundId.value = id;
+}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
@@ -217,8 +231,8 @@ onMounted(async () => {
       <div class="row col-12 q-col-gutter-sm">
         <div>
           <q-btn
-            @click="clickAdd()"
-            size="12px"
+            v-if="checkPermission($route)?.attrIsCreate"
+            @click="onOpenFormDetail()"
             flat
             round
             color="add"
@@ -288,28 +302,14 @@ onMounted(async () => {
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
                 <span class="text-weight-medium">{{ col.label }}</span>
               </q-th>
+              <q-th auto-width />
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td>
-                <!-- <q-icon
-                  v-if="props.row.period_isActive == true"
-                  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-btn
+            <q-tr :props="props">
+              <q-td auto-width>
+                <!-- <q-btn
                   dense
-                  size="12px"
                   flat
                   round
                   color="primary"
@@ -317,24 +317,41 @@ onMounted(async () => {
                   icon="mdi-account-check"
                 >
                   <q-tooltip>ผู้ได้รับเครื่องราชฯ</q-tooltip>
-                </q-btn>
+                </q-btn> -->
+
                 <q-btn
-                  v-if="props.row.period_doc !== null"
+                  v-if="checkPermission($route)?.attrIsGet"
                   dense
-                  type="a"
-                  size="12px"
                   flat
-                  target="_blank"
                   round
-                  color="light-blue-8"
-                  icon="mdi-file-download"
-                  :href="props.row.period_doc"
+                  color="info"
+                  @click="onOpenFormDetail('view', props.row.period_id)"
+                  icon="mdi-eye"
                 >
-                  <q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
+                  <q-tooltip>รายละเอียด</q-tooltip>
+                </q-btn>
+
+                <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsGet &&
+                    checkPermission($route)?.attrIsUpdate &&
+                    props.row.period_status !== 'DONE'
+                  "
+                  dense
+                  flat
+                  round
+                  color="edit"
+                  @click="onOpenFormDetail('edit', props.row.period_id)"
+                  icon="edit"
+                >
+                  <q-tooltip>แก้ไขข้อมูล</q-tooltip>
                 </q-btn>
                 <q-btn
+                  v-if="
+                    checkPermission($route)?.attrIsDelete &&
+                    props.row.period_status !== 'DONE'
+                  "
                   dense
-                  size="12px"
                   flat
                   round
                   color="red"
@@ -345,21 +362,42 @@ onMounted(async () => {
                 </q-btn>
               </q-td>
 
-              <q-td
-                v-for="col in props.cols"
-                :key="col.id"
-                @click="clickEdit(props.row)"
-              >
+              <q-td v-for="col in props.cols" :key="col.id">
                 <div>
                   {{ col.value }}
                 </div>
               </q-td>
+              <q-td auto-width>
+                <q-btn
+                  v-if="
+                    props.row.period_doc !== null &&
+                    checkPermission($route)?.attrIsGet
+                  "
+                  dense
+                  type="a"
+                  flat
+                  target="_blank"
+                  round
+                  color="light-blue-8"
+                  icon="mdi-file-download"
+                  :href="props.row.period_doc"
+                >
+                  <q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
+                </q-btn>
+              </q-td>
             </q-tr>
           </template>
         </d-table>
       </div>
     </div>
   </q-card>
+
+  <DialogDetail
+    v-model:modal="modalForm"
+    :actionType="actionType"
+    :roundId="roundId"
+    :fetchList="fetchData"
+  />
 </template>
 
 <style lang="scss" scope>

src/modules/07_insignia/router.ts

@@ -35,26 +35,26 @@ export default [
       Role: "STAFF",
     },
   },
-  {
-    path: "/insignia/round/:id",
-    name: "roundAddEdit",
-    component: roundAdd,
-    meta: {
-      Auth: true,
-      Key: "SYS_INSIGNIA_ROUND",
-      Role: "STAFF",
-    },
-  },
-  {
-    path: "/insignia/round/add",
-    name: "roundAdd",
-    component: roundAdd,
-    meta: {
-      Auth: true,
-      Key: "SYS_INSIGNIA_ROUND",
-      Role: "STAFF",
-    },
-  },
+  // {
+  //   path: "/insignia/round/:id",
+  //   name: "roundAddEdit",
+  //   component: roundAdd,
+  //   meta: {
+  //     Auth: true,
+  //     Key: "SYS_INSIGNIA_ROUND",
+  //     Role: "STAFF",
+  //   },
+  // },
+  // {
+  //   path: "/insignia/round/add",
+  //   name: "roundAdd",
+  //   component: roundAdd,
+  //   meta: {
+  //     Auth: true,
+  //     Key: "SYS_INSIGNIA_ROUND",
+  //     Role: "STAFF",
+  //   },
+  // },
 
   {
     path: "/insignia/record",