จัดสรร

src/modules/05_placement/components/probation/SummarySurvey.vue

@@ -32,9 +32,8 @@ const score2 = ref<number>(0);
 const score3 = ref<number>(0);
 const Allscore = ref<number>(0);
 
-const comment_1 = ref<string>("")
+const comment_1 = ref<string>("");
-const comment_2 = ref<string>("")
+const comment_2 = ref<string>("");
-
 
 const result = ref<any>();
 const result_option = ref<any>([
@@ -61,28 +60,26 @@ onMounted(() => {
 });
 
 // const fecthResult = async (id: string) => {
-  // await http
+// await http
-  //   .get(config.API.createformReport(id))
+//   .get(config.API.createformReport(id))
-  //   .then((res: any) => {
+//   .then((res: any) => {
-  //     let data = res.data.data.evaluate;
+//     let data = res.data.data.evaluate;
-  //     console.log(data);
+//     console.log(data);
-  //     date_start.value = data.date_start;
+//     date_start.value = data.date_start;
-  //     date_finish.value = data.date_finish;
+//     date_finish.value = data.date_finish;
-  //     develop.value = Number(data.develop_complete);
+//     develop.value = Number(data.develop_complete);
-  //     result.value = Number(data.pass_result);
+//     result.value = Number(data.pass_result);
-  //     reson.value = data.reson;
+//     reson.value = data.reson;
-  //     chairman_dated.value = data.chairman_dated;
+//     chairman_dated.value = data.chairman_dated;
-  //     director1_dated.value = data.director1_dated;
+//     director1_dated.value = data.director1_dated;
-  //     director2_dated.value = data.director2_dated;
+//     director2_dated.value = data.director2_dated;
-  //     status.value = false;
+//     status.value = false;
-  //     action.value = 'edit';
+//     action.value = 'edit';
-  //   })
+//   })
-  //   .catch((e) => {
+//   .catch((e) => {
-  //     console.log(e);
+//     console.log(e);
-  //   });
+//   });
 // };
-
-
 </script>
 
 <template>
@@ -154,27 +151,14 @@ onMounted(() => {
           type="textarea"
         />
       </div>
-
     </div>
 
     <div class="col-12 row q-mt-md">
-            <div class="col-12 text-top0 items-center">
+      <div class="text-top0 items-center">
         <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
         ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
       </div>
-          </div>
+      <q-space />
-
-          <div class="col-12 row no-margin">
-            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
-              <q-list dense>
-                <q-item dense tag="label" v-ripple>
-                  <q-item-section>
-                    <q-item-label>
-                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                      1.1. ความรู้ความสามารถ</q-item-label
-                    >
-                  </q-item-section>
-                  <q-item-section side>
       <q-rating
         :disable="!status"
         v-model="knowledge_level"
@@ -200,103 +184,6 @@ onMounted(() => {
           <q-tooltip>พึงพอใจมากที่สุด</q-tooltip>
         </template>
       </q-rating>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-card>
-          </div>
-          
-
-    <div class="row col-12 q-gutter-lg">
-
-      <div class=" col-xs-12 col-sm-11 ">
-        <div class="col-12 text-top0 row items-center">
-          เหตุผลอื่น ๆ ในการพิจารณา
-        </div>
-        <q-input
-          outlined
-          dense
-          class="col-12"
-          v-model="note"
-          lazy-rules
-          autogrow
-          hide-bottom-space
-          label="กรอกเหตุผลอื่น ๆ ในการพิจารณา"
-          :row="5"
-          :disable="!status"
-        />
-      </div>
-
-      <div class=" col-xs-12 col-sm-11">
-        <div class="col-12 row q-col-gutter-md">
-          <div class="col-xs-12 col-sm-6">
-            <div class="col-12 text-top0 items-center">
-              สรุปผลการทดลองปฏิบัติหน้าที่ราชการ
-            </div>
-            <div class="col-12">
-              <q-select
-                class="col-12"
-                dense
-                v-model="result"
-                outlined
-                :options="result_option"
-                option-label="name"
-                option-value="value"
-                label="เลือกสรุปผลการทดลองปฏิบัติหน้าที่ราชการ"
-                map-options
-                emit-value
-                :disable="!status"
-              />
-            </div>
-          </div>
-          <div class="col-xs-12 col-sm-6">
-            <div class="col-12 text-top0 items-center">
-              วัน เดือน ปี ที่ประเมิน
-            </div>
-            <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="date"
-                :locale="'th'"
-                autoApply
-                :readonly="!status"
-                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
-                    :disable="!status"
-                    class="full-width datepicker"
-                    :model-value="
-                      date != null ? date2Thai(date) : 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>
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 </template>

src/modules/07_insignia/components/4_Allocate/DialogForm.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { ref, watch, computed } from "vue";
+import { QForm, useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useResultDataStore } from "@/modules/07_insignia/storeResult";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import type { DataOption } from "@/modules/04_registry/components/profileType";
+import { useRouter, useRoute } from "vue-router";
+const DataStore = useResultDataStore();
+const $q = useQuasar();
+const myForm = ref<QForm>();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  notifyError,
+} = mixin;
+const router = useRouter();
+const routeName = router.currentRoute.value.name;
+const amount = ref<number | null>();
+const Org = ref<string | null>("");
+const grandCross = ref<string | null>("");
+const grandCrossOp = ref<DataOption[]>([
+  { id: "xxx1", name: "เครื่อง ราช" },
+  { id: "xxx2", name: "เครื่อง ราชฯ" },
+]);
+const OrgOp = ref<DataOption[]>([
+  { id: "xxx1", name: "หน่วยงาน กทม" },
+  { id: "xxx2", name: "หน่วยงาน กทมฯ" },
+]);
+
+const closeModal = () => {
+  props.close();
+  grandCross.value = null;
+  amount.value = null;
+};
+const props = defineProps({
+  modal: Boolean,
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  close: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  roundId: {
+    type: String,
+  },
+  action: {
+    type: String,
+  },
+  personId: {
+    type: String,
+  },
+  profileType: {
+    type: String,
+  },
+});
+
+const clickSave = async () => {
+  dialogConfirm($q, () => dataSave());
+};
+const dataSave = async () => {
+  if (routeName == "insigniaAllocate") {
+    const data = {
+        id: grandCross.value,
+        amount: amount.value,
+    };
+    console.log("saveMainPopup", data);
+    props.close();
+        grandCross.value = null;
+        amount.value = null;
+  }
+   else if(routeName == 'allocateDetail'){
+    const data = {
+        id: Org.value,
+        amount: amount.value,
+    };
+    console.log("saveDetailPopup", data);
+    props.close();
+        Org.value = null;
+        amount.value = null;
+   }
+};
+</script>
+
+<template>
+  <q-dialog v-model="props.modal" persistent>
+    <q-card style="width: 800px">
+      <q-toolbar class="q-py-sm">
+        <q-toolbar-title class="text-h6">บันทึกผล </q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="closeModal"
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator />
+
+      <q-form ref="myForm">
+        <div class="q-pa-md">
+          <div
+            class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
+          >
+            <div class="col-6">
+              <q-select
+                v-if="routeName == 'insigniaAllocate'"
+                hide-bottom-space
+                :options="DataStore.insigniaOp2"
+                dense
+                borderless
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                outlined
+                options-cover
+                v-model="grandCross"
+                :label="`เครื่องราชฯ`"
+              />
+              <q-select
+                v-else-if="routeName == 'allocateDetail'"
+                hide-bottom-space
+                :options="OrgOp"
+                dense
+                borderless
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                outlined
+                v-model="Org"
+                :label="`เครื่องราชฯ`"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <q-input
+                hide-bottom-space
+                outlined
+                class="inputgreen"
+                v-model="amount"
+                dense
+                lazy-rules
+                type="number"
+                label="จำนวน"
+              />
+              <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
+            </div>
+          </div>
+        </div>
+      </q-form>
+
+      <q-separator />
+      <div class="row justify-end q-py-sm">
+        <div class="q-px-md">
+          <q-btn label="บันทึก" @click="clickSave" color="public" />
+        </div>
+      </div>
+    </q-card>
+  </q-dialog>
+</template>

src/modules/07_insignia/components/4_Allocate/detail.vue

@@ -1,5 +1,15 @@
 <template>
   <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      icon="mdi-arrow-left"
+      unelevated
+      round
+      dense
+      flat
+      color="primary"
+      class="q-mr-sm"
+      @click="backHistory"
+    />
     หน่วยงานจัดสรรเครื่องราชอิสริยาภรณ์ {{ name }}
   </div>
   <q-card bordered class="q-py-sm row col-12">
@@ -142,6 +152,10 @@
       </div>
     </div>
   </q-card>
+  <DialogForm
+      :modal="modal"
+      :close="close"
+    />
 </template>
 
 <script setup lang="ts">
@@ -150,8 +164,7 @@ import type { QTableProps } from "quasar";
 import router from "@/router";
 import { useQuasar } from "quasar";
 import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue";
-import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
+import DialogForm from "@/modules/07_insignia/components/4_Allocate/DialogForm.vue";
-
 const name = ref<string>("");
 const $q = useQuasar(); //ใช้ noti quasar
 const modal = ref<boolean>(false);
@@ -166,7 +179,12 @@ const stat = ref<any>({
   sendInsig: 9,
   remainInsig: 1,
 });
-
+const backHistory = () => {
+  router.push(`/insignia/allocate/list-allocate`)
+}
+const close = () => {
+  modal.value = false;
+};
 const visibleColumns = ref<string[]>([
   "no",
   "organization",
@@ -256,24 +274,9 @@ const rows = ref<any[]>([
   },
 ]);
 
-// หัวตาราง2
-const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {})
-    .onCancel(() => {})
-    .onDismiss(() => {});
-};
 
 const clickAdd = () => {
-  router.push({ name: "allocateDetailAdd" });
+  modal.value = true
 };
 
 // const redirectToPage = (id?: string) => {

src/modules/07_insignia/components/4_Allocate/listAllocate.vue

@@ -1,63 +1,411 @@
+<script setup lang="ts">
+import { ref, onMounted, watch ,useAttrs} from "vue";
+// import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useResultDataStore } from "@/modules/07_insignia/storeResult";
+import type{ FormProprsalsRound } from "@/modules/07_insignia/interface/request/Main";
+import router from "@/router";
+import DialogForm from "@/modules/07_insignia/components/4_Allocate/DialogForm.vue";
+
+import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
+import type { QTableProps, QInput } from "quasar";
+import { useQuasar } from "quasar";
+
+const DataStore = useResultDataStore();
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+
+} = mixin;
+const redirectToPage = (id?: string) => {
+    router.push(`/insignia/allocate/detail/${id}`);
+  };
+const paging = ref<boolean>(true);
+  const paginationLabel = (start: string, end: string, total: string) => {
+    if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+    else return start + "-" + end + " ใน " + total;
+  };
+  const pagination = ref({
+    sortBy: "desc",
+    descending: false,
+    page: 1,
+    rowsPerPage: 10,
+  });
+const $q = useQuasar();
+const tab = ref<string>("");
+  const attrs = ref<any>(useAttrs());
+const selectRound = ref<string>();
+const selectRoundOption = ref<OptionData[]>([]);
+const modal = ref<boolean>(false);
+const action = ref<string>("");
+const personId = ref<string>();
+const profileType = ref<string>("");
+  const filterKeyword = ref<string>("");
+
+onMounted(async () => {
+  await fecthRound();
+  // await fecthInsignia();
+  await fecthInsigniaType();
+});
+const fecthRound = async () => {
+  await http
+    .get(config.API.noteround())
+    .then((res) => {
+      let data = res.data.result;
+      selectRoundOption.value = data;
+      selectRound.value = data[0].id;
+      // console.log(selectRound.value);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+// const fecthInsignia = async () => {
+//   await http
+//     .get(config.API.insignia)
+//     .then((res) => {
+//       // console.log(res);
+//       let data = res.data.result;
+//       DataStore.fetchDatainsignia(data);
+//     })
+//     .catch((err) => {
+//       console.log(err);
+//     });
+// };
+const fecthInsigniaType = async () => {
+  await http(config.API.insigniaType)
+    .then((res) => {
+      // console.log(res);
+      let data = res.data.result;
+      DataStore.fetchDatainsigniaType(data);
+      tab.value = DataStore.insigniaType[0].name;
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
+const visibleColumns = ref<string[]>([
+    "no",
+    "insignia",
+    "total",
+    "done",
+    "remain",
+  ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+const columns = ref<QTableProps["columns"]>([
+    {
+      name: "no",
+      align: "left",
+      label: "ลำดับ",
+      sortable: true,
+      field: "no",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+
+    {
+      name: "insignia",
+      align: "left",
+      label: "เครื่องราชอิสริยาภรณ์",
+      sortable: true,
+      field: "insignia",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "total",
+      align: "left",
+      label: "จำนวนทั้งหมด",
+      sortable: true,
+      field: "total",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "done",
+      align: "left",
+      label: "จัดสรรแล้ว",
+      sortable: true,
+      field: "done",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+    {
+      name: "remain",
+      align: "left",
+      label: "คงเหลือ",
+      sortable: true,
+      field: "remain",
+      headerStyle: "font-size: 14px",
+      style: "font-size: 14px",
+    },
+  ]);
+const rows = ref<FormProprsalsRound[]>([
+    {
+      id: "xx1",
+      insignia: "เบญจมาภรณ์มงกุฎไทย",
+      total: 10,
+      done: 9,
+      remain: 1,
+    },
+    {
+      id: "xx2",
+      insignia: "จัตุรถาภรณ์มงกุฎไทย",
+      total: 20,
+      done: 18,
+      remain: 2,
+    },
+    {
+      id: "xx3",
+      insignia: "ทวีติยาภรณ์มงกุฎไทย",
+      total: 15,
+      done: 10,
+      remain: 5,
+    },
+    {
+      id: "xx4",
+      insignia: "เหรียญเงินช้างเผือก",
+      total: 5,
+      done: 5,
+      remain: 0,
+    },
+  ]);
+
+
+const selectorInsignia = () => {
+  fecthlistInsignia();
+};
+const selectorRound = (round: string) => {
+  selectRound.value = round;
+};
+const fecthlistInsignia = async () => {
+  showLoader();
+  let data = {
+    insigniaTypeId: tab.value,
+    insigniaNoteId: selectRound.value,
+    insigniaId: DataStore.insignia,
+  };
+  await http
+    .post(config.API.noteSearch(), data)
+    .then((res) => {
+      let data = res.data.result;
+      // rows.value = [];
+      // rows.value = data.map((e: any) => ({
+      //   id: e.id,
+      //   citizenId: e.citizenId,
+      //   prefix: e.prefix,
+      //   position: e.position,
+      //   status: DataStore.status(e.status),
+      //   name: e.fullName,
+      //   type: e.requestInsignia,
+      //   employeeType: DataStore.profileType(e.profileType),
+      //   profileType: e.profileType,
+      //   page: e.page,
+      //   number: e.no,
+      //   vatnumber: e.number,
+      //   datepay: date2Thai(e.datePayment),
+      //   typepay: e.typePayment,
+      //   address: e.address,
+      // }));
+    })
+    .catch((err) => {
+      console.log(err);
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
+
+const close = () => {
+  modal.value = false;
+};
+
+const addData = () => {
+  modal.value = true;
+  action.value = "addData";
+};
+
+const editData = (data: any) => {
+  personId.value = data.id;
+  profileType.value = data.profileType;
+  action.value = "editData";
+  modal.value = true;
+};
+
+const save = () => {
+  console.log("save function");
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+};
+</script>
+
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     จัดสรรเครื่องราชอิสริยาภรณ์
   </div>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+  <q-card flat bordered class="col-12 q-my-md q-mt-sm rounded-borders">
-    <div class="row q-col-gutter-sm">
+    <div class="bg-grey-1 col-12 row items-center">
-      <div class="row col-12 q-col-gutter-sm">
+      <div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</div>
+      <div>
+        <selector
+          hide-bottom-space
+          borderless
+          dense
+          lazy-rules
+          emit-value
+          map-options
+          options-dense
+          option-label="name"
+          option-value="id"
+          v-model="selectRound"
+          :options="selectRoundOption"
+          use-input
+          input-debounce="0"
+          input-class="text-bold text-grey"
+          @update:emit-value="selectorRound"
+        >
+        </selector>
+      </div>
+    </div>
+    <q-separator />
+    <q-tabs
+      dense
+      v-model="tab"
+      align="left"
+      class="bg-white text-grey"
+      active-color="primary"
+      indicator-color="primary"
+    >
+      <div v-for="item in DataStore.insigniaType">
+        <q-tab :name="item.name" :label="item.label" />
+      </div>
+      <!-- <q-tab name="hight" label="ขั้นสายสะพาน" />
+      <q-tab name="low" label="ขั้นต่ำกว่าสายสะพาน" />
+      <q-tab name="medal" label="เหรียญตรา" /> -->
+
+
+    </q-tabs>
+
+    <q-separator />
+
+    <div>
+      <div v-for="item in DataStore.insigniaType">
+        <div v-if="tab == item.name" class="q-pa-md">
+          <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
+            <div>
+              <q-select
+                v-model="DataStore.insignia"
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                :label="`${'เครื่องราชฯ'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="DataStore.insigniaOp"
+                option-value="id"
+                :readonly="false"
+                :borderless="false"
+                style="min-width: 150px"
+                @update:model-value="selectorInsignia"
+              />
+            </div>
+
             <div>
               <q-btn
-            @click="clickAdd()"
+                @click="addData()"
                 size="12px"
                 flat
                 round
                 color="add"
                 icon="mdi-plus"
               >
-            <q-tooltip>เพิ่มรายการจัดสรรเครื่องราชอิสริยาภรณ์</q-tooltip>
+                <q-tooltip>เพิ่ม</q-tooltip>
               </q-btn>
             </div>
+            <div>
+
+
+              <!-- <q-btn flat round color="light-blue" icon="upload">
+                <q-menu>
+                  <q-list style="min-width: 150px">
+                    <q-item clickable v-close-popup>
+                      <q-item-section avatar
+                        ><q-icon color="green-7" name="mdi-file-excel"
+                      /></q-item-section>
+                      <q-item-section
+                        >บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section
+                      >
+                    </q-item>
+                    <q-item clickable v-close-popup>
+                      <q-item-section avatar
+                        ><q-icon color="green-7" name="mdi-file-excel"
+                      /></q-item-section>
+                      <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn> -->
+            </div>
+
+
             <q-space />
 
+            <div class="items-center" style="display: flex">
+              <!-- ค้นหาข้อความใน table -->
               <q-input
-          class="col-xs-12 col-sm-3 col-md-2"
                 standout
                 dense
-          v-model="filterKeyword"
+                v-model="filter"
                 ref="filterRef"
                 outlined
                 debounce="300"
                 placeholder="ค้นหา"
+                style="max-width: 200px"
+                class="q-ml-sm"
               >
                 <template v-slot:append>
-            <q-icon v-if="filterKeyword == ''" name="search" />
+                  <q-icon v-if="filter == ''" name="search" />
                   <q-icon
-              v-if="filterKeyword !== ''"
+                    v-if="filter !== ''"
                     name="clear"
                     class="cursor-pointer"
                     @click="resetFilter"
                   />
                 </template>
               </q-input>
-
+              <!-- แสดงคอลัมน์ใน table -->
               <q-select
                 v-model="visibleColumns"
+                :display-value="$q.lang.table.columns"
                 multiple
                 outlined
                 dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
                 :options="columns"
+                options-dense
                 option-value="name"
-          options-cover
+                map-options
+                emit-value
                 style="min-width: 150px"
-          class="col-xs-12 col-sm-3 col-md-2"
+                class="gt-xs q-ml-sm"
               />
             </div>
-      <div class="col-12">
+          </div>
-        <q-table
+          <d-table
             ref="table"
             :columns="columns"
             :rows="rows"
@@ -138,222 +486,312 @@
                 direction-links
               ></q-pagination>
             </template>
-        </q-table>
+          </d-table>
+        </div>
+
+        <div v-else-if="tab == item.name" class="q-pa-md">
+          <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
+            <selector
+              outlined
+              dense
+              lazy-rules
+              v-model="DataStore.insignia"
+              hide-bottom-space
+              :label="`${'เครื่องราชฯ'}`"
+              emit-value
+              map-options
+              option-label="name"
+              :options="DataStore.insigniaOp"
+              option-value="id"
+              use-input
+              input-debounce="0"
+              style="min-width: 150px"
+            />
+            <div>
+              <q-btn
+                @click="addData()"
+                size="12px"
+                flat
+                round
+                color="add"
+                icon="mdi-plus"
+              >
+                <q-tooltip>เพิ่ม</q-tooltip>
+              </q-btn>
+            </div>
+            <div>
+              <q-btn flat round color="light-blue" icon="upload">
+                <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
+                <q-menu>
+                  <q-list style="min-width: 150px">
+                    <q-item clickable v-close-popup>
+                      <q-item-section avatar
+                        ><q-icon color="green-7" name="mdi-file-excel"
+                      /></q-item-section>
+                      <q-item-section
+                        >บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section
+                      >
+                    </q-item>
+                    <q-item clickable v-close-popup>
+                      <q-item-section avatar
+                        ><q-icon color="green-7" name="mdi-file-excel"
+                      /></q-item-section>
+                      <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+
+            <q-space />
+
+            <div class="items-center" style="display: flex">
+              <!-- ค้นหาข้อความใน table -->
+              <q-input
+                standout
+                dense
+                v-model="filter"
+                ref="filterRef"
+                outlined
+                debounce="300"
+                placeholder="ค้นหา"
+                style="max-width: 200px"
+                class="q-ml-sm"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filter == ''" name="search" />
+                  <q-icon
+                    v-if="filter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <!-- แสดงคอลัมน์ใน table -->
+              <q-select
+                v-model="visibleColumns"
+                :display-value="$q.lang.table.columns"
+                multiple
+                outlined
+                dense
+                :options="columns"
+                options-dense
+                option-value="name"
+                map-options
+                emit-value
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
             </div>
           </div>
+
+          <d-table
+            :rows="rows"
+            :columns="columns"
+            :visible-columns="visibleColumns"
+            :filter="filter"
+            row-key="name"
+          >
+            <template v-slot:body-cell="props">
+              <q-td :props="props">
+                <div v-if="props.col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+
+                <div v-else-if="props.col.name == 'action'">
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="primary"
+                    @click="editData(props.row)"
+                    icon="mdi-pencil-outline"
+                  >
+                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                  </q-btn>
+                </div>
+
+                <div v-else>
+                  {{ props.value }}
+                </div>
+              </q-td>
+            </template>
+          </d-table>
+        </div>
+
+        <div v-else-if="tab == item.name" class="q-pa-md">
+          <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
+            <selector
+              outlined
+              dense
+              lazy-rules
+              v-model="DataStore.insignia"
+              hide-bottom-space
+              :label="`${'เครื่องราชฯ'}`"
+              emit-value
+              map-options
+              option-label="name"
+              :options="DataStore.insigniaOp"
+              option-value="id"
+              use-input
+              input-debounce="0"
+              style="min-width: 150px"
+            />
+            <div>
+              <q-btn
+                @click="addData()"
+                size="12px"
+                flat
+                round
+                color="add"
+                icon="mdi-plus"
+              >
+                <q-tooltip>เพิ่ม</q-tooltip>
+              </q-btn>
+            </div>
+            <div>
+              <q-btn flat round color="light-blue" icon="upload">
+                <!-- <q-tooltip>อัพโหลดไฟล์</q-tooltip> -->
+                <q-menu>
+                  <q-list style="min-width: 150px">
+                    <q-item clickable v-close-popup>
+                      <q-item-section avatar
+                        ><q-icon color="green-7" name="mdi-file-excel"
+                      /></q-item-section>
+                      <q-item-section
+                        >บันทึกผลการได้รับพระราชทานเครื่องราชย์อิสริยสภรณ์</q-item-section
+                      >
+                    </q-item>
+                    <q-item clickable v-close-popup>
+                      <q-item-section avatar
+                        ><q-icon color="green-7" name="mdi-file-excel"
+                      /></q-item-section>
+                      <q-item-section>บันทึกผลการจ่ายใบกำกับ</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+            <q-space />
+
+            <div class="items-center" style="display: flex">
+              <!-- ค้นหาข้อความใน table -->
+              <q-input
+                standout
+                dense
+                v-model="filter"
+                ref="filterRef"
+                outlined
+                debounce="300"
+                placeholder="ค้นหา"
+                style="max-width: 200px"
+                class="q-ml-sm"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filter == ''" name="search" />
+                  <q-icon
+                    v-if="filter !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <!-- แสดงคอลัมน์ใน table -->
+              <q-select
+                v-model="visibleColumns"
+                :display-value="$q.lang.table.columns"
+                multiple
+                outlined
+                dense
+                :options="columns"
+                options-dense
+                option-value="name"
+                map-options
+                emit-value
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </div>
+          </div>
+
+          <d-table
+            :rows="rows"
+            :columns="columns"
+            :visible-columns="visibleColumns"
+            :filter="filter"
+            row-key="name"
+          >
+            <template v-slot:body-cell="props">
+              <q-td :props="props">
+                <div v-if="props.col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+
+                <div v-else-if="props.col.name == 'action'">
+                  <q-btn
+                    dense
+                    size="12px"
+                    flat
+                    round
+                    color="primary"
+                    @click="editData(props.row)"
+                    icon="mdi-pencil-outline"
+                  >
+                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                  </q-btn>
+                </div>
+
+                <div v-else>
+                  {{ props.value }}
+                </div>
+              </q-td>
+            </template>
+          </d-table>
+        </div>
+      </div>
+
+    </div>
+
+    <DialogForm
+      :modal="modal"
+      :save="save"
+      :close="close"
+      :roundId="selectRound"
+      :action="action"
+      :personId="personId"
+      :profileType="profileType"
+    />
   </q-card>
 </template>
-
+<style lang="scss" scoped>
-<script setup lang="ts">
+.arrow {
-import { ref, useAttrs } from "vue";
+  transition: transform 0.5s;
-import type { QTableProps } from "quasar";
-import router from "@/router";
-import { useQuasar } from "quasar";
-import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
-
-const $q = useQuasar(); //ใช้ noti quasar
-const modal = ref<boolean>(false);
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
-const visibleColumns = ref<string[]>([
-  "no",
-  "year",
-  "insignia",
-  "total",
-  "done",
-  "remain",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-
-// หัวตาราง
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "no",
-    align: "left",
-    label: "ลำดับ",
-    sortable: true,
-    field: "no",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "year",
-    align: "left",
-    label: "ปี",
-    sortable: true,
-    field: "year",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "insignia",
-    align: "left",
-    label: "เครื่องราชอิสริยาภรณ์",
-    sortable: true,
-    field: "insignia",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "total",
-    align: "left",
-    label: "จำนวนทั้งหมด",
-    sortable: true,
-    field: "total",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "done",
-    align: "left",
-    label: "จัดสรรแล้ว",
-    sortable: true,
-    field: "done",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "remain",
-    align: "left",
-    label: "คงเหลือ",
-    sortable: true,
-    field: "remain",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-// ข้อมูลตาราง (จำลอง)
-const rows = ref<FormProprsalsRound[]>([
-  {
-    no: "1",
-    year: "2566",
-    insignia: "เบญจมาภรณ์มงกุฎไทย",
-    total: 10,
-    done: 9,
-    remain: 1,
-  },
-  {
-    round: "2",
-    year: "2566",
-    insignia: "จัตุรถาภรณ์มงกุฎไทย",
-    total: 20,
-    done: 18,
-    remain: 2,
-  },
-  {
-    round: "3",
-    year: "2566",
-    insignia: "ทวีติยาภรณ์มงกุฎไทย",
-    total: 15,
-    done: 10,
-    remain: 5,
-  },
-  {
-    round: "4",
-    year: "2566",
-    insignia: "เหรียญเงินช้างเผือก",
-    total: 5,
-    done: 5,
-    remain: 0,
-  },
-]);
-
-// หัวตาราง2
-const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {})
-    .onCancel(() => {})
-    .onDismiss(() => {});
-};
-
-const clickAdd = () => {
-  router.push({ name: "allocateAdd" });
-};
-const redirectToPage = (id?: string) => {
-  router.push({ name: "allocateDetail" });
-};
-// ค้นหาในตาราง
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
-
-const filterKeyword2 = ref<string>("");
-const filterRef2 = ref<any>(null);
-const resetFilter2 = () => {
-  filterKeyword2.value = "";
-  filterRef2.value.focus();
-};
-
-const attrs = ref<any>(useAttrs());
-
-const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
-</script>
-
-<style lang="scss" scope>
-.filter-card {
-  background-color: #f1f1f1b0;
 }
 
-.toggle-expired-account {
+.arrow-active {
-  font-size: 12px;
+  transition: transform 0.5s;
-  font-weight: 400;
+  transform: rotate(-90deg);
-  font-size: 15px;
-  line-height: 150%;
-  color: #35373c;
 }
 
-.icon-color {
+.bg-base {
-  color: #4154b3;
+  background-color: #f3f3f398;
 }
 
-.custom-header-table {
+.v-enter-active,
-  max-height: 64vh;
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
 
-  .q-table tr:nth-child(odd) td {
+.v-enter-from,
-    background: white;
+.v-leave-to {
-  }
+  opacity: 0;
+}
 
-  .q-table tr:nth-child(even) td {
+.flexsave {
-    background: #f8f8f8;
+  display: flex;
-  }
+  justify-content: flex-end;
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
 }
 </style>

src/modules/07_insignia/interface/request/Main.ts

@@ -1,9 +1,8 @@
 interface FormProprsalsRound {
-  id: number;
+  id: string;
-  name: string;
+  insignia: string;
-  year: number;
+  total: number;
-  startDate: number;
+  done: number;
-  endDate: number;
+  remain: number;
-  status: string;
 }
 export type { FormProprsalsRound };

src/modules/07_insignia/router.ts

@@ -141,7 +141,7 @@ export default [
     },
   },
   {
-    path: "/insignia/allocate/detail",
+    path: "/insignia/allocate/detail/:id",
     name: "allocateDetail",
     component: allocateDetail,
     meta: {