From 52734ecffb91533ce1910a76b618a45a30bc2757 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 23 Aug 2023 16:34:24 +0700
Subject: [PATCH 1/7] no message

---
 .../07_insignia/components/3_result/fileUpload.vue  | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/modules/07_insignia/components/3_result/fileUpload.vue b/src/modules/07_insignia/components/3_result/fileUpload.vue
index d68ac7412..1dbc42107 100644
--- a/src/modules/07_insignia/components/3_result/fileUpload.vue
+++ b/src/modules/07_insignia/components/3_result/fileUpload.vue
@@ -8,7 +8,12 @@ const documentTitle = ref<string>("");
 
 const filterKeyword = ref<string>("");
 const filterDoc = ref<any>(null);
-
+  const props = defineProps({
+    saveData: {
+		type: Function,
+    default: () => console.log("not function"),
+	},
+});
 const visibleColumnsReference = ref<String[]>([
   "no",
   "fileName",
@@ -69,6 +74,9 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
+const save = () => {
+props.saveData()
+}
 </script>
 <template>
   <Transition>
@@ -111,6 +119,9 @@ const pagination = ref({
             hide-bottom-space
           />
         </div>
+        <div class="col-12 flex justify-end">
+          <q-btn label="บันทึก" @click="save" color="public" />
+        </div>
         <div class="row col-12">
           <q-space />
           <q-input

From d0eff1d615e956dec983e30eaf643668d7a1673d Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 24 Aug 2023 09:11:44 +0700
Subject: [PATCH 2/7] no message

---
 src/api/07_insignia/api.insignia.ts           |  1 +
 .../components/3_result/fileUpload.vue        | 22 +++++++++++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/api/07_insignia/api.insignia.ts b/src/api/07_insignia/api.insignia.ts
index ae391cfb6..7ef069369 100644
--- a/src/api/07_insignia/api.insignia.ts
+++ b/src/api/07_insignia/api.insignia.ts
@@ -26,6 +26,7 @@ export default {
   insigniaDashboard: (insigniaPeriodId: string) => `${insignia}/request/dashboard/${insigniaPeriodId}`,
   // record
   noteround: () => `${insignia}/request/note`,
+  requestDocNote: (id:string) => `${insignia}/request/note/doc/${id}`,
 
 
 };
diff --git a/src/modules/07_insignia/components/3_result/fileUpload.vue b/src/modules/07_insignia/components/3_result/fileUpload.vue
index b0cf3c634..d745109a8 100644
--- a/src/modules/07_insignia/components/3_result/fileUpload.vue
+++ b/src/modules/07_insignia/components/3_result/fileUpload.vue
@@ -2,18 +2,16 @@
 import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
 
+import http from "@/plugins/http";
+import config from "@/app.config";
+
 const fileUpload = ref<any>(null);
 const reason = ref<string>("");
 const documentTitle = ref<string>("");
 
 const filterKeyword = ref<string>("");
 const filterDoc = ref<any>(null);
-  const props = defineProps({
-    saveData: {
-		type: Function,
-    default: () => console.log("not function"),
-	},
-});
+
 const visibleColumnsReference = ref<String[]>([
   "no",
   "fileName",
@@ -64,13 +62,23 @@ const rows2 = ref<any>([
     file: "",
   },
 ]);
+
 const props = defineProps({
   roundId: {
     type: String,
   },
 });
-onMounted(() => {
+
+const getRequest = async () => {
+  await http
+  .get(config.API.requestDocNote(props.roundId as string))
+  .then((res:any) =>{
+    console.log(res)
+  })
+}
+onMounted(async() => {
   console.log(props.roundId);
+  await getRequest()
 });
 const resetFilterRef = () => {
   filterKeyword.value = "";

From dbcf1f0106044e89627b19f211fc5007f069c757 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 24 Aug 2023 11:47:56 +0700
Subject: [PATCH 3/7] no message

---
 .../components/probation/FormAssign.vue       | 32 +++++----
 .../components/3_result/fileUpload.vue        | 68 ++++++++++++++-----
 2 files changed, 69 insertions(+), 31 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index 994877eed..6adb6fe83 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -55,6 +55,8 @@ const {
   showLoader,
   hideLoader,
   dialogConfirm,
+  dialogMessageNotify,
+  modalWarning
 } = mixin;
 const filterData = (options: any[], excludedGroups: any[]) => {
   return options.filter(
@@ -545,11 +547,6 @@ const putData = (id: string) => {
       role: "mentor",
       dated: date2.value instanceof Date ? dateToISO(date2.value) : dateToISO(new Date(date2.value)),
     },
-    {
-      personal_id: caretaker2.value.id,
-      role: "mentor",
-      dated: date3.value instanceof Date ? dateToISO(date3.value) : dateToISO(new Date(date3.value)),
-    },
     {
       personal_id: commander.value.id,
       role: "commander",
@@ -560,6 +557,13 @@ const putData = (id: string) => {
       role: "chairman",
     },
   ];
+  if (caretaker2.value) {
+  assign_director.push({
+    personal_id: caretaker2.value.id,
+    role: "mentor",
+    dated: date3.value instanceof Date ? dateToISO(date3.value) : dateToISO(new Date(date3.value)),
+  });
+}
   const data = {
     personalId: GUID,
     fullname: fullname.value,
@@ -621,7 +625,7 @@ const DataSave = async (id: string) => {
           hideLoader();
         });
     } else {
-      notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
+      dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
     }
   });
 };
@@ -856,7 +860,7 @@ watch(knowledge.value, () => {
                   :options="filtermantor(OPcaretaker, [caretaker2])" class="col-xs-12 col-sm-6" :readonly="status != true"
                   dense hide-bottom-space borderless :outlined="status == true" v-model="caretaker1"
                   :label="`ผู้ดูแลคนที่ 1`" option-label="name" />
-                <q-select :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
+                <q-select clearable 
                   :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id" option-label="name"
                   hide-bottom-space class="col-xs-12 col-sm-6" :readonly="status != true" dense borderless
                   :outlined="status == true" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
@@ -866,7 +870,7 @@ watch(knowledge.value, () => {
                   :options="filtermantor(OPcaretaker, [caretaker2])" class="col-xs-12 col-sm-6" :readonly="status != true"
                   dense hide-bottom-space borderless :outlined="status == true" v-model="caretaker1"
                   :label="`ผู้ดูแลคนที่ 1`" option-label="name" />
-                <q-select :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
+                <q-select  clearable
                   :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id" option-label="name"
                   hide-bottom-space class="col-xs-12 col-sm-6" :readonly="status != true" dense borderless
                   :outlined="status == true" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
@@ -1598,15 +1602,15 @@ watch(knowledge.value, () => {
                     </template>
                   </datepicker>
                 </div>
-                <q-select v-if="status == true" :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
+                <q-select clearable v-if="status == true" :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
                   option-label="name" class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless
                   :outlined="status == true" v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
-                <q-select v-else :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id" option-label="name"
-                  class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless :outlined="status == true"
+                <q-select clearable v-else :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id" option-label="name"
+                  class="col-xs-12 col-sm-8" :readonly="status != true " dense borderless :outlined="status == true"
                   v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
                 <div class="col-xs-12 col-sm-4">
                   <datepicker menu-class-name="modalfix" v-model="date3" :locale="'th'" autoApply borderless
-                    :enableTimePicker="false" week-start="0" :readonly="status != true">
+                    :enableTimePicker="false" week-start="0" :readonly="status != true | !caretaker2">
                     <template #year="{ year }">
                       {{ year + 543 }}
                     </template>
@@ -1614,7 +1618,9 @@ watch(knowledge.value, () => {
                       {{ parseInt(value + 543) }}
                     </template>
                     <template #trigger>
-                      <q-input :rules="[(val) => !!val || 'กรุณาเลือกวันที่']" hide-bottom-space
+                      <q-input  hide-bottom-space
+                      
+                      :disable="!caretaker2"
                         :readonly="status != true" dense s borderless :outlined="status == true"
                         class="full-width datepicker" :model-value="date3 != null ? date2Thai(date3) : null"
                         label="ลงวันที่">
diff --git a/src/modules/07_insignia/components/3_result/fileUpload.vue b/src/modules/07_insignia/components/3_result/fileUpload.vue
index d745109a8..066340a68 100644
--- a/src/modules/07_insignia/components/3_result/fileUpload.vue
+++ b/src/modules/07_insignia/components/3_result/fileUpload.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import type { QTableProps } from "quasar";
-
+import  {  useQuasar } from "quasar";
+import { useCounterMixin } from '@/stores/mixin'
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+const mixin = useCounterMixin()
+const { success, messageError,hideLoader,dialogConfirm } = mixin
 const fileUpload = ref<any>(null);
 const reason = ref<string>("");
 const documentTitle = ref<string>("");
-
+  const $q = useQuasar();
 const filterKeyword = ref<string>("");
 const filterDoc = ref<any>(null);
 
@@ -48,21 +51,12 @@ const colums2 = ref<QTableProps["columns"]>([
     sortable: true,
   },
 ]);
-const rows2 = ref<any>([
-  {
-    no: "1",
-    fileName: "test1",
-    annotation: "ทดสอบ",
-    file: "",
-  },
-  {
-    no: "2",
-    fileName: "test2",
-    annotation: "ทดสอบ",
-    file: "",
-  },
-]);
+const rows2 = ref<any>([]);
 
+interface TypeData {
+  fileName:string
+  annotation:string
+}
 const props = defineProps({
   roundId: {
     type: String,
@@ -74,7 +68,45 @@ const getRequest = async () => {
   .get(config.API.requestDocNote(props.roundId as string))
   .then((res:any) =>{
     console.log(res)
+    const data = res.data.result
+    console.log(data)
+    data.map((item:TypeData) =>{
+      rows2.value.push({
+        fileName:item.fileName,
+        annotation:item.annotation
+      })
+
+    }
+    )
+    console.log(rows2.value)
   })
+  .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+    });
+}
+
+const putRequest = () => {
+  const dataAppend = new FormData()
+  dataAppend.append("Name",documentTitle.value)
+  dataAppend.append("Reason",reason.value)
+  dataAppend.append("File",fileUpload.value)
+  http
+  .put(config.API.requestDocNote(props.roundId as string),dataAppend)
+  .then((res) => {
+    success($q, "บันทึกข้อมูลสำเร็จ");
+  })
+  .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      documentTitle.value = "";
+      reason.value = "";
+      fileUpload.value = null;
+      getRequest();
+      hideLoader();
+    });
 }
 onMounted(async() => {
   console.log(props.roundId);
@@ -91,7 +123,7 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 const save = () => {
-props.saveData()
+  dialogConfirm($q,()=>putRequest())
 }
 </script>
 <template>
@@ -203,7 +235,7 @@ props.saveData()
                   {{ props.row.fileName }}
                 </q-td>
                 <q-td key="annotation" :props="props">
-                  {{ props.row.annotation }}
+                  {{ props.row.annotation !== undefined ? props.row.annotation:"-"}}
                 </q-td>
                 <q-td auto-width>
                   <q-btn

From 955e651dae07c3de7260901cdce0708e7331491b Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 24 Aug 2023 13:00:33 +0700
Subject: [PATCH 4/7] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=20href=20=3D>=20PDF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../05_placement/components/Transfer/transferRegistry.vue | 2 +-
 .../07_insignia/components/3_result/fileUpload.vue        | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index 50fce27a9..bc6ea2a1d 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -135,7 +135,7 @@
               {{ props.row.fileName }}
             </q-td>
             <q-td key="btnMicrosoft" :props="props">
-              <q-btn flat dense round color="red" icon="picture_as_pdf">
+              <q-btn type="a" target="_blank" :href="props.row.pathName" flat dense round color="red" icon="picture_as_pdf">
                 <q-tooltip>ไฟล์ PDF</q-tooltip>
               </q-btn>
               <q-btn flat dense round color="blue" icon="mdi-file-word">
diff --git a/src/modules/07_insignia/components/3_result/fileUpload.vue b/src/modules/07_insignia/components/3_result/fileUpload.vue
index 066340a68..bd8474e51 100644
--- a/src/modules/07_insignia/components/3_result/fileUpload.vue
+++ b/src/modules/07_insignia/components/3_result/fileUpload.vue
@@ -10,6 +10,7 @@ const mixin = useCounterMixin()
 const { success, messageError,hideLoader,dialogConfirm } = mixin
 const fileUpload = ref<any>(null);
 const reason = ref<string>("");
+const file = ref<string>("");
 const documentTitle = ref<string>("");
   const $q = useQuasar();
 const filterKeyword = ref<string>("");
@@ -56,6 +57,7 @@ const rows2 = ref<any>([]);
 interface TypeData {
   fileName:string
   annotation:string
+  pathName:string
 }
 const props = defineProps({
   roundId: {
@@ -73,7 +75,8 @@ const getRequest = async () => {
     data.map((item:TypeData) =>{
       rows2.value.push({
         fileName:item.fileName,
-        annotation:item.annotation
+        annotation:item.annotation,
+        file:item.pathName
       })
 
     }
@@ -239,6 +242,9 @@ const save = () => {
                 </q-td>
                 <q-td auto-width>
                   <q-btn
+                  type="a"
+                  :href="props.row.file"
+                  target="_blank"
                     dense
                     size="14px"
                     flat

From 6e7d5e6031ed7dc80d8e3c807b39c057d3e5ee90 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 24 Aug 2023 13:41:27 +0700
Subject: [PATCH 5/7] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=AB=E0=B8=A1=E0=B8=B2=E0=B8=A2=E0=B8=94=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/07_insignia/components/3_result/fileUpload.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/07_insignia/components/3_result/fileUpload.vue b/src/modules/07_insignia/components/3_result/fileUpload.vue
index bd8474e51..81dc1637a 100644
--- a/src/modules/07_insignia/components/3_result/fileUpload.vue
+++ b/src/modules/07_insignia/components/3_result/fileUpload.vue
@@ -56,7 +56,7 @@ const rows2 = ref<any>([]);
 
 interface TypeData {
   fileName:string
-  annotation:string
+  reason:string
   pathName:string
 }
 const props = defineProps({
@@ -75,7 +75,7 @@ const getRequest = async () => {
     data.map((item:TypeData) =>{
       rows2.value.push({
         fileName:item.fileName,
-        annotation:item.annotation,
+        annotation:item.reason,
         file:item.pathName
       })
 
@@ -238,7 +238,7 @@ const save = () => {
                   {{ props.row.fileName }}
                 </q-td>
                 <q-td key="annotation" :props="props">
-                  {{ props.row.annotation !== undefined ? props.row.annotation:"-"}}
+                  {{ props.row.annotation !== null ? props.row.annotation:"-"}}
                 </q-td>
                 <q-td auto-width>
                   <q-btn

From b338ebd24f77c8513462e29d142752bd7646b3b9 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Thu, 24 Aug 2023 15:57:11 +0700
Subject: [PATCH 6/7] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88?=
 =?UTF-8?q?=E0=B8=A1=E0=B8=9F=E0=B8=B4=E0=B8=A5=20=E0=B8=AA=E0=B8=96?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=A2=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=99=E0=B8=82=E0=B8=AD=E0=B8=A5=E0=B8=B2=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=81=E0=B8=88=E0=B8=B2=E0=B8=81=E0=B8=A3=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../06_retirement/components/resign/Resign.vue  | 17 ++++++++++++++++-
 .../components/resign/ResignByid.vue            |  2 +-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/modules/06_retirement/components/resign/Resign.vue b/src/modules/06_retirement/components/resign/Resign.vue
index a4e94b459..e126f459f 100644
--- a/src/modules/06_retirement/components/resign/Resign.vue
+++ b/src/modules/06_retirement/components/resign/Resign.vue
@@ -54,7 +54,17 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-
+  {
+    name: "location",
+    align: "left",
+    label: "สถานที่ยื่นขอลาออกจากราชการ",
+    sortable: true,
+    field: "location",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "positionTypeOld",
     align: "left",
@@ -127,6 +137,7 @@ const visibleColumns = ref<string[]>([
   "no",
   "prefix",
   "fullname",
+  "location",
   "positionTypeOld",
   "positionLevelOld",
   "positionNumberOld",
@@ -172,6 +183,7 @@ const columns2 = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 
+
   {
     name: "positionTypeOld",
     align: "left",
@@ -442,6 +454,9 @@ const saveOrder = async () => {
                 <q-td key="fullname" :props="props">
                   {{ props.row.fullname }}
                 </q-td>
+                <q-td key="location" :props="props">
+                  {{ props.row.location }}
+                </q-td>
                 <q-td key="positionTypeOld" :props="props">
                   {{ props.row.positionTypeOld }}
                 </q-td>
diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index 4460bc3f7..62aaf40e3 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -167,7 +167,7 @@
               {{ props.row.fileName }}
             </q-td>
             <q-td key="btnMicrosoft" :props="props">
-              <q-btn flat dense round color="red" icon="picture_as_pdf">
+              <q-btn type="a" target="_blank" :href="props.row.pathName" flat dense round color="red" icon="picture_as_pdf">
                 <q-tooltip>ไฟล์ PDF</q-tooltip>
               </q-btn>
             </q-td>

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 7/7] =?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>