ผูก api จัดสรร

src/modules/07_insignia/components/2_Manage/Tab4.vue

@@ -86,7 +86,7 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
+const paginationLabel = (start: number, end: number, total: number) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };

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

@@ -1,45 +1,24 @@
 <script setup lang="ts">
-import { ref, watch, computed } from "vue";
+import { ref, watch } 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();
+import { useRouter } from "vue-router";
 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: {
@@ -50,44 +29,23 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
-  roundId: {
-    type: String,
-  },
-  action: {
-    type: String,
-  },
-  personId: {
-    type: String,
-  },
-  profileType: {
-    type: String,
+  insigniaList: {
+    type: Array,
+    default: []
   },
 });
 
-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;
+watch(props, () => {
+  if (props.modal) {
+    grandCross.value = ""
+    Org.value = ""
+    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;
-   }
+  console.log("insigniaList===>", props.insigniaList)
+})
+
+const clickSave = () => {
+  dialogConfirm($q, () => props.save(grandCross.value, amount.value));
 };
 </script>
 
@@ -96,64 +54,22 @@ const dataSave = async () => {
     <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-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="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="`เลือกหน่วยงาน`"
-              />
+              <q-select hide-bottom-space :options="insigniaList" dense borderless
+                option-label="name" option-value="id" emit-value map-options outlined options-cover v-model="grandCross"
+                :label="routeName == 'insigniaAllocate' ? `เครื่องราชฯ` : `เลือกหน่วยงาน`" />
             </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="จำนวน"
-              />
+              <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>

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

@@ -0,0 +1,515 @@
+<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/storeAllocate";
+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 { OptionDataYear } 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, name: string) => {
+  DataStore.insigniaName = name
+  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<OptionDataYear[]>([]);
+const modal = ref<boolean>(false);
+const action = ref<string>("");
+const personId = ref<string>();
+const profileType = ref<string>("");
+const filterKeyword = ref<string>("");
+const roundYear = ref<number>();
+const insigniaOp = ref<any>([]);
+
+onMounted(async () => {
+  await fecthRound();
+  await fecthInsigniaType();
+});
+
+const fecthRound = async () => {
+  await http
+    .get(config.API.noteround())
+    .then((res) => {
+      let data = res.data.result;
+      selectRoundOption.value = data.map((e: any) => ({
+        id: e.id,
+        name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + "  " + (e.year + 543),
+        year: e.year
+      }));
+      selectRound.value = data[0].id;
+      roundYear.value = data[0].year;
+      // console.log(roundYear.value);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+const fecthInsignia = async () => {
+  await http
+    .get(config.API.insignia)
+    .then((res) => {
+      let data = res.data.result;
+      DataStore.fetchDatainsignia(data);
+    })
+    .catch((err) => {
+      messageError($q, err)
+    }).finally(async () => {
+      insigniaOp.value = await DataStore.insigniaOp.filter((x: any) => x.type == tab.value)
+    })
+};
+
+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;
+
+      fecthlistInsignia()
+      fecthInsignia();
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+};
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "insignia",
+  "total",
+  "allocate",
+  "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: "allocate",
+    align: "left",
+    label: "จัดสรรแล้ว",
+    sortable: true,
+    field: "allocate",
+    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[]>([]);
+
+watch(tab, () => {
+  insigniaOp.value = DataStore.insigniaOp.filter((x: any) => x.type == tab.value)
+  fecthlistInsignia();
+});
+
+const selectorInsignia = () => {
+  fecthlistInsignia();
+};
+const selectorRound = (round: string) => {
+  selectRound.value = round;
+  const yearFilter = selectRoundOption.value.find((x: any) => x.id == round)
+  roundYear.value = yearFilter?.year;
+};
+
+const fecthlistInsignia = async () => {
+  showLoader();
+  await http
+    .get(config.API.insigniaManageType(tab.value, Number(roundYear.value)))
+    .then((res) => {
+      let data = res.data.result;
+      rows.value = [];
+      // console.log("dsata===>", data);
+      rows.value = data.map((e: any) => ({
+        id: e.id,
+        insignia: e.insignia,
+        insigniaId: e.insigniaId,
+        total: e.total,
+        allocate: e.allocate,
+        remain: e.remain,
+        //   status: DataStore.status(e.status),
+      }));
+    })
+    .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 = async (insigniaId: string, total: string) => {
+  showLoader()
+  const formData = new FormData();
+  formData.append("Insignia", insigniaId);
+  formData.append("Year", `${roundYear.value}`);
+  formData.append("Total", total);
+
+  await http
+    .post(config.API.insigniaManageAdd(), formData)
+    .then((res) => {
+      fecthlistInsignia();
+    })
+    .catch((err) => {
+      messageError($q, err)
+    }).finally(() => {
+      hideLoader();
+      close();
+    });
+};
+
+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-my-md q-mt-sm rounded-borders">
+    <div class="bg-grey-1 col-12 row items-center">
+      <div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</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>
+    <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-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="insigniaOp"
+                option-value="id" :readonly="false" :borderless="false" style="min-width: 150px"
+                @update:model-value="selectorInsignia" />
+            </div>
+
+            <div>
+              <q-btn @click="addData()" size="12px" flat round color="add" icon="mdi-plus">
+                <q-tooltip>เพิ่ม</q-tooltip>
+              </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 ref="table" :columns="columns" :rows="rows" :filter="filterKeyword" row-key="id" flat bordered
+            :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
+            :pagination-label="paginationLabel" v-model:pagination="pagination">
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
+            <template v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer" @click="redirectToPage(props.row.id, props.row.insignia)">
+                <q-td key="no" :props="props">
+                  {{ props.rowIndex + 1 }}
+                </q-td>
+                <q-td key="year" :props="props">
+                  {{ props.row.year }}
+                </q-td>
+                <q-td key="insignia" :props="props">
+                  {{ props.row.insignia }}
+                </q-td>
+                <q-td key="total" :props="props">
+                  {{ props.row.total }}
+                </q-td>
+                <q-td key="allocate" :props="props">
+                  {{ props.row.allocate }}
+                </q-td>
+                <q-td key="remain" :props="props">
+                  {{ props.row.remain }}
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-slot:pagination="scope">
+              <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
+                :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+            </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 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" :insignia-list="insigniaOp" />
+  </q-card>
+</template>
+<style lang="scss" scoped>
+.arrow {
+  transition: transform 0.5s;
+}
+
+.arrow-active {
+  transition: transform 0.5s;
+  transform: rotate(-90deg);
+}
+
+.bg-base {
+  background-color: #f3f3f398;
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+.flexsave {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

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

@@ -1,173 +1,30 @@
-<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">
-    <div class="col-12 row bg-white">
-      <div class="fit q-px-md q-py-sm">
-        <div class="row col-12 q-col-gutter-md fit">
-          <cardTop
-            :amount="stat.total"
-            label="จำนวนเครื่องราช ฯ ทั้งหมด"
-            color="#016987"
-          />
-          <cardTop
-            :amount="stat.sendInsig"
-            label="จำนวนเครื่องราช ฯ ที่จัดสรรให้หน่วยงานแล้ว"
-            color="#02A998"
-          />
-          <cardTop
-            :amount="stat.remainInsig"
-            label="จำนวนเครื่องราช ฯ คงเหลือ"
-            color="#2EA0FF"
-          />
-        </div>
-      </div>
-    </div>
-  </q-card>
-  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row q-col-gutter-sm">
-      <div class="row col-12 q-col-gutter-sm">
-        <div>
-          <q-btn
-            @click="clickAdd()"
-            size="12px"
-            flat
-            round
-            color="add"
-            icon="mdi-plus"
-          >
-            <q-tooltip>เพิ่มรายการจัดสรรเครื่องราชอิสริยาภรณ์</q-tooltip>
-          </q-btn>
-        </div>
-        <q-space />
-
-        <q-input
-          class="col-xs-12 col-sm-3 col-md-2"
-          standout
-          dense
-          v-model="filterKeyword"
-          ref="filterRef"
-          outlined
-          debounce="300"
-          placeholder="ค้นหา"
-        >
-          <template v-slot:append>
-            <q-icon v-if="filterKeyword == ''" name="search" />
-            <q-icon
-              v-if="filterKeyword !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
-          </template>
-        </q-input>
-
-        <q-select
-          v-model="visibleColumns"
-          multiple
-          outlined
-          dense
-          options-dense
-          :display-value="$q.lang.table.columns"
-          emit-value
-          map-options
-          :options="columns"
-          option-value="name"
-          options-cover
-          style="min-width: 150px"
-          class="col-xs-12 col-sm-3 col-md-2"
-        />
-      </div>
-      <div class="col-12">
-        <q-table
-          ref="table"
-          :columns="columns"
-          :rows="rows"
-          :filter="filterKeyword"
-          row-key="id"
-          flat
-          bordered
-          :paging="true"
-          dense
-          class="custom-header-table"
-          v-bind="attrs"
-          :visible-columns="visibleColumns"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
-        >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-            </q-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="organization" :props="props">
-                <!-- @click="redirectToPage(props.row.id)" -->
-                {{ props.row.organization }}
-              </q-td>
-              <q-td key="totalInsignia" :props="props">
-                <!-- @click="redirectToPage(props.row.id)" -->
-                {{ props.row.totalInsignia }}
-              </q-td>
-              <q-td key="allocate" :props="props">
-                <!-- @click="redirectToPage(props.row.id)" -->
-                {{ props.row.allocate }}
-              </q-td>
-              <q-td key="remain" :props="props">
-                <!-- @click="redirectToPage(props.row.id)" -->
-                {{ props.row.remain }}
-              </q-td>
-            </q-tr>
-          </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-              color="dark"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
-      </div>
-    </div>
-  </q-card>
-  <DialogForm
-      :modal="modal"
-      :close="close"
-    />
-</template>
-
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { onMounted, ref, useAttrs } from "vue";
 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 DialogForm from "@/modules/07_insignia/components/4_Allocate/DialogForm.vue";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useResultDataStore } from "@/modules/07_insignia/storeAllocate";
+
+const DataStore = useResultDataStore();
+const mixin = useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  messageError,
+} = mixin;
+
 const name = ref<string>("");
 const $q = useQuasar(); //ใช้ noti quasar
+const route = useRoute();
+const id = ref<string>(route.params.id.toString());
 const modal = ref<boolean>(false);
+const orgList = ref<any>([]);
 const pagination = ref({
   sortBy: "desc",
   descending: false,
@@ -175,20 +32,129 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 const stat = ref<any>({
-  total: 10,
-  sendInsig: 9,
-  remainInsig: 1,
+  total: 0,
+  allocate: 0,
+  remain: 0,
 });
+
+onMounted(async () => {
+  fecthDashboard();
+  fecthListData();
+  name.value = DataStore.insigniaName
+
+  await fetchTreeRoot()
+});
+
+const fecthDashboard = async () => {
+  showLoader()
+  await http
+    .get(config.API.insigniaManageOrgDashboard(id.value))
+    .then((res) => {
+      stat.value = {
+        total: res.data.result.total,
+        allocate: res.data.result.allocate,
+        remain: res.data.result.remain,
+      }
+    })
+    .catch((err) => {
+      messageError($q, err)
+    })
+    .finally(() => hideLoader())
+};
+
+const fecthListData = async () => {
+  showLoader()
+  await http
+    .get(config.API.insigniaManageOrg(id.value))
+    .then((res) => {
+      // console.log("res===>", res)
+      rows.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        organization: e.organization,
+        total: e.total,
+        allocate: e.allocate,
+        remain: e.remain,
+      }))
+    })
+    .catch((err) => {
+      messageError($q, err)
+    })
+    .finally(() => hideLoader())
+};
+
+const rootOrgID = ref(); // org id ของ root ตัวปัจจุบันที่เลือกอยู่
+const fetchTreeRoot = async () => {
+  // showLoader();
+  let urlRequest = config.API.chartGetTreeRoot;
+  await http
+    .get(urlRequest)
+    .then((response) => {
+      if (response.data.result.length > 0) {
+        rootOrgID.value = response.data.result[0].organizationId;
+      }
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(async () => {
+      await fetchOrgChart()
+    });
+};
+
+const fetchOrgChart = async () => {
+  // showLoader();
+  let urlRequest = config.API.chartGetOrg(rootOrgID.value);
+  await http
+    .get(urlRequest)
+    .then(async (response: any) => {
+      if (response.data.result.length > 0) {
+        // console.log("response===>", response.data.result[0].children)
+        orgList.value = await response.data.result[0].children.map((e: any) => ({
+          id: e.organizationId,
+          name: e.departmentName
+        }));
+      }
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+  // .finally(() => {
+  //   hideLoader();
+  // });
+};
+
 const backHistory = () => {
   router.push(`/insignia/allocate/list-allocate`)
 }
+
 const close = () => {
   modal.value = false;
 };
+
+const save = async (organizationId: string, total: string) => {
+  showLoader()
+  await http
+    .post(config.API.insigniaManageOrgAdd(), {
+      "organizationOrganizationId": organizationId,
+      "insigniaManageId": id.value,
+      "total": total
+    })
+    .then((res) => {
+      fecthListData();
+      fecthDashboard();
+    })
+    .catch((err) => {
+      messageError($q, err)
+    }).finally(() => {
+      hideLoader();
+      close();
+    });
+};
+
 const visibleColumns = ref<string[]>([
   "no",
   "organization",
-  "totalInsignia",
+  "total",
   "allocate",
   "remain",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
@@ -214,11 +180,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "totalInsignia",
+    name: "total",
     align: "left",
     label: "จำนวนครื่องราช ฯ ที่ได้รับ",
     sortable: true,
-    field: "totalInsignia",
+    field: "total",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -243,45 +209,12 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 // ข้อมูลตาราง (จำลอง)
-const rows = ref<any[]>([
-  {
-    no: "1",
-    organization: "โครงสร้างและอัตรากำลัง",
-    totalInsignia: "3",
-    allocate: 3,
-    remain: 0,
-  },
-  {
-    no: "2",
-    organization: "การเรียนรู้มหานคร",
-    totalInsignia: "3",
-    allocate: 0,
-    remain: 0,
-  },
-  {
-    no: "3",
-    organization: "สารสนเทศทรัพยากรบุคคล",
-    totalInsignia: "2",
-    allocate: 2,
-    remain: 0,
-  },
-  {
-    no: "4",
-    organization: "วินัยและเสริมสร้างจริยธรรม",
-    totalInsignia: "1",
-    allocate: 1,
-    remain: 0,
-  },
-]);
-
+const rows = ref<any[]>([]);
 
 const clickAdd = () => {
   modal.value = true
 };
 
-// const redirectToPage = (id?: string) => {
-//   router.push({ name: "allocateDetail" });
-// };
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
@@ -306,6 +239,90 @@ const paginationLabel = (start: string, end: string, total: string) => {
 };
 </script>
 
+<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">
+    <div class="col-12 row bg-white">
+      <div class="fit q-px-md q-py-sm">
+        <div class="row col-12 q-col-gutter-md fit">
+          <cardTop :amount="stat.total" label="จำนวนเครื่องราช ฯ ทั้งหมด" color="#016987" />
+          <cardTop :amount="stat.allocate" label="จำนวนเครื่องราช ฯ ที่จัดสรรให้หน่วยงานแล้ว" color="#02A998" />
+          <cardTop :amount="stat.remain" label="จำนวนเครื่องราช ฯ คงเหลือ" color="#2EA0FF" />
+        </div>
+      </div>
+    </div>
+  </q-card>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn @click="clickAdd()" size="12px" flat round color="add" icon="mdi-plus">
+            <q-tooltip>จัดสรรเครื่องราชอิสริยาภรณ์ให้หน่วยงาน</q-tooltip>
+          </q-btn>
+        </div>
+        <q-space />
+
+        <q-input class="col-xs-12 col-sm-3 col-md-2" standout dense v-model="filterKeyword" ref="filterRef" outlined
+          debounce="300" placeholder="ค้นหา">
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword == ''" name="search" />
+            <q-icon v-if="filterKeyword !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
+          </template>
+        </q-input>
+
+        <q-select v-model="visibleColumns" multiple outlined dense options-dense :display-value="$q.lang.table.columns"
+          emit-value map-options :options="columns" option-value="name" options-cover style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2" />
+      </div>
+      <div class="col-12">
+        <q-table ref="table" :columns="columns" :rows="rows" :filter="filterKeyword" row-key="id" flat bordered
+          :paging="true" dense class="custom-header-table" v-bind="attrs" :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel" v-model:pagination="pagination">
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="organization" :props="props">
+                <!-- @click="redirectToPage(props.row.id)" -->
+                {{ props.row.organization }}
+              </q-td>
+              <q-td key="total" :props="props">
+                <!-- @click="redirectToPage(props.row.id)" -->
+                {{ props.row.totalInsignia }}
+              </q-td>
+              <q-td key="allocate" :props="props">
+                <!-- @click="redirectToPage(props.row.id)" -->
+                {{ props.row.allocate }}
+              </q-td>
+              <q-td key="remain" :props="props">
+                <!-- @click="redirectToPage(props.row.id)" -->
+                {{ props.row.remain }}
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber"
+              :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
+
+  <DialogForm :modal="modal" :close="close" :save="save" :insignia-list="orgList" />
+</template>
+
 <style lang="scss" scope>
 .filter-card {
   background-color: #f1f1f1b0;

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

@@ -1,798 +0,0 @@
-<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.map((e: any) => ({
-        name: "รอบการเสนอขอพระราชทานเครื่องราชปี" + "  " + (e.year + 543),
-        id: e.id,
-      }));
-      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-my-md q-mt-sm rounded-borders">
-    <div class="bg-grey-1 col-12 row items-center">
-      <div class="q-pl-md q-pr-sm text-weight-medium text-grey-7">รอบ</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>
-    <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="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-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
-            ref="table"
-            :columns="columns"
-            :rows="rows"
-            :filter="filterKeyword"
-            row-key="id"
-            flat
-            bordered
-            :paging="true"
-            dense
-            class="custom-header-table"
-            v-bind="attrs"
-            :visible-columns="visibleColumns"
-            :pagination-label="paginationLabel"
-            v-model:pagination="pagination"
-          >
-            <template v-slot:header="props">
-              <q-tr :props="props">
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-              </q-tr>
-            </template>
-            <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer">
-                <q-td
-                  key="no"
-                  :props="props"
-                  @click="redirectToPage(props.row.id)"
-                >
-                  {{ props.rowIndex + 1 }}
-                </q-td>
-                <q-td
-                  key="year"
-                  :props="props"
-                  @click="redirectToPage(props.row.id)"
-                >
-                  {{ props.row.year }}
-                </q-td>
-                <q-td
-                  key="insignia"
-                  :props="props"
-                  @click="redirectToPage(props.row.id)"
-                >
-                  {{ props.row.insignia }}
-                </q-td>
-                <q-td
-                  key="total"
-                  :props="props"
-                  @click="redirectToPage(props.row.id)"
-                >
-                  {{ props.row.total }}
-                </q-td>
-                <q-td
-                  key="done"
-                  :props="props"
-                  @click="redirectToPage(props.row.id)"
-                >
-                  {{ props.row.done }}
-                </q-td>
-                <q-td
-                  key="remain"
-                  :props="props"
-                  @click="redirectToPage(props.row.id)"
-                >
-                  {{ props.row.remain }}
-                </q-td>
-              </q-tr>
-            </template>
-            <template v-slot:pagination="scope">
-              <q-pagination
-                v-model="pagination.page"
-                active-color="primary"
-                color="dark"
-                :max="scope.pagesNumber"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-              ></q-pagination>
-            </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 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>
-.arrow {
-  transition: transform 0.5s;
-}
-
-.arrow-active {
-  transition: transform 0.5s;
-  transform: rotate(-90deg);
-}
-
-.bg-base {
-  background-color: #f3f3f398;
-}
-
-.v-enter-active,
-.v-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-  opacity: 0;
-}
-
-.flexsave {
-  display: flex;
-  justify-content: flex-end;
-}
-</style>

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

@@ -3,4 +3,10 @@ interface OptionData {
   name: string;
 }
 
-export type { OptionData };
+interface OptionDataYear {
+  id: string;
+  name: string;
+  year: number;
+}
+
+export type { OptionData, OptionDataYear };

src/modules/07_insignia/router.ts

@@ -17,15 +17,17 @@ const roundAdd = () =>
 const listMange = () =>
   import("@/modules/07_insignia/components/2_Manage/listManage.vue");
 const listAllocate = () =>
-  import("@/modules/07_insignia/components/4_Allocate/listAllocate.vue");
+  import("@/modules/07_insignia/components/4_Allocate/Main.vue");
 const allocateAdd = () =>
   import("@/modules/07_insignia/components/4_Allocate/allocateAdd.vue");
-const allocateDetail = () =>
-  import("@/modules/07_insignia/components/4_Allocate/detail.vue");
-const allocateDetailAdd = () =>
-  import("@/modules/07_insignia/components/4_Allocate/addDetail.vue");
+const allocateOrdList = () =>
+  import("@/modules/07_insignia/components/4_Allocate/OrgList.vue");
+const allocateOrgAdd = () =>
+  import("@/modules/07_insignia/components/4_Allocate/OrgAdd.vue");
 const VatInsignia = () =>
   import("@/modules/07_insignia/components/VatInsignia.vue");
+
+// ยืม - คืนเครื่องราช  
 const insigniaBorrow = () =>
   import("@/modules/07_insignia/components/5_Borrow/Main.vue");
 export default [
@@ -142,8 +144,8 @@ export default [
   },
   {
     path: "/insignia/allocate/detail/:id",
-    name: "allocateDetail",
-    component: allocateDetail,
+    name: "allocateOrdList",
+    component: allocateOrdList,
     meta: {
       Auth: true,
       Key: [8.9],
@@ -152,11 +154,11 @@ export default [
   },
   {
     path: "/insignia/allocate/detail-add",
-    name: "allocateDetailAdd",
-    component: allocateDetailAdd,
+    name: "allocateOrgAdd",
+    component: allocateOrgAdd,
     meta: {
       Auth: true,
-      Key: [8.9],
+      Key: [8.10],
       Role: "insignia",
     },
   },

src/modules/07_insignia/storeAllocate.ts

@@ -0,0 +1,109 @@
+import { defineStore } from "pinia";
+import { ref, } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+} = mixin;
+
+export const useResultDataStore = defineStore("insigniaResult", () => {
+  const insigniaName = ref<string>('')
+  const insignia = ref<string>('')
+  const insigniaOp = ref<any[]>([{ name: "ทั้งหมด", id: "", type: "" }])
+  const insigniaOp2 = ref<any[]>([])
+  const insigniaType = ref<any>()
+  const invoiceType = ref<string>('all')
+  const invoiceTypeop = ref<any>([{ name: "ทั้งหมด", id: "all" }, { name: "ใบกำกับที่ค้างจ่าย", id: "noDate" }, { name: "ใบกำกับที่จ่ายแล้ว", id: "haveDate" }])
+  const rows = ref<any>([])
+  const listInsignia = ref<any>([])
+
+  const fetchDatainsignia = async (data: any) => {
+    insignia.value = ''
+    invoiceType.value = 'all'
+    insigniaOp.value = [{ name: "ทั้งหมด", id: "", type: "" }]
+    data.forEach((e: any) => {
+      insigniaOp.value.push({ name: e.name, id: e.id, type: e.insigniaType.id })
+    });
+  }
+
+  const fetchDatainsigniaType = async (data: any) => {
+    insigniaType.value = data.map((e: any) => ({ name: e.id, label: e.name }))
+  }
+
+  const fetchlistinsignia = async (data: any) => {
+    rows.value = [];
+    let alllist = await data.map((e: any) => ({
+      id: e.id,
+      citizenId: e.citizenId,
+      prefix: e.prefix,
+      position: e.position,
+      status: status(e.status),
+      dateReceive: date2Thai(e.dateReceive),
+      name: e.fullName,
+      type: e.requestInsignia,
+      employeeType: 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,
+    }));
+    rows.value = alllist
+    listInsignia.value = alllist
+    selectInvoice(invoiceType.value)
+
+  }
+
+  const selectInvoice = (invoice: string) => {
+    console.log(invoice);
+    if (invoice === "noDate") {
+      let list = listInsignia.value.filter((e: any) => e.datepay === null)
+      rows.value = list
+    } else if (invoice === "haveDate") {
+      let list = listInsignia.value.filter((e: any) => e.datepay !== null)
+      rows.value = list
+    } else rows.value = listInsignia.value
+  }
+
+  const status = (val: string) => {
+    switch (val) {
+      case "PENDING":
+        return "รอบันทึกข้อมูล";
+      case "REJECT":
+        return "ยกเลิก";
+      case "DELETE":
+        return "ลบ";
+      case "DONE":
+        return "บันทึกลง ก.พ. 7 แล้ว";
+    }
+  }
+
+  const profileType = (val: string) => {
+    switch (val) {
+      case "officer":
+        return "ข้าราชการ กทม.สามัญ";
+      case "employee":
+        return "ลูกจ้างประจำ";
+    }
+  }
+
+  return {
+    rows,
+    insignia,
+    insigniaOp,
+    insigniaOp2,
+    insigniaType,
+    invoiceType,
+    invoiceTypeop,
+    fetchDatainsignia,
+    fetchDatainsigniaType,
+    status,
+    profileType,
+    fetchlistinsignia,
+    selectInvoice,
+    insigniaName
+  };
+});