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 01/15] =?UTF-8?q?=E0=B8=97=E0=B8=B3=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=8A=E0=B8=B1=E0=B9=88=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=84=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>

From 79caf784ac493f8ff3d2fc700346d5b9076dbbf8 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 10 Jun 2024 18:15:27 +0700
Subject: [PATCH 02/15] =?UTF-8?q?=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=8A=E0=B8=B1=E0=B9=88=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=84=E0=B8=A3=E0=B8=B2=E0=B8=A7=20=3D>=20=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88?=
 =?UTF-8?q?=E0=B9=88=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogSendOrder.vue            | 28 ++++++++++++++++++-
 .../08_registryEmployee/views/Main.vue        |  2 +-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/modules/08_registryEmployee/components/DialogSendOrder.vue b/src/modules/08_registryEmployee/components/DialogSendOrder.vue
index e7b788024..9d16e92f0 100644
--- a/src/modules/08_registryEmployee/components/DialogSendOrder.vue
+++ b/src/modules/08_registryEmployee/components/DialogSendOrder.vue
@@ -28,6 +28,12 @@ const { statusText } = useRegistryEmp();
 
 /**props*/
 const modal = defineModel<boolean>("modal", { required: true });
+const props = defineProps({
+  fetchData: {
+    type: Function,
+    require: true,
+  },
+});
 
 const filter = ref<string>("");
 const rows = ref<DataEmployee[]>([]);
