From 80512ae2ee55f2cc5b7e2739926192b0ed2d5901 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Thu, 24 Aug 2023 16:27:27 +0700
Subject: [PATCH] =?UTF-8?q?api=20=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A=20?=
 =?UTF-8?q?=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99=E0=B8=9A=E0=B8=B1=E0=B8=99?=
 =?UTF-8?q?=E0=B8=97=E0=B8=B6=E0=B8=81=E0=B8=9C=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/07_insignia/api.insignia.ts           |    4 +
 .../components/3_result/DialogForm.vue        | 1091 +++++++++++------
 src/modules/07_insignia/storeResult.ts        |   55 +
 src/modules/07_insignia/views/ResultPage.vue  |  972 ++++++++-------
 4 files changed, 1317 insertions(+), 805 deletions(-)
 create mode 100644 src/modules/07_insignia/storeResult.ts

diff --git a/src/api/07_insignia/api.insignia.ts b/src/api/07_insignia/api.insignia.ts
index ae391cfb6..081e12e56 100644
--- a/src/api/07_insignia/api.insignia.ts
+++ b/src/api/07_insignia/api.insignia.ts
@@ -26,6 +26,10 @@ export default {
   insigniaDashboard: (insigniaPeriodId: string) => `${insignia}/request/dashboard/${insigniaPeriodId}`,
   // record
   noteround: () => `${insignia}/request/note`,
+  noteSearch: () => `${insignia}/request/note/search`,
+  noteAdd: (insigniaId: string) => `${insignia}/request/note/${insigniaId}`,
+  noteByid: (id: string) => `${insignia}/request/note/${id}`,
+
 
 
 };
diff --git a/src/modules/07_insignia/components/3_result/DialogForm.vue b/src/modules/07_insignia/components/3_result/DialogForm.vue
index 6a18795e0..19d5ef746 100644
--- a/src/modules/07_insignia/components/3_result/DialogForm.vue
+++ b/src/modules/07_insignia/components/3_result/DialogForm.vue
@@ -1,9 +1,29 @@
-
 <script setup lang="ts">
-import { ref } from "vue";
+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";
+
+const DataStore = useResultDataStore();
+const $q = useQuasar();
+const myForm = ref<QForm>();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  notifyError,
+} = mixin;
+const status = ref<status>("");
 
 const Advertise = ref<string>("");
+const issue = ref<string>("");
 const brand = ref<string>("");
 const cardid = ref<string>("");
 const prefixId = ref<string>("");
@@ -15,20 +35,26 @@ const announced = ref<string>("");
 const firstname = ref<string>("");
 const lastname = ref<string>("");
 const position = ref<string>("");
-const invoice = ref<string|null>(null);
+const invoice = ref<string | null>(null);
 const payment = ref<string>("");
-const addressPayment = ref<string|null>(null);
+const addressPayment = ref<string | null>(null);
 const affiliationRequest = ref<string>("");
 const affiliationReceived = ref<string>("");
