From d626279c6c1936a19d063ae8e85b1577808e72f6 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Mon, 17 Jul 2023 10:38:48 +0700
Subject: [PATCH 1/2] =?UTF-8?q?=20ui=20=E0=B9=80=E0=B8=9E=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A1=E0=B8=A3=E0=B8=AD=E0=B8=9A=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=80=E0=B8=AA=E0=B8=99=E0=B8=AD=E0=B8=82=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=A3=E0=B8=B0=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=99=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=AD=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B8=B4=E0=B8=A2=E0=B8=B2=E0=B8=A0=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=93=E0=B9=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |   8 +
 src/modules/07_insignia/router.ts             |  24 +++
 .../views/1_Proposals/addProposals.vue        | 171 ++++++++++++++++++
 .../views/1_Proposals/listProposals.vue       |   9 +-
 src/views/MainLayout.vue                      |  21 ++-
 5 files changed, 220 insertions(+), 13 deletions(-)

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 3552d4a07..fc19715ec 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -221,6 +221,14 @@ const menuList = readonly<any[]>([
     label: "เครื่องราชอิสริยาภรณ์",
     path: "insignia",
     role: "insignia",
+    children: [
+      {
+        key: 8.1,
+        label: "รายการเสนอขอ" /* รายชื่อผู้สอบผ่าน */,
+        path: "insigniaProposals",
+        role: "insignia",
+      },
+    ],
   },
   {
     key: 9,
diff --git a/src/modules/07_insignia/router.ts b/src/modules/07_insignia/router.ts
index 20a41a5c3..fd30260db 100644
--- a/src/modules/07_insignia/router.ts
+++ b/src/modules/07_insignia/router.ts
@@ -3,6 +3,10 @@
  */
 
 const Main = () => import("@/modules/07_insignia/views/Main.vue");
+const insigniaProposals = () =>
+  import("@/modules/07_insignia/views/1_Proposals/listProposals.vue");
+const roundAdd = () =>
+  import("@/modules/07_insignia/views/1_Proposals/addProposals.vue");
 
 export default [
   {
@@ -15,4 +19,24 @@ export default [
       Role: "insignia",
     },
   },
+  {
+    path: "/insignia/round-proposals",
+    name: "insigniaProposals",
+    component: insigniaProposals,
+    meta: {
+      Auth: true,
+      Key: [7.1],
+      Role: "insignia",
+    },
+  },
+  {
+    path: "/insignia/round/add",
+    name: "roundAdd",
+    component: roundAdd,
+    meta: {
+      Auth: true,
+      Key: [7.1],
+      Role: "insignia",
+    },
+  },
 ];
diff --git a/src/modules/07_insignia/views/1_Proposals/addProposals.vue b/src/modules/07_insignia/views/1_Proposals/addProposals.vue
index e69de29bb..1e63df651 100644
--- a/src/modules/07_insignia/views/1_Proposals/addProposals.vue
+++ b/src/modules/07_insignia/views/1_Proposals/addProposals.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="col-xs-12 col-sm-12 col-md-11">
+    <div class="toptitle col-12 row items-center">
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
+      <div>เพิ่มรอบการเสนอขอพระราชทานเครื่องราชอิสริยาภรณ์</div>
+    </div>
+    <div class="col-12">
+      <q-card bordered>
+        <div class="col-12 row q-col-gutter-md q-pa-md">
+          <div class="col-xs-12 col-sm-12 row">
+            <q-separator />
+            <div class="col-12 row q-pa-sm q-col-gutter-sm">
+              <q-input
+                class="col-10"
+                dense
+                outlined
+                v-model="roundInsig"
+                label="รอบการเสนอขอพระราชทานเครื่องราชฯ"
+              />
+              <q-input
+                class="col-2"
+                dense
+                outlined
+                v-model="year"
+                label="ปีที่เสนอ"
+              />
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateStart"
+                :locale="'th'"
+                autoApply
+                class="col-xs-12 col-sm-5"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="col-xs-12 col-sm-5"
+                    :model-value="
+                      dateStart != null ? date2Thai(dateStart) : null
+                    "
+                    :label="`${'วันเริ่มต้น'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันเริ่มต้น'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dateEnd"
+                class="col-xs-12 col-sm-5"
+                :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
+                    outlined
+                    dense
+                    class="col-xs-12 col-sm-4"
+                    :model-value="dateEnd != null ? date2Thai(dateEnd) : null"
+                    :label="`${'วันสิ้นสุด'}`"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือกวันที่วันสิ้นสุด'}`,
+                    ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+
+              <q-input
+                class="col-xs-12 col-sm-2"
+                dense
+                outlined
+                v-model="datelast"
+                label="จำนวนวันแจ้งเตือนก่อนวันสิ้นสุด"
+              />
+              <q-file
+                class="col-xs-12 col-sm-10"
+                outlined
+                dense
+                v-model="files"
+                label="อัปโหลดเอกสารประกอบ"
+                hide-bottom-space
+                lazy-rules
+                :rules="[
+                  (val) => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน',
+                ]"
+              >
+                <template v-slot:prepend>
+                  <q-icon name="attach_file" />
+                </template>
+              </q-file>
+            </div>
+          </div>
+        </div>
+        <q-separator />
+        <q-separator />
+        <div class="row col-12 q-pa-sm">
+          <q-space />
+          <q-btn
+            unelevated
+            dense
+            class="q-px-md items-center"
+            color="light-blue-10"
+            label="บันทึก"
+            @click="router.go(-1)"
+          />
+        </div>
+      </q-card>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { QTableProps } from "quasar";
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const router = useRouter();
+const $q = useQuasar();
+const dateStart = ref<any>(new Date());
+const dateEnd = ref<any>(new Date());
+
+const routeName = router.currentRoute.value.name;
+</script>
diff --git a/src/modules/07_insignia/views/1_Proposals/listProposals.vue b/src/modules/07_insignia/views/1_Proposals/listProposals.vue
index da8a7ef99..ebda6400a 100644
--- a/src/modules/07_insignia/views/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/views/1_Proposals/listProposals.vue
@@ -118,9 +118,9 @@
                   round
                   color="indigo"
                   @click.stop.prevent="clickProposals(props.row.id)"
-                  icon="mdi-clipboard-arrow-down"
+                  icon="mdi-file-download"
                 >
-                  <q-tooltip>ดาวน์โหลดเอกสารประกอบ</q-tooltip>
+                  <q-tooltip>ดาวน์โหลดเอกสารประกอบ </q-tooltip>
                 </q-btn>
               </q-td>
               <q-td auto-width>
@@ -284,10 +284,7 @@ const clickDelete = (id: string) => {
 };
 
 const clickAdd = () => {
-  modal.value = true;
-};
-const clickClose = async () => {
-  modal.value = false;
+  router.push({ name: "roundAdd" });
 };
 
 // ค้นหาในตาราง
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index d8d241366..441a9ee82 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -716,7 +716,10 @@ if (keycloak.tokenParsed != null) {
                 expand-icon="mdi-chevron-down"
                 expanded-icon="mdi-chevron-up"
                 v-if="
-                  menuItem.key == 3 || menuItem.key == 5 || menuItem.key == 6
+                  menuItem.key == 3 ||
+                  menuItem.key == 5 ||
+                  menuItem.key == 6 ||
+                  menuItem.key == 8
                 "
               >
                 <template v-slot:header>
@@ -727,7 +730,7 @@ if (keycloak.tokenParsed != null) {
                       font-size="20px"
                     />
                   </q-item-section>
-                  <q-item-section >{{ menuItem.label }}</q-item-section>
+                  <q-item-section>{{ menuItem.label }}</q-item-section>
                 </template>
 
                 <!-- เมนูย่อย 2 ชั้น (สรรหา) -->
@@ -751,7 +754,9 @@ if (keycloak.tokenParsed != null) {
                         :to="{ name: `${subMenu2.path}` }"
                       >
                         <q-item-section>
-                          <q-item-label class="font-400">{{ subMenu2.label }} </q-item-label>
+                          <q-item-label class="font-400"
+                            >{{ subMenu2.label }}
+                          </q-item-label>
                         </q-item-section>
                       </q-item>
                     </q-expansion-item>
@@ -781,7 +786,9 @@ if (keycloak.tokenParsed != null) {
                   :to="{ name: `${subMenu.path}` }"
                 >
                   <q-item-section>
-                    <q-item-label class="font-400">{{ subMenu.label }}</q-item-label>
+                    <q-item-label class="font-400">{{
+                      subMenu.label
+                    }}</q-item-label>
                   </q-item-section>
                 </q-item>
               </q-expansion-item>
@@ -930,7 +937,7 @@ if (keycloak.tokenParsed != null) {
 .menuSub .q-item {
   border-radius: 0 100px 100px 0;
   margin-right: 2%;
-  font-weight: 500 ;
+  font-weight: 500;
 }
 .expan2 .q-item {
   padding-left: 10%;
@@ -938,8 +945,8 @@ if (keycloak.tokenParsed != null) {
 /* .menuSubAct {
   background: #1e2529d9;
 } */
-.font-400{
-  font-weight: 400 ;
+.font-400 {
+  font-weight: 400;
 }
 .expan2 .menuSubHover {
   padding-left: 30%;

From 27b4e9dd4cd7ee1e2d006ea89e04516c1e0cb3a2 Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Mon, 17 Jul 2023 14:02:44 +0700
Subject: [PATCH 2/2] =?UTF-8?q?=E0=B8=AD=E0=B8=B1=E0=B8=9E=E0=B9=80?=
 =?UTF-8?q?=E0=B8=94=E0=B8=97=20type=20//=E0=B9=80=E0=B8=A1=E0=B8=99?=
 =?UTF-8?q?=E0=B8=B9=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7=E0=B9=88=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |  24 ++
 .../07_insignia/interface/request/Main.ts     |  10 +-
 .../views/1_Proposals/addProposals.vue        |   4 +
 .../views/1_Proposals/listProposals.vue       |   5 +-
 src/modules/08_registryEmployee/index/Main.ts |   1 +
 .../08_registryEmployee/request/Main.ts       |  13 +
 .../08_registryEmployee/response/Main.ts      |   1 +
 .../08_registryEmployee/views/Main.vue        | 402 ++++++++----------
 8 files changed, 221 insertions(+), 239 deletions(-)
 create mode 100644 src/modules/08_registryEmployee/index/Main.ts
 create mode 100644 src/modules/08_registryEmployee/request/Main.ts
 create mode 100644 src/modules/08_registryEmployee/response/Main.ts

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index fc19715ec..e8f8f5d66 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -228,6 +228,30 @@ const menuList = readonly<any[]>([
         path: "insigniaProposals",
         role: "insignia",
       },
+      {
+        key: 8.2,
+        label: "จัดทำรายชื่อข้าราชการสามัญ" /* รายชื่อผู้สอบผ่าน */,
+        path: "insigniaNameList",
+        role: "insignia",
+      },
+      {
+        key: 8.3,
+        label: "อนุมัติรายชื่อข้าราชการสามัญ" /* รายชื่อผู้สอบผ่าน */,
+        path: "insigniaNameApprove",
+        role: "insignia",
+      },
+      {
+        key: 8.4,
+        label: "บันทึกผลการได้รับพระราช..." /* รายชื่อผู้สอบผ่าน */,
+        path: "insigniaRecord",
+        role: "insignia",
+      },
+      {
+        key: 8.5,
+        label: "รายงาน" /* รายชื่อผู้สอบผ่าน */,
+        path: "insigniaReport",
+        role: "insignia",
+      },
     ],
   },
   {
diff --git a/src/modules/07_insignia/interface/request/Main.ts b/src/modules/07_insignia/interface/request/Main.ts
index e4ea7770c..2c598c6d4 100644
--- a/src/modules/07_insignia/interface/request/Main.ts
+++ b/src/modules/07_insignia/interface/request/Main.ts
@@ -1 +1,9 @@
-export type {};
+interface FormProprsalsRound {
+  id: number;
+  name: string;
+  year: number;
+  startDate: number;
+  endDate: number;
+  status: string;
+}
+export type { FormProprsalsRound };
diff --git a/src/modules/07_insignia/views/1_Proposals/addProposals.vue b/src/modules/07_insignia/views/1_Proposals/addProposals.vue
index 1e63df651..63ee7bb6a 100644
--- a/src/modules/07_insignia/views/1_Proposals/addProposals.vue
+++ b/src/modules/07_insignia/views/1_Proposals/addProposals.vue
@@ -167,5 +167,9 @@ const $q = useQuasar();
 const dateStart = ref<any>(new Date());
 const dateEnd = ref<any>(new Date());
 
+const roundInsig = ref<string>("");
+const year = ref<string>("");
+const datelast = ref<string>("");
+
 const routeName = router.currentRoute.value.name;
 </script>
diff --git a/src/modules/07_insignia/views/1_Proposals/listProposals.vue b/src/modules/07_insignia/views/1_Proposals/listProposals.vue
index ebda6400a..48d761c5d 100644
--- a/src/modules/07_insignia/views/1_Proposals/listProposals.vue
+++ b/src/modules/07_insignia/views/1_Proposals/listProposals.vue
@@ -116,7 +116,7 @@
                   size="12px"
                   flat
                   round
-                  color="indigo"
+                  color="light-blue-8"
                   @click.stop.prevent="clickProposals(props.row.id)"
                   icon="mdi-file-download"
                 >
@@ -161,6 +161,7 @@ import { ref, useAttrs } from "vue";
 import type { QTableProps } from "quasar";
 import router from "@/router";
 import { useQuasar } from "quasar";
+import type { FormProprsalsRound } from " @/modules/07_insignia/interface/request/Main.ts";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const modal = ref<boolean>(false);
@@ -229,7 +230,7 @@ const columns = ref<QTableProps["columns"]>([
 ]);
 
 // ข้อมูลตาราง (จำลอง)
-const rows = ref<any[]>([
+const rows = ref<FormProprsalsRound[]>([
   {
     round: "รอบการเสนอขอพระราชทานเครื่องราชฯ",
     year: "2566",
diff --git a/src/modules/08_registryEmployee/index/Main.ts b/src/modules/08_registryEmployee/index/Main.ts
new file mode 100644
index 000000000..e4ea7770c
--- /dev/null
+++ b/src/modules/08_registryEmployee/index/Main.ts
@@ -0,0 +1 @@
+export type {};
diff --git a/src/modules/08_registryEmployee/request/Main.ts b/src/modules/08_registryEmployee/request/Main.ts
new file mode 100644
index 000000000..eecf581d1
--- /dev/null
+++ b/src/modules/08_registryEmployee/request/Main.ts
@@ -0,0 +1,13 @@
+interface FormRegistryEmployee {
+  no: string;
+  name: string;
+  positionNum: string;
+  position: string;
+  path: string;
+  type: string;
+  level: string;
+  affiliation: string;
+  yearly: number;
+  pay: string;
+}
+export type { FormRegistryEmployee };
diff --git a/src/modules/08_registryEmployee/response/Main.ts b/src/modules/08_registryEmployee/response/Main.ts
new file mode 100644
index 000000000..e4ea7770c
--- /dev/null
+++ b/src/modules/08_registryEmployee/response/Main.ts
@@ -0,0 +1 @@
+export type {};
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index 24c94dede..485ed54d1 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -2,157 +2,173 @@
   <div class="toptitle text-dark col-12 row items-center">
     รายชื่อลูกจ้างชั่วคราว
   </div>
-    <q-card flat bordered class="q-pa-md">
-      <div class="col-12 row items-center">
-        <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
-          <q-tooltip>เพิ่มข้อมูล</q-tooltip>
-        </q-btn>
-        <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>
-      <div class="col-12 q-pt-sm">
-        <q-table
-          flat
-          bordered
+  <q-card flat bordered class="q-pa-md">
+    <div class="col-12 row items-center">
+      <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip>
+      </q-btn>
+      <q-space />
+      <div class="items-center" style="display: flex">
+        <!-- ค้นหาข้อความใน table -->
+        <q-input
+          standout
           dense
-          :rows="rows"
-          :columns="columns"
-          :visible-columns="visibleColumns"
-          :filter="filter"
-          row-key="name"
-          class="custom-header-table"
-          :pagination-label="paginationLabel"
-          v-model:pagination="pagination"
+          v-model="filter"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+          style="max-width: 200px"
+          class="q-ml-sm"
         >
-          <template v-slot:header="props">
-            <q-tr :props="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
-              </q-th>
-              <q-th auto-width />
-            </q-tr>
+          <template v-slot:append>
+            <q-icon v-if="filter == ''" name="search" />
+            <q-icon
+              v-if="filter !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
           </template>
-          <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td key="no" :props="props">
-                {{ props.rowIndex + 1 }}
-              </q-td>
-              <q-td key="positionNum" :props="props">
-                {{ props.row.positionNum }}
-              </q-td>
-              <q-td key="name" :props="props">
-                {{ props.row.name }}
-              </q-td>
-              <q-td key="position" :props="props">
-                {{ props.row.position }}
-              </q-td>
-              <q-td key="path" :props="props">
-                {{ props.row.path }}
-              </q-td>
-              <q-td key="type" :props="props">
-                {{ props.row.type }}
-              </q-td>
-              <q-td key="level" :props="props">
-                {{ props.row.level }}
-              </q-td>
-              <q-td key="affiliation" :props="props">
-                {{ props.row.affiliation }}
-              </q-td>
-              <q-td key="yearly" :props="props">
-                {{ props.row.yearly }}
-              </q-td>
-              <q-td key="pay" :props="props">
-                {{ props.row.pay }}
-              </q-td>
-              <q-td auto-width>
-                <q-btn
-                  icon="mdi-dots-vertical"
-                  size="12px"
-                  color="grey-7"
-                  flat
-                  round
-                  dense
-                >
-                  <q-menu transition-show="jump-down" transition-hide="jump-up">
-                    <q-list dense style="min-width: 160px">
-                      <q-item
-                        clickable
-                        v-close-popup
-                        @click="editDetail(props.row)"
-                      >
-                        <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                          <q-icon color="blue" size="xs" name="mdi-account-settings" />
-                        </q-item-section>
-                        <q-item-section>กำหนดตำแหน่ง</q-item-section>
-                      </q-item>
-                      <q-separator />
-                      <q-item clickable v-close-popup @click="clickDelete('test')">
-                        <q-item-section style="min-width: 0px" avatar class="q-py-sm">
-                          <q-icon color="red" size="xs" name="mdi-delete" />
-                        </q-item-section>
-                        <q-item-section>ลบ</q-item-section>
-                      </q-item>
-
-                      <q-separator />
-                    </q-list>
-                  </q-menu>
-                </q-btn>
-              </q-td>
-            </q-tr>
-          </template>
-          <template v-slot:pagination="scope">
-            <q-pagination
-              v-model="pagination.page"
-              active-color="primary"
-							color="dark"
-              :max="scope.pagesNumber"
-              :max-pages="5"
-              size="sm"
-              boundary-links
-              direction-links
-            ></q-pagination>
-          </template>
-        </q-table>
+        </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>
-    </q-card>
+    </div>
+    <div class="col-12 q-pt-sm">
+      <q-table
+        flat
+        bordered
+        dense
+        :rows="rows"
+        :columns="columns"
+        :visible-columns="visibleColumns"
+        :filter="filter"
+        row-key="name"
+        class="custom-header-table"
+        :pagination-label="paginationLabel"
+        v-model:pagination="pagination"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+            <q-th auto-width />
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td key="no" :props="props">
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td key="positionNum" :props="props">
+              {{ props.row.positionNum }}
+            </q-td>
+            <q-td key="name" :props="props">
+              {{ props.row.name }}
+            </q-td>
+            <q-td key="position" :props="props">
+              {{ props.row.position }}
+            </q-td>
+            <q-td key="path" :props="props">
+              {{ props.row.path }}
+            </q-td>
+            <q-td key="type" :props="props">
+              {{ props.row.type }}
+            </q-td>
+            <q-td key="level" :props="props">
+              {{ props.row.level }}
+            </q-td>
+            <q-td key="affiliation" :props="props">
+              {{ props.row.affiliation }}
+            </q-td>
+            <q-td key="yearly" :props="props">
+              {{ props.row.yearly }}
+            </q-td>
+            <q-td key="pay" :props="props">
+              {{ props.row.pay }}
+            </q-td>
+            <q-td auto-width>
+              <q-btn
+                icon="mdi-dots-vertical"
+                size="12px"
+                color="grey-7"
+                flat
+                round
+                dense
+              >
+                <q-menu transition-show="jump-down" transition-hide="jump-up">
+                  <q-list dense style="min-width: 160px">
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="editDetail(props.row)"
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-icon
+                          color="blue"
+                          size="xs"
+                          name="mdi-account-settings"
+                        />
+                      </q-item-section>
+                      <q-item-section>กำหนดตำแหน่ง</q-item-section>
+                    </q-item>
+                    <q-separator />
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click="clickDelete('test')"
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-icon color="red" size="xs" name="mdi-delete" />
+                      </q-item-section>
+                      <q-item-section>ลบ</q-item-section>
+                    </q-item>
+
+                    <q-separator />
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </q-td>
+          </q-tr>
+        </template>
+        <template v-slot:pagination="scope">
+          <q-pagination
+            v-model="pagination.page"
+            active-color="primary"
+            color="dark"
+            :max="scope.pagesNumber"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+          ></q-pagination>
+        </template>
+      </q-table>
+    </div>
+  </q-card>
 </template>
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
@@ -163,6 +179,7 @@ import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { treeTab } from "@/modules/05_placement/interface/index/Main";
+import { FormRegistryEmployee } from "@/modules/08_registryEmployee/request/Main.ts";
 
 const props = defineProps({
   next: {
@@ -210,93 +227,6 @@ const columnsModal = [
   },
 ];
 
-const rowsModal = [
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางนัทธ์ เหล่าสกุล",
-    positionNum: "สกก.3",
-    position: "นักบริหาร",
-    path: "บริหาร",
-    type: "บริหาร",
-    level: "ชำนาญการพิเศษ",
-    affiliation: "ฝ่ายบริหารงานทั่วไป",
-    yearly: 2565,
-    pay: "40,000",
-  },
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นายภูวนัย ต้นทอง",
-    positionNum: "กทม.2",
-    position: "นักบริหาร",
-    path: "บริหาร",
-    type: "บริหาร",
-    level: "ชำนาญการพิเศษ",
-    affiliation: "ฝ่ายบริหารงานทั่วไป",
-    yearly: 2565,
-    pay: "35,000",
-  },
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางปริศนา ตรีวุฒิ",
-    positionNum: "กบห.3",
-    position: "นักบริหาร",
-    path: "บริหาร",
-    type: "บริหาร",
-    level: "ชำนาญการพิเศษ",
-    affiliation: "ฝ่ายบริหารงานทั่วไป",
-    yearly: 2565,
-    pay: "38,000",
-  },
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางเมษา เกียรติบวรสกุล ",
-    positionNum: "สกก.3",
-    position: "นักบริหาร",
-    path: "บริหาร",
-    type: "บริหาร",
-    level: "ชำนาญการพิเศษ",
-    affiliation: "ฝ่ายบริหารงานทั่วไป",
-    yearly: 2565,
-    pay: "25,000",
-  },
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางพริมา พงศ์พินิจ",
-    positionNum: "สกก.3",
-    position: "นักบริหาร",
-    path: "บริหาร",
-    type: "บริหาร",
-    level: "ชำนาญการพิเศษ",
-    affiliation: "ฝ่ายบริหารงานทั่วไป",
-    yearly: 2565,
-    pay: "30,000",
-  },
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางพรพักตร์ พาใจขวัญ",
-    positionNum: "สกก.3",
-    position: "นักบริหาร",
-    path: "บริหาร",
-    type: "บริหาร",
-    level: "ชำนาญการพิเศษ",
-    affiliation: "ฝ่ายบริหารงานทั่วไป",
-    yearly: 2565,
-    pay: "40,000",
-  },
-  {
-    no: "0ac56905-1a74-4606-a120-233340adde95",
-    name: "นางชลธิมา คมสกุล ",
-    positionNum: "สกก.3",
-    position: "นักบริหาร",
-    path: "บริหาร",
-    type: "บริหาร",
-    level: "ชำนาญการพิเศษ",
-    affiliation: "ฝ่ายบริหารงานทั่วไป",
-    yearly: 2565,
-    pay: "15,000",
-  },
-];
-
 const paginationModal = ref({
   sortBy: "desc",
   descending: false,
@@ -390,7 +320,7 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const rows = [
+const rows = ref<FormRegistryEmployee[]>([
   {
     no: "0ac56905-1a74-4606-a120-233340adde95",
     name: "นางนัทธ์ เหล่าสกุล",
@@ -535,7 +465,7 @@ const rows = [
     yearly: 2565,
     pay: "20,250",
   },
-];
+]);
 
 onMounted(async () => {
   await nodeTree();