@@ -165,7 +171,27 @@ function onClickSendOrder() {
     dialogConfirm(
       $q,
       () => {
-        closeDialog();
+        showLoader();
+        let pId: string[] = [];
+        selected.value.forEach((e: any) => {
+          pId.push(e.id);
+        });
+        let data = {
+          id: pId,
+        };
+        http
+          .post(config.API.organizationEmployeeSendOrder, data)
+          .then(() => {
+            success($q, "บันทึกสำเร็จ");
+            closeDialog();
+            props?.fetchData?.();
+          })
+          .catch((err) => {
+            messageError($q, err);
+          })
+          .finally(async () => {
+            hideLoader();
+          });
       },
       "ยื่นยันการส่งรายชื่อไปออกคำสั่ง",
       "ต้องการยืนยันการส่งรายชื่อไปออกคำสั่งนี้หรือไม่ ?"
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index c9dd8af11..e8ea7d47e 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -488,5 +488,5 @@ onMounted(() => {
     :fetchData="fetchList"
   />
 
-  <DialogSendOrder v-model:modal="modalSendOrder" />
+  <DialogSendOrder v-model:modal="modalSendOrder" :fetchData="fetchList" />
 </template>

From bed11441d94d3ec8c0154007e35943a509ef8de6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 11 Jun 2024 09:07:50 +0700
Subject: [PATCH 03/15] API

---
 src/api/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/api/index.ts b/src/api/index.ts
index 05c4f7bb4..b29b5fb3d 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: "http://localhost:13001/api/v1",
-    // 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", //ใช้ชั่วคราว

From 63ac10c1063717211d4181dff3c824538867ccc2 Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Tue, 11 Jun 2024 09:46:06 +0700
Subject: [PATCH 04/15] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20path=20buil?=
 =?UTF-8?q?d?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/release.yaml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index f5436c589..c233f34d4 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -8,10 +8,10 @@ on:
 env:
   REGISTRY: docker.frappet.com
   IMAGE_NAME: ehr/bma-ehr-app
-  DEPLOY_HOST: 49.0.91.80
+  DEPLOY_HOST: frappet.com
   COMPOSE_PATH: /home/frappet/docker/bma/bma-ehr
 jobs:
-  # act workflow_dispatch -W .github/workflows/release.yaml --input IMAGE_VER=version-1.0.110 -s DOCKER_USER=kittapath@frappet.com -s DOCKER_PASS=P@ssw0rd -s SSH_PASSWORD=FPTadmin2357
+  # act workflow_dispatch -W .github/workflows/release.yaml --input IMAGE_VER=latest -s DOCKER_USER=kittapath@frappet.com -s DOCKER_PASS=P@ssw0rd -s SSH_PASSWORD=FPTadmin2357
   release-test:
     runs-on: ubuntu-latest
     steps:

From 230e01a83380639f43e3fcf0509dd02227417f22 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 11 Jun 2024 10:19:36 +0700
Subject: [PATCH 05/15] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=20dialog=20?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=81=E0=B8=B2=E0=B8=A8=E0=B9=80?=
 =?UTF-8?q?=E0=B8=81=E0=B8=A9=E0=B8=B5=E0=B8=A2=E0=B8=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialogs/PopupReason.vue        |  7 +++----
 .../components/ListRetirement/TableList.vue   | 21 ++++++++++++-------
 .../components/ListRetirement/popupAdd.vue    |  9 ++++----
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/components/Dialogs/PopupReason.vue b/src/components/Dialogs/PopupReason.vue
index d151fe55a..e7916fffe 100644
--- a/src/components/Dialogs/PopupReason.vue
+++ b/src/components/Dialogs/PopupReason.vue
@@ -47,7 +47,7 @@ const submit = () => {
 };
 
 function closeModal() {
-  modal.value = false
+  modal.value = false;
 }
 </script>
 
@@ -57,7 +57,7 @@ function closeModal() {
       <q-form ref="myForm">
         <DialogHeader :tittle="props.title" :close="closeModal" />
         <q-separator />
-        <q-card-section class="q-pa-sm bg-grey-1">
+        <q-card-section class="q-pa-sm">
           <div class="row col-12 q-col-gutter-sm">
             <div class="col-xs-12">
               <div class="col-12 row q-py-sm items-center q-col-gutter-sm">
@@ -77,9 +77,8 @@ function closeModal() {
           </div>
         </q-card-section>
         <q-separator />
-        <q-card-actions align="right">
+        <q-card-actions align="right" class="bg-white text-teal">
           <q-btn
-            dense
             unelevated
             label="บันทึก"
             color="public"
diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index 4b07eaf48..0246e9f10 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -740,13 +740,14 @@ function updatemodalPersonal(modal: boolean) {
     <q-card style="width: 50vw">
       <DialogHeader tittle="กรอกเหตุผล" :close="closeDialog" />
       <q-separator />
-      <q-card-section class="q-pt-none bg-grey-1">
+      <q-card-section>
         <div class="row q-col-gutter-sm">
           <div class="col-12">
             <q-input
               outlined
               dense
               lazy-rules
+              hide-bottom-space
               v-model="note"
               :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
               :label="`${'กรอกเหตุผล'}`"
@@ -756,9 +757,12 @@ function updatemodalPersonal(modal: boolean) {
         </div>
       </q-card-section>
 
+      <q-separator />
+
       <q-card-actions align="right">
         <q-btn
           v-if="action === 'delete'"
+          unelevated
           label="บันทึก"
           color="secondary"
           :disable="visibleNote"
@@ -766,6 +770,7 @@ function updatemodalPersonal(modal: boolean) {
         />
         <q-btn
           v-else
+          unelevated
           label="บักทึก"
           color="secondary"
           @click="saveNote"
@@ -782,9 +787,10 @@ function updatemodalPersonal(modal: boolean) {
       <q-separator />
       <q-card-section>
         <q-form ref="myForm">
-          <div class="row q-pa-md q-gutter-md">
-            <div class="col-12">
+          <div class="row q-gutter-md">
+            <div class="col-12 q-pr-md">
               <q-file
+                hide-bottom-space
                 bg-color="white"
                 clearable
                 outlined
@@ -801,7 +807,7 @@ function updatemodalPersonal(modal: boolean) {
                 </template>
               </q-file>
             </div>
-            <div class="col-12">
+            <div class="col-12 q-pr-md">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="signDate"
@@ -836,13 +842,14 @@ function updatemodalPersonal(modal: boolean) {
           </div>
         </q-form>
       </q-card-section>
+
       <q-separator />
+
       <q-card-actions align="right">
         <q-btn
-          flat
-          round
+          unelevated
+          label="บันทึก"
           color="public"
-          icon="mdi-content-save-outline"
           @click="uploadFile(fileUpload, signDate)"
         >
           <q-tooltip>บันทึก</q-tooltip>
diff --git a/src/modules/06_retirement/components/ListRetirement/popupAdd.vue b/src/modules/06_retirement/components/ListRetirement/popupAdd.vue
index 7ed7d8542..fbebbe5cd 100644
--- a/src/modules/06_retirement/components/ListRetirement/popupAdd.vue
+++ b/src/modules/06_retirement/components/ListRetirement/popupAdd.vue
@@ -114,12 +114,10 @@ const cerateRetirement = async (data: object) => {
   <q-dialog v-model="modal">
     <q-card style="width: 450px; max-width: 80vw">
       <q-card-section>
-        <div class="text-h6">เพิ่มประกาศ</div>
+        <h6 class="q-ma-none">เพิ่มประกาศ</h6>
+        <p class="q-mb-none">เลือกประกาศที่ต้องการเพิ่มข้อมูล</p>
       </q-card-section>
 
-      <q-card-section class="q-pt-none">
-        เลือกประกาศที่ต้องการเพิ่มข้อมูล
-      </q-card-section>
       <q-separator />
       <div class="q-pa-md">
         <q-list>
@@ -196,7 +194,8 @@ const cerateRetirement = async (data: object) => {
       <q-card-actions align="right" class="bg-white text-teal">
         <q-btn flat label="ยกเลิก" color="red" v-close-popup />
         <q-btn
-          flat
+          unelevated
+          color="teal"
           label="ตกลง"
           @click="clickSelect(action)"
           :disable="radio === '' || (action === '' && radio !== 'ADD')"

From e8976a3d82ab713e9b4cd2ecd771d2382d752dda Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 11 Jun 2024 11:07:34 +0700
Subject: [PATCH 06/15] =?UTF-8?q?=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=AA=E0=B8=A3=E0=B8=B4=E0=B8=A2=E0=B8=B2=E0=B8=A0?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=93=E0=B9=8C=20=3D>=20=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=20form=20Dialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../07_insignia/components/2_Manage/Tab1.vue  |   1 -
 .../components/3_result/DialogForm.vue        | 122 ++++++------
 .../components/3_result/Dialogbody.vue        | 148 +++++++-------
 .../components/4_Allocate/DialogEdit.vue      |  36 ++--
 .../components/4_Allocate/DialogForm.vue      |  69 ++++---
 .../components/5_Borrow/DialogForm.vue        | 188 ++++++++----------
 .../stores/registry-employee.ts               |   2 +-
 7 files changed, 276 insertions(+), 290 deletions(-)

diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index 6a30a99fd..41321aad3 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -1360,7 +1360,6 @@ onMounted(async () => {
             @click="clickSave"
             class="q-px-md"
           >
-            <!-- icon="mdi-content-save-outline" -->
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/07_insignia/components/3_result/DialogForm.vue b/src/modules/07_insignia/components/3_result/DialogForm.vue
index 79252e3c8..6c6cd9a38 100644
--- a/src/modules/07_insignia/components/3_result/DialogForm.vue
+++ b/src/modules/07_insignia/components/3_result/DialogForm.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+divdiv<script setup lang="ts">
 import { ref, watch, computed } from "vue";
 import { QForm, useQuasar } from "quasar";
 import http from "@/plugins/http";
@@ -238,53 +238,43 @@ async function fectDataByid(id: string) {
 }
 
 /** function บักทึกผล*/
-async function clickSave() {
-  let body = {
-    citizanId: cardid.value, // เลขประจำตัวประชาชน
-    insigniaId: brand.value, // insigniaID
-    number: Advertise.value,
-    issue: issue.value,
-    dateReceive: receivedate.value, // วันที่ได้รับเครื่องราชฯ
-    organizationOrganizationSend: affiliationRequest.value,
-    organizationOrganizationReceive: affiliationReceived.value,
-    date: announceDate.value, // วันที่กิจนุเบก
-    volumeNo: volume.value, // เล่ม
-    section: episode.value, //ตอนที่
-    page: duty.value, //หน้าที่
-    no: announced.value,
-    datePayment: invoiceDate.value, //วันที่จ่าย
-    typePayment: payment.value, // รูปแบบการจ่าย
-    address: addressPayment.value, //ที่อยู่
-  };
-  // เช็คค่าว่าง
-  await myForm.value!.validate().then((result: boolean) => {
-    if (result) {
-      dialogConfirm($q, async () => {
-        await addNote(body);
-      });
+async function onSubmit() {
+  dialogConfirm($q, () => {
+    if (props.roundId !== undefined) {
+      showLoader();
+      let body = {
+        citizanId: cardid.value, // เลขประจำตัวประชาชน
+        insigniaId: brand.value, // insigniaID
+        number: Advertise.value,
+        issue: issue.value,
+        dateReceive: receivedate.value, // วันที่ได้รับเครื่องราชฯ
+        organizationOrganizationSend: affiliationRequest.value,
+        organizationOrganizationReceive: affiliationReceived.value,
+        date: announceDate.value, // วันที่กิจนุเบก
+        volumeNo: volume.value, // เล่ม
+        section: episode.value, //ตอนที่
+        page: duty.value, //หน้าที่
+        no: announced.value,
+        datePayment: invoiceDate.value, //วันที่จ่าย
+        typePayment: payment.value, // รูปแบบการจ่าย
+        address: addressPayment.value, //ที่อยู่
+      };
+      http
+        .put(config.API.noteAdd(props.roundId), body)
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          props.close?.();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     }
   });
 }
 
-/** function เพิ่มแก้ ข้อมูลบันทึกผล*/
-async function addNote(body: any) {
-  if (props.roundId !== undefined) {
-    await http
-      .put(config.API.noteAdd(props.roundId), body)
-      .then(() => {
-        success($q, "บันทึกข้อมูลสำเร็จ");
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        if (props.close) {
-          props.close();
-        }
-      });
-  }
-}
-
 /** function หาเลขประจำตัวประชาชน*/
 function searchcardid() {
   if (cardid.value.length === 13) {
@@ -317,12 +307,16 @@ const filterSelector = (val: any, update: Function, name: any) => {
 
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card style="min-width: 900px" class="q-pb-md">
-      <DialogHeader tittle="บันทึกผล" :close="props.close" />
-      <q-separator />
-
-      <q-form ref="myForm">
-        <div class="q-pa-md bg-grey-1">
+    <q-card style="min-width: 900px" >
+      <q-form
+        ref="myForm"
+        greedy
+        @submit.prevent
+        @validation-success="onSubmit"
+      >
+        <DialogHeader tittle="บันทึกผล" :close="props.close" />
+        <q-separator />
+        <q-card-section>
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-4">
               <q-select
@@ -343,6 +337,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 @update:model-value="selectType"
                 :disable="status !== ''"
                 lazy-rules
+                class="inputgreen"
               />
             </div>
             <div class="col-12 text-weight-bold text-grey">
@@ -421,6 +416,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 v-model="Advertise"
                 lazy-rules
                 label="หมายเลขประกาศนีย์บัตรกำกับเครื่องราชอิสริยาภรณ์"
+                class="inputgreen"
               />
             </div>
             <div class="col-xs-12 col-sm-6">
@@ -440,6 +436,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 :readonly="false"
                 use-input
                 :borderless="false"
+                class="inputgreen"
                 style="min-width: 150px"
                 :rules="[
                   (val) => !!val || 'กรุณากรอกชื่อชั้นตราเครื่องราชอิสริยาภรณ์',
@@ -472,6 +469,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                     borderless
                     outlined
                     :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                    class="inputgreen"
                     hide-bottom-space
                     :model-value="
                       receivedate != null ? date2Thai(receivedate) : undefined
@@ -493,6 +491,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
               <q-input
                 :disable="disbleStatus || status == 'DONE'"
                 :rules="[(val) => !!val || 'กรุณากรอกทะเบียนฐานนันดร']"
+                class="inputgreen"
                 hide-bottom-space
                 dense
                 borderless
@@ -508,6 +507,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                   disbleStatus || status == 'DONE' || status == 'PENDING'
                 "
                 :rules="[(val) => !!val || 'กรุณากรอกสังกัด']"
+                class="inputgreen"
                 hide-bottom-space
                 dense
                 lazy-rules
@@ -523,6 +523,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                   disbleStatus || status == 'DONE' || status == 'PENDING'
                 "
                 :rules="[(val) => !!val || 'กรุณากรอกสังกัด']"
+                class="inputgreen"
                 hide-bottom-space
                 dense
                 borderless
@@ -560,6 +561,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                     borderless
                     outlined
                     :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                    class="inputgreen"
                     hide-bottom-space
                     :model-value="
                       announceDate != null ? date2Thai(announceDate) : undefined
@@ -660,6 +662,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                     borderless
                     outlined
                     hide-bottom-space
+                    class="inputgreen"
                     :model-value="
                       invoiceDate != null ? date2Thai(invoiceDate) : undefined
                     "
@@ -684,7 +687,7 @@ const filterSelector = (val: any, update: Function, name: any) => {
                 :disable="disbleStatus"
                 hide-bottom-space
                 :options="paymentOp"
-                class="col-xs-12 col-sm-6"
+                class="inputgreen"
                 dense
                 borderless
                 option-label="label"
@@ -701,27 +704,24 @@ const filterSelector = (val: any, update: Function, name: any) => {
               <q-input
                 :disable="disbleStatus"
                 label="ที่อยู่ที่จ่าย"
-                class="bg-white"
                 dense
                 lazy-rules
                 borderless
                 outlined
                 v-model="addressPayment"
                 type="textarea"
+                class="inputgreen"
               />
             </div>
           </div>
-        </div>
-      </q-form>
-
-      <q-separator />
-      <div class="q-pa-md">
-        <div class="row justify-end">
-          <q-btn label="บันทึก" @click="clickSave" color="public"
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" type="submit" color="public"
             ><q-tooltip>บันทึก</q-tooltip></q-btn
           >
-        </div>
-      </div>
+        </q-card-actions>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/07_insignia/components/3_result/Dialogbody.vue b/src/modules/07_insignia/components/3_result/Dialogbody.vue
index 0af969e00..90261dac5 100644
--- a/src/modules/07_insignia/components/3_result/Dialogbody.vue
+++ b/src/modules/07_insignia/components/3_result/Dialogbody.vue
@@ -1,3 +1,4 @@
+div
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import { QForm, useQuasar } from "quasar";
@@ -74,53 +75,41 @@ function close() {
  * @param type receive,return
  * @param id personId
  */
-async function SaveData(type: string, id: string) {
-  await myForm.value.validate().then((result: boolean) => {
-    if (result) {
-      dialogConfirm($q, () => dataSave(type, id));
+async function onSubmit(type: string, id: string) {
+  dialogConfirm($q, () => {
+    const formData = new FormData();
+    if (props.dateCheckReceive === null) {
+      formData.append("Date", dateToISO((Datereceive.value as Date) ?? nullii));
+      formData.append("File", files.value);
+      formData.append("OrgId", OrganazationId.value);
     } else {
+      formData.append("Date", dateToISO((Datereturn.value as Date) ?? nullii));
+      formData.append("File", filesReturn.value);
+      formData.append("OrgId", OrganazationId2.value);
     }
+    showLoader();
+    http
+      .put(config.API.requestinsignia(type, id), formData)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        Datereceive.value = null;
+        files.value = null;
+        OrganazationId.value = "";
+        Datereturn.value = null;
+        filesReturn.value = null;
+        OrganazationId2.value = "";
+        props.fecthlistInsignia?.();
+        props.close?.();
+        hideLoader();
+      });
   });
 }
 
-/**
- * function บันทึกข้อมูล
- * @param type receive,return
- * @param id personId
- */
-function dataSave(type: string, id: string) {
-  const formData = new FormData();
-  if (props.dateCheckReceive === null) {
-    formData.append("Date", dateToISO((Datereceive.value as Date) ?? nullii));
-    formData.append("File", files.value);
-    formData.append("OrgId", OrganazationId.value);
-  } else {
-    formData.append("Date", dateToISO((Datereturn.value as Date) ?? nullii));
-    formData.append("File", filesReturn.value);
-    formData.append("OrgId", OrganazationId2.value);
-  }
-  showLoader();
-  http
-    .put(config.API.requestinsignia(type, id), formData)
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(async () => {
-      Datereceive.value = null;
-      files.value = null;
-      OrganazationId.value = "";
-      Datereturn.value = null;
-      filesReturn.value = null;
-      OrganazationId2.value = "";
-      props.fecthlistInsignia?.();
-      props.close?.();
-      hideLoader();
-    });
-}
-
 /** function เรียกหน่วยงาน*/
 async function fetchOrgList() {
   showLoader();
@@ -175,23 +164,32 @@ watch(props, () => {
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="min-width: 900px">
-      <q-toolbar>
-        <q-toolbar-title class="text-subtitle2 text-bold"
-          >รับ-คืนเครื่องราชฯ</q-toolbar-title
-        >
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="close"
-          style="color: #ff8080; background-color: #ffdede"
-        />
-      </q-toolbar>
-      <q-separator />
-
-      <q-form ref="myForm">
-        <div class="q-pa-md bg-grey-1">
+      <q-form
+        ref="myForm"
+        greedy
+        @submit.prevent
+        @validation-success="
+          onSubmit(
+            props.dateCheckReceive === null ? 'receive' : 'return',
+            props.personId as string
+          )
+        "
+      >
+        <q-toolbar>
+          <q-toolbar-title class="text-subtitle2 text-bold"
+            >รับ-คืนเครื่องราชฯ</q-toolbar-title
+          >
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            @click="close"
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-toolbar>
+        <q-separator />
+        <q-card-section>
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-12 text-weight-bold text-grey-7">
               รับเครื่องราชฯ
@@ -220,18 +218,20 @@ watch(props, () => {
                     outlined
                     :rules="[(val) => !!val || 'กรุณาเลือกวันที่ได้รับ']"
                     hide-bottom-space
+                    class="inputgreen"
                     :model-value="
                       Datereceive != null ? date2Thai(Datereceive) : null
                     "
                     :label="`${'วันที่ได้รับ'}`"
                     :disable="dateCheckReceive !== null"
                   >
-                    <template v-if="Datereceive" v-slot:append>
+                    <template v-slot:prepend>
                       <q-icon
-                        name="cancel"
-                        @click.stop.prevent="Datereceive = null"
+                        name="event"
                         class="cursor-pointer"
-                      />
+                        color="primary"
+                      >
+                      </q-icon>
                     </template>
                   </q-input>
                 </template>
@@ -285,6 +285,7 @@ watch(props, () => {
                 :label="`หน่วยงานที่รับ`"
                 :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่รับ']"
                 :disable="dateCheckReceive !== null"
+                class="inputgreen"
               />
             </div>
           </div>
@@ -319,6 +320,7 @@ watch(props, () => {
                     dense
                     borderless
                     outlined
+                    class="inputgreen"
                     :rules="[(val) => !!val || 'กรุณาเลือกวันที่คืน']"
                     hide-bottom-space
                     :model-value="
@@ -389,30 +391,24 @@ watch(props, () => {
                 :label="`หน่วยงานที่คืน`"
                 :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
                 :disable="dateCheckReturn !== null"
+                class="inputgreen"
               />
             </div>
           </div>
-        </div>
-      </q-form>
+        </q-card-section>
 
-      <q-separator />
-      <div class="q-px-md q-py-sm">
-        <div class="row justify-end">
+        <q-separator v-if="dateCheckReturn === null" />
+        <q-card-actions align="right">
           <q-btn
             v-if="dateCheckReturn === null"
             label="บันทึก"
             color="public"
-            @click="
-              SaveData(
-                props.dateCheckReceive === null ? 'receive' : 'return',
-                props.personId as string
-              )
-            "
+            type="submit"
           >
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
-        </div>
-      </div>
+        </q-card-actions>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/07_insignia/components/4_Allocate/DialogEdit.vue b/src/modules/07_insignia/components/4_Allocate/DialogEdit.vue
index d37337a69..4c0e8b021 100644
--- a/src/modules/07_insignia/components/4_Allocate/DialogEdit.vue
+++ b/src/modules/07_insignia/components/4_Allocate/DialogEdit.vue
@@ -1,3 +1,4 @@
+div
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { QForm, useQuasar } from "quasar";
@@ -41,7 +42,7 @@ function closeModal() {
 }
 
 /** function ยืนยันการบันทึก*/
-const clickSave = () => {
+const onSubmit = () => {
   dialogConfirm($q, () => {
     if (props.actionType === "insignia") {
       props.save(
@@ -68,11 +69,15 @@ watch(props, () => {
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="width: 800px">
-      <DialogHeader tittle="แก้ไขการจัดสรรเครื่องราชฯ" :close="closeModal" />
-      <q-separator />
-
-      <q-form ref="myForm">
-        <div class="q-pa-md bg-grey-1">
+      <q-form
+        ref="myForm"
+        greedy
+        @submit.prevent
+        @validation-success="onSubmit"
+      >
+        <DialogHeader tittle="แก้ไขการจัดสรรเครื่องราชฯ" :close="closeModal" />
+        <q-separator />
+        <q-card-section>
           <div
             class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
           >
@@ -99,17 +104,18 @@ watch(props, () => {
                 lazy-rules
                 type="number"
                 label="จำนวน"
+                :rules="[(val) => !!val || `${'กรุณากรอกจำนวน'}`]"
               />
-            </div>
-          </div>
-        </div>
+            </div></div
+        ></q-card-section>
+
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" type="submit" color="public">
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
+        </q-card-actions>
       </q-form>
-      <q-separator />
-      <div class="row justify-end q-py-sm">
-        <div class="q-px-md">
-          <q-btn label="บันทึก" @click="clickSave" color="public" />
-        </div>
-      </div>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/07_insignia/components/4_Allocate/DialogForm.vue b/src/modules/07_insignia/components/4_Allocate/DialogForm.vue
index 7509b09c1..bfee64375 100644
--- a/src/modules/07_insignia/components/4_Allocate/DialogForm.vue
+++ b/src/modules/07_insignia/components/4_Allocate/DialogForm.vue
@@ -1,3 +1,4 @@
+div
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { QForm, useQuasar } from "quasar";
@@ -53,7 +54,10 @@ function filterSelector(val: any, update: Function, name: any) {
     const needle = val.toLowerCase();
     if (name === "filterInsigniaOp") {
       grandCross.value = null;
-      filterInsigniaOp.value = props.insigniaList.filter(
+      const newList = props.insigniaList.filter(
+        (e: any) => e.name !== "ทั้งหมด"
+      );
+      filterInsigniaOp.value = newList.filter(
         (v: any) => v.name.toLowerCase().indexOf(needle) > -1
       );
     }
@@ -61,16 +65,16 @@ function filterSelector(val: any, update: Function, name: any) {
 }
 
 /** function ยืนยันการบันทึก*/
-const clickSave = () => {
-  if (myForm.value !== null) {
-    myForm.value.validate().then(async (success) => {
-      if (success) {
-        dialogConfirm($q, () => props.save(grandCross.value, amount.value));
-      } else {
-        dialogMessageNotify($q, "กรุณาข้อมูลให้ครบ");
-      }
-    });
-  }
+const onSubmit = () => {
+  // if (myForm.value !== null) {
+  //   myForm.value.validate().then(async (success) => {
+  //     if (success) {
+  dialogConfirm($q, () => props.save(grandCross.value, amount.value));
+  //     } else {
+  //       dialogMessageNotify($q, "กรุณาข้อมูลให้ครบ");
+  //     }
+  //   });
+  // }
 };
 
 watch(props, () => {
@@ -84,22 +88,28 @@ watch(props, () => {
 watch(
   () => props.insigniaList,
   (newVal) => {
-    filterInsigniaOp.value = newVal;
+    filterInsigniaOp.value = newVal.filter((e: any) => e.name !== "ทั้งหมด");
   }
 );
 </script>
 
 <template>
   <q-dialog v-model="props.modal" persistent>
-    <q-card style="width: 800px">
-      <DialogHeader tittle="จัดสรรเครื่องราชฯ" :close="closeModal" />
-      <q-separator />
+    <q-card style="width: 700px; max-width: 80vw">
+      <q-form
+        ref="myForm"
+        greedy
+        @submit.prevent
+        @validation-success="onSubmit"
+      >
+        <DialogHeader tittle="จัดสรรเครื่องราชฯ" :close="closeModal" />
+        <q-separator />
 
-      <q-form ref="myForm">
-        <div class="q-pa-md bg-grey-1">
+        <q-card-section>
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-6">
               <q-select
+                class="inputgreen"
                 hide-bottom-space
                 :options="filterInsigniaOp"
                 dense
@@ -112,7 +122,7 @@ watch(
                 map-options
                 outlined
                 options-cover
-                :rules="[(val) => !!val || `${'กรุณากรอกจำนวน'}`]"
+                :rules="[(val) => !!val || `${'กรุณาเลือกเครื่องราชฯ'}`]"
                 v-model="grandCross"
                 :label="
                   routeName == 'insigniaAllocate'
@@ -120,7 +130,7 @@ watch(
                     : `เลือกหน่วยงาน`
                 "
                 @filter="(inputValue:any,doneFn:Function) => 
-                filterSelector(inputValue, doneFn,'filterInsigniaOp') "
+                  filterSelector(inputValue, doneFn,'filterInsigniaOp') "
               />
             </div>
             <div class="col-xs-12 col-sm-6">
@@ -137,20 +147,15 @@ watch(
               />
             </div>
           </div>
-        </div>
-      </q-form>
+        </q-card-section>
 
-      <q-separator />
-      <div class="row justify-end q-py-sm">
-        <div class="q-px-md">
-          <q-btn
-            label="บันทึก"
-            @click="clickSave"
-            color="public"
-            :disable="grandCross == '' || amount == null || amount == 0"
-          />
-        </div>
-      </div>
+        <q-separator />
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" type="submit" color="public"
+            ><q-tooltip>บันทึก</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/07_insignia/components/5_Borrow/DialogForm.vue b/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
index 9eff283e9..4b4017692 100644
--- a/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
+++ b/src/modules/07_insignia/components/5_Borrow/DialogForm.vue
@@ -160,46 +160,44 @@ async function fetchOrgList() {
 // บันทึกข้อมูลการยืม-คืน
 
 /** function บันทึกการเพิ่มข้อมูล*/
-async function clickSave() {
-  await myForm.value!.validate().then((result: boolean) => {
-    if (result) {
-      dialogConfirm($q, async () => {
-        if (props.action == "addData") {
-          await http
-            .post(config.API.insigniaManageBorrow(), {
-              borrowDate: receivedate.value,
-              // borrowOrganizationId: OrganazationId.value,
-              insigniaNoteProfileId: insigniaNoteProfileId.value,
-            })
-            .then(() => {
-              success($q, "บันทึกข้อมูลสำเร็จ");
-            })
-            .catch((err) => {
-              messageError($q, err);
-            })
-            .finally(() => {
-              clearData();
-              props.closeAndFecth();
-            });
-        } else {
-          await http
-            .put(config.API.insigniaManageBorrowReturn(props.profileId), {
-              returnDate: returndate.value,
-              returnOrganizationId: OrganazationId.value,
-              returnReason: reason.value,
-            })
-            .then(() => {
-              success($q, "บันทึกข้อมูลสำเร็จ");
-            })
-            .catch((err) => {
-              messageError($q, err);
-            })
-            .finally(() => {
-              clearData();
-              props.closeAndFecth();
-            });
-        }
-      });
+async function onSubmit() {
+  dialogConfirm($q, async () => {
+    showLoader();
+    if (props.action == "addData") {
+      await http
+        .post(config.API.insigniaManageBorrow(), {
+          borrowDate: receivedate.value,
+          insigniaNoteProfileId: insigniaNoteProfileId.value,
+        })
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          clearData();
+          props.closeAndFecth();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    } else {
+      await http
+        .put(config.API.insigniaManageBorrowReturn(props.profileId), {
+          returnDate: returndate.value,
+          returnOrganizationId: OrganazationId.value,
+          returnReason: reason.value,
+        })
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+          clearData();
+          props.closeAndFecth();
+        })
+        .catch((err) => {
+          messageError($q, err);
+        })
+        .finally(() => {
+          hideLoader();
+        });
     }
   });
 }
@@ -297,11 +295,15 @@ watch(props, () => {
 <template>
   <q-dialog v-model="props.modal" persistent>
     <q-card style="min-width: 900px">
-      <DialogHeader tittle="ยืม-คืนเครื่องราชฯ" :close="closeDialog" />
-      <q-separator />
-
-      <q-form ref="myForm">
-        <div class="q-pa-md bg-grey-1">
+      <q-form
+        ref="myForm "
+        greedy
+        @submit.prevent
+        @validation-success="onSubmit"
+      >
+        <DialogHeader tittle="ยืม-คืนเครื่องราชฯ" :close="closeDialog" />
+        <q-separator />
+        <q-card-section>
           <div
             class="row col-12 items-center q-col-gutter-x-xs q-col-gutter-y-xs"
           >
@@ -311,6 +313,7 @@ watch(props, () => {
             >
               <div class="col-6">
                 <q-select
+                  class="inputgreen"
                   v-model="roundNo"
                   dense
                   outlined
@@ -329,8 +332,8 @@ watch(props, () => {
                   :rules="[(val) => !!val || 'กรุณาเลือกรอบการขอเครื่องราชฯ']"
                   @update:model-value="fecthlistInsignia()"
                   @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundOption'
-                      ) "
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'filterSelectRoundOption'
+                    ) "
                 />
               </div>
               <div class="col-12 q-mt-md text-weight-bold text-grey-7">
@@ -346,11 +349,11 @@ watch(props, () => {
                   dense
                   lazy-rules
                   :rules="[
-                    (val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
-                    (val: string) =>
-                      val.length >= 13 ||
-                      `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
-                  ]"
+                  (val: string) => !!val || `${'กรุณากรอกเลขประจำตัวประชาชน'}`,
+                  (val: string) =>
+                    val.length >= 13 ||
+                    `${'กรุณากรอกเลขประจำตัวประชาชนให้ครบ'}`,
+                ]"
                   label="เลขประจำตัวประชาชน"
                   maxlength="13"
                   mask="#############"
@@ -409,6 +412,7 @@ watch(props, () => {
                   </template>
                   <template #trigger>
                     <q-input
+                      class="inputgreen"
                       dense
                       borderless
                       outlined
@@ -430,28 +434,6 @@ watch(props, () => {
                   </template>
                 </datepicker>
               </div>
-
-              <!-- <div class="col-xs-12 col-sm-6">
-                <q-select
-                  hide-bottom-space
-                  :options="filterOrgList"
-                  dense
-                  borderless
-                  option-label="name"
-                  option-value="id"
-                  emit-value
-                  use-input
-                  map-options
-                  outlined
-                  v-model="OrganazationId"
-                  lazy-rules
-                  :label="`เลือกหน่วยงาน`"
-                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงาน']"
-                  @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
-                      ) "
-                />
-              </div> -->
             </div>
 
             <div
@@ -505,26 +487,26 @@ watch(props, () => {
               </div>
 
               <!-- <div class="col-xs-12 col-sm-6">
-                <q-select
-                  hide-bottom-space
-                  :options="filterOrgList"
-                  dense
-                  lazy-rules
-                  borderless
-                  option-label="name"
-                  option-value="id"
-                  emit-value
-                  map-options
-                  outlined
-                  use-input
-                  v-model="OrganazationId"
-                  :label="`เลือกหน่วยงานที่ส่งคืน`"
-                  :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
-                  @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
-                      ) "
-                />
-              </div> -->
+              <q-select
+                hide-bottom-space
+                :options="filterOrgList"
+                dense
+                lazy-rules
+                borderless
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                outlined
+                use-input
+                v-model="OrganazationId"
+                :label="`เลือกหน่วยงานที่ส่งคืน`"
+                :rules="[(val) => !!val || 'กรุณาเลือกหน่วยงานที่คืน']"
+                @filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrgList'
+                    ) "
+              />
+            </div> -->
 
               <div class="col-12">
                 <q-input
@@ -542,19 +524,17 @@ watch(props, () => {
                   :label="`สาเหตุที่ส่งคืนเครื่องราชอิสริยาภรณ์`"
                 />
               </div>
-            </div>
-          </div>
-        </div>
-      </q-form>
+            </div></div
+        ></q-card-section>
 
-      <q-separator />
-      <div class="q-pa-md">
-        <div class="row justify-end">
-          <q-btn label="บันทึก" @click="clickSave" color="public">
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" type="submit" color="public">
             <q-tooltip>บันทึก</q-tooltip>
           </q-btn>
-        </div>
-      </div>
+        </q-card-actions>
+      </q-form>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/08_registryEmployee/stores/registry-employee.ts b/src/modules/08_registryEmployee/stores/registry-employee.ts
index dfaca7844..0f34dac2e 100644
--- a/src/modules/08_registryEmployee/stores/registry-employee.ts
+++ b/src/modules/08_registryEmployee/stores/registry-employee.ts
@@ -36,7 +36,7 @@ export const useRegistryEmp = defineStore("registry-employee", () => {
     switch (val) {
       case "WAITTING":
         return "รอดำเนินการ";
-      case "REPORT":
+      case "PENDING":
         return "เลือกตำแหน่งแล้ว";
       case "APPROVE":
         return "อนุมัติ";

From 6f9a82faa3f46ce7eafe8d8bcdffc70553197c3d Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 11 Jun 2024 11:17:43 +0700
Subject: [PATCH 07/15] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=20=3D>=20fix=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_registryNew/components/TableView.vue        |  8 ++++++--
 src/modules/04_registryNew/views/list.vue          | 14 --------------
 2 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/modules/04_registryNew/components/TableView.vue b/src/modules/04_registryNew/components/TableView.vue
index 3fbd2da6e..b8988c058 100644
--- a/src/modules/04_registryNew/components/TableView.vue
+++ b/src/modules/04_registryNew/components/TableView.vue
@@ -323,7 +323,9 @@ watch(
                   >
                     <q-tooltip>ดูทะเบียนประวัติ</q-tooltip>
                     {{
-                      `${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
+                      `${props.row.prefix ? props.row.prefix : ""}${
+                        props.row.firstName
+                      } ${props.row.lastName}`
                     }}
                   </div>
                   <div class="text-weight-light">{{ props.row.citizenId }}</div>
@@ -347,7 +349,9 @@ watch(
 
             <div class="text-weight-medium q-mt-md">
               {{
-                `${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
+                `${props.row.prefix ? props.row.prefix : ""}${
+                  props.row.firstName
+                } ${props.row.lastName}`
               }}
             </div>
             <div class="text-weight-light full-width text-center">
diff --git a/src/modules/04_registryNew/views/list.vue b/src/modules/04_registryNew/views/list.vue
index efbce7087..93d4f45c5 100644
--- a/src/modules/04_registryNew/views/list.vue
+++ b/src/modules/04_registryNew/views/list.vue
@@ -70,9 +70,6 @@ function fetchType() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -85,14 +82,10 @@ function fetchLevel() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 function fetchOptionGroup() {
-  showLoader();
   http
     .get(config.API.orgEmployeeType)
     .then((res) => {
@@ -100,14 +93,10 @@ function fetchOptionGroup() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 function fetchLevelGroup() {
-  showLoader();
   http
     .get(config.API.orgEmployeelevel)
     .then((res) => {
@@ -115,9 +104,6 @@ function fetchLevelGroup() {
     })
     .catch((err) => {
       messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 

From dafe59cf27cfda1fbbb0b972a913cfd4fd98f6f6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 11 Jun 2024 13:16:30 +0700
Subject: [PATCH 08/15] =?UTF-8?q?=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=80=E0=B8=A1=E0=B8=B4=E0=B8=93=20=3D>=20?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20form=20Dialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../indicatorByPlan/IndicatorByPlan.vue       | 787 +++++++++---------
 .../competency/02ListLinkPosition.vue         |   4 +-
 .../components/competency/03ListLinkGroup.vue |   4 +-
 .../components/competency/04ListCriteria.vue  | 151 ++--
 .../components/competency/AddPage.vue         |  21 +-
 .../components/competency/Forms/Main.vue      | 267 +++---
 .../01_metadataNew/interface/request/Main.ts  |   2 +-
 .../01_metadataNew/views/Strategic.vue        |  16 +-
 8 files changed, 619 insertions(+), 633 deletions(-)

diff --git a/src/modules/01_metadataNew/components/Indicators/indicatorByPlan/IndicatorByPlan.vue b/src/modules/01_metadataNew/components/Indicators/indicatorByPlan/IndicatorByPlan.vue
index bf1a832c1..fde9bee1d 100644
--- a/src/modules/01_metadataNew/components/Indicators/indicatorByPlan/IndicatorByPlan.vue
+++ b/src/modules/01_metadataNew/components/Indicators/indicatorByPlan/IndicatorByPlan.vue
@@ -1,3 +1,4 @@
+divdivdivdivdivdivdiv
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { QForm, useQuasar } from "quasar";
@@ -264,407 +265,411 @@ onMounted(() => {
 </script>
 
 <template>
-  <q-form @submit.prevent greedy @validation-success="onSubmit()">
-    <div>
-      <div class="row q-col-gutter-md q-pa-md">
-        <div class="col-2" v-if="editCheck">
-          <q-input
-            outlined
-            v-model="planData.including"
-            label="ลำดับ/รหัสตัวชี้วัด"
-            bg-color="white"
-            readonly
-            dense
-            class="inputgreen"
-          />
-        </div>
-        <div :class="`${editCheck ? 'col-6' : 'col-8'}`">
-          <q-input
-            outlined
-            v-model="planData.includingName"
-            label="ชื่อตัวชี้วัด"
-            bg-color="white"
-            dense
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'กรุณากรอกชิ่อตัวชี้วัด'}`]"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-2">
-          <datepicker
-            menu-class-name="modalfix"
-            v-model="year"
-            :locale="'th'"
-            autoApply
-            year-picker
-            :enableTimePicker="false"
-          >
-            <template #year="{ year }">{{ year + 543 }}</template>
-            <template #year-overlay-value="{ value }">{{
-              parseInt(value + 543)
-            }}</template>
-            <template #trigger>
-              <q-input
-                dense
-                outlined
-                class="inputgreen"
-                hide-bottom-space
-                :model-value="!!year ? year + 543 : null"
-                :label="`${'ปีงบประมาณ'}`"
-              >
-                <template v-slot:prepend>
-                  <q-icon
-                    name="event"
-                    class="cursor-pointer"
-                    style="color: var(--q-primary)"
-                  >
-                  </q-icon>
-                </template>
-                <template v-slot:append>
-                  <q-icon
-                    v-if="year"
-                    name="cancel"
-                    class="cursor-pointer"
-                    @click.stop.prevent="year = 0"
-                  />
-                </template>
-              </q-input>
-            </template>
-          </datepicker>
-        </div>
-        <div class="col-2">
-          <q-select
-            ref="inputRef"
-            dense
-            outlined
-            v-model="planData.period"
-            :options="roundOp"
-            label="รอบการประเมิน"
-            option-label="name"
-            option-value="id"
-            map-options
-            emit-value
-            class="inputgreen"
-          />
-        </div>
-        <div class="col-4">
-          <q-input
-            outlined
-            v-model="planData.target"
-            label="ค่าเป้าหมาย"
-            bg-color="white"
-            dense
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`]"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-4">
-          <q-input
-            outlined
-            v-model="planData.unit"
-            label="หน่วยนับ"
-            bg-color="white"
-            dense
-            lazy-rules
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'กรุณากรอกหน่วยนับ'}`]"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-4">
-          <q-input
-            outlined
-            v-model="planData.weight"
-            label="น้ำหนัก"
-            type="number"
-            bg-color="white"
-            dense
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'กรุณากรอกน้ำหนัก'}`]"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-12 row">
-          <div class="col-6">
-            <q-card flat bordered>
-              <q-card bordered>
-                <q-card-actions class="bg-grey-3 row">
+  <q-card>
+    <q-form @submit.prevent greedy @validation-success="onSubmit()">
+      <q-card-section>
+        <div class="row q-col-gutter-md q-pa-md">
+          <div class="col-2" v-if="editCheck">
+            <q-input
+              outlined
+              v-model="planData.including"
+              label="ลำดับ/รหัสตัวชี้วัด"
+              bg-color="white"
+              readonly
+              dense
+              class="inputgreen"
+            />
+          </div>
+          <div :class="`${editCheck ? 'col-6' : 'col-8'}`">
+            <q-input
+              outlined
+              v-model="planData.includingName"
+              label="ชื่อตัวชี้วัด"
+              bg-color="white"
+              dense
+              class="inputgreen"
+              :rules="[(val) => !!val || `${'กรุณากรอกชิ่อตัวชี้วัด'}`]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-2">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="year"
+              :locale="'th'"
+              autoApply
+              year-picker
+              :enableTimePicker="false"
+            >
+              <template #year="{ year }">{{ year + 543 }}</template>
+              <template #year-overlay-value="{ value }">{{
+                parseInt(value + 543)
+              }}</template>
+              <template #trigger>
+                <q-input
+                  dense
+                  outlined
+                  class="inputgreen"
+                  hide-bottom-space
+                  :model-value="!!year ? year + 543 : null"
+                  :label="`${'ปีงบประมาณ'}`"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                  <template v-slot:append>
+                    <q-icon
+                      v-if="year"
+                      name="cancel"
+                      class="cursor-pointer"
+                      @click.stop.prevent="year = 0"
+                    />
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-2">
+            <q-select
+              ref="inputRef"
+              dense
+              outlined
+              v-model="planData.period"
+              :options="roundOp"
+              label="รอบการประเมิน"
+              option-label="name"
+              option-value="id"
+              map-options
+              emit-value
+              class="inputgreen"
+            />
+          </div>
+          <div class="col-4">
+            <q-input
+              outlined
+              v-model="planData.target"
+              label="ค่าเป้าหมาย"
+              bg-color="white"
+              dense
+              class="inputgreen"
+              :rules="[(val) => !!val || `${'กรุณากรอกค่าเป้าหมาย'}`]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-4">
+            <q-input
+              outlined
+              v-model="planData.unit"
+              label="หน่วยนับ"
+              bg-color="white"
+              dense
+              lazy-rules
+              class="inputgreen"
+              :rules="[(val) => !!val || `${'กรุณากรอกหน่วยนับ'}`]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-4">
+            <q-input
+              outlined
+              v-model="planData.weight"
+              label="น้ำหนัก"
+              type="number"
+              bg-color="white"
+              dense
+              class="inputgreen"
+              :rules="[(val) => !!val || `${'กรุณากรอกน้ำหนัก'}`]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-12 row">
+            <div class="col-6">
+              <q-card flat bordered>
+                <q-card bordered>
+                  <q-card-actions class="bg-grey-3 row">
+                    <div class="col-4 flex justify-center items-center">
+                      <div>ระดับคะแนน</div>
+                    </div>
+                    <div class="col-8 q-px-xl">ผลสำเร็จของงาน</div>
+                  </q-card-actions>
+                </q-card>
+                <div class="row">
                   <div class="col-4 flex justify-center items-center">
-                    <div>ระดับคะแนน</div>
+                    <div>5</div>
                   </div>
-                  <div class="col-8 q-px-xl">ผลสำเร็จของงาน</div>
-                </q-card-actions>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="planData.achievement5"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>4</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="planData.achievement4"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>3</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="planData.achievement3"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>2</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="planData.achievement2"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-4 flex justify-center items-center">
+                    <div>1</div>
+                  </div>
+                  <div class="col-8 q-pa-sm">
+                    <q-input
+                      outlined
+                      v-model="planData.achievement1"
+                      label="กรอกผลสำเร็จของงาน"
+                      bg-color="white"
+                      dense
+                      class="inputgreen"
+                      :rules="[
+                        (val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`,
+                      ]"
+                      hide-bottom-space
+                    />
+                  </div>
+                </div>
               </q-card>
-              <div class="row">
-                <div class="col-4 flex justify-center items-center">
-                  <div>5</div>
-                </div>
-                <div class="col-8 q-pa-sm">
-                  <q-input
-                    outlined
-                    v-model="planData.achievement5"
-                    label="กรอกผลสำเร็จของงาน"
-                    bg-color="white"
-                    dense
-                    class="inputgreen"
-                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                    hide-bottom-space
-                  />
-                </div>
-              </div>
-              <div class="row">
-                <div class="col-4 flex justify-center items-center">
-                  <div>4</div>
-                </div>
-                <div class="col-8 q-pa-sm">
-                  <q-input
-                    outlined
-                    v-model="planData.achievement4"
-                    label="กรอกผลสำเร็จของงาน"
-                    bg-color="white"
-                    dense
-                    class="inputgreen"
-                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                    hide-bottom-space
-                  />
-                </div>
-              </div>
-              <div class="row">
-                <div class="col-4 flex justify-center items-center">
-                  <div>3</div>
-                </div>
-                <div class="col-8 q-pa-sm">
-                  <q-input
-                    outlined
-                    v-model="planData.achievement3"
-                    label="กรอกผลสำเร็จของงาน"
-                    bg-color="white"
-                    dense
-                    class="inputgreen"
-                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                    hide-bottom-space
-                  />
-                </div>
-              </div>
-              <div class="row">
-                <div class="col-4 flex justify-center items-center">
-                  <div>2</div>
-                </div>
-                <div class="col-8 q-pa-sm">
-                  <q-input
-                    outlined
-                    v-model="planData.achievement2"
-                    label="กรอกผลสำเร็จของงาน"
-                    bg-color="white"
-                    dense
-                    class="inputgreen"
-                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                    hide-bottom-space
-                  />
-                </div>
-              </div>
-              <div class="row">
-                <div class="col-4 flex justify-center items-center">
-                  <div>1</div>
-                </div>
-                <div class="col-8 q-pa-sm">
-                  <q-input
-                    outlined
-                    v-model="planData.achievement1"
-                    label="กรอกผลสำเร็จของงาน"
-                    bg-color="white"
-                    dense
-                    class="inputgreen"
-                    :rules="[(val) => !!val || `${'กรุณากรอกผลสำเร็จของงาน'}`]"
-                    hide-bottom-space
-                  />
-                </div>
+            </div>
+          </div>
+          <div class="col-12">
+            <q-input
+              outlined
+              v-model="planData.meaning"
+              label="นิยามหรือความหมาย"
+              type="textarea"
+              bg-color="white"
+              dense
+              class="inputgreen"
+              :rules="[(val) => !!val || `${'กรุณากรอกนิยามหรือความหมาย'}`]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-12">
+            <q-input
+              outlined
+              v-model="planData.formula"
+              label="สูตรคำนวณ"
+              bg-color="white"
+              type="textarea"
+              dense
+              class="inputgreen"
+              :rules="[(val) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
+              hide-bottom-space
+            />
+          </div>
+          <div class="col-6">
+            <q-card bordered class="col-12">
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+              >
+                หน่วยงาน/ส่วนราชการ
               </div>
+              <q-separator />
+
+              <q-card-section class="q-pa-sm">
+                <q-input
+                  dense
+                  outlined
+                  v-model="filterAgency"
+                  label="ค้นหา"
+                  class="inputgreen"
+                >
+                  <template v-slot:append>
+                    <q-icon
+                      v-if="filterAgency !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="filterAgency = ''"
+                    />
+                    <q-icon v-else name="search" color="grey-5" />
+                  </template>
+                </q-input>
+                <q-tree
+                  style="height: 350px; overflow: scroll"
+                  dense
+                  :nodes="nodeAgency"
+                  node-key="orgTreeId"
+                  label-key="orgTreeName"
+                  selected-color="primary"
+                  :filter="filterAgency"
+                  no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                  no-nodes-label="ไม่มีข้อมูล"
+                  v-model:expanded="expandedAgency"
+                  v-model:selected="planData.nodeId"
+                >
+                  <template v-slot:default-header="prop">
+                    <q-item
+                      clickable
+                      @click.stop="updateSelectedAgency(prop.node)"
+                      :active="planData.nodeId == prop.node.orgTreeId"
+                      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 text-grey-8">
+                          {{
+                            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-section>
             </q-card>
           </div>
-        </div>
-        <div class="col-12">
-          <q-input
-            outlined
-            v-model="planData.meaning"
-            label="นิยามหรือความหมาย"
-            type="textarea"
-            bg-color="white"
-            dense
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'กรุณากรอกนิยามหรือความหมาย'}`]"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-12">
-          <q-input
-            outlined
-            v-model="planData.formula"
-            label="สูตรคำนวณ"
-            bg-color="white"
-            type="textarea"
-            dense
-            class="inputgreen"
-            :rules="[(val) => !!val || `${'กรุณากรอกสูตรคำนวณ'}`]"
-            hide-bottom-space
-          />
-        </div>
-        <div class="col-6">
-          <q-card bordered class="col-12">
-            <div
-              class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-            >
-              หน่วยงาน/ส่วนราชการ
-            </div>
-            <q-separator />
+          <div class="col-6">
+            <q-card bordered class="col-12">
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+              >
+                ยุทธศาสตร์ / แผน
+              </div>
+              <q-separator />
 
-            <q-card-section class="q-pa-sm">
-              <q-input
-                dense
-                outlined
-                v-model="filterAgency"
-                label="ค้นหา"
-                class="inputgreen"
-              >
-                <template v-slot:append>
-                  <q-icon
-                    v-if="filterAgency !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filterAgency = ''"
-                  />
-                  <q-icon v-else name="search" color="grey-5" />
-                </template>
-              </q-input>
-              <q-tree
-                style="height: 350px; overflow: scroll"
-                dense
-                :nodes="nodeAgency"
-                node-key="orgTreeId"
-                label-key="orgTreeName"
-                selected-color="primary"
-                :filter="filterAgency"
-                no-results-label="ไม่พบข้อมูลที่ค้นหา"
-                no-nodes-label="ไม่มีข้อมูล"
-                v-model:expanded="expandedAgency"
-                v-model:selected="planData.nodeId"
-              >
-                <template v-slot:default-header="prop">
-                  <q-item
-                    clickable
-                    @click.stop="updateSelectedAgency(prop.node)"
-                    :active="planData.nodeId == prop.node.orgTreeId"
-                    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 }}
+              <q-card-section class="q-pa-sm">
+                <q-input
+                  dense
+                  outlined
+                  v-model="filter"
+                  label="ค้นหา"
+                  class="inputgreen"
+                >
+                  <template v-slot:append>
+                    <q-icon
+                      v-if="filter !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="filter = ''"
+                    />
+                    <q-icon v-else name="search" color="grey-5" />
+                  </template>
+                </q-input>
+                <q-tree
+                  style="height: 350px; overflow: scroll"
+                  dense
+                  :nodes="nodeplan"
+                  selected-color="primary"
+                  node-key="id"
+                  label-key="name"
+                  :filter="filter"
+                  no-results-label="ไม่พบข้อมูลที่ค้นหา"
+                  no-nodes-label="ไม่มีข้อมูล"
+                  v-model:expanded="expandedPlan"
+                  v-model:selected="planData.strategyId"
+                >
+                  <template v-slot:default-header="prop">
+                    <q-item
+                      clickable
+                      @click.stop="updateSelected(prop.node)"
+                      :active="planData.strategyId == prop.node.id"
+                      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.name }}
+                        </div>
                       </div>
-                      <div class="text-weight-light text-grey-8">
-                        {{
-                          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-section>
-          </q-card>
+                    </q-item>
+                  </template>
+                </q-tree>
+              </q-card-section>
+            </q-card>
+          </div>
+          <div class="col-12">
+            <q-input
+              class="inputgreen"
+              v-model="planData.documentInfoEvidence"
+              label="ข้อมูลเอกสารหลักฐาน"
+              outlined
+              dense
+              type="textarea"
+            ></q-input>
+          </div>
         </div>
-        <div class="col-6">
-          <q-card bordered class="col-12">
-            <div
-              class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
-            >
-              ยุทธศาสตร์ / แผน
-            </div>
-            <q-separator />
-
-            <q-card-section class="q-pa-sm">
-              <q-input
-                dense
-                outlined
-                v-model="filter"
-                label="ค้นหา"
-                class="inputgreen"
-              >
-                <template v-slot:append>
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
-                  <q-icon v-else name="search" color="grey-5" />
-                </template>
-              </q-input>
-              <q-tree
-                style="height: 350px; overflow: scroll"
-                dense
-                :nodes="nodeplan"
-                selected-color="primary"
-                node-key="id"
-                label-key="name"
-                :filter="filter"
-                no-results-label="ไม่พบข้อมูลที่ค้นหา"
-                no-nodes-label="ไม่มีข้อมูล"
-                v-model:expanded="expandedPlan"
-                v-model:selected="planData.strategyId"
-              >
-                <template v-slot:default-header="prop">
-                  <q-item
-                    clickable
-                    @click.stop="updateSelected(prop.node)"
-                    :active="planData.strategyId == prop.node.id"
-                    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.name }}
-                      </div>
-                    </div>
-                  </q-item>
-                </template>
-              </q-tree>
-            </q-card-section>
-          </q-card>
-        </div>
-        <div class="col-12">
-          <q-input
-            class="inputgreen"
-            v-model="planData.documentInfoEvidence"
-            label="ข้อมูลเอกสารหลักฐาน"
-            outlined
-            dense
-            type="textarea"
-          ></q-input>
-        </div>
-      </div>
+      </q-card-section>
       <q-separator color="grey-4" />
-    </div>
-    <q-toolbar class="fit row wrap justify-end items-start content-start">
-      <q-btn
-        dense
-        unelevated
-        label="บันทึก"
-        id="onSubmit"
-        type="submit"
-        color="public"
-        class="q-px-md"
-      >
-        <q-tooltip>บันทึกข้อมูล</q-tooltip>
-      </q-btn>
-    </q-toolbar>
-  </q-form>
+      <q-card-actions align="right">
+        <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-form>
+  </q-card>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/modules/01_metadataNew/components/competency/02ListLinkPosition.vue b/src/modules/01_metadataNew/components/competency/02ListLinkPosition.vue
index 86d8a93b9..d2a865332 100644
--- a/src/modules/01_metadataNew/components/competency/02ListLinkPosition.vue
+++ b/src/modules/01_metadataNew/components/competency/02ListLinkPosition.vue
@@ -337,12 +337,10 @@ onMounted(async () => {
           />
         </q-card-section>
         <q-separator />
-        <q-card-actions align="right" class="bg-white text-teal">
+        <q-card-actions align="right">
           <q-btn
             type="submit"
             for="#submitForm"
-            unelevated
-            dense
             class="q-px-md items-center"
             color="public"
             label="บันทึก"
diff --git a/src/modules/01_metadataNew/components/competency/03ListLinkGroup.vue b/src/modules/01_metadataNew/components/competency/03ListLinkGroup.vue
index bfe5bba59..6eb54fd3a 100644
--- a/src/modules/01_metadataNew/components/competency/03ListLinkGroup.vue
+++ b/src/modules/01_metadataNew/components/competency/03ListLinkGroup.vue
@@ -571,12 +571,10 @@ onMounted(async () => {
           </div>
         </q-card-section>
         <q-separator />
-        <q-card-actions align="right" class="bg-white text-teal">
+        <q-card-actions align="right">
           <q-btn
             type="submit"
             for="#submitForm"
-            unelevated
-            dense
             class="q-px-md items-center"
             color="public"
             label="บันทึก"
diff --git a/src/modules/01_metadataNew/components/competency/04ListCriteria.vue b/src/modules/01_metadataNew/components/competency/04ListCriteria.vue
index b4cca12a9..0ec81be57 100644
--- a/src/modules/01_metadataNew/components/competency/04ListCriteria.vue
+++ b/src/modules/01_metadataNew/components/competency/04ListCriteria.vue
@@ -67,83 +67,90 @@ onMounted(() => {
 </script>
 
 <template>
-  <q-card flat bordered>
+  <q-card>
     <q-form greedy @submit.prevent @validation-success="onSubmit">
-      <q-card-section class="bg-grey-3 q-pa-sm">
-        <div class="row text-dark text-body2 text-weight-medium">
-          <div class="text-center col-8">เกณฑ์การประเมิน</div>
-          <div class="text-center col-4">ระดับคะแนน</div>
-        </div>
-      </q-card-section>
-      <q-card-section class="q-pa-none">
-        <div v-for="(field, index) in dataLevel" :key="field.id">
-          <div class="row q-pa-sm">
-            <div class="col-8 text-left">
-              <q-field
-                class="q_field_p_none"
-                ref="fieldRef"
-                v-model="field.description"
-                label-slot
-                borderless
-                :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
-                hide-bottom-space
-              >
-                <template #control>
-                  <q-editor
-                    class="full-width"
+      <q-card-section>
+        <q-card flat bordered>
+          <q-card-section class="bg-grey-3">
+            <div class="row text-dark text-body2 text-weight-medium">
+              <div class="text-center col-8">เกณฑ์การประเมิน</div>
+              <div class="text-center col-4">ระดับคะแนน</div>
+            </div>
+          </q-card-section>
+          <q-card-section class="q-pa-none">
+            <div v-for="(field, index) in dataLevel" :key="field.id">
+              <div class="row q-pa-sm">
+                <div class="col-8 text-left">
+                  <q-field
+                    class="q_field_p_none"
+                    ref="fieldRef"
                     v-model="field.description"
-                    :dense="$q.screen.lt.md"
-                    min-height="5rem"
-                    :toolbar="[
-                      [
-                        'bold',
-                        'italic',
-                        'strike',
-                        'underline',
-                        'subscript',
-                        'superscript',
-                      ],
+                    label-slot
+                    borderless
+                    :rules="[(val) => !!val || 'กรุณากรอกมาตรฐานพฤติกรรม']"
+                    hide-bottom-space
+                  >
+                    <template #control>
+                      <q-editor
+                        class="full-width"
+                        v-model="field.description"
+                        :dense="$q.screen.lt.md"
+                        min-height="5rem"
+                        :toolbar="[
+                          [
+                            'bold',
+                            'italic',
+                            'strike',
+                            'underline',
+                            'subscript',
+                            'superscript',
+                          ],
 
-                      ['unordered', 'ordered'],
-                    ]"
-                    :fonts="{
-                      arial: 'Arial',
-                      arial_black: 'Arial Black',
-                      comic_sans: 'Comic Sans MS',
-                      courier_new: 'Courier New',
-                      impact: 'Impact',
-                      lucida_grande: 'Lucida Grande',
-                      times_new_roman: 'Times New Roman',
-                      verdana: 'Verdana',
-                    }"
-                  />
-                </template>
-              </q-field>
-              <!-- <q-input
-              v-model="formScore[field]"
-              dense
-              outlined
-              class="inputgreen"
-              label="กรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น"
-              :rules="[(val:string) => !!val || `${'กรุณากรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น'}`,]"
-              hide-bottom-space
-            /> -->
+                          ['unordered', 'ordered'],
+                        ]"
+                        :fonts="{
+                          arial: 'Arial',
+                          arial_black: 'Arial Black',
+                          comic_sans: 'Comic Sans MS',
+                          courier_new: 'Courier New',
+                          impact: 'Impact',
+                          lucida_grande: 'Lucida Grande',
+                          times_new_roman: 'Times New Roman',
+                          verdana: 'Verdana',
+                        }"
+                      />
+                    </template>
+                  </q-field>
+                  <!-- <q-input
+                  v-model="formScore[field]"
+                  dense
+                  outlined
+                  class="inputgreen"
+                  label="กรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอกข้อความเพื่อไว้ใช้อ้างอิงเท่านั้น'}`,]"
+                  hide-bottom-space
+                /> -->
+                </div>
+                <div
+                  class="col-4 text-center text-body1 text-weight-bold self-center"
+                >
+                  {{ field.level }}
+                </div>
+              </div>
+              <div
+                class="col-12"
+                v-if="index !== Object.keys(fieldLabels).length - 1"
+              >
+                <q-separator />
+              </div>
             </div>
-            <div
-              class="col-4 text-center text-body1 text-weight-bold self-center"
-            >
-              {{ field.level }}
-            </div>
-          </div>
-          <div
-            class="col-12"
-            v-if="index !== Object.keys(fieldLabels).length - 1"
-          >
-            <q-separator />
-          </div>
-        </div>
+          </q-card-section>
+        </q-card>
       </q-card-section>
-      <q-card-actions align="right" class="bg-white text-teal">
+
+      <q-separator />
+
+      <q-card-actions align="right">
         <q-btn label="บันทึก" color="secondary" type="submit"
           ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
         >
diff --git a/src/modules/01_metadataNew/components/competency/AddPage.vue b/src/modules/01_metadataNew/components/competency/AddPage.vue
index 08cf1c1a2..047877f7d 100644
--- a/src/modules/01_metadataNew/components/competency/AddPage.vue
+++ b/src/modules/01_metadataNew/components/competency/AddPage.vue
@@ -3,11 +3,7 @@ import { ref, reactive } from "vue";
 import { useRouter } from "vue-router";
 
 import Main from "@/modules/01_metadataNew/components/competency/Forms/Main.vue";
-// import FormMain from "@/modules/14_KPI/components/competency/Forms/01_FormMain.vue";
-// import FormGroup from "@/modules/14_KPI/components/competency/Forms/02_FormGroup.vue";
-// import FormExecutive from "@/modules/14_KPI/components/competency/Forms/03_FormExecutive.vue";
-// import FormExecutivePosition from "@/modules/14_KPI/components/competency/Forms/04_FormExecutivePosition.vue";
-// import FormExecutiveLevel from "@/modules/14_KPI/components/competency/Forms/05_FormExecutiveLevel.vue";
+
 import { useKPIDataStore } from "@/modules/01_metadataNew/stores/KPIStore";
 
 import type { DataOption } from "@/modules/01_metadataNew/interface/index/Main";
@@ -88,11 +84,9 @@ function onSubmit() {
     />
     <span class="toptitle text-dark">เพิ่ม/แก้ไขสมรรถนะ</span>
   </div>
-  <q-card flat bordered>
-    <!-- @submit.prevent @validation-success="onSubmit" -->
-    <!-- <q-form greedy> -->
+  <q-card>
     <q-card-section>
-      <div class="row q-col-gutter-sm">
+      <div class="row">
         <div class="col-12">
           <q-select
             v-model="store.competencyTypeVal"
@@ -106,16 +100,11 @@ function onSubmit() {
             map-options
             :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทสมรรถนะ'}`,]"
             hide-bottom-space
+            class="inputgreen"
           />
         </div>
-
-        <Main />
-        <!-- <FormMain v-if="store.competencyType === 'ID1'" />
-        <FormGroup v-else-if="store.competencyType === 'ID2'" />
-        <FormExecutive v-else-if="store.competencyType === 'ID3'" />
-        <FormExecutivePosition v-else-if="store.competencyType === 'ID4'" />
-        <FormExecutiveLevel v-else-if="store.competencyType === 'ID5'" /> -->
       </div>
     </q-card-section>
+    <Main />
   </q-card>
 </template>
diff --git a/src/modules/01_metadataNew/components/competency/Forms/Main.vue b/src/modules/01_metadataNew/components/competency/Forms/Main.vue
index 1b79574ad..b919bc383 100644
--- a/src/modules/01_metadataNew/components/competency/Forms/Main.vue
+++ b/src/modules/01_metadataNew/components/competency/Forms/Main.vue
@@ -1,4 +1,3 @@
-div
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
@@ -107,19 +106,21 @@ onMounted(() => {
 
 <template>
   <q-form greedy @submit.prevent @validation-success="onSubmit" class="col-12">
-    <div class="row">
-      <div class="col-12">
-        <q-input
-          v-model="formData.competencyName"
-          dense
-          outlined
-          label="ชื่อสมรรถนะ"
-          :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`,]"
-          hide-bottom-space
-        />
-      </div>
-      <q-card-section class="col-12 q-px-none">
-        <div>
+    <q-card-section class="q-pt-none">
+      <div class="row q-col-gutter-sm">
+        <div class="col-12">
+          <q-input
+            v-model="formData.competencyName"
+            dense
+            outlined
+            label="ชื่อสมรรถนะ"
+            :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสมรรถนะ'}`,]"
+            hide-bottom-space
+            class="inputgreen"
+          />
+        </div>
+
+        <div class="col-12">
           <q-field
             class="q_field_p_none"
             ref="fieldRef"
@@ -162,133 +163,129 @@ onMounted(() => {
             </template>
           </q-field>
         </div>
-      </q-card-section>
-      <div class="col-12">
-        <q-card flat bordered>
-          <q-card-section class="bg-grey-4">
-            <div
-              class="row items-center text-dark text-body2 text-weight-medium"
-            >
-              <div class="col-3">
-                <div class="row items-center">
-                  <div class="col-1">
-                    <q-btn
-                      dense
-                      flat
-                      round
-                      color="primary"
-                      icon="add"
-                      @click="onClickAddLevels"
-                    >
-                      <q-tooltip>เพิ่ม</q-tooltip></q-btn
-                    >
-                  </div>
-                  <div class="col-11 text-center">
-                    <span>ระดับสมรรถนะ</span>
-                  </div>
-                </div>
-              </div>
-              <div class="col-4">
-                <span>พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
-              </div>
-            </div>
-          </q-card-section>
-          <q-card-section>
-            <div
-              class="row q-pa-sm"
-              v-for="(items, index) in formData.levels"
-              key="index"
-            >
-              <div class="col-3 align-center q-pr-lg">
-                <q-input
-                  :readonly="
-                    store.competencyTypeVal === 'HEAD' ||
-                    store.competencyTypeVal === 'GROUP'
-                  "
-                  v-model="formData.levels[index].level"
-                  dense
-                  outlined
-                  :rules="[(val:string) => !!val || `${'กรุณากรอกระดับสมรรถนะ'}`,]"
-                  hide-bottom-space
-                />
-              </div>
-              <div class="col-9">
-                <div class="row q-col-gutter-md">
-                  <div class="col-11">
-                    <q-field
-                      class="q_field_p_none"
-                      ref="fieldRef"
-                      v-model="formData.levels[index].description"
-                      label-slot
-                      borderless
-                      :rules="[
-                        (val) =>
-                          !!val || 'กรุณากรอกพฤติกรรมที่คาดหวัง/พฤติกรรมย่อย',
-                      ]"
-                      hide-bottom-space
-                    >
-                      <template #control>
-                        <q-editor
-                          class="full-width"
-                          v-model="formData.levels[index].description"
-                          :dense="$q.screen.lt.md"
-                          min-height="5rem"
-                          :toolbar="[
-                            [
-                              'bold',
-                              'italic',
-                              'strike',
-                              'underline',
-                              'subscript',
-                              'superscript',
-                            ],
 
-                            ['unordered', 'ordered'],
-                          ]"
-                        />
-                      </template>
-                    </q-field>
+        <div class="col-12">
+          <q-card flat bordered>
+            <q-card-section class="bg-grey-4">
+              <div
+                class="row items-center text-dark text-body2 text-weight-medium"
+              >
+                <div class="col-3">
+                  <div class="row items-center">
+                    <div class="col-1">
+                      <q-btn
+                        dense
+                        flat
+                        round
+                        color="primary"
+                        icon="add"
+                        @click="onClickAddLevels"
+                      >
+                        <q-tooltip>เพิ่ม</q-tooltip></q-btn
+                      >
+                    </div>
+                    <div class="col-11 text-center">
+                      <span>ระดับสมรรถนะ</span>
+                    </div>
                   </div>
-                  <div class="col-1 text-center">
-                    <q-btn
-                      dense
-                      flat
-                      round
-                      color="red"
-                      icon="delete"
-                      @click="onDeleteLevels(index)"
-                      v-if="
-                        (store.competencyTypeVal === 'HEAD' && index > 4) ||
-                        (store.competencyTypeVal === 'GROUP' && index > 4) ||
-                        ((store.competencyTypeVal === 'EXECUTIVE' ||
-                          store.competencyTypeVal === 'DIRECTOR' ||
-                          store.competencyTypeVal === 'INSPECTOR') &&
-                          index > 0)
-                      "
-                    >
-                      <q-tooltip>ลบ</q-tooltip></q-btn
-                    >
+                </div>
+                <div class="col-4">
+                  <span>พฤติกรรมที่คาดหวัง/พฤติกรรมย่อย</span>
+                </div>
+              </div>
+            </q-card-section>
+            <q-card-section>
+              <div
+                class="row q-pa-sm"
+                v-for="(items, index) in formData.levels"
+                key="index"
+              >
+                <div class="col-3 align-center q-pr-lg">
+                  <q-input
+                    :readonly="
+                      store.competencyTypeVal === 'HEAD' ||
+                      store.competencyTypeVal === 'GROUP'
+                    "
+                    v-model="formData.levels[index].level"
+                    dense
+                    outlined
+                    :rules="[(val:string) => !!val || `${'กรุณากรอกระดับสมรรถนะ'}`,]"
+                    hide-bottom-space
+                  />
+                </div>
+                <div class="col-9">
+                  <div class="row q-col-gutter-md">
+                    <div class="col-11">
+                      <q-field
+                        class="q_field_p_none"
+                        ref="fieldRef"
+                        v-model="formData.levels[index].description"
+                        label-slot
+                        borderless
+                        :rules="[
+                          (val) =>
+                            !!val || 'กรุณากรอกพฤติกรรมที่คาดหวัง/พฤติกรรมย่อย',
+                        ]"
+                        hide-bottom-space
+                      >
+                        <template #control>
+                          <q-editor
+                            class="full-width"
+                            v-model="formData.levels[index].description"
+                            :dense="$q.screen.lt.md"
+                            min-height="5rem"
+                            :toolbar="[
+                              [
+                                'bold',
+                                'italic',
+                                'strike',
+                                'underline',
+                                'subscript',
+                                'superscript',
+                              ],
+
+                              ['unordered', 'ordered'],
+                            ]"
+                          />
+                        </template>
+                      </q-field>
+                    </div>
+                    <div class="col-1 text-center">
+                      <q-btn
+                        dense
+                        flat
+                        round
+                        color="red"
+                        icon="delete"
+                        @click="onDeleteLevels(index)"
+                        v-if="
+                          (store.competencyTypeVal === 'HEAD' && index > 4) ||
+                          (store.competencyTypeVal === 'GROUP' && index > 4) ||
+                          ((store.competencyTypeVal === 'EXECUTIVE' ||
+                            store.competencyTypeVal === 'DIRECTOR' ||
+                            store.competencyTypeVal === 'INSPECTOR') &&
+                            index > 0)
+                        "
+                      >
+                        <q-tooltip>ลบ</q-tooltip></q-btn
+                      >
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          </q-card-section>
-        </q-card>
+            </q-card-section>
+          </q-card>
+        </div>
       </div>
-      <div class="col-12 q-my-sm"><q-separator /></div>
-      <div class="col-12 row justify-end">
-        <q-btn
-          dense
-          unelevated
-          label="บันทึก"
-          color="public"
-          class="q-px-md"
-          type="submit"
-        >
-          <q-tooltip>บันทึกข้อมูล</q-tooltip>
-        </q-btn>
-      </div>
-    </div>
+    </q-card-section>
+
+    <div class="col-12"><q-separator /></div>
+
+    <q-card-actions align="right">
+      <q-btn label="บันทึก" color="public" class="q-px-md" type="submit">
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+    </q-card-actions>
   </q-form>
 </template>
 
diff --git a/src/modules/01_metadataNew/interface/request/Main.ts b/src/modules/01_metadataNew/interface/request/Main.ts
index 613163525..0dec0732c 100644
--- a/src/modules/01_metadataNew/interface/request/Main.ts
+++ b/src/modules/01_metadataNew/interface/request/Main.ts
@@ -28,7 +28,7 @@ interface FormDataRole {
   includingName: string;
   target: string;
   unit: string;
-  weight: string;
+  weight: string | null;
   meaning: string;
   formula: string;
   documentInfoEvidence: string;
diff --git a/src/modules/01_metadataNew/views/Strategic.vue b/src/modules/01_metadataNew/views/Strategic.vue
index 80a52d532..a93591f84 100644
--- a/src/modules/01_metadataNew/views/Strategic.vue
+++ b/src/modules/01_metadataNew/views/Strategic.vue
@@ -328,8 +328,8 @@ onMounted(() => {
         />
         <q-separator />
 
-        <q-card-section class="q-pt-none">
-          <div class="row q-pa-md">
+        <q-card-section>
+          <div class="row">
             <div class="col">
               <q-input
                 dense
@@ -349,16 +349,8 @@ onMounted(() => {
         </q-card-section>
         <q-separator />
 
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-px-md"
-          >
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>

From 65647f79f0bfcadb42b9ed005229bb49a7dd1884 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 11 Jun 2024 13:35:46 +0700
Subject: [PATCH 09/15] =?UTF-8?q?=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=87=E0=B8=9B=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=97=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=20=3D>=20fix=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/MainProbation.vue     | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 237c3ff9c..4592a32f1 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -110,7 +110,8 @@ const columns = ref<QTableProps["columns"]>([
     sortable: true,
     field: "organization",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
+    style: "font-size: 14px ",
+    classes: "table_ellipsis",
   },
   {
     name: "probation_no",
@@ -179,7 +180,10 @@ const columns2 = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     format(val, row) {
-      return row.posTypeName + " (" + row.posLevelName + ")";
+      return (
+        (row.posTypeName ? row.posTypeName : "") +
+        (row.posLevelName !== null ? " (" + row.posLevelName + ")" : "")
+      );
     },
   },
   {
@@ -250,7 +254,7 @@ async function getpersonalList() {
         position_line_id: item.position_line_id,
         position_level: item.position_level,
         position_level_id: item.position_level_id,
-        organization: item.organization,
+        organization: item.organization !== "" ? item.organization : "-",
         probation_no: item.probation_no,
         order_number: item.order_number != "xx/2566" ? item.order_number : "-",
         probation_status: statusProbationMain(Number(item.probation_status)),
@@ -382,9 +386,7 @@ function clickAdd(data: any) {
     $q,
     async () => {
       showLoader();
-      // const postData = {
-      //   personal_id: id,
-      // };
+
       await http
         .post(config.API.personalAdd(), data)
         .then(() => {
@@ -582,7 +584,7 @@ onMounted(async () => {
                   {{ props.rowIndex + 1 }}
                 </div>
                 <div v-else>
-                  {{ col.value }}
+                  {{ col.value ?? "-" }}
                 </div>
               </q-td>
             </q-tr>
@@ -680,7 +682,7 @@ onMounted(async () => {
 
                     <div v-else-if="col.name == 'fullname'">
                       {{
-                        props.row.prefix +
+                        (props.row.prefix ? props.row.prefix : "") +
                         props.row.firstName +
                         "  " +
                         props.row.lastName

From e4ef1e3cb32c6f7c31500a24b8faa843d80afbf8 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Tue, 11 Jun 2024 13:46:27 +0700
Subject: [PATCH 10/15] fixing show null

---
 .../components/probation/FormAssign.vue       | 82 ++++++++++++-------
 1 file changed, 51 insertions(+), 31 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index 484e7cee3..c5e502228 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -165,20 +165,20 @@ interface CheckboxItem {
 async function dataEdit(id: string) {
   // await myForm.value.validate().then((result: boolean) => {
   //   if (result) {
-      showLoader();
-      const data = putDataEdit(id);
-      http
-        .put(config.API.saveEditAssign(id), data)
-        .then(() => {})
-        .catch(() => {})
-        .finally(async () => {
-          isEdit.value = false;
-          getAssign();
-          hideLoader();
-        });
-    // } else {
-    //   dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
-    // }
+  showLoader();
+  const data = putDataEdit(id);
+  http
+    .put(config.API.saveEditAssign(id), data)
+    .then(() => {})
+    .catch(() => {})
+    .finally(async () => {
+      isEdit.value = false;
+      getAssign();
+      hideLoader();
+    });
+  // } else {
+  //   dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
+  // }
   // });
 }
 
@@ -308,16 +308,22 @@ async function getUser() {
 
       OPcaretaker.value = data.caregiver.map((item: any) => ({
         id: item.id,
-        name: item.prefix + item.firstName + " " + item.lastName,
+        name:
+          (item.prefix == null ? "" : item.prefix) +
+          item.firstName +
+          " " +
+          item.lastName,
         label: item.position
-          ? `${item.prefix} ${item.firstName} ${item.lastName} (${
-              item.position
-            }${
+          ? `${item.prefix == null ? "" : item.prefix} ${item.firstName} ${
+              item.lastName
+            } (${item.position}${
               item.posLevel && item.posType
                 ? ", " + item.posType + ": " + item.posLevel
                 : ""
             })`
-          : `${item.prefix} ${item.firstName} ${item.lastName}`,
+          : `${item.prefix == null ? "" : item.prefix} ${item.firstName} ${
+              item.lastName
+            }`,
         citizenId: item.citizenId,
         isDirector: item.isDirector,
         posLevel: item.posLevel,
@@ -327,16 +333,22 @@ async function getUser() {
 
       OPcommander.value = data.commander.map((item: any) => ({
         id: item.id,
-        name: item.prefix + item.firstName + " " + item.lastName,
+        name:
+          (item.prefix == null ? "" : item.prefix) +
+          item.firstName +
+          " " +
+          item.lastName,
         label: item.position
-          ? `${item.prefix} ${item.firstName} ${item.lastName} (${
-              item.position
-            }${
+          ? `${item.prefix == null ? "" : item.prefix} ${item.firstName} ${
+              item.lastName
+            } (${item.position}${
               item.posLevel && item.posType
                 ? ", " + item.posType + ": " + item.posLevel
                 : ""
             })`
-          : `${item.prefix} ${item.firstName} ${item.lastName}`,
+          : `${item.prefix == null ? "" : item.prefix} ${item.firstName} ${
+              item.lastName
+            }`,
         citizenId: item.citizenId,
         posLevel: item.posLevel,
         posType: item.posType,
@@ -345,16 +357,22 @@ async function getUser() {
 
       OPchairman.value = data.chairman.map((item: any) => ({
         id: item.id,
-        name: item.prefix + item.firstName + " " + item.lastName,
+        name:
+          (item.prefix == null ? "-" : item.prefix) +
+          item.firstName +
+          " " +
+          item.lastName,
         label: item.position
-          ? `${item.prefix} ${item.firstName} ${item.lastName} (${
-              item.position
-            }${
+          ? `${item.prefix == null ? "-" : item.prefix} ${item.firstName} ${
+              item.lastName
+            } (${item.position}${
               item.posLevel && item.posType
                 ? ", " + item.posType + ": " + item.posLevel
                 : ""
             })`
-          : `${item.prefix} ${item.firstName} ${item.lastName}`,
+          : `${item.prefix == null ? "-" : item.prefix} ${item.firstName} ${
+              item.lastName
+            }`,
         citizenId: item.citizenId,
         posLevel: item.posLevel,
         posType: item.posType,
@@ -378,7 +396,7 @@ async function getAssignNew(id: string) {
     monthOp.push(monthOption);
     monthSelect.value = `${data.assign_month} เดือน`;
     fullname.value =
-      data.person.prefixName +
+      (data.person.prefixName == null ? "" : data.person.prefixName) +
       data.person.firstName +
       " " +
       data.person.lastName;
@@ -1059,7 +1077,9 @@ onMounted(async () => {
   <q-form
     greedy
     @submit.prevent
-    @validation-success="assignId !== undefined ? saveEdit(assignId) : saveData(personalId)"
+    @validation-success="
+      assignId !== undefined ? saveEdit(assignId) : saveData(personalId)
+    "
   >
     <div class="q-pa-sm">
       <div class="toptitle text-dark col-12 row items-center">

From a2b8dfa3088cd35eb0d3f3290df79a9754cff521 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 11 Jun 2024 13:57:52 +0700
Subject: [PATCH 11/15] =?UTF-8?q?=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=AD=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=A3=E0=B8=B2=E0=B8=81=E0=B8=B3=E0=B8=A5=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=87=20=3D>=20=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20form?=
 =?UTF-8?q?=20Dialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogHistoryPos.vue                    |  2 +-
 .../components/DialogSortAgency.vue                    | 10 +++++-----
 .../components/DialogSuccession.vue                    |  6 ++++--
 .../components/DialogSuccession.vue                    |  6 ++++--
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/DialogHistoryPos.vue b/src/modules/02_organizationalNew/components/DialogHistoryPos.vue
index 8b43743da..6a69a3504 100644
--- a/src/modules/02_organizationalNew/components/DialogHistoryPos.vue
+++ b/src/modules/02_organizationalNew/components/DialogHistoryPos.vue
@@ -121,7 +121,7 @@ watch(
         "
       />
       <q-separator />
-      <q-card-section class="q-pt-none q-pa-sm">
+      <q-card-section>
         <d-table
           flat
           bordered
diff --git a/src/modules/02_organizationalNew/components/DialogSortAgency.vue b/src/modules/02_organizationalNew/components/DialogSortAgency.vue
index fbc2f1829..eab3648bc 100644
--- a/src/modules/02_organizationalNew/components/DialogSortAgency.vue
+++ b/src/modules/02_organizationalNew/components/DialogSortAgency.vue
@@ -95,14 +95,13 @@ watch(
   <template>
     <q-dialog v-model="modal" persistent>
       <q-card style="min-width: 50vw">
-        <!-- <form @submit.prevent="validateForm"> -->
         <DialogHeader
           :tittle="`จัดลำดับ${type == 0 ? 'หน่วยงาน' : 'ส่วนราชการ'}`"
           :close="() => (modal = false)"
         />
         <q-separator />
 
-        <q-card-section>
+        <q-card-section style="max-height: 70vh" class="scroll">
           <q-table
             v-draggable-table="{
               options: {
@@ -124,10 +123,11 @@ watch(
           />
         </q-card-section>
         <q-separator />
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn type="submit" :label="`บันทึก`" color="public" @click="save" />
+        <q-card-actions align="right">
+          <q-btn type="submit" :label="`บันทึก`" color="public" @click="save" >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
         </q-card-actions>
-        <!-- </form> -->
       </q-card>
     </q-dialog>
   </template>
diff --git a/src/modules/02_organizationalNew/components/DialogSuccession.vue b/src/modules/02_organizationalNew/components/DialogSuccession.vue
index d6fca2c21..6180f17fa 100644
--- a/src/modules/02_organizationalNew/components/DialogSuccession.vue
+++ b/src/modules/02_organizationalNew/components/DialogSuccession.vue
@@ -396,8 +396,10 @@ function clearForm() {
 
       <q-separator />
 
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="สืบทอดตำแหน่ง" color="public" @click="onClickConfirm" />
+      <q-card-actions align="right">
+        <q-btn label="สืบทอดตำแหน่ง" color="public" @click="onClickConfirm">
+          <q-tooltip>สืบทอดตำแหน่ง</q-tooltip></q-btn
+        >
       </q-card-actions>
     </q-card>
   </q-dialog>
diff --git a/src/modules/16_positionEmployee/components/DialogSuccession.vue b/src/modules/16_positionEmployee/components/DialogSuccession.vue
index 3334c340b..60e79ace5 100644
--- a/src/modules/16_positionEmployee/components/DialogSuccession.vue
+++ b/src/modules/16_positionEmployee/components/DialogSuccession.vue
@@ -393,8 +393,10 @@ function clearForm() {
 
       <q-separator />
 
-      <q-card-actions align="right" class="bg-white text-teal">
-        <q-btn label="สืบทอดตำแหน่ง" color="public" @click="onClickConfirm" />
+      <q-card-actions align="right">
+        <q-btn label="สืบทอดตำแหน่ง" color="public" @click="onClickConfirm">
+          <q-tooltip>สืบทอดตำแหน่ง</q-tooltip>
+        </q-btn>
       </q-card-actions>
     </q-card>
   </q-dialog>

From f18e224db0030baeb6170a6e9793850ebe042b13 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 11 Jun 2024 14:03:49 +0700
Subject: [PATCH 12/15] =?UTF-8?q?=E0=B8=AD=E0=B8=B1=E0=B8=95=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=81=E0=B8=B3=E0=B8=A5=E0=B8=B1=E0=B8=87=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=88=E0=B8=B3=20=E0=B8=AF=20=3D>=20?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02_organizationalNew/components/DialogFormPosition.vue  | 6 ++++--
 .../02_organizationalNew/components/DialogSortPosition.vue  | 6 ++++--
 .../16_positionEmployee/components/DialogFormPosition.vue   | 6 ++++--
 .../16_positionEmployee/components/DialogSortPosition.vue   | 6 ++++--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/modules/02_organizationalNew/components/DialogFormPosition.vue b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
index 859053e83..d43ecf562 100644
--- a/src/modules/02_organizationalNew/components/DialogFormPosition.vue
+++ b/src/modules/02_organizationalNew/components/DialogFormPosition.vue
@@ -979,8 +979,10 @@ async function emitSearch(keyword: string, typeSelect: string) {
           </div>
         </q-card-section>
         <q-separator />
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn type="submit" :label="`บันทึก`" color="public" />
+        <q-card-actions align="right">
+          <q-btn type="submit" label="บันทึก" color="public"
+            ><q-tooltip>บันทึก</q-tooltip></q-btn
+          >
         </q-card-actions>
       </form>
     </q-card>
diff --git a/src/modules/02_organizationalNew/components/DialogSortPosition.vue b/src/modules/02_organizationalNew/components/DialogSortPosition.vue
index d737b9930..e47a9986b 100644
--- a/src/modules/02_organizationalNew/components/DialogSortPosition.vue
+++ b/src/modules/02_organizationalNew/components/DialogSortPosition.vue
@@ -121,7 +121,7 @@ watch(
         />
         <q-separator />
 
-        <q-card-section>
+        <q-card-section style="max-height: 70vh" class="scroll">
           <q-table
             v-if="rows.length > 0"
             v-draggable-table="{
@@ -152,7 +152,9 @@ watch(
             :label="`บันทึก`"
             color="public"
             @click="save"
-          />
+          >
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
         </q-card-actions>
       </q-card>
     </q-dialog>
diff --git a/src/modules/16_positionEmployee/components/DialogFormPosition.vue b/src/modules/16_positionEmployee/components/DialogFormPosition.vue
index ea0a09522..83d4e1f32 100644
--- a/src/modules/16_positionEmployee/components/DialogFormPosition.vue
+++ b/src/modules/16_positionEmployee/components/DialogFormPosition.vue
@@ -713,8 +713,10 @@ watch(
           </div>
         </q-card-section>
         <q-separator />
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn type="submit" :label="`บันทึก`" color="public" />
+        <q-card-actions align="right">
+          <q-btn type="submit" :label="`บันทึก`" color="public">
+            <q-tooltip>บันทึก</q-tooltip>
+          </q-btn>
         </q-card-actions>
       </form>
     </q-card>
diff --git a/src/modules/16_positionEmployee/components/DialogSortPosition.vue b/src/modules/16_positionEmployee/components/DialogSortPosition.vue
index 6f796c65a..a7333e620 100644
--- a/src/modules/16_positionEmployee/components/DialogSortPosition.vue
+++ b/src/modules/16_positionEmployee/components/DialogSortPosition.vue
@@ -119,7 +119,7 @@ watch(
         />
         <q-separator />
 
-        <q-card-section>
+        <q-card-section style="max-height: 70vh" class="scroll">
           <q-table
             v-if="rows.length > 0"
             v-draggable-table="{
@@ -150,7 +150,9 @@ watch(
             :label="`บันทึก`"
             color="public"
             @click="save"
-          />
+          >
+            <q-tooltip>บันทึก</q-tooltip></q-btn
+          >
         </q-card-actions>
       </q-card>
     </q-dialog>

From 18d1429adbf0a00771f697445ab04239cbfe8fda Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 11 Jun 2024 15:48:29 +0700
Subject: [PATCH 13/15] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4=20=3D>=20=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogAddData.vue              |  7 +--
 .../Achievement/01_ProfessionalLicense.vue    | 45 +++++++++----------
 .../detail/Achievement/02_Train.vue           | 18 +++-----
 .../detail/Achievement/03_Insignia.vue        | 18 +++-----
 .../Achievement/04_DeclarationHonor.vue       | 14 ++----
 .../Achievement/05_ResultsPerformance.vue     | 20 +++------
 .../detail/Employee/01_DataEmployee.vue       | 34 ++++++--------
 .../detail/Employee/02_Employment.vue         | 10 +----
 .../detail/GovernmentInformation/01_Info.vue  | 16 ++-----
 .../GovernmentInformation/02_Discipline.vue   | 22 +++------
 .../detail/GovernmentInformation/03_Leave.vue | 13 +-----
 .../04_PerformSpecialWork.vue                 | 14 ++----
 .../detail/PersonalInformation/01_Profile.vue |  4 +-
 .../02_NameChangeHistory.vue                  |  7 ++-
 .../detail/PersonalInformation/03_Address.vue | 22 ++++-----
 .../PersonalInformation/04_FamilyNew.vue      | 25 ++++-------
 .../PersonalInformation/05_Education.vue      | 14 ++----
 .../PersonalInformation/06_SpecialSkill.vue   | 14 ++----
 .../detail/Salary/01_PositionSalary.vue       | 14 ++----
 .../detail/Salary/02_NotReceiveSalary.vue     | 22 +++------
 .../04_registryNew/views/detailView.vue       | 42 ++++-------------
 21 files changed, 117 insertions(+), 278 deletions(-)

diff --git a/src/modules/04_registryNew/components/DialogAddData.vue b/src/modules/04_registryNew/components/DialogAddData.vue
index 10a72a587..7b91ec9ca 100644
--- a/src/modules/04_registryNew/components/DialogAddData.vue
+++ b/src/modules/04_registryNew/components/DialogAddData.vue
@@ -182,9 +182,8 @@ watch(
   <q-dialog v-model="modal" persistent>
     <q-card style="min-width: 350px">
       <q-form @submit.prevent @validation-success="onSubmit()" greedy>
-        <q-card-section class="flex justify-between" style="padding: 0">
-          <DialogHeader tittle="เพิ่มข้อมูล" :close="closeDialog" />
-        </q-card-section>
+        <DialogHeader tittle="เพิ่มข้อมูล" :close="closeDialog" />
+
         <q-separator />
         <q-card-section class="q-pa-md q-col-gutter-md">
           <div class="row q-gutter-sm">
@@ -375,8 +374,6 @@ watch(
           <q-btn
             id="onSubmit"
             type="submit"
-            dense
-            unelevated
             label="บันทึก"
             color="public"
             class="q-px-md"
diff --git a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
index 58ff6abb4..bf18daa96 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -238,7 +238,7 @@ function closeHistoryDialog() {
 async function fetchData(id: string) {
   showLoader();
   await http
-    .get(config.API.profileNewCertificateByProfileId(id,empType.value))
+    .get(config.API.profileNewCertificateByProfileId(id, empType.value))
     .then(async (res) => {
       rows.value = res.data.result;
     })
@@ -290,10 +290,13 @@ async function addData() {
 
 async function editData(idData: string) {
   await http
-    .patch(config.API.profileNewCertificateByCertificateId(idData,empType.value), {
-      ...profesLicenseData,
-      profileId: undefined,
-    })
+    .patch(
+      config.API.profileNewCertificateByCertificateId(idData, empType.value),
+      {
+        ...profesLicenseData,
+        profileId: undefined,
+      }
+    )
     .then(() => {
       fetchData(id.value);
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -325,7 +328,7 @@ async function editData(idData: string) {
 async function fetchHistoryData(id: string) {
   showLoader();
   await http
-    .get(config.API.profileNewCertificateHisByCertificateId(id,empType.value))
+    .get(config.API.profileNewCertificateHisByCertificateId(id, empType.value))
     .then(async (res) => {
       historyRows.value = res.data.result;
     })
@@ -551,11 +554,11 @@ onMounted(async () => {
           "
           :close="closeDialog"
         />
-        <q-separator color="grey-4" />
+        <q-separator />
 
-        <q-card-section style="max-height: 55vh" class="scroll">
-          <div class="row q-gutter-sm q-pb-sm">
-            <div class="col">
+        <q-card-section>
+          <div class="row q-col-gutter-sm q-pb-sm">
+            <div class="col-xs-12 col-md-6">
               <q-input
                 outlined
                 v-model="profesLicenseData.certificateType"
@@ -567,7 +570,7 @@ onMounted(async () => {
                 hide-bottom-space
               />
             </div>
-            <div class="col">
+            <div class="col-xs-12 col-md-6">
               <q-input
                 outlined
                 v-model="profesLicenseData.issuer"
@@ -582,8 +585,8 @@ onMounted(async () => {
               />
             </div>
           </div>
-          <div class="row q-gutter-sm q-pb-sm">
-            <div class="col">
+          <div class="row q-col-gutter-sm q-pb-sm">
+            <div class="col-xs-12 col-md-6">
               <q-input
                 outlined
                 v-model="profesLicenseData.certificateNo"
@@ -595,7 +598,7 @@ onMounted(async () => {
                 hide-bottom-space
               />
             </div>
-            <div class="col">
+            <div class="col-xs-12 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="profesLicenseData.issueDate"
@@ -684,17 +687,9 @@ onMounted(async () => {
             </div>
           </div>
         </q-card-section>
-        <q-separator color="grey-4" />
+        <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-px-md"
-          >
+          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
@@ -708,7 +703,7 @@ onMounted(async () => {
         tittle="ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ"
         :close="closeHistoryDialog"
       />
-      <q-separator color="grey-4" />
+      <q-separator />
 
       <q-card-section style="max-height: 60vh" class="scroll">
         <div class="row q-gutter-sm q-mb-sm">
diff --git a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
index 61a955d03..a119beb0e 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/02_Train.vue
@@ -700,8 +700,8 @@ onMounted(async () => {
           "
           :close="closeDialog"
         />
-        <q-separator color="grey-4" />
-        <q-card-section style="max-height: 55vh" class="scroll">
+        <q-separator />
+        <q-card-section>
           <div class="row q-mb-sm q-gutter-sm">
             <div class="col">
               <q-input
@@ -1063,17 +1063,9 @@ onMounted(async () => {
             </div>
           </div>
         </q-card-section>
-        <q-separator color="grey-4" />
+        <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-px-md"
-          >
+          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
@@ -1087,7 +1079,7 @@ onMounted(async () => {
         tittle="ประวัติแก้ไขการฝึกอบรม/ดูงาน"
         :close="closeHistoryDialog"
       />
-      <q-separator color="grey-4" />
+      <q-separator />
       <q-card-section style="max-height: 60vh" class="scroll">
         <div class="row q-gutter-sm q-mb-sm">
           <q-space />
diff --git a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
index 5012e6989..6d52cc1dc 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
@@ -811,8 +811,8 @@ onMounted(async () => {
           "
           :close="clickClose"
         />
-        <q-separator color="grey-4" />
-        <q-card-section style="max-height: 55vh" class="scroll">
+        <q-separator />
+        <q-card-section>
           <div class="row col-12 q-col-gutter-sm">
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
@@ -1103,17 +1103,9 @@ onMounted(async () => {
             </div>
           </div>
         </q-card-section>
-        <q-separator color="grey-4" />
+        <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-px-md"
-          >
+          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
@@ -1127,7 +1119,7 @@ onMounted(async () => {
         tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"
         :close="() => (modalHistory = false)"
       />
-      <q-separator color="grey-4" />
+      <q-separator  />
 
       <q-card-section style="max-height: 60vh" class="scroll">
         <div class="row q-gutter-sm q-mb-sm">
diff --git a/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue b/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
index bd848d23a..6303e54d3 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/04_DeclarationHonor.vue
@@ -541,8 +541,8 @@ onMounted(async () => {
           "
           :close="clickClose"
         />
-        <q-separator color="grey-4" />
-        <q-card-section style="max-height: 55vh" class="scroll">
+        <q-separator />
+        <q-card-section>
           <div class="row col-12 q-col-gutter-sm">
             <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
               <q-radio
@@ -736,15 +736,7 @@ onMounted(async () => {
         </q-card-section>
         <q-separator color="grey-4" />
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-px-md"
-          >
+          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
index 54bf40e03..52120b315 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/05_ResultsPerformance.vue
@@ -367,7 +367,9 @@ async function clickHistory(row: ResponseObject) {
 
   showLoader();
   try {
-    const res = await http.get(config.API.profileNewAssessmentsHisById(row.id,empType.value));
+    const res = await http.get(
+      config.API.profileNewAssessmentsHisById(row.id, empType.value)
+    );
 
     rowsHistory.value = res.data.result;
   } catch (e) {
@@ -611,8 +613,8 @@ onMounted(async () => {
           "
           :close="clickClose"
         />
-        <q-separator color="grey-4" />
-        <q-card-section style="max-height: 55vh" class="scroll">
+        <q-separator />
+        <q-card-section>
           <div class="row col-12 q-col-gutter-sm">
             <div class="col-12">
               <datepicker
@@ -785,15 +787,7 @@ onMounted(async () => {
 
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-px-md"
-          >
+          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
@@ -807,7 +801,7 @@ onMounted(async () => {
         tittle="ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"
         :close="() => (modalHistory = false)"
       />
-      <q-separator color="grey-4" />
+      <q-separator />
       <q-card-section style="max-height: 60vh" class="scroll">
         <div class="row q-gutter-sm q-mb-sm">
           <q-space />
diff --git a/src/modules/04_registryNew/components/detail/Employee/01_DataEmployee.vue b/src/modules/04_registryNew/components/detail/Employee/01_DataEmployee.vue
index 817b8fa96..9d9b4e307 100644
--- a/src/modules/04_registryNew/components/detail/Employee/01_DataEmployee.vue
+++ b/src/modules/04_registryNew/components/detail/Employee/01_DataEmployee.vue
@@ -440,8 +440,8 @@ onMounted(() => {
                 v-model="formData.employeeOc"
                 class="inputgreen"
                 label="สังกัด"
-                :rules="[(val: string) => !!val || `${'กรุณากรอกสังกัด'}`]"
               />
+              <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกสังกัด'}`]" -->
             </div>
 
             <div class="col-xs-6 col-sm-3 col-md-3">
@@ -453,8 +453,8 @@ onMounted(() => {
                 v-model="formData.employeeTypeIndividual"
                 class="inputgreen"
                 label="ประเภทบุคคล"
-                :rules="[(val: string) => !!val || `${'กรุณากรอกประเภทบุคคล'}`]"
               />
+              <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกประเภทบุคคล'}`]" -->
             </div>
             <div class="col-xs-6 col-sm-3 col-md-3">
               <q-input
@@ -465,10 +465,10 @@ onMounted(() => {
                 v-model="formData.employeeWage"
                 class="inputgreen"
                 label="ค่าจ้าง"
-                mask="#"
+                mask="###,###,###,###"
                 reverse-fill-mask
-                :rules="[(val: string) => !!val || `${'กรุณากรอกค่าจ้าง'}`]"
               />
+              <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกค่าจ้าง'}`]" -->
             </div>
 
             <div class="col-xs-6 col-sm-3 col-md-3">
@@ -480,10 +480,10 @@ onMounted(() => {
                 v-model="formData.employeeMoneyIncrease"
                 class="inputgreen"
                 label="เงินเพิ่มการครองชึพชั่วคราว"
-                mask="#"
+                mask="###,###,###,###"
                 reverse-fill-mask
-                :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเพิ่มการครองชึพชั่วคราว'}`]"
               />
+              <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเงินเพิ่มการครองชึพชั่วคราว'}`]" -->
             </div>
             <div class="col-xs-6 col-sm-3 col-md-3">
               <q-input
@@ -494,10 +494,10 @@ onMounted(() => {
                 v-model="formData.employeeMoneyAllowance"
                 class="inputgreen"
                 label="เงินช่วยเหลือการครองชึพชั่วคราว"
-                mask="#"
+                mask="###,###,###,###"
                 reverse-fill-mask
-                :rules="[(val: string) => !!val || `${'กรุณากรอกเงินช่วยเหลือการครองชึพชั่วคราว'}`]"
               />
+              <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเงินช่วยเหลือการครองชึพชั่วคราว'}`]" -->
             </div>
             <div class="col-xs-6 col-sm-3 col-md-3">
               <q-input
@@ -508,10 +508,10 @@ onMounted(() => {
                 v-model="formData.employeeMoneyEmployee"
                 class="inputgreen"
                 label="เงินสมทบประกันสังคม(ลูกจ้าง)"
-                mask="#"
+                mask="###,###,###,###"
                 reverse-fill-mask
-                :rules="[(val: string) => !!val || `${'กรุณากรอกเงินสมทบประกันสังคม(ลูกจ้าง)'}`]"
               />
+              <!-- :rules="[(val: string) => !!val || `${'กรุณากรอกเงินสมทบประกันสังคม(ลูกจ้าง)'}`]" -->
             </div>
             <div class="col-xs-6 col-sm-3 col-md-3">
               <q-input
@@ -522,25 +522,17 @@ onMounted(() => {
                 v-model="formData.employeeMoneyEmployer"
                 class="inputgreen"
                 label="เงินสมทบประกันสังคม(นายจ้าง)"
-                mask="#"
+                mask="###,###,###,###"
                 reverse-fill-mask
-                :rules="[(val: string) => !!val || `${'กรุณากรอกเงินสมทบประกันสังคม(นายจ้าง))'}`]"
               />
+              <!--  :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-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/04_registryNew/components/detail/Employee/02_Employment.vue b/src/modules/04_registryNew/components/detail/Employee/02_Employment.vue
index e5c48239d..4f06326be 100644
--- a/src/modules/04_registryNew/components/detail/Employee/02_Employment.vue
+++ b/src/modules/04_registryNew/components/detail/Employee/02_Employment.vue
@@ -414,15 +414,7 @@ onMounted(() => {
         </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-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
index e9cdc17a9..edb66ec3c 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue
@@ -660,9 +660,9 @@ onMounted(() => {
         <DialogHeader tittle="แก้ไขข้อมูลราชการ" :close="closeDialog" />
         <q-separator color="grey-4" />
 
-        <q-card-section style="max-height: 50vh" class="scroll">
+        <q-card-section>
           <div class="row q-col-gutter-sm">
-            <div class="col-6">
+            <div class="col-xs-12 col-md-6">
               <datepicker
                 v-model="containDate"
                 :locale="'th'"
@@ -704,7 +704,7 @@ onMounted(() => {
                 </template>
               </datepicker>
             </div>
-            <div class="col-6">
+            <div class="col-xs-12 col-md-6">
               <datepicker
                 v-model="workDate"
                 :locale="'th'"
@@ -764,15 +764,7 @@ onMounted(() => {
         </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-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
index 98f44178d..4a0c26983 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/02_Discipline.vue
@@ -598,7 +598,7 @@ onMounted(async () => {
         <q-separator color="grey-4" />
         <q-card-section style="max-height: 50vh" class="scroll">
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="disciplineData.date"
@@ -634,7 +634,7 @@ onMounted(async () => {
                 </template>
               </datepicker>
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 ref="detailRef"
                 class="full-width inputgreen cursor-pointer"
@@ -647,7 +647,7 @@ onMounted(async () => {
                 :label="`${'รายละเอียด'}`"
               />
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <selector
                 class="full-width inputgreen cursor-pointer"
                 outlined
@@ -669,7 +669,7 @@ onMounted(async () => {
                     ) "
               />
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 class="full-width inputgreen cursor-pointer"
                 outlined
@@ -679,7 +679,7 @@ onMounted(async () => {
                 :label="`${'ล้างมลทิน'}`"
               />
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 ref="refCommandNoRef"
                 class="full-width inputgreen cursor-pointer"
@@ -696,7 +696,7 @@ onMounted(async () => {
                 </template>
               </q-input>
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="disciplineData.refCommandDate"
@@ -737,15 +737,7 @@ onMounted(async () => {
         </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-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue
index 4c45c9d50..d860bfc4d 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/03_Leave.vue
@@ -1,4 +1,3 @@
-div
 <script setup lang="ts">
 import { ref, reactive, onMounted } from "vue";
 import { useRoute } from "vue-router";
@@ -683,7 +682,7 @@ onMounted(() => {
         />
         <q-separator color="grey-4" />
 
-        <q-card-section style="max-height: 50vh" class="scroll">
+        <q-card-section>
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-select
@@ -802,15 +801,7 @@ onMounted(() => {
         </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-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue b/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
index 258a35cf7..83d9f3b07 100644
--- a/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
+++ b/src/modules/04_registryNew/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
@@ -541,8 +541,8 @@ onMounted(async () => {
           "
           :close="closeDialog"
         />
-        <q-separator color="grey-4" />
-        <q-card-section style="max-height: 50vh" class="scroll">
+        <q-separator />
+        <q-card-section>
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
@@ -709,15 +709,7 @@ onMounted(async () => {
         </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-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
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 39c457bb2..07a1f6ce1 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
@@ -505,7 +505,7 @@ onMounted(async () => {
         />
 
         <q-separator />
-        <q-card-section style="max-height: 50vh" class="scroll">
+        <q-card-section>
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-input
@@ -782,8 +782,6 @@ onMounted(async () => {
 
         <q-card-actions align="right">
           <q-btn
-            dense
-            unelevated
             label="บันทึก"
             id="onSubmit"
             type="submit"
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
index 3b39eeaa8..47d23f350 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -709,12 +709,13 @@ watch(
           :tittle="dialogStatus === 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
           :close="closeDialog"
         />
-        <q-separator color="grey-4" />
+        <q-separator />
 
-        <q-card-section style="max-height: 50vh" class="scroll">
+        <q-card-section>
           <div class="row q-mb-sm">
             <div class="col-5">
               <q-select
+                class="inputgreen"
                 outlined
                 v-model="changeNameData.status"
                 :options="statusOption"
@@ -923,9 +924,7 @@ watch(
           <q-btn
             id="onSubmit"
             type="submit"
-            dense
             :disable="submitDisable"
-            unelevated
             label="บันทึก"
             color="public"
             class="q-px-md"
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
index 11237ef9d..bf1868667 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
@@ -254,7 +254,9 @@ const columnsHistory = ref<QTableProps["columns"]>([
 async function getData() {
   showLoader();
   await http
-    .get(config.API.profileNewAddressByProfileId(profileId.value,empType.value))
+    .get(
+      config.API.profileNewAddressByProfileId(profileId.value, empType.value)
+    )
     .then((res) => {
       Object.assign(addressData, res.data.result);
 
@@ -369,7 +371,7 @@ async function fetchAll() {
 async function editData() {
   showLoader();
   await http
-    .patch(config.API.profileNewAddressById(id.value,empType.value), {
+    .patch(config.API.profileNewAddressById(id.value, empType.value), {
       ...formData,
       id: undefined,
     })
@@ -423,7 +425,7 @@ async function onClickOpenDialog() {
 async function clickHistory() {
   modalHistory.value = true;
   await http
-    .get(config.API.profileNewAddressHisById(id.value,empType.value))
+    .get(config.API.profileNewAddressHisById(id.value, empType.value))
     .then((res) => {
       rowsHistory.value = res.data.result;
     })
@@ -580,8 +582,8 @@ onMounted(async () => {
     <q-card>
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader tittle="แก้ไขข้อมูลที่อยู่" :close="clickClose" />
-        <q-separator color="grey-4" />
-        <q-card-section style="max-height: 60vh" class="scroll">
+        <q-separator />
+        <q-card-section>
           <div class="col-12 q-pb-xs">
             <q-input
               dense
@@ -802,15 +804,7 @@ onMounted(async () => {
         </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-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyNew.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyNew.vue
index 3b4a01923..01cf590ad 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyNew.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyNew.vue
@@ -260,7 +260,6 @@ function fetchDataChildren() {
 function onSubmit(type: string) {
   dialogConfirm($q, async () => {
     showLoader();
-
     const formBody = {
       profileId:
         !isEdit.value && empType.value === "" ? profileId.value : undefined,
@@ -325,7 +324,7 @@ function onOpenDialogForm(
 
   if (type === "father") {
     titleForm.value = "บิดา";
-    console.log(fatherData.isLive);
+    console.log(fatherData);
 
     fromData.isLive =
       fatherData.isLive === null ? 1 : fatherData.isLive ? 1 : 0;
@@ -793,7 +792,7 @@ onMounted(() => {
           "
           :close="closeDialog"
         />
-        <q-separator color="grey-4" />
+        <q-separator />
         <q-card-section>
           <div class="q-col-gutter-sm">
             <div class="row col" v-if="typeForm === 'couple'">
@@ -832,8 +831,10 @@ onMounted(() => {
                   :rules="
                     typeForm !== 'couple'
                       ? [
+                          (val) => !!val || 'กรุณากรอกเลขบัตรประชาชน',
                           (val) =>
-                            val.length === 13 || 'กรุณากรอกเลขบัตรประชาชน',
+                            val.length === 13 ||
+                            'กรุณากรอกเลขบัตรประชาชนให้ครบ 13 หลัก',
                         ]
                       : []
                   "
@@ -951,17 +952,9 @@ onMounted(() => {
         </q-card-section>
         <q-separator />
         <q-card-actions align="right">
-          <div class="q-pa-sm">
-            <q-btn
-              unelevated
-              label="บันทึก"
-              id="onSubmit"
-              type="submit"
-              color="public"
-            >
-              <q-tooltip>บันทึกข้อมูล</q-tooltip>
-            </q-btn>
-          </div>
+          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
         </q-card-actions>
       </q-form>
     </q-card>
@@ -981,7 +974,7 @@ onMounted(() => {
         }`"
         :close="closeDialog"
       />
-      <q-separator color="grey-4" />
+      <q-separator />
       <q-card-section>
         <div class="row q-gutter-sm q-mb-sm">
           <q-space />
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
index c8ece79b7..20e886e3a 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
@@ -801,7 +801,7 @@ onMounted(async () => {
       <q-tr :props="props" class="cursor-pointer">
         <q-td v-for="col in props.cols" :key="col.id">
           <div>
-            {{ col.value === ""|| col.value === null ? "-" : col.value }}
+            {{ col.value === "" || col.value === null ? "-" : col.value }}
           </div>
         </q-td>
         <q-td auto-width>
@@ -975,7 +975,7 @@ onMounted(async () => {
           :close="closeDialog"
         />
         <q-separator />
-        <q-card-section style="max-height: 60vh" class="scroll">
+        <q-card-section>
           <div class="row q-col-gutter-sm">
             <div class="col-6">
               <q-select
@@ -1386,15 +1386,7 @@ onMounted(async () => {
         <q-separator />
 
         <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
+          <q-btn id="onSubmit" type="submit" label="บันทึก" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
index 577cc3273..2b5a6c600 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -510,8 +510,8 @@ onMounted(async () => {
           "
           :close="closeDialog"
         />
-        <q-separator color="grey-4" />
-        <q-card-section style="max-height: 50vh" class="scroll">
+        <q-separator />
+        <q-card-section>
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-input
@@ -563,15 +563,7 @@ onMounted(async () => {
         <q-separator />
 
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-px-md"
-          >
+          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
index 2ec844c0b..8316e30a7 100644
--- a/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue
@@ -10,7 +10,7 @@ import type {
   DataOption2,
   DataOption,
 } from "@/modules/04_registryNew/interface/index/Main";
-import type { ObjectSalaryRef } from "@/modules/04_registryNew/interface/index/salary";
+
 import type { FormSalaryNew } from "@/modules/04_registryNew/interface/request/Salary";
 
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -669,7 +669,7 @@ onMounted(() => {
         />
         <q-separator color="grey-4" />
 
-        <q-card-section style="max-height: 55vh" class="scroll">
+        <q-card-section style="max-height: 100%" class="scroll">
           <div class="row col-12 q-col-gutter-sm">
             <div class="col-xs-6 col-sm-6 col-md-6">
               <datepicker
@@ -984,15 +984,7 @@ onMounted(() => {
         </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-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
index 17f9cfb96..2765dd722 100644
--- a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
@@ -436,11 +436,11 @@ onMounted(() => {
           "
           :close="onClickCloseDialog"
         />
-        <q-separator color="grey-4" />
+        <q-separator />
 
-        <q-card-section style="max-height: 55vh" class="scroll">
+        <q-card-section>
           <div class="row col-12 q-col-gutter-sm">
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="formData.date"
@@ -477,7 +477,7 @@ onMounted(() => {
                 </template>
               </datepicker>
             </div>
-            <div class="col-6">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 ref="referenceRef"
                 outlined
@@ -507,7 +507,7 @@ onMounted(() => {
                 :label="`${'รายละเอียด'}`"
               />
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <q-input
                 outlined
                 dense
@@ -523,7 +523,7 @@ onMounted(() => {
                 </template>
               </q-input>
             </div>
-            <div class="col-xs-6 col-sm-6 col-md-6">
+            <div class="col-xs-12 col-sm-6 col-md-6">
               <datepicker
                 menu-class-name="modalfix"
                 v-model="formData.refCommandDate"
@@ -567,15 +567,7 @@ onMounted(() => {
         <q-separator />
 
         <q-card-actions align="right">
-          <q-btn
-            dense
-            unelevated
-            label="บันทึก"
-            id="onSubmit"
-            type="submit"
-            color="public"
-            class="q-px-md"
-          >
+          <q-btn label="บันทึก" id="onSubmit" type="submit" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/04_registryNew/views/detailView.vue b/src/modules/04_registryNew/views/detailView.vue
index de4e24dcd..1461cecd1 100644
--- a/src/modules/04_registryNew/views/detailView.vue
+++ b/src/modules/04_registryNew/views/detailView.vue
@@ -7,10 +7,10 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
 import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
-import type { DataPerson } from "@/modules/04_registryNew/interface/response/Main";
+
 import avatar from "@/assets/avatar_user.jpg";
 import TabMain from "@/modules/04_registryNew/components/detail/TabMain.vue";
-import UploadFile from "@/modules/11_discipline/components/UploadFile.vue";
+
 import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Profile";
 import DialogHeader from "@/components/DialogHeader.vue";
 /** ถึงเเก่กรรม */
@@ -672,7 +672,9 @@ onMounted(async () => {
                 v-if="formDetail && formDetail.firstName && formDetail.lastName"
               >
                 {{
-                  `${formDetail?.prefix}${formDetail?.firstName} ${formDetail?.lastName} ${leaveReason}`
+                  `${formDetail?.prefix ? formDetail?.prefix : ""}${
+                    formDetail?.firstName
+                  } ${formDetail?.lastName} ${leaveReason}`
                 }}
               </h2>
             </div>
@@ -850,20 +852,8 @@ onMounted(async () => {
   <!-- Dialog เลือก Image -->
   <q-dialog v-model="dialogImage" persistent>
     <q-card style="width: 100vw; max-width: 60vw">
-      <q-card-section class="q-py-sm row">
-        <div class="text-h6">เลือกรูปภาพ</div>
-        <q-space />
-        <q-btn
-          icon="close"
-          unelevated
-          round
-          dense
-          @click="closeImage"
-          style="color: #ff8080; background-color: #ffdede"
-        >
-          <q-tooltip>ปิดหน้านี้</q-tooltip>
-        </q-btn>
-      </q-card-section>
+      <DialogHeader :tittle="'เลือกรูปภาพ'" :close="closeImage" />
+
       <q-separator />
       <q-card-section class="col-12 row">
         <div
@@ -935,23 +925,7 @@ onMounted(async () => {
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">
-        <!-- <q-btn
-          flat
-          round
-          color="red"
-          @click="() => {}"
-          icon="mdi-delete-outline"
-        >
-          <q-tooltip>ลบรูปภาพ</q-tooltip>
-        </q-btn> -->
-        <q-btn
-          icon="check"
-          dense
-          flat
-          round
-          @click="selectAvatarHistory"
-          color="positive"
-        >
+        <q-btn @click="selectAvatarHistory" color="public" label="เลือกรูปภาพ">
           <q-tooltip>เลือกรูปภาพ</q-tooltip>
         </q-btn>
       </q-card-actions>

From b53eaa8feae1496a99edf102f13ff7aa4ae3aa23 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 11 Jun 2024 16:19:55 +0700
Subject: [PATCH 14/15] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A?=
 =?UTF-8?q?=E0=B8=B7=E0=B9=88=E0=B8=AD=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=8A=E0=B8=B1=E0=B9=88=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=84=E0=B8=A3=E0=B8=B2=E0=B8=A7=20=3D>=20Query?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DialogAddEmployee.vue          | 21 +++-------
 .../08_registryEmployee/views/Main.vue        | 40 ++++++++++++++++---
 2 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/src/modules/08_registryEmployee/components/DialogAddEmployee.vue b/src/modules/08_registryEmployee/components/DialogAddEmployee.vue
index 6fd35bb66..7a44e1458 100644
--- a/src/modules/08_registryEmployee/components/DialogAddEmployee.vue
+++ b/src/modules/08_registryEmployee/components/DialogAddEmployee.vue
@@ -265,12 +265,11 @@ watch(
   <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>
+        <DialogHeader
+          tittle="เพิ่มข้อมูลลูกจ้างชั่วคราว"
+          :close="closeDialog"
+        />
+
         <q-separator />
         <q-card-section class="q-pa-md q-col-gutter-md">
           <div class="row q-col-gutter-md">
@@ -551,15 +550,7 @@ watch(
 
         <q-separator />
         <q-card-actions align="right">
-          <q-btn
-            id="onSubmit"
-            type="submit"
-            dense
-            unelevated
-            label="บันทึก"
-            color="public"
-            class="q-px-md"
-          >
+          <q-btn id="onSubmit" type="submit" label="บันทึก" color="public">
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index e8ea7d47e..3e068d875 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -7,7 +7,10 @@ import config from "@/app.config";
 
 /** importType*/
 import type { QInput, QTableProps } from "quasar";
-import type { NewPagination } from "@/modules/08_registryEmployee/interface/index/Main";
+import type {
+  NewPagination,
+  DataOption,
+} from "@/modules/08_registryEmployee/interface/index/Main";
 import type { DataEmployee } from "@/modules/08_registryEmployee/interface/response/Employee";
 
 /** importComponents*/
@@ -41,7 +44,13 @@ const queryParams = reactive({
   page: 1,
   pageSize: 10,
   type: "temp",
+  searchField: "fullName",
+  searchKeyword: "",
 });
+const searchTypeOption = ref<DataOption[]>([
+  { id: "fullName", name: "ชื่อ-นามสกุล" },
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
+]);
 
 const columns = ref<QTableProps["columns"]>([
   {
@@ -298,21 +307,41 @@ onMounted(() => {
       </q-btn>
       <q-space />
       <div class="items-center" style="display: flex">
+        <q-select
+          outlined
+          v-model="queryParams.searchField"
+          :options="searchTypeOption"
+          emit-value
+          dense
+          emit-option
+          option-label="name"
+          option-value="id"
+          map-options
+        />
         <!-- ค้นหาข้อความใน table -->
         <q-input
           standout
           dense
-          v-model="filter"
+          v-model="queryParams.searchKeyword"
           ref="filterRef"
           outlined
-          debounce="300"
           placeholder="ค้นหา"
           style="max-width: 200px"
           class="q-ml-sm"
+          @keydown.enter.prevent="(queryParams.page = 1), fetchList()"
         >
           <template v-slot:append>
-            <q-icon v-if="filter == ''" name="search" />
-            <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" />
+            <q-icon v-if="queryParams.searchKeyword == ''" name="search" />
+            <q-icon
+              v-if="queryParams.searchKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="
+                (queryParams.searchKeyword = ''),
+                  (queryParams.page = 1),
+                  fetchList()
+              "
+            />
           </template>
         </q-input>
         <!-- แสดงคอลัมน์ใน table -->
@@ -337,7 +366,6 @@ onMounted(() => {
         :rows="rows"
         :columns="columns"
         :visible-columns="visibleColumns"
-        :filter="filter"
         row-key="id"
         :rows-per-page-options="[10, 25, 50, 100]"
         @update:pagination="updatePagination"

From d2edb445406d91eb3d5e930b7fcc194dce500afe Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 11 Jun 2024 16:34:25 +0700
Subject: [PATCH 15/15] CardProfile => CheckAvatar

---
 src/api/02_organizational/api.organization.ts | 11 +++++++----
 src/components/CardProfile.vue                | 17 ++++++++++++-----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index 59f15364e..4695b7b57 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -20,10 +20,10 @@ export default {
   /** position*/
   orgPosPosition: `${orgPos}/position`,
   orgPosPositionById: (id: string) => `${orgPos}/position/${id}`,
-  orgPosPositionExecutive : () => `${orgPos}/position/executive`,
+  orgPosPositionExecutive: () => `${orgPos}/position/executive`,
   orgPosExecutive: `${orgPos}/executive`,
   orgPosType: `${orgPos}/type`,
-  orgPosTypeId:  (id: string) => `${orgPos}/type/${id}`,
+  orgPosTypeId: (id: string) => `${orgPos}/type/${id}`,
   orgPosLevel: `${orgPos}/level`,
   orgPosMaster: `${orgPos}/master`,
   orgPosMasterById: (id: string) => `${orgPos}/master/${id}`,
@@ -86,7 +86,10 @@ export default {
   orgProfileEmp: `${orgEmployeePos}/profile`,
   orgSearchProfileEmp: `${orgProfile}-employee/search`,
 
-  orgProfileById:(id:string,type:string)=>`${orgProfile}${type}/${id}`,
+  orgProfileById: (id: string, type: string) => `${orgProfile}${type}/${id}`,
 
-  orgDeceasedProfile:`${orgPos}/profile/search`
+  orgDeceasedProfile: `${orgPos}/profile/search`,
+
+  //
+  orgCheckAvatar: (id: string) => `${orgProfile}/avatar/profileId/${id}`,
 };
diff --git a/src/components/CardProfile.vue b/src/components/CardProfile.vue
index af2afff71..b275af850 100644
--- a/src/components/CardProfile.vue
+++ b/src/components/CardProfile.vue
@@ -38,7 +38,7 @@ const profileId = ref<string | null>("");
 
 function fetchDataProfile(data: DataProfile) {
   if (data.profileId) {
-    fetchProfile(data.profileId);
+    fetchCheckAvatar(data.profileId);
   }
   profile.id = data.profileId;
   profile.fullName = `${data.prefix ?? ""}${data.firstName ?? ""} ${
@@ -72,12 +72,19 @@ function fetchDataProfile(data: DataProfile) {
   }
 }
 
-function fetchProfile(id: string) {
+function fetchCheckAvatar(id: string) {
+  http.get(config.API.orgCheckAvatar(id)).then((res) => {
+    const data = res.data.result;
+    if (data.avatarName) {
+      fetchProfile(id, data.avatarName);
+    }
+  });
+}
+
+function fetchProfile(id: string, name: string) {
   if (profile.avatar === "") {
     http
-      .get(
-        config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `profile-${id}`)
-      )
+      .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, `${name}`))
       .then(async (res) => {
         profile.avatar = res.data.downloadUrl;
       });