From ba64953315e8eea6a47105f8092546e09797fb3d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 10 Jun 2024 18:00:12 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B3=E0=B9=80=E0=B8=9A=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87=E0=B8=8A=E0=B8=B1=E0=B9=88=E0=B8=A7=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.ts                              |    4 +-
 src/api/registry/api.registry.ts              |   13 +
 .../detail/Employee/01_DataEmployee.vue       |  641 ++++++++++
 .../detail/Employee/02_Employment.vue         |  522 ++++++++
 .../components/detail/Employee/Main.vue       |   43 +
 .../detail/PersonalInformation/01_Profile.vue |    3 +-
 .../components/detail/TabMain.vue             |   15 +-
 .../interface/request/Employee.ts             |   19 +
 .../interface/request/Profile.ts              |    8 +-
 .../interface/response/Employee.ts            |   54 +
 src/modules/04_registryNew/stores/profile.ts  |    8 +-
 .../04_registryNew/views/detailView.vue       |    6 +-
 .../components/PersonalList/CardPosition.vue  |    3 +-
 .../PersonalList/DialogSelectOrg.vue          |   14 +-
 .../components/DialogAddEmployee.vue          |  571 +++++++++
 .../components/DialogSelectPos.vue            |  929 +++++++++++++++
 .../components/DialogSendOrder.vue            |  301 +++++
 .../interface/index/Main.ts                   |   13 +-
 .../interface/request/Employee.ts             |   18 +
 .../interface/response/Employee.ts            |  119 ++
 src/modules/08_registryEmployee/router.ts     |   51 +-
 .../stores/registry-employee.ts               |   57 +
 .../08_registryEmployee/views/DetailView.vue  |    9 +
 .../08_registryEmployee/views/Main.vue        | 1061 ++++-------------
 .../08_registryEmployee/views/MainOld.vue     | 1045 ++++++++++++++++
 25 files changed, 4679 insertions(+), 848 deletions(-)
 create mode 100644 src/modules/04_registryNew/components/detail/Employee/01_DataEmployee.vue
 create mode 100644 src/modules/04_registryNew/components/detail/Employee/02_Employment.vue
 create mode 100644 src/modules/04_registryNew/components/detail/Employee/Main.vue
 create mode 100644 src/modules/04_registryNew/interface/request/Employee.ts
 create mode 100644 src/modules/04_registryNew/interface/response/Employee.ts
 create mode 100644 src/modules/08_registryEmployee/components/DialogAddEmployee.vue
 create mode 100644 src/modules/08_registryEmployee/components/DialogSelectPos.vue
 create mode 100644 src/modules/08_registryEmployee/components/DialogSendOrder.vue
 create mode 100644 src/modules/08_registryEmployee/interface/request/Employee.ts
 create mode 100644 src/modules/08_registryEmployee/interface/response/Employee.ts
 create mode 100644 src/modules/08_registryEmployee/stores/registry-employee.ts
 create mode 100644 src/modules/08_registryEmployee/views/DetailView.vue
 create mode 100644 src/modules/08_registryEmployee/views/MainOld.vue