-const receivedate = ref<Date|null>();
-const announceDate = ref<Date|null>();
-const invoiceDate = ref<Date|null>(null);
-const mixin = useCounterMixin();
+const receivedate = ref<Date | null>();
+const announceDate = ref<Date | null>();
+const invoiceDate = ref<Date | null>(null);
+
+const employeeClass = ref<string>("");
+const employeeClassOps = ref<DataOption[]>([
+  { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
+  { id: "perm", name: "ลูกจ้างประจำ" },
+]);
+
+const listPerson = ref<any>([]);
 
-const { date2Thai } = mixin;
 const paymentOp = [
-  { label: "จัดส่งทางไปรษณี", value: "xx1" },
-  { label: "มารับด้วยตัวเอง", value: "xx2" },
+  { label: "จัดส่งทางไปรษณี", value: "จัดส่งทางไปรษณี" },
+  { label: "มารับด้วยตัวเอง", value: "มารับด้วยตัวเอง" },
 ];
 const volumeOp = [
   { label: "เล่มที่", value: "xx1" },
@@ -85,9 +111,192 @@ const props = defineProps({
     type: Function,
     default: () => console.log("not function"),
   },
+  roundId: {
+    type: String,
+  },
+  action: {
+    type: String,
+  },
+  personId: {
+    type: String,
+  },
 });
-const close = async () => {
-  props.close();
+watch(props, () => {
+  if (props.modal === true) {
+    employeeClass.value = "";
+    cardid.value = "";
+    fullName.value = "";
+    position.value = "";
+    Advertise.value = "";
+    brand.value = "";
+    receivedate.value = null;
+    issue.value = "";
+    affiliationRequest.value = "";
+    affiliationReceived.value = "";
+    announceDate.value = null;
+    volume.value = "";
+    episode.value = "";
+    duty.value = "";
+    announced.value = "";
+    // invoice.value = "";
+    invoiceDate.value = null;
+    payment.value = "";
+
+    if (props.action === "editData") {
+      fectDataByid(props.personId);
+    }
+  }
+});
+const disbleStatus = computed(() => {
+  if (employeeClass.value !== "") {
+    return false;
+  } else return true;
+});
+
+const selectType = async () => {
+  showLoader();
+  cardid.value = "";
+  fullName.value = "";
+  position.value = "";
+  Advertise.value = "";
+  brand.value = "";
+  receivedate.value = null;
+  issue.value = "";
+  affiliationRequest.value = "";
+  affiliationReceived.value = "";
+  announceDate.value = null;
+  volume.value = "";
+  episode.value = "";
+  duty.value = "";
+  announced.value = "";
+  invoiceDate.value = null;
+  payment.value = "";
+  await fecthlistPerson();
+};
+
+const fecthlistPerson = async () => {
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res) => {
+      const id = res.data.result[0].id;
+      if (id !== "") {
+        findlist(id);
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+const findlist = async (id: string) => {
+  let data = [{}];
+  if (employeeClass.value === "officer") {
+    data = [{ criteriaType: "is_retire", criteriaValue: "false" }];
+  } else if (employeeClass.value === "perm") {
+    data = [
+      { criteriaType: "is_retire", criteriaValue: "false" },
+      { criteriaType: "employee_class", criteriaValue: "perm" },
+    ];
+  }
+  await http
+    .post(config.API.profileSearchNewOcIdType(id, employeeClass.value), {
+      criterias: data,
+    })
+    .then((res) => {
+      console.log(res.data.result);
+      listPerson.value = res.data.result;
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fectDataByid = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.noteByid(id))
+    .then((res) => {
+      console.log(res);
+      let data = res.data.result;
+      employeeClass.value = "";
+      cardid.value = data.citizenId;
+      fullName.value = data.fullName;
+      position.value = data.position;
+      Advertise.value = data.number;
+      brand.value = data.requestInsigniaId;
+      receivedate.value = data.dateReceive;
+      issue.value = "";
+      affiliationRequest.value = data.organizationOrganizationSend;
+      affiliationReceived.value = data.organizationOrganizationReceive;
+      announceDate.value = data.date;
+      volume.value = data.volumeNo;
+      episode.value = data.section;
+      duty.value = data.page;
+      announced.value = data.no;
+      invoiceDate.value = data.datePayment;
+      payment.value = data.typePayment;
+      addressPayment.value = data.address;
+      status.value = data.status;
+    })
+    .catch((err) => {
+      console.log(err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const clickSave = async () => {
+  let body = {
+    citizanId: cardid.value, // เลขบัตร
+    insigniaId: brand.value, // insigniaID
+    number: Advertise.value,
+    issue: issue.value,
+    dateReceive: receivedate.value, // วันที่ได้รับเครื่องราชฯ
+    organizationOrganizationSend: affiliationRequest.value,
+    organizationOrganizationReceive: affiliationReceived.value,
+    date: announceDate.value, // วันที่กิจนุเบก
+    volumeNo: volume.value, // เล่ม
+    section: episode.value, //ตอนที่
+    page: duty.value, //หน้าที่
+    no: announced.value,
+    // รอฟิล: invoice.value,
+    datePayment: invoiceDate.value, //วันที่จ่าย
+    typePayment: payment.value, // รูปแบบการจ่าย
+    address: addressPayment.value, //ที่อยู่
+  };
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result) {
+      console.log(123);
+      dialogConfirm($q, async () => {
+        await addNote(body);
+      });
+    }
+  });
+};
+const addNote = async (body: any) => {
+  await http
+    .put(config.API.noteAdd(props.roundId), body)
+    .then(() => {
+      success($q, "เพิ่มราชชื่อสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      props.close();
+    });
+};
+const searchcardid = () => {
+  // console.log(cardid.value);
+  if (cardid.value.length === 13) {
+    let data = listPerson.value.find((e: any) => e.citizenId === cardid.value);
+    if (data) {
+      fullName.value = data.fullname;
+      position.value = data.positionEmployeePosition;
+    } else notifyError($q, "ไม่พบข้อมูลเลขบัตรประชาชนนี้");
+    console.log(data);
+  }
 };
 </script>
 
@@ -107,80 +316,115 @@ const close = async () => {
       </q-toolbar>
       <q-separator />
 
-      <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-12 text-weight-bold text-grey">รายละเอียดข้อมูล</div>
-        <div class="col-xs-12 col-sm-4">
-            <q-input
-              hide-bottom-space
-              outlined
-              class="inputgreen"
-              v-model="cardid"
-              dense
-              lazy-rules
-              :rules="[
+      <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-4">
+              <q-select
+                :rules="[
+                  (val) => !!val || 'กรุณาเลือก  ขรก.สามัญ/ลูกจ้างประจำ',
+                ]"
+                hide-bottom-space
+                :options="employeeClassOps"
+                dense
+                borderless
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                outlined
+                v-model="employeeClass"
+                :label="`ขรก.สามัญ/ลูกจ้างประจำ`"
+                @update:model-value="selectType"
+              />
+            </div>
+            <div class="col-12 text-weight-bold text-grey">
+              รายละเอียดข้อมูล
+            </div>
+            <div class="col-xs-12 col-sm-4">
+              <q-input
+                :disable="disbleStatus"
+                hide-bottom-space
+                outlined
+                class="inputgreen"
+                v-model="cardid"
+                dense
+                lazy-rules
+                :rules="[
               (val:string) => !!val || `${'กรุณากรอก เลขบัตรประจำตัวประชาชน'}`,
               (val:string) =>
                 val.length >= 13 ||
                 `${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,
             ]"
-              label="เลขบัตรประจำตัวประชาชน"
-              maxlength="13"
-              mask="#############"
-            />
-            <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
-          </div>
-          <div class="col-xs-12 col-sm-4">
-            <q-select
-              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-              hide-bottom-space
-              :options="prefixOp"
-              class="col-xs-12 col-sm-6 inputgreen"
-              dense
-              borderless
-              
-              option-label="label"
-              option-value="value"
-              outlined
-              v-model="prefixId"
-              :label="`คำนำหน้าชื่อ`"
-            />
-          </div>
-          <div class="col-xs-6 col-sm-3 col-md-4">
-            <q-input
-              hide-bottom-space
-              outlined
-              dense
-              lazy-rules
-              class="inputgreen"
-              borderless
-              v-model="fullName"
-              :rules="[(val:string) => !!val || `${'กรุณากรอก ชื่อ'}`]"
-              :label="`${'ชื่อ-นามสกุล'}`"
-            />
-          </div>
-          <div class="col-xs-12 col-sm-12">
-            <q-select
-              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-              hide-bottom-space
-              :options="positionOp"
-              class="col-xs-12 col-sm-6 inputgreen"
-              dense
-              borderless
-              option-label="label"
-              option-value="value"
-              outlined
-              v-model="position"
-              :label="`ตำเเหน่ง`"
-            />
-          </div>
+                label="เลขบัตรประจำตัวประชาชน"
+                maxlength="13"
+                mask="#############"
+                @keyup="searchcardid"
+              />
+              <!-- :rules="[(val:any) =>val.length != 13 ||`${'กรุณากรอกเลขบัตรประจำตัวประชาชนให้ครบ'}`,]" -->
+            </div>
+            <!-- <div class="col-xs-12 col-sm-4">
+              <q-select
+                :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+                hide-bottom-space
+                :options="prefixOp"
+                class="col-xs-12 col-sm-6 inputgreen"
+                dense
+                borderless
+                option-label="label"
+                option-value="value"
+                outlined
+                v-model="prefixId"
+                :label="`คำนำหน้าชื่อ`"
+                :disable="disbleStatus"
+              />
+            </div> -->
+            <div class="col-xs-6 col-sm-4">
+              <q-input
+                disable
+                hide-bottom-space
+                outlined
+                dense
+                lazy-rules
+                class="inputgreen"
+                borderless
+                v-model="fullName"
+                :label="`${'ชื่อ-นามสกุล'}`"
+              />
+            </div>
 
-          <div class="col-6"></div>
+            <div class="col-xs-12 col-sm-4">
+              <q-input
+                disable
+                hide-bottom-space
+                outlined
+                dense
+                lazy-rules
+                class="inputgreen"
+                borderless
+                v-model="position"
+                :label="`ตำเเหน่ง`"
+              />
+              <!-- <q-select
+                :disable="disbleStatus"
+                hide-bottom-space
+                :options="positionOp"
+                class="col-xs-12 col-sm-6 inputgreen"
+                dense
+                borderless
+                option-label="label"
+                option-value="value"
+                outlined
+                v-model="position"
+                :label="`ตำเเหน่ง`"
+              /> -->
+            </div>
 
-          
-          <!-- <div class="col-xs-6 col-sm-3 col-md-5">
+            <div class="col-6"></div>
+
+            <!-- <div class="col-xs-6 col-sm-3 col-md-5">
             <q-input
               hide-bottom-space
               outlined
@@ -192,286 +436,425 @@ const close = async () => {
               :label="`${'นามสกุล'}`"
             />
           </div> -->
-          <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
-          <div class="col-12 text-weight-bold text-grey">
-            รายละเอียดตำเเหน่ง
-          </div>
-          <div class="col-xs-12 col-sm-6">
-            <q-input
-              :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
-              hide-bottom-space
-              dense
-              borderless
-              outlined
-              v-model="Advertise"
-              label="หมายเลขประกาศนีย์บัตรกำกับเครื่องราชอิสริยาภรณ์"
-            />
-          </div>
-          <div class="col-xs-12 col-sm-6">
-            <q-input
-              :rules="[(val) => !!val || 'กรุณากรอกชื่อ']"
-              hide-bottom-space
-              dense
-              borderless
-              outlined
-              v-model="brand"
-              label="ชั้นตราเครื่องราชอิสริยาภรณ์"
-            />
-          </div>
-         
-          <div class="col-xs-12 col-sm-6">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="receivedate"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  dense
-                  borderless
-                  outlined
-                  :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
-                  hide-bottom-space
-                  :model-value="
-                    receivedate != null ? date2Thai(receivedate) : undefined
-                  "
-                  :label="`${'วันที่ได้รับพระราชทานเครื่องราชอิสริยาภรณ์'}`"
-                  clearable
-                  @clear="clearDateExam"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" color="primary">
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-          <div class="col-xs-12 col-sm-6">
-            <q-select
-              :rules="[(val) => !!val || 'กรุณาเลือกสังกัด']"
-              hide-bottom-space
-              :options="affiliationRequestOp"
-              class="col-xs-12 col-sm-6"
-              dense
-              borderless
-              option-label="label"
-              option-value="value"
-              outlined
-              v-model="affiliationRequest"
-              :label="`สังกัด ณ วันที่ขอพระราชทานเครื่องราชอิสริยาภรณ์`"
-            />
-          </div>
-          <div class="col-xs-12 col-sm-6">
-            <q-select
-              :rules="[(val) => !!val || 'กรุณาเลือกสังกัด']"
-              hide-bottom-space
-              :options="affiliationReceivedOp"
-              class="col-xs-12 col-sm-6"
-              dense
-              borderless
-              option-label="label"
-              option-value="value"
-              outlined
-              v-model="affiliationReceived"
-              :label="`สังกัด ณ วันที่ได้รับประกาศนียบัตรกำกับเครื่องราชอิสริยาภรณ์`"
-            />
-          </div>
-          <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
-          <div class="col-12 text-weight-bold text-grey">
-            ประกาศราชกิจจานุเบกษา
-          </div>
-          <div class="col-xs-12 col-sm-4">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="announceDate"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  dense
-                  borderless
-                  outlined
-                  :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
-                  hide-bottom-space
-                  :model-value="
-                    announceDate != null ? date2Thai(announceDate) : undefined
-                  "
-                  :label="`${'วันที่'}`"
-                  clearable
-                  @clear="clearDateExam"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" color="primary">
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-          <div class="col-xs-12 col-sm-4">
-            <q-select
-              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-              hide-bottom-space
-              :options="volumeOp"
-              class="col-xs-12 col-sm-6"
-              dense
-              borderless
-              option-label="label"
-              option-value="value"
-              outlined
-              v-model="volume"
-              :label="`เล่มที่`"
-            />
-          </div>
-          <div class="col-xs-12 col-sm-4">
-            <q-select
-              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-              hide-bottom-space
-              :options="episodeOp"
-              class="col-xs-12 col-sm-6"
-              dense
-              borderless
-              option-label="label"
-              option-value="value"
-              outlined
-              v-model="episode"
-              :label="`ตอนที่`"
-            />
-          </div>
-          <div class="col-xs-12 col-sm-6">
-            <q-select
-              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-              hide-bottom-space
-              :options="dutyOp"
-              class="col-xs-12 col-sm-6"
-              dense
-              borderless
-              option-label="label"
-              option-value="value"
-              outlined
-              v-model="duty"
-              :label="`หน้าที่`"
-            />
-          </div>
-          <div class="col-xs-12 col-sm-6">
-            <q-select
-              :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-              hide-bottom-space
-              :options="announcedOp"
-              class="col-xs-12 col-sm-6"
-              dense
-              borderless
-              option-label="label"
-              option-value="value"
-              outlined
-              v-model="announced"
-              :label="`ลำดับที่`"
-            />
-          </div>
-          <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
-          <div class="col-12 text-weight-bold text-grey">ผลการจ่ายใบกำกับ</div>
-          <div class="col-xs-12 col-sm-4">
-            <q-input
-              dense
-              borderless
-              outlined
-              v-model="invoice"
-              label="หมายเลขใบกํากับ"
-            />
-          </div>
-          <div class="col-xs-12 col-sm-4">
-            <datepicker
-              menu-class-name="modalfix"
-              v-model="invoiceDate"
-              :locale="'th'"
-              autoApply
-              borderless
-              :enableTimePicker="false"
-              week-start="0"
-            >
-              <template #year="{ year }">
-                {{ year + 543 }}
-              </template>
-              <template #year-overlay-value="{ value }">
-                {{ parseInt(value + 543) }}
-              </template>
-              <template #trigger>
-                <q-input
-                  dense
-                  borderless
-                  outlined
-                  hide-bottom-space
-                  :model-value="
-                    invoiceDate != null ? date2Thai(invoiceDate) : undefined
-                  "
-                  :label="`${'วันที่จ่ายใบกำกับ'}`"
-                  clearable
-                  @clear="clearDateExam"
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" color="primary">
-                    </q-icon>
-                  </template>
-                </q-input>
-              </template>
-            </datepicker>
-          </div>
-          <div class="col-xs-12 col-sm-4">
-            <q-select
-              
-              hide-bottom-space
-              :options="paymentOp"
-              class="col-xs-12 col-sm-6"
-              dense
-              borderless
-              option-label="label"
-              option-value="value"
-              outlined
-              emit-value
-              map-options
-              v-model="payment"
-              :label="`เลือกรูปแบบการจ่าย`"
-            />
-          </div>
-          <div v-if="payment === 'xx1'" class="col-12">
-            <q-input
-              label="ที่อยู่ที่จ่าย"
-              class="bg-white"
-              dense
-              borderless
-              outlined
-              v-model="addressPayment"
-              type="textarea"
-            />
+            <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
+            <div class="col-12 text-weight-bold text-grey">
+              รายละเอียดตำเเหน่ง
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <q-input
+                :disable="disbleStatus"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    'กรุณากรอกหมายเลขประกาศนีย์บัตรกำกับเครื่องราชอิสริยาภรณ์',
+                ]"
+                hide-bottom-space
+                dense
+                borderless
+                outlined
+                v-model="Advertise"
+                label="หมายเลขประกาศนีย์บัตรกำกับเครื่องราชอิสริยาภรณ์"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <!-- <q-input
+                :disable="disbleStatus"
+                :rules="[
+                  (val) => !!val || 'กรุณากรอกชื่อชั้นตราเครื่องราชอิสริยาภรณ์',
+                ]"
+                hide-bottom-space
+                dense
+                borderless
+                outlined
+                v-model="brand"
+                label="ชั้นตราเครื่องราชอิสริยาภรณ์"
+              /> -->
+              <q-select
+                :disable="disbleStatus"
+                v-model="brand"
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                :label="`${'ชั้นตราเครื่องราชอิสริยาภรณ์'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="DataStore.insigniaOp2"
+                option-value="id"
+                :readonly="false"
+                :borderless="false"
+                style="min-width: 150px"
+                :rules="[
+                  (val) => !!val || 'กรุณากรอกชื่อชั้นตราเครื่องราชอิสริยาภรณ์',
+                ]"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="receivedate"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    :disable="disbleStatus"
+                    dense
+                    borderless
+                    outlined
+                    :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                    hide-bottom-space
+                    :model-value="
+                      receivedate != null ? date2Thai(receivedate) : undefined
+                    "
+                    :label="`${'วันที่ได้รับพระราชทานเครื่องราชอิสริยาภรณ์'}`"
+                    clearable
+                    @clear="clearDateExam"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <q-input
+                :disable="disbleStatus"
+                :rules="[(val) => !!val || 'กรุณากรอกทะเบียนฐานนันดร']"
+                hide-bottom-space
+                dense
+                borderless
+                outlined
+                v-model="issue"
+                label="ทะเบียนฐานนันดร"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <q-input
+                :disable="disbleStatus"
+                :rules="[(val) => !!val || 'กรุณากรอกสังกัด']"
+                hide-bottom-space
+                dense
+                borderless
+                outlined
+                v-model="affiliationRequest"
+                label="สังกัด ณ วันที่ขอพระราชทานเครื่องราชอิสริยาภรณ์"
+              />
+              <!-- <q-select
+                :disable="disbleStatus"
+                :rules="[(val) => !!val || 'กรุณาเลือกสังกัด']"
+                hide-bottom-space
+                :options="affiliationRequestOp"
+                class="col-xs-12 col-sm-6"
+                dense
+                borderless
+                option-label="label"
+                option-value="value"
+                outlined
+                v-model="affiliationRequest"
+                :label="`สังกัด ณ วันที่ขอพระราชทานเครื่องราชอิสริยาภรณ์`"
+              /> -->
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <q-input
+                :disable="disbleStatus"
+                :rules="[(val) => !!val || 'กรุณากรอกสังกัด']"
+                hide-bottom-space
+                dense
+                borderless
+                outlined
+                v-model="affiliationReceived"
+                label="สังกัด ณ วันที่ได้รับประกาศนียบัตรกำกับเครื่องราชอิสริยาภรณ์"
+              />
+              <!-- <q-select
+                :rules="[(val) => !!val || 'กรุณาเลือกสังกัด']"
+                hide-bottom-space
+                :options="affiliationReceivedOp"
+                class="col-xs-12 col-sm-6"
+                dense
+                borderless
+                option-label="label"
+                option-value="value"
+                outlined
+                v-model="affiliationReceived"
+                :label="`สังกัด ณ วันที่ได้รับประกาศนียบัตรกำกับเครื่องราชอิสริยาภรณ์`"
+              /> -->
+            </div>
+            <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
+            <div class="col-12 text-weight-bold text-grey">
+              ประกาศราชกิจจานุเบกษา
+            </div>
+            <div class="col-xs-12 col-sm-4">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="announceDate"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    :disable="disbleStatus"
+                    dense
+                    borderless
+                    outlined
+                    :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                    hide-bottom-space
+                    :model-value="
+                      announceDate != null ? date2Thai(announceDate) : undefined
+                    "
+                    :label="`${'วันที่'}`"
+                    clearable
+                    @clear="clearDateExam"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-12 col-sm-4">
+              <q-input
+                :disable="disbleStatus"
+                hide-bottom-space
+                outlined
+                dense
+                lazy-rules
+                class="inputgreen"
+                borderless
+                v-model="volume"
+                :label="`เล่มที่`"
+                :rules="[(val) => !!val || 'กรุณากรอกเล่มที่']"
+              />
+              <!-- <q-select
+                :disable="disbleStatus"
+                :rules="[(val) => !!val || 'กรุณาเลือกเล่มที่']"
+                hide-bottom-space
+                :options="volumeOp"
+                class="col-xs-12 col-sm-6"
+                dense
+                borderless
+                option-label="label"
+                option-value="value"
+                outlined
+                emit-value
+                v-model="volume"
+                :label="`เล่มที่`"
+              /> -->
+            </div>
+            <div class="col-xs-12 col-sm-4">
+              <q-input
+                :disable="disbleStatus"
+                hide-bottom-space
+                outlined
+                dense
+                lazy-rules
+                class="inputgreen"
+                borderless
+                v-model="episode"
+                :label="`ตอนที่`"
+                :rules="[(val) => !!val || 'กรุณากรอกตอนที่']"
+              />
+              <!-- <q-select
+                :disable="disbleStatus"
+                :rules="[(val) => !!val || 'กรุณาเลือกตอนที่']"
+                hide-bottom-space
+                :options="episodeOp"
+                class="col-xs-12 col-sm-6"
+                dense
+                borderless
+                option-label="label"
+                option-value="value"
+                outlined
+                v-model="episode"
+                emit-value
+                :label="`ตอนที่`"
+              /> -->
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <q-input
+                :disable="disbleStatus"
+                hide-bottom-space
+                outlined
+                dense
+                lazy-rules
+                class="inputgreen"
+                borderless
+                v-model="duty"
+                :label="`หน้าที่`"
+                :rules="[(val) => !!val || 'กรุณากรอกหน้าที่']"
+              />
+              <!-- <q-select
+                :disable="disbleStatus"
+                :rules="[(val) => !!val || 'กรุณาเลือกหน้าที่']"
+                hide-bottom-space
+                :options="dutyOp"
+                class="col-xs-12 col-sm-6"
+                dense
+                emit-value
+                borderless
+                option-label="label"
+                option-value="value"
+                outlined
+                v-model="duty"
+                :label="`หน้าที่`"
+              /> -->
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <q-input
+                :disable="disbleStatus"
+                hide-bottom-space
+                outlined
+                dense
+                lazy-rules
+                class="inputgreen"
+                borderless
+                v-model="announced"
+                :label="`ลำดับที่`"
+                :rules="[(val) => !!val || 'กรุณากรอกลำดับที่']"
+              />
+              <!-- <q-select
+                :disable="disbleStatus"
+                :rules="[(val) => !!val || 'กรุณาเลือกลำดับที่']"
+                hide-bottom-space
+                :options="announcedOp"
+                class="col-xs-12 col-sm-6"
+                dense
+                emit-value
+                borderless
+                option-label="label"
+                option-value="value"
+                outlined
+                v-model="announced"
+                :label="`ลำดับที่`"
+              /> -->
+            </div>
+            <div class="col-12 q-my-xs"><q-separator size="2px" /></div>
+            <div class="col-12 text-weight-bold text-grey">
+              ผลการจ่ายใบกำกับ
+            </div>
+            <!-- <div class="col-xs-12 col-sm-4"> -->
+            <!-- :rules="[(val) => !!val || 'กรุณากรแกหมายเล่นใบกำกับ']" -->
+            <!-- <q-input
+                dense
+                borderless
+                outlined
+                v-model="invoice"
+                label="หมายเลขใบกํากับ"
+              />
+            </div> -->
+            <div class="col-xs-12 col-sm-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="invoiceDate"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    :disable="disbleStatus && status !== 'DONE'"
+                    :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                    dense
+                    borderless
+                    outlined
+                    hide-bottom-space
+                    :model-value="
+                      invoiceDate != null ? date2Thai(invoiceDate) : undefined
+                    "
+                    :label="`${'วันที่จ่ายใบกำกับ'}`"
+                    clearable
+                    @clear="clearDateExam"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-12 col-sm-6">
+              <q-select
+                :disable="disbleStatus && status !== 'DONE'"
+                hide-bottom-space
+                :options="paymentOp"
+                class="col-xs-12 col-sm-6"
+                dense
+                borderless
+                option-label="label"
+                option-value="value"
+                outlined
+                emit-value
+                map-options
+                v-model="payment"
+                :label="`เลือกรูปแบบการจ่าย`"
+                :rules="[(val) => !!val || 'เลือกรูปแบบการจ่าย']"
+              />
+            </div>
+            <div v-if="payment === 'จัดส่งทางไปรษณี'" class="col-12">
+              <q-input
+                :disable="disbleStatus && status !== 'DONE'"
+                :rules="[(val) => !!val || 'กรุณากรอกที่อยู่ที่จ่าย']"
+                label="ที่อยู่ที่จ่าย"
+                class="bg-white"
+                dense
+                borderless
+                outlined
+                v-model="addressPayment"
+                type="textarea"
+              />
+            </div>
           </div>
         </div>
-      </div>
+      </q-form>
 
       <q-separator />
       <div class="q-pa-md">
         <div class="row justify-end">
-          <q-btn label="บันทึก" @click="props.save" color="public" />
+          <q-btn label="บันทึก" @click="clickSave" color="public" />
         </div>
       </div>
     </q-card>
diff --git a/src/modules/07_insignia/storeResult.ts b/src/modules/07_insignia/storeResult.ts
new file mode 100644
index 000000000..7f2025481
--- /dev/null
+++ b/src/modules/07_insignia/storeResult.ts
@@ -0,0 +1,55 @@
+import { defineStore } from "pinia";
+import { ref, } from "vue";
+
+
+
+export const useResultDataStore = defineStore("insignia", () => {
+  const insignia = ref<string>('')
+  const insigniaOp = ref<any[]>([{ name: "ทั้งหมด", id: "" }])
+  const insigniaOp2 = ref<any[]>([])
+  const insigniaType = ref<any>()
+
+
+  const fetchDatainsignia = async (data: any) => {
+    data.forEach((e: any) => {
+      insigniaOp.value.push({ name: e.name, id: e.id })
+    });
+    data.forEach((e: any) => {
+      insigniaOp2.value.push({ name: e.name, id: e.id })
+    });
+
+  }
+  const fetchDatainsigniaType = async (data: any) => {
+    insigniaType.value = data.map((e: any) => ({ name: e.id, label: e.name }))
+  }
+  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 {
+    insignia,
+    insigniaOp,
+    insigniaOp2,
+    insigniaType,
+    fetchDatainsignia,
+    fetchDatainsigniaType,
+    status,
+    profileType,
+  };
+});
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index f994d8b32..7238700a1 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } 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 DialogForm from "@/modules/07_insignia/components/3_result/DialogForm.vue";
 import fileUploadview from "../components/3_result/fileUpload.vue";
@@ -13,20 +14,22 @@ import type { QTableProps, QInput } from "quasar";
 import { useQuasar } from "quasar";
 
 // const router = useRouter();
+const DataStore = useResultDataStore();
 const mixin = useCounterMixin();
-const { date2Thai, dialogConfirm } = mixin;
+const { date2Thai, dialogConfirm, showLoader, hideLoader, messageError } =
+  mixin;
 const $q = useQuasar();
-const tab = ref<string>("hight");
-
-const selectType = ref<string>("1");
-const selectTypeOption = ref<OptionData[]>([
-  { id: "1", name: "เบญจมาภรณ์มงกุฎไทย" },
-]);
+const tab = ref<string>("");
 
 const selectRound = ref<string>();
 const selectRoundOption = ref<OptionData[]>([]);
+const modal = ref<boolean>(false);
+const action = ref<string>("");
+const personId = ref<string>();
 onMounted(async () => {
   await fecthRound();
+  await fecthInsignia();
+  await fecthInsigniaType();
 });
 const fecthRound = async () => {
   await http
@@ -35,25 +38,42 @@ const fecthRound = async () => {
       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 filterKeyword = ref<string>("");
-
-const pagination = ref({
-  sortBy: "filename",
-  descending: true,
-  page: 1,
-  rowsPerPage: 10,
-});
 const visibleColumns = ref<String[]>([
   "no",
   "status",
   "name",
   "type",
+  "employeeType",
   "page",
   "number",
   "vatnumber",
@@ -62,9 +82,6 @@ const visibleColumns = ref<String[]>([
   "address",
   "action",
 ]);
-
-const filterRef = ref<QInput>();
-const filter = ref<string>("");
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -102,6 +119,15 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "employeeType",
+    align: "left",
+    label: "สถานภาพ",
+    field: "employeeType",
+    sortable: true,
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "page",
     align: "left",
@@ -163,35 +189,91 @@ const columns = ref<QTableProps["columns"]>([
     field: "",
   },
 ]);
-
 const rows = ref<any>([
-  {
-    no: "1",
-    status: "รอบันทึกข้อมูล",
-    name: "นางสาวรัชภรณ์ ภักดี",
-    type: "ทั้งหมด",
-    page: "8",
-    number: "11",
-    vatnumber: "5647833",
-    datepay: null,
-    typepay: null,
-    address: "เลขที่ 2/3 หมู่ที่ 14 ถนนบ...",
-  },
-  {
-    no: "2",
-    status: "บันทึกลง ก.พ. 7 แล้ว",
-    name: "นางสาวภาพรรณ ลออ",
-    type: "ทั้งหมด",
-    page: "12",
-    number: "11",
-    vatnumber: "1122345",
-    datepay: null,
-    typepay: null,
-    address: "เลขที่ 2/3 หมู่ที่ 14 ถนนบ...",
-  },
+  // {
+  //   no: "1",
+  //   status: "รอบันทึกข้อมูล",
+  //   name: "นางสาวรัชภรณ์ ภักดี",
+  //   type: "ทั้งหมด",
+  //   page: "8",
+  //   number: "11",
+  //   vatnumber: "5647833",
+  //   datepay: null,
+  //   typepay: null,
+  //   address: "เลขที่ 2/3 หมู่ที่ 14 ถนนบ...",
+  // },
+  // {
+  //   no: "2",
+  //   status: "บันทึกลง ก.พ. 7 แล้ว",
+  //   name: "นางสาวภาพรรณ ลออ",
+  //   type: "ทั้งหมด",
+  //   page: "12",
+  //   number: "11",
+  //   vatnumber: "1122345",
+  //   datepay: null,
+  //   typepay: null,
+  //   address: "เลขที่ 2/3 หมู่ที่ 14 ถนนบ...",
+  // },
 ]);
+watch(tab, () => {
+  if (tab.value !== "doc") {
+    fecthlistInsignia();
+  }
+});
+watch(modal, () => {
+  if (modal.value == false) {
+    fecthlistInsignia();
+  }
+});
+const selectorInsignia = () => {
+  console.log(DataStore.insignia, selectRound.value, tab.value);
+  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) => {
+      console.log(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),
+        page: e.page,
+        number: e.no,
+        vatnumber: e.number,
+        datepay: date2Thai(e.datePayment),
+        typepay: e.typePayment,
+        address: e.address,
+      }));
+      console.log(rows.value);
+    })
+    .catch((err) => {
+      console.log(err);
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
-const modal = ref<boolean>(false);
+const filterRef = ref<QInput>();
+const filter = ref<string>("");
 
 const close = () => {
   modal.value = false;
@@ -199,15 +281,17 @@ const close = () => {
 
 const addData = () => {
   modal.value = true;
-  console.log("addData");
+  action.value = "addData";
 };
 
 const editData = (id: string) => {
+  personId.value = id;
+  action.value = "editData";
   modal.value = true;
-  console.log("editData", id);
 };
 
 const save = () => {
+  console.log(122);
   console.log("save function");
 };
 
@@ -216,27 +300,6 @@ const resetFilter = () => {
   filter.value = "";
   filterRef.value!.focus();
 };
-
-const filterSelector = (val: any, update: Function, filtername: string) => {
-  // switch (filtername) {
-  //   case "selectTypeOption":
-  //     update(() => {
-  //       selectTypeOption.value = selectTypeOptionFilter.value.filter(
-  //         (v: DataOption) => v.name!.indexOf(val) > -1
-  //       );
-  //     });
-  //     break;
-  //   case "selectStatusOption":
-  //     update(() => {
-  //       selectStatusOption.value = selectStatusOptionFilter.value.filter(
-  //         (v: DataOption) => v.name!.indexOf(val) > -1
-  //       );
-  //     });
-  //     break;
-  //   default:
-  //     break;
-  // }
-};
 </script>
 
 <template>
@@ -262,6 +325,7 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
           use-input
           input-debounce="0"
           input-class="text-bold text-grey"
+          @update:emit-value="selectorRound"
         >
         </selector>
       </div>
@@ -275,421 +339,427 @@ const filterSelector = (val: any, update: Function, filtername: string) => {
       active-color="primary"
       indicator-color="primary"
     >
-      <q-tab name="hight" label="ขั้นสายสะพาน" />
+      <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-tab name="medal" label="เหรียญตรา" /> -->
+
       <q-tab name="doc" label="เอกสารอ้างอิง" />
     </q-tabs>
     <q-separator />
     <div>
-      <div v-if="tab == 'hight'" class="q-pa-md">
-        <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
-          <selector
-            outlined
-            dense
-            lazy-rules
-            v-model="selectType"
-            hide-bottom-space
-            :label="`${'เครื่องราชฯ'}`"
-            emit-value
-            map-options
-            option-label="name"
-            :options="selectTypeOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-            style="min-width: 150px"
-            @filter="(inputValue: string, doneFn: Function) => filterSelector(inputValue, doneFn, 'selectTypeOption')"
-          />
-          <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 -->
+      <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">
             <q-select
-              v-model="visibleColumns"
-              :display-value="$q.lang.table.columns"
-              multiple
-              outlined
+              v-model="DataStore.insignia"
               dense
-              :options="columns"
-              options-dense
-              option-value="name"
-              map-options
+              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"
-              class="gt-xs q-ml-sm"
+              @update:model-value="selectorInsignia"
             />
+            <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.stop="editData(props.row.id)"
+                    icon="mdi-pencil-outline"
+                  >
+                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                  </q-btn>
+                </div>
+
+                <div v-else>
+                  {{ props.value }}
+                </div>
+              </q-td>
+            </template>
+          </d-table>
         </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.no)"
-                  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 == 'low'" class="q-pa-md">
-        <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
-          <selector
-            outlined
-            dense
-            lazy-rules
-            v-model="selectType"
-            hide-bottom-space
-            :label="`${'เครื่องราชฯ'}`"
-            emit-value
-            map-options
-            option-label="name"
-            :options="selectTypeOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-            style="min-width: 150px"
-            @filter="(inputValue: string,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'selectTypeOption'
-              )"
-          />
-          <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
+        <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
-              :options="columns"
-              options-dense
-              option-value="name"
-              map-options
+              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"
-              class="gt-xs q-ml-sm"
             />
+            <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.id)"
+                    icon="mdi-pencil-outline"
+                  >
+                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                  </q-btn>
+                </div>
+
+                <div v-else>
+                  {{ props.value }}
+                </div>
+              </q-td>
+            </template>
+          </d-table>
         </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.no)"
-                  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 == 'medal'" class="q-pa-md">
-        <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
-          <selector
-            outlined
-            dense
-            lazy-rules
-            v-model="selectType"
-            hide-bottom-space
-            :label="`${'เครื่องราชฯ'}`"
-            emit-value
-            map-options
-            option-label="name"
-            :options="selectTypeOption"
-            option-value="id"
-            use-input
-            input-debounce="0"
-            style="min-width: 150px"
-            @filter="(inputValue: string,
-              doneFn: Function) => filterSelector(inputValue, doneFn, 'selectTypeOption'
-              )"
-          />
-          <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
+        <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
-              :options="columns"
-              options-dense
-              option-value="name"
-              map-options
+              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"
-              class="gt-xs q-ml-sm"
             />
+            <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.id)"
+                    icon="mdi-pencil-outline"
+                  >
+                    <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+                  </q-btn>
+                </div>
+
+                <div v-else>
+                  {{ props.value }}
+                </div>
+              </q-td>
+            </template>
+          </d-table>
         </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.no)"
-                  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 == 'doc'">
+      <div v-if="tab == 'doc'">
         <fileUploadview :roundId="selectRound" />
       </div>
     </div>
 
-    <DialogForm :modal="modal" :save="save" :close="close" />
+    <DialogForm
+      :modal="modal"
+      :save="save"
+      :close="close"
+      :roundId="selectRound"
+      :action="action"
+      :personId="personId"
+    />
   </q-card>
 </template>
 <style lang="scss" scoped>