diff --git a/src/api/index.ts b/src/api/index.ts
index b147146b2..05c4f7bb4 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -10,8 +10,8 @@ export const apiUrlConfigReport = import.meta.env.VITE_API_REPORT_URL;
 
 const config = ref<any>({
   development: {
-    // API_URI: "https://localhost:7260/api",
-    API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
+    API_URI: "http://localhost:13001/api/v1",
+    // API_URI: "https://bma-ehr.frappet.synology.me/api/v1",
     // API_URI_ORG_SERVICE: "https://localhost:7056/api/v1", //ใช้ชั่วคราว
     API_URI_ORG_SERVICE: "https://bma-ehr.frappet.synology.me/api/v1", //ใช้ชั่วคราว
     // API_URI_ORG_EMPLOYEE_SERVICE: "https://localhost:7208/api/v1", //ใช้ชั่วคราว
diff --git a/src/api/registry/api.registry.ts b/src/api/registry/api.registry.ts
index ad88412d5..982cc48e9 100644
--- a/src/api/registry/api.registry.ts
+++ b/src/api/registry/api.registry.ts
@@ -177,4 +177,17 @@ export default {
     `${registryNew}${empType}/family/${type}`,
   profileFamilyHistory: (id: string, empType: string, type: string) =>
     `${registryNew}${empType}/family/${type}/history/${id}`,
+
+  //ลูกจ้างชั่วคราว
+  positionEmployee: (id: string) => `${registryNew}-employee/position/${id}`,
+  informationEmployee: (id: string) =>
+    `${registryNew}-employee/information/${id}`,
+  informationHistoryEmployee: (id: string) =>
+    `${registryNew}-employee/information/history/${id}`,
+  employmentEmployee: (id: string) =>
+    `${registryNew}-employee/employment/${id}`,
+  employmentEmployeeId: (id: string) =>
+    `${registryNew}-employee/employment/id/${id}`,
+  employmentHistoryEmployee: (id: string) =>
+    `${registryNew}-employee/employment/history/${id}`,
 };
diff --git a/src/modules/04_registryNew/components/detail/Employee/01_DataEmployee.vue b/src/modules/04_registryNew/components/detail/Employee/01_DataEmployee.vue
new file mode 100644
index 000000000..817b8fa96
--- /dev/null
+++ b/src/modules/04_registryNew/components/detail/Employee/01_DataEmployee.vue
@@ -0,0 +1,641 @@
+<script setup lang="ts">
+import { onMounted, watch, ref, reactive } from "vue";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { FormEmployee } from "@/modules/04_registryNew/interface/request/Employee";
+import type {
+  EmployeeHistory,
+  ResEmployee,
+} from "@/modules/04_registryNew/interface/response/Employee";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import type { QTableColumn } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const route = useRoute();
+const {
+  success,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  messageError,
+  dialogConfirm,
+  dialogMessageNotify,
+} = useCounterMixin();
+
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
+
+/** ข้อมูลลูกจ้างชั่วคราว*/
+const modalEdit = ref<boolean>(false);
+const dataEmployee = reactive<ResEmployee>({
+  id: "",
+  positionEmployeeGroupId: "",
+  positionEmployeeLineId: "",
+  positionEmployeePositionId: "",
+  employeeOc: "",
+  employeeTypeIndividual: "",
+  employeeWage: "",
+  employeeMoneyIncrease: "",
+  employeeMoneyAllowance: "",
+  employeeMoneyEmployee: "",
+  employeeMoneyEmployer: "",
+});
+const formData = reactive<FormEmployee>({
+  positionEmployeeGroupId: "",
+  positionEmployeeLineId: "",
+  positionEmployeePositionId: "",
+  employeeOc: "",
+  employeeTypeIndividual: "",
+  employeeWage: "",
+  employeeMoneyIncrease: "",
+  employeeMoneyAllowance: "",
+  employeeMoneyEmployee: "",
+  employeeMoneyEmployer: "",
+});
+
+/** function fetch ข้อมูลลูกจ้างชั่วคราว*/
+function fetchData() {
+  showLoader();
+  http
+    .get(config.API.informationEmployee(profileId.value))
+    .then((res) => {
+      const data = res.data.result;
+      dataEmployee.positionEmployeeGroupId = data.positionEmployeeGroupId;
+      dataEmployee.positionEmployeeLineId = data.positionEmployeeLineId;
+      dataEmployee.positionEmployeePositionId = data.positionEmployeePositionId;
+      dataEmployee.employeeOc = data.employeeOc;
+      dataEmployee.employeeTypeIndividual = data.employeeTypeIndividual;
+      dataEmployee.employeeWage = data.employeeWage;
+      dataEmployee.employeeMoneyIncrease = data.employeeMoneyIncrease;
+      dataEmployee.employeeMoneyAllowance = data.employeeMoneyAllowance;
+      dataEmployee.employeeMoneyEmployee = data.employeeMoneyEmployee;
+      dataEmployee.employeeMoneyEmployer = data.employeeMoneyEmployer;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/** function เปิด Dialog แก้ไขมูลลูกจ้างชั่วคราว*/
+function onClickEdit() {
+  modalEdit.value = true;
+  formData.positionEmployeeGroupId = dataEmployee.positionEmployeeGroupId;
+  formData.positionEmployeeLineId = dataEmployee.positionEmployeeLineId;
+  formData.positionEmployeePositionId = dataEmployee.positionEmployeePositionId;
+  formData.employeeOc = dataEmployee.employeeOc;
+  formData.employeeTypeIndividual = dataEmployee.employeeTypeIndividual;
+  formData.employeeWage = dataEmployee.employeeWage;
+  formData.employeeMoneyIncrease = dataEmployee.employeeMoneyIncrease;
+  formData.employeeMoneyAllowance = dataEmployee.employeeMoneyAllowance;
+  formData.employeeMoneyEmployee = dataEmployee.employeeMoneyEmployee;
+  formData.employeeMoneyEmployer = dataEmployee.employeeMoneyEmployer;
+}
+
+/** function ปิด Dialog แก้ไขมูลลูกจ้างชั่วคราว*/
+function onCloseDialog() {
+  modalEdit.value = false;
+  formData.positionEmployeeGroupId = "";
+  formData.positionEmployeeLineId = "";
+  formData.positionEmployeePositionId = "";
+  formData.employeeOc = "";
+  formData.employeeTypeIndividual = "";
+  formData.employeeWage = "";
+  formData.employeeMoneyIncrease = "";
+  formData.employeeMoneyAllowance = "";
+  formData.employeeMoneyEmployee = "";
+  formData.employeeMoneyEmployer = "";
+}
+
+/** function บันทึกแก้ไขมูลลูกจ้างชั่วคราว*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .put(config.API.informationEmployee(profileId.value), formData)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        fetchData();
+        onCloseDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/** ประวัติข้อมูลลูกจ้างชั่วคราว */
+const modalHistory = ref<boolean>(false);
+const filter = ref<string>("");
+const rows = ref<EmployeeHistory[]>([]);
+const columns = ref<QTableColumn[]>([
+  {
+    name: "positionEmployeeGroupId",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroupId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionEmployeeLineId",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionEmployeeLineId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionEmployeePositionId",
+    align: "left",
+    label: "ตำแหน่งทางสายงาน",
+    sortable: true,
+    field: "positionEmployeePositionId",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "employeeOc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "employeeOc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "employeeTypeIndividual",
+    align: "left",
+    label: "ประเภทบุคคล",
+    sortable: true,
+    field: "employeeTypeIndividual",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "employeeWage",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "employeeWage",
+    format: (v) => (v ? Number(v).toLocaleString() : ""),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "employeeMoneyIncrease",
+    align: "left",
+    label: "เงินเพิ่มการครองชึพชั่วคราว",
+    sortable: true,
+    field: "employeeMoneyIncrease",
+    format: (v) => (v ? Number(v).toLocaleString() : ""),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "employeeMoneyAllowance",
+    align: "left",
+    label: "เงินช่วยเหลือการครองชึพชั่วคราว",
+    sortable: true,
+    field: "employeeMoneyAllowance",
+    format: (v) => (v ? Number(v).toLocaleString() : ""),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "employeeMoneyEmployee",
+    align: "left",
+    label: "เงินสมทบประกันสังคม(ลูกจ้าง)",
+    sortable: true,
+    field: "employeeMoneyEmployee",
+    format: (v) => (v ? Number(v).toLocaleString() : ""),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "employeeMoneyEmployer",
+    align: "left",
+    label: "เงินสมทบประกันสังคม(นายจ้าง)",
+    sortable: true,
+    field: "employeeMoneyEmployer",
+    format: (v) => (v ? Number(v).toLocaleString() : ""),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+]);
+const visibleColumns = ref<String[]>([
+  "positionEmployeeGroupId",
+  "positionEmployeeLineId",
+  "positionEmployeePositionId",
+  "employeeOc",
+  "employeeTypeIndividual",
+  "employeeWage",
+  "employeeMoneyIncrease",
+  "employeeMoneyAllowance",
+  "employeeMoneyEmployee",
+  "employeeMoneyEmployer",
+  "createdFullName",
+  "createdAt",
+]);
+
+function onClickHistory() {
+  showLoader();
+  modalHistory.value = true;
+  http
+    .get(config.API.informationHistoryEmployee(profileId.value))
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  profileId.value && fetchData();
+});
+</script>
+
+<template>
+  <div class="row q-gutter-sm items-center">
+    <div class="toptitle col text-right q-gutter-x-sm">
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-pencil-outline"
+        color="primary"
+        @click="onClickEdit"
+      >
+        <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        round
+        dense
+        icon="mdi-history"
+        color="info"
+        @click="onClickHistory"
+      >
+        <q-tooltip>ประวัติแก้ไขข้อมูลลูกจ้างชั่วคราว</q-tooltip>
+      </q-btn>
+    </div>
+  </div>
+
+  <q-card bordered class="my-card bg-grey-1 q-pa-md">
+    <div :class="$q.screen.gt.xs ? 'row' : 'column'">
+      <!-- column 1 -->
+      <div class="col-md-7 col-12 row">
+        <div class="col-5 text-grey-6 text-weight-medium">
+          <div class="q-py-xs">กลุ่มงาน</div>
+          <div class="q-py-xs">สายงาน</div>
+          <div class="q-py-xs">ตำแหน่งทางสายงาน</div>
+          <div class="q-py-xs">สังกัด</div>
+          <div class="q-py-xs">ประเภทบุคคล</div>
+        </div>
+
+        <!-- data -->
+        <div class="col-7">
+          <div class="q-py-xs">
+            {{ dataEmployee.positionEmployeeGroupId }}
+          </div>
+          <div class="q-py-xs">
+            {{ dataEmployee.positionEmployeeLineId }}
+          </div>
+          <div class="q-py-xs">
+            {{ dataEmployee.positionEmployeePositionId }}
+          </div>
+          <div class="q-py-xs">
+            {{ dataEmployee.employeeOc }}
+          </div>
+          <div class="q-py-xs">
+            {{ dataEmployee.employeeTypeIndividual }}
+          </div>
+        </div>
+      </div>
+
+      <!-- column 2 -->
+      <div class="col-md-5 col-12 row">
+        <div class="col-5 col text-grey-6 text-weight-medium">
+          <div class="q-py-xs">ค่าจ้าง</div>
+          <div class="q-py-xs">เงินเพิ่มการครองชึพชั่วคราว</div>
+          <div class="q-py-xs">เงินช่วยเหลือการครองชึพชั่วคราว</div>
+          <div class="q-py-xs">เงินสมทบประกันสังคม(ลูกจ้าง)</div>
+          <div class="q-py-xs">เงินสมทบประกันสังคม(นายจ้าง)</div>
+        </div>
+
+        <div class="col-7">
+          <div class="q-py-xs">
+            {{ dataEmployee.employeeWage }}
+          </div>
+          <div class="q-py-xs">
+            {{ dataEmployee.employeeMoneyIncrease }}
+          </div>
+          <div class="q-py-xs">
+            {{ dataEmployee.employeeMoneyAllowance }}
+          </div>
+          <div class="q-py-xs">
+            {{ dataEmployee.employeeMoneyEmployee }}
+          </div>
+          <div class="q-py-xs">
+            {{ dataEmployee.employeeMoneyEmployer }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+
+  <!-- Dialog แก้ไขข้อมูลลูกจ้างชั่วคราว -->
+  <q-dialog v-model="modalEdit" persistent full-width>
+    <q-card>
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          tittle="แก้ไขข้อมูลลูกจ้างชั่วคราว"
+          :close="onCloseDialog"
+        />
+
+        <q-separator />
+        <q-card-section>
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.positionEmployeeGroupId"
+                class="inputgreen"
+                label="กลุ่มงาน"
+                :rules="[(val: string) => !!val || `${'กรุณากรอกกลุ่มงาน'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.positionEmployeeLineId"
+                class="inputgreen"
+                label="สายงาน"
+                :rules="[(val: string) => !!val || `${'กรุณากรอกสายงาน'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.positionEmployeePositionId"
+                class="inputgreen"
+                label="ตำแหน่งทางสายงาน"
+                :rules="[(val: string) => !!val || `${'กรุณากรอกตำแหน่งทางสายงาน'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.employeeOc"
+                class="inputgreen"
+                label="สังกัด"
+                :rules="[(val: string) => !!val || `${'กรุณากรอกสังกัด'}`]"
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.employeeTypeIndividual"
+                class="inputgreen"
+                label="ประเภทบุคคล"
+                :rules="[(val: string) => !!val || `${'กรุณากรอกประเภทบุคคล'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.employeeWage"
+                class="inputgreen"
+                label="ค่าจ้าง"
+                mask="#"
+                reverse-fill-mask
+                :rules="[(val: string) => !!val || `${'กรุณากรอกค่าจ้าง'}`]"
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.employeeMoneyIncrease"
+                class="inputgreen"
+                label="เงินเพิ่มการครองชึพชั่วคราว"
+                mask="#"
+                reverse-fill-mask
+                :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเพิ่มการครองชึพชั่วคราว'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.employeeMoneyAllowance"
+                class="inputgreen"
+                label="เงินช่วยเหลือการครองชึพชั่วคราว"
+                mask="#"
+                reverse-fill-mask
+                :rules="[(val: string) => !!val || `${'กรุณากรอกเงินช่วยเหลือการครองชึพชั่วคราว'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.employeeMoneyEmployee"
+                class="inputgreen"
+                label="เงินสมทบประกันสังคม(ลูกจ้าง)"
+                mask="#"
+                reverse-fill-mask
+                :rules="[(val: string) => !!val || `${'กรุณากรอกเงินสมทบประกันสังคม(ลูกจ้าง)'}`]"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-3 col-md-3">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.employeeMoneyEmployer"
+                class="inputgreen"
+                label="เงินสมทบประกันสังคม(นายจ้าง)"
+                mask="#"
+                reverse-fill-mask
+                :rules="[(val: string) => !!val || `${'กรุณากรอกเงินสมทบประกันสังคม(นายจ้าง))'}`]"
+              />
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <!-- Dialog ประวัติการแก้ไขข้อมูลลูกจ้างชั่วคราว -->
+  <q-dialog v-model="modalHistory" persistent>
+    <q-card style="min-width: 80%">
+      <DialogHeader
+        tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
+        :close="() => (modalHistory = false)"
+      />
+      <q-separator />
+
+      <q-card-section style="max-height: 50vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            standout
+            dense
+            v-model="filter"
+            ref="filterRef"
+            outlined
+            placeholder="ค้นหา"
+            debounce="300"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filter == ''"
+                name="search"
+                @click.stop.prevent="filter = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filter"
+                name="cancel"
+                @click.stop.prevent="filter = ''"
+                class="cursor-pointer"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columns"
+          :rows="rows"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+        >
+          >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right"> </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/Employee/02_Employment.vue b/src/modules/04_registryNew/components/detail/Employee/02_Employment.vue
new file mode 100644
index 000000000..e5c48239d
--- /dev/null
+++ b/src/modules/04_registryNew/components/detail/Employee/02_Employment.vue
@@ -0,0 +1,522 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type {
+  Employment,
+  EmploymentHistory,
+} from "@/modules/04_registryNew/interface/response/Employee";
+import type { FormEmployment } from "@/modules/04_registryNew/interface/request/Employee";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const route = useRoute();
+const {
+  date2Thai,
+  dialogConfirm,
+  dialogRemove,
+  success,
+  messageError,
+  hideLoader,
+  showLoader,
+} = useCounterMixin();
+
+const profileId = ref<string>(route.params.id.toString());
+
+/** ข้อมูลการจ้าง*/
+const rows = ref<Employment[]>([]);
+const filter = ref<string>("");
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่จ้าง",
+    sortable: false,
+    field: "date",
+    format: (v) => date2Thai(v),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "command",
+    align: "left",
+    label: "คำสั่งจ้าง",
+    sortable: false,
+    field: "command",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v),
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "date",
+  "command",
+  "createdFullName",
+  "createdAt",
+]);
+const modalEmployment = ref<boolean>(false);
+const isEdit = ref<boolean>(false);
+const employmentId = ref<string>("");
+const formData = reactive<FormEmployment>({
+  date: null,
+  command: "",
+});
+
+/** function fetch ข้อมูลรายการการจ้าง*/
+function fetchListEmployment() {
+  showLoader();
+  http
+    .get(config.API.employmentEmployee(profileId.value))
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function fetch ข้อมูลการจ้าง
+ * @param id รายการการจ้าง
+ */
+function fetchDataEmployment(id: string) {
+  showLoader();
+  http
+    .get(config.API.employmentEmployeeId(id))
+    .then((res) => {
+      const data = res.data.result;
+      formData.date = data.date;
+      formData.command = data.command;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * function เปิด dialog Form ข้อมูลการจ้าง
+ * @param statusEdit สถานะการ สร้าง หรือ แก่ไข
+ * @param id รายการการจ้าง
+ */
+function onOpenDialog(statusEdit: boolean = false, id: string = "") {
+  modalEmployment.value = true;
+  if (statusEdit) {
+    isEdit.value = statusEdit;
+    employmentId.value = id;
+    fetchDataEmployment(id);
+  }
+}
+
+/** function ปิด dialog Form ข้อมูลการจ้าง*/
+function onCloseDialog() {
+  modalEmployment.value = false;
+  isEdit.value = false;
+  employmentId.value = "";
+  formData.date = null;
+  formData.command = "";
+}
+
+/** function บันทึกข้อมูลการจ้าง*/
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    const methods = isEdit.value ? "put" : "post";
+    const id = isEdit.value ? employmentId.value : profileId.value;
+    http[methods](config.API.employmentEmployee(id), formData)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        fetchListEmployment();
+        onCloseDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**
+ * function ลบข้อมูลรายการจ้าง
+ * @param id รายการจ้าง
+ */
+function onDeleteEmployment(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.employmentEmployee(id))
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        fetchListEmployment();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/** ประวัติข้อมูลการจ้าง*/
+const modalHistory = ref<boolean>(false);
+const rowsHistory = ref<EmploymentHistory[]>([]);
+const filterHistory = ref<string>("");
+
+/**
+ * function เปิด dialog ประวัติการแก้ไขข้อมูลการจ้าง
+ * @param id รายการการจ้าง
+ */
+function onClickHistory(id: string) {
+  modalHistory.value = true;
+  showLoader();
+  http
+    .get(config.API.employmentHistoryEmployee(id))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  profileId.value && fetchListEmployment();
+});
+</script>
+
+<template>
+  <div class="flex items-center">
+    <div class="q-gutter-sm">
+      <q-btn
+        size="12px"
+        flat
+        round
+        color="primary"
+        icon="mdi-plus"
+        @click="onOpenDialog()"
+      >
+        <q-tooltip>เพิ่มข้อมูลการจ้าง</q-tooltip>
+      </q-btn>
+    </div>
+
+    <q-space />
+    <div class="q-gutter-sm" style="display: flex">
+      <q-input outlined dense v-model="filter" label="ค้นหา">
+        <template v-slot:append>
+          <q-icon
+            v-if="filter == ''"
+            name="search"
+            @click.stop.prevent="filter = ''"
+            class="cursor-pointer"
+          />
+          <q-icon
+            v-if="filter"
+            name="cancel"
+            @click.stop.prevent="filter = ''"
+            class="cursor-pointer"
+          /> </template
+      ></q-input>
+
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns?.slice(0, 2)"
+        option-value="name"
+        options-cover
+        style="min-width: 150px"
+      />
+    </div>
+  </div>
+
+  <div class="q-mt-sm">
+    <d-table
+      flat
+      bordered
+      id="table"
+      ref="table"
+      :columns="columns?.slice(0, 2)"
+      :rows="rows"
+      :filter="filter"
+      row-key="dateEmployment"
+      :paging="true"
+      dense
+      :visible-columns="visibleColumns"
+    >
+      <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-th>
+          <q-th auto-width></q-th>
+          <q-th auto-width></q-th>
+        </q-tr>
+      </template>
+      <template v-slot:body="props">
+        <q-tr :props="props" class="cursor-pointer" style="height: 40px">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props">
+            <div>
+              {{ col.value ? col.value : "-" }}
+            </div>
+          </q-td>
+          <q-td>
+            <q-btn
+              dense
+              flat
+              round
+              color="primary"
+              icon="mdi-pencil"
+              @click="onOpenDialog(true, props.row.id)"
+            >
+              <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+            </q-btn>
+          </q-td>
+          <q-td>
+            <q-btn
+              dense
+              flat
+              round
+              color="red"
+              icon="mdi-delete"
+              @click="onDeleteEmployment(props.row.id)"
+            >
+              <q-tooltip>ลบข้อมูล</q-tooltip></q-btn
+            >
+          </q-td>
+          <q-td>
+            <q-btn
+              dense
+              flat
+              round
+              color="info"
+              icon="mdi-history"
+              @click="onClickHistory(props.row.id)"
+            >
+              <q-tooltip>ประวัติข้อมูลการจ้าง </q-tooltip>
+            </q-btn>
+          </q-td>
+        </q-tr>
+      </template>
+    </d-table>
+  </div>
+
+  <!-- Dialog เพิ่มข้อมูลการจ้าง -->
+  <q-dialog v-model="modalEmployment" persistent>
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="isEdit ? 'แก้ข้อมูลการจ้าง' : 'เพิ่มข้อมูลการจ้าง'"
+          :close="onCloseDialog"
+        />
+
+        <q-separator />
+        <q-card-section>
+          <div class="row col-12 q-col-gutter-sm">
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.date"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                class="inputgreen"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker"
+                    :model-value="
+                      formData.date != null ? date2Thai(formData.date) : null
+                    "
+                    label="วันที่จ้าง"
+                    hide-bottom-space
+                    :rules="[(val) => !!val || `${'กรุณาเลือกวันที่จ้าง'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-input
+                dense
+                class="inputgreen"
+                outlined
+                v-model="formData.command"
+                label="คำสั่งจ้าง"
+                hide-bottom-space
+                :rules="[(val) => !!val || `${'กรุณากรอกคำสั่งจ้าง'}`]"
+                lazy-rules
+              />
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            dense
+            unelevated
+            label="บันทึก"
+            id="onSubmit"
+            type="submit"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+
+  <!-- Dialog ประวัติการแก้ไขข้อมูลลูกจ้างชั่วคราว -->
+  <q-dialog v-model="modalHistory" persistent>
+    <q-card style="min-width: 80%">
+      <DialogHeader
+        tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
+        :close="() => (modalHistory = false)"
+      />
+      <q-separator />
+
+      <q-card-section style="max-height: 50vh" class="scroll">
+        <div class="row q-gutter-sm q-mb-sm">
+          <q-space />
+          <q-input
+            standout
+            dense
+            v-model="filterHistory"
+            outlined
+            placeholder="ค้นหา"
+            debounce="300"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filterHistory == ''"
+                name="search"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+              <q-icon
+                v-if="filterHistory"
+                name="cancel"
+                @click.stop.prevent="filterHistory = ''"
+                class="cursor-pointer"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-model="visibleColumns"
+            multiple
+            outlined
+            dense
+            options-dense
+            :display-value="$q.lang.table.columns"
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </div>
+
+        <d-table
+          ref="table"
+          flat
+          bordered
+          dense
+          :columns="columns"
+          :rows="rowsHistory"
+          :rows-per-page-options="[10, 25, 50, 100]"
+          :visible-columns="visibleColumns"
+          :filter="filterHistory"
+        >
+          >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-separator />
+
+      <q-card-actions align="right"> </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/Employee/Main.vue b/src/modules/04_registryNew/components/detail/Employee/Main.vue
new file mode 100644
index 000000000..ae78c760c
--- /dev/null
+++ b/src/modules/04_registryNew/components/detail/Employee/Main.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+import DataEmployee from "@/modules/04_registryNew/components/detail/Employee/01_DataEmployee.vue";
+import Employment from "@/modules/04_registryNew/components/detail/Employee/02_Employment.vue";
+
+const tab = ref<string>("1");
+</script>
+<template>
+  <div class="row items-center q-my-md">
+    <div class="text-dark row items-center q-px-md">
+      <q-icon name="mdi-account" class="q-mr-md" size="22px" />
+      <div class="text-subtitle1 text-weight-bold">ข้อมูลลูกจ้างชั่วคราว</div>
+    </div>
+  </div>
+
+  <q-separator />
+  <q-tabs
+    v-model="tab"
+    active-color="blue-8"
+    align="left"
+    bordered
+    narrow-indicator
+    indicator-color="transparent"
+    dense
+    class="text-grey q-pl-sm"
+  >
+    <q-tab name="1" label="ข้อมูลลูกจ้างชั่วคราว" />
+    <q-tab name="2" label="ข้อมูลการจ้าง" />
+  </q-tabs>
+  <q-separator />
+
+  <q-tab-panels v-model="tab" animated>
+    <q-tab-panel name="1">
+      <DataEmployee />
+    </q-tab-panel>
+    <q-tab-panel name="2">
+      <Employment />
+    </q-tab-panel>
+  </q-tab-panels>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
index 06b5c71ee..39c457bb2 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
@@ -291,8 +291,9 @@ async function editData() {
   await http
     .put(config.API.profileNewProfileById(id.value, empType.value), {
       ...formData,
+      employeeClass: route.name === "registry-employeeId" ? "TEMP" : undefined,
     })
-    .then((res) => {
+    .then(() => {
       success($q, "บันทึกข้อมูลสำเร็จ");
       getData(), (modal.value = false);
       props.fetchDataPersonal?.();
diff --git a/src/modules/04_registryNew/components/detail/TabMain.vue b/src/modules/04_registryNew/components/detail/TabMain.vue
index 5c038c04e..874b76953 100644
--- a/src/modules/04_registryNew/components/detail/TabMain.vue
+++ b/src/modules/04_registryNew/components/detail/TabMain.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { useRoute } from "vue-router";
 
 import { useRegistryDetailNewDataStore } from "@/modules/04_registryNew/stores/DetailMain";
 
@@ -8,6 +9,9 @@ import GovernmentInformationMain from "@/modules/04_registryNew/components/detai
 import salaryMain from "@/modules/04_registryNew/components/detail/Salary/Main.vue";
 import AchievementMain from "@/modules/04_registryNew/components/detail/Achievement/Main.vue";
 import OtherMaim from "@/modules/04_registryNew/components/detail/Other/Main.vue";
+import EmployeeMain from "@/modules/04_registryNew/components/detail/Employee/Main.vue";
+
+const route = useRoute();
 
 const store = useRegistryDetailNewDataStore();
 const props = defineProps({
@@ -23,7 +27,10 @@ const itemsTab = ref<any>([
   {
     name: "2",
     icon: "mdi-account-tie",
-    label: "ข้อมูลราชการ",
+    label:
+      route.name === "registry-employeeId"
+        ? "ข้อมูลลูกจ้างชั่วคราว"
+        : "ข้อมูลราชการ",
   },
   {
     name: "3",
@@ -88,7 +95,11 @@ const splitterModel = ref<number>(12);
             v-if="store.tabMain === '1'"
             :fetchDataPersonal="props.fetchDataPersonal"
           />
-          <GovernmentInformationMain v-if="store.tabMain === '2'" />
+          <EmployeeMain
+            v-if="store.tabMain === '2' && route.name === 'registry-employeeId'"
+          />
+          <GovernmentInformationMain v-else-if="store.tabMain === '2'" />
+
           <salaryMain v-if="store.tabMain === '3'" />
           <AchievementMain v-if="store.tabMain === '4'" />
           <OtherMaim v-if="store.tabMain === '5'" />
diff --git a/src/modules/04_registryNew/interface/request/Employee.ts b/src/modules/04_registryNew/interface/request/Employee.ts
new file mode 100644
index 000000000..3d8c623bf
--- /dev/null
+++ b/src/modules/04_registryNew/interface/request/Employee.ts
@@ -0,0 +1,19 @@
+interface FormEmployee {
+  positionEmployeeGroupId: string;
+  positionEmployeeLineId: string;
+  positionEmployeePositionId: string;
+  employeeOc: string;
+  employeeTypeIndividual: string;
+  employeeWage: string;
+  employeeMoneyIncrease: string;
+  employeeMoneyAllowance: string;
+  employeeMoneyEmployee: string;
+  employeeMoneyEmployer: string;
+}
+
+interface FormEmployment {
+  command: string;
+  date: null | Date;
+}
+
+export type { FormEmployee, FormEmployment };
diff --git a/src/modules/04_registryNew/interface/request/Profile.ts b/src/modules/04_registryNew/interface/request/Profile.ts
index 46dcb7a8c..c56dab36a 100644
--- a/src/modules/04_registryNew/interface/request/Profile.ts
+++ b/src/modules/04_registryNew/interface/request/Profile.ts
@@ -2,20 +2,20 @@ interface RequestObject {
   birthDate: Date | null;
   bloodGroup: string | null;
   citizenId: string;
-  email: string | null;
+  // email: string | null;
   ethnicity: string | null;
   firstName: string;
   gender: string | null;
   lastName: string;
   nationality: string | null;
   phone: string | null;
-  posLevelId: string;
-  posTypeId: string;
+  // posLevelId: string;
+  // posTypeId: string;
   prefix: string;
   rank: string | null;
   relationship: string | null;
   religion: string | null;
-  telephoneNumber: string | null;
+  // telephoneNumber: string | null;
 }
 
 export type { RequestObject };
diff --git a/src/modules/04_registryNew/interface/response/Employee.ts b/src/modules/04_registryNew/interface/response/Employee.ts
new file mode 100644
index 000000000..e49da2d31
--- /dev/null
+++ b/src/modules/04_registryNew/interface/response/Employee.ts
@@ -0,0 +1,54 @@
+interface EmployeeHistory {
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  employeeMoneyAllowance: string;
+  employeeMoneyEmployee: string;
+  employeeMoneyEmployer: string;
+  employeeMoneyIncrease: string;
+  employeeOc: string;
+  employeeTypeIndividual: string;
+  employeeWage: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  positionEmployeeGroupId: string;
+  positionEmployeeLineId: string;
+  positionEmployeePositionId: string;
+}
+
+interface Employment {
+  command: string;
+  date: string | Date;
+  id: string;
+}
+
+interface EmploymentHistory {
+  command: string;
+  createdAt: string | Date;
+  createdFullName: string;
+  createdUserId: string;
+  date: string | Date;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string | Date;
+  profileEmployeeEmploymentId: string;
+}
+
+interface ResEmployee {
+  id: string;
+  positionEmployeeGroupId: string;
+  positionEmployeeLineId: string;
+  positionEmployeePositionId: string;
+  employeeOc: string;
+  employeeTypeIndividual: string;
+  employeeWage: string;
+  employeeMoneyIncrease: string;
+  employeeMoneyAllowance: string;
+  employeeMoneyEmployee: string;
+  employeeMoneyEmployer: string;
+}
+
+export type { Employment, EmploymentHistory, EmployeeHistory, ResEmployee };
diff --git a/src/modules/04_registryNew/stores/profile.ts b/src/modules/04_registryNew/stores/profile.ts
index 590e43e9b..331da684b 100644
--- a/src/modules/04_registryNew/stores/profile.ts
+++ b/src/modules/04_registryNew/stores/profile.ts
@@ -28,16 +28,16 @@ export const useProfileDataStore = defineStore("profile", () => {
     bloodGroup: null,
     relationship: null,
     gender: null,
-    posTypeId: "",
-    posLevelId: "",
+    // posTypeId: "",
+    // posLevelId: "",
     religion: null,
     citizenId: "",
-    telephoneNumber: null,
+    // telephoneNumber: null,
     nationality: null,
     ethnicity: null,
     birthDate: null,
     phone: null,
-    email: null,
+    // email: null,
     lastName: "",
     firstName: "",
     prefix: "",
diff --git a/src/modules/04_registryNew/views/detailView.vue b/src/modules/04_registryNew/views/detailView.vue
index 06e726228..de4e24dcd 100644
--- a/src/modules/04_registryNew/views/detailView.vue
+++ b/src/modules/04_registryNew/views/detailView.vue
@@ -579,7 +579,11 @@ onMounted(async () => {
         class="q-mr-sm"
         @click="router.go(-1)"
       />
-      ทะเบียนประวัติ
+      {{
+        route.name === "registry-employeeId"
+          ? " ทะเบียนประวัติลูกจ้างชั่วคราว"
+          : "ทะเบียนประวัติ"
+      }}
     </div>
     <q-space />
     <q-btn-dropdown
diff --git a/src/modules/05_placement/components/PersonalList/CardPosition.vue b/src/modules/05_placement/components/PersonalList/CardPosition.vue
index d8cfd2a53..bf09df2fb 100644
--- a/src/modules/05_placement/components/PersonalList/CardPosition.vue
+++ b/src/modules/05_placement/components/PersonalList/CardPosition.vue
@@ -195,6 +195,7 @@ async function onClickSelectPos(id: string) {
         (e) => e.id === seletcId.value
       );
     }
+    console.log(selected.value);
   }
 }
 
@@ -208,7 +209,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="column q-col-gutter-sm" style="height: 70vh">
+  <div class="column q-col-gutter-sm">
     <!-- เลือกเลขที่ตำแหน่ง -->
     <div class="col-7">
       <q-card bordered style="height: 100%; border: 1px solid #d6dee1">
diff --git a/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue b/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue
index dc65dbd93..a88ea9704 100644
--- a/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue
+++ b/src/modules/05_placement/components/PersonalList/DialogSelectOrg.vue
@@ -198,8 +198,7 @@ async function fetchPosFind(level: number, id: string) {
     .post(config.API.orgPosFind, body)
     .then((res) => {
       const data = res.data.result;
-      console.log(data);
-      
+
       expanded.value = data;
       nodeId.value = id;
       positionId.value = props?.dataRow?.posmasterId;
@@ -280,9 +279,8 @@ watch(
     if (modal.value) {
       await fetchOrganizationActive();
       console.log(props?.dataRow);
-      
-      if (props?.dataRow?.node !== null && props?.dataRow?.nodeId !== null) {
 
+      if (props?.dataRow?.node !== null && props?.dataRow?.nodeId !== null) {
         await fetchPosFind(props?.dataRow?.node, props?.dataRow?.nodeId);
       } else {
         expanded.value = [];
@@ -348,7 +346,7 @@ watch(
           <q-card
             bordered
             class="col-12 col-sm-3 scroll q-pa-sm"
-            style="height: 75vh"
+            style="height: 80vh"
           >
             <q-toolbar style="padding: 0">
               <q-toolbar-title class="text-subtitle2 text-bold"
@@ -410,7 +408,11 @@ watch(
             </q-tree>
           </q-card>
 
-          <q-card bordered class="col-12 col-sm-9 q-pa-sm">
+          <q-card
+            bordered
+            class="col-12 col-sm-9 q-pa-sm scroll"
+            style="height: 80vh"
+          >
             <q-tab-panels
               v-model="nodeId"
               animated
diff --git a/src/modules/08_registryEmployee/components/DialogAddEmployee.vue b/src/modules/08_registryEmployee/components/DialogAddEmployee.vue
new file mode 100644
index 000000000..6fd35bb66
--- /dev/null
+++ b/src/modules/08_registryEmployee/components/DialogAddEmployee.vue
@@ -0,0 +1,571 @@
+<script setup lang="ts">
+import { ref, onMounted, watch, reactive } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { DataOption } from "@/modules/08_registryEmployee/interface/index/Main";
+import type { FormDataEmployee } from "@/modules/08_registryEmployee/interface/request/Employee";
+import type { ResOptionPerson } from "@/modules/08_registryEmployee/interface/response/Employee";
+
+/** importComponents*/
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
+
+/** use*/
+const $q = useQuasar();
+const {
+  dialogConfirm,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogMessageNotify,
+  date2Thai,
+} = useCounterMixin();
+const { calculateAge } = useRegistryEmp();
+
+/**  props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  fetchData: { type: Function, require: true },
+});
+
+const formData = reactive<FormDataEmployee>({
+  citizenId: "",
+  prefix: "",
+  rank: "",
+  firstName: "",
+  lastName: "",
+  birthDate: null,
+  gender: "",
+  relationship: "",
+  nationality: "",
+  ethnicity: "",
+  religion: "",
+  bloodGroup: "",
+  phone: "",
+  employeeClass: "TEMP",
+});
+
+const prefixOpsMain = ref<DataOption[]>([]);
+const prefixOps = ref<DataOption[]>([]);
+const rankOpsMain = ref<DataOption[]>([]);
+const rankOps = ref<DataOption[]>([]);
+const genderOpsMain = ref<DataOption[]>([]);
+const genderOps = ref<DataOption[]>([]);
+const statusOpsMain = ref<DataOption[]>([]);
+const statusOps = ref<DataOption[]>([]);
+const religionOpsMain = ref<DataOption[]>([]);
+const religionOps = ref<DataOption[]>([]);
+const bloodOpsMain = ref<DataOption[]>([]);
+const bloodOps = ref<DataOption[]>([]);
+
+function fetchDataPerson() {
+  showLoader();
+  http
+    .get(config.API.profileNewMetaMain)
+    .then((res) => {
+      const data = res.data.result;
+
+      let optionPerfix: DataOption[] = [];
+      data.prefixs.map((r: ResOptionPerson) => {
+        optionPerfix.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      prefixOpsMain.value = optionPerfix;
+
+      let optionrank: DataOption[] = [];
+      data.rank.map((r: ResOptionPerson) => {
+        optionrank.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      rankOpsMain.value = optionrank;
+
+      let optiongenders: DataOption[] = [];
+      data.genders.map((r: ResOptionPerson) => {
+        optiongenders.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      genderOpsMain.value = optiongenders;
+
+      let optionrelationships: DataOption[] = [];
+      data.relationships.map((r: ResOptionPerson) => {
+        optionrelationships.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      statusOpsMain.value = optionrelationships;
+
+      let optionreligions: DataOption[] = [];
+      data.religions.map((r: ResOptionPerson) => {
+        optionreligions.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      religionOpsMain.value = optionreligions;
+
+      let optionBlood: DataOption[] = [];
+      data.bloodGroups.map((r: ResOptionPerson) => {
+        optionBlood.push({
+          id: r.id.toString(),
+          name: r.name.toString(),
+        });
+      });
+      bloodOpsMain.value = optionBlood;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function changeCardID(citizenId: string | number | null) {
+  if (citizenId != null && typeof citizenId == "string") {
+    if (citizenId.length == 13 && citizenId) {
+      http
+        .put(config.API.profileNewCitizenId(citizenId), {
+          citizenId: citizenId,
+        })
+        .then(() => {})
+        .catch((err) => {
+          if (err.response.data.status === 500) {
+            dialogMessageNotify($q, err.response.data.message);
+          } else {
+            messageError($q, err);
+          }
+        });
+    }
+  }
+}
+
+const filterSelector = (val: string, update: Function, refData: string) => {
+  switch (refData) {
+    case "prefix":
+      update(() => {
+        prefixOps.value = prefixOpsMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "rank":
+      update(() => {
+        rankOps.value = rankOpsMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "gender":
+      update(() => {
+        genderOps.value = genderOpsMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "status":
+      update(() => {
+        statusOps.value = statusOpsMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "religion":
+      update(() => {
+        religionOps.value = religionOpsMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "blood":
+      let f = val.toLocaleUpperCase();
+      update(() => {
+        bloodOps.value = bloodOpsMain.value.filter(
+          (v: DataOption) => v.name.indexOf(f) > -1
+        );
+      });
+      break;
+
+    default:
+      break;
+  }
+};
+
+function calculateMaxDate() {
+  const today = new Date();
+  today.setFullYear(today.getFullYear() - 18);
+  return today;
+}
+
+function onSubmit() {
+  dialogConfirm($q, () => {
+    showLoader();
+    http
+      .post(config.API.registryNew("-employee"), formData)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchData?.();
+        closeDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function closeDialog() {
+  modal.value = false;
+  formData.citizenId = "";
+  formData.prefix = "";
+  formData.rank = "";
+  formData.firstName = "";
+  formData.lastName = "";
+  formData.birthDate = null;
+  formData.gender = "";
+  formData.relationship = "";
+  formData.nationality = "";
+  formData.ethnicity = "";
+  formData.religion = "";
+  formData.bloodGroup = "";
+  formData.phone = "";
+}
+
+watch(
+  () => modal.value,
+  () => {
+    if (modal.value) {
+      fetchDataPerson();
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 600px">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <DialogHeader
+            tittle="เพิ่มข้อมูลลูกจ้างชั่วคราว"
+            :close="closeDialog"
+          />
+        </q-card-section>
+        <q-separator />
+        <q-card-section class="q-pa-md q-col-gutter-md">
+          <div class="row q-col-gutter-md">
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                maxlength="13"
+                mask="#############"
+                v-model="formData.citizenId"
+                class="inputgreen"
+                label="เลขประจำตัวประชาชน"
+                :rules="[
+                  (val: string) => !!val || `${'กรุณากรอก เลขประจำตัวประชาชน'}`,
+                  (val: string) =>
+                    val.length >= 13 ||
+                    `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
+                ]"
+                @update:model-value="changeCardID"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-select
+                dense
+                outlined
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                input-debounce="0"
+                option-label="name"
+                option-value="name"
+                v-model="formData.prefix"
+                class="inputgreen"
+                :options="prefixOps"
+                label="คำนำหน้าชื่อ"
+                :rules="[(val: string) => !!val || `${'กรุณาเลือก คำนำหน้าชื่อ'}`]"
+                @filter="(inputValue: string,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'prefix'
+                )"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-select
+                dense
+                outlined
+                clearable
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                input-debounce="0"
+                option-label="name"
+                option-value="name"
+                v-model="formData.rank"
+                class="inputgreen"
+                :options="rankOps"
+                label="ยศ"
+                @filter="(inputValue: string,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'rank'
+                )"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.firstName"
+                class="inputgreen"
+                label="ชื่อ"
+                :rules="[(val: string) => !!val || `${'กรุณากรอกชื่อ'}`]"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                v-model="formData.lastName"
+                class="inputgreen"
+                label="นามสกุล"
+                :rules="[(val: string) => !!val || `${'กรุณากรอกนามสกุล'}`]"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                :max-date="calculateMaxDate()"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+                menu-class-name="modalfix"
+                v-model="formData.birthDate"
+                :locale="'th'"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    for="inputDatereceive"
+                    ref="dateReceivedRef"
+                    outlined
+                    dense
+                    hide-bottom-space
+                    class="inputgreen"
+                    :model-value="
+                      formData.birthDate != null
+                        ? date2Thai(formData.birthDate)
+                        : null
+                    "
+                    label="วัน/เดือน/ปี เกิด"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
+                    ]"
+                  >
+                    <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 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                readonly
+                :model-value="
+                  formData.birthDate !== null
+                    ? calculateAge(formData.birthDate)
+                    : null
+                "
+                label="อายุ"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-select
+                dense
+                outlined
+                use-input
+                clearable
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                input-debounce="0"
+                option-label="name"
+                option-value="name"
+                v-model="formData.gender"
+                class="inputgreen"
+                :options="genderOps"
+                label="เพศ"
+                @filter="(inputValue: string,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'gender'
+                )"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-select
+                dense
+                outlined
+                use-input
+                clearable
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="name"
+                option-label="name"
+                input-debounce="0"
+                class="inputgreen"
+                v-model="formData.relationship"
+                :options="statusOps"
+                label="สถานภาพ"
+                @filter="(inputValue: string,
+                doneFn: Function) => filterSelector(inputValue, doneFn, 'status'
+                )"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                class="inputgreen"
+                v-model="formData.nationality"
+                label="สัญชาติ"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                class="inputgreen"
+                v-model="formData.ethnicity"
+                label="เชื้อชาติ"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-select
+                dense
+                outlined
+                use-input
+                clearable
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="name"
+                option-label="name"
+                input-debounce="0"
+                v-model="formData.religion"
+                class="inputgreen"
+                :options="religionOps"
+                label="ศาสนา"
+                @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'religion'
+              )"
+              />
+            </div>
+            <div class="col-xs-12 col-sm-6 col-md-6">
+              <q-select
+                dense
+                outlined
+                use-input
+                clearable
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                option-value="name"
+                option-label="name"
+                input-debounce="0"
+                v-model="formData.bloodGroup"
+                class="inputgreen"
+                :options="bloodOps"
+                label="หมู่เลือด"
+                @filter="(inputValue: string,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'blood'
+              )"
+              />
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                mask="##########"
+                class="inputgreen"
+                v-model="formData.phone"
+                label="เบอร์โทร"
+              />
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </q-form></q-card
+    >
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/08_registryEmployee/components/DialogSelectPos.vue b/src/modules/08_registryEmployee/components/DialogSelectPos.vue
new file mode 100644
index 000000000..5e3ab4640
--- /dev/null
+++ b/src/modules/08_registryEmployee/components/DialogSelectPos.vue
@@ -0,0 +1,929 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type {
+  TreeMain,
+  PositionNo,
+  Position,
+} from "@/modules/08_registryEmployee/interface/response/Employee";
+
+/** importComponents*/
+import Header from "@/components/DialogHeader.vue";
+
+/** importStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { asCleanDays } from "@fullcalendar/core/internal";
+
+/** use*/
+const $q = useQuasar();
+const {
+  success,
+  showLoader,
+  hideLoader,
+  messageError,
+  dialogMessageNotify,
+  dialogConfirm,
+} = useCounterMixin();
+
+/**props*/
+const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  dataRow: {
+    type: Object,
+    require: true,
+  },
+  fetchData: {
+    type: Function,
+    require: true,
+  },
+});
+
+/** Tree*/
+const nodeId = ref<string>("");
+const nodeLevel = ref<number>(0);
+const filterTree = ref<string>("");
+const nodes = ref<Array<TreeMain>>([]);
+const lazy = ref(nodes);
+const expanded = ref<string[]>([]);
+
+/** Table*/
+const filters = ref<string>("");
+const rowsPosition = ref<Position[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "isPosition",
+    align: "left",
+    label: "",
+    sortable: true,
+    field: "isPosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    field: "positionName",
+    sortable: true,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำแหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const columnsPostition = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionName",
+    align: "left",
+    label: "ตำแหน่งในสายงาน",
+    sortable: true,
+    field: "positionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionField",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posTypeName",
+    align: "left",
+    label: "ประเภทตำเเหน่ง",
+    sortable: true,
+    field: "posTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posLevelName",
+    align: "left",
+    label: "ระดับตำแหน่ง",
+    sortable: true,
+    field: "posLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posExecutiveName",
+    align: "left",
+    label: "ตำแหน่งทางการบริหาร",
+    sortable: true,
+    field: "posExecutiveName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionExecutiveField",
+    align: "left",
+    label: "ด้านทางการบริหาร",
+    sortable: true,
+    field: "positionExecutiveField",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionArea",
+    align: "left",
+    label: "ด้าน/สาขา",
+    sortable: true,
+    field: "positionArea",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<string[]>([
+  "isPosition",
+  "no",
+  "posMasterNo",
+  "positionName",
+  "posTypeName",
+  "posLevelName",
+]);
+
+/** Position*/
+const positionNo = ref<PositionNo[]>([]);
+const positionId = ref<string>("");
+const seletcId = ref<string>("");
+const selectedPos = ref<any[]>([]);
+const datePos = ref<Date>(new Date());
+const posMasterMain = ref<any>([]);
+const orgRevisionId = ref<string>("");
+
+/** function เรียกข้อมูลโครงสร้าง แบบปัจุบันและ แบบร่าง*/
+async function fetchOrganizationActive() {
+  showLoader();
+  await http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        orgRevisionId.value = data.activeId;
+        fetchDataTree(data.activeId);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
+
+/**
+ * function fetch ข้อมูลของ Tree
+ * @param id id โครงสร้าง
+ */
+async function fetchDataTree(id: string) {
+  showLoader();
+  await http
+    .get(config.API.orgByid(id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      if (data) {
+        nodes.value = data;
+        filterItemsTaps(data);
+      }
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 1000);
+    });
+}
+
+/**
+ * funtion เลือกข้อมูล Tree
+ * @param data ข่อมูล Tree
+ */
+function updateSelected(data: TreeMain) {
+  if (props?.dataRow?.nodeId === data.orgTreeId) {
+    positionId.value = props?.dataRow?.posmasterId;
+    seletcId.value = props?.dataRow?.positionId;
+    datePos.value = props?.dataRow?.reportingDateFullDate;
+  } else {
+    positionId.value = "";
+    seletcId.value = "";
+    selectedPos.value = [];
+    datePos.value = new Date();
+  }
+
+  nodeId.value = data.orgTreeId ? data.orgTreeId : "";
+  nodeLevel.value = data.orgLevel;
+  fetchDataTable(data.orgTreeId, data.orgLevel);
+}
+
+const isAll = ref<boolean>(false);
+const isBlank = ref<boolean>(false);
+
+/**
+ * function fetch ข้อมูลรายการตำแหน่ง
+ * @param id  idTree
+ * @param level  levelTree
+ */
+async function fetchDataTable(id: string, level: number = 0) {
+  showLoader();
+  const body = {
+    node: level,
+    nodeId: id,
+    position: "",
+    typeCommand: "",
+    posLevel: props.dataRow?.posLevelCandidateId
+      ? props.dataRow?.posLevelCandidateId
+      : "",
+    posType: props.dataRow?.posTypeCandidateId
+      ? props.dataRow?.posTypeCandidateId
+      : "",
+    isAll: isAll.value,
+    isBlank: isBlank.value,
+  };
+  await http
+    .post(config.API.orgPosPlacemenTemp, body)
+    .then((res) => {
+      const dataMain: PositionNo[] = [];
+
+      posMasterMain.value = res.data.result.data;
+      res.data.result.data.forEach((e: any) => {
+        const p = e.positions;
+        if (p.length !== 0) {
+          const a = p.find((el: Position) => el.positionIsSelected === true);
+          const { id, ...rest } = a ? a : p[0];
+          const data: any = { ...e, ...rest };
+          dataMain.push(data);
+        }
+      });
+      positionNo.value = dataMain;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      setTimeout(() => {
+        hideLoader();
+      }, 1000);
+    });
+}
+
+/**
+ * function fetch ข้อมูล expanded tree
+ * @param level levelTree
+ * @param id treeId
+ */
+async function fetchPosFind(level: number, id: string) {
+  showLoader();
+  const body = {
+    node: level,
+    nodeId: id,
+  };
+  await http
+    .post(config.API.orgPosFind, body)
+    .then(async (res) => {
+      const data = res.data.result;
+
+      expanded.value = data;
+      nodeId.value = id;
+      positionId.value = props?.dataRow?.posmasterId;
+      seletcId.value = props?.dataRow?.positionId;
+      datePos.value = props?.dataRow?.reportingDateFullDate;
+
+      await fetchDataTable(nodeId.value, level);
+      positionId.value && (await onClickSelectPos(positionId.value));
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    });
+}
+
+/** function บันทึกข้อมูลตำแหน่ง*/
+async function onClickSubmit() {
+  const dataPosMaster = await posMasterMain.value?.find(
+    (e: any) => e.id === positionId.value
+  );
+
+  if (selectedPos.value.length === 0) {
+    dialogMessageNotify($q, "กรุณาเลือกตำแหน่ง");
+  } else {
+    dialogConfirm($q, async () => {
+      showLoader();
+      const body = {
+        node: dataPosMaster.node,
+        nodeId: dataPosMaster.nodeId,
+        orgRevisionId: orgRevisionId.value,
+        positionId: selectedPos.value[0].id,
+        posMasterNo: dataPosMaster.posMasterNo.toString(), //เลขที่ตำแหน่ง(เลขอย่่างเดียว)
+        position: selectedPos.value[0].positionName, //ชื่อตำแหน่ง
+        positionField: "", //ชื่อตำแหน่ง
+        posTypeId: selectedPos.value[0].posTypeId, //ชื่อตำแหน่ง
+        posTypeName: selectedPos.value[0].posTypeName, //ชื่อตำแหน่ง
+        posLevelId: selectedPos.value[0].posLevelId, //ชื่อตำแหน่ง
+        posLevelName: selectedPos.value[0].posLevelName.toString(), //ชื่อตำแหน่ง
+        posmasterId: dataPosMaster.id,
+      };
+
+      await http
+        .put(config.API.positionEmployee(props?.dataRow?.id), body)
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          props.fetchData?.();
+          closePopup();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    });
+  }
+}
+
+/** function closePopup*/
+function closePopup() {
+  modal.value = !modal.value;
+  clearData();
+}
+
+/** function clearData*/
+function clearData() {
+  nodeId.value = "";
+  expanded.value = [];
+  positionId.value = "";
+  seletcId.value = "";
+}
+
+const itemTaps = ref<string[]>();
+function filterItemsTaps(data: any[]) {
+  let orgTreeIds: string[] = [];
+  for (const child of data) {
+    orgTreeIds.push(child.orgTreeId);
+    if (child.children) {
+      orgTreeIds = orgTreeIds.concat(filterItemsTaps(child.children));
+    }
+  }
+  itemTaps.value = orgTreeIds;
+  return orgTreeIds;
+}
+
+async function onClickSelectPos(id: string) {
+  positionId.value = id;
+  selectedPos.value = [];
+  const position: any = positionNo.value.find((e: any) => e.id === id);
+
+  // หาตำแหน่ง
+  if (position) {
+    rowsPosition.value = position.positions;
+    if (seletcId.value) {
+      selectedPos.value = rowsPosition.value.filter(
+        (e) => e.id === seletcId.value
+      );
+    }
+  }
+}
+
+/** callback function เมื่อมีการเปิด popup*/
+watch(
+  () => modal.value,
+  async () => {
+    if (modal.value) {
+      await fetchOrganizationActive();
+      if (props?.dataRow?.node !== null && props?.dataRow?.nodeId !== null) {
+        await fetchPosFind(props?.dataRow?.node, props?.dataRow?.nodeId);
+      } else {
+        expanded.value = [];
+      }
+    }
+  }
+);
+
+watch(
+  () => isAll.value,
+  (value, oldVal) => {
+    if (value !== oldVal) {
+      fetchDataTable(nodeId.value, nodeLevel.value);
+    }
+  }
+);
+
+watch(
+  () => isBlank.value,
+  (value, oldVal) => {
+    if (value !== oldVal) {
+      fetchDataTable(nodeId.value, nodeLevel.value);
+    }
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal" full-width persistent>
+    <q-card>
+      <Header :tittle="'เลือกหน่วยงานที่รับบรรจุ'" :close="closePopup" />
+      <q-separator />
+
+      <q-card-section class="q-pt-none q-pa-sm bg-grey-2">
+        <div class="row">
+          <q-card
+            bordered
+            class="col-12 col-sm-3 scroll q-pa-sm"
+            style="height: 75vh"
+          >
+            <q-toolbar style="padding: 0">
+              <q-toolbar-title class="text-subtitle2 text-bold"
+                >เลือกหน่วยงาน/ส่วนราชการ</q-toolbar-title
+              >
+            </q-toolbar>
+
+            <q-input
+              ref="filterRef"
+              dense
+              outlined
+              v-model="filterTree"
+              label="ค้นหา"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterTree !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="filterTree = ''"
+                />
+              </template>
+            </q-input>
+            <q-tree
+              class="q-pa-sm q-gutter-sm"
+              dense
+              default-expand-all
+              :nodes="lazy"
+              node-key="orgTreeId"
+              label-key="orgTreeName"
+              :filter="filterTree"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+              v-model:expanded="expanded"
+            >
+              <template v-slot:default-header="prop">
+                <q-item
+                  clickable
+                  :active="nodeId == prop.node.orgTreeId"
+                  @click.stop="updateSelected(prop.node)"
+                  active-class="my-list-link text-primary text-weight-medium"
+                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                >
+                  <div>
+                    <div class="text-weight-medium">
+                      {{ prop.node.orgTreeName }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                      {{
+                        prop.node.orgTreeShortName == null
+                          ? null
+                          : prop.node.orgTreeShortName
+                      }}
+                    </div>
+                  </div>
+                </q-item>
+              </template>
+            </q-tree>
+          </q-card>
+
+          <q-card
+            bordered
+            class="col-12 col-sm-9 q-pa-sm scroll"
+            style="height: 75vh"
+          >
+            <q-tab-panels
+              v-model="nodeId"
+              animated
+              transition-prev="jump-up"
+              transition-next="jump-up"
+            >
+              <q-tab-panel
+                v-for="(item, index) in itemTaps"
+                :key="index"
+                :name="item"
+              >
+                <div class="column q-col-gutter-sm">
+                  <!-- เลือกเลขที่ตำแหน่ง -->
+                  <div class="col-7">
+                    <q-card
+                      bordered
+                      style="height: 100%; border: 1px solid #d6dee1"
+                    >
+                      <div
+                        class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                      >
+                        เลือกเลขที่ตำแหน่ง
+                      </div>
+                      <div class="col-12"><q-separator /></div>
+                      <div class="col-12 q-pa-md">
+                        <q-toolbar style="padding: 0px">
+                          <div class="row q-gutter-md">
+                            <q-checkbox
+                              keep-color
+                              v-model="isBlank"
+                              label="แสดงเฉพาะตำแหน่งว่าง"
+                              color="primary"
+                            >
+                              <q-tooltip>แสดงเฉพาะตำแหน่งว่าง </q-tooltip>
+                            </q-checkbox>
+                          </div>
+                          <q-space />
+
+                          <div class="row q-gutter-md">
+                            <q-checkbox
+                              keep-color
+                              v-model="isAll"
+                              label="แสดงตำแหน่งทั้งหมด"
+                              color="primary"
+                            >
+                              <q-tooltip
+                                >แสดงตำแหน่งทั้งหมดภายใต้หน่วยงาน/ส่วนราชการที่เลือก</q-tooltip
+                              >
+                            </q-checkbox>
+                            <div>
+                              <q-input
+                                outlined
+                                dense
+                                v-model="filters"
+                                label="ค้นหา"
+                              >
+                                <template v-slot:append>
+                                  <q-icon name="search" color="grey-5" />
+                                </template>
+                              </q-input>
+                            </div>
+                            <div>
+                              <q-select
+                                v-model="visibleColumns"
+                                multiple
+                                outlined
+                                dense
+                                options-dense
+                                :display-value="$q.lang.table.columns"
+                                emit-value
+                                map-options
+                                :options="columns"
+                                option-value="name"
+                                options-cover
+                                style="min-width: 180px"
+                              />
+                            </div>
+                          </div>
+                        </q-toolbar>
+                        <d-table
+                          ref="table"
+                          :columns="columns"
+                          :rows="positionNo"
+                          :filter="filters"
+                          row-key="id"
+                          flat
+                          bordered
+                          :paging="true"
+                          dense
+                          :rows-per-page-options="[10, 25, 50, 100]"
+                          class="tableTb"
+                          :visible-columns="visibleColumns"
+                        >
+                          <template v-slot:header="props">
+                            <q-tr :props="props">
+                              <q-th
+                                v-for="col in props.cols"
+                                :key="col.name"
+                                :props="props"
+                              >
+                                <span class="text-weight-medium">{{
+                                  col.label
+                                }}</span>
+                              </q-th>
+                            </q-tr>
+                          </template>
+                          <template v-slot:body="props">
+                            <q-tr :props="props" class="cursor-pointer">
+                              <q-td
+                                v-for="col in props.cols"
+                                :key="col.name"
+                                :props="props"
+                                @click="onClickSelectPos(props.row.id)"
+                                :class="
+                                  props.row.id === positionId ? 'bg-blue-2' : ''
+                                "
+                              >
+                                <div v-if="col.name == 'no'">
+                                  {{ props.rowIndex + 1 }}
+                                </div>
+                                <div v-else-if="col.name === 'posMasterNo'">
+                                  {{
+                                    props.row.isSit
+                                      ? col.value + " " + "(ทับที่)"
+                                      : col.value
+                                  }}
+                                </div>
+                                <div v-else-if="col.name === 'isPosition'">
+                                  <div v-if="col.value">
+                                    <q-icon
+                                      name="done"
+                                      color="primary"
+                                      size="24px"
+                                    >
+                                      <q-tooltip>ตรงตามตำแหน่ง </q-tooltip>
+                                    </q-icon>
+                                  </div>
+                                </div>
+
+                                <div v-else>
+                                  {{ col.value ? col.value : "-" }}
+                                </div>
+                              </q-td>
+                            </q-tr>
+                          </template>
+                        </d-table>
+
+                        <!-- <d-table
+                          ref="table"
+                          :columns="columns"
+                          :rows="positionNo"
+                          :filter="filters"
+                          row-key="id"
+                          flat
+                          bordered
+                          :paging="true"
+                          dense
+                          :rows-per-page-options="[10, 25, 50, 100]"
+                          :visible-columns="visibleColumns"
+                        >
+                          <template v-slot:header="props">
+                            <q-tr :props="props">
+                              <q-th
+                                v-for="col in props.cols"
+                                :key="col.name"
+                                :props="props"
+                              >
+                                <span class="text-weight-medium">{{
+                                  col.label
+                                }}</span>
+                              </q-th>
+                            </q-tr>
+                          </template>
+                          <template v-slot:body="props">
+                            <q-tr :props="props" class="cursor-pointer">
+                              <q-td
+                                v-for="col in props.cols"
+                                :key="col.name"
+                                :props="props"
+                                @click="onClickSelectPos(props.row.id)"
+                                :class="
+                                  props.row.id === positionId ? 'bg-blue-2' : ''
+                                "
+                              >
+                                <div v-if="col.name == 'no'">
+                                  {{ props.rowIndex + 1 }}
+                                </div>
+                                <div v-else-if="col.name === 'posMasterNo'">
+                                  {{
+                                    props.row.isSit
+                                      ? col.value + " " + "(ทับที่)"
+                                      : col.value
+                                  }}
+                                </div>
+                                <div v-else-if="col.name === 'isPosition'">
+                                  <div v-if="col.value">
+                                    <q-icon
+                                      name="done"
+                                      color="primary"
+                                      size="24px"
+                                    >
+                                      <q-tooltip>ตรงตามตำแหน่ง </q-tooltip>
+                                    </q-icon>
+                                  </div>
+                                </div>
+
+                                <div v-else>
+                                  {{ col.value ? col.value : "-" }}
+                                </div>
+                              </q-td>
+                            </q-tr>
+                          </template>
+                        </d-table> -->
+                      </div>
+                    </q-card>
+                  </div>
+
+                  <!-- เลือกตำแหน่ง -->
+                  <div class="col-5">
+                    <q-card
+                      bordered
+                      style="height: 100%; border: 1px solid #d6dee1"
+                    >
+                      <div
+                        class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                      >
+                        เลือกตำแหน่ง
+                      </div>
+                      <div class="col-12"><q-separator /></div>
+                      <q-tab-panels
+                        v-model="positionId"
+                        animated
+                        swipeable
+                        vertical
+                        transition-prev="jump-up"
+                        transition-next="jump-up"
+                      >
+                        <q-tab-panel
+                          v-for="(item, index) in positionNo"
+                          :key="index"
+                          :name="item.id"
+                        >
+                          <div class="col-12">
+                            <!-- <q-toolbar style="padding: 0px">
+                            <datepicker
+                              menu-class-name="modalfix"
+                              v-model="date"
+                              :locale="'th'"
+                              autoApply
+                              borderless
+                              :enableTimePicker="false"
+                              week-start="0"
+                              :min-date="date"
+                            >
+                              <template #year="{ year }">
+                                {{ year + 543 }}
+                              </template>
+                              <template #year-overlay-value="{ value }">
+                                {{ parseInt(value + 543) }}
+                              </template>
+                              <template #trigger>
+                                <q-input
+                                  ref="dateRef"
+                                  outlined
+                                  dense
+                                  hide-bottom-space
+                                  :model-value="date != null ? date2Thai(date) : null"
+                                  label="วันที่รายงานตัว"
+                                >
+                                  <template v-slot:prepend>
+                                    <q-icon
+                                      name="event"
+                                      class="cursor-pointer"
+                                      style="color: var(--q-primary)"
+                                    >
+                                    </q-icon>
+                                  </template>
+                                </q-input>
+                              </template>
+                            </datepicker>
+                          </q-toolbar> -->
+                            <d-table
+                              ref="table"
+                              :columns="columnsPostition"
+                              :rows="rowsPosition"
+                              row-key="id"
+                              flat
+                              bordered
+                              :paging="true"
+                              dense
+                              :rows-per-page-options="[10, 25, 50, 100]"
+                              class="tableTb"
+                              selection="single"
+                              v-model:selected="selectedPos"
+                            >
+                              <template v-slot:header-selection="scope">
+                                <q-checkbox
+                                  keep-color
+                                  color="primary"
+                                  dense
+                                  v-model="scope.checkBox"
+                                />
+                              </template>
+                              <template v-slot:header="props">
+                                <q-tr :props="props">
+                                  <q-th auto-width />
+                                  <q-th
+                                    v-for="col in props.cols"
+                                    :key="col.name"
+                                    :props="props"
+                                  >
+                                    <span class="text-weight-medium">{{
+                                      col.label
+                                    }}</span>
+                                  </q-th>
+                                </q-tr>
+                              </template>
+                              <template v-slot:body="props">
+                                <q-tr :props="props" class="cursor-pointer">
+                                  <q-td>
+                                    <q-checkbox
+                                      keep-color
+                                      color="primary"
+                                      dense
+                                      v-model="props.selected"
+                                    />
+                                  </q-td>
+                                  <q-td
+                                    v-for="col in props.cols"
+                                    :key="col.name"
+                                    :props="props"
+                                  >
+                                    <div v-if="col.name == 'no'">
+                                      {{ props.rowIndex + 1 }}
+                                    </div>
+                                    <div v-else-if="col.name === 'posMasterNo'">
+                                      {{
+                                        props.row.isSit
+                                          ? col.value + " " + "(ทับที่)"
+                                          : col.value
+                                      }}
+                                    </div>
+
+                                    <div v-else>
+                                      {{ col.value ? col.value : "-" }}
+                                    </div>
+                                  </q-td>
+                                </q-tr>
+                              </template>
+                            </d-table>
+                          </div>
+                        </q-tab-panel>
+                      </q-tab-panels>
+                    </q-card>
+                  </div>
+                </div>
+              </q-tab-panel>
+            </q-tab-panels>
+          </q-card>
+        </div>
+      </q-card-section>
+      <q-separator />
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="บันทึก" color="secondary" @click="onClickSubmit"
+          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+        >
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped>
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
+</style>
diff --git a/src/modules/08_registryEmployee/components/DialogSendOrder.vue b/src/modules/08_registryEmployee/components/DialogSendOrder.vue
new file mode 100644
index 000000000..e7b788024
--- /dev/null
+++ b/src/modules/08_registryEmployee/components/DialogSendOrder.vue
@@ -0,0 +1,301 @@
+<script setup lang="ts">
+import { ref, watch, reactive } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { DataEmployee } from "@/modules/08_registryEmployee/interface/response/Employee";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+/** inportStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
+
+const $q = useQuasar();
+const {
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  dialogConfirm,
+  dialogMessageNotify,
+} = useCounterMixin();
+const { statusText } = useRegistryEmp();
+
+/**props*/
+const modal = defineModel<boolean>("modal", { required: true });
+
+const filter = ref<string>("");
+const rows = ref<DataEmployee[]>([]);
+const selected = ref<DataEmployee[]>([]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: (row) => rows.value.indexOf(row) + 1,
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: (row) => `${row.prefix}${row.firstName}  ${row.lastName}`,
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "draftOrganizationOrganization",
+    align: "left",
+    label: "หน่วยงานที่รับการบรรจุ",
+    sortable: true,
+    field: "draftOrganizationOrganization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "govAge",
+    align: "left",
+    label: "อายุราชการ(ปี)",
+    sortable: true,
+    field: "govAge",
+    format(val) {
+      return val;
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateEmployment",
+    align: "left",
+    label: "วันที่จ้าง",
+    sortable: true,
+    field: "dateEmployment",
+    format: (val) => date2Thai(val),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "salaryDate",
+    align: "left",
+    label: "วันที่แต่งตั้ง",
+    sortable: true,
+    field: "salaryDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "age",
+    align: "left",
+    label: "อายุ",
+    sortable: true,
+    field: "age",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    format(val) {
+      return date2Thai(val);
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateRetireLaw",
+    align: "left",
+    label: "วันที่พ้นราชการ",
+    sortable: true,
+    field: "dateRetireLaw",
+    format(val) {
+      return date2Thai(val);
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: (row) => statusText(row.draftOrgEmployeeStatus),
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const visibleColumns = ref<String[]>([
+  "no",
+  "citizenId",
+  "fullname",
+  "draftOrganizationOrganization",
+  "govAge",
+  "dateEmployment",
+  "age",
+  "createdAt",
+  "dateRetireLaw",
+  "statustext",
+]);
+
+function onClickSendOrder() {
+  if (selected.value.length == 0) {
+    dialogMessageNotify($q, "กรุณาเลือกคนออกคำสั่ง");
+  } else {
+    dialogConfirm(
+      $q,
+      () => {
+        closeDialog();
+      },
+      "ยื่นยันการส่งรายชื่อไปออกคำสั่ง",
+      "ต้องการยืนยันการส่งรายชื่อไปออกคำสั่งนี้หรือไม่ ?"
+    );
+  }
+}
+
+function fetchList() {
+  showLoader();
+  http
+    .get(config.API.registryNew("-employee") + `/temp`)
+    .then((res) => {
+      rows.value = res.data.result.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function closeDialog() {
+  modal.value = false;
+  selected.value = [];
+}
+
+watch(
+  () => modal.value,
+  () => {
+    modal.value && fetchList();
+  }
+);
+</script>
+
+<template>
+  <q-dialog v-model="modal">
+    <q-card style="width: 900px; max-width: 80vw">
+      <DialogHeader tittle="ส่งรายชื่อไปออกคำสั่ง" :close="closeDialog" />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                v-model="filter"
+                ref="filterRef"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumns"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columns"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+          <div class="col-12">
+            <d-table
+              :rows="rows"
+              :columns="columns"
+              :visible-columns="visibleColumns"
+              :filter="filter"
+              row-key="id"
+              selection="multiple"
+              v-model:selected="selected"
+            >
+              <template v-slot:header-selection="scope">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="scope.selected"
+                />
+              </template>
+              <template v-slot:body="props">
+                <q-tr :props="props" class="cursor-pointer">
+                  <q-td>
+                    <q-checkbox
+                      keep-color
+                      color="primary"
+                      dense
+                      v-model="props.selected"
+                    />
+                  </q-td>
+                  <q-td
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <div>
+                      {{
+                        col.value !== null && col.value !== "" ? col.value : "-"
+                      }}
+                    </div>
+                  </q-td>
+                </q-tr>
+              </template>
+            </d-table>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn
+          label="ส่งไปออกคำสั่ง"
+          @click="onClickSendOrder"
+          color="public"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/08_registryEmployee/interface/index/Main.ts b/src/modules/08_registryEmployee/interface/index/Main.ts
index e4ea7770c..cd3e838e8 100644
--- a/src/modules/08_registryEmployee/interface/index/Main.ts
+++ b/src/modules/08_registryEmployee/interface/index/Main.ts
@@ -1 +1,12 @@
-export type {};
+interface DataOption {
+  id: string;
+  name: string;
+}
+interface NewPagination {
+  descending: boolean;
+  page: number;
+  rowsPerPage: number;
+  sortBy: string;
+}
+
+export type { DataOption, NewPagination };
diff --git a/src/modules/08_registryEmployee/interface/request/Employee.ts b/src/modules/08_registryEmployee/interface/request/Employee.ts
new file mode 100644
index 000000000..ff88efc68
--- /dev/null
+++ b/src/modules/08_registryEmployee/interface/request/Employee.ts
@@ -0,0 +1,18 @@
+interface FormDataEmployee {
+  citizenId: string;
+  prefix: string;
+  rank: string;
+  firstName: string;
+  lastName: string;
+  birthDate: any;
+  gender: string;
+  relationship: string;
+  nationality: string;
+  ethnicity: string;
+  religion: string;
+  bloodGroup: string;
+  phone: string;
+  employeeClass: string;
+}
+
+export type { FormDataEmployee };
diff --git a/src/modules/08_registryEmployee/interface/response/Employee.ts b/src/modules/08_registryEmployee/interface/response/Employee.ts
new file mode 100644
index 000000000..44e1f885a
--- /dev/null
+++ b/src/modules/08_registryEmployee/interface/response/Employee.ts
@@ -0,0 +1,119 @@
+interface DataEmployee {
+  age: string;
+  child1: null | string;
+  child1Id: null | string;
+  child1ShortName: null | string;
+  child2: null | string;
+  child2Id: null | string;
+  child2ShortName: null | string;
+  child3: null | string;
+  child3Id: null | string;
+  child3ShortName: null | string;
+  child4: null | string;
+  child4Id: null | string;
+  child4ShortName: null | string;
+  citizenId: string;
+  createdAt: string;
+  dateAppoint: null | string;
+  dateRetireLaw: string;
+  dateStart: null | string;
+  draftOrgEmployeeStatus: string;
+  draftOrganizationOrganization: string;
+  draftPositionEmployee: string;
+  employeeClass: string;
+  firstName: string;
+  govAge: number;
+  id: string;
+  lastName: string;
+  node: null | string;
+  nodeId: null | string;
+  nodeName: null | string;
+  nodeShortName: null | string;
+  posLevel: number;
+  posLevelId: string;
+  posNo: string;
+  posType: string;
+  posTypeId: string;
+  posTypeShortName: string;
+  position: string;
+  prefix: string;
+  rank: string;
+  root: string;
+  rootId: string;
+  rootShortName: string;
+}
+
+interface ResOptionPerson {
+  createdAt: string;
+  createdFullName: "สาวิตรี ศรีสมัย";
+  createdUserId: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  name: string;
+}
+
+interface PositionNo {
+  id: string;
+  isPosition: boolean;
+  isSit: boolean;
+  node: number;
+  nodeId: string;
+  orgChild1Id: null | string;
+  orgChild2Id: null | string;
+  orgChild3Id: null | string;
+  orgChild4Id: null | string;
+  orgRootId: string;
+  orgShortname: string;
+  posLevelId: string;
+  posLevelName: number;
+  posMasterNo: number;
+  posMasterNoPrefix: null | string;
+  posMasterNoSuffix: null | string;
+  posTypeId: string;
+  posTypeName: string;
+  positionIsSelected: boolean;
+  positionName: string;
+  position: Position[];
+}
+
+interface TreeMain {
+  children: TreeMain[]; // ปรับเป็นชนิดข้อมูลที่ถูกต้องตามโครงสร้างของ children ถ้าเป็นไปได้
+  orgCode: string;
+  orgLevel: number;
+  orgName: string;
+  orgRevisionId: string;
+  orgRootName: string;
+  orgTreeCode: string;
+  orgTreeFax: string;
+  orgTreeId: string;
+  orgTreeName: string;
+  orgTreeOrder: number;
+  orgTreePhoneEx: string;
+  orgTreePhoneIn: string;
+  orgTreeRank: string;
+  orgTreeShortName: string;
+  totalPosition: number;
+  totalPositionCurrentUse: number;
+  totalPositionCurrentVacant: number;
+  totalPositionNextUse: number;
+  totalPositionNextVacant: number;
+  totalRootPosition: number;
+  totalRootPositionCurrentUse: number;
+  totalRootPositionCurrentVacant: number;
+  totalRootPositionNextUse: number;
+  totalRootPositionNextVacant: number;
+}
+
+interface Position {
+  id: string;
+  posLevelId: string;
+  posLevelName: number;
+  posTypeId: string;
+  posTypeName: string;
+  positionIsSelected: boolean;
+  positionName: string;
+}
+
+export type { DataEmployee, ResOptionPerson, PositionNo, TreeMain, Position };
diff --git a/src/modules/08_registryEmployee/router.ts b/src/modules/08_registryEmployee/router.ts
index 4f0173a0d..e2e718e00 100644
--- a/src/modules/08_registryEmployee/router.ts
+++ b/src/modules/08_registryEmployee/router.ts
@@ -4,14 +4,17 @@ import { defineAsyncComponent } from "vue";
 const Main = defineAsyncComponent(
   () => import("@/modules/08_registryEmployee/views/Main.vue")
 );
-
-const CreateEmployee = defineAsyncComponent(
-  () => import("@/modules/08_registryEmployee/views/Add.vue")
+const DetailView = defineAsyncComponent(
+  () => import("@/modules/08_registryEmployee/views/DetailView.vue")
 );
 
-const EditDetail = defineAsyncComponent(
-  () => import("@/modules/08_registryEmployee/views/EditDetail.vue")
-);
+// const CreateEmployee = defineAsyncComponent(
+//   () => import("@/modules/08_registryEmployee/views/Add.vue")
+// );
+
+// const EditDetail = defineAsyncComponent(
+//   () => import("@/modules/08_registryEmployee/views/EditDetail.vue")
+// );
 
 export default [
   {
@@ -25,23 +28,33 @@ export default [
     },
   },
   {
-    path: "/registry-employee/add",
-    name: "registryEmployeeAdd",
-    component: CreateEmployee,
-    meta: {
-      Auth: true,
-      Key: [11],
-      Role: "registryEmployee",
-    },
-  },
-  {
-    path: "/registry-employee/edit/:id",
-    name: "registryEmployeeEdit",
-    component: EditDetail,
+    path: "/registry-employee/:id",
+    name: "registry-employeeId",
+    component: DetailView,
     meta: {
       Auth: true,
       Key: [11],
       Role: "registryEmployee",
     },
   },
+  // {
+  //   path: "/registry-employee/add",
+  //   name: "registryEmployeeAdd",
+  //   component: CreateEmployee,
+  //   meta: {
+  //     Auth: true,
+  //     Key: [11],
+  //     Role: "registryEmployee",
+  //   },
+  // },
+  // {
+  //   path: "/registry-employee/edit/:id",
+  //   name: "registryEmployeeEdit",
+  //   component: EditDetail,
+  //   meta: {
+  //     Auth: true,
+  //     Key: [11],
+  //     Role: "registryEmployee",
+  //   },
+  // },
 ];
diff --git a/src/modules/08_registryEmployee/stores/registry-employee.ts b/src/modules/08_registryEmployee/stores/registry-employee.ts
new file mode 100644
index 000000000..dfaca7844
--- /dev/null
+++ b/src/modules/08_registryEmployee/stores/registry-employee.ts
@@ -0,0 +1,57 @@
+import { defineStore } from "pinia";
+
+export const useRegistryEmp = defineStore("registry-employee", () => {
+  /**
+   * function คำนวณหาอายุ
+   * @param birthDate วันเกิด
+   * @returns อายุ
+   */
+  function calculateAge(birthDate: Date | null) {
+    if (!birthDate) return null;
+    const birthDateTimeStamp = new Date(birthDate).getTime();
+    const now = new Date();
+    const diff = now.getTime() - birthDateTimeStamp;
+
+    const ageDate = new Date(diff);
+    const years = ageDate.getUTCFullYear() - 1970;
+    const months = ageDate.getUTCMonth();
+    const days = ageDate.getUTCDate() - 1;
+    const retire = new Date(birthDate);
+    retire.setFullYear(retire.getFullYear() + 60);
+    //   retireDate.value = retire;
+
+    if (years > 60) {
+      return "อายุเกิน 60 ปี";
+    }
+
+    return `${years} ปี ${months} เดือน ${days} วัน`;
+  }
+
+  /**
+   *  function convertstatus
+   * @param val ค่าสภานะ
+   * @returns textStatus
+   */
+  const statusText = (val: string) => {
+    switch (val) {
+      case "WAITTING":
+        return "รอดำเนินการ";
+      case "REPORT":
+        return "เลือกตำแหน่งแล้ว";
+      case "APPROVE":
+        return "อนุมัติ";
+      case "REJECT":
+        return "ไม่อนุมัติ";
+      case "REPORT":
+        return "ส่งรายชื่อไปออกคำสั่ง";
+      case "DONE":
+        return "ออกคำสั่งเสร็จแล้ว";
+      default:
+        return "-";
+    }
+  };
+  return {
+    calculateAge,
+    statusText,
+  };
+});
diff --git a/src/modules/08_registryEmployee/views/DetailView.vue b/src/modules/08_registryEmployee/views/DetailView.vue
new file mode 100644
index 000000000..f677ffc94
--- /dev/null
+++ b/src/modules/08_registryEmployee/views/DetailView.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import View from "@/modules/04_registryNew/views/detailView.vue";
+</script>
+
+<template>
+  <View />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index bfbd77bf1..c9dd8af11 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -1,85 +1,76 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import type { QInput, QTableProps } from "quasar";
+import { ref, onMounted, reactive, watch } from "vue";
+import { date, useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import { useRegistryEmployeeDataStore } from "@/modules/08_registryEmployee/store";
+/** importType*/
+import type { QInput, QTableProps } from "quasar";
+import type { NewPagination } from "@/modules/08_registryEmployee/interface/index/Main";
+import type { DataEmployee } from "@/modules/08_registryEmployee/interface/response/Employee";
 
-import type {
-  FormRegistryEmployee,
-  ResponseEmployeeTemp,
-} from "@/modules/08_registryEmployee/interface/request/Main";
-import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
-import DialogSendToCommand from "@/modules/08_registryEmployee/components/DialogSendToCommand.vue";
+/** importComponents*/
+import DialogAddEmployee from "@/modules/08_registryEmployee/components/DialogAddEmployee.vue";
+import DialogSelectPos from "@/modules/08_registryEmployee/components/DialogSelectPos.vue";
+import DialogSendOrder from "@/modules/08_registryEmployee/components/DialogSendOrder.vue";
 
-// store convert status text
-const dataStore = useRegistryEmployeeDataStore();
-const { statusText } = dataStore;
+/** inportStore*/
+import { useCounterMixin } from "@/stores/mixin";
+import { useRegistryEmp } from "@/modules/08_registryEmployee/stores/registry-employee";
 
 const $q = useQuasar();
-const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const router = useRouter();
 const {
-  typeRetire,
   success,
   messageError,
   showLoader,
   hideLoader,
   date2Thai,
   dialogRemove,
-  dialogConfirm,
-  dialogMessageNotify,
-} = mixin; //ฟังก์ชันกลางที่ใช้ในหน้านี้
+} = useCounterMixin();
+const { statusText } = useRegistryEmp();
 
-const router = useRouter();
-const filterRef = ref<any>(null);
 const filter = ref<string>("");
-const id = ref<string>("");
 
-// visible columns ตารางในหน้าหลัก
-const visibleColumnsEmployeeTemp = ref<String[]>([
-  "no",
-  "fullname",
-  "fullnameOld",
-  "oc",
-  "positionEmployeePosition",
-  "positionEmployeePositionSide",
-  "positionLine",
-  "govAge",
-  "positionEmployeeGroup",
-  "dateAppoint",
-  "refSalary",
-  "dateStart",
-  "createdAt",
-  "salaryDate",
-  "age",
-  "amount",
-  "statustext",
-  "leaveDateOrder",
-  "draftOrganizationOrganization",
-  "currentAgency",
-]);
+/** Table*/
+const rows = ref<DataEmployee[]>([]);
+const maxPage = ref<number>(0);
+const total = ref<number>(0);
+const queryParams = reactive({
+  page: 1,
+  pageSize: 10,
+  type: "temp",
+});
 
-// คอลัมน์ตารางในหน้าหลัก
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
     align: "left",
     label: "ลำดับ",
     sortable: false,
-    field: "no",
+    field: (row) =>
+      (queryParams.page - 1) * queryParams.pageSize +
+      rows.value.indexOf(row) +
+      1,
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "citizenId",
+    align: "left",
+    label: "เลขประจำตัวประชาชน",
+    sortable: true,
+    field: "citizenId",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
   {
     name: "fullname",
     align: "left",
     label: "ชื่อ-นามสกุล",
     sortable: true,
-    field: "fullname",
+    field: (row) => `${row.prefix}${row.firstName}  ${row.lastName}`,
     headerStyle: "font-size: 14px; min-width: 200px",
     style: "font-size: 14px; ",
   },
@@ -91,72 +82,48 @@ const columns = ref<QTableProps["columns"]>([
     field: "draftOrganizationOrganization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    // sort: (a: string, b: string) =>
-    //   a.localeCompare(b, undefined, {
-    //     numeric: true,
-    //     sensitivity: "base",
-    //   }),
   },
   {
-    name: "currentAgency",
+    name: "draftPositionEmployee",
     align: "left",
-    label: "หน่วยงานปัจจุบัน",
+    label: "หน่วยงานที่บรรจุ",
     sortable: true,
-    field: "currentAgency",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "amount",
-    align: "left",
-    label: "ค่าจ้าง",
-    sortable: true,
-    field: "amount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
+    field: "draftPositionEmployee",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
   },
+
   {
     name: "govAge",
     align: "left",
     label: "อายุราชการ(ปี)",
     sortable: true,
     field: "govAge",
+    format(val) {
+      return val;
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    // sort: (a: string, b: string) =>
-    //   a.localeCompare(b, undefined, {
-    //     numeric: true,
-    //     sensitivity: "base",
-    //   }),
   },
   {
-    name: "dateAppoint",
+    name: "dateEmployment",
     align: "left",
     label: "วันที่จ้าง",
     sortable: true,
-    field: "dateAppoint",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "dateStart",
-    align: "left",
-    label: "วันที่เริ่มปฎิบัติราชการ",
-    sortable: true,
-    field: "dateStart",
+    field: "dateEmployment",
+    format: (val) => date2Thai(val),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  // {
+  //   name: "dateStart",
+  //   align: "left",
+  //   label: "วันที่เริ่มปฎิบัติราชการ",
+  //   sortable: true,
+  //   field: "dateStart",
+  //   headerStyle: "font-size: 14px",
+  //   style: "font-size: 14px",
+  // },
   {
     name: "salaryDate",
     align: "left",
@@ -166,15 +133,6 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
-    name: "refSalary",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "refSalary",
-    headerStyle: "font-size: 14px; min-width: 200px",
-    style: "font-size: 14px; ",
-  },
   {
     name: "age",
     align: "left",
@@ -183,20 +141,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "age",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-  },
-  {
-    name: "fullnameOld",
-    align: "left",
-    label: "ชื่อ-นามสกุล(เดิม)",
-    sortable: true,
-    field: "fullnameOld",
-    headerStyle: "font-size: 14px; min-width: 200px",
-    style: "font-size: 14px; ",
   },
   {
     name: "createdAt",
@@ -204,15 +148,21 @@ const columns = ref<QTableProps["columns"]>([
     label: "วันที่สร้าง",
     sortable: true,
     field: "createdAt",
+    format(val) {
+      return date2Thai(val);
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "leaveDateOrder",
+    name: "dateRetireLaw",
     align: "left",
     label: "วันที่พ้นราชการ",
     sortable: true,
-    field: "leaveDateOrder",
+    field: "dateRetireLaw",
+    format(val) {
+      return date2Thai(val);
+    },
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -221,438 +171,105 @@ const columns = ref<QTableProps["columns"]>([
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "statustext",
+    field: (row) => statusText(row.draftOrgEmployeeStatus),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
   },
 ]);
+const visibleColumns = ref<String[]>([
+  "no",
+  "citizenId",
+  "fullname",
+  "draftOrganizationOrganization",
+  "draftPositionEmployee",
+  "govAge",
+  "dateEmployment",
+  // "dateStart",
+  "age",
+  "createdAt",
+  "dateRetireLaw",
+  "statustext",
+]);
 
-onMounted(async () => {
-  await nodeTree();
+/**
+ * function updatePagination
+ * @param newPagination ข้อมูล Pagination ใหม่
+ */
+function updatePagination(newPagination: NewPagination) {
+  queryParams.page = 1;
+  queryParams.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => queryParams.pageSize,
+  () => {
+    fetchList();
+  }
+);
+
+function fetchList() {
+  showLoader();
+  http
+    .get(config.API.registryNew("-employee"), { params: queryParams })
+    .then((res) => {
+      maxPage.value = Math.ceil(res.data.result.total / queryParams.pageSize);
+      total.value = res.data.result.total;
+      rows.value = res.data.result.data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onClickDelete(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.registryNew("-employee") + `/${id}`)
+      .then(() => {
+        success($q, "ลบข้อมูลสำเร็จ");
+        fetchList();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+function redirectToPageDetail(id: string) {
+  router.push(`/registry-employee/${id}`);
+}
+
+/** เพิ่มข้อมูลลูกจ้างชั่วคราว*/
+const modalAddEmployee = ref<boolean>(false);
+
+function onClickAddEmployee() {
+  modalAddEmployee.value = true;
+}
+
+/** เกำหนดตำแหน่ง */
+const modalPos = ref<boolean>(false);
+const dataRow = ref<DataEmployee>();
+function onClickSelectPos(data: DataEmployee) {
+  modalPos.value = true;
+  dataRow.value = data;
+}
+
+/** ส่งไปออกคำสั่ง*/
+const modalSendOrder = ref<boolean>(false);
+function onClickSendOrder() {
+  modalSendOrder.value = true;
+}
+
+onMounted(() => {
+  fetchList();
 });
-
-// ฟังก์ชั่นเช็คค่า guid แปลงเป็นค่า null
-const checkNull = (text: string) =>
-  text == null
-    ? ""
-    : text == "00000000-0000-0000-0000-000000000000"
-    ? ""
-    : text;
-
-// คลิก icon ส่งไปออกคำสั่ง (เปิด dialog)
-const modaladdOrder = ref<boolean>(false); // dialog ส่งไปออกคำสั่ง
-const clickAddOrder = () => {
-  modaladdOrder.value = true;
-};
-
-// ปิด dialog ส่งไปออกคำสั่ง
-const clickCloseSendModal = () => {
-  modaladdOrder.value = false;
-};
-
-const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
-
-//รีเซ็ตค่าในช่องค้นหา
-const Reset = () => {
-  emit("update:filterKeyword2", "");
-};
-
-const updateInput = (value: any) => {
-  emit("update:filterKeyword2", value);
-};
-
-const resetFilter = () => {
-  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
-  filter.value = "";
-  filterRef.value!.focus();
-  filterKeyword2.value = "";
-};
-
-// เพิ่มข้อมูลลูกจ้าง
-const clickAdd = () => {
-  router.push(`/registry-employee/add`);
-};
-
-// ดูรายการแก้ไขรายชื่อ
-const redirectToPage = (id?: string, status?: string) => {
-  if (!(status == "REPORT" || status == "DONE")) {
-    router.push(`/registry-employee/edit/${id}`);
-  }
-};
-
-// ยืนยันการลบรายการข้อมูลในตาราง
-const clickDelete = (id: string) => {
-  dialogRemove($q, async () => await deleteData(id));
-};
-
-// ลบรายการข้อมูลในตาราง
-const deleteData = async (id: string) => {
-  showLoader();
-  await http
-    .delete(config.API.profileInforId(id))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-      showEmployeeTemp();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-// **** เริ่มในส่วนของการเลือกตำแหน่ง ***//
-const rowsPosition = ref<any>([]); // รายการข้อมูลในตารางกำหนดตำแหน่ง
-const filters = ref<FormRegistryEmployee[]>([]);
-const filterKeyword2 = ref<any>("");
-const modal = ref<boolean>(false); // เปิด-ปิด dialod กำหนดตำแหน่ง
-const selectedPosition = ref<any>([]); // เก็บตำแหน่งที่เลือก
-
-// visible คอลัมน์ในส่วนกำหนดตำแหน่ง
-const visibleColumnsPosition = ref<String[]>([
-  "organizationOrganizationName",
-  "organizationAgencyName",
-  "organizationGovernmentAgencyName",
-  "organizationShortNameName",
-  "organizationTypeName",
-  "organizationLevelName",
-  "positionEmployeeLineName",
-  "positionEmployeePositionName",
-  "posNo",
-]);
-
-// คอลัมน์ในส่วนกำหนดตำแหน่ง
-const columnsPosition = ref<QTableProps["columns"]>([
-  {
-    name: "organizationOrganizationName",
-    align: "left",
-    label: "หน่วยงาน",
-    sortable: true,
-    field: "organizationOrganizationName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organizationAgencyName",
-    align: "left",
-    label: "รหัสหน่วยงาน",
-    sortable: true,
-    field: "organizationAgencyName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organizationGovernmentAgencyName",
-    align: "left",
-    label: "รหัสส่วนราชการ",
-    sortable: true,
-    field: "organizationGovernmentAgencyName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organizationShortNameName",
-    align: "left",
-    label: "ชื่อย่อหน่วยงาน",
-    sortable: true,
-    field: "organizationShortNameName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organizationTypeName",
-    align: "left",
-    label: "ประเภทหน่วยงาน",
-    sortable: true,
-    field: "organizationTypeName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "organizationLevelName",
-    align: "left",
-    label: "ระดับหน่วยงาน",
-    sortable: true,
-    field: "organizationLevelName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionEmployeeLineName",
-    align: "left",
-    label: "สายงาน",
-    sortable: true,
-    field: "positionEmployeeLineName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "positionEmployeePositionName",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "positionEmployeePositionName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "posNo",
-    align: "left",
-    label: "เลขที่ตำแหน่ง",
-    sortable: true,
-    field: "posNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-
-// ยืนยันการกำหนดตำแหน่ง
-const checkSave = () => {
-  dialogConfirm($q, async () => await saveData());
-};
-
-// เช็คข้อมูลก่อนบันทึกการกำหนดตำแหน่ง
-const saveData = async () => {
-  if (selectedPosition.value.length == 0) {
-    dialogMessageNotify($q, "ไม่สามารถบันทึกข้อมูลได้ กรุณาเลือกตำแหน่ง");
-    return;
-  } else {
-    await savePosition();
-  }
-};
-
-// บันทึกการกำหนดตำแหน่ง
-const savePosition = async () => {
-  showLoader();
-  const data = {
-    organizationEmployeeId: selectedPosition.value[0].id,
-  };
-  await http
-    .put(config.API.organizationEmployeePositionId(id.value), data)
-    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      await nodeTree();
-      modalOpenClose();
-    });
-};
-
-// ปิด dialog กำหนดตำแหน่ง
-const modalOpenClose = () => {
-  modal.value = !modal.value;
-  if (!modal.value) {
-    selectedPosition.value = [];
-    rowsPosition.value = [];
-    id.value = "";
-  }
-};
-
-// คลิกกำหนดตำแหน่ง
-const editDetail = async (row: any) => {
-  await getPosition(row.id);
-  id.value = row.id;
-};
-
-// ดึงข้อมูลตำแหน่ง
-const getPosition = async (id: string) => {
-  showLoader();
-  await http
-    .get(config.API.organizationEmployeePositionId(id))
-    .then((res) => {
-      const { result } = res.data;
-      let data: any[] = [];
-      result.map((r: any) => {
-        data.push({
-          id: checkNull(r.id),
-          agency: checkNull(r.agency),
-          conditionNote: checkNull(r.conditionNote),
-          department: checkNull(r.department),
-          government: checkNull(r.government),
-          isActive: r.isActive,
-          isCondition: r.isCondition,
-          isDirector: r.isDirector,
-          organizationUserNote: checkNull(r.organizationUserNote),
-          qualification: checkNull(r.qualification),
-          pile: checkNull(r.pile),
-          posNo: checkNull(r.posNo),
-          positionCondition: checkNull(r.positionCondition),
-          positionMasterUserNote: checkNull(r.positionMasterUserNote),
-          organizationOrder: checkNull(r.organizationOrder),
-          organizationFaxId: checkNull(r.organizationFaxId),
-          organizationLevelId: checkNull(r.organizationLevelId),
-          organizationOrganizationId: checkNull(r.organizationOrganizationId),
-          organizationTelExternalId: checkNull(r.organizationTelExternalId),
-          organizationTelInternalId: checkNull(r.organizationTelInternalId),
-          organizationTypeId: checkNull(r.organizationTypeId),
-          positionEmployeeStatusId: checkNull(r.positionEmployeeStatusId),
-          positionEmployeeLineId: checkNull(r.positionEmployeeLineId),
-          positionEmployeePositionId: checkNull(r.positionEmployeePositionId),
-          organizationAgencyId: checkNull(r.organizationAgencyId),
-          organizationGovernmentAgencyId: checkNull(
-            r.organizationGovernmentAgencyId
-          ),
-          organizationShortNameId: checkNull(r.organizationShortNameId),
-          organizationFaxName: checkNull(r.organizationFaxName),
-          organizationLevelName: checkNull(r.organizationLevelName),
-          organizationOrganizationName: checkNull(
-            r.organizationOrganizationName
-          ),
-          organizationTelExternalName: checkNull(r.organizationTelExternalName),
-          organizationTelInternalName: checkNull(r.organizationTelInternalName),
-          organizationTypeName: checkNull(r.organizationTypeName),
-          positionEmployeeStatusName: checkNull(r.positionEmployeeStatusName),
-          positionEmployeeLineName: checkNull(r.positionEmployeeLineName),
-          positionEmployeePositionName: checkNull(
-            r.positionEmployeePositionName
-          ),
-          organizationAgencyName: checkNull(r.organizationAgencyName),
-          organizationGovernmentAgencyName: checkNull(
-            r.organizationGovernmentAgencyName
-          ),
-          organizationShortNameName: checkNull(r.organizationShortNameName),
-          positionEmployeeLevels: r.positionEmployeeLevels,
-          positionEmployeePositionSides: r.positionEmployeePositionSides,
-          use: r.use,
-        });
-      });
-
-      const index = data.findIndex((r: any) => r.use == true);
-      if (index >= 0) {
-        selectedPosition.value = [data[index]];
-      }
-
-      rowsPosition.value = data;
-      modal.value = true;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
-
-// ดึงข้อมูลตำแหน่ง (root tree)
-const selected = ref([]);
-const nodeTree = async () => {
-  showLoader();
-  await http
-    .get(config.API.profileOrganizRoot)
-    .then((res: any) => {
-      const data = res.data.result;
-      if (data.length > 0) {
-        selected.value = data[0].id;
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      hideLoader();
-      await showEmployeeTemp();
-    });
-};
-// **** จบส่วนของการเลือกตำแหน่ง ***//
-
-// ดึงรายการข้อมูลมา mapping แสดงในตาราง
-const rows = ref<FormRegistryEmployee[]>([]);
-const showEmployeeTemp = async () => {
-  showLoader();
-
-  let cirteria = [
-    {
-      criteriaType: "employee_class",
-      criteriaValue: "temp",
-    },
-    {
-      criteriaType: "is_retire",
-      criteriaValue: "false",
-    },
-  ];
-
-  if (selected.value == null) return;
-  await http
-    .post(config.API.searchProfileTemp("all"), {
-      criterias: cirteria,
-    })
-    .then((res) => {
-      const data = res.data.result;
-      rows.value = [];
-      filters.value = [];
-      let list: FormRegistryEmployee[] = [];
-      data.map((e: ResponseEmployeeTemp) => {
-        list.push({
-          id: e.id,
-          fullname: e.fullname,
-          fullnameOld: e.fullnameOld,
-          position: e.position,
-          positionPathSide: e.positionPathSide,
-          positionLine: e.positionLine,
-          govAge: e.govAge,
-          positionEmployeePosition: e.positionEmployeePosition,
-          positionEmployeePositionSide: e.positionEmployeePositionSide,
-          positionEmployeeGroup: e.positionEmployeeGroup,
-          oc: e.oc,
-          age: e.age,
-          amount: e.amount == null ? "" : e.amount.toLocaleString(),
-          refSalary: e.refSalary,
-          dateAppoint:
-            e.dateAppoint == null ? null : date2Thai(new Date(e.dateAppoint)),
-          dateStart:
-            e.dateStart == null ? null : date2Thai(new Date(e.dateStart)),
-          createdAt:
-            e.createdAt == null ? null : date2Thai(new Date(e.createdAt)),
-          isLeave: e.isLeave == false ? "ครอง" : `${typeRetire(e.leaveReason)}`,
-          leaveDateOrder:
-            e.leaveDateOrder == null
-              ? null
-              : date2Thai(new Date(e.leaveDateOrder)),
-          newAgency: "",
-          currentAgency: "",
-          draftPositionEmployee: e.draftPositionEmployee,
-          draftOrganizationOrganization: e.draftOrganizationOrganization,
-          status: e.draftOrgEmployeeStatus ?? "",
-          statustext: statusText(e.draftOrgEmployeeStatus ?? ""),
-        });
-      });
-      rows.value = list;
-      filters.value = list;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
 </script>
 
 <template>
@@ -661,7 +278,13 @@ const showEmployeeTemp = async () => {
   </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-btn
+        flat
+        round
+        color="primary"
+        icon="mdi-plus"
+        @click="onClickAddEmployee"
+      >
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
       <q-btn
@@ -669,7 +292,7 @@ const showEmployeeTemp = async () => {
         round
         color="primary"
         icon="mdi-account-arrow-right"
-        @click="clickAddOrder"
+        @click="onClickSendOrder"
       >
         <q-tooltip>ส่งรายชื่อไปออกคำสั่ง</q-tooltip>
       </q-btn>
@@ -689,17 +312,12 @@ const showEmployeeTemp = async () => {
         >
           <template v-slot:append>
             <q-icon v-if="filter == ''" name="search" />
-            <q-icon
-              v-if="filter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="resetFilter"
-            />
+            <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" />
           </template>
         </q-input>
         <!-- แสดงคอลัมน์ใน table -->
         <q-select
-          v-model="visibleColumnsEmployeeTemp"
+          v-model="visibleColumns"
           :display-value="$q.lang.table.columns"
           multiple
           outlined
@@ -718,9 +336,11 @@ const showEmployeeTemp = async () => {
       <d-table
         :rows="rows"
         :columns="columns"
-        :visible-columns="visibleColumnsEmployeeTemp"
+        :visible-columns="visibleColumns"
         :filter="filter"
         row-key="id"
+        :rows-per-page-options="[10, 25, 50, 100]"
+        @update:pagination="updatePagination"
       >
         <template v-slot:header="props">
           <q-tr :props="props">
@@ -732,151 +352,45 @@ const showEmployeeTemp = async () => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td
-              key="no"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.rowIndex + 1 }}
-            </q-td>
-            <q-td
-              key="fullname"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.fullname }}
-            </q-td>
-            <q-td
-              key="draftOrganizationOrganization"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              <div
-                class="col-12"
-                v-if="
-                  props.row.draftOrganizationOrganization == null &&
-                  props.row.draftPositionEmployee == null
-                "
-              >
-                <div class="text-weight-medium">
-                  {{ "-" }}
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <template v-if="col.name === 'draftOrganizationOrganization'">
+                <div
+                  v-if="
+                    props.row.orgName !== null ||
+                    props.row.positionPath !== null
+                  "
+                >
+                  <div class="col-4">
+                    <div class="text-weight-medium">
+                      {{ props.row.root !== null ? props.row.root : "-" }}
+                      {{
+                        props.row.rootShortName !== null
+                          ? `(${props.row.rootShortName})`
+                          : ""
+                      }}
+                    </div>
+                    <div class="text-weight-light">
+                      {{
+                        props.row.nodeName !== null ? props.row.nodeName : ""
+                      }}
+                      {{
+                        props.row.nodeShortName !== null
+                          ? `(${props.row.nodeShortName}${props.row.posNo})`
+                          : ""
+                      }}
+                    </div>
+                  </div>
                 </div>
-              </div>
-              <div class="col-12" v-else>
-                <div class="text-weight-medium">
-                  {{ props.row.draftOrganizationOrganization ?? "-" }}
-                </div>
-                <div class="text-weight-light">
-                  {{ props.row.draftPositionEmployee ?? "-" }}
-                </div>
-              </div>
-            </q-td>
-            <q-td
-              key="currentAgency"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              <div
-                class="col-12"
-                v-if="props.row.oc == null && props.row.position == null"
-              >
-                <div class="text-weight-medium">
-                  {{ "-" }}
-                </div>
-              </div>
-              <div class="col-12" v-else>
-                <div class="text-weight-medium">
-                  {{ props.row.oc ?? "-" }}
-                </div>
-                <div class="text-weight-light">
-                  {{ props.row.position ?? "-" }}
-                </div>
-              </div>
-            </q-td>
-            <q-td
-              key="amount"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.amount }}
-            </q-td>
-            <q-td
-              key="govAge"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.govAge }}
-            </q-td>
-            <q-td
-              key="dateAppoint"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.dateAppoint }}
-            </q-td>
-            <q-td
-              key="dateStart"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.dateStart }}
-            </q-td>
-            <q-td
-              key="salaryDate"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.salaryDate }}
-            </q-td>
-            <q-td
-              key="refSalary"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.refSalary }}
-            </q-td>
-            <q-td
-              key="age"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.age }}
-            </q-td>
-            <q-td
-              key="fullnameOld"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.fullnameOld }}
-            </q-td>
-            <q-td
-              key="createdAt"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.createdAt }}
-            </q-td>
-            <q-td
-              key="isLeave"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.isLeave }}
-            </q-td>
 
-            <q-td
-              key="leaveDateOrder"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.leaveDateOrder }}
-            </q-td>
-            <q-td
-              key="statustext"
-              :props="props"
-              @click="redirectToPage(props.row.id, props.row.status)"
-            >
-              {{ props.row.statustext }}
+                <div v-else>
+                  <div class="col-4">
+                    <div class="text-weight-medium">-</div>
+                  </div>
+                </div>
+              </template>
+              <div v-else>
+                {{ col.value !== null && col.value !== "" ? col.value : "-" }}
+              </div>
             </q-td>
             <q-td auto-width>
               <q-btn
@@ -892,11 +406,11 @@ const showEmployeeTemp = async () => {
                     <q-item
                       clickable
                       v-close-popup
-                      @click="editDetail(props.row)"
-                      :disable="
-                        props.row.status == 'REPORT' ||
-                        props.row.status == 'DONE'
+                      v-if="
+                        props.row.draftOrgEmployeeStatus === null ||
+                        props.row.draftOrgEmployeeStatus === 'REPORT'
                       "
+                      @click.pervent="onClickSelectPos(props.row)"
                     >
                       <q-item-section
                         style="min-width: 0px"
@@ -904,43 +418,39 @@ const showEmployeeTemp = async () => {
                         class="q-py-sm"
                       >
                         <q-icon
-                          :color="
-                            props.row.status == 'REPORT' ||
-                            props.row.status == 'DONE'
-                              ? 'grey'
-                              : 'blue'
-                          "
+                          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(props.row.id)"
-                      :disable="
-                        props.row.status == 'REPORT' ||
-                        props.row.status == 'DONE'
-                      "
+                      @click.pervent="redirectToPageDetail(props.row.id)"
                     >
                       <q-item-section
                         style="min-width: 0px"
                         avatar
                         class="q-py-sm"
                       >
-                        <q-icon
-                          :color="
-                            props.row.status == 'REPORT' ||
-                            props.row.status == 'DONE'
-                              ? 'grey'
-                              : 'red-7'
-                          "
-                          size="xs"
-                          name="mdi-delete"
-                        />
+                        <q-icon color="primary" size="xs" name="mdi-account" />
+                      </q-item-section>
+                      <q-item-section>แก้ไขข้อมูล</q-item-section>
+                    </q-item>
+                    <q-separator />
+                    <q-item
+                      clickable
+                      v-close-popup
+                      @click.pervent="onClickDelete(props.row.id)"
+                    >
+                      <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>
@@ -952,94 +462,31 @@ const showEmployeeTemp = async () => {
             </q-td>
           </q-tr>
         </template>
+        <template v-slot:pagination="scope">
+          ทั้งหมด {{ total }} รายการ
+          <q-pagination
+            v-model="queryParams.page"
+            active-color="primary"
+            color="dark"
+            :max="Number(maxPage)"
+            size="sm"
+            boundary-links
+            direction-links
+            :max-pages="5"
+            @update:model-value="fetchList"
+          ></q-pagination>
+        </template>
       </d-table>
     </div>
   </q-card>
 
-  <q-dialog v-model="modal" persistent>
-    <q-card style="width: 70vw; max-width: 70vw">
-      <DialogHeader tittle="กำหนดตำแหน่ง" :close="modalOpenClose" />
-      <q-separator />
-      <q-card-section class="q-pa-sm">
-        <div class="row justify-end">
-          <div class="col-5">
-            <q-toolbar style="padding: 0">
-              <q-input
-                borderless
-                outlined
-                dense
-                ref="filterRef"
-                debounce="300"
-                v-model="filterKeyword2"
-                placeholder="ค้นหา"
-                style="width: 850px; max-width: auto"
-              >
-                <template v-slot:append>
-                  <q-icon v-if="filterKeyword2 == ''" name="search" />
-                  <q-icon
-                    v-if="filterKeyword2 !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="resetFilter"
-                  />
-                </template>
-              </q-input>
-              <q-select
-                v-model="visibleColumnsPosition"
-                multiple
-                outlined
-                dense
-                options-dense
-                :display-value="$q.lang.table.columns"
-                emit-value
-                map-options
-                :options="columnsPosition"
-                option-value="name"
-                options-cover
-                style="min-width: 150px"
-                class="gt-xs q-ml-sm"
-              />
-            </q-toolbar>
-          </div>
-        </div>
-        <d-table
-          :rows="rowsPosition"
-          :columns="columnsPosition"
-          :filter="filterKeyword2"
-          row-key="id"
-          selection="single"
-          v-model:selected="selectedPosition"
-          :visible-columns="visibleColumnsPosition"
-        >
-          <template v-slot:body-selection="scope">
-            <q-checkbox
-              keep-color
-              color="primary"
-              dense
-              v-model="scope.selected"
-            />
-          </template>
-        </d-table>
-      </q-card-section>
-      <q-separator />
-      <q-card-actions align="right">
-        <q-btn
-          dense
-          unelevated
-          label="บันทึก"
-          color="public"
-          @click="checkSave"
-          class="q-px-md"
-        >
-        </q-btn>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
+  <DialogAddEmployee v-model:modal="modalAddEmployee" :fetchData="fetchList" />
 
-  <DialogSendToCommand
-    :modal="modaladdOrder"
-    :closeDialog="clickCloseSendModal"
-    :rows="rows"
-    :fetch-new-list="showEmployeeTemp"
+  <DialogSelectPos
+    v-model:modal="modalPos"
+    :dataRow="dataRow"
+    :fetchData="fetchList"
   />
+
+  <DialogSendOrder v-model:modal="modalSendOrder" />
 </template>
diff --git a/src/modules/08_registryEmployee/views/MainOld.vue b/src/modules/08_registryEmployee/views/MainOld.vue
new file mode 100644
index 000000000..bfbd77bf1
--- /dev/null
+++ b/src/modules/08_registryEmployee/views/MainOld.vue
@@ -0,0 +1,1045 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import type { QInput, QTableProps } from "quasar";
+import { useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useRegistryEmployeeDataStore } from "@/modules/08_registryEmployee/store";
+
+import type {
+  FormRegistryEmployee,
+  ResponseEmployeeTemp,
+} from "@/modules/08_registryEmployee/interface/request/Main";
+import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import DialogSendToCommand from "@/modules/08_registryEmployee/components/DialogSendToCommand.vue";
+
+// store convert status text
+const dataStore = useRegistryEmployeeDataStore();
+const { statusText } = dataStore;
+
+const $q = useQuasar();
+const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const {
+  typeRetire,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  dialogRemove,
+  dialogConfirm,
+  dialogMessageNotify,
+} = mixin; //ฟังก์ชันกลางที่ใช้ในหน้านี้
+
+const router = useRouter();
+const filterRef = ref<any>(null);
+const filter = ref<string>("");
+const id = ref<string>("");
+
+// visible columns ตารางในหน้าหลัก
+const visibleColumnsEmployeeTemp = ref<String[]>([
+  "no",
+  "fullname",
+  "fullnameOld",
+  "oc",
+  "positionEmployeePosition",
+  "positionEmployeePositionSide",
+  "positionLine",
+  "govAge",
+  "positionEmployeeGroup",
+  "dateAppoint",
+  "refSalary",
+  "dateStart",
+  "createdAt",
+  "salaryDate",
+  "age",
+  "amount",
+  "statustext",
+  "leaveDateOrder",
+  "draftOrganizationOrganization",
+  "currentAgency",
+]);
+
+// คอลัมน์ตารางในหน้าหลัก
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-นามสกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "draftOrganizationOrganization",
+    align: "left",
+    label: "หน่วยงานที่รับการบรรจุ",
+    sortable: true,
+    field: "draftOrganizationOrganization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, {
+    //     numeric: true,
+    //     sensitivity: "base",
+    //   }),
+  },
+  {
+    name: "currentAgency",
+    align: "left",
+    label: "หน่วยงานปัจจุบัน",
+    sortable: true,
+    field: "currentAgency",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "govAge",
+    align: "left",
+    label: "อายุราชการ(ปี)",
+    sortable: true,
+    field: "govAge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, {
+    //     numeric: true,
+    //     sensitivity: "base",
+    //   }),
+  },
+  {
+    name: "dateAppoint",
+    align: "left",
+    label: "วันที่จ้าง",
+    sortable: true,
+    field: "dateAppoint",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "วันที่เริ่มปฎิบัติราชการ",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "salaryDate",
+    align: "left",
+    label: "วันที่แต่งตั้ง",
+    sortable: true,
+    field: "salaryDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "refSalary",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "refSalary",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "age",
+    align: "left",
+    label: "อายุ",
+    sortable: true,
+    field: "age",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "fullnameOld",
+    align: "left",
+    label: "ชื่อ-นามสกุล(เดิม)",
+    sortable: true,
+    field: "fullnameOld",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "leaveDateOrder",
+    align: "left",
+    label: "วันที่พ้นราชการ",
+    sortable: true,
+    field: "leaveDateOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "statustext",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "statustext",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+]);
+
+onMounted(async () => {
+  await nodeTree();
+});
+
+// ฟังก์ชั่นเช็คค่า guid แปลงเป็นค่า null
+const checkNull = (text: string) =>
+  text == null
+    ? ""
+    : text == "00000000-0000-0000-0000-000000000000"
+    ? ""
+    : text;
+
+// คลิก icon ส่งไปออกคำสั่ง (เปิด dialog)
+const modaladdOrder = ref<boolean>(false); // dialog ส่งไปออกคำสั่ง
+const clickAddOrder = () => {
+  modaladdOrder.value = true;
+};
+
+// ปิด dialog ส่งไปออกคำสั่ง
+const clickCloseSendModal = () => {
+  modaladdOrder.value = false;
+};
+
+const emit = defineEmits(["update:filterKeyword2", "update:selected"]);
+
+//รีเซ็ตค่าในช่องค้นหา
+const Reset = () => {
+  emit("update:filterKeyword2", "");
+};
+
+const updateInput = (value: any) => {
+  emit("update:filterKeyword2", value);
+};
+
+const resetFilter = () => {
+  // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
+  filter.value = "";
+  filterRef.value!.focus();
+  filterKeyword2.value = "";
+};
+
+// เพิ่มข้อมูลลูกจ้าง
+const clickAdd = () => {
+  router.push(`/registry-employee/add`);
+};
+
+// ดูรายการแก้ไขรายชื่อ
+const redirectToPage = (id?: string, status?: string) => {
+  if (!(status == "REPORT" || status == "DONE")) {
+    router.push(`/registry-employee/edit/${id}`);
+  }
+};
+
+// ยืนยันการลบรายการข้อมูลในตาราง
+const clickDelete = (id: string) => {
+  dialogRemove($q, async () => await deleteData(id));
+};
+
+// ลบรายการข้อมูลในตาราง
+const deleteData = async (id: string) => {
+  showLoader();
+  await http
+    .delete(config.API.profileInforId(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+      showEmployeeTemp();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+// **** เริ่มในส่วนของการเลือกตำแหน่ง ***//
+const rowsPosition = ref<any>([]); // รายการข้อมูลในตารางกำหนดตำแหน่ง
+const filters = ref<FormRegistryEmployee[]>([]);
+const filterKeyword2 = ref<any>("");
+const modal = ref<boolean>(false); // เปิด-ปิด dialod กำหนดตำแหน่ง
+const selectedPosition = ref<any>([]); // เก็บตำแหน่งที่เลือก
+
+// visible คอลัมน์ในส่วนกำหนดตำแหน่ง
+const visibleColumnsPosition = ref<String[]>([
+  "organizationOrganizationName",
+  "organizationAgencyName",
+  "organizationGovernmentAgencyName",
+  "organizationShortNameName",
+  "organizationTypeName",
+  "organizationLevelName",
+  "positionEmployeeLineName",
+  "positionEmployeePositionName",
+  "posNo",
+]);
+
+// คอลัมน์ในส่วนกำหนดตำแหน่ง
+const columnsPosition = ref<QTableProps["columns"]>([
+  {
+    name: "organizationOrganizationName",
+    align: "left",
+    label: "หน่วยงาน",
+    sortable: true,
+    field: "organizationOrganizationName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationAgencyName",
+    align: "left",
+    label: "รหัสหน่วยงาน",
+    sortable: true,
+    field: "organizationAgencyName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationGovernmentAgencyName",
+    align: "left",
+    label: "รหัสส่วนราชการ",
+    sortable: true,
+    field: "organizationGovernmentAgencyName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationShortNameName",
+    align: "left",
+    label: "ชื่อย่อหน่วยงาน",
+    sortable: true,
+    field: "organizationShortNameName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationTypeName",
+    align: "left",
+    label: "ประเภทหน่วยงาน",
+    sortable: true,
+    field: "organizationTypeName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "organizationLevelName",
+    align: "left",
+    label: "ระดับหน่วยงาน",
+    sortable: true,
+    field: "organizationLevelName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeeLineName",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionEmployeeLineName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "positionEmployeePositionName",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+// ยืนยันการกำหนดตำแหน่ง
+const checkSave = () => {
+  dialogConfirm($q, async () => await saveData());
+};
+
+// เช็คข้อมูลก่อนบันทึกการกำหนดตำแหน่ง
+const saveData = async () => {
+  if (selectedPosition.value.length == 0) {
+    dialogMessageNotify($q, "ไม่สามารถบันทึกข้อมูลได้ กรุณาเลือกตำแหน่ง");
+    return;
+  } else {
+    await savePosition();
+  }
+};
+
+// บันทึกการกำหนดตำแหน่ง
+const savePosition = async () => {
+  showLoader();
+  const data = {
+    organizationEmployeeId: selectedPosition.value[0].id,
+  };
+  await http
+    .put(config.API.organizationEmployeePositionId(id.value), data)
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await nodeTree();
+      modalOpenClose();
+    });
+};
+
+// ปิด dialog กำหนดตำแหน่ง
+const modalOpenClose = () => {
+  modal.value = !modal.value;
+  if (!modal.value) {
+    selectedPosition.value = [];
+    rowsPosition.value = [];
+    id.value = "";
+  }
+};
+
+// คลิกกำหนดตำแหน่ง
+const editDetail = async (row: any) => {
+  await getPosition(row.id);
+  id.value = row.id;
+};
+
+// ดึงข้อมูลตำแหน่ง
+const getPosition = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.organizationEmployeePositionId(id))
+    .then((res) => {
+      const { result } = res.data;
+      let data: any[] = [];
+      result.map((r: any) => {
+        data.push({
+          id: checkNull(r.id),
+          agency: checkNull(r.agency),
+          conditionNote: checkNull(r.conditionNote),
+          department: checkNull(r.department),
+          government: checkNull(r.government),
+          isActive: r.isActive,
+          isCondition: r.isCondition,
+          isDirector: r.isDirector,
+          organizationUserNote: checkNull(r.organizationUserNote),
+          qualification: checkNull(r.qualification),
+          pile: checkNull(r.pile),
+          posNo: checkNull(r.posNo),
+          positionCondition: checkNull(r.positionCondition),
+          positionMasterUserNote: checkNull(r.positionMasterUserNote),
+          organizationOrder: checkNull(r.organizationOrder),
+          organizationFaxId: checkNull(r.organizationFaxId),
+          organizationLevelId: checkNull(r.organizationLevelId),
+          organizationOrganizationId: checkNull(r.organizationOrganizationId),
+          organizationTelExternalId: checkNull(r.organizationTelExternalId),
+          organizationTelInternalId: checkNull(r.organizationTelInternalId),
+          organizationTypeId: checkNull(r.organizationTypeId),
+          positionEmployeeStatusId: checkNull(r.positionEmployeeStatusId),
+          positionEmployeeLineId: checkNull(r.positionEmployeeLineId),
+          positionEmployeePositionId: checkNull(r.positionEmployeePositionId),
+          organizationAgencyId: checkNull(r.organizationAgencyId),
+          organizationGovernmentAgencyId: checkNull(
+            r.organizationGovernmentAgencyId
+          ),
+          organizationShortNameId: checkNull(r.organizationShortNameId),
+          organizationFaxName: checkNull(r.organizationFaxName),
+          organizationLevelName: checkNull(r.organizationLevelName),
+          organizationOrganizationName: checkNull(
+            r.organizationOrganizationName
+          ),
+          organizationTelExternalName: checkNull(r.organizationTelExternalName),
+          organizationTelInternalName: checkNull(r.organizationTelInternalName),
+          organizationTypeName: checkNull(r.organizationTypeName),
+          positionEmployeeStatusName: checkNull(r.positionEmployeeStatusName),
+          positionEmployeeLineName: checkNull(r.positionEmployeeLineName),
+          positionEmployeePositionName: checkNull(
+            r.positionEmployeePositionName
+          ),
+          organizationAgencyName: checkNull(r.organizationAgencyName),
+          organizationGovernmentAgencyName: checkNull(
+            r.organizationGovernmentAgencyName
+          ),
+          organizationShortNameName: checkNull(r.organizationShortNameName),
+          positionEmployeeLevels: r.positionEmployeeLevels,
+          positionEmployeePositionSides: r.positionEmployeePositionSides,
+          use: r.use,
+        });
+      });
+
+      const index = data.findIndex((r: any) => r.use == true);
+      if (index >= 0) {
+        selectedPosition.value = [data[index]];
+      }
+
+      rowsPosition.value = data;
+      modal.value = true;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+// ดึงข้อมูลตำแหน่ง (root tree)
+const selected = ref([]);
+const nodeTree = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res: any) => {
+      const data = res.data.result;
+      if (data.length > 0) {
+        selected.value = data[0].id;
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+      await showEmployeeTemp();
+    });
+};
+// **** จบส่วนของการเลือกตำแหน่ง ***//
+
+// ดึงรายการข้อมูลมา mapping แสดงในตาราง
+const rows = ref<FormRegistryEmployee[]>([]);
+const showEmployeeTemp = async () => {
+  showLoader();
+
+  let cirteria = [
+    {
+      criteriaType: "employee_class",
+      criteriaValue: "temp",
+    },
+    {
+      criteriaType: "is_retire",
+      criteriaValue: "false",
+    },
+  ];
+
+  if (selected.value == null) return;
+  await http
+    .post(config.API.searchProfileTemp("all"), {
+      criterias: cirteria,
+    })
+    .then((res) => {
+      const data = res.data.result;
+      rows.value = [];
+      filters.value = [];
+      let list: FormRegistryEmployee[] = [];
+      data.map((e: ResponseEmployeeTemp) => {
+        list.push({
+          id: e.id,
+          fullname: e.fullname,
+          fullnameOld: e.fullnameOld,
+          position: e.position,
+          positionPathSide: e.positionPathSide,
+          positionLine: e.positionLine,
+          govAge: e.govAge,
+          positionEmployeePosition: e.positionEmployeePosition,
+          positionEmployeePositionSide: e.positionEmployeePositionSide,
+          positionEmployeeGroup: e.positionEmployeeGroup,
+          oc: e.oc,
+          age: e.age,
+          amount: e.amount == null ? "" : e.amount.toLocaleString(),
+          refSalary: e.refSalary,
+          dateAppoint:
+            e.dateAppoint == null ? null : date2Thai(new Date(e.dateAppoint)),
+          dateStart:
+            e.dateStart == null ? null : date2Thai(new Date(e.dateStart)),
+          createdAt:
+            e.createdAt == null ? null : date2Thai(new Date(e.createdAt)),
+          isLeave: e.isLeave == false ? "ครอง" : `${typeRetire(e.leaveReason)}`,
+          leaveDateOrder:
+            e.leaveDateOrder == null
+              ? null
+              : date2Thai(new Date(e.leaveDateOrder)),
+          newAgency: "",
+          currentAgency: "",
+          draftPositionEmployee: e.draftPositionEmployee,
+          draftOrganizationOrganization: e.draftOrganizationOrganization,
+          status: e.draftOrgEmployeeStatus ?? "",
+          statustext: statusText(e.draftOrgEmployeeStatus ?? ""),
+        });
+      });
+      rows.value = list;
+      filters.value = list;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+</script>
+
+<template>
+  <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-btn
+        flat
+        round
+        color="primary"
+        icon="mdi-account-arrow-right"
+        @click="clickAddOrder"
+      >
+        <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="visibleColumnsEmployeeTemp"
+          :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">
+      <d-table
+        :rows="rows"
+        :columns="columns"
+        :visible-columns="visibleColumnsEmployeeTemp"
+        :filter="filter"
+        row-key="id"
+      >
+        <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"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td
+              key="fullname"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              {{ props.row.fullname }}
+            </q-td>
+            <q-td
+              key="draftOrganizationOrganization"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              <div
+                class="col-12"
+                v-if="
+                  props.row.draftOrganizationOrganization == null &&
+                  props.row.draftPositionEmployee == null
+                "
+              >
+                <div class="text-weight-medium">
+                  {{ "-" }}
+                </div>
+              </div>
+              <div class="col-12" v-else>
+                <div class="text-weight-medium">
+                  {{ props.row.draftOrganizationOrganization ?? "-" }}
+                </div>
+                <div class="text-weight-light">
+                  {{ props.row.draftPositionEmployee ?? "-" }}
+                </div>
+              </div>
+            </q-td>
+            <q-td
+              key="currentAgency"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              <div
+                class="col-12"
+                v-if="props.row.oc == null && props.row.position == null"
+              >
+                <div class="text-weight-medium">
+                  {{ "-" }}
+                </div>
+              </div>
+              <div class="col-12" v-else>
+                <div class="text-weight-medium">
+                  {{ props.row.oc ?? "-" }}
+                </div>
+                <div class="text-weight-light">
+                  {{ props.row.position ?? "-" }}
+                </div>
+              </div>
+            </q-td>
+            <q-td
+              key="amount"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              {{ props.row.amount }}
+            </q-td>
+            <q-td
+              key="govAge"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              {{ props.row.govAge }}
+            </q-td>
+            <q-td
+              key="dateAppoint"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              {{ props.row.dateAppoint }}
+            </q-td>
+            <q-td
+              key="dateStart"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              {{ props.row.dateStart }}
+            </q-td>
+            <q-td
+              key="salaryDate"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              {{ props.row.salaryDate }}
+            </q-td>
+            <q-td
+              key="refSalary"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              {{ props.row.refSalary }}
+            </q-td>
+            <q-td
+              key="age"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              {{ props.row.age }}
+            </q-td>
+            <q-td
+              key="fullnameOld"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              {{ props.row.fullnameOld }}
+            </q-td>
+            <q-td
+              key="createdAt"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              {{ props.row.createdAt }}
+            </q-td>
+            <q-td
+              key="isLeave"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              {{ props.row.isLeave }}
+            </q-td>
+
+            <q-td
+              key="leaveDateOrder"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              {{ props.row.leaveDateOrder }}
+            </q-td>
+            <q-td
+              key="statustext"
+              :props="props"
+              @click="redirectToPage(props.row.id, props.row.status)"
+            >
+              {{ props.row.statustext }}
+            </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)"
+                      :disable="
+                        props.row.status == 'REPORT' ||
+                        props.row.status == 'DONE'
+                      "
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-icon
+                          :color="
+                            props.row.status == 'REPORT' ||
+                            props.row.status == 'DONE'
+                              ? 'grey'
+                              : '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(props.row.id)"
+                      :disable="
+                        props.row.status == 'REPORT' ||
+                        props.row.status == 'DONE'
+                      "
+                    >
+                      <q-item-section
+                        style="min-width: 0px"
+                        avatar
+                        class="q-py-sm"
+                      >
+                        <q-icon
+                          :color="
+                            props.row.status == 'REPORT' ||
+                            props.row.status == 'DONE'
+                              ? 'grey'
+                              : 'red-7'
+                          "
+                          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>
+      </d-table>
+    </div>
+  </q-card>
+
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 70vw; max-width: 70vw">
+      <DialogHeader tittle="กำหนดตำแหน่ง" :close="modalOpenClose" />
+      <q-separator />
+      <q-card-section class="q-pa-sm">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                ref="filterRef"
+                debounce="300"
+                v-model="filterKeyword2"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon v-if="filterKeyword2 == ''" name="search" />
+                  <q-icon
+                    v-if="filterKeyword2 !== ''"
+                    name="clear"
+                    class="cursor-pointer"
+                    @click="resetFilter"
+                  />
+                </template>
+              </q-input>
+              <q-select
+                v-model="visibleColumnsPosition"
+                multiple
+                outlined
+                dense
+                options-dense
+                :display-value="$q.lang.table.columns"
+                emit-value
+                map-options
+                :options="columnsPosition"
+                option-value="name"
+                options-cover
+                style="min-width: 150px"
+                class="gt-xs q-ml-sm"
+              />
+            </q-toolbar>
+          </div>
+        </div>
+        <d-table
+          :rows="rowsPosition"
+          :columns="columnsPosition"
+          :filter="filterKeyword2"
+          row-key="id"
+          selection="single"
+          v-model:selected="selectedPosition"
+          :visible-columns="visibleColumnsPosition"
+        >
+          <template v-slot:body-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+        </d-table>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          dense
+          unelevated
+          label="บันทึก"
+          color="public"
+          @click="checkSave"
+          class="q-px-md"
+        >
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+
+  <DialogSendToCommand
+    :modal="modaladdOrder"
+    :closeDialog="clickCloseSendModal"
+    :rows="rows"
+    :fetch-new-list="showEmployeeTemp"
+  />
+</template>